/*═══════════════════════════════════════════════════════════════════════════
  EAU DE VIGNE — FEUILLE DE STYLE PARTAGÉE « production » (Gutenberg-ready)
  ─────────────────────────────────────────────────────────────────────────
  Cible : WordPress 6.x + Twenty Twenty-Five (block-based) + child theme custom.
  Ce fichier = la couche « child theme » commune à TOUTES les pages :
    · (b) tokens :root          → à reporter dans theme.json (palette + custom)
    · reset léger & base
    · primitives partagées      (.eyebrow .btn .stamp .icon focus skip-link…)
    · chrome de site            (header « barre de service » + breadcrumb + footer)
    · helpers de bande          (.band--teal / .band--bordeaux / .section…)
  Chaque page-template charge CE fichier puis ajoute son propre <style> local
  (les blocs spécifiques à la page). Mapping Gutenberg : ce fichier ≈ style.css
  du child theme ; les blocs de chrome (header/footer) = template-parts.
═══════════════════════════════════════════════════════════════════════════*/

/*═══════════════════════════════════════════════════════════════════════════
  (b) :ROOT — DESIGN TOKENS  (→ theme.json : settings.color.palette + settings.custom)
  Charte « Carnet ». Toute couleur / typo / espace / rayon passe par une
  variable : zéro valeur hardcodée dans les sélecteurs.
═══════════════════════════════════════════════════════════════════════════*/
:root{
  /* — Couleurs — */
  --color-kraft:        #EFE6CF;   /* fond page */
  --color-cream:        #FAF4E6;   /* fond cartes / surfaces */
  --color-ink:          #1F1A14;   /* texte principal */
  --color-ink-2:        #4A3E30;   /* texte secondaire */
  --color-ink-3:        #7A6B58;   /* texte tertiaire / captions */
  --color-line:         #1F1A14;   /* filets forts */
  --color-line-soft:    #D9CFBC;   /* filets doux / séparateurs */
  --color-bordeaux:     #701511;   /* accent principal — CTA, emphase */
  --color-bordeaux-dark:#4A241A;   /* hover CTA primaire */
  --color-teal-deep:    #23544F;   /* accent secondaire — bandes */
  --color-teal-soft:    #BFDDD8;   /* texte sur fond teal */
  --color-rose:         #D9A39E;   /* texte sur fond bordeaux */
  --color-ochre:        #C9923A;   /* doré — sélection Romain UNIQUEMENT */

  /* couleurs « vin » (liquide bouteille) */
  --wine-rouge:     #5E1410;
  --wine-blanc:     #D8C27A;
  --wine-rose:      #D9A39E;
  --wine-champagne: #E6CE84;

  /* — Typographies — */
  --font-display: 'Fraunces','EB Garamond',Georgia,serif;
  --font-body:    'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --font-hand:    'Caveat',cursive;

  /* échelle typo (fluide où utile) */
  --text-xs:    0.6875rem;  /* 11px — mono labels */
  --text-sm:    0.8125rem;  /* 13px */
  --text-base:  0.9375rem;  /* 15px */
  --text-md:    1.0625rem;  /* 17px — lede mobile */
  --text-lg:    1.1875rem;  /* 19px — lede */
  --text-xl:    1.4375rem;  /* 23px — titres cartes */
  --text-2xl:   1.875rem;   /* 30px — prix / sous-titres */
  --text-3xl:   2.875rem;   /* 46px — titres sections */
  --text-4xl:   3.75rem;    /* 60px — gros titres internes */
  --text-hero:  clamp(3rem, 8vw, 5.5rem); /* 48 → 88px */

  /* — Espacements — */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.75rem;
  --space-12: 3.5rem;
  --space-16: 5rem;
  --space-20: 7rem;

  /* gouttière de page, responsive */
  --gutter: var(--space-6);
  --maxw:   1280px;

  /* — Rayons / filets / focus — */
  --radius-sm:   4px;
  --radius-pill: 999px;
  --border-hair: 1px solid var(--color-line-soft);
  --border-firm: 1px solid var(--color-line);
  --focus-ring:  3px solid var(--color-bordeaux);
  --focus-offset:2px;
  --header-h:    111px;
}

/*═══════════════════════════════════════════════════════════════════════════
  RESET LÉGER & BASE
═══════════════════════════════════════════════════════════════════════════*/
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--color-kraft);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:-.015em; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

/* Accessibilité : focus visible homogène (clavier) sur tout élément focusable */
:focus-visible{ outline:var(--focus-ring); outline-offset:var(--focus-offset); border-radius:var(--radius-sm); }
/* Anneau de focus lisible sur les fonds sombres colorés (sinon bordeaux sur bordeaux/teal = invisible) */
.utility-bar :focus-visible,
.band--teal :focus-visible,
.band--bordeaux :focus-visible,
.site-footer :focus-visible{ outline-color:var(--color-cream); }
/* skip-link pour la navigation clavier */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-ink); color:var(--color-cream); padding:var(--space-3) var(--space-5); }
.skip-link:focus{ left:var(--space-4); top:var(--space-4); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/*── Conteneurs & bandes de section ───────────────────────────────────────*/
.section{ padding:var(--space-16) var(--gutter); }
.wrap{ max-width:var(--maxw); margin-inline:auto; }
.band--kraft{ background:var(--color-kraft); }
.band--cream{ background:var(--color-cream); }
.band--teal{ background:var(--color-teal-deep); color:var(--color-cream); }
.band--bordeaux{ background:var(--color-bordeaux); color:var(--color-cream); }

/*── Primitives partagées ─────────────────────────────────────────────────*/
.eyebrow{ display:flex; align-items:center; gap:var(--space-3); color:var(--color-bordeaux); }
.eyebrow .num{ font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600; letter-spacing:.18em; }
.eyebrow .line{ height:1px; width:36px; background:currentColor; }
.eyebrow .lbl{ font-size:var(--text-xs); font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
/* sur bande teal / bordeaux, l'eyebrow s'éclaircit */
.band--teal .eyebrow{ color:var(--color-teal-soft); }
.band--bordeaux .eyebrow{ color:var(--color-rose); }

/* CTA — un seul primaire par section (cf. règles d'or charte) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-body); font-weight:700; font-size:var(--text-sm); line-height:1;
  padding:var(--space-3) var(--space-5); border-radius:var(--radius-pill);
  text-decoration:none; cursor:pointer; border:1.5px solid; min-height:44px;
  transition:transform .15s ease, background .15s ease, color .15s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn--primary{ background:var(--color-bordeaux); color:var(--color-cream); border-color:var(--color-bordeaux); }
.btn--primary:hover{ background:var(--color-bordeaux-dark); border-color:var(--color-bordeaux-dark); }
.btn--secondary{ background:transparent; color:var(--color-ink); border-color:var(--color-ink); }
.btn--secondary:hover{ background:var(--color-ink); color:var(--color-cream); }
.btn--ghost{ background:transparent; border-color:transparent; color:var(--color-bordeaux);
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; border-radius:0; padding-inline:0; }
.btn--ghost:hover{ transform:none; color:var(--color-bordeaux-dark); }
.btn--on-bordeaux{ background:var(--color-cream); color:var(--color-bordeaux); border-color:var(--color-cream); }
.btn--on-bordeaux:hover{ background:#fff; border-color:#fff; }
.btn--on-teal{ background:var(--color-cream); color:var(--color-teal-deep); border-color:var(--color-cream); }
.btn--on-teal:hover{ background:#fff; border-color:#fff; }

.stamp{ display:inline-flex; align-items:center; gap:var(--space-2);
  padding:3px 10px; background:rgba(35,84,79,.08); border:1px solid var(--color-teal-deep);
  color:var(--color-teal-deep); border-radius:var(--radius-pill); font-size:11px;
  letter-spacing:.04em; text-transform:uppercase; font-weight:600; white-space:nowrap; }

.icon{ width:1em; height:1em; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Lettrine éditoriale (récits longs : domaine, à propos) */
.dropcap::first-letter{ font-family:var(--font-display); font-weight:500; float:left;
  font-size:3.4em; line-height:.78; padding:6px 10px 0 0; color:var(--color-bordeaux); }

/* Signature manuscrite (Caveat) — max 2 occurrences / page */
.signature{ font-family:var(--font-hand); font-size:var(--text-3xl); line-height:1; color:var(--color-bordeaux); }
.band--teal .signature{ color:var(--color-teal-soft); }

/*═══════════════════════════════════════════════════════════════════════════
  CHROME — SITE HEADER  (entête « barre de service » : utilité teal + service kraft, sticky)
  Mapping Gutenberg : 2 wp-block-group empilés dans le template-part « header ».
═══════════════════════════════════════════════════════════════════════════*/
.site-header{ position:sticky; top:0; z-index:50; }
.utility-bar{ background:var(--color-teal-deep); color:var(--color-cream);
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  padding:7px var(--gutter); font-size:var(--text-sm); }
.utility-bar .loc{ display:inline-flex; align-items:center; gap:var(--space-2); color:var(--color-teal-soft); }
.utility-bar nav{ display:flex; gap:var(--space-5); align-items:center; }
.utility-bar a{ color:var(--color-cream); text-decoration:none; opacity:.85; }
.utility-bar a:hover{ opacity:1; }
.lang-switch{ background:none; border:0; color:var(--color-cream); font:inherit; font-weight:600; cursor:pointer; }
.lang-switch [aria-current]{ border-bottom:1.5px solid var(--color-teal-soft); }
.lang-switch .sep,.lang-switch .off{ opacity:.5; }
.utility-bar .div{ width:1px; height:14px; background:rgba(250,244,230,.3); }

.service-bar{ background:var(--color-kraft); border-bottom:var(--border-firm);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--space-6);
  padding:var(--space-4) var(--gutter); }
.service-bar .logo{ height:38px; width:auto; }
.service-nav{ display:flex; align-items:center; gap:var(--space-6); justify-content:center; }
.service-nav .menu{ display:flex; gap:var(--space-6); font-size:var(--text-base); font-weight:600; }
.service-nav .menu a{ text-decoration:none; padding-bottom:5px; border-bottom:2px solid transparent; }
.service-nav .menu a[aria-current="page"]{ border-bottom-color:var(--color-bordeaux); }
.service-nav .menu a:hover{ border-bottom-color:var(--color-line-soft); }
form.search{ display:flex; align-items:center; gap:var(--space-2); flex:1; max-width:320px;
  background:var(--color-cream); border:1.5px solid var(--color-line-soft);
  border-radius:var(--radius-pill); padding:9px var(--space-4); }
form.search input{ flex:1; border:0; background:transparent; outline:none; font:inherit; font-size:var(--text-sm); color:var(--color-ink); }
form.search .icon{ font-size:16px; color:var(--color-ink-3); }
.cart{ display:inline-flex; align-items:center; gap:var(--space-2); padding:9px var(--space-4);
  background:var(--color-bordeaux); border:1.5px solid var(--color-bordeaux); border-radius:var(--radius-pill);
  text-decoration:none; color:var(--color-cream); font-weight:700; font-size:var(--text-sm); }
.cart .icon{ font-size:15px; }

/* Menu mobile : tiroir natif via <details class="mobile-nav"> (zéro JS) — caché ≥ 900px */
.mobile-nav{ display:none; }
.mobile-nav>summary{ list-style:none; }
.mobile-nav>summary::-webkit-details-marker{ display:none; }
.nav-toggle{ display:none; }

/*── Fil d'Ariane ──────────────────────────────────────────────────────────*/
.breadcrumb{ padding:var(--space-4) var(--gutter); border-bottom:var(--border-hair);
  font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.14em;
  color:var(--color-ink-3); display:flex; align-items:center; gap:var(--space-3); text-transform:uppercase; }
.breadcrumb a{ color:inherit; text-decoration:none; }
.breadcrumb a:hover{ color:var(--color-ink); }
.breadcrumb [aria-current]{ color:var(--color-ink); font-weight:700; }

/*═══════════════════════════════════════════════════════════════════════════
  CHROME — FOOTER « signature » (bande teal, sign-off Fraunces)
  Mapping Gutenberg : template-part « footer ».
═══════════════════════════════════════════════════════════════════════════*/
.site-footer{ background:var(--color-teal-deep); color:var(--color-cream); padding:var(--space-16) var(--gutter) var(--space-8); }
.site-footer__inner{ max-width:var(--maxw); margin-inline:auto; }
.site-footer__top{ display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:end;
  padding-bottom:var(--space-10); border-bottom:1px solid rgba(250,244,230,.2); }
.site-footer .kicker{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--color-teal-soft); }
.site-footer h2{ font-size:var(--text-3xl); line-height:.98; margin-top:var(--space-4); }
.site-footer h2 em{ font-style:italic; color:var(--color-teal-soft); }
.site-footer__contact{ display:flex; flex-direction:column; gap:var(--space-3); align-items:flex-start; }
.site-footer__contact a{ font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-cream); text-decoration:none; }
.site-footer__contact a:hover{ text-decoration:underline; text-underline-offset:4px; }
.site-footer__contact span{ font-size:var(--text-base); color:var(--color-teal-soft); }
.site-footer__bottom{ display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--space-5); flex-wrap:wrap; gap:var(--space-4); }
.site-footer__bottom nav{ display:flex; gap:var(--space-6); font-size:var(--text-sm); font-weight:600; flex-wrap:wrap; }
.site-footer__bottom nav a{ color:var(--color-cream); text-decoration:none; }
.site-footer__bottom nav a:hover{ text-decoration:underline; text-underline-offset:3px; }
.site-footer__legal{ display:flex; gap:var(--space-5); font-size:var(--text-sm); color:rgba(250,244,230,.6); }
.site-footer__legal a{ color:inherit; text-decoration:none; }

/*═══════════════════════════════════════════════════════════════════════════
  IMAGE PLACEHOLDERS annotés — <figure class="ph"> (→ wp-block-image / wp-block-gallery)
  Bandes diagonales discrètes + légende monospace décrivant la photo attendue.
═══════════════════════════════════════════════════════════════════════════*/
.ph{ margin:0; position:relative; background:var(--color-line-soft);
  background-image:repeating-linear-gradient(45deg,
    transparent 0, transparent 11px,
    rgba(31,26,20,.05) 11px, rgba(31,26,20,.05) 22px);
  border:var(--border-hair);
  display:flex; align-items:center; justify-content:center; min-height:160px; overflow:hidden; }
.ph figcaption{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--color-ink-3); text-align:center; padding:var(--space-4);
  background:var(--color-cream); border:var(--border-hair); }
.ph--teal{ background:rgba(250,244,230,.08);
  background-image:repeating-linear-gradient(45deg,transparent 0,transparent 11px,
    rgba(250,244,230,.08) 11px,rgba(250,244,230,.08) 22px); border-color:rgba(250,244,230,.25); }
.ph--teal figcaption{ background:rgba(35,84,79,.6); color:var(--color-teal-soft); border-color:rgba(250,244,230,.25); }

/*═══════════════════════════════════════════════════════════════════════════
  RESPONSIVE — chrome partagé (mobile-first ; chaque palier ajoute)
═══════════════════════════════════════════════════════════════════════════*/
@media (max-width:899px){
  /* Header : nav + recherche passent dans un tiroir <details> (logo | panier | ☰) */
  .service-bar{ position:relative; grid-template-columns:1fr auto auto; gap:var(--space-4); }
  .service-nav{ display:none; }
  .utility-bar nav a:not(.keep-mobile){ display:none; }

  /* Hamburger + tiroir natif <details> (zéro JS, clavier-OK) */
  .mobile-nav{ display:block; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; background:none; border:1.5px solid var(--color-line);
    border-radius:var(--radius-sm); cursor:pointer; color:var(--color-ink); }
  .nav-toggle .icon{ font-size:22px; }
  .mobile-nav[open] .nav-toggle{ background:var(--color-ink); color:var(--color-cream); border-color:var(--color-ink); }
  .mobile-nav__panel{ position:absolute; left:0; right:0; top:100%; z-index:60;
    background:var(--color-cream); border-top:var(--border-hair); border-bottom:var(--border-firm);
    padding:var(--space-5) var(--gutter); display:flex; flex-direction:column; gap:var(--space-5);
    box-shadow:0 18px 30px -22px rgba(31,26,20,.55); }
  .mobile-nav__menu{ display:flex; flex-direction:column; }
  .mobile-nav__menu a{ text-decoration:none; font-family:var(--font-display); font-size:var(--text-xl);
    padding:var(--space-3) 0; border-bottom:var(--border-hair); }
  .mobile-nav__menu a:last-child{ border-bottom:0; }
  .mobile-nav__menu a[aria-current="page"]{ color:var(--color-bordeaux); }
  .mobile-nav__search{ display:flex; align-items:center; gap:var(--space-2);
    background:var(--color-kraft); border:1.5px solid var(--color-line-soft);
    border-radius:var(--radius-pill); padding:9px var(--space-4); }
  .mobile-nav__search input{ flex:1; border:0; background:transparent; outline:none; font:inherit; font-size:var(--text-sm); color:var(--color-ink); }
  .mobile-nav__search .icon{ font-size:16px; color:var(--color-ink-3); }
  .mobile-nav__foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); }
  .mobile-nav__lang{ background:none; border:0; font:inherit; font-weight:700; cursor:pointer; color:var(--color-ink); }
  .mobile-nav__lang [aria-current]{ border-bottom:1.5px solid var(--color-bordeaux); }
  .mobile-nav__lang .off{ opacity:.5; }

  /* C4.1/C4.2 - header non sticky + bandeau .loc masque sous 900px */
  :root{ --header-h:64px; }
  .site-header{ position:static; }
  .utility-bar .loc{ display:none; }
}
@media (min-width:640px){
  :root{ --gutter:var(--space-8); }
}
@media (min-width:768px){
  .site-footer__top{ grid-template-columns:7fr 5fr; }
  .site-footer__contact{ align-items:flex-end; }
}
@media (min-width:1024px){
  :root{ --gutter:var(--space-12); }
}

/* Confort de lecture : respecte la préférence « moins d'animations » */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
  .btn:hover{ transform:none; }
}

/* ── RE01.2 (2026-08-19) : menu mobile — panneau confine a 112px + jamais masque ─
   Diagnostic (Chrome MCP, mesure sur le CSS live d'edv-production.css, sans
   lecture directe de X:\/Z:\) : .mobile-nav__panel (position:absolute; left:0;
   right:0) a pour bloc englobant .service-bar (grid, position:relative), mais
   son rectangle reel mesure x=1349 w=112 au lieu de couvrir la largeur du
   header - le panneau et les 5 liens qu'il contient (Accueil / Entreprises /
   Particuliers / La cave / A propos) rendent a largeur 0. Second defaut,
   independant du premier : la regle .mobile-nav__panel d'origine n'est jamais
   conditionnee par [open], donc le panneau reste display:flex /
   visibility:visible en permanence, que le <details> soit ouvert ou non -
   mesure directement (hasAttribute('open') === false pendant que le panneau
   calculait display:flex). Cause la plus probable du symptome rapporte par
   Romain : rien de visible ni de cliquable dans le menu mobile ("Entreprises"
   / "La cave"), sur toutes les pages (header.php est un gabarit commun a tout
   le site, pas seulement la page Entreprises).

   Correctif minimal, verifie empiriquement AVANT depot par injection dans le
   DOM live (etat ferme : 0x0, correctement masque : etat ouvert : panneau
   360px ancre a droite, les 5 liens a 248px de large chacun, bord droit
   aligne sur le bord du header, aucun debord de viewport mesure a 1464px de
   large). Largeur explicite au lieu de gauche+droite implicite, affichage
   conditionne par [open]. Rien d'autre n'est touche (position, z-index, fond,
   ombre, padding restent ceux d'origine, plus haut dans ce fichier).
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
	.mobile-nav__panel {
		display: none;
		left: auto;
		width: min(100vw, 360px);
	}

	.mobile-nav[open] .mobile-nav__panel {
		display: flex;
	}
}

/* ── V2-nav-accueil-hide (2026-08-20) : le lien « Accueil » du menu principal
   est redondant avec le logo, qui pointe déjà vers l'accueil — ANALYSE-
   MAQUETTE2.md #15. Masqué uniquement dans le menu desktop (nav.menu) ; le
   menu mobile et le pied de page gardent leur lien « Accueil » (pas de logo
   permanent dans ces deux zones, donc pas redondant là). display:none
   retire aussi le lien du parcours clavier et des lecteurs d'écran, pas
   seulement de l'affichage visuel. ─────────────────────────────────────── */

nav.menu a.nav-accueil {
	display: none;
}

/* -- EDV-FOOTER-CONTACT-MINW-V1 : pied de page, 5px de debordement mobile (2026-08-20) --
   Point #25 d'ANALYSE-MAQUETTE2.md. Diagnostic (QS1, Romain) : resize_window
   HS (cf. echange du jour), donc mesure via un iframe charge a 375px de
   large sur maquette2.eaudevigne.com. .site-footer__contact (colonne flex :
   e-mail, telephone, adresse) est un enfant de grille de .site-footer__top
   (piste mesuree a 312px), mais son min-width par defaut (auto, pas 0)
   l'empeche de retrecir sous la largeur intrinseque de son contenu le plus
   long -- l'adresse "romain.miller@eaudevigne.com" ne comporte aucun espace
   ni point de coupure. Mesure : 341px au lieu de 312px, soit 29px de trop
   pour sa colonne, dont 5px echappent au padding du pied de page et forcent
   tout le document a deborder horizontalement de 5px sur mobile (365px au
   lieu de 360px de viewport).
   Corrige par min-width:0 (autorise la colonne a suivre sa piste de grille)
   et overflow-wrap/word-break sur les liens (l'e-mail peut casser proprement
   si la largeur l'impose, plutot que de forcer la colonne a s'elargir).
   Verifie avant depot : la regle exacte ci-dessous injectee dans une copie
   live du DOM (meme technique d'iframe 375px) fait revenir le scrollWidth
   du document de 365px a 360px -- plus aucun debordement mesure.
   Voir echange du 2026-08-20 (QS1), DECISIONS.md.
   ------------------------------------------------------------------------- */
.site-footer__contact {
	min-width: 0;
}
.site-footer__contact a {
	overflow-wrap: break-word;
	word-break: break-word;
}


/* ═══════════════════════════════════════════════════════════════════════════
   EDV-V3-CAVE-ENGAGEMENT-V1 — vague 3, point #20 (2026-08-21).
   Habillage du bloc de tampons pose par edv_stamp_engagement() dans
   functions.php, sur les cartes de la boucle produits. La primitive .stamp
   est déjà définie plus haut dans cette feuille (bordure 1.5px teal-deep,
   9px, majuscules, letter-spacing .16em) : rien à redéfinir, seulement à
   poser la rangée et son interligne.
   ═══════════════════════════════════════════════════════════════════════ */

ul.products li.product .edv-stamps{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  margin:var(--space-2) 0;
}

/* ── EDV-MENU-BLOG-V1 : entrée BLOG à tiroir dans la navigation (2026-08-25) ──
   Demande de Romain : « ajoute un menu BLOG, la page Manifeste en premier
   sous-menu ». Le site n'a AUCUN menu WordPress (vérifié le 2026-08-25 :
   nav-menus.php n'en propose aucun, le thème n'enregistre pas d'emplacement) —
   les deux navigations sont écrites en dur dans header.php. Ce lot y ajoute
   donc du markup, et cette feuille l'habille.

   Desktop : <details class="menu-blog"> — même idiome « tiroir natif, zéro JS »
   que le menu mobile du thème. Le parent « Blog » n'est pas un lien (arbitrage
   de Romain) : c'est un <summary>, qui ouvre le tiroir au clic comme au clavier.
   Mobile  : pas de tiroir dans le tiroir — un intertitre « Blog » puis les
   entrées en retrait, sous le trait qui les sépare des rubriques principales.  */

.service-nav .menu .menu-blog{ position: relative; }
.service-nav .menu .menu-blog > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
}
.service-nav .menu .menu-blog > summary::-webkit-details-marker{ display: none; }
.service-nav .menu .menu-blog > summary::marker{ content: ""; }
.service-nav .menu .menu-blog > summary:hover,
.service-nav .menu .menu-blog[open] > summary{ border-bottom-color: var(--color-line-soft); }
.service-nav .menu .menu-blog__caret{
  font-size: 10px;
  line-height: 1;
  transition: transform .15s ease;
}
.service-nav .menu .menu-blog[open] .menu-blog__caret{ transform: rotate(180deg); }

.service-nav .menu .menu-blog__panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--color-cream);
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 30px -22px rgba(31,26,20,.55);
}
.service-nav .menu .menu-blog__panel a{
  padding: 9px 12px;
  border-bottom: 0;
  border-radius: var(--radius-sm);
  font-weight: 600;
  white-space: nowrap;
}
.service-nav .menu .menu-blog__panel a:hover,
.service-nav .menu .menu-blog__panel a:focus-visible{ background: var(--color-kraft); }
.service-nav .menu .menu-blog__panel a[aria-current="page"]{ color: var(--color-bordeaux); }

@media (max-width: 899px){
  .mobile-nav__menu .mobile-nav__group{
    display: block;
    margin-top: var(--space-3);
    padding: var(--space-3) 0 6px;
    border-top: var(--border-hair);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--color-ink-3);
  }
  .mobile-nav__menu a.mobile-nav__sub{ padding-left: var(--space-4); }
}

/* ── EDV-NAV-MENUS-V1 : la navigation passe sous wp_nav_menu() (2026-08-25) ──
   La forme ne change pas d'un pixel pour une entrée simple : les walkers du
   thème rendent des <a> frères, exactement comme le foreach qu'ils
   remplacent. Cette feuille n'habille donc QUE le cas neuf — une entrée qui
   porte des sous-entrées.

   Desktop : <details class="menu-drawer">, même idiome « tiroir natif, zéro
   JS » que le menu mobile du thème. Le parent n'est pas un lien : c'est un
   <summary>, qui ouvre au clic comme au clavier, et qui s'ouvre d'office
   quand une de ses sous-entrées est la page courante.
   Mobile  : pas de tiroir dans le tiroir — un intertitre puis les entrées en
   retrait, sous le trait qui les sépare des rubriques principales.

   Remplace le bloc EDV-MENU-BLOG-V1 du lot BLOG-manifeste, qui habillait un
   markup « Blog » écrit en dur. Si ce bloc-là est présent plus haut dans la
   feuille, il est simplement inerte : plus aucun .menu-blog n'est rendu.   */

.service-nav .menu .menu-drawer{ position: relative; }

.service-nav .menu .menu-drawer > summary{
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-ink);
}
.service-nav .menu .menu-drawer > summary::-webkit-details-marker{ display: none; }
.service-nav .menu .menu-drawer > summary::marker{ content: ""; }
.service-nav .menu .menu-drawer > summary:hover,
.service-nav .menu .menu-drawer[open] > summary{ border-bottom-color: var(--color-line-soft); }

.service-nav .menu .menu-drawer__caret{
	font-size: 10px;
	line-height: 1;
	transition: transform .15s ease;
}
.service-nav .menu .menu-drawer[open] .menu-drawer__caret{ transform: rotate(180deg); }

.service-nav .menu .menu-drawer__panel{
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 70;
	min-width: 220px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px;
	background: var(--color-cream);
	border: 1.5px solid var(--color-line);
	border-radius: var(--radius-sm);
	box-shadow: 0 18px 30px -22px rgba(31,26,20,.55);
}
.service-nav .menu .menu-drawer__panel a{
	padding: 9px 12px;
	border-bottom: 0;
	border-radius: var(--radius-sm);
	font-weight: 600;
	white-space: nowrap;
}
.service-nav .menu .menu-drawer__panel a:hover,
.service-nav .menu .menu-drawer__panel a:focus-visible{ background: var(--color-kraft); }
.service-nav .menu .menu-drawer__panel a[aria-current="page"]{ color: var(--color-bordeaux); }

@media (max-width: 899px){
	.mobile-nav__menu .mobile-nav__group{
		display: block;
		margin-top: var(--space-3);
		padding: var(--space-3) 0 6px;
		border-top: var(--border-hair);
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--color-ink-3);
	}
	.mobile-nav__menu a.mobile-nav__sub{ padding-left: var(--space-4); }
}

/* ── EDV-NAV-MENUS-V2 : profondeur 3, sous-sous-menu (2026-08-26) ──
   Cépages (et toute future entrée à enfants à ce niveau) n'est plus un lien :
   étiquette de groupe dans le tiroir desktop / intertitre secondaire en
   mobile, ses propres enfants listés juste en dessous, en retrait. Habille
   le nouveau markup rendu par EDV_Walker_Nav_Desktop / EDV_Walker_Nav_Mobile
   depuis que wp_nav_menu() est appelé en depth=3.                          */

.service-nav .menu .menu-drawer__subpanel{
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 2px 0 4px;
	padding-left: 8px;
	border-left: 1.5px solid var(--color-line-soft);
}
.service-nav .menu .menu-drawer__group{
	padding: 9px 12px 2px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-ink-3);
	white-space: nowrap;
}
.service-nav .menu .menu-drawer__panel a.menu-drawer__sub{
	padding-left: 20px;
}

@media (max-width: 899px){
	.mobile-nav__menu .mobile-nav__subgroup{
		display: block;
		margin-top: 6px;
		padding: 4px var(--space-4) 2px;
		font-family: var(--font-mono);
		font-size: var(--text-xs);
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--color-ink-3);
	}
	.mobile-nav__menu a.mobile-nav__sub--2{ padding-left: calc(var(--space-4) * 2); }
}

/*═══════════════════════════════════════════════════════════════════════════
  EDV-LETTRE-V1 (2026-08-26) — « La lettre »
  Trois surfaces, une seule famille de classes :
    .site-footer__lettre     bande d'inscription du pied (fond teal)
    .lettre-form--complet    formulaire de /la-lettre/ (fond kraft)
    .consent--lettre         seconde case des formulaires devis / réservation
  Aucune valeur en dur : tout passe par les tokens :root de la charte.
═══════════════════════════════════════════════════════════════════════════*/

/* ── 1. Bande du pied de page ─────────────────────────────────────────── */

.site-footer__lettre{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  margin-top:var(--space-10);
  padding-top:var(--space-8);
  border-top:1px solid rgba(250,244,230,.22);
}
.site-footer__lettre-dire p:not(.kicker){
  font-size:var(--text-base);
  color:var(--color-teal-soft);
  max-width:46ch;
  margin-top:var(--space-2);
}

.lettre-form--pied{
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}
.lettre-form--pied .lettre-form__ligne{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3);
  align-items:end;
}
.lettre-form--pied .lettre-form__ligne--1{
  grid-template-columns:1fr;
}
.lettre-form--pied .lettre-form__champ{ display:flex; flex-direction:column; gap:var(--space-2); }
.lettre-form--pied .lettre-form__label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-teal-soft);
}
.lettre-form--pied input[type="text"],
.lettre-form--pied input[type="email"],
.lettre-form--pied select{
  width:100%;
  padding:var(--space-3) var(--space-4);
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-cream);
  background:rgba(250,244,230,.08);
  border:1px solid rgba(250,244,230,.35);
  border-radius:var(--radius-sm);
}
.lettre-form--pied select{
  cursor:pointer;
  background-color:#1c423e;
}
.lettre-form--pied input::placeholder{ color:rgba(191,221,216,.65); }
.lettre-form--pied input:focus-visible,
.lettre-form--pied select:focus-visible{
  outline:2px solid var(--color-cream);
  outline-offset:2px;
  background:rgba(250,244,230,.14);
}
.lettre-form--pied .btn{ width:100%; }
.lettre-form__fine{
  font-size:var(--text-xs);
  line-height:1.5;
  color:rgba(250,244,230,.75);
  margin:0;
}
.lettre-form--pied .lettre-form__fine a{
  color:var(--color-teal-soft);
  text-decoration:underline;
  text-underline-offset:2px;
}
.lettre-form--pied .lettre-form__fine a:hover{ color:var(--color-cream); }

.lettre__flash{
  margin:0;
  padding:var(--space-3) var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-teal-deep);
  background:var(--color-teal-soft);
  border-radius:var(--radius-sm);
}

/* Le pot de miel : hors écran, jamais display:none — un robot sait lire
   display:none, un lecteur d'écran a besoin du label. */
.lettre__hp{
  position:absolute !important;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (min-width:48rem){
  .site-footer__lettre{ grid-template-columns:4fr 8fr; gap:var(--space-10); align-items:start; }
  .lettre-form--pied .lettre-form__ligne--1{ grid-template-columns:1fr 1fr; }
  .lettre-form--pied .lettre-form__ligne--3{ grid-template-columns:140px 1fr auto; }
  .lettre-form--pied .btn{ width:auto; white-space:nowrap; }
}

/* ── 2. Formulaire complet de /la-lettre/ ─────────────────────────────── */

.lettre{ max-width:var(--maxw); margin-inline:auto; }
.lettre .lettre__flash{
  display:block;
  margin-bottom:var(--space-6);
  color:var(--color-cream);
  background:var(--color-teal-deep);
}
.lettre__erreurs{
  margin:0 0 var(--space-6);
  padding:var(--space-4) var(--space-5) var(--space-4) var(--space-8);
  color:var(--color-bordeaux);
  background:var(--color-cream);
  border-left:3px solid var(--color-bordeaux);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
}

.lettre-form--complet{ display:flex; flex-direction:column; gap:var(--space-6); }
.lettre-form__grille{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.lettre-form--complet .lettre-form__champ{ display:flex; flex-direction:column; gap:var(--space-2); }
.lettre-form--complet .lettre-form__label,
.lettre-form--sortie .lettre-form__label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-ink-3);
}
.lettre-form__req{ color:var(--color-bordeaux); letter-spacing:.06em; }
.lettre-form--complet input[type="text"],
.lettre-form--complet input[type="email"],
.lettre-form--complet input[type="tel"],
.lettre-form--complet textarea,
.lettre-form--sortie input[type="email"]{
  width:100%;
  padding:var(--space-3) var(--space-4);
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-ink);
  background:var(--color-cream);
  border:1px solid var(--color-line-soft);
  border-radius:var(--radius-sm);
}
.lettre-form--complet textarea{ resize:vertical; min-height:6rem; }
.lettre-form--complet input:focus-visible,
.lettre-form--complet textarea:focus-visible,
.lettre-form--sortie input:focus-visible{
  outline:2px solid var(--color-bordeaux);
  outline-offset:2px;
  border-color:var(--color-bordeaux);
}
.lettre-form__bloc{ display:flex; flex-direction:column; gap:var(--space-3); }
.lettre-form__aide{ font-size:var(--text-sm); color:var(--color-ink-3); margin:0; }
.lettre-form__envoi{ display:flex; flex-direction:column; gap:var(--space-3); }
.lettre-form__envoi .lettre-form__fine{ color:var(--color-ink-3); font-size:var(--text-sm); }
.lettre-form__envoi .lettre-form__fine a{ color:var(--color-bordeaux); }

/* Pastilles de choix — .pills n'est defini que dans les feuilles de page ;
   /la-lettre/ etant une page Gutenberg sans feuille dediee, la definition
   vit ici. */
.lettre .pills{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.lettre .pills label{ cursor:pointer; }
.lettre .pills input{ position:absolute; opacity:0; pointer-events:none; }
.lettre .pills span{
  display:inline-block;
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-sm);
  color:var(--color-ink-2);
  background:var(--color-cream);
  border:1px solid var(--color-line-soft);
  border-radius:var(--radius-pill);
}
.lettre .pills input:checked + span{
  color:var(--color-cream);
  background:var(--color-bordeaux);
  border-color:var(--color-bordeaux);
}
.lettre .pills input:focus-visible + span{ outline:2px solid var(--color-bordeaux); outline-offset:2px; }

@media (min-width:48rem){
  .lettre-form__grille{ grid-template-columns:repeat(2,1fr); }
  .lettre-form__champ--large{ grid-column:1 / -1; }
  .lettre-form__envoi{ flex-direction:row; align-items:flex-start; gap:var(--space-6); }
  .lettre-form__envoi .btn{ flex:0 0 auto; }
}

/* ── 3. Seconde case sur les formulaires devis / reservation ──────────── */

/* .consent porte deja un filet superieur dans les deux feuilles de page :
   sur la seconde case il ferait un double trait. */
.consent--lettre{
  margin-top:var(--space-4);
  padding-top:0;
  border-top:0;
}
.consent--lettre label strong{ color:var(--color-ink); }

/* ── EDV-CAVE-BOUTON-V1 : classe d'accessibilité WordPress ────────────

   WooCommerce rend, sur chaque carte de produit variable, un
   <span class="screen-reader-text"> qui décrit le bouton (« Ce produit a
   plusieurs variations… ») et que le bouton référence en aria-describedby.
   Le texte est destiné aux lecteurs d'écran, pas à l'œil — mais le thème
   n'a jamais porté la règle standard de WordPress, donc il s'affichait.
   On le masque à l'œil en le laissant dans l'arbre d'accessibilité (jamais
   display:none, qui le retirerait aussi des lecteurs d'écran). Recette
   verbatim du core WordPress, retour à la visibilité au focus compris. */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.screen-reader-text:focus{
  position:static !important;
  width:auto; height:auto;
  margin:0;
  overflow:visible;
  clip:auto;
  clip-path:none;
  white-space:normal;
}