/* =========================================================
   Cave Coste — « Le Carnet » v4 (partie éditoriale WordPress)
   Habillage de la partie ÉDITORIALE uniquement (masthead, rubriques,
   hero, cartes, article, sommaire…), repris des maquettes validées
   (prototypes/mockup-carnet-hub-magazine.html + mockup-carnet-article.html).

   Le CHROME (header/nav/footer) n'est PLUS porté ici : il provient des
   vraies feuilles du site — site.css + menus.css + header-mobile.css —
   chargées AVANT carnet.css (cf. functions.php), appliquées aux VRAIS
   templates inclus par le thème (header.php/footer.php via site-bridge.php).
   carnet.css charge en DERNIER : ses composants éditoriaux (.card/.tag/.foot
   nus, .masthead, .rub…) gagnent donc la cascade. Aucune collision : dans
   site.css ces noms ne sont que bornés (.wine-card .card-foot, #compte-content
   .card…), contextes absents du blog. Plus de copie du chrome = plus de dérive.
   ========================================================= */

/* ===== Jetons repris de css/v4/site.css (refonte-graphique) =====
   #12 (Thomas 20260702) — fallbacks OBLIGATOIRES sur chaque jeton dérivé des
   variables --c-* du système couleur (spec 2026-06-20). site.css est chargé
   AVANT carnet.css sur le blog, mais sous SON propre buster : en cas de
   déphasage de version (carnet.css récent / site.css en retard, sans les --c-*),
   « --clr-text-dark:var(--c-text-strong) » devenait invalide → `color` héritait
   du blanc du parent → CTA « Lire le carnet » blanc sur blanc au survol. Le
   fallback (= valeur cible du système) garantit une couleur valide en toute
   circonstance ; en feuilles cohérentes le rendu est identique. */
:root{
  --clr-text:var(--c-text, #525252); --clr-text-dark:var(--c-text-strong, #333333);
  --clr-border:var(--c-border-input, #C5C5C5); --line:#ececec;
  --clr-bg-light:var(--c-bg-soft, #F4EFE4); --clr-bg-grey:var(--c-bg-grey, #EEEEEE);
  --clr-success:var(--c-success, #2d6635); --clr-gold:var(--c-accent, #b88a3e); --clr-olive:#818A55; --clr-plum:#6a2438;
  --dark:#2a2a2a;
  --radius:8px; --max-width:1200px; --read-width:720px;
  --ff-body:'Montserrat',Arial,sans-serif;
  --ff-title:'Montserrat',Arial,sans-serif;
  --ff-edito:'Roboto Slab',Georgia,serif;   /* signature éditoriale */
}
/* Pt 9 (retour Thomas 20260720) — le header du blog paraissait « plus petit et
   plus serré » que celui du site. Ce n'était pas une copie divergente du chrome
   (il vient bien des vrais templates) mais CE reset, qui était global (`*`) et
   s'appliquait donc AUSSI au chrome v4 partagé, alors que le site tourne en
   content-box. Mesuré sur dev à viewport identique : .container rendait 1248px
   sur le site (max-width 1200 + padding 2×24 en content-box) contre 1200px sur le
   blog (padding mangé par la largeur en border-box), et #menu ul 1485 contre
   1445 → tout le chrome resserré de 24px par côté, hauteurs identiques.
   Le reset est désormais borné au contenu propre au Carnet : #cc-carnet-main est
   ouvert dans header.php APRÈS le chrome et fermé dans footer.php AVANT le
   footer/les drawers partagés, donc le chrome retrouve exactement le rendu du
   site. Aucun `box-sizing:content-box` n'est déclaré ailleurs dans css/v4 → la
   spécificité accrue (id) ne peut écraser que des border-box explicites, à
   valeur identique. */
#cc-carnet-main, #cc-carnet-main *{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{font-family:var(--ff-body);color:var(--clr-text);background:#fff;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max-width);margin:0 auto;padding:0 24px}

/* ===================== CHROME v4 (header/nav/footer) =====================
   Plus AUCUNE copie locale : le chrome (header-top, header-main, hp-searchbar,
   hp-haction, méga-menu #menu, #header_mobile, bascule .hidemobile à 1130px,
   .visually-hidden, .container, newsletter, footer-dark) provient des VRAIES
   feuilles du site chargées AVANT carnet.css (site.css + menus.css +
   header-mobile.css, cf. functions.php) appliquées aux VRAIS templates inclus
   par le thème (cf. header.php / footer.php / site-bridge.php). Plus de dérive. */

/* ===================== MASTHEAD « Le Carnet » ===================== */
.masthead{background:
    radial-gradient(120% 140% at 85% -10%, #fbf7ec 0%, #f6efdd 45%, #f1e7cd 100%);
  border-bottom:1px solid var(--c-line);position:relative;overflow:hidden}
.masthead::after{content:"";position:absolute;inset:0;background:url('/img/fond-appellations.png') right -40px top -30px/420px auto no-repeat;opacity:.05;pointer-events:none}
.masthead .container{padding:34px 24px 30px;position:relative;text-align:center}
.mh-kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--clr-or-text)}
.mh-kicker::before,.mh-kicker::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,#c9a96b)}
.mh-kicker::after{background:linear-gradient(90deg,#c9a96b,transparent)}
.mh-title{font-family:var(--ff-edito);font-weight:600;font-size:54px;line-height:1;color:var(--clr-text-dark);margin:14px 0 0;letter-spacing:-.01em}
.mh-title .amp{color:var(--clr-or);font-style:italic;font-weight:400}
.mh-sub{font-size:15px;color:#7a715c;margin:14px auto 0;max-width:560px;font-weight:500}
.mh-meta{margin-top:18px;font-family:var(--ff-title);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#a99a76}
.mh-meta b{color:var(--clr-or-text)}

/* ===================== RUBRIQUES (pilules) ===================== */
/* top = offset dynamique (--cc-rubs-top, posé en JS dans footer.php) : la barre
   catégories se cale SOUS le header tant qu'il est visible, et remonte à 0 quand
   il se masque au scroll-down — sinon elle restait collée à top:0 et se faisait
   recouvrir par le header réapparaissant au scroll-up. Même mécanique que le
   sommaire .aside / FAQ (--header-h). Vaut pour desktop ET mobile (le JS choisit
   la bonne source : #site-sticky-header en desktop, #header_mobile en mobile). */
/* transition:top calée sur EXACTEMENT le timing du header (#site-sticky-header :
   transform .3s ease, cf css/v4/site.css). Quand le header réapparaît au scroll-up,
   son bas et le haut de cette barre doivent descendre comme un seul bloc ; un
   timing différent (avant : .25s) faisait « courir » la barre devant le header
   puis l'attendre → effet abrupt (retour Poune 20/06 suite). */
.rubs{position:sticky;top:var(--cc-rubs-top, 0px);z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:top .3s ease}
.rubs .container{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:14px 24px}
/* pt8 (retour Thomas 20260724) — MOBILE : la barre se masque au scroll vers le bas
   et revient au scroll vers le haut, en même temps que le header (classe posée par
   footer.php, sur le signal .header--hidden du #header_mobile). Réponse au symptôme
   « le titre de l'article défile derrière les chips » : le fond translucide + le blur
   ne suffisent pas — quand le blur est inopérant (économie de batterie Android,
   contexte d'empilement), il ne reste que 92 % d'opacité et le texte transparaît.
   On masque plutôt que d'opacifier, comme demandé.
   translateY(-100%) et pas opacity : la barre doit LIBÉRER la place, pas s'effacer.
   ⚠️ Un transform déplace SANS reflow : l'encart de flux de la barre (208 px sur le
   hub en iPhone 13, 5 rangs de pilules) RESTE dans le flux. -100 % ne « sort du
   viewport » que si la barre est collée en haut ET son encart déjà remonté au-dessus
   du bord — sinon on peint la barre sur le masthead (bande blanche sur le crème,
   titre coupé) ou on révèle un encart vide (208 px de blanc). C'est le défaut
   remonté par Thomas le 26/07. Ce n'est donc PAS la CSS qui décide du masquage :
   footer.php ne pose .rubs--hidden qu'au-delà de « collage + hauteur de barre »
   (rubsSafeToHide(), même règle que pt16 sur la barre de filtres du catalogue).
   pointer-events:none : pas de chip cliquable en aveugle pendant la sortie.
   Timing identique au header (.3s), sinon les deux « courent » l'un après l'autre —
   c'est l'écart .25s/.3s qui avait rendu l'effet abrupt (retour Poune 20/06 suite). */
@media (max-width:1130px){
  /* Fond OPAQUE (arbitrage Thomas 26/07) : masquer au scroll-bas ne réglait la
     transparence qu'à la DESCENTE — au scroll vers le haut la barre revient et le
     contenu continue de défiler derrière ses 92 %. Elle doit être opaque là aussi.
     #fff = exactement le fond de page du Carnet (body{background:#fff}, l.54) → aucun
     changement visuel quand la barre ne recouvre rien, uniquement quand elle est collée.
     backdrop-filter retiré ici : derrière un fond opaque il ne peut plus rien flouter,
     il ne resterait qu'un coût GPU et un contexte d'empilement inutiles. C'est d'ailleurs
     son inopérance (économie de batterie Android) qui rendait le défaut visible. */
  .rubs{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;transition:top .3s ease, transform .3s ease}
  .rubs.rubs--hidden{transform:translateY(-100%);pointer-events:none}
}
.rub{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 16px;border:1.5px solid #e3ddd0;border-radius:999px;background:#fff;font-family:var(--ff-title);font-weight:600;font-size:13px;color:var(--clr-text-dark);cursor:pointer;transition:.18s}
.rub .dot{width:8px;height:8px;border-radius:50%;background:var(--c,#bbb)}
.rub:hover{border-color:var(--c,#ccc);color:var(--c,#333)}
.rub.is-active{background:var(--clr-text-dark);border-color:var(--clr-text-dark);color:#fff}
.rub.is-active .dot{background:#fff}

/* pt5 (retours Thomas 26/07) — « sur mobile les catégories prennent trop de place ».
   MESURÉ sur dev en viewport 390px : 6 rubriques sur 4 LIGNES, barre de 207,8px,
   soit le tiers de l'écran avant le premier article. Arbitrage Thomas : pastilles
   plus petites, 2 ou 3 lignes. ⛔ La bande qui défile horizontalement et le menu
   déroulant ont été écartés par lui — ne pas les reproposer.

   🔑 CE N'EST PAS LA HAUTEUR DES PASTILLES QUI FAIT LA HAUTEUR DE LA BARRE, c'est le
   NOMBRE DE LIGNES. min-height reste donc à 38px : les pastilles sont déjà sous le
   seuil tactile de 44px (relevé par l'audit boutons du 06/07), les raccourcir
   aggraverait un défaut connu pour ne rien gagner. Tout le gain vient de la LARGEUR.

   🧨 Le verrou mesuré est UNE paire : « Quelle bouteille offrir » (192px) +
   « Conseils de dégustation » (211px) = 412px pour 327px utiles. Tant qu'ils ne
   tiennent pas sur une même ligne, on reste à 4 lignes quoi qu'on rogne ailleurs —
   plusieurs réglages intermédiaires ont été mesurés à 4 lignes malgré des pastilles
   nettement plus fines. Les trois leviers qui font basculer : le corps du texte, le
   point de couleur (8px + 8px d'écart = 16px par pastille, le plus cher de tous) et
   la gouttière du conteneur (24px de chaque côté = 48px de largeur utile perdus).

   Réglage retenu (arbitrage Thomas sur maquette comparée) : le point de couleur est
   CONSERVÉ — c'est le code couleur des rubriques — au prix d'un texte à 11,5px.
   Mesuré : 3 lignes, barre 150px (-58), et 14px de marge restante sur la ligne
   critique, de quoi encaisser un libellé rallongé au BO sans repasser à 4 lignes.
   ⚠️ Cette marge est le vrai garde-fou : une rubrique renommée plus longue que
   « Conseils de dégustation » + 14px ferait revenir la 4e ligne. C'est mesuré, pas
   deviné — tests/blog-categories-compact-cli.php épingle chacune de ces valeurs. */
@media (max-width:560px){
  .rubs .container{gap:6px;padding:12px 10px}
  .rub{gap:5px;padding:6px 10px;font-size:11.5px}
  .rub .dot{width:5px;height:5px}
}

/* ===================== HERO À LA UNE ===================== */
.lede-wrap{background:#fff;padding:36px 0 8px}
/* pt6b (retours 30/07) — LE BADGE « À LA UNE / GUIDES » REMONTE EN HAUT DE LA VIGNETTE.
   Il vivait à mi-hauteur (ratio mesuré 0,486 à 390px / 0,563 à 1440px) parce que
   `.featured` est un flex `align-items:flex-end` dont l'unique enfant `.fc` se colle en
   bas, badge compris. On étire `.fc` sur toute la hauteur et on pousse tout le reste
   vers le bas par un `margin-bottom:auto` sur `.ftop` : le badge tient le haut, le
   titre / le chapô / la byline gardent leur ancrage bas. Aucun `position:absolute` —
   `.fc` conserve son `position:relative`, dont dépend son `z-index:2`.
   ⚠️ Posé à TOUTES les largeurs, pas seulement en mobile : le correctif pt6a rend au
   titre sa vraie taille (13px → 28/40px), le bloc de texte grandit donc et le badge
   remontait déjà tout seul en desktop (0,563 → 0,394) dans une zone plus claire de la
   photo. Mesuré à 1440px sans traitement : 4,43:1 → 2,35:1 sur le décile le plus clair,
   soit un libellé blanc de 11px devenu illisible. Un seul comportement, un seul voile. */
.featured{position:relative;border-radius:14px;overflow:hidden;min-height:480px;display:flex;align-items:stretch;
  box-shadow:0 30px 60px -28px rgba(60,30,10,.55)}
.featured img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s ease}
@media (hover: hover) { .featured:hover img.bg{transform:scale(1.06)} }   /* pt13d — cf. pt11-survol-tactile */
.featured::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,10,6,.92) 0%,rgba(20,10,6,.55) 38%,rgba(20,10,6,.05) 70%)}
/* pt6b — VOILE HAUT. Le dégradé de `::after` monte du bas et ne teinte le sommet qu'à
   5 % : or le haut de ces photos est un ciel. Contraste du libellé blanc de 11px sur le
   fond RÉELLEMENT peint (mesuré au décile le plus clair de la bande, la métrique qui
   décide) :
     badge en bas, état d'avant .... 390px 3,38:1   1440px 4,43:1
     badge en haut SANS voile ...... 390px 2,01:1   1440px 2,35:1   ← insuffisant
     badge en haut AVEC ce voile ... 390px 5,32:1   1440px 5,03:1   ← AA texte normal
   L'opacité a été calibrée (.62 → .70) : .62 laissait le desktop à 4,27:1, sous le
   seuil AA de 4,5. Même encre que le dégradé existant — ce composant n'a pas de jeton
   de voile, inventer une autre couleur serait pire qu'aligner sur celle déjà en place.
   `z-index:1` obligatoire : sans lui le pseudo se peint SOUS `img.bg`, qui le suit
   dans l'ordre du DOM (tous deux en z-index auto). */
.featured::before{content:"";position:absolute;left:0;right:0;top:0;height:38%;z-index:1;
  background:linear-gradient(180deg,rgba(20,10,6,.70) 0%,rgba(20,10,6,0) 100%)}
/* pt4 (Thomas 20260731) — LA BORNE DE LECTURE PORTE SUR LE TEXTE, PAS SUR LE BLOC.
   `.fc` était borné à 720px dans une carte plafonnée à 1152px (--max-width:1200px moins
   les 24px de gouttière du .container, en border-box) : le contenu n'occupait que 54,5 %
   de la carte et laissait 432px de photo nue à droite — 37,5 % de vide. Le symptôme le
   plus lisible était le `margin-left:auto` de .read-cta (l.211) qui résolvait son `auto`
   dans la boîte de .fc et collait donc le bouton au bord du BLOC, pas de la CARTE.
   Le 720 venait de la maquette (mockup-carnet-hub-magazine.html), en dur et non commenté ;
   la spec du 03/06 ne borne nulle part le bloc de contenu. Il ne protégeait d'ailleurs pas
   la mesure de lecture qu'on lui prête : posé en border-box, il laissait 628px de texte.
   On rend donc .fc pleine largeur et on borne le seul élément qui en a besoin — le titre.
   ⚠️ La borne du titre est `--read-width MOINS 92px` (= les 2×46px de padding de .fc), pas
   `--read-width` tout court : le titre était jusqu'ici contraint par la boîte de CONTENU de
   .fc, soit 628px et non 720px. Mesuré sur dev : borner à 720 élargit le titre de 92px et
   change sa coupure — « Comprendre la Vallée du Rhône / en 5 minutes » devenait « …en 5 /
   minutes », un mot orphelin. À 628px la coupure de tous les titres existants est conservée
   à l'identique. Le chapô garde sa propre borne (l.201, 560px).
   Mesuré sur dev après correctif : vide à droite 432px → 0, CTA à 46px du bord droit de la
   carte (= son padding), titre 628px sur 2 lignes, coupure inchangée.
   Sans effet sous 768px, où .fc remplissait déjà la carte. */
.featured .fc{position:relative;z-index:2;padding:42px 46px;max-width:none;width:100%;color:#fff;
  display:flex;flex-direction:column}   /* pt6b : colonne, pour le margin-bottom:auto du badge */
.featured h2{font-family:var(--ff-edito);font-weight:600;font-size:40px;line-height:1.08;margin:16px 0 12px;letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.35);max-width:calc(var(--read-width) - 92px)}
.featured p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);margin:0 0 20px;max-width:560px}
/* pt6b — `margin-bottom:auto` : le badge tient le haut, tout le reste du bloc est
   repoussé en bas. C'est CE margin qui remonte le badge, pas un positionnement. */
.featured .ftop{display:flex;align-items:center;gap:14px;margin-bottom:auto}
.featured .fkick{display:inline-flex;align-items:center;gap:9px;font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.featured .fkick::before{content:"";width:24px;height:1px;background:rgba(255,255,255,.6)}
/* pt4 bis (Thomas 20260731) — le CTA revient à côté du temps de lecture, pas au bord
   de la carte. Élargir .fc (ci-dessus) a stretché .byline à la pleine largeur de .fc
   (flex-direction:column du parent + align-items:stretch par défaut) : le margin-left:auto
   de .read-cta se résolvait alors dans TOUTE cette largeur et isolait le bouton au bord
   droit, loin de « 5 min de lecture ». Retour Thomas : « perdu tout seul à droite ».
   align-self:flex-start fait sortir .byline du stretch : sa largeur redevient celle de
   son contenu, l'auto margin n'a plus d'espace où pousser, le bouton colle au texte comme
   avant le lot pt4. Effet accepté et signalé : le vide à droite de la carte, sous le titre,
   revient tel quel — cette correction ne visait que la position du bouton, pas le vide. */
.byline{display:flex;align-items:center;gap:12px;font-size:13px;color:rgba(255,255,255,.8);flex-wrap:wrap;align-self:flex-start}
.byline .av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7)}
.byline b{color:#fff;font-weight:600}
.byline .sepdot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.55)}
.read-cta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--ff-title);font-weight:600;font-size:13px;color:#fff;border:1.5px solid rgba(255,255,255,.55);padding:9px 18px;border-radius:var(--radius-s);transition:.18s}
/* #12 (Thomas 20260702) bis — au survol, couleur via le jeton LITTÉRAL local
   --dark (#2a2a2a, défini l.31), PAS via --clr-text-dark. Motif : --clr-text-dark
   chaîne vers --c-text-strong → --n-text-strong (site.css). En déphasage de buster
   (--n-* absente), ce chaînage devient « invalide à la valeur calculée » et le
   fallback #333 de var() NE s'applique pas (il n'agit que si la var est ABSENTE,
   pas invalide) : color retombe en inherit → hérite du blanc de .byline → CTA
   blanc sur blanc. --dark est un littéral toujours valide → survol lisible en
   toute circonstance. */
/* pt6a (30/07) — CONDITIONNÉ AU POINTEUR, cf. doctrine pt11-survol-tactile.
   Le CTA n'est PAS de ceux qui « font disparaître leur surface » : le Carnet
   navigue en PJAX (fondu + fetch), la vignette reste donc à l'écran pendant tout
   le chargement — assez longtemps pour que le client ait pu photographier l'état
   collé. Mesuré au doigt (banc tactile 390px, pointer:coarse) : après le tap,
   `matches(':hover')` vaut true et le fond blanc restait posé. Le survol reste
   entier en souris, où il est le seul retour d'affordance. */
@media (hover: hover){.read-cta:hover{background:#fff;color:var(--dark);border-color:#fff}}

/* tag (commun hero/cartes/article) */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;border-radius:999px;background:var(--c,var(--clr-ink));color:#fff}
.tag.ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(3px)}

/* ===================== SECTION ===================== */
.sec{padding:44px 0 6px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.sec-head h3{font-family:var(--ff-edito);font-weight:600;font-size:24px;color:var(--clr-text-dark);margin:0;position:relative;padding-left:16px}
.sec-head h3::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:2px;background:var(--clr-or)}
/* Doctrine « flèche » (arbitrage Thomas 26/07) : les libellés « Tout le Carnet »
   et « Voir tout » perdent leur « → » ; le soulignement passe du survol au
   REPOS, sinon plus rien ne signale le lien sur mobile (pas de survol au
   tactile). Même traitement que .cc-see-all côté site (site.css). */
.sec-head a.more{font-family:var(--ff-title);font-weight:600;font-size:13px;color:var(--clr-or-text);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, currentColor 45%, transparent)}
.sec-head a.more:hover{color:var(--c-ink-hover);text-decoration-color:currentColor}

/* duo mise en avant secondaire */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.spotlight{position:relative;border-radius:12px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;border:1px solid var(--line)}
.spotlight img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
@media (hover: hover) { .spotlight:hover img.bg{transform:scale(1.05)} }   /* pt13d — cf. pt11-survol-tactile */
.spotlight::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,8,5,.9),rgba(15,8,5,.15) 60%,transparent)}
.spotlight .sc{position:relative;z-index:2;padding:26px 28px;color:#fff}
.spotlight h4{font-family:var(--ff-edito);font-weight:500;font-size:24px;line-height:1.14;margin:14px 0 8px}
.spotlight p{font-size:14px;color:rgba(255,255,255,.82);margin:0}

/* grille de cartes */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.22s}
/* :focus-within double chaque état de survol — la carte ne répondait pas du
   tout au clavier (arbitrage Thomas 26/07, variante H1). */
/* pt13d (29/07) — SCINDÉ puis survol conditionné au pointeur : au doigt, :hover est
   rémanent et une carte du Carnet restait soulevée + titre doré. cf. pt11-survol-tactile. */
.card:focus-within{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(60,30,10,.45);border-color:#e6ddca}
@media (hover: hover){.card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -24px rgba(60,30,10,.45);border-color:#e6ddca}}
.card .thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--clr-bg-light)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:focus-within .thumb img{transform:scale(1.06)}
@media (hover: hover){.card:hover .thumb img{transform:scale(1.06)}}   /* pt13d */
.card .thumb .tag{position:absolute;left:14px;top:14px}
.card .thumb .thumb-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:46px;opacity:.5}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .meta{font-family:var(--ff-title);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a99a76;margin-bottom:9px}
.card h4{font-family:var(--ff-edito);font-weight:500;font-size:19px;line-height:1.22;color:var(--clr-text-dark);margin:0 0 9px}
.card:focus-within h4{color:var(--clr-or-text)}
@media (hover: hover){.card:hover h4{color:var(--clr-or-text)}}   /* pt13d — le doré collé au titre, symptôme exact du retour */
.card p{font-size:13.5px;line-height:1.55;margin:0 0 16px;color:var(--clr-text)}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--ff-title);font-size:12px;color:#9c9384}
.card .foot .lire{color:var(--clr-or-text);font-weight:600}

/* ===================== BANDE SIGNATURE CAVISTE ===================== */
.signband{margin-top:48px;background:var(--clr-bg-light);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.signband .container{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center;padding:42px 24px}
.signband .port{position:relative}
.signband .port img{width:100%;border-radius:12px;border:5px solid #fff;box-shadow:0 18px 36px -18px rgba(60,30,10,.5)}
.signband .port .seal{position:absolute;right:-14px;bottom:-14px;width:78px;height:78px;border-radius:50%;background:var(--clr-ink);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--ff-edito);transform:rotate(-8deg);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.signband .port .seal b{font-size:19px;line-height:1}
.signband .port .seal span{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px;opacity:.85}
.signband .txt .q{font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--clr-or-text)}
.signband .txt blockquote{font-family:var(--ff-edito);font-weight:400;font-size:25px;line-height:1.42;color:var(--clr-text-dark);margin:14px 0 16px}
.signband .txt .sig{font-family:'Roboto Slab',serif;font-style:italic;font-size:17px;color:#7a715c}
.signband .txt .sig b{color:var(--clr-text-dark)}

/* ===================== NEWSLETTER (bande crème, identique au site) ===================== */
.newsletter{background:var(--clr-bg-light);border-top:1px solid var(--c-border-struct);border-bottom:1px solid var(--c-border-struct);padding:36px 0}
.newsletter .container{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.nl-text h3{font-family:var(--ff-title);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 4px;color:var(--clr-text-dark)}
.nl-text p{font-size:13px;color:var(--clr-text);margin:0}
.nl-form form{display:flex;gap:10px;align-items:center}
.nl-input{padding:10px 16px;border:1.5px solid var(--clr-border);border-radius:var(--radius);min-width:260px;font-size:14px;font-family:var(--ff-body)}
.nl-input:focus{border-color:var(--clr-or);outline:none}
.btn-nl{background:var(--clr-ink);color:#fff;padding:10px 22px;border-radius:var(--radius);font-size:14px;font-weight:700;font-family:var(--ff-title);border:none;cursor:pointer;transition:background .2s;white-space:nowrap}
.btn-nl:hover{background:var(--clr-ink-dark)}

/* ===================== EN-TÊTE ARTICLE ===================== */
.art-hero{background:var(--clr-bg-light);border-bottom:1px solid var(--c-border-struct)}
.art-hero .container{padding:16px 24px 22px;max-width:860px}
.breadcrumb{font-size:12px;color:#8a8270;margin-bottom:12px}
.breadcrumb a{color:var(--clr-or-text)}.breadcrumb .sep{margin:0 7px;color:#bcae8e}
.art-hero h1{font-family:var(--ff-edito);font-weight:600;font-size:40px;line-height:1.12;color:var(--clr-text-dark);margin:10px 0 0;letter-spacing:-.01em}
.art-hero .dek{font-size:17px;line-height:1.55;color:#6f6755;margin:12px 0 0;max-width:680px}
.art-byline{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:13.5px;color:#7a715c;font-family:var(--ff-title);flex-wrap:wrap}
.art-byline img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 3px 8px -3px rgba(0,0,0,.4)}
.art-byline b{color:var(--clr-text-dark);font-weight:600}
.art-byline .d{width:3px;height:3px;border-radius:50%;background:#c8b89a}

/* image de tête */
.art-cover{max-width:1040px;margin:0 auto;padding:28px 24px 0}
.art-cover figure{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(60,30,10,.6)}
.art-cover img{width:100%;max-height:460px;object-fit:cover}
.art-cover figcaption{font-size:12.5px;color:#8a8270;text-align:center;margin-top:10px}

/* ===================== CORPS 2 colonnes (gabarit de lecture) ===================== */
.content-wrap{padding:40px 0 64px}
.content-layout{display:flex;gap:56px;align-items:flex-start;justify-content:space-between;max-width:1100px;margin:0 auto}
.main-col{flex:1 1 auto;max-width:var(--read-width);min-width:0}
/* top = hauteur réelle du header (var --header-h, posée en JS dans footer.php)
   + 20px → le sommaire se cale SOUS le header au lieu de passer dessous quand il
   réapparaît au scroll vers le haut. Header masqué (.header--hidden) → --header-h
   à 0 → le sommaire remonte et suit l'espace visible (même comportement que la
   FAQ, cf. css/v4/contenu.css). */
/* #5 (retour Thomas 20260702) : sommaire + carte vin peuvent dépasser la hauteur
   d'écran. Le sticky épinglant le haut, l'aside étant la colonne la plus haute sur
   un article court, son bas (« Voir la fiche du vin ») ne se libérait jamais et
   restait inatteignable. On borne l'aside au viewport visible et on le rend
   défilable → la molette sur l'aside révèle la carte. Neutralisé en mobile (aside
   statique, sommaire masqué) dans la media-query max-width:880px. */
.aside{flex:0 0 300px;position:sticky;top:calc(var(--header-h, 0px) + 20px);transition:top .25s ease;
  max-height:calc(100vh - var(--header-h, 0px) - 40px);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#d9cdb2 transparent}
.aside::-webkit-scrollbar{width:8px}
.aside::-webkit-scrollbar-thumb{background:#d9cdb2;border-radius:8px;border:2px solid transparent;background-clip:content-box}

.reading{font-size:16.5px;line-height:1.75}
.reading>p:first-of-type{font-size:18px;color:var(--clr-text-dark)}
.reading h2{font-family:var(--ff-title);font-size:22px;font-weight:600;color:var(--clr-text-dark);margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);position:relative;scroll-margin-top:calc(var(--header-h, 70px) + 20px)}
.reading h2::before{content:"";position:absolute;left:0;bottom:-1px;width:46px;height:3px;background:var(--clr-or);border-radius:2px}
.reading h3{font-family:var(--ff-title);font-size:16px;font-weight:600;color:var(--clr-text-dark);margin:26px 0 8px}
.reading p{margin:0 0 17px}
.reading a{color:var(--clr-or-text)}
.reading strong,.reading b{color:var(--clr-text-dark)}
.reading ul{margin:0 0 18px;padding-left:4px;list-style:none}
.reading ul li{position:relative;padding-left:26px;margin-bottom:10px}
.reading ul li::before{content:"";position:absolute;left:4px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--clr-or)}
.reading ol{margin:0 0 18px;padding-left:22px}
.reading ol li{margin-bottom:10px}
.reading blockquote{margin:24px 0;padding:18px 24px;background:var(--clr-bg-light);border-left:4px solid var(--clr-or);border-radius:var(--radius);font-family:var(--ff-edito);font-size:18px;font-weight:300;font-style:italic;color:var(--clr-text-dark)}
.reading img{border-radius:var(--radius);margin:0 0 18px}

/* callout */
.callout{display:flex;gap:14px;background:var(--c-bg-soft);border:1px solid var(--c-border-struct);border-left:4px solid var(--fb-in-tx);border-radius:var(--radius);padding:18px 20px;margin:24px 0}
.callout .ic{flex:0 0 auto;color:var(--fb-in-tx)}
.callout .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.callout p{margin:0;font-size:15px}

/* ===================== ASIDE : sommaire + LE VIN DONT ON PARLE ===================== */
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:0 6px 20px rgba(0,0,0,.04);margin-bottom:22px}
.toc h4{font-family:var(--ff-title);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--clr-text-dark);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.toc ul{list-style:none;margin:0;padding:0}
.toc a{display:block;font-size:13.5px;font-weight:500;color:var(--clr-text);padding:7px 10px 7px 14px;border-left:2px solid transparent;border-radius:0 6px 6px 0}
/* pt13d — SCINDÉ : .active (section courante) doit se voir sur TOUS les pointeurs.
   Le sommaire reste à l'écran : au doigt, deux entrées paraissaient actives. */
.toc a.active{background:var(--clr-bg-light);color:var(--clr-or-text);border-left-color:var(--clr-or)}
@media (hover: hover){.toc a:hover{background:var(--clr-bg-light);color:var(--clr-or-text);border-left-color:var(--clr-or)}}

/* carte produit — la signature de l'intégration éditorial→boutique */
.wine-card{border:1px solid #e6ddca;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 34px -22px rgba(60,30,10,.5)}
.wine-card .wc-head{background:linear-gradient(135deg,var(--clr-ink-dark),var(--clr-ink));color:#fff;padding:12px 18px;font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.wine-card .wc-head svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2}
.wine-card .wc-body{padding:18px;display:flex;gap:16px}
/* Fond blanc + multiply (comme les cartes de l'accueil, css/v4/site.css .cc-gallery
   .wc-photo) : le multiply dissout la marge blanche du JPG → fondu blanc, plus de
   cartouche beige derrière la bouteille. */
.wine-card .wc-bottle{flex:0 0 78px;height:150px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:34px}
.wine-card .wc-bottle img{height:140px;width:auto;object-fit:contain;mix-blend-mode:multiply}
.wine-card .wc-info{flex:1;min-width:0}
.wine-card .wc-app{font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--clr-or-text)}
.wine-card .wc-name{font-family:var(--ff-edito);font-weight:500;font-size:18px;line-height:1.2;color:var(--clr-text-dark);margin:5px 0 3px}
.wine-card .wc-dom{font-size:12.5px;color:#8a8270;margin-bottom:10px}
.wine-card .wc-rate{font-size:12px;color:#c8902f;margin-bottom:10px}
.wine-card .wc-price{font-family:var(--ff-title);font-weight:700;font-size:22px;color:var(--clr-text-dark)}
.wine-card .wc-price small{font-size:12px;font-weight:500;color:#9c9384}
.wine-card .wc-price .prix_normal{font-size:13px;font-weight:500;color:#9c9384;text-decoration:line-through;margin-right:5px}
.wine-card .wc-actions{padding:0 18px 18px;display:flex;flex-direction:column;gap:9px;margin:0}
#cc-carnet-main .btn-primary{background:var(--clr-ink);color:#fff;border:0;border-radius:var(--radius-s);font-family:var(--ff-body);font-weight:var(--btn-weight);font-size:14px;padding:12px;cursor:pointer;text-align:center;transition:.16s;width:100%}
#cc-carnet-main .btn-primary:hover{background:var(--clr-ink-dark)}
.btn-out{border:1.5px solid var(--clr-border);border-radius:var(--radius-s);font-family:var(--ff-title);font-weight:600;font-size:13px;color:var(--clr-text-dark);padding:11px;text-align:center;transition:.16s;display:block}
.btn-out:hover{border-color:var(--clr-or);color:var(--clr-or-text)}

/* ===================== SIGNATURE AUTEUR ===================== */
.author{max-width:1100px;margin:0 auto;padding:0 24px}
.author-box{display:flex;gap:20px;align-items:center;background:var(--clr-bg-light);border:1px solid #ece2c9;border-radius:14px;padding:24px 26px;max-width:var(--read-width)}
.author-box img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 8px 18px -10px rgba(0,0,0,.5);flex:0 0 auto}
.author-box .k{font-family:var(--ff-title);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clr-or-text)}
.author-box h5{font-family:var(--ff-edito);font-weight:500;font-size:20px;color:var(--clr-text-dark);margin:5px 0 6px}
.author-box p{font-size:13.5px;line-height:1.55;margin:0;color:var(--clr-text)}

/* ===================== NAV PRÉC/SUIV ===================== */
/* pt1 (retours 26/07) — « il faut un bouton à droite pour le carnet suivant et un bouton
   à gauche sur le carnet précédent. Actuellement, le carnet précédent est mal placé, il
   colle carnet suivant ».
   Cause : la nav était bornée à --read-width (720px) et centrée par `margin:auto` sur la
   PAGE ENTIÈRE, alors que tout ce qui l'entoure est aligné sur la grille de contenu
   (.content-layout et .author : max-width 1100px). Elle était donc à la fois décalée à
   droite par rapport à la signature auteur juste au-dessus, et trop étroite pour que
   `space-between` écarte quoi que ce soit : deux cartes à 50% dans 720px se touchent.
   On reprend exactement le gabarit de .author (1100px + padding 24px) : les cartes
   s'écartent réellement aux deux extrémités et la nav s'aligne enfin sur la signature.
   .pn-next garde son margin-left:auto — c'est lui qui colle « suivant » à droite quand
   il n'y a PAS de carnet précédent (premier article de la série). */
.post-nav{display:flex;justify-content:space-between;gap:20px;max-width:1100px;margin:40px auto 0;padding:0 24px}
.pn-link{display:flex;align-items:center;gap:12px;width:50%;min-height:74px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;color:var(--clr-text);transition:.18s}
.pn-link:hover{border-color:var(--clr-or);color:var(--clr-or-text);box-shadow:0 10px 24px -16px rgba(60,30,10,.5)}
.pn-next{margin-left:auto;justify-content:flex-end;text-align:right}
.pn-arr{color:var(--clr-or);font-size:1.5em}
.pn-lbl{display:block;color:#9c9384;font-size:.72em;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;font-family:var(--ff-title)}
.pn-title{display:block;font-size:.92em;font-weight:600;line-height:1.3;font-family:var(--ff-edito)}

/* ===================== ARCHIVES DE CATÉGORIE (pilule → liste) ===================== */
.cc-archive-head{background:var(--clr-bg-light);border-bottom:1px solid var(--c-border-struct)}
.cc-archive-head .container{padding:30px 24px;text-align:center}
.cc-archive-head h1{font-family:var(--ff-edito);font-weight:600;font-size:34px;color:var(--clr-text-dark);margin:0}
.cc-archive-head p{color:#7a715c;margin:8px 0 0;font-size:14px}
.cc-archive-grid{padding:36px 0 8px}
.cc-pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:30px 0 56px}
.cc-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1.5px solid #e3ddd0;border-radius:999px;font-family:var(--ff-title);font-weight:600;font-size:14px;color:var(--clr-text-dark);background:#fff}
.cc-pagination .page-numbers:hover{border-color:var(--clr-or);color:var(--clr-or-text)}
.cc-pagination .page-numbers.current{background:var(--clr-text-dark);border-color:var(--clr-text-dark);color:#fff}
.cc-empty{text-align:center;color:#8a8270;padding:60px 0}

/* ===================== ENTRÉE ORCHESTRÉE ===================== */
@keyframes ccRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ccCover{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1.02)}}
.reveal{opacity:0;animation:ccRise .75s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--d,0s)}
.featured img.bg.reveal{animation:ccCover 1.1s cubic-bezier(.2,.75,.2,1) both;animation-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal,.featured img.bg.reveal{animation:none!important;opacity:1!important;transform:none!important}
  .featured img.bg.reveal{transform:scale(1.02)!important}
}

/* ===================== FOOTER v4 (identique au site) ===================== */
.footer-dark{background:#2a2a2a;color:rgba(255,255,255,.7);padding:44px 0 20px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-bottom:36px}
/* pt6a (retours 30/07) — BORNÉES À .footer-dark. Même motif que dans site.css :
   `.fc` n'est pas un nom de classe propre au footer, le hero « À la une » du hub
   (hub-magazine.php:69) porte le même. Ces règles gagnaient donc la cascade sur
   `.read-cta` et sur `.featured h2 a` par pure spécificité (0,1,1 / 0,2,1 contre
   0,1,0 / 0,2,0), d'où le CTA blanc sur blanc au tap et le titre du hero rendu à
   13px. Voir le commentaire jumeau dans css/v4/site.css. */
.footer-dark .fc h4{font-family:var(--ff-title);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:10px;margin:0 0 14px}
.footer-dark .fc a,.footer-dark .fc p{font-size:13px;color:rgba(255,255,255,.62);display:block;margin-bottom:6px;line-height:1.5;text-decoration:none}
.footer-dark .fc a:hover{color:#fff}
.footer-dark .fc p{margin:0 0 6px}
.footer-social{display:flex;gap:14px;font-size:22px;margin-top:6px}
.footer-social a{display:flex;align-items:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:16px;display:flex;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.55);flex-wrap:wrap;gap:8px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:880px){
  .mh-title{font-size:38px}
  .featured{min-height:420px}
  .featured .fc{padding:28px 24px}
  .featured h2{font-size:28px}
  .duo,.grid{grid-template-columns:1fr}
  .signband .container{grid-template-columns:1fr;text-align:center}
  .signband .port{max-width:260px;margin:0 auto}
  .signband .txt blockquote{font-size:21px}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  /* pt6a (30/07) — `.read-cta{display:none}` retiré d'ici. Il n'a JAMAIS pris
     effet : `.fc a{display:block}` (0,1,1) écrasait ce `.read-cta` (0,1,0) quelle
     que soit la position dans la feuille, spécificité oblige. Le CTA était donc
     visible en mobile depuis toujours — c'est bien lui que le client a photographié.
     Maintenant que `.fc` est borné au footer, remettre ce display:none FERAIT
     DISPARAÎTRE le bouton dont le client demande la correction. On le garde. */
  .art-hero h1{font-size:29px}
  .content-layout{flex-direction:column;gap:30px}
  .main-col{max-width:none;width:100%}
  .aside{position:static;flex-basis:auto;width:100%;max-height:none;overflow:visible}
  .toc{display:none}
  .reading{font-size:16px}
  .post-nav{flex-direction:column}.pn-link{width:100%}
}

/* =========================================================================
   Navigation sans rechargement (PJAX) — fondu + barre de progression.
   Spec : 2026-06-09-carnet-navigation-sans-refresh.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Fondu natif via l'API View Transition (Chrome/Safari/Edge). */
  ::view-transition-old(root) { animation: cc-vt-fade-out .18s ease both; }
  ::view-transition-new(root) { animation: cc-vt-fade-in  .22s ease both; }
  /* Repli (Firefox) : fondu du contenu échangé, déclenché par .cc-fade en JS. */
  #cc-carnet-main.cc-fade { animation: cc-main-fade .22s ease both; }
}
@keyframes cc-vt-fade-out { to   { opacity: 0; } }
@keyframes cc-vt-fade-in  { from { opacity: 0; } }
@keyframes cc-main-fade   { from { opacity: .35; } to { opacity: 1; } }

/* Barre de progression fine pendant le fetch. */
html.cc-nav-loading::after {
  content: ""; position: fixed; inset: 0 0 auto 0; height: 3px;
  background: var(--clr-ink); transform-origin: 0 50%;
  animation: cc-nav-bar 1.2s ease-out infinite; z-index: 9999;
}
@keyframes cc-nav-bar {
  0%   { transform: scaleX(0);   opacity: 1; }
  80%  { transform: scaleX(.85); opacity: 1; }
  100% { transform: scaleX(1);   opacity: 0; }
}

/* Morph vignette→cover (phase 2). Cadrage « cover » pour éviter l'écrasement
   quand les ratios diffèrent (vignette ~4:3 → cover large). */
::view-transition-group(carnet-cover) { animation-duration: .35s; }
::view-transition-old(carnet-cover),
::view-transition-new(carnet-cover) { height: 100%; object-fit: cover; }

/* Accessibilité : aucune animation si mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  #cc-carnet-main.cc-fade { animation: none; }
  html.cc-nav-loading::after { animation: none; opacity: 1; }
}

/* =========================================================================
   Bug régression 20260618 (D1-6 « vide en haut » / D1-12 « header mange le
   haut ») — sur MOBILE le header du site (#header_mobile) est position:fixed.
   Les pages du site réservent sa hauteur (site.css : #wrappeur, .cc-content,
   #catalogue-content…), mais le Carnet rend son contenu dans #cc-carnet-main,
   qui n'était couvert par AUCUNE de ces règles → le header recouvrait le haut
   (masthead « Le Carnet » mangé). On réserve l'espace en padding-top, comme
   les pages de contenu. La hauteur RÉELLE est posée par le JS du footer
   (--header-mobile-h, mesure offsetHeight) ; repli 155px (header « barre » :
   promo + logo + recherche) le temps que le JS s'exécute (anti-flash).
   Borné à 1130px = breakpoint où #header_mobile s'affiche (cf. site.css). */
@media only screen and (max-width:1130px){
  #cc-carnet-main{ padding-top: var(--header-mobile-h, 155px); }
}