/* Véra Castillon. Chroniques : mise en page de lecture. Complète ../style.css. */

/* Fil d'Ariane */
.fil { margin: 0 0 clamp(28px, 4vw, 48px); }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--prune); }
.fil span[aria-current] { color: var(--gris); }

/* Ouverture du registre */
.registre-ouverture { padding-top: clamp(40px, 7vw, 100px); padding-bottom: clamp(56px, 8vw, 120px); }
.registre-ouverture .nom { font-size: clamp(54px, 8vw, 116px); }
.registre-ouverture__texte { align-self: start; }
.une { margin: clamp(48px, 7vw, 0px) 0 0; }
.une a { text-decoration: none; display: block; }
.une .cadre img { aspect-ratio: 4 / 5; object-position: 50% 30%; transition: filter 1.4s var(--courbe); filter: saturate(.92); }
.une a:hover .cadre img { filter: saturate(1); }
.une__etiquette { margin: 22px 0 6px; }
.une__titre { margin: 0 0 10px; font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; }
.une a:hover .une__titre { color: var(--prune); }
.une__texte { margin: 0; font-size: 16px; line-height: 1.55; color: var(--gris); max-width: 30em; }
@media (min-width: 900px) {
  .registre-ouverture__texte { grid-column: 1 / 7; padding-top: 10px; }
  .une { grid-column: 8 / 13; margin-top: 0; }
}
@media (max-width: 599px) {
  .registre-ouverture .rubrique span { display: block; }
  .registre-ouverture .rubrique .sep { display: none; }
}

/* Registre : la table des chroniques */
.registre { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet-fort); }
.registre li { border-bottom: 1px solid var(--filet); }
.registre__ligne {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: var(--gouttiere); row-gap: 6px;
  padding: clamp(22px, 3vw, 36px) 0; text-decoration: none; align-items: start;
}
.registre__num {
  grid-row: 1 / span 4; margin: 0; color: var(--prune);
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1; font-variation-settings: "opsz" 96;
}
.registre__rub { margin: 0; font: 400 10.5px/1.6 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--camel-texte); }
.registre__titre {
  margin: 0; font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.12; letter-spacing: -.005em;
  transition: color .6s var(--courbe);
}
.registre__titre em { color: var(--prune); }
.registre__resume { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--gris); max-width: 36em; }
.registre__folio { display: flex; align-items: baseline; gap: 12px; margin: 10px 0 0; font: 300 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gris); }
.registre__folio .p { flex: 1; border-bottom: 1px dotted var(--filet-fort); transform: translateY(-3px); }
.registre__vignette { display: none; margin: 0; overflow: hidden; background: var(--pierre-3); }
.registre__vignette img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(.35) saturate(.9); transition: filter 1.2s var(--courbe), transform 1.6s var(--courbe); }
.registre__ligne:hover .registre__titre { color: var(--prune); }
.registre__ligne:hover .registre__vignette img { filter: none; transform: scale(1.03); }
@media (min-width: 900px) {
  .registre__ligne { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .registre__num { grid-column: 1 / 3; }
  .registre__rub, .registre__titre, .registre__resume, .registre__folio { grid-column: 3 / 10; }
  .registre__vignette { display: block; grid-column: 11 / 13; grid-row: 1 / span 4; }
}

.methode { padding-bottom: clamp(72px, 9vw, 120px); }
.methode__texte { margin: 0; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.35; font-style: italic; }
.methode__texte + .methode__texte { margin-top: 18px; font-style: normal; font-size: 17px; line-height: 1.6; color: var(--gris); max-width: 36em; }
.methode__texte a { text-decoration-color: var(--prune); }
@media (min-width: 900px) { .methode__texte { grid-column: 3 / 11; } }

/* Chronique : en-tête */
.chronique__tete { padding-top: clamp(36px, 6vw, 90px); }
.chronique__num {
  margin: 0 0 6px; color: var(--prune); font-style: italic;
  font-size: clamp(28px, 3vw, 40px); line-height: 1; font-variation-settings: "opsz" 96;
}
.chronique__titre {
  margin: 0; font-weight: 400; letter-spacing: -.015em; line-height: .98;
  font-size: clamp(42px, 6.6vw, 96px); font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
.chronique__titre em { color: var(--prune); }
.chronique__reponse {
  margin: clamp(24px, 3vw, 40px) 0 0; max-width: 34em;
  font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; font-style: italic;
}
.chronique__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--filet-fort);
  font: 400 11px/1.5 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gris);
}
.chronique__meta span:first-child { color: var(--camel-texte); }
@media (min-width: 900px) {
  .chronique__tete .fil, .chronique__num, .chronique__titre, .chronique__reponse, .chronique__meta { grid-column: 2 / 12; }
}

.chronique__image { margin-top: clamp(44px, 6vw, 80px); margin-bottom: 0; }
.chronique__image .cadre { max-width: 980px; margin: 0 auto; }
.chronique__image .cadre img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
.chronique__image figcaption { max-width: 980px; margin-left: auto; margin-right: auto; }
.chronique__image--haute .cadre { max-width: 640px; }
.chronique__image--haute .cadre img { aspect-ratio: 4 / 5; object-position: 50% 25%; }
.chronique__image--haute figcaption { max-width: 640px; }

/* Corps de lecture : colonne de 65 caractères environ, figures en débord */
.lecture { padding-top: clamp(48px, 6vw, 88px); }
.lecture__corps {
  max-width: 1000px; margin: 0 auto;
  display: grid;
  grid-template-columns: [large-start] minmax(0, 1fr) [texte-start] minmax(0, 34em) [texte-end] minmax(0, 1fr) [large-end];
  font-size: clamp(18px, 1.25vw, 20px); line-height: 1.72;
}
.lecture__corps > * { grid-column: texte; min-width: 0; }
.lecture__corps p { margin: 0 0 1.15em; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.lecture__corps strong { font-weight: 600; }
.lecture__corps .lettrine::first-letter { font-size: 4.2em; }
.lecture__corps h2 {
  margin: 2.1em 0 .8em; padding-top: .9em; border-top: 1px solid var(--filet);
  font-weight: 400; font-size: clamp(25px, 2.4vw, 33px); line-height: 1.15; letter-spacing: -.005em;
  font-variation-settings: "opsz" 60;
}
.lecture__corps h2 .num { display: block; margin-bottom: 6px; font-style: italic; font-size: .62em; color: var(--prune); }

/* Figures */
.figure-lecture { grid-column: large; margin: 1.6em 0 2em; }
.figure-lecture img { width: 100%; height: auto; }
.figure-lecture--etroite { grid-column: texte; justify-self: center; width: min(100%, 24em); }
.figure-lecture figcaption { font-size: 14.5px; }

/* Citation */
.citation {
  margin: 1.6em 0 1.9em; padding: 0; text-align: center;
}
.citation::before, .citation::after {
  content: ""; display: block; width: 44px; height: 1px; margin: 0 auto; background: var(--prune);
}
.citation p {
  margin: .7em auto !important; max-width: 20em;
  font-style: italic; color: var(--prune); hyphens: manual !important;
  font-size: clamp(23px, 2.3vw, 31px); line-height: 1.3; font-variation-settings: "opsz" 60;
}

/* Encadré « Je ne suis pas d'accord » */
.encart-desaccord {
  margin: 1.4em 0 2em; padding: 22px 0 6px;
  border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet-fort);
}
.encart__titre { margin: 0 0 12px !important; font: 400 10.5px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--camel-texte); }
.encart__on {
  font-style: italic; color: var(--gris); font-size: 1.15em; line-height: 1.35;
  text-decoration: line-through; text-decoration-color: var(--prune); text-decoration-thickness: 1px;
}
.encart__je { padding-left: 18px; border-left: 1px solid var(--prune); }
.encart__je::before {
  content: "Je réponds"; display: block; margin-bottom: 4px;
  font: 400 10px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--camel-texte);
}

/* Encadré « Règle de Véra » */
.encart-regle {
  margin: 1.6em 0 2.2em; padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px);
  background: var(--prune-2); color: var(--pierre); text-align: center;
  outline: 1px solid rgba(91, 31, 58, .35); outline-offset: 6px;
}
.encart-regle__num { margin: 0 0 10px !important; font-style: italic; color: var(--camel); font-size: 1.15em; }
.encart-regle__texte { margin: 0 !important; font-size: clamp(21px, 2vw, 27px); line-height: 1.3; hyphens: manual !important; }

/* Carnet de méthode */
.carnet {
  margin: 1.2em 0 2em; padding: clamp(22px, 3vw, 34px) clamp(18px, 3vw, 34px) clamp(10px, 2vw, 18px);
  border: 1px solid var(--filet-fort); outline: 1px solid var(--filet); outline-offset: 5px;
  background: rgba(235, 227, 214, .45);
  font-size: .94em; line-height: 1.62;
}
.carnet__titre { margin: 0 0 14px !important; font: 400 10.5px/1.4 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--camel-texte); }
.carnet ol { margin: 0 0 1em; padding-left: 2.2em; list-style: lower-roman; }
.carnet ol li { margin-bottom: .75em; padding-left: .3em; }
.carnet ol li::marker { color: var(--prune); font-style: italic; }
.carnet__liste { list-style: none; margin: 0 0 1em; padding: 0; border-top: 1px solid var(--filet); }
.carnet__liste li { padding: 7px 0; border-bottom: 1px solid var(--filet); }
.carnet dl { margin: 0 0 1em; }
.carnet dl div { padding: 10px 0; border-top: 1px solid var(--filet); }
.carnet dl div:first-child { border-top: 0; padding-top: 0; }
.carnet dt { font-style: italic; color: var(--prune); }
.carnet dd { margin: 2px 0 0; }

/* Cartes manuscrites */
.manuscrit {
  position: relative; margin: .6em 0 1.6em; padding: 30px clamp(20px, 4vw, 40px) 14px;
  background: #fbf8f3; border: 1px solid var(--pierre-3);
  box-shadow: 0 1px 0 var(--pierre-3), 0 14px 30px -24px rgba(22, 19, 20, .45);
  font-style: italic; line-height: 1.6;
}
.manuscrit::before {
  content: "Ma version"; position: absolute; top: 10px; left: clamp(20px, 4vw, 40px);
  font: 400 9.5px/1 var(--sans); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--camel-texte);
}
.manuscrit p { margin: 0 0 .7em; }
.manuscrit--barre { background: transparent; box-shadow: none; border-style: dashed; color: var(--gris); }
.manuscrit--barre::before { content: "La version courante"; }
.manuscrit--barre p { text-decoration: line-through; text-decoration-color: var(--prune); text-decoration-thickness: 1px; }
.manuscrit__sign { text-align: right; color: var(--prune); font-size: 1.15em; }

/* Post-scriptum */
.apostille {
  margin-top: 2.2em !important; padding-top: 1.2em; border-top: 1px solid var(--filet-fort);
  font-style: italic; color: var(--gris);
}
.apostille span {
  font: 400 10.5px/1 var(--sans); font-style: normal; letter-spacing: .3em; text-transform: uppercase;
  color: var(--prune); margin-right: 8px;
}

/* Pied de chronique */
.chronique__pied { padding-top: clamp(40px, 5vw, 64px); }
.chronique__pied > * { max-width: 34em; margin-left: auto; margin-right: auto; }
.chronique__pied .signature { font-style: italic; font-size: 24px; color: var(--prune); text-align: right; margin: 0 auto 36px; }
.lettre-retour {
  padding: 22px 0; border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet);
  font-size: 17px; line-height: 1.6;
}
.lettre-retour p { margin: 0 0 6px; }
.lettre-retour a { text-decoration-color: var(--prune); overflow-wrap: anywhere; }
.lettre-retour a:hover { color: var(--prune); }
.sources { margin-top: 28px; font-size: 14px; color: var(--gris); }
.sources ul { list-style: none; margin: 0; padding: 0; }
.sources li { padding: 6px 0; border-bottom: 1px solid var(--filet); line-height: 1.5; }
.sources a:hover { color: var(--prune); }

.suite { max-width: 1000px !important; margin-top: clamp(48px, 6vw, 80px) !important; border-top: 1px solid var(--filet-fort); }
.suite ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.suite li { border-bottom: 1px solid var(--filet); }
.suite a { display: block; padding: 20px 0; text-decoration: none; }
.suite__sens { display: block; margin-bottom: 6px; font: 400 10.5px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--camel-texte); }
.suite__titre { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; }
.suite__titre i { color: var(--prune); margin-right: 8px; }
.suite a:hover .suite__titre { color: var(--prune); }
.suite__vide { display: block; padding: 20px 0; color: var(--gris); font-style: italic; }
@media (min-width: 760px) {
  .suite ul { grid-template-columns: 1fr 1fr; }
  .suite li + li { border-left: 1px solid var(--filet); }
  .suite li + li a, .suite li + li .suite__vide { padding-left: var(--gouttiere); text-align: right; }
  .suite li:first-child a, .suite li:first-child .suite__vide { padding-right: var(--gouttiere); }
}
.retours { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: center; margin-top: 36px !important; max-width: 1000px !important; }
.retours .retour { margin-top: 0; }

/* Sommaire en version mobile : lien vers le registre */
@media (max-width: 1079px) { .entete__mobile { display: inline-block; } }


/* Maillage : articles proches et guide */
.proches { max-width: 34em; margin: clamp(40px, 5vw, 64px) auto 0; }
.proches ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filet-fort); }
.proches li { border-bottom: 1px solid var(--filet); }
.proches li a { display: block; padding: 16px 0; text-decoration: none; }
.proches__rub { display: block; margin-bottom: 4px; font: 400 10.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--camel-texte); }
.proches__titre { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.25; }
.proches li a:hover .proches__titre { color: var(--prune); }
.proches__guide { display: inline-block; margin-top: 18px; padding: 10px 0; font-style: italic; color: var(--prune); text-decoration-color: var(--prune); }
.sources a { display: inline-block; padding: 6px 0; }
.lecture__corps a { text-decoration-color: var(--prune); }
.lecture__corps a:hover { color: var(--prune); }
.lecture__corps h3 { margin: 1.6em 0 .4em; font-weight: 400; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; }

/* Sommaire du guide */
.guide-table { margin: 0 0 2.4em; max-width: none; }
.guide-table a { padding: 11px 0; }
.chronique__tete .fil a, .registre-ouverture .fil a { padding: 12px 0; }

/* Bandeau du guide sur le registre */
.guide-bandeau { margin-top: clamp(8px, 2vw, 24px); }
.guide-bandeau__lien { display: grid; text-decoration: none; background: var(--pierre-2); row-gap: 0; }
.guide-bandeau__image { margin: 0; overflow: hidden; }
.guide-bandeau__image img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.guide-bandeau__texte { padding: clamp(26px, 4vw, 52px); align-self: center; }
.guide-bandeau__texte h2 { margin: 0 0 12px; font-weight: 400; font-size: clamp(27px, 3vw, 42px); line-height: 1.08; }
.guide-bandeau__texte p:not(.rubrique) { margin: 0; font-size: 17px; line-height: 1.55; color: var(--gris); max-width: 28em; }
.guide-bandeau__lien:hover h2 { color: var(--prune); }
@media (min-width: 900px) {
  .guide-bandeau__image { grid-column: 1 / 7; }
  .guide-bandeau__texte { grid-column: 7 / 13; }
}

/* Page 404 */
.perdue { padding-top: clamp(64px, 12vw, 160px); padding-bottom: clamp(96px, 14vw, 200px); }
.perdue__texte { max-width: 32em; margin: 18px 0 0; }
.perdue .retours { justify-content: flex-start; max-width: none !important; }