/* ==========================================================================
   Cave Saint Etienne · cse-accueil.css · mise en page des sections de l'accueil (lot 6)
   Reprend les styles propres à la maquette maquettes/accueil.html (classes de mise en page
   hero-wrap, samedi-band, univers, deg, futs__grid, plus, coeur, cave, avis, acces, plan…),
   adaptés au balisage des blocs natifs. Chargé après cse-wp.css, sur le site et dans l'éditeur.
   N'utilise que des variables --cse-… existantes : aucun token ajouté.
   Les compositions sont insérables sur toute page : la feuille est chargée partout.
   ========================================================================== */

/* ---- Généralités de la maquette ----------------------------------------------- */
/* Les sections de la maquette n'ont aucun écart automatique : toutes les marges viennent
   des règles de ce fichier. :is() donne la spécificité d'une classe (0,1,0), qui passe
   devant les écarts de WordPress (:root :where(.is-layout-flow) > *, chargés avant). */
:is(.cse-section, .plus) :where(.is-layout-flow, .wp-block-group) > *,
:is(.cse-section, .plus) > *{margin-block:0}
/* Listes faites de Groupes ol / li : sans puces ni retrait, comme la maquette.
   Spécificité nulle (:where) : la marge interne de .cse-wrap et des listes reste prioritaire. */
:where(.cse-section, .plus) :where(ol.wp-block-group, ul.wp-block-group){margin:0; padding:0; list-style:none}
/* Figures (blocs Image) et citations sans marges par défaut. */
:is(.cse-section, .plus) :is(figure, blockquote){margin:0}
/* Écarts automatiques des blocs (blockGap) neutralisés dans les sections : les marges
   viennent des règles ci-dessous, comme dans la maquette. */
.cse-hero > *, .hero-wrap > *, .samedi-band > *, .univers-band > *{margin-block:0}
/* Liens flèche : cible de 44 px ; l'espace avant la flèche (« →» du composant) est gardé
   alors que le lien devient une boîte flex. */
.cse-link-arrow{display:inline-flex; align-items:center; min-height:var(--cse-tap-min)}
.cse-link-arrow::after{white-space:pre}
.cse-section h2{margin:12px 0 18px}

/* ---- Hero ----------------------------------------------------------------------- */
/* Contenu centré sur la largeur de la charte (le composant le cale sur la marge gauche). */
.hero-wrap{width:100%; max-width:var(--cse-content); margin-inline:auto}
.cse-hero__in{padding-top:clamp(3rem, 1rem + 5vw, 5.5rem)}
.cse-hero__in > p, .cse-hero__in > .cse-hero__meta, .cse-hero__in > .hero__samedi{max-width:56ch}
.cse-hero .cse-eyebrow{margin:0; max-width:none}
/* Rendez-vous du samedi dans le hero (layout Impeccable, 5 nov. 2026) : le bloc « Sam. » de la
   charte, sans sa bande lin, entre deux filets ; il vient juste avant le bouton plein
   « Venir samedi », qui en est l'action. Rythme : 28 px après le chapô, 24 px avant les boutons
   (le rendez-vous et son bouton vont ensemble), 26 px avant la méta (composant). */
.cse-hero .hero__samedi{grid-template-columns:auto minmax(0,1fr); gap:var(--cse-space-5); margin-block:28px 0; padding:var(--cse-space-4) 0; background:none; border-block:1px solid var(--cse-line)}
.cse-hero .hero__samedi .cse-samedi__day{color:var(--cse-accent)}
.cse-hero .hero__samedi + .cse-hero__ctas{margin-top:var(--cse-space-5)}
/* Tablette (761 – 1100 px) : le voile latéral s'éclaircit vers la droite et le chapô, remonté
   par le rendez-vous, sortait du voile bas ; colonne bornée à 28 rem pour garder 4,5:1 sur la photo
   (le surtitre, sur deux lignes, y gagne aussi : 3,25:1 au lieu de 2,95:1 au pixel le plus clair). */
@media (min-width: 761px) and (max-width: 1100px){ .cse-hero__in > .cse-lead, .cse-hero__in > .hero__samedi, .cse-hero .cse-hero__in > .cse-eyebrow{max-width:28rem} }
@media (max-width: 600px){ .cse-hero .hero__samedi{gap:var(--cse-space-4)} .cse-hero .hero__samedi .cse-samedi__day{font-size:2.25rem} }

/* ---- Bande « Sam. » -------------------------------------------------------------- */
.samedi-band{background:var(--cse-lin)}
.samedi-band .cse-samedi{padding-block:22px}
.cse-samedi p{color:var(--cse-text-muted)}
.cse-samedi strong{color:var(--cse-text)}
/* « Sam. » est un paragraphe (bloc natif) : il garde le bordeaux du composant. */
.cse-samedi .cse-samedi__day{color:var(--cse-bordeaux)}

/* ---- Univers (bandeau centré, cases de la maquette) -------------------------------- */
/* Mêmes déclarations que .univers > li de la maquette, sur les cases du bandeau en blocs. */
.cse-univers-strip.univers > .cse-univers-strip__item{gap:6px; padding:24px 24px 26px}
.cse-univers-strip.univers > .cse-univers-strip__item:first-child{padding-left:0}
@media (max-width: 760px){
  .cse-univers-strip.univers > .cse-univers-strip__item{padding:16px 16px 18px; border-bottom:1px solid var(--cse-line)}
  .cse-univers-strip.univers > .cse-univers-strip__item:nth-child(odd){padding-left:0}
  .cse-univers-strip.univers > .cse-univers-strip__item:nth-child(n+3){border-bottom:0}
}

/* ---- Dégustations ---------------------------------------------------------------- */
.deg{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.deg .deg__photo{margin-top:28px}
.deg__photo img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--cse-radius-m)}
/* Légende du bloc Image : style .cse-label de la charte (la maquette pose la classe sur figcaption). */
.deg__photo figcaption{margin:10px 0 0; font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:var(--cse-ls-label); text-transform:uppercase; color:var(--cse-text-muted)}
.agenda-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px}
.agenda{border-top:1px solid var(--cse-line)}
.ev{display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; padding:18px 0; border-bottom:1px solid var(--cse-line)}
/* Date : « Sam. », jour (gras = grand chiffre), mois, sur trois lignes. */
.ev .ev__date{display:grid; justify-items:start; align-content:start; gap:2px; font:500 var(--cse-fs-label)/1.2 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.ev .ev__date br{display:none}
.ev__date strong{font:300 2.25rem/1 var(--cse-font-titre); letter-spacing:0; color:var(--cse-bordeaux); font-variant-numeric:lining-nums}
.ev__txt{display:grid; gap:6px}
.ev h4{font-size:1.25rem}
.ev__txt p:not(.cse-univers){font-size:.9375rem; color:var(--cse-text-muted); line-height:1.5}
.initiation{display:grid; gap:8px; margin-top:24px; padding:22px 24px; border-radius:var(--cse-radius-m); background:var(--cse-lin)}
.deg .initiation{margin-top:24px}
.initiation h4{font-size:1.375rem}
.initiation > p:not(.cse-univers){font-size:.9375rem; color:var(--cse-text-muted)}
.initiation__foot{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:6px; font-size:.875rem}
.deg .initiation__foot{margin-top:6px}
.initiation__foot > *{max-width:none}
.initiation__foot .cse-tag{background:var(--cse-papier)}
.initiation__foot .initiation__lien{margin-left:auto}
.deg .agenda-all{margin-top:22px}
@media (max-width: 860px){ .deg{grid-template-columns:1fr} .deg .deg__photo{display:none} }
@media (max-width: 480px){
  .ev{grid-template-columns:52px minmax(0,1fr); gap:14px}
  .ev__date strong{font-size:1.875rem}
  .initiation{padding:18px}
  .initiation__foot .initiation__lien{margin-left:0}
}

/* ---- Fûts & tireuses (section sombre) ----------------------------------------------- */
.futs{color-scheme:dark}
.futs__grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px, 5vw, 64px); align-items:start}
.futs__txt{display:grid; gap:18px}
.futs .futs__txt h2{margin:0}
.futs .futs__txt .cse-eyebrow{margin-bottom:-6px}
.futs .cse-lead{color:var(--cse-text-muted)}
/* Chiffres clés en Paragraphes : mêmes déclarations que .cse-stats dt / dd du composant. */
.cse-stats > .cse-stats__item{display:grid; gap:4px}
.cse-stats .cse-stats__val{margin:0; order:-1; font:300 2.125rem/1 var(--cse-font-titre); color:var(--cse-accent)}
.cse-stats .cse-stats__lib{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.cse-offer > *{margin:0}
.offer__txt{display:grid; gap:6px; flex:1 1 260px}
.offer__txt > *{max-width:none}
/* Le titre de l'offre est un strong dans un Paragraphe : il prend la hauteur de ligne
   du composant (1,2) et non celle du paragraphe. */
.offer__titre strong{display:block}
.offer__small{font-size:.875rem; color:var(--cse-text-muted)}
.cse-offer__price small{font:500 var(--cse-fs-label) var(--cse-font-etiq); letter-spacing:.1em; color:var(--cse-text-muted)}
@media (max-width: 600px){ .futs .cse-stats{grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px} .futs .cse-stats .cse-stats__val{font-size:1.75rem} }
.futs__caution{font-size:.875rem; color:var(--cse-text-muted)}
/* Carte d'appel « Demander une tireuse » (en attendant le formulaire Brevo) : même panneau que le
   composant Formulaire (surface, rayon, marges), numéro dans la voix des prix de la charte. */
.futs__appel{display:grid; gap:12px; padding:clamp(20px, 3vw, 32px); border-radius:var(--cse-radius-m); background:var(--cse-surface)}
.futs__appel > *{margin:0}
.futs .futs__signature{margin-top:-6px; font:500 var(--cse-fs-label)/1.5 var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
.futs__tel a{display:inline-flex; align-items:center; min-height:var(--cse-tap-min); font:300 2.125rem/1 var(--cse-font-titre); color:var(--cse-accent); text-decoration:underline; text-decoration-color:transparent; text-underline-offset:6px; text-decoration-thickness:1px; white-space:nowrap; transition:text-decoration-color var(--cse-dur-fast) var(--cse-ease)}
.futs__tel a:hover{text-decoration-color:currentColor}
.futs__rappel{font-size:.9375rem; color:var(--cse-text-muted)}
/* Styles du formulaire conservés pour le lot Brevo (balisage en commentaire dans futs-tireuses.php). */
.futs__form{padding:clamp(20px, 3vw, 32px)}
/* Colonne du formulaire bornée à sa boîte : sans cela, la largeur minimale des champs date et
   liste élargit la grille et le formulaire déborde de 1 à 48 px entre 861 et 1 010 px
   (défilement horizontal, défaut repris de la maquette ; lot 6, étape 10). */
.futs__form{grid-template-columns:minmax(0, 1fr)}
.futs__form .cse-form__row{grid-template-columns:repeat(2, minmax(0, 1fr))}
.futs__form .cse-input{min-width:0}
@media (max-width: 600px){ .futs__form .cse-form__row{grid-template-columns:minmax(0, 1fr)} }
.form-head{display:grid; gap:6px; margin-bottom:4px}
.form-head p, .futs__form .form-soon{font-size:.9375rem; color:var(--cse-text-muted)}
.form-head a, .form-soon a{color:var(--cse-accent); white-space:nowrap}
.futs__form .cse-btn{justify-self:start}
.cse-field .opt{font-weight:400; color:var(--cse-text-muted)}
select.cse-input{appearance:none; background-image:linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px}
select.cse-input option{color:var(--cse-brun); background:var(--cse-blanc)}
@media (max-width: 860px){ .futs__grid{grid-template-columns:1fr} .futs__form .cse-btn{justify-self:stretch} }

/* ---- Les petits plus (bandeau de réassurance) --------------------------------------- */
.plus{background:var(--cse-lin); border-bottom:1px solid var(--cse-line)}
.plus .plus__list{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; padding-block:30px}
.plus .plus__item{display:flex; gap:14px; align-items:flex-start}
/* Icône au trait : fichier SVG du thème en masque, peint en currentColor (bordeaux),
   28 px, trait de 1,4 sur 24 comme la maquette. Décorative (pseudo-élément). */
.plus__item::before{content:""; flex:none; width:28px; height:28px; margin-top:2px; color:var(--cse-bordeaux); background-color:currentColor; -webkit-mask:var(--plus-icone) center/contain no-repeat; mask:var(--plus-icone) center/contain no-repeat}
.plus__item--parking{--plus-icone:url(../icons/parking.svg)}
.plus__item--livraison{--plus-icone:url(../icons/livraison.svg)}
.plus__item--verre{--plus-icone:url(../icons/verre.svg)}
.plus__item--horloge{--plus-icone:url(../icons/horloge.svg)}
.plus .plus__txt{display:grid; gap:2px; min-width:0}
.plus__txt > *{max-width:none}
.plus .plus__titre{font:400 1.125rem/1.25 var(--cse-font-titre)}
.plus .plus__texte{font-size:.875rem; color:var(--cse-text-muted); line-height:1.45}
@media (max-width: 980px){ .plus .plus__list{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 480px){ .plus .plus__list{grid-template-columns:1fr; gap:18px; padding-block:24px} }

/* ---- Coups de cœur ------------------------------------------------------------------- */
.coeur .coeur__head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 48px; align-items:end; margin-bottom:36px}
.coeur__head .cse-eyebrow{grid-column:1/-1}
.coeur .coeur__head h2{margin:0}
.coeur__cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--cse-space-5)}
.coeur__cards h3{font-size:1.3125rem}
/* Photo de carte = bloc Image : la classe .cse-card__media est sur la figure, l'image la remplit. */
.cse-card .cse-card__media{margin:0}
.cse-card__media img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover}
/* L'étiquette d'univers est un Paragraphe (span dans la charte) : la règle .cse-card__body p
   du composant (taille, interligne, couleur atténuée) ne doit pas s'y appliquer. */
.cse-card__body .cse-univers{font-size:var(--cse-fs-label); line-height:1; color:var(--cse-text)}
@media (max-width: 860px){
  .coeur .coeur__head{grid-template-columns:1fr}
  .coeur__cards{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(78%, 320px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; margin-inline:calc(-1 * var(--cse-gutter)); padding-inline:var(--cse-gutter); scroll-padding-inline:var(--cse-gutter)}
  .coeur__cards > *{scroll-snap-align:start}
}

/* ---- La cave & l'équipe ----------------------------------------------------------------- */
.cave{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 72px); align-items:center}
.cave__photo{position:relative}
.cave__photo img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:var(--cse-radius-m)}
.cave__txt{display:grid; gap:16px}
.cave .cave__txt h2{margin:0}
.cave .cave__txt .cse-eyebrow{margin-bottom:-4px}
/* Citation = bloc Citation : styles de theme.json (filet, marge interne) remplacés par ceux
   de la maquette ; la signature (cite) prend le style .cse-label. */
.cave .cave__quote{display:grid; gap:10px; margin:0; padding:8px 0 6px; border:0}
.cave__quote p{font:italic 300 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.3 var(--cse-font-titre); color:var(--cse-bordeaux)}
.cave__quote cite{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:var(--cse-ls-label); text-transform:uppercase; font-style:normal; color:var(--cse-text-muted)}
@media (max-width: 860px){ .cave{grid-template-columns:1fr} }

/* ---- Avis ------------------------------------------------------------------------------ */
.avis{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(32px, 5vw, 72px); align-items:start}
.avis__score{display:grid; gap:8px; justify-items:start}
/* Marges : celles de .cse-section h2 (12px 0 18px), qui l'emportent aussi dans la maquette. */
.avis__note{display:flex; align-items:baseline; gap:4px}
.avis__note span{font:300 clamp(4rem, 3rem + 4vw, 6rem)/.9 var(--cse-font-titre); color:var(--cse-bordeaux); letter-spacing:-.03em}
.avis__note small{font:300 1.75rem var(--cse-font-titre); color:var(--cse-text-muted)}
/* Étoiles = bloc Espacement (décoratif, aria-hidden). Masque des 5 étoiles ; le dégradé
   remplit 4 étoiles et 70 % de la 5e (94,23 % de 120 px, comme le dégradé de la maquette). */
.avis .avis__stars{width:120px; height:22px; margin:0; background:linear-gradient(90deg, var(--cse-robe-ambre) 94.23%, var(--cse-line) 94.23%); -webkit-mask:url(../icons/etoiles.svg) 0 0/120px 22px no-repeat; mask:url(../icons/etoiles.svg) 0 0/120px 22px no-repeat}
.avis .avis__lien{margin-top:10px}
.avis__list{display:grid; border-top:1px solid var(--cse-line)}
/* Extraits = blocs Citation : styles de theme.json (filet, marge interne) remplacés par ceux
   de la maquette (figure.quote) ; la signature (cite) prend le style .cse-label. */
.avis .quote{display:grid; gap:10px; margin:0; padding:22px 0; border:0; border-bottom:1px solid var(--cse-line)}
.quote p{font:300 clamp(1.25rem, 1.15rem + .4vw, 1.5rem)/1.35 var(--cse-font-titre); max-width:none}
.quote cite{font:500 var(--cse-fs-label)/1.4 var(--cse-font-etiq); letter-spacing:var(--cse-ls-label); text-transform:uppercase; font-style:normal; color:var(--cse-text-muted)}
@media (max-width: 860px){ .avis{grid-template-columns:1fr} }

/* ---- Contact & accès ------------------------------------------------------------------- */
.acces{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px, 5vw, 64px); align-items:stretch}
.acces__txt{display:grid; gap:22px; align-content:start}
.acces .acces__txt h2{margin:0}
.acces .acces__txt .cse-eyebrow{margin-bottom:-10px}
/* Adresse en Paragraphes (pas de bloc address) : mêmes déclarations que .acces__adr. */
.acces__adr{display:grid; gap:6px; font:300 1.375rem/1.35 var(--cse-font-titre)}
.acces__adr > p{max-width:none}
/* Le lien du téléphone est dans un Paragraphe : boîte flex pour retrouver la hauteur de
   ligne du lien (1,1) ; cible portée à 44 px, compensée par des marges négatives
   (2,2rem = 35,2 px de haut dans la maquette) : mise en page et texte inchangés. */
.acces__adr .acces__tel-p{display:flex}
.acces__tel{display:inline-flex; align-items:center; min-height:var(--cse-tap-min); margin-block:calc((var(--cse-tap-min) - 2.2rem) / -2); font:300 2rem/1.1 var(--cse-font-titre); color:var(--cse-bordeaux); text-decoration:none; font-variant-numeric:lining-nums}
.horaires{display:grid; gap:10px}
/* Horaires en Groupes / Paragraphes : mêmes déclarations que .horaires dl, dt, dd. */
.horaires__liste{border-top:1px solid var(--cse-line)}
.horaires .horaires__ligne{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; padding:10px 0; border-bottom:1px solid var(--cse-line); font-size:.9375rem}
.horaires__ligne > p{max-width:none}
.horaires__jour{font-weight:500}
.horaires__heures{color:var(--cse-text-muted); font-variant-numeric:tabular-nums; text-align:right}
.sat-note{display:block; font:500 var(--cse-fs-label)/1.6 var(--cse-font-etiq); letter-spacing:.08em; text-transform:uppercase; color:var(--cse-bordeaux)}
.acces .acces__ctas{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; max-width:none}
/* Plan = schéma SVG de la maquette (bloc HTML), sans service de cartes tiers. */
.plan{position:relative; min-height:380px; border-radius:var(--cse-radius-m); overflow:hidden; border:1px solid var(--cse-line); background:var(--cse-papier)}
.plan svg{position:absolute; inset:0; width:100%; height:100%}
.plan iframe{position:absolute; inset:0; display:block; width:100%; height:100%; border:0}
.plan-bg{fill:var(--cse-papier)}
.plan-park{fill:color-mix(in srgb, var(--cse-success) 14%, transparent)}
.plan-road{fill:none; stroke:var(--cse-blanc); stroke-width:12; stroke-linecap:round}
.plan-road--big{stroke-width:20}
.plan-road--thin{stroke-width:7}
.plan-txt{font:500 11px var(--cse-font-etiq); letter-spacing:.08em; text-transform:uppercase; fill:var(--cse-text-muted)}
.plan-txt--soft{opacity:.8}
.plan-pin{fill:var(--cse-bordeaux)}
.plan-pin-dot{fill:var(--cse-blanc)}
.plan__label{position:absolute; left:16px; bottom:16px; display:grid; gap:2px; padding:12px 16px; border-radius:var(--cse-radius-m); background:var(--cse-blanc); font:400 1.125rem/1.2 var(--cse-font-titre); box-shadow:var(--cse-shadow-card)}
.plan__label small{font:500 var(--cse-fs-label) var(--cse-font-etiq); letter-spacing:.1em; text-transform:uppercase; color:var(--cse-text-muted)}
@media (max-width: 860px){ .acces{grid-template-columns:1fr} .plan{min-height:280px} }

/* ---- En-tête superposé au hero (accueil seulement, demandes du 5 nov. 2026) ------------
   Seul l'accueil a un hero avec photo de fond. L'en-tête reste collant (sticky de la charte)
   mais ne réserve plus sa hauteur : une marge basse négative fait remonter le hero dessous,
   et le hero reçoit cette même hauteur en marge haute pour que son texte ne passe pas dessous.
   Sur le hero, l'en-tête est transparent et en texte blanc ; quand le bas du hero atteint
   l'en-tête, il reprend le fond papier et le texte brun (animation liée au défilement,
   timeline de vue du hero). Navigateurs sans animation-timeline (Firefox) : en-tête papier
   habituel, toujours collant et superposé au haut du hero.
   Le menu mobile ouvert garde son panneau papier et ses liens bruns. */
body.home{--cse-entete-h:82px; timeline-scope:--cse-hero}
@media (max-width: 600px){ body.home{--cse-entete-h:72px} }
body.home .cse-header{margin-bottom:calc(-1 * var(--cse-entete-h))}
body.home .cse-hero{padding-top:var(--cse-entete-h); view-timeline:--cse-hero}
@supports (animation-timeline: view()){
  body.home .cse-header{color:#fff; background:transparent; animation:cse-entete-colle linear both; animation-timeline:--cse-hero; animation-range:exit-crossing calc(100% - var(--cse-entete-h) - 60px) exit-crossing calc(100% - var(--cse-entete-h))}
  body.home .cse-header .wp-block-navigation-item__content,
  body.home .cse-header .wp-block-navigation-item__content:hover,
  body.home .cse-header .wp-block-navigation-item__content[aria-current="page"]{color:inherit}
  body.home .cse-header .wp-block-navigation-item__content[aria-current="page"]{box-shadow:inset 0 -2px 0 currentColor}
  body.home .cse-header .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open{color:inherit; border-color:color-mix(in srgb, currentColor 60%, transparent)}
  body.home .cse-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{color:var(--cse-brun); box-shadow:none}
  body.home .cse-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"]{color:var(--cse-bordeaux)}
}
@keyframes cse-entete-colle{
  from{color:#fff; background-color:transparent}
  to{color:var(--cse-brun); background-color:var(--cse-papier)}
}