/* ==========================================================================
   Layer Add — feuille « contenu long »
   Journal, à propos, FAQ, pages légales.
   Colonne de lecture étroite, sommaire ancré, encadrés au calque de marque.
   Ne se charge que sur les pages de contenu.py (jamais sur les molécules).
   ========================================================================== */

/* ------------------------------------------------------------- fil d'Ariane */

.ariane {
  max-width: var(--largeur);
  margin: clamp(18px, 2.4vw, 30px) auto 0;
  padding-inline: var(--gouttiere);
  font-size: 13px;
  font-weight: 500;
  color: var(--gris-1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ariane a { color: var(--gris-1); text-decoration: none; }
.ariane a:hover { color: var(--accent); text-decoration: underline; }
.ariane [aria-current="page"] { color: var(--encre); font-weight: 600; }
.ariane__sep { color: var(--gris-2); }

/* --------------------------------------------------------------- l'article */

.article {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 40px) var(--gouttiere) clamp(64px, 7vw, 104px);
}

.article-tete {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
  padding-block: clamp(12px, 2vw, 24px) clamp(20px, 2.4vw, 32px);
}
.article-tete .etiquette {
  display: inline-block;
  color: var(--accent);
  margin-bottom: 14px;
}
.article-tete .display {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -.018em;
}
.article-tete .sous {
  margin-top: 20px;
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.5;
  color: #35404c;
}

/* image d'en-tête pleine largeur (mais corps en colonne étroite) */
.article-hero {
  display: block;
  width: 100%;
  margin: clamp(20px, 2.6vw, 36px) 0 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gris-2);
}
.article-hero img { width: 100%; height: auto; object-fit: cover; }

/* ------------------------------------------------- corps : sommaire + colonne */

.article-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(680px, 100%) minmax(0, 1fr);
  column-gap: clamp(28px, 3.4vw, 60px);
  align-items: start;
  margin-top: clamp(34px, 4vw, 60px);
}

.contenu-colonne {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* Sommaire ancré, colonne de gauche, collant */
.sommaire {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--entete) + 22px);
  justify-self: end;
  width: min(240px, 100%);
  padding: 20px 22px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--calque-a) 40%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.sommaire .etiquette {
  display: block;
  color: var(--accent);
  margin-bottom: 12px;
}
.sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: som;
}
.sommaire li { counter-increment: som; margin: 0; }
.sommaire li + li { margin-top: 2px; }
.sommaire a {
  display: block;
  padding: 6px 0 6px 26px;
  position: relative;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 500;
  color: #3a4552;
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--transition);
}
.sommaire a::before {
  content: counter(som);
  position: absolute;
  left: 0;
  top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.sommaire a:hover { color: var(--accent); }

/* ------------------------------------------------------------ prose (corps) */

.contenu-colonne .section {
  padding: 0;
  margin: 0 0 clamp(34px, 3.6vw, 50px);
  scroll-margin-top: calc(var(--entete) + 20px);
}
.contenu-colonne .section > .titre {
  font-size: clamp(23px, 2.3vw, 30px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  scroll-margin-top: calc(var(--entete) + 20px);
}

.contenu-colonne .corps {
  font-size: 18.5px;
  line-height: 1.72;
  color: #23292f;
  margin: 0 0 1.05em;
}
.contenu-colonne .corps:last-child { margin-bottom: 0; }
.contenu-colonne .corps strong { font-weight: 700; color: var(--encre); }
.contenu-colonne .corps em { font-style: italic; }

/* appels de note (renvois vers la bibliographie) */
.renvoi { font-size: .66em; line-height: 0; vertical-align: super; white-space: nowrap; }
.renvoi a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  padding: 0 1px;
}
.renvoi a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- encadrés marque */

/* Points clés — en tête de colonne */
.encadre {
  margin: 0 0 clamp(30px, 3.2vw, 42px);
  padding: 22px 24px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, #fff);
}
.encadre--cle .etiquette { display: block; color: var(--accent); margin-bottom: 12px; }
.encadre--cle ul { list-style: none; margin: 0; padding: 0; }
.encadre--cle li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 16.5px;
  line-height: 1.5;
  color: #23292f;
}
.encadre--cle li + li { border-top: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); }
.encadre--cle li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}
.encadre--cle li strong { font-weight: 700; }

/* Citation en exergue (pull-quote) — filet horizontal court, pas de barre verticale */
.citation {
  position: relative;
  margin: clamp(30px, 3.4vw, 44px) 0;
  padding: 22px 0 6px;
  font-size: clamp(20px, 2.1vw, 24px);
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #1a2733;
}
.citation::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--accent);
}
.citation p { margin: 0; }

/* --------------------------------------------------------- pour aller plus loin */

.pour-aller-plus-loin {
  margin: clamp(44px, 5vw, 64px) 0 0;
  padding: clamp(26px, 3vw, 34px);
  border-radius: 12px;
  background: #F4F3EF;
  border: 1px solid var(--gris-2);
}
.pour-aller-plus-loin .titre {
  font-size: clamp(21px, 2vw, 26px);
  margin: 0 0 8px;
}
.pour-aller-plus-loin .petit { color: var(--gris-1); margin: 0 0 18px; max-width: 52ch; }
.liens-maille {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.liens-maille a {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--gris-2);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  transition: border-color var(--transition), color var(--transition);
}
.liens-maille a:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------- références */

.references {
  margin: clamp(40px, 4.4vw, 56px) 0 0 !important;
  padding-top: clamp(28px, 3vw, 36px);
  border-top: 1px solid var(--gris-2);
}
.references > .titre {
  font-size: clamp(20px, 1.9vw, 25px) !important;
  margin-bottom: 18px !important;
}
.biblio {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: bib;
}
.biblio li {
  counter-increment: bib;
  position: relative;
  padding: 0 0 0 30px;
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3a4552;
}
.biblio li::before {
  content: counter(bib) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.biblio .ref-titre { color: #23292f; font-style: italic; }
.biblio .ref-src { color: var(--gris-1); }
.biblio a {
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.biblio a:hover { text-decoration: underline; }
:target.section, li:target { scroll-margin-top: calc(var(--entete) + 20px); }
.biblio li:target { background: color-mix(in srgb, var(--accent) 8%, #fff); border-radius: 6px; }

/* ============================================================= page « à propos » */

.apropos .contenu-colonne,
.legal .contenu-colonne {
  grid-column: 2;
  margin-inline: auto;
}
.apropos-img {
  display: block;
  width: 100%;
  max-width: 1120px;
  margin: clamp(20px, 2.6vw, 36px) auto 0;
  border-radius: 10px;
  overflow: hidden;
}
.apropos-img img { width: 100%; height: auto; }

/* à propos & légal : pas de sommaire, colonne centrée seule */
.article.apropos .article-corps,
.article.legal .article-corps { display: block; }
.article.apropos .contenu-colonne,
.article.legal .contenu-colonne {
  max-width: 680px;
  margin-inline: auto;
}

.legal-maj { margin-top: 32px; color: var(--gris-1); }

/* ==================================================================== FAQ */

.faq-tete {
  max-width: 760px;
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding-inline: var(--gouttiere);
}
.faq-tete .etiquette { color: var(--accent); display: block; margin-bottom: 14px; }
.faq-tete .display { font-size: clamp(34px, 4.6vw, 56px); }
.faq-tete .sous { margin-top: 18px; font-weight: 500; color: #35404c; }

.faq-liste {
  max-width: 760px;
  margin: clamp(28px, 3.4vw, 44px) auto clamp(60px, 7vw, 96px);
  padding-inline: var(--gouttiere);
}
.qa {
  border-bottom: 1px solid var(--gris-2);
}
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-size: clamp(17px, 1.7vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--encre);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 26px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.qa[open] summary::after { transform: rotate(-135deg); top: 30px; }
.qa .corps {
  padding: 0 44px 22px 0;
  font-size: 16.5px;
  line-height: 1.68;
  color: #35404c;
}
.qa .corps p { margin: 0; }

/* ============================================================= index journal */

.journal-tete {
  max-width: 820px;
  margin: clamp(28px, 3.4vw, 52px) auto clamp(28px, 3vw, 40px);
  padding-inline: var(--gouttiere);
}
.journal-tete .etiquette { color: var(--accent); display: block; margin-bottom: 14px; }
.journal-tete .display { font-size: clamp(38px, 5.2vw, 68px); }
.journal-tete .sous { margin-top: 20px; font-weight: 500; color: #35404c; max-width: 64ch; }

.journal-grille {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere) clamp(64px, 7vw, 104px);
  gap: clamp(20px, 2.2vw, 32px);
}
.jcarte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--gris-2);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), transform var(--transition);
}
.jcarte:hover { border-color: var(--accent); transform: translateY(-3px); }
.jcarte__img { display: block; aspect-ratio: 3 / 2; background: var(--gris-2); }
.jcarte__img img { width: 100%; height: 100%; object-fit: cover; }
.jcarte__txt { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.jcarte__txt .sous { font-size: 20px; line-height: 1.24; }
.jcarte__txt .petit { color: var(--gris-1); line-height: 1.5; flex: 1; }
.jcarte__lire { color: var(--accent); font-weight: 700; font-size: 14px; }

/* =============================================================== responsive */

@media (max-width: 1024px) {
  .article-corps { grid-template-columns: 1fr; }
  .sommaire {
    grid-column: 1;
    position: static;
    justify-self: stretch;
    width: 100%;
    max-width: 680px;
    margin: 0 auto clamp(30px, 4vw, 40px);
  }
  .contenu-colonne {
    grid-column: 1;
    max-width: 680px;
    margin-inline: auto;
  }
  .apropos .contenu-colonne, .legal .contenu-colonne { grid-column: 1; }
}

@media (max-width: 768px) {
  .article-tete .display { font-size: clamp(30px, 8vw, 40px); }
  .contenu-colonne .corps { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .jcarte, .liens-maille a, .qa summary::after { transition: none; }
  .jcarte:hover { transform: none; }
}