/* ==========================================================================
   Terraïne — direction C1 « Sidi Bou Saïd / berbère »
   Structure, composants, formulaires, responsive.
   Le décor — frises, niches, props des gouttières — vit dans decor.css.

   Référence de composition 1440 px, cotes relevées au pixel sur les planches
   de maquettes/C1-sidi-bou-said-berbere/ (planche 3584 px, facteur 2,489).
   ========================================================================== */

:root{
  --vert:#1E4534;          /* bandeau, boutons, pied */
  --vert-fonce:#16352A;
  --vert-pale:#DCE7D9;     /* bandeau des avis */
  --ocre:#C08448;
  --creme:#F8EFE0;         /* fond de page */
  --creme-carte:#F3E7D4;
  --encre:#243027;
  --encre-douce:#6B7268;
  --trait:#DFD2BC;

  --h-bandeau:39px;
  --h-entete:96px;
  --colonne:800px;         /* grille produits relevée : 324 → 1117 à 1440 */
  /* Relevé sur la planche commande : le contenu va de 257 à 1193, soit 936 px,
     et les props tiennent les 252 px de chaque gouttière. Plus large, le texte
     passe sur les assiettes et devient illisible — ce n'est pas un problème
     d'empilement, le texte est bien au-dessus, il est simplement posé sur un
     fond chargé. */
  --large:940px;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Jost,system-ui,-apple-system,sans-serif;
}

/* ============================================== PASSAGE DE PAGE ========== */
/* Chrome enchaîne les deux documents en un fondu, sans une ligne de JS et
   sans retarder la navigation. */
@view-transition{ navigation:auto }
@supports not (view-transition-name:none){
  body{ animation:entree .32s ease both }
  @keyframes entree{ from{opacity:0} to{opacity:1} }
}

/* ==================================================== GLOBAL ============= */
*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--creme);
  color:var(--encre);
  font:400 16px/1.68 var(--sans);
  overflow-x:hidden;        /* le décor déborde volontairement des gouttières */
}

/* Les attributs width/height d'une <img> réservent la place avant chargement,
   mais s'appliquent AUSSI comme dimensions CSS : sans height:auto, une image
   en width:100% garde la hauteur de son attribut et s'étire. */
img{ max-width:100%; height:auto; display:block }

/* Chrome force text-transform:none et letter-spacing:normal sur les contrôles
   via sa feuille UA. Sans ça, un bouton dans un conteneur en capitales
   s'affiche en minuscules sans qu'on comprenne pourquoi. */
button,input,textarea,select{
  font:inherit; color:inherit;
  text-transform:inherit; letter-spacing:inherit;
}
button{ background:none; border:0; cursor:pointer; padding:0 }

a{ color:inherit; text-decoration:none }

.wrap{ width:min(var(--colonne),calc(100% - 48px)); margin-inline:auto }
.wrap--large{ width:min(var(--large),calc(100% - 48px)) }

.num{ font-variant-numeric:tabular-nums }

/* Le contenu passe devant le décor, qui est en z-index 0. */
main,.section,.pied,.frise,.entete,.bandeau{ position:relative; z-index:1 }

/* ==================================================== BANDEAU ============ */
.bandeau{
  height:var(--h-bandeau);
  display:flex; align-items:center; justify-content:center;
  background:var(--vert); color:var(--creme);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}

/* ===================================================== ENTÊTE ============ */
.entete{
  height:var(--h-entete);
  display:flex; align-items:center;
  padding:0 55px;
  background:var(--creme);
  border-bottom:1px solid transparent;
}
.entete--filet{ border-bottom-color:var(--trait) }

.burger{ width:32px; height:32px; color:var(--vert); flex:0 0 auto }
.burger svg{ width:100%; height:100% }

/* La planche C1 ne montre AUCUN lien dans l'en-tête : burger à gauche,
   wordmark au centre, recherche et panier à droite. Le menu vit donc derrière
   le burger à toutes les largeurs, pas seulement sur téléphone. */
.entete__nav{
  display:none;
  position:absolute; top:100%; left:0; right:0; z-index:30;
  flex-direction:column; padding:14px 55px 26px;
  background:var(--creme); border-bottom:1px solid var(--trait);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--vert);
}
.entete__nav.is-ouvert{ display:flex }
.entete__nav a{
  padding:13px 0; border-bottom:1px solid transparent;
  align-self:flex-start;
}
.entete__nav a:hover,.entete__nav a[aria-current="page"]{ border-bottom-color:var(--ocre) }

/* Le wordmark est centré sur la page, pas sur l'espace restant : il doit
   tomber au milieu des 1440, comme sur la planche. */
.marque{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-weight:500;
  font-size:46px; line-height:1; letter-spacing:.20em;
  color:var(--vert); text-indent:.20em;   /* compense l'interlettre finale */
}

.entete__outils{
  margin-left:auto; display:flex; align-items:center; gap:22px;
  color:var(--vert);
}
.entete__outils svg{ width:22px; height:22px }
.panier-btn{ position:relative; display:flex }
.panier-compte{
  position:absolute; top:-6px; right:-9px; min-width:17px; height:17px;
  display:grid; place-items:center; padding:0 4px;
  background:var(--ocre); color:#fff; border-radius:9px;
  font-size:10px; line-height:1;
}

/* ======================================================= HERO ============ */
/* Le bloc adopte la proportion EXACTE de l'image servie — 21:9 en large,
   9:16 en portrait — donc cover n'a plus rien à recadrer et le décalage de
   mise en page reste nul. */
.hero{ position:relative; background:var(--creme) }
.hero__media img{ width:100%; aspect-ratio:2600/1103; object-fit:cover }

.hero__contenu{
  position:absolute; inset:0;
  display:grid; place-content:center; gap:22px; justify-items:center;
  text-align:center; color:#fff; padding:0 24px;
}
.hero__titre{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(36px,4.6vw,66px); line-height:1.14;
  letter-spacing:.10em; text-transform:uppercase;
  /* La photo est chargée derrière le titre sur quatre pages sur cinq : une
     ombre portée suffit à le détacher, un voile salirait l'image. */
  text-shadow:0 2px 18px rgba(20,40,30,.55);
}
.hero__titre em{
  display:block; margin-top:.18em;
  font-style:normal; font-size:.58em; letter-spacing:.08em;
}

.hero__cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:186px; padding:13px 30px;
  border:1px solid rgba(255,255,255,.85); border-radius:999px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; backdrop-filter:blur(1px);
  transition:background .25s,color .25s;
}
.hero__cta:hover{ background:#fff; color:var(--vert) }

/* ==================================================== SECTIONS =========== */
.section{ padding:76px 0 }
.section--serre{ padding:52px 0 }

.titre-section{
  margin:0 0 44px;
  font-family:var(--serif); font-weight:500;
  font-size:34px; line-height:1.2; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; color:var(--vert);
}
.titre-section--gauche{ text-align:left }

.chapeau{ max-width:62ch; margin:0 auto 40px; text-align:center; color:var(--encre-douce) }

/* ===================================================== BOUTONS =========== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 32px; border-radius:2px;
  background:var(--vert); color:var(--creme);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  transition:background .22s;
}
.btn:hover{ background:var(--vert-fonce) }
.btn--bloc{ width:100% }
.btn--ligne{
  background:none; color:var(--vert);
  border:1px solid var(--vert); padding:13px 30px;
}
.btn--ligne:hover{ background:var(--vert); color:var(--creme) }
.btn[disabled]{ opacity:.45; cursor:not-allowed }

/* ============================================== CARTES PRODUIT =========== */
/* Le produit est posé dans une niche en arc à fond berbère : la niche est une
   image de fond réutilisable, le packshot détouré se pose dedans. Une photo
   déposée depuis le back-office se range donc dans la même niche que les
   neuf visuels d'origine. */
.grille{
  display:grid; gap:38px 30px;
  grid-template-columns:repeat(3,1fr);
}
.grille--trio{ grid-template-columns:repeat(3,1fr) }
.grille--quatre{ grid-template-columns:repeat(4,1fr); gap:30px 22px }

.carte{ display:block; text-align:center; color:inherit }
/* Fond TRANSPARENT sous la niche, pas une couleur de carte : le mur de
   l'image a été aplati au crème exact de la page, donc l'arc paraît creusé
   dans le fond au lieu d'être posé sur une tuile plus terne. Toute couleur
   ici redessinerait le rectangle qu'on cherche à faire disparaître. */
.carte__media{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:none;
}
/* Le produit se pose sur la TABLETTE de la niche, pas au milieu de la carte.
   L'arc est centré dans son image et la tablette est à 16 % du bas. Le produit
   attend un détourage SERRÉ et d'aplomb : le fichier doit être rogné au ras de
   l'objet et de son ombre de contact, sinon il paraît décentré alors que c'est
   la marge du fichier qui est asymétrique.

   La hauteur est normalisée pour que la grande boîte et la petite boîte de
   matcha aient la même échelle ; max-width et object-fit empêchent le format
   large de déborder de l'arc. */
.carte__media::before,.fiche__visuel::before{
  content:""; position:absolute; inset:0;
  background:url(../img/decor/niche.webp) center/contain no-repeat;
}
.carte__media img{
  position:absolute; left:50%; bottom:16%;
  height:50%; width:auto; max-width:48%;
  object-fit:contain; object-position:bottom center;
  transform:translateX(-50%);
  transition:transform .4s ease;
}
.carte:hover .carte__media::before,.fiche__visuel::before{
  content:""; position:absolute; inset:0;
  background:url(../img/decor/niche.webp) center/contain no-repeat;
}
.carte__media img{ transform:translateX(-50%) translateY(-6px) }

.carte__corps{ padding:18px 6px 0 }
.carte__nom{
  font-family:var(--serif); font-size:20px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--vert);
}
 /* La planche ne pose que le nom et le prix sous la niche : l'accroche
    n'apparaît que sur la fiche produit. */
.grille .carte__accroche{ display:none }
.carte__accroche{ margin:6px 0 0; font-size:13px; color:var(--encre-douce) }
.carte__prix{ margin-top:8px; font-size:14px; color:var(--encre) }
.carte{ position:relative }
.carte__promo{
  position:absolute; top:12px; left:12px; z-index:2;
  padding:5px 12px; background:var(--ocre); color:var(--creme);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
}
.carte__prix del{ margin-left:8px; color:var(--encre-douce) }
.carte__rupture{
  position:absolute; top:12px; right:12px; z-index:2;
  padding:5px 12px; background:var(--creme); border:1px solid var(--ocre);
  font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ocre);
}

/* Cartes d'attente : mêmes classes et même typographie que les vraies, donc
   la même hauteur au pixel. C'est ce qui met le décalage de mise en page à
   zéro — rien ne bouge quand la base répond. */
.carte--attente{ pointer-events:none }
.carte--attente .carte__media{ background:var(--creme-carte) }
.carte--attente .carte__media::before{ display:none }
.carte--attente .carte__nom,
.carte--attente .carte__accroche,
.carte--attente .carte__prix{
  background:var(--creme-carte); color:transparent; border-radius:2px;
}
.carte--attente .carte__nom{ width:56%; margin-inline:auto }
.carte--attente .carte__accroche{ width:76%; margin-inline:auto }
.carte--attente .carte__prix{ width:34%; margin-inline:auto }

/* Photo large posée dans le flux : pas de hauteur imposée, l'image donne sa
   taille au bloc — donc rien à recadrer et aucun décalage de mise en page. */
.figure-large{ margin:0 }
.figure-large img{ width:100% }
.figure-large figcaption{
  margin-top:14px; text-align:center; font-size:13px; color:var(--encre-douce);
}

/* ====================================================== GAMMES =========== */
/* Les trois plateaux de l'accueil sont des images statiques découpées de la
   maquette, avec leur composition d'origine. Ils occupent 81,1 % de la largeur
   de la planche, soit 1168 px à la référence 1440 — c'est la mesure, pas une
   estimation.

   Les images sont détourées sur fond transparent : le plateau paraît posé sur
   la page, sans le rectangle plus terne que laissait une image de fond. */
.gammes-wrap{ width:min(1168px,calc(100% - 48px)) }
.gammes{ display:grid; grid-template-columns:repeat(3,1fr); gap:52px }
.gamme{ display:block; text-align:center; color:inherit }
.gamme img{ width:100%; transition:transform .35s ease }
.gamme:hover img{ transform:translateY(-5px) }

/* Plaquette de laiton relevée sur la planche : 157 × 37 px, dégradé
   #D9BD8D → #D0B57E, texte presque noir. */
.gamme__etiquette{
  display:inline-block; margin-top:16px; padding:9px 26px;
  background:linear-gradient(180deg,#D9BD8D 0%,#D4BA89 28%,#DEC79B 52%,#D0B57E 100%);
  border:1px solid rgba(90,66,32,.35);
  color:#1B1405; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  box-shadow:0 1px 3px rgba(60,45,20,.22);
  transition:filter .22s;
}
.gamme:hover .gamme__etiquette{ filter:brightness(1.06) }

/* ==================================================== FILTRES ============ */
.filtres{
  display:flex; flex-wrap:wrap; justify-content:center; gap:30px;
  margin-bottom:44px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.filtre{ color:var(--encre-douce); padding-bottom:5px; border-bottom:1px solid transparent }
.filtre:hover{ color:var(--vert) }
.filtre.is-actif{ color:var(--vert); border-bottom-color:var(--vert) }

/* ================================================ FICHE PRODUIT ========== */
/* Relevé sur la planche : le visuel occupe 40 % de la largeur de contenu, pas
   la moitié — la colonne d'achat est la plus large des deux. */
.fiche{
  display:grid; grid-template-columns:minmax(0,420px) 1fr;
  gap:70px; align-items:start;
}
.fiche__visuel{
  position:relative; aspect-ratio:4/5; background:none;
}
.fiche__visuel img{
  position:absolute; left:50%; bottom:16%;
  height:54%; width:auto; max-width:50%;
  object-fit:contain; object-position:bottom center;
  transform:translateX(-50%);
}
.fiche__vignettes{ display:flex; gap:12px; margin-top:16px }
.fiche__vignettes img{
  width:96px; aspect-ratio:4/5; object-fit:cover;
  background:var(--creme-carte); cursor:pointer;
  border:1px solid transparent; transition:border-color .2s;
}
.fiche__vignettes img:hover{ border-color:var(--ocre) }

.fiche__titre{
  margin:0 0 10px;
  font-family:var(--serif); font-weight:500; font-size:42px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--vert);
}
.fiche__sous{ margin:0 0 22px; color:var(--encre-douce); max-width:46ch }
.fiche__prix{ font-size:26px; color:var(--vert); margin-bottom:24px }
.fiche__achat{ display:flex; gap:14px; align-items:stretch; margin-bottom:14px }
.fiche__achat .btn{ flex:0 1 268px }
.fiche__stock{ margin:0 0 26px; font-size:13px; color:var(--encre-douce) }
.fiche__origine{
  margin-top:22px; font-family:var(--serif); font-size:19px;
  letter-spacing:.06em; color:var(--encre-douce);
}

.qte{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid var(--trait); padding:0 14px;
}
.qte button{ width:26px; height:38px; color:var(--vert); font-size:17px }
.qte--mini{ padding:0 8px; gap:9px }
.qte--mini button{ width:20px; height:28px; font-size:14px }

.accordeon__item{ border-top:1px solid var(--trait) }
.accordeon__item:last-child{ border-bottom:1px solid var(--trait) }
.accordeon__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:17px 0; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--vert);
}
/* Le signe suit l'état du panneau, comme sur la planche. */
.accordeon__btn i{ font-style:normal; font-size:17px; line-height:1; color:var(--ocre) }
.accordeon__btn i::before{ content:"+" }
.accordeon__item.is-ouvert .accordeon__btn i::before{ content:"−" }
.accordeon__panneau{ display:none; padding:0 0 18px; color:var(--encre-douce) }
.accordeon__item.is-ouvert .accordeon__panneau{ display:block }
.accordeon__panneau ul{ margin:0; padding-left:18px }

/* Tant que la base n'a pas répondu, les sections situées sous la fiche
   restent hors du flux : elles ne peuvent donc pas être peintes à une
   hauteur puis déplacées. */
/* La classe est posée par boutique.js dans un finally : même si la base est
   en panne, la page ne reste pas amputée de ses sections basses. */
.apres-fiche{ display:none }
.est-pret .apres-fiche{ display:block }

/* =================================================== AVIS ================ */
.avis{ background:var(--vert-pale); padding:60px 0 }
.avis__grille{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; text-align:center }
.avis__etoiles{ color:var(--ocre); letter-spacing:.2em; margin-bottom:12px }
.avis__texte{ margin:0 0 12px; font-size:14px; line-height:1.7 }
.avis__signe{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--vert) }

/* ================================================== FORMULAIRES ========== */
.champ{ display:block; margin-bottom:26px }
.champ > span{
  display:block; margin-bottom:9px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--encre-douce);
}
.champ input,.champ textarea,.champ select{
  width:100%; padding:11px 2px;
  background:none; border:0; border-bottom:1px solid var(--trait);
  border-radius:0;
}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none; border-bottom-color:var(--vert);
}
.champ textarea{ min-height:104px; resize:vertical }
.select{ border:1px solid var(--trait); padding:11px 12px; width:100% }

/* ====================================================== PANIER =========== */
.voile{
  position:fixed; inset:0; background:rgba(20,35,28,.42);
  opacity:0; pointer-events:none; transition:opacity .3s; z-index:40;
}
.voile.is-ouvert{ opacity:1; pointer-events:auto }

.tiroir{
  position:fixed; top:0; right:0; width:min(400px,92vw); height:100%;
  display:flex; flex-direction:column;
  background:var(--creme); z-index:50;
  transform:translateX(100%); transition:transform .34s ease;
  box-shadow:-14px 0 40px rgba(30,50,40,.14);
}
.tiroir.is-ouvert{ transform:none }
.tiroir__tete{
  display:flex; align-items:center; gap:12px;
  padding:24px 26px; border-bottom:1px solid var(--trait);
}
.tiroir__tete h2{
  margin:0; font-family:var(--serif); font-weight:500; font-size:22px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--vert);
}
.tiroir__corps{ flex:1; overflow:auto; padding:22px 26px }
.tiroir__pied{ padding:22px 26px; border-top:1px solid var(--trait) }

.ligne-panier{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; margin-bottom:22px }
.ligne-panier img{ width:64px; aspect-ratio:4/5; object-fit:cover; background:var(--creme-carte) }
.ligne-panier__nom{ font-family:var(--serif); font-size:17px; letter-spacing:.08em; color:var(--vert) }
.ligne-panier__var{ font-size:12px; color:var(--encre-douce); margin-top:2px }
.ligne-panier__actions{ display:flex; align-items:center; gap:12px; margin-top:8px }
.ligne-panier__sup{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-douce) }
.ligne-panier__sup:hover{ color:var(--ocre) }

.total{ display:flex; justify-content:space-between; padding:5px 0; font-size:14px }
.total--remise{ color:var(--ocre) }
.total--fort{
  font-size:19px; color:var(--vert); border-top:1px solid var(--trait);
  margin-top:10px; padding-top:14px;
}

/* =================================================== CODE PROMO ========== */
.promo__ligne{ display:flex; gap:10px; margin:6px 0 4px }
.promo__ligne input{ flex:1 }
.promo__note{ font-size:12px; color:var(--encre-douce); min-height:18px }
.promo__note.est-valide{ color:var(--vert) }
.promo__note.est-refuse,
.promo__note--erreur{ color:#8C3B2A }

/* ======================================================= PIED ============ */
/* La planche ne montre qu'une bande verte et le wordmark. Un site marchand a
   besoin de ses liens : ils tiennent sur UNE ligne sous le wordmark, plutôt
   qu'en trois colonnes qui doubleraient la hauteur du pied et casseraient la
   proportion validée. */
.pied{ background:var(--vert); color:var(--creme); padding:0 0 26px }
.pied__marque{
  padding:34px 0 28px; text-align:center;
  font-family:var(--serif); font-weight:500; font-size:46px;
  letter-spacing:.22em; text-indent:.22em; line-height:1;
}
.pied__liens{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:14px 34px; padding-top:24px;
  border-top:1px solid rgba(248,239,224,.18);
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.pied__liens a:hover{ color:var(--ocre) }
.pied__reseaux{ display:flex; gap:16px }
.pied__reseaux svg{ width:19px; height:19px }
.pied__bas{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  margin-top:26px; padding-top:18px;
  border-top:1px solid rgba(248,239,224,.18);
  font-size:12px; color:rgba(248,239,224,.66);
}

/* ====================================================== ÉTATS ============ */
.vide{ text-align:center; color:var(--encre-douce); padding:44px 0 }
.bulle{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(14px);
  padding:13px 24px; background:var(--vert); color:var(--creme);
  font-size:13px; border-radius:2px; opacity:0; pointer-events:none;
  transition:opacity .25s,transform .25s; z-index:60;
}
.bulle.is-ouvert{ opacity:1; transform:translateX(-50%) }
.bulle.est-erreur{ background:#8C3B2A }

/* ================================================== ANIMATIONS =========== */
/* Un décalage décoratif se pose en margin, JAMAIS en transform : la règle
   .est-vu remet transform à none et l'effacerait. */
[data-anim]{ opacity:0; transform:translateY(16px); transition:opacity .7s,transform .7s }
[data-anim].est-vu{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  [data-anim]{ opacity:1; transform:none }
  /* Les pseudo-éléments de transition de page ne sont pas atteints par le
     sélecteur universel : il faut les neutraliser explicitement. */
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;
  }
}


/* ===================================================== HISTOIRE ========== */
.colonnes{ columns:2; column-gap:56px; text-align:justify }
.colonnes p{ margin:0 0 16px }

.citation{
  margin:38px auto; padding:0 24px; max-width:20ch;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,3vw,40px); line-height:1.24;
  letter-spacing:.06em; text-transform:uppercase; text-align:center;
  color:var(--vert);
}
.citation::before{ content:"“" }
.citation::after{ content:"”" }

.engagements{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.engagement{
  padding:30px 22px; background:var(--creme-carte); text-align:center;
}
.engagement svg{ width:34px; height:34px; margin:0 auto 16px; color:var(--vert) }
.engagement h3{
  margin:0 0 8px; font-family:var(--serif); font-weight:500; font-size:17px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--vert);
}
.engagement p{ margin:0; font-size:13px; color:var(--encre-douce) }

/* ====================================================== JOURNAL ========== */
.article{ display:block; color:inherit; background:#fff }
.article img{ width:100%; aspect-ratio:1/1; object-fit:cover }
.article__corps{ padding:20px 22px 24px }
.article time{
  display:block; margin-bottom:9px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ocre);
}
.article h2,.article h3{
  margin:0; font-family:var(--serif); font-weight:500; line-height:1.22;
  letter-spacing:.02em; color:var(--vert);
}
.article h2{ font-size:30px }
.article h3{ font-size:20px }
.article p{ margin:14px 0 0; font-size:14px; color:var(--encre-douce) }

.article--une{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  margin-bottom:30px;
}
.article--une img{ height:100%; aspect-ratio:auto }
.article--une .article__corps{ padding:46px 46px 50px; align-self:center }
.articles{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }

.lien-souligne{
  display:inline-block; margin-top:24px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--vert); border-bottom:1px solid var(--ocre); padding-bottom:4px;
}

.fil{ margin:0 0 18px; font-size:11px; letter-spacing:.16em; text-transform:uppercase }
.fil a{ color:var(--encre-douce) }
.fil a:hover{ color:var(--vert) }
.article__titre{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,3.4vw,44px); line-height:1.18;
  letter-spacing:.03em; color:var(--vert);
}
.article__date{
  display:block; margin-top:10px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ocre);
}
.prose{ max-width:64ch }
.prose p{ margin:0 0 18px }

/* ====================================================== CONTACT ========== */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start }
.encart{ background:var(--vert-pale); padding:30px 32px }
.encart p{
  display:flex; align-items:center; gap:14px; margin:0;
  padding:16px 0; border-bottom:1px solid rgba(30,69,52,.14); font-size:14px;
}
.encart p:last-child{ border-bottom:0 }
.encart svg{ width:22px; height:22px; flex:0 0 22px; color:var(--vert) }
.contact__bloc{ margin-top:40px }
.contact__bloc h2{
  margin:0 0 12px; font-family:var(--serif); font-weight:500; font-size:20px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--vert);
}
.contact__bloc p{ margin:0; font-size:14px; color:var(--encre-douce) }

/* ===================================================== COMMANDE ========== */
.commande{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start }
.recap{ padding:30px 32px }
.recap h2{
  margin:0 0 22px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--encre-douce); font-weight:400;
}
.promo{ margin:22px 0 18px; padding-top:20px; border-top:1px solid var(--trait) }
.promo__titre{
  display:block; margin-bottom:8px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--encre-douce);
}
.promo__ligne .btn--ligne{ padding:11px 18px; white-space:nowrap }

.merci__numero{
  margin:26px 0 34px; font-family:var(--serif); font-size:24px;
  letter-spacing:.08em; color:var(--vert);
}

/* Un champ signalé se voit sans couleur seule : le filet s'épaissit aussi. */
.champ--erreur input,.champ--erreur textarea,.champ--erreur select{
  border-bottom:2px solid #8C3B2A;
}
.champ--erreur > span{ color:#8C3B2A }

/* ============================================ RESPONSIVE DES AJOUTS ====== */
@media (max-width:980px){
  .colonnes{ columns:1 }
  .engagements{ grid-template-columns:repeat(2,1fr) }
  .article--une{ grid-template-columns:1fr }
  .article--une img{ aspect-ratio:16/10 }
  .article--une .article__corps{ padding:28px 26px 32px }
  .articles{ grid-template-columns:repeat(3,1fr); gap:16px }
  .contact,.commande{ grid-template-columns:1fr; gap:40px }
  /* Sans min-width:0, la largeur minimale du récapitulatif — bordure, marge
     intérieure et ligne produit à trois colonnes — impose sa loi à la piste de
     grille et fait déborder la page. */
  .contact > *,.commande > *{ min-width:0 }
}

@media (max-width:560px){
  .cadre-berbere{ border-width:12px }
  .recap{ padding:20px 14px }
  .promo__ligne{ flex-wrap:wrap }
  .promo__ligne .btn--ligne{ padding:11px 14px; letter-spacing:.12em }
  .ligne-panier{ grid-template-columns:52px 1fr; gap:12px }
  .ligne-panier img{ width:52px }
  .ligne-panier > .num{ grid-column:2; margin-top:4px }
}
@media (max-width:720px){
  .engagements{ grid-template-columns:1fr }
  .articles{ grid-template-columns:1fr; gap:22px }
}

/* ================================================== RESPONSIVE =========== */
@media (max-width:1200px){
  :root{ --colonne:760px }
  .entete{ padding:0 34px }
  .marque{ font-size:40px }
}

@media (max-width:980px){
  :root{ --h-entete:80px; --colonne:100% }
  .entete__nav{ padding:10px 34px 22px }
  .marque{ font-size:32px }
  .section{ padding:56px 0 }
  .titre-section{ font-size:27px; margin-bottom:34px }
  .fiche{ grid-template-columns:1fr; gap:34px }
  .fiche__visuel{ max-width:420px; margin-inline:auto }
  .fiche__titre{ font-size:32px }
  .grille--quatre{ grid-template-columns:repeat(2,1fr) }
  .avis__grille{ grid-template-columns:1fr; gap:26px }
  .pied__marque{ font-size:36px }
}

@media (max-width:980px){
  .gammes{ gap:26px }
}

@media (max-width:720px){
  .gammes{ grid-template-columns:1fr; gap:34px; max-width:420px; margin-inline:auto }
  /* Deux prises de vue, pas un recadrage : le bloc adopte la proportion de
     l'image verticale réellement servie. */
  .hero__media img{ aspect-ratio:1400/2508 }
  .hero__titre{ font-size:clamp(26px,7.4vw,38px) }
  .grille,.grille--trio{ grid-template-columns:repeat(2,1fr); gap:26px 16px }
  .filtres{ gap:18px; font-size:11px }
  .section{ padding:44px 0 }
  .pied__marque{ font-size:28px; padding:26px 0 20px }
  .pied__liens{ gap:12px 22px; font-size:11px }
}

@media (max-width:420px){
  .entete{ padding:0 20px }
  .entete__nav{ padding:10px 20px 20px }
  .wrap{ width:calc(100% - 36px) }
  .grille,.grille--trio,.grille--quatre{ grid-template-columns:1fr; gap:30px }
  .marque{ font-size:26px }
}