:root{--prune:#2e1220;--prune_vif:#451d28;--prune_clair:#6e3451;--rose_sombre:#da8fb5;--brume:#eba1b5;--papier:#fcb4e9;--filet:#c97eb5;--gris_prune:#5a284d;--creme:#fcf4f9;--encre:#140810}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Commissioner',system-ui,sans-serif;color:var(--prune);background:var(--papier);font-size:17px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Yeseva One',Georgia,serif;letter-spacing:-.01em;font-weight:400}
img{display:block;max-width:100%;height:auto}
a{color:var(--prune_vif);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.clairiere__page_{max-width:1140px;margin:0 auto;padding:0 18px}

/* ---------------- masthead collant ---------------- */
.clairiere__entete_{border-bottom:1px solid var(--filet);background:var(--papier);position:sticky;top:0;z-index:20}
.clairiere__entete_ligne_{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:15px 0;gap:14px}
.clairiere__marque_{font-family:'Yeseva One',serif;font-size:1.28rem;color:var(--prune);letter-spacing:-.02em}
.clairiere__marque_:hover{text-decoration:none;color:var(--prune_vif)}
.clairiere__menu_ a{color:var(--gris_prune);font-weight:600;font-size:.9rem;margin-left:26px}
.clairiere__menu_ a:hover{color:var(--prune_vif);text-decoration:none}

/* ---------------- ouverture ---------------- */
.clairiere__ouverture_{background:var(--brume);border-bottom:1px solid var(--filet);padding:52px 0 56px}
.clairiere__ouverture_grille_{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.clairiere__ouverture_volet_{min-width:0}
.clairiere__etiquette_{display:inline-block;background:var(--prune_vif);color:var(--papier);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:2px;margin-bottom:20px}
.clairiere__titre_ouverture_{font-size:clamp(1.95rem,3.4vw,2.7rem);line-height:1.12;margin-bottom:20px}
.clairiere__titre_ouverture_ em{font-style:normal;color:var(--prune_vif)}
.clairiere__accroche_{font-size:1.13rem;color:var(--gris_prune);max-width:36rem;font-weight:300}
.clairiere__reperes_{display:flex;gap:34px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--filet)}
.clairiere__repere_ strong{display:block;font-family:'Yeseva One',serif;font-size:1.5rem;color:var(--prune);line-height:1.2;font-weight:400}
.clairiere__repere_ span{font-size:.82rem;color:#944f82}
.clairiere__illustration_ img{width:100%;border-radius:3px}
.clairiere__cartouche_{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:var(--rose_sombre);border-radius:3px}
.clairiere__cartouche_ span{font-family:'Yeseva One',serif;font-size:4.4rem;color:var(--prune_vif);line-height:1}

/* ---------------- colonne de lecture ---------------- */
.clairiere__corps_{padding:58px 0 8px}
.clairiere__colonne_{max-width:45rem}
.clairiere__colonne_ p{margin-bottom:1.3rem;color:var(--gris_prune)}
/* Le chapô tient seul : fond crème, corps plus gros, filet vertical. La grammaire de ce
   moteur l'impose, et un chapô qui se confond avec le premier paragraphe la trahirait. */
.clairiere__chapo_{background:var(--creme);border-left:4px solid var(--prune_clair);padding:22px 26px;margin-bottom:32px}
.clairiere__chapo_ p{font-size:1.16rem;line-height:1.6;color:var(--prune);margin:0;font-weight:300}
.clairiere__section_titre_{font-size:1.52rem;line-height:1.24;margin:2.4rem 0 .8rem;scroll-margin-top:84px}
.clairiere__sous_titre_{font-size:1.14rem;margin:1.8rem 0 .5rem}

/* ---------------- sommaire d'ancres ---------------- */
.clairiere__sommaire_{border:1px solid var(--filet);border-radius:3px;background:var(--creme);padding:18px 22px;margin:0 0 34px}
.clairiere__sommaire_titre_{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--prune_clair);margin-bottom:11px}
.clairiere__sommaire_liste_{list-style:none;margin:0;counter-reset:clairiere}
.clairiere__sommaire_liste_ li{counter-increment:clairiere;padding:5px 0;border-bottom:1px solid #f0d4e6;font-size:.95rem}
.clairiere__sommaire_liste_ li:last-child{border-bottom:0}
.clairiere__sommaire_liste_ li:before{content:counter(clairiere) ". ";color:var(--prune_clair);font-weight:600}
.clairiere__sommaire_liste_ a{color:var(--gris_prune)}

/* ---------------- notice de relevé ---------------- */
.clairiere__notice_{border:1px solid var(--filet);border-radius:3px;background:var(--creme);margin:0 0 34px;overflow:hidden}
.clairiere__notice_titre_{background:var(--rose_sombre);color:var(--prune);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:10px 20px}
.clairiere__notice_ligne_{display:grid;grid-template-columns:13rem 1fr;gap:16px;padding:11px 20px;border-top:1px solid #f0d4e6}
.clairiere__notice_intitule_{font-size:.84rem;color:var(--prune_clair);font-weight:600;margin:0}
.clairiere__notice_valeur_{margin:0;color:var(--gris_prune);font-size:.96rem}
.clairiere__variantes_{list-style:none;margin:0 0 1.3rem}
.clairiere__variantes_ li{position:relative;padding-left:24px;margin-bottom:8px;color:var(--gris_prune)}
.clairiere__variantes_ li:before{content:"\2014";position:absolute;left:0;color:var(--prune_clair)}

/* ---------------- planche de vignettes ---------------- */
.clairiere__planche_{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:2px solid var(--prune);padding-bottom:12px;margin:60px 0 28px}
.clairiere__planche_titre_{font-size:1.45rem;margin:0}
.clairiere__planche_note_{font-size:.85rem;color:var(--gris_prune);font-weight:600;text-align:right}
.clairiere__grille_{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.clairiere__grille_quatre_{grid-template-columns:repeat(4,1fr);gap:20px}
.clairiere__vignette_{border:1px solid var(--filet);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;background:var(--papier);transition:box-shadow .18s,transform .18s}
.clairiere__vignette_:hover{box-shadow:0 10px 26px rgba(46,18,32,.14);transform:translateY(-2px)}
.clairiere__vignette_image_{background:var(--rose_sombre);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.clairiere__vignette_image_ img{width:100%;height:100%;object-fit:cover}
.clairiere__vignette_image_ span{font-family:'Yeseva One',serif;font-size:2.3rem;color:var(--prune_vif)}
.clairiere__vignette_corps_{padding:20px 21px 22px;display:flex;flex-direction:column;flex:1}
.clairiere__vignette_rubrique_{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.13em;color:var(--prune_vif);margin-bottom:9px}
.clairiere__vignette_titre_{font-size:1.1rem;line-height:1.32;margin-bottom:9px}
.clairiere__vignette_titre_ a{color:var(--prune)}
.clairiere__vignette_titre_ a:hover{color:var(--prune_vif);text-decoration:none}
.clairiere__vignette_resume_{font-size:.93rem;color:var(--gris_prune);flex:1;margin-bottom:14px;font-weight:300}
.clairiere__vignette_lien_{font-size:.79rem;font-weight:600;color:var(--prune_clair)}
.clairiere__vignette_lien_:after{content:" \2192"}

/* ---------------- mise au point ---------------- */
.clairiere__mise_au_point_{background:var(--prune);color:#e6b7c7;padding:60px 0;margin-top:68px}
.clairiere__mise_au_point_ h2{color:var(--papier);font-size:1.85rem;margin-bottom:10px}
.clairiere__mise_au_point_ p{margin-bottom:1.3rem;font-weight:300;max-width:44rem}
.clairiere__mise_au_point_surtitre_{color:var(--prune_clair);font-size:.86rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.clairiere__exergue_{border-left:3px solid var(--prune_clair);padding-left:22px;font-family:'Yeseva One',serif;font-size:1.2rem;color:var(--papier);line-height:1.55;margin:28px 0}
.clairiere__liste_nue_{list-style:none;margin:0;max-width:30rem}
.clairiere__liste_nue_ li{padding:10px 0;border-bottom:1px solid var(--filet)}

/* ---------------- pied ---------------- */
.clairiere__pied_{background:var(--encre);color:#a9697f;padding:40px 0;font-size:.9rem}
.clairiere__pied_grille_{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.clairiere__pied_titre_{font-family:'Yeseva One',serif;color:var(--papier);font-size:.92rem;margin-bottom:12px}
.clairiere__pied_ a{color:#d490a6}
.clairiere__pied_ p{margin-bottom:5px}

@media(max-width:1000px){.clairiere__grille_quatre_{grid-template-columns:repeat(2,1fr)}.clairiere__grille_{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
.clairiere__ouverture_grille_{grid-template-columns:1fr;gap:30px}
.clairiere__grille_,.clairiere__grille_quatre_{grid-template-columns:1fr}
.clairiere__pied_grille_{grid-template-columns:1fr}
/* Sans min-width:0 ni passage à la ligne, le menu — quatre libellés sur une seule ligne —
   déborde du viewport : un élément flex ne se réduit pas sous la largeur de son contenu,
   et c'est toute la page qui défile alors horizontalement. */
.clairiere__menu_{flex:1 1 100%;min-width:0}
.clairiere__menu_ a{margin-left:0;margin-right:20px;display:inline-block}
.clairiere__notice_ligne_{grid-template-columns:1fr;gap:2px}
}
/* Titres mesurés au navigateur à 375 px : au-delà de deux lignes un intitulé cesse de se
   lire d'un coup d'œil. C'est la taille qui descend, pas l'intitulé qu'on raccourcit —
   l'intitulé porte du sens. */
@media(max-width:480px){
.clairiere__titre_ouverture_{font-size:1.95rem}
.clairiere__section_titre_{font-size:1.22rem}
.clairiere__planche_titre_{font-size:1.2rem}
.clairiere__mise_au_point_ h2{font-size:1.45rem}
.clairiere__planche_{flex-wrap:wrap}
.clairiere__planche_note_{text-align:left}
}