/* =========================================================================
   MOULINS COOPÉRATIFS — composants.css
   Boutons, liens, étiquettes, filtres, fiche produit, formulaires, sceau,
   bandeau défilant, cadres photo en attente, filets de section.
   ========================================================================= */

/* ---- liens : soulignement qui se dessine ------------------------------- */
.lien{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size var(--tr);
}
.lien:hover,.lien:focus-visible{background-size:100% 1px}
.lien-actif{background-size:100% 1px}

/* ---- boutons ------------------------------------------------------------ */
.bt{
  display:inline-block;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  padding:18px 32px;border-radius:0;border:1px solid var(--encre);
  background:var(--encre);color:var(--ecru);text-align:center;text-decoration:none;
  transition:background-color var(--tr),color var(--tr),border-color var(--tr);
}
.bt:hover{background:var(--tampon);border-color:var(--tampon)}
.bt-vide{background:transparent;color:var(--encre)}
.bt-vide:hover{background:var(--encre);color:var(--ecru)}
.bt[disabled]{opacity:.4;cursor:not-allowed}

/* ---- images / emplacements photo ---------------------------------------- */
.ph{margin:0;position:relative;overflow:hidden;background:var(--ecru-fonce)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E")}
/* trame gravée + repères de coin : l'emplacement devient un cadre d'attente assumé */
.ph::after{content:"";position:absolute;inset:14px;z-index:1;pointer-events:none;
  border:1px solid var(--filet);
  background-image:
    linear-gradient(var(--ble),var(--ble)),linear-gradient(var(--ble),var(--ble)),
    linear-gradient(var(--ble),var(--ble)),linear-gradient(var(--ble),var(--ble)),
    repeating-linear-gradient(45deg,transparent 0 13px,rgba(184,134,63,.10) 13px 14px);
  background-repeat:no-repeat;
  background-size:1px 22px,22px 1px,1px 22px,22px 1px,auto;
  background-position:left top,left top,right bottom,right bottom,center;
  opacity:.85}
/* emplacement occupé par une vraie photographie */
.ph--img::after{display:none}
.ph--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 600ms cubic-bezier(.22,1,.36,1);
  filter:saturate(.97) contrast(.99)}
a:hover .ph-zoom.ph--img img,a:focus-visible .ph-zoom.ph--img img{transform:scale(1.03)}
.r-3-4{aspect-ratio:3/4}
.r-4-3{aspect-ratio:4/3}
.r-1-1{aspect-ratio:1}
.ph-zoom{transition:transform 600ms cubic-bezier(.22,1,.36,1)}
a:hover .ph-zoom:not(.ph--img),a:focus-visible .ph-zoom:not(.ph--img){transform:scale(1.03)}
.pleine{margin:var(--e6) 0}
.legende{display:flex;gap:14px;margin-top:14px;max-width:640px;margin-left:auto;margin-right:auto}
.legende i{font-style:normal;font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tampon);white-space:nowrap}
.legende span{font-size:14.5px;color:var(--encre-douce);line-height:1.4}

/* gravure au trait, dorée (--ble #A9762E). Depuis le 07/10/2026 : images WebP déjà
   colorées (g-*-or.webp, fond transparent) au lieu d'un masque CSS. Un masque
   (mask-image) est refusé par le navigateur quand le site est ouvert en simple
   fichier (double-clic sur index.html, zip envoyé à quelqu'un) : les dessins
   disparaissaient. Une image de fond marche partout. Pour une autre couleur,
   regénérer l'image (voir CLAUDE.md §15). */
.grav{display:block;width:100%;background-repeat:no-repeat;background-position:center;background-size:contain}
.g-epi{aspect-ratio:700/1160;background-image:url(../img/g-epi-or.webp)}
.g-meule{aspect-ratio:1;background-image:url(../img/g-meule-or.webp)}
.g-grains{aspect-ratio:1;background-image:url(../img/g-grains-or.webp)}
.g-coupe{aspect-ratio:3/2;background-image:url(../img/g-coupe-or.webp)}

/* ---- sections numérotées ------------------------------------------------ */
.num{display:flex;align-items:baseline;gap:var(--e2);margin-bottom:var(--e3)}
.num i{font-style:normal;font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.15em;color:var(--tampon)}
.num b{font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--encre-douce)}
/* petit repère façon estampille, entre le label et le filet */
.num b::after{content:"◆";display:inline-block;margin-left:12px;color:var(--ble);font-size:7px;
  vertical-align:2px}
.num s{flex:1;height:1px;background:var(--filet);text-decoration:none}

/* ---- sceau -------------------------------------------------------------- */
.sceau{width:168px;height:168px;transform:rotate(-7deg)}
.sceau text{font-family:"Archivo",sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;fill:var(--tampon)}
/* texte du bas sur deux lignes, tenant DANS le cercle intérieur (r=58) : sur une
   seule ligne il débordait sur le texte courbe « COOPÉRATIVE » (corrigé 26/09/2026) */
.sceau .ct{font-family:"Archivo",sans-serif;font-size:7px;font-weight:600;letter-spacing:.14em;
  fill:var(--tampon)}
.sceau--petit{width:104px;height:104px}

/* ---- bandeau défilant --------------------------------------------------- */
.marquee{overflow:hidden;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  background-color:var(--ecru-fonce);
  background-image:
    repeating-linear-gradient(45deg, var(--filet) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(-45deg, var(--filet) 0 1px, transparent 1px 10px)}
.marquee-p{display:flex;width:max-content;animation:defile 40s linear infinite}
.marquee:hover .marquee-p{animation-play-state:paused}
.marquee-p span{display:inline-flex;align-items:center;gap:14px;padding:16px 0;white-space:nowrap;
  font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase}
.marquee-p span::after{content:"◆";color:var(--ble);font-size:9px;margin:0 26px}
.marquee-p u{text-decoration:none;color:var(--encre-douce)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- hero accueil ------------------------------------------------------- */
.hero{position:relative;height:85vh;min-height:520px;overflow:hidden;background:var(--ecru-fonce)}
.hero .ph{position:absolute;inset:0}
.hero .ph--img img{object-position:50% 30%}
/* voile en dégradé (bas → haut), pas un calque plat : le texte reste lisible
   et l'image garde de la profondeur au lieu d'être juste assombrie partout */
.hero-voile{position:absolute;inset:0;z-index:3;
  background:linear-gradient(to top,rgba(30,26,22,.78) 0%,rgba(30,26,22,.32) 45%,rgba(30,26,22,.05) 75%)}
.hero-txt{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:var(--e5) var(--e4)}
.hero-txt .in{max-width:1280px;margin:0 auto}
.hero-txt h1{color:var(--ecru);max-width:14ch}
.hero-txt p{color:var(--clair);font-size:19px;margin-top:var(--e3);max-width:44ch}
.hero-txt .lien{color:var(--ecru);display:inline-block;margin-top:var(--e3);
  font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;background-size:100% 1px}
.hero-txt .lien:hover{background-size:0 1px}

/* ---- portes d'entrée ---------------------------------------------------- */
.porte{text-decoration:none;display:block}
.porte .cadre{overflow:hidden}
.porte h2{font-size:28px;margin-top:var(--e2);padding-top:var(--e2);border-top:1px solid var(--encre)}

/* ---- bandeau chiffres --------------------------------------------------- */
.champ{background:var(--champ);color:var(--ecru)}
.champ .num i{color:var(--ecru)}
.champ .num b{color:var(--clair)}
.champ .num s{background:var(--clair-filet)}
.chiffre{border-top:1px solid var(--clair-filet);padding-top:var(--e3)}
.chiffre b{display:block;font-family:"Fraunces",serif;font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1;font-size:clamp(44px,6vw,84px);line-height:1;
  letter-spacing:-.03em}
.chiffre .vide{color:var(--clair);opacity:.5}
.chiffre span{display:block;font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ecru);margin-top:var(--e2);opacity:.9}

/* ---- bande de chiffres défilante (accueil, 26/09/2026) ---------------------
   Remplace les trois gros chiffres empilés : une bande fine, qui défile comme
   le bandeau des farines (même animation `defile`). Pause au survol. */
.bande{padding:var(--e4) 0 var(--e5)}
.bande-chiffres{overflow:hidden;border-top:1px solid var(--clair-filet);border-bottom:1px solid var(--clair-filet)}
.bande-chiffres-p{display:flex;width:max-content}
.bande-chiffres-p.defile{animation:defile 45s linear infinite}
.bande-chiffres:hover .bande-chiffres-p{animation-play-state:paused}
.chiffre-b{display:inline-flex;align-items:baseline;gap:14px;padding:18px 0;white-space:nowrap}
.chiffre-b::after{content:"◆";color:var(--ble);font-size:9px;margin:0 32px;align-self:center}
.chiffre-b b{font-family:"Fraunces",serif;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:38px;line-height:1;letter-spacing:-.03em}
.chiffre-b i{font-style:normal;font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ecru);opacity:.9}
.bande .sceau-bloc{margin-top:var(--e4)}
/* mouvement réduit : pas de défilement, la bande se fait à la main (défilement latéral) */
@media (prefers-reduced-motion:reduce){
  .bande-chiffres{overflow-x:auto}
  .bande-chiffres-p.defile{animation:none}
}

/* ---- étiquette de sac (produit) ----------------------------------------- */
.etiq{display:block;text-decoration:none;border:1px solid var(--encre);padding:7px;
  background:var(--ecru-fonce);transition:background-color var(--tr)}
.etiq:hover{background:var(--ecru)}
/* produit en rupture : reste visible dans le catalogue mais s'efface */
.etiq--indispo .etiq-in{opacity:.55}
.etiq--indispo .stock{color:var(--tampon)}
.etiq-in{border:1px solid var(--filet);padding:var(--e3);display:flex;flex-direction:column;height:100%}
.etiq .visuel{aspect-ratio:1;background:var(--ecru);border:1px solid var(--filet);
  display:grid;place-items:center;padding:9% 0;overflow:hidden;margin-bottom:var(--e3)}
.etiq .visuel .grav{height:100%;width:auto;opacity:.85}
/* carte avec photo : l'image remplit tout le carré */
.etiq .visuel--photo{padding:0;display:block;position:relative}
.etiq .visuel--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.etiq-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.etiq-ref{font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-douce)}
.pastille{font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
  border:1px solid var(--ble);color:var(--encre);padding:3px 9px;white-space:nowrap;
  transform:rotate(-2deg)}
.pastille-bio{border-color:var(--champ);color:var(--champ)}
.pastille-vide{border-color:transparent;color:transparent}
.etiq h3{font-size:30px;margin-top:var(--e2);line-height:1.02}
.etiq .meta{display:flex;gap:var(--e2);margin-top:var(--e2);flex-wrap:wrap}
.etiq .meta span{font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce)}
.etiq-f{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e2);
  margin-top:var(--e3);padding-top:var(--e2);border-top:1px solid var(--encre)}
.prix{font-family:"Fraunces",serif;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:24px;font-variant-numeric:tabular-nums;line-height:1}
.stock{font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--encre-douce)}

/* ---- filtres catalogue -------------------------------------------------- */
.filtres{border-top:1px solid var(--encre);border-bottom:1px solid var(--filet);
  padding:var(--e3) 0;display:flex;flex-wrap:wrap;gap:var(--e4)}
/* place réservée tant que main.js n'a pas fabriqué les filtres (sinon toute la page
   saute d'un coup au chargement — CLS 0,50 mesuré par Lighthouse le 26/09/2026) ;
   hauteurs relevées sur la barre remplie, par largeur d'écran */
.grille-etiq:empty,.grille-4:empty{min-height:100vh} /* idem pour les grilles de cartes : sans ça le pied de page remonte sous l'en-tête puis saute vers le bas */
.filtres:empty{min-height:94px}
@media (min-width:769px){.filtres:empty{min-height:138px}}
@media (min-width:769px) and (max-width:1180px){.filtres:empty{min-height:203px}}
.f-groupe{display:flex;align-items:baseline;gap:var(--e2);flex-wrap:wrap}
.f-groupe>b{font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--encre)}
/* petit repère façon estampille, même logique que .num b::after */
.f-groupe>b::after{content:"◆";display:inline-block;margin-left:8px;color:var(--ble);font-size:7px;
  vertical-align:2px}
.f-groupe button{font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:border-color var(--tr),color var(--tr)}
.f-groupe button:hover{border-bottom-color:var(--filet-fort)}
.f-groupe button[aria-pressed="true"]{border-bottom-color:var(--encre);color:var(--encre)}
.f-vide{padding:var(--e5) 0;color:var(--encre-douce);font-style:italic}

/* ---- choix du conditionnement (fiche produit) ----------------------------
   Même logique visuelle que .mode (choix du mode de livraison) : une rangée
   par option, cadre qui s'épaissit et se remplit légèrement à la sélection. */
.condit{display:grid;gap:var(--e1)}
.condit-opt{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  border:1px solid var(--filet-fort);padding:13px var(--e3);cursor:pointer;
  transition:border-color var(--tr),background-color var(--tr),padding var(--tr)}
.condit-opt:hover{border-color:var(--encre)}
.condit-opt input{position:absolute;opacity:0;width:0;height:0}
.condit-opt:has(input:checked){border:2px solid var(--encre);padding:12px calc(var(--e3) - 1px);
  background:var(--ecru-fonce)}
.condit-label{font-family:"Archivo",sans-serif;font-weight:600;font-size:15px}
.condit-prix{font-family:"Fraunces",serif;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 0;
  font-size:18px;font-variant-numeric:tabular-nums}

/* ---- fiche produit ------------------------------------------------------ */
/* 3fr/2fr = le même 60/40, mais l'espace entre les colonnes est déduit. Avant le
   07/10/2026 : « 60% 40% » + gap de 64 px = 64 px de trop, la colonne de droite
   (prix, bouton Commander) dépassait de l'écran entre ~1100 et ~1365 px de large. */
.fiche{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--e5);align-items:start}
.fiche-info{position:sticky;top:calc(var(--nav-h) + var(--e4))}
.fiche h1{font-size:clamp(44px,5.4vw,76px);margin-top:var(--e2)}
.fiche .chapo{margin-top:var(--e3);color:var(--encre-douce);max-width:42ch}
.tableau{margin-top:var(--e4);border-top:1px solid var(--encre)}
.tableau tr{border-bottom:1px solid var(--filet)}
.tableau th{text-align:left;padding:14px 0;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--encre-douce);
  width:44%;vertical-align:top}
.tableau td{padding:14px 0;font-size:16px}
.achat{margin-top:var(--e4);padding-top:var(--e3);border-top:1px solid var(--encre);
  display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.achat-sansfilet{border-top:0;padding-top:0;margin-top:var(--e2)}
.qte{display:inline-flex;border:1px solid var(--encre)}
.qte button{width:44px;height:46px;display:grid;place-items:center;font-size:17px;
  transition:background-color var(--tr),color var(--tr)}
.qte button:hover{background:var(--encre);color:var(--ecru)}
.qte input{width:54px;height:46px;text-align:center;border:0;border-left:1px solid var(--encre);
  border-right:1px solid var(--encre);background:transparent;font-variant-numeric:tabular-nums;
  font-size:16px}
.achat .bt{flex:1;min-width:200px}
.barre-achat-fixe{display:none}
.usage{border-top:1px solid var(--encre);padding-top:var(--e2)}
.usage b{display:block;font-family:"Fraunces",serif;font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1;font-size:23px;margin-bottom:6px}
.usage span{font-size:16px;color:var(--encre-douce)}

/* ---- page article (le moulin) ------------------------------------------- */
.article{max-width:640px;margin:0 auto}
.article p{margin-top:var(--e3);color:var(--encre)}
.article p.intro{font-size:21px;line-height:1.5}
/* lettrine — première lettre du texte long, façon page d'almanach */
.article p.intro::first-letter{
  font-family:"Fraunces",serif;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:3.4em;line-height:.72;float:left;padding:5px 9px 0 0;color:var(--tampon)}
.article h2{font-size:32px;margin-top:var(--e5)}
.article h3{font-size:23px;margin-top:var(--e4)}
.article--large{margin-left:0;max-width:none}
.frise{max-width:640px;margin:0 auto;border-left:1px solid var(--filet-fort);padding-left:var(--e4)}
.frise div{position:relative;padding:var(--e3) 0;border-bottom:1px solid var(--filet)}
.frise div:last-child{border-bottom:0}
.frise div::before{content:"";position:absolute;left:calc(-1 * var(--e4) - 3px);top:calc(var(--e3) + 10px);
  width:5px;height:5px;background:var(--ble)}
.frise b{display:block;font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.15em;color:var(--tampon);margin-bottom:6px}
.frise p{margin:0;color:var(--encre-douce)}
.frise .an{font-family:"Fraunces",serif;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:22px;color:var(--encre);letter-spacing:-.01em}
.portrait h3{font-size:20px;margin-top:var(--e2)}
.portrait span{font-family:"Archivo",sans-serif;font-weight:500;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-douce)}

/* ---- formulaires -------------------------------------------------------- */
.form{display:grid;gap:var(--e3);max-width:640px}
.champ-f{display:flex;flex-direction:column;gap:8px}
.champ-f label{font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--encre-douce)}
.champ-f input,.champ-f textarea,.champ-f select{
  border:0;border-bottom:1px solid var(--filet-fort);background:transparent;
  padding:11px 0;font-size:17px;border-radius:0;transition:border-color var(--tr)}
.champ-f input:focus,.champ-f textarea:focus,.champ-f select:focus{
  outline:none;border-bottom-color:var(--encre)}
.champ-f textarea{resize:vertical;min-height:120px}

/* ---- menu déroulant personnalisé -----------------------------------------
   Remplace le popup natif d'un <select>, dont le style (police, couleurs) ne
   peut pas être repris avec du CSS seul — il reste rendu par le système
   d'exploitation quel que soit le navigateur. Le <select> d'origine reste
   dans le DOM, caché visuellement : il continue de porter la valeur et
   l'évènement "change" pour le reste du code, ce menu n'est qu'une couche
   visuelle par-dessus (voir creerSelectPerso, assets/js/main.js). */
.mc-select{position:relative}
.mc-select select{position:absolute;inset:0;opacity:0;pointer-events:none}
.mc-select-bouton{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  border:0;border-bottom:1px solid var(--filet-fort);background:transparent;
  padding:11px 0;font-family:"Source Serif 4",serif;font-size:17px;color:var(--encre);
  text-align:left;cursor:pointer;transition:border-color var(--tr)}
.mc-select-bouton:focus-visible{outline:none;border-bottom-color:var(--encre)}
.mc-select.ouvert .mc-select-bouton{border-bottom-color:var(--encre)}
.mc-select-fleche{width:13px;height:13px;flex:none;stroke:var(--encre-douce);stroke-width:1.6;
  fill:none;transition:transform var(--tr)}
.mc-select.ouvert .mc-select-fleche{transform:rotate(180deg)}
.mc-select-liste{position:absolute;z-index:5;top:calc(100% + 1px);left:0;right:0;max-height:264px;
  overflow-y:auto;background:var(--ecru);border:1px solid var(--encre);list-style:none;margin:0;padding:4px 0}
.mc-select-liste li{padding:11px var(--e2);font-family:"Source Serif 4",serif;font-size:15.5px;
  color:var(--encre);cursor:pointer}
.mc-select-liste li:hover{background:var(--ecru-fonce)}
.mc-select-liste li[aria-selected="true"]{font-weight:600;color:var(--tampon)}

/* ---- calendrier (jour de retrait) -----------------------------------------
   Variante de .mc-select pour le choix du jour : une grille de mois plutôt
   qu'une liste, pour que les jours fermés ou hors délai se voient d'un coup
   d'œil au lieu d'être simplement absents d'une liste qu'il faut parcourir.
   Voir creerCalendrierRetrait, assets/js/main.js. */
.form-note{font-size:14.5px;color:var(--encre-douce);font-style:italic}
.form-note--ok{color:var(--champ);font-style:normal}
.envoye{border:1px solid var(--champ);border-left:3px solid var(--champ);padding:var(--e3);
  color:var(--champ);margin-top:var(--e3)}

/* ---- commercial --------------------------------------------------------- */
.commercial{display:grid;grid-template-columns:220px 1fr;gap:var(--e4);align-items:center;
  border-top:1px solid var(--encre);border-bottom:1px solid var(--filet);padding:var(--e4) 0}
.commercial h2{font-size:28px}
.commercial .lab{margin-bottom:var(--e1)}
.commercial p{margin-top:var(--e2);color:var(--encre-douce)}
.commercial .tel{font-family:"Fraunces",serif;font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 0;font-size:26px;margin-top:var(--e2);display:inline-block;
  text-decoration:none;letter-spacing:-.01em}

/* ---- horaires / nous trouver -------------------------------------------- */
.adresse-xl{font-family:"Fraunces",serif;font-weight:600;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:clamp(30px,3.6vw,46px);line-height:1.14;letter-spacing:-.02em}
.horaires{border-top:1px solid var(--encre)}
.horaires tr{border-bottom:1px solid var(--filet)}
.horaires th{text-align:left;padding:15px 0;font-family:"Archivo",sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.horaires td{padding:15px 0;text-align:right;color:var(--encre-douce);font-variant-numeric:tabular-nums}
.carte{aspect-ratio:16/9;width:100%;display:block;border:0;filter:sepia(.25) saturate(.75)}

/* ---- panier -------------------------------------------------------------- */

/* ---- poids total (panier) ------------------------------------------------ */

/* ---- indicateur d'étapes (tunnel de commande) ---------------------------- */

/* ---- blocs de mode de réception (livraison.html) ------------------------- */
.mode{border:1px solid var(--filet-fort);padding:var(--e4);cursor:pointer;display:block;
  transition:border-color var(--tr),background-color var(--tr)}
.mode+.mode{margin-top:var(--e3)}
.mode:hover{border-color:var(--encre)}
.mode>p{margin-top:8px;margin-left:28px;color:var(--encre-douce);font-size:15.5px}
.mode:has(input:checked){border:2px solid var(--encre);padding:calc(var(--e4) - 1px);background:var(--ecru-fonce)}
.mode[data-desactive]{opacity:.55;cursor:not-allowed}

/* ---- liste des points relais (livraison.html) ----------------------------- */

/* ---- onglets (coordonnées : particulier / professionnel) ----------------- */

/* ---- validation de formulaire (messages d'erreur) ------------------------ */

/* ---- blocs de récapitulatif (recapitulatif.html) -------------------------- */

/* ---- confirmation de commande --------------------------------------------- */
.sup{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-douce);border-bottom:1px solid transparent;transition:color var(--tr),border-color var(--tr)}
.sup:hover{color:var(--tampon);border-bottom-color:var(--tampon)}

/* ---- toile de jute (fond de section, à utiliser avec parcimonie) --------- */

/* ---- roue à aubes (gravure au trait, en SVG inline) ----------------------- */
.roue{display:block;width:150px;height:auto;margin:0 auto;color:var(--encre)}
.roue.or{color:var(--ble)}
.roue circle,.roue line{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.85}
.roue rect{fill:currentColor;opacity:.85}

/* ---- variantes ponctuelles -----------------------------------------------
   Un modificateur par besoin réel, pour ne jamais recourir à un style en
   ligne. Voir CLAUDE.md § règles de code. */
.entete--sobre{border-bottom:0}
.sec-s--sans-bas{padding-bottom:0}
.legende--pleine{max-width:none;margin-left:0}
.adresse-m{font-size:clamp(26px,3vw,36px)}
.sceau-bloc{display:flex;justify-content:center;color:var(--tampon)}
/* alternance de fond entre sections voisines — pas deux sections d'affilée
   sur le même ton */
.ecru-fonce{background:var(--ecru-fonce)}
.bt-debut{justify-self:start}
.att{opacity:.6}

/* =========================== RESPONSIVE ================================== */
@media (max-width:1024px){
  .fiche{grid-template-columns:1fr;gap:var(--e4)}
  .fiche-info{position:static}
}
@media (max-width:768px){
  .commercial{grid-template-columns:1fr;gap:var(--e3)}
  .commercial .ph{max-width:220px}
  .hero{height:88svh;height:88vh}
  .hero-txt{padding:var(--e4) 20px}
  .hero-txt .in{max-width:none}

  /* filtres catalogue : une rangée qui défile par à-coups, seul endroit du
     site où un défilement latéral est volontaire et assumé */
  .filtres{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    gap:var(--e4);padding-left:20px;padding-right:20px;margin:0 -20px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filtres::-webkit-scrollbar{display:none}
  .f-groupe{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
  .f-groupe button{padding:11px 2px;min-height:44px}

  /* la ligne .porte h2 (desktop, plus bas dans ce même fichier) doit être
     neutralisée ici et non dans layout.css : ce fichier est chargé après,
     donc une règle non conditionnelle plus bas dans composants.css gagnerait
     sinon sur le reset mobile de layout.css malgré la media query */
  .porte h2{border-top:0;margin-top:0;padding-top:0}

  /* fiche catalogue : bande compacte plutôt qu'une carte pleine largeur —
     image 96px à gauche, nom/type à droite, prix en dessous */
  .grille-etiq .etiq,.grille-4 .etiq{padding:0}
  .grille-etiq .etiq-in,.grille-4 .etiq-in{
    display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;
    gap:0 var(--e3);align-items:start;padding:12px;border:0;
  }
  .grille-etiq .etiq .visuel,.grille-4 .etiq .visuel{
    grid-column:1;grid-row:1/-1;width:96px;height:96px;margin-bottom:0;padding:14%;
  }
  .grille-etiq .etiq .visuel--photo,.grille-4 .etiq .visuel--photo{padding:0}
  .grille-etiq .etiq-h,.grille-4 .etiq-h{grid-column:2;grid-row:1}
  .grille-etiq .etiq h3,.grille-4 .etiq h3{grid-column:2;grid-row:2;font-size:20px;margin-top:4px}
  .grille-etiq .etiq .meta,.grille-4 .etiq .meta{grid-column:2;grid-row:3;margin-top:4px}
  .grille-etiq .etiq-f,.grille-4 .etiq-f{grid-column:2;grid-row:4;border-top:0;margin-top:6px;padding-top:0;flex-wrap:wrap;gap:4px var(--e2)}
  .grille-etiq .etiq+.etiq,.grille-4 .etiq+.etiq{border-top:1px solid var(--filet)}

  /* tableaux : jamais de vrai tableau sur mobile — le champ passe en label
     au-dessus de la valeur, séparés par un filet, comme le reste du site */
  .tableau,.horaires{border-top:0}
  .tableau tr,.horaires tr{display:flex;flex-direction:column;border-bottom:1px solid var(--filet);
    padding:var(--e2) 0}
  .tableau th,.horaires th{display:block;width:auto;padding:0 0 4px}
  .tableau td,.horaires td{display:block;padding:0;text-align:left}
  .mode,.mode:has(input:checked){padding:var(--e3)}
  .mode>p{margin-left:0}
  .pleine{margin:var(--e5) 0}
  .frise{padding-left:var(--e3)}
  .frise div::before{left:calc(-1 * var(--e3) - 3px)}

  /* onglets particulier/professionnel : cible tactile pleine */

  /* menu déroulant personnalisé : cible tactile pleine */
  .mc-select-bouton{min-height:44px}
  .mc-select-liste li{min-height:44px;display:flex;align-items:center}

  /* bouton principal du tunnel de commande : fixe en bas de l'écran (la
     barre d'action générale ne s'affiche pas sur les pages du tunnel — voir
     main.js — donc pas de superposition à compenser ici) */
  /* évite que la barre fixe ne recouvre le dernier contenu de la page */
  main:has(.barre-achat-fixe){padding-bottom:76px}

  /* fiche produit : barre prix + ajout fixe, masquée tant que l'image n'a
     pas été dépassée (bascule .visible posée en JS, voir main.js) */
  .barre-achat-fixe{position:fixed;left:0;right:0;bottom:0;z-index:440;
    background:var(--ecru);border-top:1px solid var(--encre);
    padding:var(--e2) 20px calc(var(--e2) + env(safe-area-inset-bottom));
    display:flex;align-items:center;gap:var(--e3);
    transform:translateY(100%);transition:transform var(--tr);
  }
  .barre-achat-fixe.visible{transform:translateY(0)}
  .barre-achat-fixe .prix{font-size:21px;white-space:nowrap}
  .barre-achat-fixe .bt{flex:1;padding:14px 20px}
}
@media (max-width:480px){
  .etiq h3{font-size:26px}
  .hero-txt p{font-size:17px}
}