/* =============================================================================
   SNACK2GO - FEUILLE DE STYLE PRINCIPALE
   =============================================================================

   Un seul fichier, chargé par functions.php. Pas de constructeur de page,
   pas de préprocesseur: ce que vous lisez est ce qui est servi.

   -----------------------------------------------------------------------------
   LES QUATRE RÈGLES DU SYSTÈME. Les casser fait que le site cesse d'être lui-même.
   -----------------------------------------------------------------------------

   1. UNE SEULE FAMILLE: Helvetica Neue, Helvetica, Arial. Aucune police web.
      Elle charge instantanément et se lit comme un choix grâce à la règle 2.

   2. LE CRÉNAGE SE RESSERRE QUAND LA TAILLE MONTE.
      ~20px -> -.035em     ~30px -> -.04em      ~47px -> -.05em
      ~80px -> -.062em     100px+ -> -.085em
      C'est la règle la plus caractéristique du système. La hauteur de ligne
      fait l'inverse: 1.6 pour le texte, .98 pour les grands titres, .9 pour
      la signature du pied de page.

   3. LES TITRES SONT EN GRAISSE 500, jamais 700. La graisse 800 est réservée
      à trois choses: le mot-symbole, le libellé du bouton de compte, et la
      grande signature du pied de page.

   4. L'ACCENT EST DE LA PONCTUATION, PAS DE LA PEINTURE.
      --brand n'apparaît que sur: la pastille après le mot-symbole, les anneaux
      de focus, le "2" de la signature, la barre du haut, le bouton de compte,
      et la barre de progression. Nulle part ailleurs.

   -----------------------------------------------------------------------------
   L'ÉCHELLE DE RAYONS. Ce n'est pas une incohérence, c'est le système:
   le rayon grandit avec l'élément.
   -----------------------------------------------------------------------------
      5px    champs de formulaire (volontairement plats contre les coins ronds)
      12px   petites bandes
      14px   cadres d'images
      16px   cartes et formulaires
      18px   grands panneaux (le héros)
      28px   28px 0 0 -- haut des sections pleine largeur, pour qu'elles
             s'empilent comme des panneaux
      100px  boutons pilule
      50%    ronds et pastilles

   -----------------------------------------------------------------------------
   LE MOUVEMENT. Une seule courbe dans tout le fichier: --ease.
   Durées: .2s couleur - .3s transformation de bouton - .8s zoom d'image
   1.2s suivi du curseur - 1.4s entrée du héros.
   Les survols lèvent de 2px. Les images zooment de 3.5%. Rien ne bouge plus.
   Tout est désactivé par prefers-reduced-motion en bas de fichier.

   -----------------------------------------------------------------------------
   PIÈGE CONNU: l'en-tête collant.
   .site-header doit être posé sur la PARTIE DE GABARIT elle-même
   (templates/*.html: "className":"site-header"), pas sur un div à l'intérieur.
   Un position:sticky ne colle que dans les limites de son parent, et un div
   dans un <header> de la hauteur de l'en-tête n'a nulle part où aller.
   ============================================================================= */

/* --- JETONS. Changer une couleur ici la change partout. --- */
:root{
  --paper:#f7f8f6;--soft:#e9ede8;--ink:#0f241a;--brand:#006837;--brand-deep:#004725;
  --muted:#5c6a61;--line:#d3dbd4;--spark:#39ff14;
  --alert:#9d4936;--alert-ink:#783824;--alert-soft:#f2e9e0;
  --focus:#006837;
  --ease:cubic-bezier(.22,1,.36,1);
  --shell:min(100% - 96px,1504px);--topbar-h:44px;
}

/* --- BASE ET TYPOGRAPHIE --- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:106px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3{font-weight:500}
h1,h2{letter-spacing:-.055em;line-height:1.01}
h3{letter-spacing:-.035em;line-height:1.16}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:5px}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;left:24px;top:-100px;background:var(--ink);color:#fff;padding:12px 20px;border-radius:30px;z-index:200}
.skip-link:focus{top:16px}
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;color:var(--muted)}
.muted{color:var(--muted)}

/* nav: flat sticky bar, hairline on scroll */

/* --- EN-TÊTE. Deux rangées: barre verte (défile) + nav blanche (colle).
   Le décalage négatif du sticky vaut la hauteur de la barre, ce qui fait
   disparaître le vert et épingle la nav. --- */
.site-header{position:sticky;top:calc(-1 * var(--topbar-h));z-index:50}
.topbar{background:var(--brand);color:#fff}
.topbar-inner{width:var(--shell);margin-inline:auto;min-height:var(--topbar-h);display:flex;align-items:center;gap:24px;font-size:.8125rem}
.topbar-hours{font-weight:500}
.topbar-contact{display:flex;align-items:center;gap:22px;margin-left:auto}
.topbar-contact a{display:inline-flex;align-items:center;gap:8px;color:#fff;min-height:44px}
.topbar-contact a:hover{text-decoration:underline;text-underline-offset:4px}
.sg-ic{flex:none;display:block;opacity:.9}.topbar .sg-ic{opacity:.8}
.lang-pill{border:1px solid #ffffff59;border-radius:5px;padding:5px 12px;min-height:32px!important;font-weight:500}
.lang-pill:hover{background:#ffffff1f;text-decoration:none!important}
.nav-shell{width:100%;background:#fff;border-bottom:1px solid var(--line)}.nav-inner{width:var(--shell);margin-inline:auto;height:92px;display:flex;align-items:center;gap:34px}
.scrolled .nav-shell{box-shadow:0 1px 14px #0f241a0f}
.brand{display:flex;align-items:center;gap:12px;min-height:48px;flex-shrink:0}
.brand img{width:54px;height:50px;object-fit:contain;flex:none}
.brand-lockup{display:flex;flex-direction:column;gap:4px;justify-content:center}
.brand-name{font-size:27px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.brand-name span{color:var(--brand)}
.brand-tagline{font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav-links a{font-size:.9375rem;font-weight:500;min-height:44px;display:flex;align-items:center;color:#2c4535}.nav-links>.account-btn{display:none}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--brand)}
.nav-actions{display:flex;align-items:center;gap:16px}
.account-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;background:var(--brand);color:#fff;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:16px 24px;min-height:48px;border-radius:5px;transition:background .2s,transform .3s var(--ease)}
.account-btn:hover{background:var(--brand-deep);transform:translateY(-2px);color:#fff}
.menu-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:transparent;padding:13px}
.menu-toggle span{display:block;height:1px;background:var(--ink);margin:5px 0}

/* pill */

/* --- BOUTONS. La pilule est le bouton par défaut, le bouton vert
   rectangulaire sert uniquement à l'ouverture de compte. --- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:26px;white-space:nowrap;padding:15px 24px;min-height:48px;border:1px solid var(--ink);border-radius:100px;color:#fff;background:var(--ink);font-size:.875rem;font-weight:500;line-height:1.25;transition:background .2s,transform .3s var(--ease)}
.pill:hover{background:var(--brand-deep);transform:translateY(-2px)}
.pill.small{min-height:46px;padding:13px 20px}
.pill.outline{background:transparent;color:var(--ink);border-color:#a9b5a7}
.pill.outline:hover{background:var(--soft);color:var(--ink)}
.pill span,.text-link span{display:inline-block;transition:transform .3s var(--ease)}
.pill:hover span{transform:translateX(3px)}
.text-link{display:inline-flex;align-items:center;gap:24px;min-height:44px;font-size:.875rem;border-bottom:1px solid var(--ink);transition:border-color .2s}
.text-link:hover{border-bottom-color:var(--brand)}
.text-link:hover span{transform:translateX(4px)}

/* hero */

/* --- HÉROS. L'image est en pseudo-élément, pas en <img>, pour que le
   suivi du curseur et la dérive au défilement partagent une transformation. --- */
/* Le bas du héros a besoin d'air: la section teintée qui suit a un coin
   arrondi qui remontait juste sous la bande des trois arguments et les
   écrasait. Ne pas ramener cette valeur à zéro. */
.hero{padding:34px 0 88px}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:45px;align-items:center;min-height:640px}
.hero-copy>.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:29px}
.hero-copy>.eyebrow:before{content:'';width:22px;height:1px;background:currentColor}
.hero h1{font-size:clamp(52px,7vw,104px);letter-spacing:-.062em;line-height:1.015;margin:0 0 28px;max-width:14ch}
.hero-description{font-size:1.0625rem;color:var(--muted);max-width:46ch;margin-bottom:32px}
.hero .wp-block-buttons,.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-art{position:relative;align-self:stretch;min-height:590px;border-radius:18px;overflow:hidden;background:var(--ink);animation:sg-arrive 1.4s var(--ease) both}
.hero-art:before{content:'';position:absolute;inset:0;background:url(usine.jpg) center/cover no-repeat;transform:translate3d(var(--mx,0px),calc(var(--my,0px) + var(--sy,0px)),0) scale(var(--hs,1));transition:transform 1.2s var(--ease);will-change:transform}
.hero-art:hover:before{--hs:1.025}
.hero-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.factory-image.usine{background:url(usine.jpg) center/cover no-repeat}
.hero-stamp{position:absolute;top:25px;left:25px;z-index:1;font-size:.7rem;font-weight:600;letter-spacing:.07em;background:#ffffffcc;backdrop-filter:blur(16px);padding:9px 16px;border-radius:50px;text-transform:uppercase}
.intro-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:40px;padding-top:26px;gap:36px}
.intro-strip>p{font-size:.875rem;color:var(--muted);line-height:1.5}
.intro-strip strong{font-size:1rem;color:var(--ink);font-weight:500;display:block;margin-bottom:3px}

/* sections */

/* --- SECTIONS ET TITRES --- */
.section{padding:92px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}
.section-head .eyebrow{margin-bottom:18px}.section-head h2{font-size:clamp(34px,5.3vw,78px);line-height:.98;letter-spacing:-.06em;max-width:700px}
.section-head>p{max-width:310px;font-size:13px;color:var(--muted)}
.page-heading{padding:60px 0 46px}
.page-heading .eyebrow{margin-bottom:0}.page-heading h1{font-size:clamp(45px,6vw,88px);line-height:1.02;letter-spacing:-.06em;margin:28px 0 24px;max-width:920px}
.page-heading .lead{font-size:1.125rem;max-width:630px;color:var(--muted)}
.tinted{background:var(--soft);border-radius:28px 28px 0 0}
.prose h2{font-size:clamp(26px,3vw,40px);margin:46px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:16px;max-width:66ch;color:var(--muted)}
.prose p strong{color:var(--ink);font-weight:500}
.content-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.factory-image{aspect-ratio:1.05;border-radius:14px;overflow:hidden;background:var(--soft)}
.factory-image img{width:100%;height:100%;object-fit:cover}

/* brand portfolio */

/* --- MARQUES MAISON --- */
/* Le bloc .brand-grid / .brand-card a été retiré le 2026-09-22: les marques
   maison ne sont plus affichées publiquement. Ne pas confondre avec .brand,
   .brand-lockup, .brand-name et .brand-tagline, qui sont le logo Snack2Go
   dans l'en-tête et qui restent utilisés. */

/* category + product cards */

/* --- CARTES DE CATÉGORIE ET DE PRODUIT --- */
.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.family-card{display:block;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);position:relative;padding:24px}
.family-image{height:230px;display:flex;align-items:center;justify-content:center}
.family-card img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease);mix-blend-mode:multiply}
.family-card:hover img{transform:scale(1.035)}
.family-card h3{font-size:26px;margin:22px 0 7px}
.family-card p{font-size:.875rem;color:var(--muted);max-width:88%}
.round-arrow{position:absolute;bottom:24px;right:24px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,border-color .2s,color .2s,transform .3s var(--ease)}
.family-card:hover .round-arrow{background:var(--brand);border-color:var(--brand);color:#fff;transform:translate(2px,-2px)}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.product-card{position:relative;display:flex;flex-direction:column;min-width:0}
.product-card>a{display:flex;flex-direction:column;height:100%}
.product-image{height:250px;padding:22px;background:var(--soft);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* PRODUIT SANS PHOTO. Le PHP ne rend aucun cadre image quand le produit n'a pas
   de photo mise en vedette: pas de fausse image, pas d'image de catégorie
   recyclée sur six produits. La carte devient alors un panneau au nom du
   produit, compacte. Pas de hauteur minimale: tant qu'aucun produit n'a de
   photo, le catalogue est une grille de noms bien serrée plutôt qu'une suite
   de grands cadres vides. Dans une rangée mixte, la grille étire la carte à la
   hauteur de sa voisine et le nom reste aligné en bas, d'où le height:100% sur
   le lien. Dès qu'une photo est ajoutée, la classe no-image disparaît seule. */
.product-card.no-image>a{justify-content:flex-end;padding:26px 24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.product-card.no-image .product-info{padding:0}
.product-card img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .8s var(--ease)}
.product-card:hover img{transform:scale(1.035)}
.product-info{padding:18px 3px}
.product-card h2{font-size:1.4rem;letter-spacing:-.03em;line-height:1.15}

/* spec sheet */

/* --- FICHE TECHNIQUE. Les valeurs sont en chasse fixe pour que CUP,
   poids et dates s'alignent. Le bloc allergènes est encadré exprès. --- */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:25px 0}
.spec-grid>div{border-bottom:1px solid var(--line);padding:15px 10px 15px 0}
.spec-grid dt{font-size:.75rem;color:var(--muted);margin-bottom:6px}
.spec-grid dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem}
.spec-status{font-size:.8125rem;padding:14px 16px;background:var(--soft);border-radius:12px;color:#4c6150}
/* L'encadré d'alerte ne sort que si le produit porte une vraie liste
   d'allergènes. Tant que les fiches techniques du client ne sont pas saisies,
   il n'y a pas d'encadré du tout: voir la note dans le code court du produit. */
.allergens{border-left:3px solid var(--alert);background:var(--alert-soft);padding:16px 18px;border-radius:0 9px 9px 0}
.allergens h2{color:var(--alert-ink);font-size:1.1rem}
/* Sur une fiche produit sans photo ni description, le titre et la fiche
   technique étaient séparés par près de 190 px de vide. On resserre, seulement
   sur les fiches produits: ailleurs la grande respiration est voulue. */
body.single-sg_product .page-heading+.section{padding-top:24px}

/* dark band */

/* --- BANDE FONCÉE. --focus passe en clair ici: l'anneau vert donne
   2,09:1 sur ce fond et devient invisible au clavier. --- */
.dark-band{background:var(--ink);color:#eaf1ec;border-radius:28px 28px 0 0;padding:88px 0;--focus:var(--paper)}
.dark-band .eyebrow,.dark-band .muted{color:#9db3a5}
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:56px}
.cert-grid>div{border-top:1px solid #35543f;padding-top:22px}
.cert-grid h3{font-size:22px;margin:10px 0 8px}
.cert-grid p{font-size:.875rem;color:#9db3a5;line-height:1.55}
.cert-grid .num{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;color:var(--spark)}

/* forms */

/* --- FORMULAIRES. Rayon 5px voulu: des champs plats contre les coins ronds. --- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:.8125rem;font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid #b6c2b3;background:#fff;border-radius:5px;min-height:46px;padding:12px;color:var(--ink);font-size:1rem}
.contact-form{background:#fff;border:1px solid var(--line);padding:34px;border-radius:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field.full{grid-column:1/-1}

/* footer */

/* --- PIED DE PAGE --- */
.site-footer{background:var(--ink);color:#eaf1ec;padding:58px 0 20px;overflow:hidden;--focus:var(--paper)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin-bottom:17px;color:#9db3a5}
.site-footer a{display:block;font-size:.875rem;padding:4px 0}
.site-footer p{font-size:.875rem;color:#9db3a5;max-width:38ch}
/* SIGNATURE DU PIED DE PAGE. Elle était en pleine largeur, d'un bord à
   l'autre, ce qui écrasait tout le reste du pied de page. Elle est maintenant
   centrée et calibrée pour rester une signature, pas une deuxième bannière.
   Si on la retouche: garder le clamp, sinon elle déborde sur téléphone. */
.footer-wordmark{font-weight:800;font-size:clamp(38px,7vw,104px);line-height:1;letter-spacing:-.06em;padding:46px 0 26px;white-space:nowrap;text-align:center}
.footer-wordmark span{color:var(--brand)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;padding-top:20px;border-top:1px solid #35543f;font-size:.6875rem;color:#9db3a5}

/* loading screen */

/* --- ÉCRAN DE CHARGEMENT ET BARRE DE PROGRESSION --- */
.preloader{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--paper);transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.preloader-inner{position:relative;display:grid;place-items:center;width:150px;height:150px}
.preloader-logo{width:104px;height:96px;object-fit:contain;animation:sg-breathe 1.9s var(--ease) infinite}
.preloader-ring{position:absolute;inset:0;border-radius:50%;border:2px solid #0f241a17;border-top-color:var(--brand);animation:sg-spin 1s linear infinite}
html.sg-loaded .preloader{opacity:0;visibility:hidden}
html.sg-loading,html.sg-loading body{overflow:hidden}
.reading-progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}


/* --- ANIMATIONS. sg-arrive et sg-rise partent d'un état VISIBLE (.7 et .55),
   jamais de zéro: rien n'est caché en attendant un défilement. --- */
@keyframes sg-spin{to{transform:rotate(360deg)}}
@keyframes sg-breathe{0%,100%{transform:scale(1)}50%{transform:scale(.935)}}
@keyframes sg-arrive{from{opacity:.7;transform:scale(1.045)}to{opacity:1;transform:scale(1)}}
@keyframes sg-rise{from{opacity:.55;transform:translateY(14px)}to{opacity:1;transform:none}}
.sg-rise{animation:sg-rise .7s var(--ease) both}
.family-grid>.sg-rise:nth-child(2),.product-grid>.sg-rise:nth-child(3n+2),.cert-grid>.sg-rise:nth-child(2){animation-delay:.08s}
.family-grid>.sg-rise:nth-child(3),.product-grid>.sg-rise:nth-child(3n+3),.cert-grid>.sg-rise:nth-child(3){animation-delay:.16s}
.cert-grid>.sg-rise:nth-child(4){animation-delay:.24s}


/* --- ADAPTATIF. 1100px tablette, 760px téléphone, 540px petit téléphone. --- */
@media(max-width:1100px){
  :root{--shell:calc(100% - 56px)}
  .nav-links{gap:20px}.hero-grid{grid-template-columns:.85fr 1fr;gap:28px;min-height:560px}
  .hero-art{min-height:520px}
  .cert-grid{grid-template-columns:repeat(2,1fr);gap:30px}.content-grid{gap:34px}
}
@media(max-width:760px){
  :root{--shell:calc(100% - 36px)}
  html{scroll-padding-top:88px}
  .site-header{top:0}.nav-inner{height:72px;gap:10px}.topbar-inner{min-height:0;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 0;font-size:.75rem}.topbar-hours{font-weight:600}.topbar-contact{gap:16px;flex-wrap:wrap;margin-left:0}.topbar-contact a{min-height:0;padding:2px 0;gap:6px}.brand-tagline{display:none}.brand img{width:44px;height:41px}.brand-name{font-size:22px}.account-btn{padding:12px 15px;font-size:.625rem;min-height:42px;letter-spacing:.04em;gap:7px}.menu-toggle{width:42px;height:42px;padding:12px;flex:none}
  .nav-links{display:none}.nav-links.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;padding:18px;background:var(--paper);border-bottom:1px solid var(--line);border-radius:0 0 16px 16px}
  .menu-toggle{display:block;margin-left:auto}.nav-actions>.pill{display:none}
  .hero-grid{grid-template-columns:1fr;gap:24px;min-height:0}
  .hero{padding-bottom:56px}
  .hero-art{min-height:420px}.hero h1{font-size:clamp(40px,10vw,64px)}
  .intro-strip{grid-template-columns:1fr;gap:16px}
  .section{padding:60px 0}.section-head{display:block}.section-head>p{margin-top:18px}
  .family-grid,.product-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:1fr;gap:26px}
  .content-grid{grid-template-columns:1fr;gap:28px}
  .spec-grid,.form-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr;gap:26px}
  .page-heading{padding:36px 0 30px}
}

/* --- MOUVEMENT RÉDUIT. Coupe tout. À tenir à jour si on ajoute une animation. --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .hero-art:before{transform:none!important}
  .preloader{display:none!important}
  html.sg-loading,html.sg-loading body{overflow:auto}
  .reading-progress{display:none}
  .pill:hover span,.text-link:hover span,.family-card:hover img,.product-card:hover img{transform:none!important}
}

/* --- IMPRESSION. Un acheteur imprime une fiche produit. --- */
@media print{
  .site-header,.nav-shell,.hero-art,.contact-form,.site-footer,.preloader,.reading-progress{display:none!important}
  body{background:#fff;color:#000}.dark-band{background:#fff;color:#000}
  .spec-grid{break-inside:avoid}
}

/* ---- canaux de distribution ---- */
.channel-list{display:grid;gap:8px}
.channel{border:1px solid var(--line);border-radius:16px;background:#fff;padding:22px 26px}
.channel h3{font-size:1.25rem;letter-spacing:-.03em;margin-bottom:5px}
.channel p{font-size:.9375rem;color:var(--muted)}

/* ---- FAQ ---- */
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;position:relative;padding:24px 44px 24px 0;font-size:1.0625rem;font-weight:500;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';position:absolute;right:6px;top:22px;font-size:24px;line-height:1;color:var(--brand)}
.faq-list details[open] summary:after{content:'\2212'}
.faq-list details p{color:var(--muted);font-size:.9375rem;padding:0 44px 26px 0;max-width:72ch}

/* ---- demande de compte ---- */
.form-grid .field.full{grid-column:1/-1}
.form-sent{border:1px solid var(--brand);border-radius:16px;padding:30px 32px;background:#fff}
.form-sent h3{font-size:1.5rem;letter-spacing:-.03em;margin-bottom:8px}
.form-sent p{color:var(--muted)}
.account-form-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:56px;align-items:start}
@media(max-width:900px){.account-form-grid{grid-template-columns:1fr;gap:30px}}

/* ---- mur de clients ---- */
.client-section{background:var(--paper);border-radius:28px 28px 0 0}.client-wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:center}
.client-logo{display:flex;align-items:center;justify-content:center;background:var(--soft);border:1px solid transparent;border-radius:12px;padding:22px 20px;min-height:96px}
.client-logo img{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.client-logo:hover img{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.client-logo img{filter:none;opacity:1}}
@media(max-width:760px){.client-wall{grid-template-columns:repeat(2,1fr)}.client-logo{min-height:80px;padding:16px}}

/* ---- contact: le texte à gauche, le formulaire à droite ---- */
.contact-split{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.contact-split .contact-copy h2{font-size:clamp(34px,4.6vw,66px);line-height:.98;letter-spacing:-.06em}
.contact-split .contact-copy .eyebrow{margin-bottom:18px}
.contact-split .contact-copy>p{margin-top:20px;color:var(--muted);max-width:40ch}
.contact-split .contact-meta{margin-top:30px;border-top:1px solid var(--line);padding-top:22px;display:grid;gap:10px}
.contact-split .contact-meta a,.contact-split .contact-meta span{font-size:.9375rem;color:var(--muted)}
.contact-split .contact-meta a:hover{color:var(--ink)}
@media(max-width:900px){.contact-split{grid-template-columns:1fr;gap:30px}}

/* sous 540px le bouton vit dans le menu, la barre respire */
@media(max-width:540px){
  .nav-actions{margin-left:auto}
  .nav-actions>.account-btn{display:none}
  .nav-links.is-open .account-btn{display:inline-flex;margin-top:10px;width:100%}
  .topbar-contact{width:100%;justify-content:space-between;gap:10px}
  .topbar-contact a{font-size:.6875rem}
}

@media(max-width:760px){
  .nav-links{margin-left:0}
  .nav-actions{margin-left:auto}
  .brand{margin-right:auto}
}

/* la flèche reste collée au libellé */
.wp-block-button__link{white-space:nowrap}
.text-link{white-space:nowrap}

/* Mobile: la barre verte tient sur une seule ligne.
   Les heures sont déjà dans le pied de page et dans la fiche Google. */
@media(max-width:760px){
  .topbar-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:0;min-height:42px}
  .topbar-hours{display:none}
  .topbar-contact{width:auto;margin-left:0;gap:14px;flex-wrap:nowrap}
  .topbar-contact a{font-size:.75rem;white-space:nowrap}
  .lang-pill{padding:4px 9px;min-height:28px!important}
}
@media(max-width:420px){
  .topbar-contact a:not(.lang-pill) span:not(.sg-ic){display:none}
  .topbar-contact{gap:18px}
  .wp-block-button__link{white-space:normal}
}

.prefill-note{background:var(--soft);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;
  padding:12px 16px;margin-bottom:22px;font-size:.875rem;color:var(--ink)}