/* ── Habillage des pages légales ──
   Même typographie que le site, mais volontairement plus sobre :
   ce sont des pages qu'on lit, pas des pages qui vendent. */
:root{
  --ink:#0d0f14;
  --laiton:#b08d57;
  --white:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Bricolage Grotesque',sans-serif;
  background:var(--white);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.barre{
  border-bottom:1px solid rgba(13,15,20,.1);
  padding:22px 6vw;display:flex;justify-content:space-between;align-items:center;
  font-size:.85rem;
}
.barre .marque{font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.barre a{color:rgba(13,15,20,.55);text-decoration:none}
.barre a:hover{color:var(--ink)}

.page{max-width:760px;margin:0 auto;padding:70px 6vw 110px}

.eyebrow{
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--laiton);font-weight:500;
}
h1{
  font-family:'Fraunces',Georgia,serif;font-weight:350;
  font-size:clamp(2rem,4.6vw,2.9rem);line-height:1.1;margin-top:14px;
}
.maj{margin-top:18px;font-size:.88rem;color:rgba(13,15,20,.5)}

h2{
  font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:1.3rem;line-height:1.25;margin-top:56px;
  padding-top:26px;border-top:1px solid rgba(13,15,20,.12);
}
h3{margin-top:30px;font-size:1rem;font-weight:600}

p,li{margin-top:12px;font-size:.96rem;line-height:1.68;color:rgba(13,15,20,.72)}
ul{margin-top:12px;padding-left:20px}
li{margin-top:8px}
strong{color:var(--ink);font-weight:600}
a{color:var(--ink)}

/* Les identités (éditeur, hébergeur) se lisent en liste de couples
   « libellé → valeur », pas en paragraphe : on vient y chercher UNE info. */
.fiche{
  margin-top:20px;display:grid;grid-template-columns:200px 1fr;
  border-top:1px solid rgba(13,15,20,.12);
}
.fiche dt{
  padding:12px 16px 12px 0;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(13,15,20,.45);
  border-bottom:1px solid rgba(13,15,20,.07);
}
.fiche dd{
  padding:12px 0;font-size:.96rem;line-height:1.5;
  border-bottom:1px solid rgba(13,15,20,.07);
}

footer{
  border-top:1px solid rgba(13,15,20,.1);
  padding:26px 6vw;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.85rem;color:rgba(13,15,20,.5);
}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--ink)}

@media (max-width:620px){
  .page{padding:48px 6vw 80px}
  /* En colonne étroite, le libellé passe au-dessus de sa valeur */
  .fiche{grid-template-columns:1fr}
  .fiche dt{padding-bottom:0;border-bottom:none;padding-top:16px}
  .fiche dd{padding-top:4px}
}

/* ── « En savoir plus » : une page de règles, pas de conseils ──
   Les seuils et les dates doivent se retrouver d'un coup d'œil : les
   paragraphes portent le raisonnement, les listes portent les chiffres. */
.chapo{
  margin-top:24px;font-size:1.08rem;line-height:1.62;
  color:rgba(13,15,20,.7);max-width:56ch;
}
.note{
  margin-top:18px;border-left:2px solid var(--laiton);padding-left:18px;
  color:rgba(13,15,20,.64);
}
ol.etapes{margin:16px 0 0;padding-left:0;list-style:none;counter-reset:e}
ol.etapes li{
  position:relative;padding-left:34px;margin-bottom:10px;counter-increment:e;
  color:rgba(13,15,20,.78);
}
ol.etapes li::before{
  content:counter(e);position:absolute;left:0;top:1px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;background:var(--ink);color:#fff;
}
.sources{margin-top:60px;padding-top:26px;border-top:1px solid rgba(13,15,20,.14)}
.sources .s-titre{
  font-size:.72rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--laiton);margin:0 0 14px;
}
.sources ul{list-style:none;margin:0;padding:0}
.sources li{
  padding:9px 0;font-size:.9rem;color:rgba(13,15,20,.6);
  border-bottom:1px solid rgba(13,15,20,.07);
}
.sources li a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--laiton)}
.sources li a:hover{color:var(--laiton)}
.sources .s-pied{margin-top:18px;font-size:.84rem;color:rgba(13,15,20,.5)}
/* Les passages en gras portent les seuils et les dates : ils doivent se
   détacher du texte courant, pas seulement par la graisse. */
.page p b, .page li b, .page dd b{color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════
   LA PAGE LARGE — « en savoir plus »
   760 px centrés au milieu d'un écran de 2 000, ça laisse les deux
   tiers de l'écran vides. Mais élargir le TEXTE à 2 000 px le rendrait
   illisible : une ligne confortable fait 65 à 75 signes, pas 200.
   On occupe donc l'écran autrement : un sommaire épinglé à gauche, le
   texte à sa largeur de lecture, et des photos plus larges que lui.
   C'est l'alternance qui remplit l'écran, pas l'étirement.
   ══════════════════════════════════════════════════════════════════ */
.page.large{max-width:1340px;padding:56px clamp(20px,5vw,56px) 110px}
.page.large .tete{max-width:62ch}
.page.large .colonnes{
  display:grid;grid-template-columns:230px minmax(0,1fr);
  gap:0 clamp(32px,5vw,78px);align-items:start;margin-top:56px;
}
.page.large .rail-somm{position:sticky;top:34px}
/* ⚠️ C'est le TEXTE qu'on borne à sa largeur de lecture, pas la colonne.
   En bornant la colonne, les photos héritaient de la même largeur et le
   rythme disparaissait : tout faisait 760 px, comme avant. */
.page.large .texte{max-width:none}
.page.large .texte > *:not(.photo){max-width:760px}
.page.large .texte > h2:first-of-type{margin-top:0}

/* Le sommaire épinglé : le numéro d'abord, comme un rail de chapitres. */
.page.large .somm{margin-top:0;border-top:0}
.page.large .somm a{
  display:grid;grid-template-columns:28px 1fr;gap:0 10px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid rgba(13,15,20,.09);
}
.page.large .somm a span{font-family:inherit;font-size:.88rem;line-height:1.4;color:rgba(13,15,20,.68)}
.page.large .somm a em{font-size:.72rem;font-weight:700;letter-spacing:.1em}
.page.large .somm a:hover span{color:var(--ink)}

/* Les photos. Celle du haut prend toute la largeur du conteneur ; les
   autres débordent de la colonne de texte, ce qui donne le rythme. */
.page .photo{margin:44px 0 0}
.page .photo img{
  display:block;width:100%;height:auto;border-radius:3px;
  aspect-ratio:4/3;object-fit:cover;
}
.page .photo.pleine{margin-top:40px}
.page .photo.pleine img{aspect-ratio:21/9}
.page .photo figcaption{
  margin-top:12px;font-size:.86rem;line-height:1.55;
  color:rgba(13,15,20,.55);max-width:60ch;
}
.page.large .texte .photo{width:100%;margin-top:52px}

@media (max-width:1020px){
  /* Sous cette largeur, un sommaire épinglé vole la place au texte :
     il repasse en haut, dans le flux. */
  .page.large .colonnes{grid-template-columns:1fr;gap:0}
  .page.large .rail-somm{position:static;margin-bottom:40px}
  .page.large .texte{max-width:none}
}
@media (max-width:620px){
  .page .photo img{aspect-ratio:3/2}
  .page .photo.pleine img{aspect-ratio:16/10}
  .page.large{padding-top:36px}
}