/* =========================================================================
   Feuille de style du site — écrite à la main, sans framework ni CDN.
   Identité allemande « Werkstatt » : bleu nuit, orange signal, fonds blancs
   et gris clair, angles nets, titres droits et serrés (Bahnschrift / DIN).
   Polices système uniquement : aucune police n'est chargée chez Google (DSGVO).
   Les noms des variables (--brun, --cuivre…) sont conservés pour la compatibilité
   avec les pages : --brun = couleur principale (bleu nuit), --cuivre = accent (orange).
   ========================================================================= */

:root{
  /* Couleur principale : bleu nuit */
  --brun:#1f3a5f;        --brun-fonce:#162c49;   --brun-clair:#8193ab;
  --brun-profond:#0f1f33;
  /* Fonds : blanc et gris clair */
  --creme:#f3f5f7;       --creme-2:#e8ecf0;      --sable:#cfd7df;
  --papier:#fff;         --blanc:#fff;
  /* Encres */
  --encre:#16202b;       --encre-doux:#56606c;   --encre-tres-doux:#8a929c;
  --ligne:#dde2e8;       --ligne-forte:#c2cad3;
  /* Accent : orange signal */
  --cuivre:#c4520f;      --cuivre-fonce:#9c3f09; --cuivre-clair:#fdeee4;
  --accent-sur-sombre:#ff9a52;
  /* États */
  --vert:#2c7a55;        --vert-clair:#e2f0e7;   --vert-fonce:#1d5a3d;
  --rouge:#a8382b;       --rouge-clair:#f9e6e2;
  --orange:#a5650f;      --orange-clair:#fbefd9;
  --bleu:#2f5d78;        --bleu-clair:#e4eef4;
  --or:#c4520f;          --or-clair:#fdeee4;
  /* Mesures */
  --rayon:2px;           --rayon-s:2px;          --rayon-xs:1px;
  --ombre-s:0 1px 0 rgba(14,28,48,.06);
  --ombre:0 10px 24px -16px rgba(14,28,48,.45);
  --ombre-forte:0 24px 48px -24px rgba(14,28,48,.55);
  --largeur:1200px;
  --titre:Bahnschrift,"DIN Alternate","DIN Next LT Pro","D-DIN","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --police:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --transition:.2s ease;
}
/* L'attribut « hidden » doit TOUJOURS cacher l'élément, même quand une classe
   impose un display. */
[hidden]{display:none !important}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--police);font-size:17px;line-height:1.62;
  color:var(--encre);background:var(--creme);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:var(--brun);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--cuivre)}
a:hover{color:var(--cuivre-fonce)}
h1,h2,h3,h4{font-family:var(--titre);line-height:1.18;margin:0 0 .55em;font-weight:600;letter-spacing:0;
  color:var(--brun-profond)}
h1{font-size:clamp(2rem,1.3rem + 2.6vw,3.2rem)}
h2{font-size:clamp(1.55rem,1.2rem + 1.4vw,2.3rem)}
h3{font-size:1.2rem}
h4{font-size:1.02rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.3em}
hr{border:0;border-top:1px solid var(--ligne);margin:2rem 0}
small{font-size:.85em}
::selection{background:var(--cuivre);color:#fff}

:focus-visible{outline:3px solid var(--cuivre);outline-offset:2px}
.saut-contenu{position:absolute;left:-9999px;top:0;background:var(--brun);color:#fff;
  padding:12px 20px;z-index:999}
.saut-contenu:focus{left:0}

.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 22px;width:100%}
.conteneur.etroit{max-width:820px}
.centre{text-align:center}
.muet{color:var(--encre-doux)}
.petit{font-size:.88rem}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt1{margin-top:.7rem}.mt2{margin-top:1.5rem}.mt3{margin-top:2.4rem}
.mb1{margin-bottom:.7rem}.mb2{margin-bottom:1.5rem}.mb3{margin-bottom:2.4rem}
.pile{display:flex;flex-direction:column;gap:12px}
.rang{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rang.fin{justify-content:flex-end}
.rang.centre{justify-content:center}
.entre{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}

/* ================================================================ ENTÊTE */

/* Le bandeau d'information : une fine ligne crème, alignée à gauche. */
.bandeau-info{background:var(--creme-2);color:var(--brun-fonce);font-size:.84rem;
  border-bottom:1px solid var(--ligne)}
.bandeau-info .conteneur{display:flex;gap:6px 22px;flex-wrap:wrap;align-items:center;min-height:36px}
.bandeau-info .info-droite{margin-left:auto}
.bandeau-info a{color:var(--brun-fonce);text-decoration:none;font-weight:700}
.bandeau-info a:hover{color:var(--cuivre-fonce)}
.bandeau-info b{color:var(--brun-profond)}
.bandeau-info svg{display:inline-block;vertical-align:-3px;color:var(--cuivre)}
.bandeau-info .sep{display:none}
@media(max-width:760px){.bandeau-info .masquable{display:none}.bandeau-info .info-droite{margin-left:0}}

/* L'en-tête principal : bloc vert forêt, texte crème. */
.entete{background:var(--brun-profond);color:#eceff6;position:sticky;top:0;z-index:200;
  box-shadow:0 2px 0 var(--cuivre)}
.entete-haut{display:flex;align-items:center;gap:22px;min-height:78px;padding:10px 0}

.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f6f1e6;
  font-weight:600;font-size:1.3rem;line-height:1.1;flex:0 0 auto}
.logo:hover{color:#fff}
.logo .marque{max-width:260px;font-family:var(--titre);letter-spacing:.01em}
.logo .baseline{display:block;font-family:var(--police);font-weight:400;font-size:.74rem;
  color:#b6c2d3;letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.logo img{max-height:56px;width:auto}
.logo-symbole{width:46px;height:46px;flex:0 0 auto;overflow:hidden;border-radius:50%;
  border:2px solid var(--cuivre)}
.logo-symbole svg{width:100%;height:100%}
.logo .a-renseigner{white-space:normal}

/* Recherche dans l'entête */
.recherche-entete{flex:1 1 240px;max-width:420px;position:relative;margin-left:auto}
.recherche-entete input{width:100%;padding:11px 46px 11px 16px;border:1px solid rgba(236,240,247,.25);
  border-radius:var(--rayon-s);font:inherit;font-size:.95rem;background:rgba(255,255,255,.08);color:#fff}
.recherche-entete input::placeholder{color:#aab6c8}
.recherche-entete input:focus{background:#fff;color:var(--encre);border-color:var(--cuivre);
  outline:3px solid rgba(148,107,30,.3);outline-offset:0}
.recherche-entete button{position:absolute;right:0;top:0;bottom:0;width:44px;border:0;
  background:var(--cuivre);color:#fff;border-radius:0 var(--rayon-s) var(--rayon-s) 0;cursor:pointer;
  display:grid;place-items:center;padding:0}
.recherche-entete button:hover{background:var(--cuivre-fonce)}
.recherche-entete button svg{width:17px;height:17px}

.actions-entete{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.action-entete{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--rayon-s);
  text-decoration:none;color:#eceff6;font-size:.86rem;line-height:1.25}
.action-entete:hover{background:rgba(255,255,255,.08);color:#fff}
.action-entete svg{width:22px;height:22px;flex:0 0 auto}
.action-entete b{display:block;font-size:.92rem;font-weight:700}
.action-entete span{display:block;color:#aab6c8;font-size:.76rem}
.action-entete.panier{background:var(--cuivre);color:#fff}
.action-entete.panier:hover{background:var(--cuivre-fonce);color:#fff}
.action-entete.panier span{color:rgba(255,255,255,.8)}
.pastille{display:inline-block;min-width:23px;padding:0 7px;margin-left:3px;background:#fff;
  color:var(--cuivre-fonce);border-radius:20px;font-size:.82rem;font-weight:800;text-align:center;
  line-height:23px;vertical-align:middle;font-variant-numeric:tabular-nums}
.pastille[hidden]{display:none}
@media(max-width:1080px){.action-entete .texte{display:none}.action-entete{padding:10px}}

/* ------------------------------------------------------------ MEGA-MENU */

.nav-principale{background:var(--papier);border-bottom:1px solid var(--ligne)}
/* Ne jamais mettre « overflow » sur .nav-liste : le menu déroulant serait coupé. */
.nav-liste{display:flex;list-style:none;margin:0;padding:0;gap:0;align-items:stretch;
  flex-wrap:wrap;overflow:visible;justify-content:center}
.nav-principale > .conteneur{position:relative}
.nav-liste > li{position:static}
.nav-liste > li > a{display:flex;align-items:center;gap:6px;padding:14px 13px;white-space:nowrap;
  text-decoration:none;color:var(--brun-profond);font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;position:relative;transition:color var(--transition)}
.nav-liste > li > a::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:2px;
  background:var(--cuivre);transform:scaleX(0);transition:transform var(--transition)}
.nav-liste > li > a:hover,.nav-liste > li > a[aria-current],
.nav-liste > li:focus-within > a,.nav-liste > li:hover > a{color:var(--cuivre-fonce)}
.nav-liste > li > a:hover::after,.nav-liste > li > a[aria-current]::after,
.nav-liste > li:hover > a::after{transform:scaleX(1)}
.nav-liste .chevron{width:9px;height:9px;opacity:.6;transition:transform var(--transition)}
.nav-liste > li:hover .chevron,.nav-liste > li:focus-within .chevron{transform:rotate(180deg)}
.nav-liste .promo-lien{color:var(--rouge)!important}

.mega{position:absolute;left:0;right:0;top:100%;z-index:210;max-width:100%;
  background:var(--papier);border:1px solid var(--ligne);border-top:0;
  box-shadow:var(--ombre-forte);padding:28px 30px 22px;opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition)}
.nav-liste > li:hover > .mega,.nav-liste > li:focus-within > .mega{opacity:1;visibility:visible;transform:none}
.mega.a-droite{left:auto;right:0}
.mega-grille{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mega h3{font-family:var(--titre);font-size:1.02rem;color:var(--brun-profond);margin:0 0 10px;
  padding-bottom:8px;border-bottom:1px solid var(--ligne)}
.mega ul{list-style:none;margin:0;padding:0}
.mega li{margin-bottom:1px}
.mega li a{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:5px 0;text-decoration:none;color:var(--encre);font-size:.93rem;transition:color var(--transition)}
.mega li a:hover{color:var(--cuivre-fonce)}
.mega li a .nb{font-size:.76rem;color:var(--encre-tres-doux);font-variant-numeric:tabular-nums}
.mega-encart{background:var(--brun);color:#eceff6;padding:18px;display:flex;flex-direction:column;gap:10px}
.mega-encart .illu{width:100%;height:88px;object-fit:cover}
.mega-encart strong{font-family:var(--titre);font-size:1.08rem;line-height:1.25;color:#fff}
.mega-encart p{font-size:.85rem;color:#c8d1de;margin:0}
.mega-encart .bouton{background:var(--cuivre);align-self:flex-start}
.mega-pied{margin-top:22px;padding-top:14px;border-top:1px solid var(--ligne);
  display:flex;gap:8px 20px;flex-wrap:wrap;align-items:center;font-size:.88rem;color:var(--encre-doux)}

.bouton-menu{display:none;margin-left:6px;background:transparent;border:1px solid rgba(236,240,247,.35);
  border-radius:var(--rayon-s);padding:10px 13px;font:inherit;font-size:.85rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:#eceff6;align-items:center;gap:8px}

@media(max-width:1024px){
  .bouton-menu{display:inline-flex}
  .nav-principale{display:none;max-height:78vh;overflow-y:auto}
  .nav-principale.ouvert{display:block}
  .nav-liste{flex-direction:column;gap:0;padding:6px 0;justify-content:flex-start}
  .nav-liste > li{border-bottom:1px solid var(--ligne)}
  .nav-liste > li:last-child{border-bottom:0}
  .nav-liste > li > a{padding:15px 4px;justify-content:space-between}
  .nav-liste > li > a::after{display:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0 4px 18px;min-width:0;display:none;background:var(--papier)}
  .nav-liste > li.deploye > .mega{display:block}
  .nav-liste > li:hover > .mega,.nav-liste > li:focus-within > .mega{display:none}
  .nav-liste > li.deploye:hover > .mega,.nav-liste > li.deploye:focus-within > .mega{display:block}
  .mega-grille{grid-template-columns:1fr;gap:16px}
  .mega-encart{display:none}
  .entete-haut{flex-wrap:wrap;min-height:0;padding:12px 0}
  .recherche-entete{order:3;flex:1 1 100%;max-width:none;margin:2px 0 0}
  .actions-entete{margin-left:auto}
}

/* =============================================================== BOUTONS */

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:var(--rayon-s);border:1px solid transparent;
  background:var(--brun);color:#fff;font:inherit;font-weight:700;font-size:.84rem;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.3;
  cursor:pointer;text-decoration:none;text-align:center;
  transition:background var(--transition),transform .05s,color var(--transition)}
.bouton:hover{background:var(--brun-fonce);color:#fff}
.bouton:active{transform:translateY(1px)}
.bouton[disabled],.bouton.desactive{opacity:.45;cursor:not-allowed;pointer-events:none}
.bouton.secondaire{background:transparent;color:var(--brun);border-color:var(--brun)}
.bouton.secondaire:hover{background:var(--brun);color:#fff}
.bouton.fantome{background:transparent;color:var(--brun-fonce);border-color:transparent}
.bouton.fantome:hover{background:var(--creme-2)}
.bouton.vert{background:var(--vert)}.bouton.vert:hover{background:var(--vert-fonce)}
.bouton.rouge{background:var(--rouge)}.bouton.rouge:hover{background:#86281d}
.bouton.cuivre{background:var(--cuivre)}.bouton.cuivre:hover{background:var(--cuivre-fonce)}
.bouton.clair{background:var(--creme);color:var(--brun-profond)}
.bouton.clair:hover{background:#fff;color:var(--brun-profond)}
.bouton.petit{padding:8px 14px;font-size:.76rem}
.bouton.grand{padding:16px 30px;font-size:.9rem}
.bouton.large{width:100%}
.bouton svg{width:17px;height:17px;flex:0 0 auto}

/* ================================================================ BLOCS */

.carte{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);padding:26px}
.section{padding:72px 0}
.section.serre{padding:40px 0}
/* Accueil : sections plus resserrées, la page reste courte */
.page-accueil .section{padding:56px 0}
.page-accueil .section.serre{padding:32px 0}
.section.claire{background:var(--papier);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.section.sable{background:var(--creme-2)}
.section.sombre{background:var(--brun);color:#dde3ee}
.section.sombre h2,.section.sombre h3{color:#fff}
.section.sombre .muet{color:#bcc7d6}
.section.sombre a{color:var(--accent-sur-sombre)}

.entete-section{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;
  flex-wrap:wrap;margin-bottom:32px;padding-bottom:18px;border-bottom:1px solid var(--ligne)}
.entete-section h2{margin:0}
.entete-section p{color:var(--encre-doux);margin:6px 0 0;max-width:62ch}
.entete-section.centree{display:block;text-align:center;max-width:700px;margin:0 auto 38px;
  border-bottom:0;padding-bottom:0}
.surtitre{display:block;font-family:var(--police);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cuivre);margin:0 0 8px}
.entete-section.centree .surtitre::after{content:"";display:block;width:36px;height:2px;
  background:var(--cuivre);margin:10px auto 0}

.grille{display:grid;gap:24px}
.grille.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grille.c3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grille.c4{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
.grille.c5{grid-template-columns:repeat(auto-fit,minmax(186px,1fr))}
.grille.serree{gap:16px}

/* =============================================================== HÉROS */
/* Diaporama plein écran : photo en fond sur toute la largeur, texte posé
   dessus, léger zoom lent sur la photo active, bandeau « code postal » en bas. */

.heros-diapo{--bas:150px;--duree:7s;position:relative;overflow:hidden;color:#dde3ee;
  background:var(--brun-profond);height:clamp(600px,calc(100svh - 150px),780px)}
.diapos{position:absolute;inset:0}
.diapo{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.diapo.active{opacity:1;visibility:visible;z-index:1;transition:opacity 1.1s ease,visibility 0s}
.diapo-fond{position:absolute;inset:0;overflow:hidden}
.diapo-fond img,.diapo-fond svg{width:100%;height:100%;object-fit:cover;transform:scale(1.12);
  transition:transform 9s linear}
.diapo.active .diapo-fond img,.diapo.active .diapo-fond svg{transform:scale(1)}
.diapo-fond::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,20,36,.9) 0%,rgba(10,20,36,.66) 42%,rgba(10,20,36,.12) 100%),
             linear-gradient(0deg,rgba(10,20,36,.75) 0%,rgba(10,20,36,0) 38%)}
.diapo-contenu{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding-bottom:var(--bas)}
.diapo-contenu > *{opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.diapo.active .diapo-contenu > *{opacity:1;transform:none}
.diapo.active .diapo-contenu > :nth-child(1){transition-delay:.25s}
.diapo.active .diapo-contenu > :nth-child(2){transition-delay:.4s}
.diapo.active .diapo-contenu > :nth-child(3){transition-delay:.58s}
.diapo.active .diapo-contenu > :nth-child(4){transition-delay:.74s}
.heros-diapo .surtitre{color:var(--accent-sur-sombre);margin:0}
.diapo-titre{font-family:var(--titre);font-size:clamp(2.2rem,4.4vw,3.9rem);font-weight:500;line-height:1.06;
  color:#fff;margin:12px 0 18px;max-width:19ch;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.heros-diapo .accroche{font-size:1.16rem;color:#dbe2ec;max-width:50ch;margin:0 0 28px}
.heros-actions{display:flex;gap:12px;flex-wrap:wrap}
.heros-diapo .bouton{background:var(--cuivre)}
.heros-diapo .bouton:hover{background:var(--cuivre-fonce)}
.heros-diapo .bouton.secondaire{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.6)}
.heros-diapo .bouton.secondaire:hover{background:#fff;color:var(--brun-profond)}

/* Pastille flottante sur la photo */
.heros-vignette{position:absolute;background:var(--creme);color:var(--encre);
  padding:14px 18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55);display:flex;align-items:center;gap:12px;
  border-left:4px solid var(--cuivre)}
.heros-vignette.flottante{z-index:3;right:max(22px,calc((100% - var(--largeur))/2 + 22px));
  top:calc(50% - var(--bas)/2 - 40px);animation:flotter 6s ease-in-out infinite}
.heros-vignette .valeur{font-family:var(--titre);font-size:1.5rem;font-weight:600;line-height:1;
  color:var(--brun)}
.heros-vignette .libelle{font-size:.78rem;color:var(--encre-doux);line-height:1.3}
.jauge-humidite{width:52px;height:52px;flex:0 0 auto}
@keyframes flotter{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Flèches et points de progression */
.diapo-commandes{position:absolute;left:0;right:0;bottom:calc(var(--bas) + 22px);z-index:4;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;pointer-events:none}
.diapo-commandes > *{pointer-events:auto}
.diapo-fleche{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:rgba(10,20,36,.35);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0 0 3px;transition:background var(--transition)}
.diapo-fleche:hover,.diapo-fleche:focus-visible{background:var(--cuivre);border-color:var(--cuivre)}
.diapo-points{display:flex;gap:8px}
.diapo-point{width:38px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.diapo-point span{display:block;width:100%;height:3px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.diapo-point span::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.diapo-point.active span::after{animation:progression var(--duree) linear forwards}
.heros-diapo.en-pause .diapo-point.active span::after{animation-play-state:paused}
@keyframes progression{to{transform:scaleX(1)}}

/* Bandeau du bas : code postal et preuves, sur verre fumé */
.heros-bas{position:absolute;left:0;right:0;bottom:0;z-index:5;min-height:var(--bas);
  background:rgba(10,20,36,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center}
.heros-bas .conteneur{display:flex;align-items:center;gap:22px 40px;padding-top:16px;padding-bottom:16px}
.heros-cp{flex:0 1 430px}
.heros-cp .cp-bandeau{margin:0}
.heros-diapo .cp-bandeau label{color:#fff}
.heros-diapo .cp-bandeau label svg{color:var(--cuivre)}
.heros-diapo .cp-aide{color:#b4c0d1;font-size:.78rem;margin-top:5px}
.heros-preuves{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.heros-preuve{display:flex;flex-direction:column;gap:3px;font-size:.88rem}
.heros-preuve svg{width:22px;height:22px;color:var(--cuivre);flex:0 0 auto;margin-bottom:3px}
.heros-preuve b{display:block;font-size:1rem;color:#fff}
.heros-preuve span{color:#b4c0d1;font-size:.82rem}

@media(max-width:940px){
  .heros-vignette.flottante{display:none}
  .heros-bas .conteneur{flex-direction:column;align-items:stretch}
  .heros-cp{flex:none}
  .heros-diapo{--bas:0px;height:auto}
  .diapos{position:relative;height:clamp(480px,72svh,640px)}
  .heros-bas{position:static;background:var(--brun-profond);backdrop-filter:none;-webkit-backdrop-filter:none}
  .diapo-commandes{bottom:20px}
  .diapo-contenu{padding-bottom:70px}
}
@media(max-width:560px){
  .heros-preuves{grid-template-columns:1fr;gap:12px}
  .heros-preuve{flex-direction:row;align-items:center;gap:10px}
  .heros-preuve svg{margin:0}
  .heros-preuve span{display:none}
  .heros-diapo .accroche{font-size:1rem;margin-bottom:22px}
  .diapo-fond::after{background:linear-gradient(0deg,rgba(10,20,36,.92) 0%,rgba(10,20,36,.6) 55%,rgba(10,20,36,.35) 100%)}
  .diapo-fleche{display:none}
}
@media(prefers-reduced-motion:reduce){
  .diapo-fond img,.diapo-fond svg{transform:none;transition:none}
  .diapo-contenu > *{transition:none}
  .heros-vignette.flottante{animation:none}
  .diapo-point.active span::after{animation:none;transform:scaleX(1)}
}
/* Vitrine par rayon : onglets au-dessus d'une seule rangée de produits */
.onglets-rayons{display:flex;gap:6px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--ligne)}
.onglets-rayons::-webkit-scrollbar{display:none}
.onglet-rayon{flex:0 0 auto;padding:11px 16px;font-weight:700;font-size:.86rem;letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;color:var(--encre-doux);border-bottom:3px solid transparent;
  margin-bottom:-1px;white-space:nowrap;transition:color var(--transition),border-color var(--transition)}
.onglet-rayon:hover{color:var(--brun)}
.onglet-rayon[aria-selected="true"]{color:var(--brun-profond);border-bottom-color:var(--cuivre)}
.panneau-rayon:not([hidden]){animation:apparaitre .45s ease}
@keyframes apparaitre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panneau-rayon:not([hidden]){animation:none}}
/* ====================================================== BANDEAU CONFIANCE */
/* Quatre engagements, numérotés, sur fond crème. */

.bande-confiance{background:var(--creme-2);border-bottom:1px solid var(--ligne);counter-reset:engagement}
.bande-confiance .conteneur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.confiance{display:flex;align-items:flex-start;gap:14px;padding:26px 22px 26px 0;position:relative}
.confiance + .confiance{padding-left:22px;border-left:1px solid var(--ligne-forte)}
.confiance svg{width:28px;height:28px;color:var(--cuivre);flex:0 0 auto;margin-top:2px}
.confiance b{display:block;font-family:var(--titre);font-size:1.04rem;line-height:1.3;color:var(--brun-profond)}
.confiance span{font-size:.84rem;color:var(--encre-doux);line-height:1.4}
@media(max-width:900px){
  .bande-confiance .conteneur{grid-template-columns:1fr 1fr}
  .confiance,.confiance + .confiance{padding:18px 14px;border-left:0;border-bottom:1px solid var(--ligne-forte)}
}
@media(max-width:520px){.bande-confiance .conteneur{grid-template-columns:1fr}}

/* =============================================================== ALERTES */

.alerte{border-radius:var(--rayon-s);padding:15px 18px;margin:0 0 20px;border:1px solid;border-left-width:4px;
  display:flex;gap:13px;align-items:flex-start;font-size:.95rem;line-height:1.55}
.alerte p:last-child{margin-bottom:0}
.alerte::before{font-size:1.05rem;line-height:1.4;flex:0 0 auto}
.alerte.succes{background:var(--vert-clair);border-color:#b6d6c3;border-left-color:var(--vert);color:#1a3556}
.alerte.succes::before{content:"✓"}
.alerte.info{background:var(--bleu-clair);border-color:#c5d8e3;border-left-color:var(--bleu);color:#1d4459}
.alerte.info::before{content:"i";font-weight:800;font-style:italic}
.alerte.attention{background:var(--orange-clair);border-color:#e9d1a4;border-left-color:var(--orange);color:#6f4506}
.alerte.attention::before{content:"!"; font-weight:800}
.alerte.erreur{background:var(--rouge-clair);border-color:#ecc2ba;border-left-color:var(--rouge);color:#7c2519}
.alerte.erreur::before{content:"×";font-weight:800;font-size:1.25rem;line-height:1.2}

.a-renseigner{background:var(--orange-clair);border:1px dashed #e7a77c;color:#6f4506;
  padding:1px 8px;border-radius:2px;font-size:.85em;white-space:nowrap}

.encadre{background:var(--creme-2);border-left:3px solid var(--cuivre);padding:17px 19px}
.encadre-iban{background:var(--papier);border:1px solid var(--ligne);border-top:4px solid var(--brun);
  border-radius:var(--rayon);padding:26px;font-size:1.02rem}
.encadre-iban dl{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0}
.encadre-iban dt{font-weight:700;color:var(--brun)}
.encadre-iban dd{margin:0;font-family:ui-monospace,Consolas,Menlo,monospace;
  font-size:1.02rem;letter-spacing:.03em;word-break:break-all}

/* ------------------------------- Coordonnées bancaires à copier ------ */

.bloc-virement .coordonnees-virement{display:block;margin:0}
.bloc-virement .ligne-virement{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  padding:11px 0; border-bottom:1px dashed var(--ligne-forte);
}
.bloc-virement .ligne-virement:last-child{border-bottom:0}
.bloc-virement dt{
  flex:0 0 100%; font-weight:700; color:var(--cuivre-fonce);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.08em;
  display:flex; align-items:baseline; gap:8px;
}
.bloc-virement dt .petit{text-transform:none; letter-spacing:0; font-weight:500}
.bloc-virement dd{
  margin:0; flex:1 1 auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:10px; min-width:0;
}
.bloc-virement .valeur-virement{
  font-family:ui-monospace,Consolas,Menlo,monospace;
  font-size:1.08rem; font-weight:700; letter-spacing:.03em;
  color:var(--encre); word-break:break-all;
  user-select:all; -webkit-user-select:all;
}

.bouton-copier{
  flex:none; cursor:pointer; font:inherit; font-size:.76rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  padding:7px 14px; min-height:36px;
  border:1px solid var(--brun); border-radius:var(--rayon-s);
  background:transparent; color:var(--brun);
  transition:background-color .15s ease, color .15s ease;
}
.bouton-copier:hover{background:var(--brun); color:#fff}
.bouton-copier:focus-visible{outline:3px solid var(--cuivre); outline-offset:2px}
.bouton-copier.copie{background:var(--vert); color:#fff; border-color:var(--vert)}

.bouton-copier-tout{margin-top:18px}
.bouton-copier-tout.copie{background:var(--vert)}
.message-copie-aide{margin:9px 0 0}

@media(max-width:560px){
  .bloc-virement{padding:18px 16px}
  .bloc-virement .valeur-virement{font-size:1rem}
  .bloc-virement dd{gap:8px}
  .bouton-copier{padding:8px 13px}
  .bouton-copier-tout{width:100%}
}

/* ============================================================ ÉTIQUETTES */

.etiquette{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:2px;
  font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;background:var(--creme-2);
  color:var(--encre-doux);white-space:nowrap}
.etiquette.vert{background:var(--vert-clair);color:var(--vert-fonce)}
.etiquette.orange{background:var(--orange-clair);color:#7f4e08}
.etiquette.bleu{background:var(--bleu-clair);color:#22506b}
.etiquette.rouge{background:var(--rouge);color:#fff}
.etiquette.gris{background:#e7e3d8;color:var(--encre-doux)}
.etiquette.or{background:var(--cuivre-clair);color:var(--cuivre-fonce)}
.etiquette.pleine{background:var(--brun);color:#fff}

.puce-etat{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:currentColor}

/* ========================================================= CARTE PRODUIT */
/* Grille « boutique » : cases jointives, photo sur fond clair, remise en %,
   nom sur deux lignes, prix, repère de livraison et bouton pleine largeur. */

.grille.boutique{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:1px solid var(--ligne);border-left:1px solid var(--ligne);
  border-radius:var(--rayon);background:var(--papier)}
@media(max-width:1000px){.grille.boutique{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.grille.boutique{grid-template-columns:repeat(2,minmax(0,1fr))}}

.produit-carte{background:var(--papier);border:1px solid var(--ligne);border-radius:var(--rayon);
  display:flex;flex-direction:column;position:relative;padding:14px;min-width:0;
  transition:box-shadow var(--transition)}
.grille.boutique .produit-carte{border:0;border-right:1px solid var(--ligne);
  border-bottom:1px solid var(--ligne);border-radius:0}
.produit-carte:hover{box-shadow:var(--ombre);z-index:3}
.produit-carte .visuel{aspect-ratio:1/1;position:relative;overflow:hidden;background:#fff;
  display:block;border-radius:2px}
.produit-carte .visuel img,.produit-carte .visuel svg{width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.produit-carte:hover .visuel img,.produit-carte:hover .visuel svg{transform:scale(1.04)}
.produit-carte .badges{position:absolute;top:22px;left:22px;display:flex;flex-direction:column;
  gap:5px;align-items:flex-start;z-index:2}
.badge-remise{display:inline-block;padding:4px 8px;border-radius:3px;background:var(--brun-profond);
  color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;line-height:1.2}
.produit-carte .corps{padding:14px 2px 0;display:flex;flex-direction:column;flex:1;gap:7px}
.produit-carte h3{font-family:var(--police);font-size:.98rem;font-weight:600;margin:0;line-height:1.35;
  min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.produit-carte h3 a{text-decoration:none;color:var(--encre)}
.produit-carte h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.produit-carte:hover h3 a{color:var(--brun)}
.produit-carte .carac li{font-size:.76rem}
.produit-carte .prix{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;
  font-family:var(--police);color:var(--brun-profond);line-height:1.2}
.produit-carte .prix .montant{font-size:1.18rem;font-weight:700}
.produit-carte .prix .avant{font-size:.8rem;color:var(--encre-doux)}
.produit-carte .prix .unite{flex-basis:100%;font-size:.78rem;color:var(--encre-doux)}
.produit-carte .barre{text-decoration:line-through;color:var(--encre-tres-doux);font-size:.88rem}
.produit-carte .prix-livre{font-size:.8rem;margin:0;padding:6px 8px}
.produit-carte .pied-carte{margin-top:auto;padding-top:6px}
.produit-carte .bouton{position:relative;z-index:2;width:100%}
.produit-carte .pied-carte > .bouton,.produit-carte .ajout-rapide{width:100%}
.bouton.bouton-carte{background:var(--creme-2);color:var(--brun-profond);border:1px solid transparent;
  font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;box-shadow:none}
.bouton.bouton-carte:hover,.bouton.bouton-carte:focus-visible{background:var(--brun);color:#fff}
.bouton.bouton-carte span{font-size:1.05rem;line-height:1;margin-right:2px}

@media(max-width:560px){
  .produit-carte{padding:10px}
  .produit-carte .badges{top:14px;left:14px}
  .badge-remise{font-size:.68rem;padding:3px 6px}
  .produit-carte h3{font-size:.9rem}
  .produit-carte .carac{display:none}
  .produit-carte .prix .montant{font-size:1.05rem}
  .bouton.bouton-carte{font-size:.7rem;letter-spacing:.02em;padding-left:6px;padding-right:6px;white-space:normal}
}
.carac{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;padding:0;list-style:none}
.carac li{font-size:.8rem;color:var(--encre-doux);white-space:nowrap;position:relative}
.carac li + li::before{content:"·";position:absolute;left:-8px;color:var(--cuivre)}
.carac li b{color:var(--brun);font-weight:700}

/* Carte catégorie : image à gauche, texte à droite. */
.categorie-carte{display:grid;grid-template-columns:118px minmax(0,1fr);background:var(--papier);
  border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;text-decoration:none;
  color:inherit;transition:border-color var(--transition),box-shadow var(--transition)}
.categorie-carte:hover{border-color:var(--brun-clair);box-shadow:var(--ombre);color:inherit}
.categorie-carte .visuel{background:var(--creme-2);min-height:118px}
.categorie-carte .visuel img,.categorie-carte .visuel svg{width:100%;height:100%;object-fit:cover}
.categorie-carte .corps{padding:15px 17px;display:flex;flex-direction:column;justify-content:center}
.categorie-carte h3{font-size:1.12rem;margin:0 0 4px}
.categorie-carte p{font-size:.88rem;color:var(--encre-doux);margin:0}
.categorie-carte .nb{font-size:.76rem;color:var(--cuivre);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-top:8px;display:block}

/* Liste compacte de sous-catégories */
.pastilles{display:flex;flex-wrap:wrap;gap:8px}
.pastille-lien{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;
  background:transparent;border:1px solid var(--ligne-forte);border-radius:2px;text-decoration:none;
  color:var(--brun-profond);font-size:.9rem;font-weight:600;transition:all var(--transition)}
.pastille-lien:hover{border-color:var(--brun);background:var(--brun);color:#fff}
.pastille-lien .nb{font-size:.76rem;color:var(--encre-tres-doux);font-weight:500}
.pastille-lien:hover .nb{color:rgba(255,255,255,.8)}
.pastille-lien.actif{background:var(--brun);color:#fff;border-color:var(--brun)}
.pastille-lien.actif .nb{color:rgba(255,255,255,.8)}

/* ============================================================ FORMULAIRES */

label{display:block;font-weight:700;font-size:.92rem;margin-bottom:5px}
.aide{display:block;font-weight:400;font-size:.84rem;color:var(--encre-doux);margin:-2px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=search],input[type=url],input[type=file],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--ligne-forte);border-radius:var(--rayon-s);
  font:inherit;font-size:.97rem;background:#fff;color:var(--encre);
  transition:border-color var(--transition),box-shadow var(--transition)}
input:focus,select:focus,textarea:focus{border-color:var(--brun);
  outline:3px solid rgba(31,58,95,.16);outline-offset:0}
textarea{min-height:120px;resize:vertical;line-height:1.6}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232f4f3a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
.champ{margin-bottom:18px}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.champs-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 18px}
@media(max-width:640px){.champs-2,.champs-3{grid-template-columns:1fr}}
.case{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:.93rem;margin-bottom:12px}
.case input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brun)}
/* min-width:0 : sans lui, un fieldset suit la largeur de son contenu et déborde sur téléphone. */
fieldset{border:1px solid var(--ligne);border-radius:var(--rayon);padding:18px 20px;
  margin:0 0 22px;min-width:0;background:var(--papier)}
legend{font-family:var(--titre);font-weight:600;padding:0 9px;font-size:1.08rem;color:var(--brun-profond)}
.erreur-champ{color:var(--rouge);font-size:.86rem;margin-top:4px;display:block;font-weight:700}
.champ-erreur input,.champ-erreur select,.champ-erreur textarea{border-color:var(--rouge)}

/* Sélecteur de quantité */
.quantite{display:inline-flex;align-items:stretch;border:1px solid var(--brun);
  border-radius:var(--rayon-s);overflow:hidden;background:#fff}
.quantite button{width:42px;border:0;background:var(--brun);color:#fff;
  font-size:1.15rem;font-weight:700;cursor:pointer;line-height:1}
.quantite button:hover{background:var(--brun-fonce)}
.quantite input{width:64px;border:0;text-align:center;font-weight:700;padding:11px 4px;
  -moz-appearance:textfield}
.quantite input::-webkit-outer-spin-button,.quantite input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}

/* ============================================================== TABLEAUX */

.tableau-enveloppe{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:20px}
table.donnees{width:100%;border-collapse:collapse;font-size:.94rem;background:var(--papier);
  border:1px solid var(--ligne)}
table.donnees th,table.donnees td{padding:12px 14px;text-align:left;
  border-bottom:1px solid var(--ligne);vertical-align:top}
table.donnees th{background:var(--brun);font-size:.74rem;text-transform:uppercase;
  letter-spacing:.08em;color:#eceff6;font-weight:700;white-space:nowrap}
table.donnees th[scope="row"]{background:var(--creme-2);color:var(--encre-doux)}
table.donnees tbody tr:hover{background:var(--creme)}
table.donnees .nombre{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.donnees td.total{font-weight:700}
table.donnees tr.ligne-total th,table.donnees tr.ligne-total td{font-weight:700;font-size:1.05rem;border-top:2px solid var(--brun)}
table.donnees tfoot td,table.donnees tfoot th{background:var(--creme-2);font-weight:700;color:var(--encre)}

/* =========================================================== FIL D'ARIANE */

.ariane{font-size:.84rem;color:var(--encre-doux);padding:20px 0 0;letter-spacing:.02em}
.ariane a{color:var(--encre-doux);text-decoration:none}
.ariane a:hover{color:var(--cuivre-fonce);text-decoration:underline}
.ariane span{margin:0 7px;color:var(--cuivre)}

/* ============================================================== PAGINATION */

.pagination{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:38px}
.pagination a,.pagination span{min-width:42px;height:42px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 12px;border-radius:var(--rayon-s);border:1px solid var(--ligne-forte);
  background:transparent;text-decoration:none;color:var(--brun-profond);font-size:.92rem;font-weight:700}
.pagination a:hover{border-color:var(--brun);background:var(--brun);color:#fff}
.pagination .actuelle{background:var(--cuivre);color:#fff;border-color:var(--cuivre)}
.pagination .points{border:0;background:none;min-width:20px}

/* ================================================================== PIED */
/* Pied de page clair : crème, filet vert, bas de page vert forêt. */

.pied{background:var(--creme-2);color:var(--encre-doux);margin-top:80px;padding:0;font-size:.93rem;
  border-top:6px solid var(--brun)}
.pied-haut{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  padding:34px 0 30px;border-bottom:1px solid var(--ligne-forte)}
.pied-haut .marque-pied{margin:0}
.pied-haut p{margin:0;max-width:56ch}
.pied a{color:var(--brun-profond);text-decoration:none}
.pied a:hover{text-decoration:underline;color:var(--cuivre-fonce)}
.pied h4{color:var(--cuivre);font-family:var(--police);font-size:.76rem;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:14px;font-weight:700}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin-bottom:8px}
.pied .colonnes{display:grid;gap:34px;grid-template-columns:1fr 1fr 1fr 1.3fr;padding:38px 0 10px}
@media(max-width:900px){.pied .colonnes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied .colonnes{grid-template-columns:1fr}}
.pied .marque-pied{font-family:var(--titre);color:var(--brun-profond);font-size:1.7rem;font-weight:600}
.pied .mention-pied{margin:26px 0 0;max-width:900px;line-height:1.7;color:var(--encre-tres-doux)}
.pied .bas{margin-top:34px;background:var(--brun-profond);color:#aab6c8;padding:18px 0;font-size:.84rem}
.pied .bas .conteneur{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.pied .bas a{color:#eceff6}
.pied-contact p{margin:0 0 6px}
.pied-contact svg{display:inline-block;vertical-align:-3px;color:var(--cuivre)}
.pied-paiement{display:flex;align-items:center;gap:10px;border:1px solid var(--ligne-forte);
  padding:12px 15px;margin-top:16px;background:var(--papier)}
.pied-paiement svg{width:26px;height:26px;color:var(--brun);flex:0 0 auto}
.pied-paiement span{font-size:.84rem;line-height:1.4}

/* ============================================================== COOKIES */

.bandeau-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:400;background:var(--papier);
  border:1px solid var(--ligne-forte);border-top:4px solid var(--brun);
  box-shadow:0 16px 48px -12px rgba(14,28,48,.45);padding:22px 24px;max-width:680px;margin:0 auto}
.bandeau-cookies .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.bandeau-cookies .actions .bouton{flex:1 1 170px}

/* ================================================== VÉRIFICATION LIVRAISON */

.verif-livraison{background:var(--papier);border:1px solid var(--ligne);border-top:4px solid var(--cuivre);
  border-radius:var(--rayon);padding:28px}
.verif-livraison .champs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.verif-livraison .champs .champ{flex:1 1 170px;margin-bottom:0}
.verif-resultat{margin-top:18px;border-radius:var(--rayon-s);padding:17px 19px;
  border:1px solid;font-size:.95rem;animation:apparait .25s ease}
.verif-resultat.oui{background:var(--vert-clair);border-color:#b6d6c3}
.verif-resultat.non{background:var(--orange-clair);border-color:#e9d1a4}
.verif-resultat dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:10px 0 0;
  font-size:.9rem}
.verif-resultat dt{color:var(--encre-doux)}
.verif-resultat dd{margin:0;font-weight:700}
@keyframes apparait{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* ============================================================ FICHE PRODUIT */

.fiche{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;
  align-items:start}
@media(max-width:940px){.fiche{grid-template-columns:1fr;gap:30px}}

.galerie-principale{border:1px solid var(--ligne);padding:10px;background:var(--papier);
  aspect-ratio:1/1;position:relative}
.galerie-principale img,.galerie-principale svg{width:100%;height:100%;object-fit:cover}
.galerie-vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px;
  margin-top:11px}
.galerie-vignettes button{padding:0;border:2px solid transparent;overflow:hidden;background:var(--creme-2);
  cursor:pointer;aspect-ratio:1;transition:border-color var(--transition)}
.galerie-vignettes button.actif{border-color:var(--cuivre)}
.galerie-vignettes button:hover{border-color:var(--brun-clair)}
.galerie-vignettes img,.galerie-vignettes svg{width:100%;height:100%;object-fit:cover}

.fiche-achat{position:sticky;top:120px;background:var(--papier);border:1px solid var(--ligne);
  padding:28px}
@media(max-width:940px){.fiche-achat{position:static;padding:20px}}
.fiche-achat h1{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem)}
.prix-principal{font-family:var(--titre);font-size:2.3rem;font-weight:600;color:var(--brun);
  line-height:1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.prix-principal .barre{font-size:1.15rem;color:var(--encre-tres-doux);text-decoration:line-through;
  font-family:var(--police);font-weight:400}
.prix-detail{color:var(--encre-doux);font-size:.9rem;margin-top:6px}

.variantes-liste{display:flex;flex-direction:column;gap:0;margin:16px 0 20px;border:1px solid var(--ligne)}
.variante-choix{display:flex;align-items:center;gap:13px;padding:14px 16px;border-bottom:1px solid var(--ligne);
  cursor:pointer;background:#fff;transition:background var(--transition)}
.variante-choix:last-child{border-bottom:0}
.variante-choix:hover{background:var(--creme)}
.variante-choix input{margin:0;width:18px;height:18px;accent-color:var(--brun);flex:0 0 auto}
.variante-choix.selectionnee{background:var(--creme-2);box-shadow:inset 4px 0 0 var(--cuivre)}
.variante-choix .infos{flex:1;min-width:0}
.variante-choix .titre-var{font-weight:700;font-size:.96rem;display:block}
.variante-choix .meta{font-size:.82rem;color:var(--encre-doux)}
.variante-choix .prix-var{font-weight:600;font-family:var(--titre);font-size:1.14rem;
  color:var(--brun);white-space:nowrap;text-align:right}
.variante-choix .prix-var small{display:block;font-family:var(--police);font-weight:400;
  font-size:.74rem;color:var(--encre-doux)}
.variante-choix.epuisee{opacity:.55}

.tableau-carac{width:100%;border-collapse:collapse;font-size:.93rem}
.tableau-carac th{text-align:left;padding:10px 12px 10px 0;color:var(--encre-doux);font-weight:400;
  width:44%;border-bottom:1px dotted var(--ligne-forte);vertical-align:top}
.tableau-carac td{padding:10px 0;font-weight:700;border-bottom:1px dotted var(--ligne-forte);color:var(--brun-profond)}

.onglets{display:flex;gap:0;border-bottom:1px solid var(--ligne-forte);margin-bottom:26px;
  overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglets button{border:0;background:none;padding:14px 20px;font:inherit;font-weight:700;
  font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-doux);cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.onglets button:hover{color:var(--brun)}
.onglets button[aria-selected="true"]{color:var(--brun-profond);border-bottom-color:var(--cuivre);
  background:var(--papier)}
.panneau-onglet[hidden]{display:none}

/* ====================================================== CATALOGUE / FILTRES */

.catalogue{display:grid;grid-template-columns:260px minmax(0,1fr);gap:36px;align-items:start}
@media(max-width:940px){.catalogue{grid-template-columns:1fr}}
.filtres{background:var(--papier);border:1px solid var(--ligne);border-top:4px solid var(--brun);
  padding:20px;position:sticky;top:120px}
@media(max-width:940px){.filtres{position:static}}
.filtres-groupe{border-bottom:1px solid var(--ligne);padding:14px 0}
.filtres-groupe:first-child{padding-top:0}
.filtres-groupe:last-child{border-bottom:0;padding-bottom:0}
.filtres-groupe > h3{font-family:var(--titre);font-size:1rem;color:var(--brun-profond);margin:0 0 8px}
.filtres-groupe ul{list-style:none;margin:0;padding:0}
.filtres-groupe li a{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;
  margin-left:-8px;text-decoration:none;color:var(--encre);font-size:.91rem}
.filtres-groupe li a:hover{color:var(--cuivre-fonce)}
.filtres-groupe li a.actif{background:var(--brun);color:#fff;font-weight:700}
.filtres-groupe li a.actif .nb{color:rgba(255,255,255,.8)}
.filtres-groupe .nb{color:var(--encre-tres-doux);font-size:.8rem;font-variant-numeric:tabular-nums}
.filtres-actifs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.filtre-actif{display:inline-flex;align-items:center;gap:7px;background:var(--cuivre);color:#fff;
  border-radius:2px;padding:5px 8px 5px 12px;font-size:.84rem;font-weight:700;text-decoration:none}
.filtre-actif:hover{background:var(--cuivre-fonce);color:#fff}
.filtre-actif .x{width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.24);
  display:grid;place-items:center;font-size:.72rem;line-height:1}
.barre-catalogue{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:22px;padding:12px 16px;background:var(--creme-2)}
.barre-catalogue .compte{font-size:.92rem;color:var(--encre-doux)}
.barre-catalogue .compte b{color:var(--encre)}
.tri-select{display:flex;align-items:center;gap:9px;font-size:.9rem}
.tri-select select{width:auto;min-width:190px;padding:8px 32px 8px 12px;font-size:.9rem}
.bouton-filtres{display:none}
@media(max-width:940px){
  .bouton-filtres{display:inline-flex}
  .filtres{display:none;margin-bottom:20px}
  .filtres.ouvert{display:block}
}

.vide-catalogue{text-align:center;padding:60px 20px;color:var(--encre-doux)}
.vide-catalogue svg{width:96px;height:72px;margin:0 auto 18px;opacity:.55}

/* ============================================================ GUIDE / ÉTAPES */
/* Une frise horizontale : numéros en serif, reliés par un filet. */

.etapes{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  counter-reset:etape}
.etape{position:relative;padding:22px 0 0;border-top:2px solid var(--brun)}
.etape::before{counter-increment:etape;content:counter(etape, decimal-leading-zero);display:block;
  font-family:var(--titre);font-size:2rem;font-weight:600;color:var(--cuivre);line-height:1;margin-bottom:10px}
.etape h3{margin:0 0 7px;font-size:1.12rem}
.etape p{margin:0;font-size:.92rem;color:var(--encre-doux)}

/* ============================================================== ACCORDÉON */

.accordeon{border-top:1px solid var(--ligne-forte)}
.accordeon details{border-bottom:1px solid var(--ligne-forte)}
.accordeon summary{cursor:pointer;padding:18px 4px;font-family:var(--titre);font-weight:600;font-size:1.08rem;
  color:var(--brun-profond);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.accordeon summary::-webkit-details-marker{display:none}
.accordeon summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--cuivre);
  border-bottom:2px solid var(--cuivre);transform:rotate(45deg);flex:0 0 auto;margin-right:6px;
  transition:transform var(--transition)}
.accordeon details[open] summary::after{transform:rotate(225deg)}
.accordeon summary:hover{color:var(--cuivre-fonce)}
.accordeon .reponse{padding:0 4px 20px;color:var(--encre-doux);font-size:.96rem}
.accordeon.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-top:0}
.accordeon.deux-colonnes details:nth-child(-n+2){border-top:1px solid var(--ligne-forte)}
@media(max-width:760px){.accordeon.deux-colonnes{grid-template-columns:1fr}
  .accordeon.deux-colonnes details:nth-child(2){border-top:0}}

/* ================================================================== AVIS */

.avis-carte{background:var(--papier);border:1px solid var(--ligne);padding:26px;display:flex;
  flex-direction:column;gap:11px;position:relative}
.avis-carte::before{content:"“";position:absolute;right:18px;top:0;font-family:var(--titre);
  font-size:5rem;line-height:1;color:var(--sable)}
.etoiles{color:var(--cuivre);letter-spacing:2px;font-size:1rem}
.avis-carte blockquote{margin:0;font-size:.97rem;color:var(--encre);line-height:1.65}
.avis-carte .auteur{font-size:.86rem;margin-top:auto;padding-top:10px;border-top:1px solid var(--ligne)}
.avis-carte .auteur b{display:block;font-style:normal;color:var(--brun-profond)}

/* ============================================================== BANDEAUX */

.banniere{padding:38px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--cuivre);color:#fff;position:relative;overflow:hidden}
.banniere::after{content:"";position:absolute;right:-60px;bottom:-120px;width:320px;height:320px;
  border-radius:50%;border:40px solid rgba(255,255,255,.08)}
.banniere > *{position:relative;z-index:1}
.banniere h2,.banniere h3{color:#fff;margin:0 0 6px;font-size:1.6rem}
.banniere p{margin:0;color:rgba(255,255,255,.9);max-width:60ch}

/* ============================================================ BLOC SAISON */

.section.saison{background:var(--papier);border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.saison-entete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;align-items:start;margin-bottom:34px}
.saison-texte .surtitre{margin:0 0 8px}
.saison-texte h2{margin:0 0 12px;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.15}
.saison-message{color:var(--encre-doux);margin:0 0 16px;max-width:52ch}
.saison-points{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:8px}
.saison-points li{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;line-height:1.45}
.saison-points svg{flex:0 0 auto;margin-top:2px;color:var(--cuivre)}
.saison-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0}
.saison-urgence{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;
  font-weight:700;color:var(--cuivre-fonce);background:var(--cuivre-clair);padding:7px 14px}
.saison-urgence svg{color:var(--cuivre)}

.saison-rayons{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;
  align-content:start;border-top:1px solid var(--ligne)}
@media(max-width:420px){
  .saison-rayons{grid-template-columns:1fr}
  .saison-rayons .pastille{width:36px;height:36px}
}
.saison-rayons a{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--ligne);
  padding:11px 6px;text-decoration:none;color:var(--encre);transition:background var(--transition)}
.saison-rayons a:hover{background:var(--creme);color:var(--brun-fonce)}
.saison-rayons .pastille{flex:0 0 auto;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--creme-2);display:grid;place-items:center;padding:0;min-width:0;margin:0}
.saison-rayons .pastille img,.saison-rayons .pastille svg{width:100%;height:100%;object-fit:cover}
.saison-rayons .nom{flex:1 1 auto;min-width:0;font-size:.92rem;font-weight:700;
  line-height:1.25;overflow-wrap:anywhere}
.saison-rayons .nb{flex:0 0 auto;font-size:.78rem;font-weight:700;color:var(--cuivre)}

@media(max-width:900px){
  .saison-entete{grid-template-columns:1fr;gap:26px}
}

/* ------------------------------------------------- Ajout au panier direct */

.ajout-rapide{position:relative;z-index:2;margin:0}
.ajout-rapide .bouton{width:100%;white-space:nowrap}
.ajout-rapide.occupe .bouton{opacity:.6;pointer-events:none}

/* Confirmation flottante après un ajout au panier */
.toast-panier{position:fixed;left:50%;bottom:26px;transform:translate(-50%,120%);
  z-index:120;max-width:min(92vw,480px);display:flex;align-items:center;gap:14px;
  background:var(--brun-profond);color:#eceff6;border-left:4px solid var(--cuivre);
  padding:13px 16px;box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .28s;opacity:0}
.toast-panier.visible{transform:translate(-50%,0);opacity:1}
.toast-panier .texte{flex:1;font-size:.92rem;line-height:1.35}
.toast-panier .bouton{flex:0 0 auto;background:var(--cuivre);color:#fff;border:0}
.toast-panier .bouton:hover{background:var(--cuivre-fonce);color:#fff}
.toast-panier.erreur{background:#6e2218}

@media(max-width:560px){
  .toast-panier{left:12px;right:12px;bottom:12px;transform:translate(0,140%);max-width:none}
  .toast-panier.visible{transform:translate(0,0)}
}

/* ------------------------------------------- Estimation du port au panier */

.estim-port{background:var(--creme-2);border:1px solid var(--ligne);
  padding:14px 15px;margin:16px 0}
.estim-port label{display:block;margin-bottom:7px;font-size:.92rem}
.estim-port label .petit{display:block;font-weight:400}
.rang-estim{display:flex;gap:8px;align-items:stretch}
.rang-estim input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--ligne-forte);
  border-radius:var(--rayon-s);font:inherit;background:#fff;color:var(--encre)}
.rang-estim input:focus{border-color:var(--brun);outline:2px solid var(--brun);outline-offset:1px}
.rang-estim .bouton{flex:0 0 auto;white-space:nowrap}
.estim-port .donnees{background:var(--papier)}
/* Prix barré générique, hors carte produit (panier, récapitulatifs). */
.barre{text-decoration:line-through}

.bouton.large.mt1{margin-top:10px}

/* =================================================== LE PRIX LIVRÉ CHEZ VOUS */

.cp-bandeau,.cp-fiche{display:block;margin:20px 0 4px;max-width:440px}
.cp-bandeau label,.cp-fiche label{display:flex;align-items:center;gap:7px;
  font-size:.94rem;font-weight:700;margin-bottom:8px;color:var(--brun-profond)}
.cp-bandeau label svg,.cp-fiche label svg{flex:0 0 auto;color:var(--cuivre)}
.cp-ligne{display:flex;gap:0;align-items:stretch}
.cp-ligne input{flex:1 1 auto;min-width:0;padding:11px 13px;border:1px solid var(--ligne-forte);
  border-radius:var(--rayon-s) 0 0 var(--rayon-s);font:inherit;background:#fff;color:var(--encre);
  letter-spacing:.1em}
.cp-ligne input:focus{border-color:var(--cuivre);outline:2px solid var(--cuivre);outline-offset:0}
.cp-ligne .bouton{flex:0 0 auto;white-space:nowrap;border-radius:0 var(--rayon-s) var(--rayon-s) 0}
.cp-aide{display:block;margin-top:7px;font-size:.84rem;color:var(--encre-doux);line-height:1.45}

.cp-fiche{margin:14px 0 0;max-width:none;background:var(--creme-2);
  border:1px solid var(--ligne);padding:14px 15px}

/* --- Le rappel discret sous la navigation --- */
.rappel-cp{background:var(--cuivre-clair);border-bottom:1px solid #f6d3bb;
  font-size:.88rem;color:var(--cuivre-fonce)}
.rappel-cp .conteneur{display:flex;align-items:center;gap:9px;
  padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.rappel-cp svg{flex:0 0 auto}
.rappel-cp span{flex:1 1 auto;min-width:0}
.rappel-cp form{margin:0;flex:0 0 auto}
.rappel-cp button{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--cuivre-fonce);text-decoration:underline;text-underline-offset:2px;font-weight:700}
.rappel-cp button:hover{color:var(--brun-fonce)}

/* --- La petite ligne sous le prix, dans les grilles de produits --- */
.prix-livre{margin:4px 0 0;padding:8px 10px;background:var(--creme);
  font-size:.86rem;line-height:1.4}
.prix-livre span{display:inline-flex;align-items:flex-start;gap:6px}
.prix-livre svg{flex:0 0 auto;margin-top:2px}
.livre-oui{color:var(--vert-fonce)}
.livre-oui b{font-weight:700}
.livre-non{color:var(--encre-doux)}
.livre-mini{color:var(--orange)}
.livre-format{display:block;margin-top:2px;padding-left:20px;font-size:.8rem;
  font-weight:400;color:var(--encre-doux)}

/* --- Le détail, sur la fiche produit --- */
.prix-livre-bloc{display:flex;gap:11px;align-items:flex-start;margin:14px 0 0;
  padding:13px 15px;border:1px solid var(--ligne);border-left-width:4px}
.prix-livre-bloc svg{flex:0 0 auto;margin-top:2px}
.prix-livre-bloc b{display:block;font-size:1.02rem;line-height:1.3}
.prix-livre-bloc span{display:block;font-size:.87rem;line-height:1.45;margin-top:3px;
  color:var(--encre-doux)}
.prix-livre-bloc.oui{background:var(--vert-clair);border-color:#b6d6c3;border-left-color:var(--vert);color:var(--vert-fonce)}
.prix-livre-bloc.oui span{color:#2a4a73}
.prix-livre-bloc.non{background:var(--orange-clair);border-color:#e9d1a4;border-left-color:var(--orange);color:#6a4405}
.prix-livre-bloc.non span{color:#6a4405}
.prix-livre-bloc.vide{display:block;padding:0;border:0;background:none}
.prix-livre-bloc .cp-ligne{display:flex;margin-top:0;font-size:inherit;line-height:inherit}

@media(max-width:520px){
  .cp-ligne{flex-wrap:wrap;gap:8px}
  .cp-ligne input{flex:1 1 100%;border-radius:var(--rayon-s)}
  .cp-ligne .bouton{width:100%;justify-content:center;border-radius:var(--rayon-s)}
}

/* ============================================ ENTRER PAR L'USAGE, PAS LE RAYON */

.usages{margin:0 0 34px}
.usages-titre{font-size:1.12rem;margin:0 0 14px}
.usages-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--ligne);
  background:var(--papier)}

.usage{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:24px 22px;
  text-decoration:none;color:inherit;transition:background var(--transition)}
.usage + .usage{border-left:1px solid var(--ligne)}
.usage:hover{background:var(--brun);color:#fff}
.usage-icone{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;background:var(--creme-2);color:var(--brun)}
.usage:hover .usage-icone{background:var(--cuivre);color:#fff}
.usage-texte{display:block;min-width:0}
.usage-texte strong{display:block;font-family:var(--titre);font-size:1.15rem;line-height:1.25;
  color:var(--brun-profond)}
.usage:hover .usage-texte strong{color:#fff}
.usage-resume{display:block;margin:6px 0 8px;font-size:.88rem;line-height:1.45;color:var(--encre-doux)}
.usage:hover .usage-resume{color:#c8d1de}
.usage-nb{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cuivre)}
.usage:hover .usage-nb{color:var(--accent-sur-sombre)}

.titre-rayons{font-size:1.12rem;margin:34px 0 14px}

@media(max-width:1000px){ .usages-grille{grid-template-columns:repeat(2,1fr)}
  .usage:nth-child(3){border-left:0}
  .usage:nth-child(n+3){border-top:1px solid var(--ligne)} }
@media(max-width:560px){
  .usages-grille{grid-template-columns:1fr}
  .usage + .usage{border-left:0;border-top:1px solid var(--ligne)}
  .usage{padding:18px 16px}
}

/* ======================================== LE VIREMENT, EXPLIQUÉ AVANT LE PANIER */

.virement{background:var(--papier);border:1px solid var(--ligne);padding:26px 28px;margin:0}
.virement > h3{display:flex;align-items:center;gap:9px;margin:0 0 20px;font-size:1.25rem;
  color:var(--brun-profond)}
.virement > h3 svg{flex:0 0 auto;color:var(--cuivre)}

.virement-etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  list-style:none;margin:0;padding:0;counter-reset:none}
.virement-etapes li{display:flex;gap:12px;align-items:flex-start}
.virement-etapes .num{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
  border:2px solid var(--cuivre);border-radius:50%;color:var(--cuivre-fonce);font-size:.9rem;font-weight:700;
  font-family:var(--titre);line-height:1}
.virement-etapes strong{display:block;font-size:.98rem;line-height:1.3;margin-bottom:4px;color:var(--brun-profond)}
.virement-etapes .petit{display:block;font-size:.86rem;line-height:1.5;color:var(--encre-doux)}

.virement-garanties{display:flex;gap:9px;align-items:flex-start;margin:22px 0 0;
  padding-top:16px;border-top:1px solid var(--ligne);font-size:.86rem;line-height:1.5;
  color:var(--encre-doux)}
.virement-garanties svg{flex:0 0 auto;margin-top:2px;color:var(--brun)}

/* Version resserrée : panier et fiche produit, où la colonne est étroite. */
.virement.compact{padding:18px 18px;margin:16px 0}
.virement.compact > h3{font-size:1.05rem;margin-bottom:14px}
.virement.compact .virement-etapes{grid-template-columns:1fr;gap:12px}
.virement.compact .virement-garanties{margin-top:14px;padding-top:12px;font-size:.82rem}

.virement-details{margin-top:12px}
.virement-details > summary{cursor:pointer;font-size:.9rem;font-weight:700;
  color:var(--brun);padding:9px 0;list-style-position:inside}
.virement-details > summary:hover{color:var(--cuivre-fonce)}
.virement-details[open] > summary{margin-bottom:2px}
.virement-details .virement{background:var(--creme)}

@media(max-width:1000px){ .virement-etapes{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .virement{padding:18px 16px}
  .virement-etapes{grid-template-columns:1fr;gap:13px}
}

/* ======================================== LE PANIER SUR UN TÉLÉPHONE */
/* Sur un écran étroit, chaque ligne du panier devient une fiche, et l'intitulé
   de colonne réapparaît devant chaque valeur (attribut data-libelle). */
@media(max-width:720px){
  .tableau-enveloppe:has(> .panier-lignes){overflow-x:visible}
  .panier-lignes,
  .panier-lignes tbody,
  .panier-lignes tr,
  .panier-lignes td{display:block;width:auto}
  .panier-lignes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .panier-lignes caption{display:block}
  table.donnees.panier-lignes{border:0;background:none}

  .panier-lignes tr{background:var(--papier);border:1px solid var(--ligne);
    padding:14px 15px;margin-bottom:14px}
  .panier-lignes tbody tr:hover{background:var(--papier)}

  .panier-lignes td{border:0;padding:7px 0;text-align:left;white-space:normal}
  .panier-lignes td + td{border-top:1px dashed var(--ligne)}

  .panier-lignes td[data-libelle]::before{content:attr(data-libelle) " ";
    display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--encre-doux)}
  .panier-lignes td[data-libelle]{display:flex;justify-content:space-between;
    align-items:baseline;gap:14px}

  .panier-lignes td.cel-produit{display:block}
  .panier-lignes td.cel-produit::before{display:none}
  .panier-lignes td.cel-produit strong{display:block;font-size:1.04rem;line-height:1.3}

  .panier-lignes td .valeur{text-align:right;line-height:1.35}
  .panier-lignes td.cel-quantite{align-items:center}
  .panier-lignes td.cel-quantite input{width:5.5rem}
  .panier-lignes td.cel-action{display:block;padding-top:12px}
  .panier-lignes td.cel-action .bouton{width:100%;justify-content:center}
  .panier-lignes td.total{font-size:1.06rem}

  table.panier-lignes tfoot{display:block;margin-top:4px}
  table.panier-lignes tfoot tr{display:flex;justify-content:space-between;align-items:baseline;
    gap:14px;background:var(--creme-2);border:1px solid var(--ligne);
    padding:11px 14px;margin-bottom:8px}
  table.panier-lignes tfoot th,
  table.panier-lignes tfoot td{display:block;background:none;background-color:transparent;
    border:0;padding:0;color:var(--encre)}
  table.panier-lignes tfoot th{text-align:left;white-space:normal;font-size:.76rem;
    line-height:1.35;text-transform:none;letter-spacing:0}
  table.panier-lignes tfoot td{white-space:nowrap;font-weight:700;text-align:right}
  /* Le montant mis en valeur est celui que le client paie (GESAMTBETRAG), jamais la TVA. */
  table.panier-lignes tfoot tr.ligne-total{background:var(--brun);border-color:var(--brun)}
  table.panier-lignes tfoot tr.ligne-total th,
  table.panier-lignes tfoot tr.ligne-total td{color:#fff;font-size:.97rem}
  table.panier-lignes tfoot tr.ligne-total td{font-size:1.1rem}

  table.donnees th,table.donnees td{padding:10px 8px}
  table.donnees th[scope="row"]{white-space:normal;font-size:.74rem;line-height:1.35}
  table.donnees .nombre{white-space:nowrap}
}

.recherche-mobile{display:none}

/* ================================ L'EN-TÊTE SUR UN TÉLÉPHONE */
/* L'en-tête reste collant : la recherche descend dans le menu pour qu'il reste bas. */
@media(max-width:700px){
  .entete .recherche-entete{display:none}
  .nav-principale .recherche-mobile{display:flex;gap:0;padding:14px 0 6px}
  .recherche-mobile input{flex:1;min-width:0;padding:11px 13px;border:1px solid var(--ligne-forte);
    border-radius:var(--rayon-s) 0 0 var(--rayon-s);font:inherit;background:#fff;color:var(--encre)}
  .recherche-mobile button{flex:0 0 auto;width:46px;border:0;border-radius:0 var(--rayon-s) var(--rayon-s) 0;
    background:var(--cuivre);color:#fff;display:grid;place-items:center;cursor:pointer}
  .entete-haut{padding-top:10px;padding-bottom:10px;gap:10px;flex-wrap:nowrap}
  .logo{font-size:1.05rem;gap:9px;min-width:0;flex:1 1 auto}
  .logo .marque{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .logo .baseline{display:none}
  .logo-symbole{width:38px;height:38px}
  .bandeau-info{font-size:.8rem}
}
@media(max-width:480px){
  .bouton-menu .texte-menu{display:none}
  .bouton-menu{padding:10px 11px;margin-left:2px}
}

/* ------------------------- Réponse livraison dans le formulaire ------ */

.reponse-livraison{
  margin-top:14px; padding:13px 16px; border-radius:var(--rayon-s);
  border:1px solid var(--ligne); background:var(--creme-2);
  font-size:.94rem; line-height:1.55;
}
.reponse-livraison[hidden]{display:none}
.reponse-livraison p{margin:6px 0 0}
.reponse-livraison.attente{color:var(--encre-doux); font-style:italic}
.reponse-livraison.possible{background:var(--vert-clair); border-color:#b6d6c3; color:#1a3556}
.reponse-livraison.impossible{background:var(--orange-clair); border-color:#e4c77f; color:#6f4506}
.reponse-livraison strong{display:block; margin-bottom:2px}

[data-bloc-pro][hidden],
[data-champs-adresse][hidden],
[data-bloc-acces][hidden]{display:none}

.tres-petit{font-size:.88em;opacity:.75}

/* --------------------------------------- Bandeau du mode aperçu ----- */
/* Rouge franc, en haut de chaque page : impossible à confondre avec le site. */
.bandeau-apercu{
  background:#86261b; color:#fff; font-size:.9rem; line-height:1.5;
  padding:10px 0; border-bottom:2px solid #5a150d;
}
.bandeau-apercu .conteneur{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px}
.bandeau-apercu strong{font-weight:800}
.bandeau-apercu span{opacity:.92}
.bandeau-apercu a{
  color:#fff; font-weight:700; margin-left:auto;
  white-space:nowrap; padding:4px 12px; border:1px solid rgba(255,255,255,.55);
  text-decoration:none;
}
.bandeau-apercu a:hover{background:#fff; color:#86261b}
@media(max-width:620px){
  .bandeau-apercu{font-size:.82rem}
  .bandeau-apercu a{margin-left:0; width:100%; text-align:center}
}
@media print{ .bandeau-apercu{display:none!important} }

/* ================================================ BOUTONS FLOTTANTS */

.actions-flottantes{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  pointer-events:none;
}
.actions-flottantes > *{pointer-events:auto}

.bouton-flottant{
  display:inline-flex; align-items:center; gap:9px;
  min-height:52px; padding:0 18px;
  border:0; border-radius:var(--rayon-s); cursor:pointer;
  font:inherit; font-weight:700; font-size:.9rem; line-height:1;
  color:#fff; background:var(--brun);
  box-shadow:var(--ombre);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bouton-flottant[hidden]{display:none}
.bouton-flottant:hover{transform:translateY(-2px); box-shadow:var(--ombre-forte); text-decoration:none; color:#fff}
.bouton-flottant:active{transform:translateY(0)}
.bouton-flottant:focus-visible{outline:3px solid var(--cuivre); outline-offset:3px}
.bouton-flottant svg{flex:none}

/* Vert WhatsApp : la couleur que tout le monde associe au service. */
.bouton-flottant.whatsapp{background:#1f8a4c}
.bouton-flottant.whatsapp:hover{background:#186f3d}

.bouton-flottant.retour-haut{
  width:52px; min-height:52px; padding:0; justify-content:center;
  background:var(--cuivre); opacity:.94;
}
.bouton-flottant.retour-haut:hover{opacity:1; background:var(--cuivre-fonce)}

@media(max-width:560px){
  .actions-flottantes{right:12px; bottom:12px; gap:9px}
  .bouton-flottant{min-height:50px; padding:0 15px}
  .bouton-flottant.whatsapp{width:50px; padding:0; justify-content:center}
  .bouton-flottant.whatsapp .bulle-texte{display:none}
  .bouton-flottant.retour-haut{width:50px; min-height:50px}
}

@media(prefers-reduced-motion:reduce){
  .bouton-flottant{transition:none}
  .bouton-flottant:hover{transform:none}
}

/* ============================================ PAGE D'ACCUEIL : BLOCS PROPRES */

/* Le catalogue d'accueil : les usages en tête, puis les rayons en liste. */
.accueil-rayons{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}

/* Les deux outils (livraison, volume), côte à côte. */
.accueil-outils{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.accueil-outils .outil-volume{background:var(--brun);color:#dde3ee;padding:28px;border-radius:var(--rayon)}
.accueil-outils .outil-volume h3{color:#fff;margin-top:0}
.accueil-outils .outil-volume .muet{color:#bcc7d6}
.accueil-outils .outil-volume ul{list-style:none;padding:0;margin:16px 0}
.accueil-outils .outil-volume li{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.accueil-outils .outil-volume li svg{color:var(--accent-sur-sombre)}
.accueil-outils .outil-volume .bouton{background:var(--cuivre)}
.accueil-outils .outil-volume .bouton:hover{background:var(--cuivre-fonce)}
@media(max-width:860px){.accueil-outils{grid-template-columns:1fr}}

/* Les garanties en bas de page : trois colonnes sur crème. */
.accueil-garanties{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ligne);
  background:var(--papier)}
.accueil-garanties > div{padding:28px 26px}
.accueil-garanties > div + div{border-left:1px solid var(--ligne)}
.accueil-garanties h3{display:flex;align-items:center;gap:10px}
.accueil-garanties h3 svg{color:var(--cuivre)}
@media(max-width:860px){.accueil-garanties{grid-template-columns:1fr}
  .accueil-garanties > div + div{border-left:0;border-top:1px solid var(--ligne)}}

/* ============================================================ IMPRESSION */

@media print{
  .entete,.pied,.bandeau-cookies,.bandeau-info,.bouton,.nav-principale,
  .actions-flottantes{display:none!important}
  body{background:#fff;font-size:12pt}
  .carte{box-shadow:none;border:1px solid #ccc}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* =========================================================================
   IDENTITÉ ALLEMANDE « WERKSTATT »
   Ce qui distingue ce site de la version française : bandeau et barre de
   navigation bleu nuit autour d'un en-tête blanc, titres droits et serrés,
   angles nets, fonds blancs et gris clair, héros en deux parties avec coupe
   oblique, numéros d'étapes en pavés orange, pied de page sombre.
   ========================================================================= */

body{background:var(--papier);font-size:16.5px}
h1,h2,h3,h4,legend{font-family:var(--titre);font-weight:700;font-stretch:semi-condensed;letter-spacing:.005em}
h1{letter-spacing:-.005em}

/* --- Bandeau d'information : bleu nuit, pictos orange --- */
.bandeau-info{background:var(--brun-profond);color:#d9e1ec;border-bottom:0;font-size:.82rem}
.bandeau-info .conteneur{min-height:34px}
.bandeau-info a,.bandeau-info b{color:#fff}
.bandeau-info a:hover{color:var(--accent-sur-sombre)}
.bandeau-info svg{color:var(--accent-sur-sombre)}

/* --- En-tête blanc --- */
.entete{background:var(--papier);color:var(--encre);box-shadow:0 1px 0 var(--ligne)}
.entete-haut{min-height:84px}
.logo{color:var(--brun-profond)}
.logo:hover{color:var(--brun)}
.logo .marque{font-family:var(--titre);font-weight:700;font-stretch:semi-condensed;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.32rem}
.logo .baseline{color:var(--encre-doux);letter-spacing:.14em;font-size:.7rem}
.logo-symbole{border:0;border-radius:3px;width:50px;height:50px}
.recherche-entete{max-width:540px}
.recherche-entete input{background:var(--creme);border:2px solid var(--ligne-forte);color:var(--encre);padding:11px 52px 11px 16px}
.recherche-entete input::placeholder{color:var(--encre-tres-doux)}
.recherche-entete input:focus{background:#fff;border-color:var(--brun);outline:0}
.recherche-entete button{width:50px}
.action-entete{color:var(--brun-profond)}
.action-entete:hover{background:var(--creme);color:var(--brun-profond)}
.action-entete span{color:var(--encre-doux)}
.action-entete.panier,.action-entete.panier:hover{color:#fff}
.action-entete.panier span{color:rgba(255,255,255,.85)}
.bouton-menu{border:2px solid var(--ligne-forte);color:var(--brun-profond)}

/* --- Navigation : barre bleu nuit, soulignement orange épais --- */
.nav-principale{background:var(--brun);border-bottom:0}
.nav-liste{justify-content:flex-start}
.nav-liste > li > a{color:#fff;font-family:var(--titre);font-size:.95rem;font-weight:600;font-stretch:semi-condensed;
  letter-spacing:.05em;padding:13px 16px}
.nav-liste > li > a::after{left:0;right:0;bottom:0;height:4px;background:var(--cuivre)}
.nav-liste > li > a:hover,.nav-liste > li > a[aria-current],
.nav-liste > li:focus-within > a,.nav-liste > li:hover > a{color:#fff;background:var(--brun-fonce)}
.nav-liste .chevron{opacity:.85}
.nav-liste .promo-lien{color:#ffb98a!important}
.mega{border-top:4px solid var(--cuivre)}
.mega h3{text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.mega-encart strong{font-family:var(--titre)}
@media(max-width:1024px){
  .nav-principale{background:var(--papier);border-top:1px solid var(--ligne)}
  .nav-liste > li > a,.nav-liste > li > a:hover,.nav-liste > li:hover > a,
  .nav-liste > li:focus-within > a{color:var(--brun-profond);background:none}
  .nav-liste > li > a{padding:15px 4px}
  .nav-liste .promo-lien{color:var(--rouge)!important}
}

/* --- Boutons : capitales droites --- */
.bouton{font-family:var(--titre);font-weight:600;font-stretch:semi-condensed;letter-spacing:.06em;font-size:.92rem}
.bouton.petit{font-size:.8rem}
.bouton.grand{font-size:1rem}
.bouton.bouton-carte{background:var(--brun);color:#fff;font-size:.86rem}
.bouton.bouton-carte:hover,.bouton.bouton-carte:focus-visible{background:var(--cuivre);color:#fff}
.ajout-rapide .bouton.bouton-carte{background:var(--cuivre)}
.ajout-rapide .bouton.bouton-carte:hover{background:var(--cuivre-fonce)}

/* --- Sections : titres alignés à gauche, filet bleu nuit --- */
.section.claire,.section.sable,.section.saison{background:var(--creme)}
.surtitre{font-family:var(--titre);font-weight:600;letter-spacing:.14em;color:var(--cuivre)}
.surtitre::before{content:"";display:inline-block;width:10px;height:10px;background:currentColor;
  margin-right:9px;vertical-align:0}
.entete-section{border-bottom:2px solid var(--brun-profond)}
.entete-section h2,.saison-texte h2{text-transform:uppercase;letter-spacing:.015em}
.entete-section.centree{text-align:left;max-width:none;margin:0 0 32px;padding-bottom:16px;
  border-bottom:2px solid var(--brun-profond)}
.entete-section.centree .surtitre::after{display:none}
.entete-section.centree p{margin-left:0}

/* --- Héros : texte sur bleu nuit à gauche, photo coupée en biais à droite --- */
.diapo-titre{font-family:var(--titre);font-weight:700;font-stretch:semi-condensed;text-transform:uppercase;
  letter-spacing:.005em;line-height:1.02;text-shadow:none;max-width:15ch;font-size:clamp(2.1rem,3.7vw,3.5rem)}
.heros-diapo .accroche{color:#c9d3df}
.heros-diapo .bouton.secondaire{border-width:2px}
@media(min-width:941px){
  .heros-diapo{height:clamp(560px,calc(100svh - 170px),700px)}
  .diapo-fond{left:auto;width:54%;bottom:var(--bas);clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
  .diapo-fond::after{background:linear-gradient(90deg,rgba(15,31,51,.28) 0%,rgba(15,31,51,0) 35%)}
  .diapo-contenu > *{max-width:520px}
  .diapo-contenu{padding-bottom:calc(var(--bas) + 10px)}
}
.heros-vignette{background:#fff;border-left:0;border-top:5px solid var(--cuivre);border-radius:0}
.heros-vignette .valeur{font-family:var(--titre);color:var(--brun-profond);font-weight:700}
.diapo-fleche{border-radius:var(--rayon-s);background:rgba(15,31,51,.55)}
/* Le bandeau du bas devient une barre blanche, ouverte par un filet orange */
.heros-bas{background:var(--papier);color:var(--encre);border-top:5px solid var(--cuivre);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 1px 0 var(--ligne)}
.heros-diapo .cp-bandeau label{color:var(--brun-profond)}
.heros-diapo .cp-aide{color:var(--encre-doux)}
.heros-preuve b{color:var(--brun-profond);font-family:var(--titre);font-weight:700}
.heros-preuve span{color:var(--encre-doux)}
@media(max-width:940px){.heros-bas{background:var(--papier)}}

/* --- Cartes produit --- */
.grille.boutique,.produit-carte{background:#fff}
.produit-carte:hover{box-shadow:inset 0 0 0 2px var(--brun)}
.produit-carte .prix .montant{font-family:var(--titre);font-size:1.42rem;font-weight:700;font-stretch:semi-condensed}
.badge-remise{background:var(--cuivre);border-radius:0}
.prix-principal{font-weight:700}
.categorie-carte:hover{border-color:var(--brun);box-shadow:inset 0 0 0 1px var(--brun)}

/* --- Entrées par usage et rayons de saison : pictos en pavés --- */
.usage-icone{border-radius:var(--rayon-s);background:var(--brun);color:#fff}
.usage:hover .usage-icone{background:var(--cuivre)}
.usage:hover .usage-resume{color:#c9d3df}
.saison-rayons .pastille{border-radius:var(--rayon-s)}
.saison-urgence{border-left:4px solid var(--cuivre)}

/* --- Étapes : numéros en pavés orange --- */
.etape{border-top:0;padding-top:0}
.etape::before{content:counter(etape);display:grid;place-items:center;width:46px;height:46px;
  background:var(--cuivre);color:#fff;font-size:1.45rem;font-weight:700;margin-bottom:14px}

/* --- Bannières : bleu nuit, bord orange, hachures discrètes --- */
.banniere{background:var(--brun) repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 14px,transparent 14px 28px);
  border-left:10px solid var(--cuivre)}
.banniere::after{display:none}

/* --- Divers --- */
.bande-confiance{background:var(--creme)}
.accordeon summary{font-size:1.1rem}
.avis-carte::before{color:var(--creme-2)}
.onglet-rayon,.onglets button{font-family:var(--titre);font-stretch:semi-condensed;letter-spacing:.05em}
.filtres{border-top-color:var(--cuivre)}
.toast-panier{border-left-color:var(--cuivre)}

/* --- Pied de page sombre --- */
.pied{background:var(--brun-profond);color:#b9c4d2;border-top:6px solid var(--cuivre)}
.pied-haut{border-bottom-color:rgba(255,255,255,.12)}
.pied a{color:#e6ecf3}
.pied a:hover{color:var(--accent-sur-sombre)}
.pied h4{color:var(--accent-sur-sombre);font-family:var(--titre);font-size:.82rem;letter-spacing:.14em}
.pied .marque-pied{color:#fff;font-family:var(--titre);text-transform:uppercase;letter-spacing:.03em}
.pied .mention-pied,.pied .muet{color:#8f9cad}
.pied .bas{background:#08121f;color:#8f9cad}
.pied .bas a{color:#d9e1ec}
.pied-contact svg{color:var(--accent-sur-sombre)}
.pied-paiement{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.pied-paiement svg{color:var(--accent-sur-sombre)}
.pied .bouton{background:var(--cuivre)}
.pied .bouton:hover{background:var(--cuivre-fonce)}
.pied .bouton.secondaire{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55)}
.pied .bouton.secondaire:hover{background:#fff;color:var(--brun-profond)}
/* --- Petits ajustements de l'identité allemande --- */
.surtitre::before{background:var(--cuivre)}
.virement-etapes .num{border:0;border-radius:0;background:var(--cuivre);color:#fff;width:32px;height:32px;font-size:1rem}
.produit-carte .mention-prix{flex-basis:100%;font-size:.76rem;color:var(--encre-doux);line-height:1.35}
/* --- Services allemands : Staffelpreise, Aufsetzservice, total final --- */
.staffel-hinweis{margin:8px 0 0;padding:9px 12px;background:var(--cuivre-clair);border-left:4px solid var(--cuivre);
  font-size:.9rem;color:var(--cuivre-fonce)}
.badge-staffel{display:inline-block;margin-top:3px;padding:2px 7px;background:var(--cuivre);color:#fff;
  font-family:var(--titre);font-weight:600;font-size:.74rem;letter-spacing:.03em;white-space:nowrap}
.option-service{border:2px solid var(--brun);padding:12px 14px;margin:0 0 16px;background:var(--creme)}
.option-service .case{margin:0}
tr.ligne-service td{background:var(--creme)}
.total-final{margin:18px 0 0;padding:12px 14px;background:var(--brun-profond);color:#fff;font-size:1.05rem}
.total-final strong{font-family:var(--titre);font-size:1.35rem;margin-left:6px}
.total-final .muet{color:#c9d1dc}
/* =========================================================================
   PLAN ALLEMAND — positions des blocs différentes du site français
   ========================================================================= */

/* --- Barre du haut : liens de service à droite --- */
.bandeau-info .liens-service{display:flex;gap:18px;align-items:center}
.bandeau-info .liens-service a{font-weight:600}
@media(max-width:760px){.bandeau-info .liens-service{gap:12px;margin-left:auto}}

/* --- En-tête : conseil téléphonique à la place du suivi --- */
.action-entete.beratung-tel b{font-family:var(--titre);font-size:1rem;letter-spacing:.02em}
.action-entete.beratung-tel span span{order:-1}

/* --- Accueil : tuiles de l'assortiment --- */
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kachel{display:flex;flex-direction:column;border:1px solid var(--ligne);background:#fff}
.kachel-visuel{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--creme-2)}
.kachel-visuel img,.kachel-visuel svg{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kachel-visuel:hover img,.kachel-visuel:hover svg{transform:scale(1.05)}
.kachel-titre{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;color:#fff;
  background:linear-gradient(0deg,rgba(15,31,51,.92),rgba(15,31,51,0));font-family:var(--titre);
  font-weight:700;font-stretch:semi-condensed;font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em}
.kachel-titre small{display:block;font-family:var(--police);font-weight:400;font-size:.78rem;
  text-transform:none;letter-spacing:0;color:#d9e1ec}
.kachel-liste{list-style:none;margin:0;padding:10px 14px 4px;flex:1}
.kachel-liste li{border-bottom:1px solid var(--ligne)}
.kachel-liste li:last-child{border-bottom:0}
.kachel-liste a{display:block;padding:7px 0;text-decoration:none;color:var(--encre);font-size:.93rem}
.kachel-liste a::before{content:"›";color:var(--cuivre);font-weight:700;margin-right:8px}
.kachel-liste a:hover{color:var(--cuivre-fonce)}
.kachel-tout{display:block;margin:0 14px 14px;padding:9px 0 0;border-top:2px solid var(--brun);
  font-family:var(--titre);font-weight:600;text-decoration:none;color:var(--brun-profond);font-size:.92rem}
.kachel-tout:hover{color:var(--cuivre-fonce)}
@media(max-width:1000px){.kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kacheln{grid-template-columns:1fr}}

/* --- Accueil : conseil (usage à gauche, calculateur à droite) --- */
.beratung{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:34px;align-items:start}
.beratung-usages h2{text-transform:uppercase;letter-spacing:.015em}
.beratung .usages{margin:18px 0 0}
.beratung .usages-grille{grid-template-columns:repeat(2,1fr)}
.beratung .usage:nth-child(3){border-left:0}
.beratung .usage:nth-child(n+3){border-top:1px solid var(--ligne)}
.beratung-outil{background:var(--brun);color:#dde3ee;padding:24px}
.beratung-outil h3{color:#fff;display:flex;align-items:center;gap:10px;font-size:1.2rem}
.beratung-outil h3 svg{color:var(--accent-sur-sombre)}
.beratung-outil ul{list-style:none;padding:0;margin:0 0 16px}
.beratung-outil li{display:flex;gap:8px;align-items:center;font-size:.92rem}
.beratung-outil li svg{color:var(--accent-sur-sombre)}
.beratung-outil hr{border-top-color:rgba(255,255,255,.18);margin:22px 0}
.beratung-outil .cp-fiche{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.beratung-outil .cp-fiche label,.beratung-outil .cp-aide{color:#dde3ee}
@media(max-width:900px){.beratung{grid-template-columns:1fr}}
@media(max-width:560px){.beratung .usages-grille{grid-template-columns:1fr}
  .beratung .usage{border-left:0!important}}

/* --- Accueil : FAQ avec encart de contact à gauche --- */
.faq-accueil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px;align-items:start}
.faq-intro h2{text-transform:uppercase;letter-spacing:.015em}
.kontakt-karte{background:#fff;border:1px solid var(--ligne);border-top:4px solid var(--cuivre);padding:18px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.kontakt-karte p{margin:0;display:flex;gap:8px;align-items:center}
.kontakt-karte svg{color:var(--cuivre)}
@media(max-width:860px){.faq-accueil{grid-template-columns:1fr;gap:20px}}

/* --- Accueil : engagements en cartes --- */
.versprechen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.versprechen-punkt{background:#fff;border:1px solid var(--ligne);padding:20px;display:flex;flex-direction:column;gap:6px}
.versprechen-punkt svg{color:var(--cuivre);margin-bottom:4px}
.versprechen-punkt b{font-family:var(--titre);font-size:1.08rem;color:var(--brun-profond)}
.versprechen-punkt span{font-size:.88rem;color:var(--encre-doux);line-height:1.45}
@media(max-width:900px){.versprechen{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.versprechen{grid-template-columns:1fr}}

/* --- Fiche produit : titre sur toute la largeur, colonnes 7/5 --- */
.fiche{grid-template-columns:minmax(0,7fr) minmax(0,5fr);row-gap:8px}
.fiche-titre{grid-column:1 / -1;padding-bottom:12px;border-bottom:2px solid var(--brun-profond)}
.fiche-titre h1{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem)}
.fiche-titre .rang{margin-bottom:0}
.fiche-achat{border-top:4px solid var(--cuivre)}
@media(max-width:940px){.fiche{grid-template-columns:1fr}}

/* --- Pied de page : rangée de services, cinq colonnes, marque en bas --- */
.pied-services{background:var(--brun);border-bottom:1px solid rgba(255,255,255,.1)}
.pied-services .conteneur{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.pied-service{display:flex;gap:12px;align-items:center;padding:22px 16px;text-decoration:none;color:#c9d3df;font-size:.86rem}
.pied-service + .pied-service{border-left:1px solid rgba(255,255,255,.12)}
.pied-service svg{color:var(--accent-sur-sombre);flex:0 0 auto}
.pied-service b{display:block;color:#fff;font-family:var(--titre);font-size:1.02rem;font-weight:600}
.pied-service:hover{background:rgba(255,255,255,.05);color:#fff}
.pied .colonnes{grid-template-columns:repeat(5,minmax(0,1fr));padding-top:40px}
.pied .bas .pied-marque strong{color:#fff;font-family:var(--titre);letter-spacing:.03em;text-transform:uppercase}
@media(max-width:900px){.pied-services .conteneur{grid-template-columns:1fr 1fr}
  .pied-service:nth-child(3){border-left:0}
  .pied .colonnes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pied-services .conteneur{grid-template-columns:1fr}
  .pied-service + .pied-service{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .pied .colonnes{grid-template-columns:1fr}}
.pied{margin-top:0}

/* =========================================================================
   ACCUEIL COURT — moins d'espace, version compacte sur téléphone
   ========================================================================= */
.page-accueil .section{padding:44px 0}
.page-accueil .section.serre{padding:24px 0}
.page-accueil .entete-section{margin-bottom:24px}
.versprechen-liens{margin:18px 0 0;font-size:.88rem;color:var(--encre-doux)}

@media(max-width:560px){
  .page-accueil .section{padding:32px 0}
  .page-accueil .entete-section{margin-bottom:18px;padding-bottom:12px}
  .page-accueil .entete-section p{display:none}
  .page-accueil .entete-section .surtitre{display:block}
  .page-accueil .entete-section .bouton{display:none}
  /* Tuiles : 2 colonnes, photo et nom seulement (les rayons sont dans le menu) */
  .kacheln{grid-template-columns:1fr 1fr;gap:10px}
  .kachel-liste,.kachel-tout{display:none}
  .kachel-visuel{aspect-ratio:1/1}
  .kachel-titre{font-size:.95rem;padding:10px}
  /* Conseil : choix en 2 × 2, sans texte d'explication */
  .beratung-usages > p.muet{display:none}
  .beratung .usages-grille{grid-template-columns:1fr 1fr}
  .beratung .usage{padding:14px 12px;gap:8px;border-left:0!important;border-top:1px solid var(--ligne)}
  .beratung .usage:nth-child(even){border-left:1px solid var(--ligne)!important}
  .beratung .usage:nth-child(-n+2){border-top:0}
  .beratung .usage-icone{width:40px;height:40px}
  .beratung .usage-texte strong{font-size:.98rem}
  .beratung .usage-resume{display:none}
  .beratung-outil{padding:18px}
  .beratung-outil ul,.beratung-outil > p{display:none}
  /* Engagements : 2 × 2, texte court */
  .versprechen{grid-template-columns:1fr 1fr;gap:10px}
  .versprechen-punkt{padding:14px}
  .versprechen-punkt span{display:none}
  /* FAQ : l'encart de contact se résume au bouton */
  .faq-intro > p.muet{display:none}
  /* Pied de page : services en 2 × 2, colonnes par deux */
  .pied-services .conteneur{grid-template-columns:1fr 1fr}
  .pied-service{padding:14px 8px;font-size:0;gap:8px}
  .pied-service b{font-size:.86rem}
  .pied-service + .pied-service{border-top:0}
  .pied-service:nth-child(even){border-left:1px solid rgba(255,255,255,.12)}
  .pied-service:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .pied .colonnes{grid-template-columns:1fr 1fr;gap:22px;padding-top:28px}
  .pied li{margin-bottom:5px;font-size:.88rem}
}@media(max-width:560px){
  /* Saison : le message et les produits ; les rayons sont déjà dans les tuiles */
  .page-accueil .saison-points,.page-accueil .saison-rayons{display:none}
  .page-accueil .saison-entete{margin-bottom:18px;gap:14px}
  /* Bandeau du diaporama : le code postal suffit, les preuves sont dans les engagements */
  .page-accueil .heros-preuves{display:none}
}
/* Compteur du panier : lisible (une règle plus large le rendait blanc sur blanc) */
.action-entete.panier .pastille{display:inline-block;color:var(--cuivre-fonce);font-size:.82rem}
/* --- Fiche produit : la photo accompagne le défilement, plus de vide à gauche --- */
@media(min-width:941px){
  .fiche > [data-galerie]{position:sticky;top:190px}
  .fiche-achat{position:static}
  .fiche .galerie-principale{aspect-ratio:4/3}
}
/* Portable à écran bas (1366×768…) : la photo collante tient entière dans l'écran */
@media(min-width:941px) and (max-height:860px){
  .fiche > [data-galerie]{top:150px}
  .fiche .galerie-principale{aspect-ratio:auto;height:calc(100vh - 175px);max-height:540px}
}
/* Mobile : photo moins haute, le prix apparaît sans faire défiler */
@media(max-width:940px){
  .fiche .galerie-principale{aspect-ratio:4/3}
  .fiche{row-gap:18px}
}
/* =========================================================================
   SAISON MISE EN AVANT : checklist des besoins, lien dans la barre, badge
   ========================================================================= */
.bandeau-info .lien-saison{color:#fff;font-weight:700;text-decoration:none;
  background:var(--cuivre);padding:3px 10px;margin-left:-10px}
.bandeau-info .lien-saison svg{color:#fff}
.bandeau-info .lien-saison:hover{background:var(--cuivre-fonce);color:#fff}
@media(max-width:760px){
  .bandeau-info .liens-service a:not(:first-child){display:none}
  .bandeau-info .lien-saison{margin-left:0}
}

.section.saison{background:#fff;border-top:5px solid var(--cuivre)}
.saison-checkliste{background:var(--creme);border:1px solid var(--ligne);padding:18px 20px}
.saison-checkliste h3{font-size:1.1rem;text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.saison-checkliste ol{list-style:none;margin:0;padding:0;counter-reset:besoin}
.saison-checkliste li{border-bottom:1px solid var(--ligne)}
.saison-checkliste li:last-child{border-bottom:0}
.saison-checkliste a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:11px 4px;text-decoration:none;color:var(--encre)}
.saison-checkliste a:hover{background:#fff}
.saison-checkliste a > svg{color:var(--cuivre)}
.saison-checkliste b{display:block;font-family:var(--titre);font-size:1.02rem;color:var(--brun-profond)}
.saison-checkliste small{display:block;font-size:.84rem;color:var(--encre-doux);line-height:1.35}
.saison-checkliste em{font-style:normal;font-size:.78rem;font-weight:700;color:var(--cuivre-fonce);white-space:nowrap}
.saison-urgence{border-left:4px solid var(--cuivre)}

.etiquette.saison{background:var(--cuivre);color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.etiquette.saison svg{color:#fff}
.etiquette.saison:hover{background:var(--cuivre-fonce);color:#fff}

@media(max-width:560px){
  .saison-checkliste{padding:12px 12px}
  .saison-checkliste a{padding:9px 2px;gap:9px}
  .saison-checkliste small{display:none}
  .page-accueil .saison-message{font-size:.92rem}
}
@media(max-width:1439px){.bandeau-info .masquable-large{display:none}}

/* Articles du Ratgeber : intertitres aérés */
.ratgeber-text h2{margin-top:1.6em;font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem)}
.ratgeber-text h3{margin-top:1.3em}
.ratgeber-text p,.ratgeber-text li{line-height:1.75}

/* Mots très longs (adresses, liens) et mentions « à compléter » : jamais de débordement sur téléphone */
body{overflow-wrap:break-word}
.a-renseigner{white-space:normal;overflow-wrap:anywhere;max-width:100%}

/* Récapitulatif de commande en cours de recalcul */
#uebersicht.occupe{opacity:.55;transition:opacity .15s}

/* Accueil allégé : lien vers les zones de livraison dans l'encart conseil (le code postal est
   saisi dans le bandeau sous le diaporama, plus en double ici) */
.beratung-lien{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.beratung-lien a{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.ariane .ariane-ici{margin:0;color:inherit}
.ariane .ariane-ici > span[aria-hidden]{margin:0 7px;color:var(--cuivre)}
/* Mobile : fil d'Ariane sans la page courante ; sur la fiche, le prix avant le petit résumé */
@media(max-width:940px){
  .ariane .ariane-ici{display:none}
  .fiche-achat{display:flex;flex-direction:column}
  .fiche-achat > *{order:5}
  .fiche-achat > .prix-principal{order:1;margin-top:0}
  .fiche-achat > .prix-detail{order:2}
  .fiche-achat > p.muet:first-child{order:3;margin:10px 0 0}
}

/* ------------------------------------------------------------------ */
/*  Barre d'achat fixe (téléphone) : prix + « In den Warenkorb »         */
/*  toujours à portée de pouce tant que le vrai bouton est hors écran.  */
/* ------------------------------------------------------------------ */
.barre-achat{display:none}
@media(max-width:940px){
  .barre-achat{display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:300;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--papier, #fff);border-top:1px solid var(--ligne-forte);box-shadow:0 -6px 18px rgba(15,31,51,.12);
    transform:translateY(110%);transition:transform .2s ease;visibility:hidden}
  .barre-achat.visible{transform:none;visibility:visible}
  .barre-achat-prix{display:flex;flex-direction:column;min-width:0;line-height:1.2}
  .barre-achat-prix strong{font-size:1.15rem;color:var(--brun)}
  .barre-achat-prix strong .barre{display:none}
  .barre-achat-prix .petit{color:var(--encre-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .barre-achat .bouton{flex:0 0 auto;white-space:nowrap}
  body.avec-barre-achat .actions-flottantes{bottom:84px}
  body.avec-barre-achat .pied{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){.barre-achat{transition:none}}

/* Panier : raccourci vers la caisse juste sous les articles */
.panier-raccourci{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 28px;padding:16px 18px;background:var(--creme);border:1px solid var(--ligne);border-left:4px solid var(--cuivre)}
.panier-raccourci > div{display:flex;flex-direction:column;gap:2px}
.panier-raccourci strong{font-size:1.35rem;color:var(--brun)}
@media(max-width:560px){.panier-raccourci .bouton{width:100%;justify-content:center}}
/* Code promo replié : un champ vide bien visible pousse à quitter le site pour chercher un code */
details.gutschein summary{cursor:pointer;font-weight:600;color:var(--brun);padding:4px 0}
@media(max-width:940px){.grille.c2 > .carte-gutschein{order:2}}
/* Commande : précisions facultatives repliées (zufahrt, horaires, note au chauffeur) */
details.options-zufahrt{margin-top:18px;border:1px solid var(--ligne);padding:12px 14px;background:var(--creme)}
details.options-zufahrt summary{cursor:pointer;font-weight:600;color:var(--brun)}
details.options-zufahrt[open] summary{margin-bottom:6px}

/* Téléphone : le nom ne se coupe jamais au milieu d'un mot (« TESTHOL / Z ») */
@media(max-width:700px){
  .logo .marque{overflow-wrap:normal;word-break:normal;hyphens:none;line-height:1.1}
}
/* Vignettes produits sur 2 colonnes : « In den Warenkorb » tient en entier (sur 2 lignes si besoin) */
@media(max-width:560px){
  .ajout-rapide .bouton,.produit-carte .bouton{white-space:normal;line-height:1.2;
    padding-left:8px;padding-right:8px;font-size:.74rem;letter-spacing:.03em;text-align:center;justify-content:center}
}
/* Panier : bouton « Zur Kasse » à côté du titre (téléphone seulement) */
.titre-panier{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.titre-panier h1{margin-bottom:0}
.lien-kasse-haut{display:none}
@media(max-width:940px){.lien-kasse-haut{display:inline-flex}.titre-panier{margin-bottom:16px}}
@media(max-width:480px){.logo{font-size:.95rem}}

/* Récap commande (téléphone) : le libellé GESAMTBETRAG garde le fond foncé de sa ligne
   (sinon « th[scope=row] » lui remet un fond clair : blanc sur gris clair, illisible). */
@media(max-width:940px){
  table.panier-lignes tfoot tr.ligne-total th[scope="row"]{background:transparent;color:#fff}
}
@media(min-width:941px){
  table.donnees tfoot tr.ligne-total th[scope="row"],table.donnees tfoot tr.ligne-total td{background:var(--brun);color:#fff}
}
/* Badge « Mengenrabatt » : passe à la ligne au lieu de dépasser de la cellule */
.badge-staffel{white-space:normal;max-width:100%;text-align:left}
td.nombre .badge-staffel{display:inline-block;margin-left:auto}
/* Téléphone, panier rempli : le nom du site reste lisible en entier (plus petit plutôt que « TESTH… ») */
@media(max-width:420px){
  .logo .marque{font-size:.82rem;letter-spacing:0;overflow:visible;text-overflow:clip}
  .logo{gap:7px}
}

/* Accueil du catalogue simplifié : « So funktioniert's » en 4 étapes */
.etapes-simples{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.etapes-simples li{background:var(--papier, #fff);border:1px solid var(--ligne);padding:18px;display:flex;flex-direction:column;gap:6px}
.etapes-simples .num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--cuivre);color:#fff;font-weight:700;font-family:var(--titre)}
.etapes-simples span:not(.num){color:var(--encre-doux);font-size:.93rem;line-height:1.5}
@media(max-width:940px){.etapes-simples{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.etapes-simples{grid-template-columns:1fr}}
/* Fiche produit : économie du palier en euros */
.economie-var{display:block;color:var(--vert, #2f6b3a);font-weight:700}
.variante-choix .prix-var small.economie-var{color:#2f6b3a;font-weight:700}

/* =================================================================== PANIER (2026-10)
   Articles en cartes à gauche, récapitulatif foncé qui reste visible à droite,
   « Passt dazu » sous les articles. Téléphone : une colonne, récapitulatif juste
   après les articles. */
.panier-intro{margin:-4px 0 18px;color:var(--encre-doux);font-size:.95rem}
.panier-mise{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px 32px;align-items:start}
.panier-articles{grid-column:1;grid-row:1}
.panier-recap{grid-column:2;grid-row:1 / span 3;position:sticky;top:120px}
.panier-complements{grid-column:1;grid-row:2}
.panier-annexes{grid-column:1;grid-row:3}

.panier-liste{list-style:none;margin:0;padding:0;background:var(--papier);border:1px solid var(--ligne)}
.panier-article{display:grid;grid-template-columns:88px minmax(0,1fr) auto 150px 34px;gap:18px;
  align-items:center;padding:16px 18px;border-top:1px solid var(--ligne)}
.panier-article:first-child{border-top:0}
.panier-vignette{display:block;width:88px;height:88px;overflow:hidden;background:var(--creme);border:1px solid var(--ligne)}
.panier-vignette.petite{width:58px;height:58px}
.panier-vignette img,.panier-vignette svg,.panier-vignette .illu{width:100%;height:100%;object-fit:cover;display:block}
.panier-infos{display:flex;flex-direction:column;gap:3px;min-width:0}
.panier-nom{font-family:var(--titre);font-weight:700;font-size:1.05rem;color:var(--encre);text-decoration:none;line-height:1.25}
.panier-nom:hover{color:var(--cuivre)}
.panier-format{font-weight:600;color:var(--brun)}
.panier-etiquettes:empty{display:none}
.panier-etiquettes{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.panier-quantite{display:flex;flex-direction:column;align-items:center;gap:4px}
.panier-quantite .quantite button{width:36px}
.panier-quantite .quantite input{width:48px;padding:9px 2px}
.panier-prix{text-align:right;display:flex;flex-direction:column;gap:2px}
.panier-prix strong{font-family:var(--titre);font-size:1.25rem;color:var(--encre)}
.panier-prix .petit{line-height:1.45}
.panier-retirer{width:34px;height:34px;border:1px solid var(--ligne);background:var(--papier);color:var(--encre-doux);
  font-size:1.25rem;line-height:1;cursor:pointer;border-radius:50%}
.panier-retirer:hover{border-color:var(--rouge);color:var(--rouge)}
.panier-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.lien-discret{background:none;border:0;padding:0;color:var(--encre-doux);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;font:inherit;font-size:.92rem}
.lien-discret:hover{color:var(--cuivre)}

/* Récapitulatif foncé, aux couleurs de l'en-tête */
.panier-recap{background:var(--brun-profond);color:#d9e1ea;padding:24px 24px 20px;box-shadow:var(--ombre-forte)}
.panier-recap h2{color:#fff;font-size:1.35rem;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14)}
.recap-cp{margin-bottom:6px;font-size:.92rem}
.recap-cp label{display:block;color:#fff;font-weight:600;margin-bottom:6px}
.recap-cp-champ{display:flex;gap:8px}
.recap-cp-champ input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;font:inherit}
.recap-cp-champ input::placeholder{color:rgba(255,255,255,.55)}
.recap-cp-champ button{border:0;background:var(--cuivre);color:#fff;font-weight:700;padding:0 14px;cursor:pointer}
.recap-cp details summary{cursor:pointer;color:#fff;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.recap-cp details summary::-webkit-details-marker{display:none}
.recap-cp details[open] summary{margin-bottom:8px}
.recap-changer{color:var(--accent-sur-sombre);text-decoration:underline;font-size:.85rem}
.recap-lignes{margin:8px 0 0}
.recap-lignes > div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.recap-lignes dt{margin:0}
.recap-lignes dt small{display:block;color:rgba(255,255,255,.55);font-size:.8rem}
.recap-lignes dd{margin:0;color:#fff;font-weight:700;white-space:nowrap}
.recap-attente{color:rgba(255,255,255,.55);font-weight:400}
.recap-gratuit{color:#7fd3a2}
.recap-alerte{background:rgba(255,154,82,.14);border-left:3px solid var(--accent-sur-sombre);color:#fff;
  padding:10px 12px;margin:12px 0 0;font-size:.9rem}
.recap-total{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:16px}
.recap-total span{color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.recap-total small{display:block;text-transform:none;letter-spacing:0;font-weight:400;color:rgba(255,255,255,.6)}
.recap-total strong{font-family:var(--titre);font-size:2rem;color:var(--accent-sur-sombre);line-height:1}
.recap-tva{margin:6px 0 16px;font-size:.8rem;color:rgba(255,255,255,.6);text-align:right}
.recap-tva span{display:block}
.panier-recap .bouton.large{width:100%;justify-content:center}
.recap-garanties{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:8px;font-size:.86rem;color:rgba(255,255,255,.75)}
.recap-garanties li{display:flex;gap:8px;align-items:flex-start}
.recap-garanties svg{flex:0 0 auto;color:var(--accent-sur-sombre);margin-top:2px}

/* Passt dazu */
.panier-complements{background:var(--creme);border:1px solid var(--ligne);padding:18px}
.complements-entete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.complements-entete h2{font-size:1.2rem;margin:0}
.panier-complements ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.panier-complements li{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  background:var(--papier);border:1px solid var(--ligne);padding:10px 12px}
.complement-nom{display:flex;flex-direction:column;min-width:0}
.complement-nom a{color:var(--encre);font-weight:600;text-decoration:none}
.complement-nom a:hover{color:var(--cuivre)}
.panier-complements strong{font-family:var(--titre);font-size:1.05rem;white-space:nowrap}

@media(max-width:940px){
  .panier-mise{grid-template-columns:1fr}
  .panier-articles,.panier-recap,.panier-complements,.panier-annexes{grid-column:1;grid-row:auto}
  .panier-recap{position:static}
}
@media(max-width:620px){
  .panier-article{grid-template-columns:72px 60px minmax(0,1fr) 34px;grid-template-areas:"img infos infos x" "qte qte prix prix";gap:12px 12px;padding:14px}
  .panier-vignette{width:72px;height:72px;grid-area:img}
  .panier-infos{grid-area:infos}
  .panier-retirer{grid-area:x;align-self:start;justify-self:end}
  .panier-prix .petit{font-size:.78rem}
  .panier-quantite{grid-area:qte;align-items:flex-start}
  .panier-prix{grid-area:prix;align-self:center}
  .panier-complements li{grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"img nom nom" "img prix btn";gap:6px 12px}
  .panier-complements .panier-vignette{grid-area:img;width:48px;height:48px}
  .complement-nom{grid-area:nom}
  .panier-complements strong{grid-area:prix;align-self:center}
  .panier-complements form{grid-area:btn;justify-self:end}
  .recap-total strong{font-size:1.7rem}
}

/* ===================================================== FICHE PRODUIT : DÉTAILS (2026-10)
   Description + points forts à gauche, « Eigenschaften » à droite, tout visible.
   Conseils et détail paiement repliés dessous. */
.fiche-details{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px 48px;align-items:start}
.fiche-apropos h2{font-size:1.6rem;margin:0 0 14px}
.fiche-texte{font-size:1.02rem;line-height:1.75;margin:0 0 18px;color:var(--encre)}
.points-forts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.points-forts li{position:relative;padding-left:30px;line-height:1.5}
.points-forts li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:var(--cuivre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.fiche-eigenschaften{background:var(--papier);border:1px solid var(--ligne);border-top:3px solid var(--brun);padding:20px 22px}
.fiche-eigenschaften h3{font-size:1.15rem;margin:0 0 8px}
.fiche-eigenschaften .tableau-carac{width:100%}
.fiche-eigenschaften .tableau-carac th,.fiche-eigenschaften .tableau-carac td{padding:9px 0;border-bottom:1px solid var(--ligne);vertical-align:top}
.fiche-eigenschaften .tableau-carac tr:last-child th,.fiche-eigenschaften .tableau-carac tr:last-child td{border-bottom:0}
.fiche-eigenschaften .tableau-carac th{font-weight:400;color:var(--encre-doux);text-align:left;padding-right:14px;width:42%}
.fiche-eigenschaften .tableau-carac td{font-weight:600;text-align:right}
.fiche-carac-plus{margin:10px 0 0;line-height:1.5}
.fiche-plus{margin-top:26px;border-top:1px solid var(--ligne)}
.fiche-plus details{border-bottom:1px solid var(--ligne)}
.fiche-plus summary{cursor:pointer;padding:14px 0;font-family:var(--titre);font-weight:700;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center}
.fiche-plus summary::-webkit-details-marker{display:none}
.fiche-plus summary::after{content:"+";font-size:1.4rem;color:var(--cuivre);font-weight:400}
.fiche-plus details[open] summary::after{content:"–"}
.fiche-plus details > *:not(summary){margin-top:0}
.fiche-plus details[open]{padding-bottom:14px}
@media(max-width:940px){
  .fiche-details{grid-template-columns:1fr;gap:22px}
  .fiche-apropos h2{font-size:1.35rem}
  .fiche-texte{font-size:.98rem;line-height:1.65}
}

/* Téléphone : au-delà du bas de page (rebond du défilement, page plus courte que l'écran),
   le navigateur montre le fond de <html>. Il prend la couleur du pied de page : plus de
   « vide blanc » sous le pied. Le contenu, lui, garde son fond blanc (body). */
html{background:#08121f}   /* = dernière bande du pied de page (.pied .bas) */
body{background:var(--papier)}

/* Lien dans une alerte du récapitulatif (fond sombre) : lisible */
.panier-recap .recap-alerte a{color:#f5c49a;font-weight:600;text-decoration:underline}

/* Sélecteur « Wie viele Raummeter? » : une seule question, le total suit */
.menge-wahl{display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;padding:14px;border:2px solid var(--brun);
  border-radius:6px;background:#fff}
.menge-stepper button{width:52px;font-size:1.4rem}
.menge-stepper input{width:70px;font-size:1.3rem;padding:12px 4px}
.menge-unite{font-weight:700;font-size:1.05rem;color:var(--encre)}
.menge-total{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:2px}
.menge-total strong{font-family:var(--titre);font-size:1.7rem;line-height:1.1;color:var(--encre)}
.menge-total span{font-size:.88rem;color:var(--gris, #5b6472)}
.menge-total .economie-var{color:#2f6b3a;font-weight:700}
.menge-total .economie-var:empty{display:none}
@media (max-width:480px){
  .menge-total{margin-left:0;text-align:left;flex-basis:100%;border-top:1px solid var(--ligne);padding-top:10px}
}

/* ================= Page de commande simplifiée (kasse.php) ================= */
.kasse-intro{margin-top:-4px}
.kasse-grille{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.kasse-resume{order:-1}
.kasse-resume-details{border:1px solid var(--ligne);border-radius:var(--rayon);background:#f5f6f8}
.kasse-resume-details>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:14px 16px;cursor:pointer;font-weight:700;list-style:none}
.kasse-resume-details>summary::-webkit-details-marker{display:none}
.kasse-resume-details>summary span::after{content:" ▾";color:var(--cuivre)}
.kasse-resume-details[open]>summary span::after{content:" ▴"}
.kasse-resume-details>summary strong{font-family:var(--titre);font-size:1.2rem}
#uebersicht{padding:0 16px 16px}
#uebersicht.occupe{opacity:.55}
.resume-lignes{list-style:none;margin:0;padding:0}
.resume-lignes li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--ligne)}
.resume-nom{min-width:0}
.resume-prix{white-space:nowrap;font-weight:600}
.resume-totaux{margin:8px 0 0}
.resume-totaux>div{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.resume-totaux dt{color:var(--encre-doux, #5b6472)}
.resume-totaux dd{margin:0;font-weight:600}
.resume-totaux .resume-total{border-top:1px solid var(--ligne);margin-top:6px;padding-top:10px}
.resume-totaux .resume-total dt{color:var(--encre);font-weight:700}
.resume-totaux .resume-total dd{font-family:var(--titre);font-size:1.35rem}
.resume-tva{margin:4px 0 8px;text-align:right}
.kasse-formulaire fieldset{margin-bottom:16px}
.champ-replie>summary{cursor:pointer;color:var(--brun);font-weight:600;padding:4px 0;list-style:none}
.champ-replie>summary::-webkit-details-marker{display:none}
.champs-plz{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.paiement-unique{padding:12px 14px;border:2px solid var(--brun);border-radius:6px;background:#fff}
.final-lignes{list-style:none;margin:0;padding:0}
.final-lignes li{padding:6px 0;border-bottom:1px solid var(--ligne)}
.final-lignes li .petit{display:block}
.mention-agb{margin:14px 0 10px}
.bouton-commander{width:100%;font-size:1.05rem;padding:16px}
@media (min-width:900px){
  .kasse-grille{grid-template-columns:minmax(0,1fr) 360px;gap:36px;align-items:start}
  .kasse-resume{order:2;position:sticky;top:150px}
  .kasse-resume-details>summary{cursor:default;pointer-events:none}
  .kasse-resume-details>summary span::after,.kasse-resume-details[open]>summary span::after{content:""}
}

/* Note moyenne des avis (visible à partir de 3 avis publiés) */
.badge-avis{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;font-size:.92rem;color:var(--encre);text-decoration:none}
.badge-avis:hover strong{text-decoration:underline}
.heros-avis{text-decoration:none;color:inherit}
.heros-avis .etoiles{font-size:1.05rem}
.heros-preuve.heros-avis .etoiles{color:var(--cuivre)}
.heros-avis-mobile{display:none}
@media (max-width:560px){
  .heros-avis-mobile{display:inline-flex;margin:16px 0 0;color:#fff}
  .heros-avis-mobile .etoiles{color:#ffb070}
}
@media (min-width:900px){ .heros-preuves:has(.heros-avis){grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Équivalent par SRM et aide « Was ist ein Raummeter? » */
.menge-total .menge-srm{font-size:.8rem;color:var(--encre-doux,#5b6472)}
.menge-total .menge-srm:empty{display:none}
.aide-rm{margin:-2px 0 10px;font-size:.9rem}
.aide-rm>summary{cursor:pointer;color:var(--brun);font-weight:600;list-style:none;display:inline-block}
.aide-rm>summary::-webkit-details-marker{display:none}
.aide-rm>summary::before{content:"ⓘ ";color:var(--cuivre)}
.aide-rm ul{margin:8px 0 0;padding:10px 14px 10px 28px;background:#f5f6f8;border-radius:6px}
.aide-rm li{margin:4px 0}