/* ============================================================
   BOUCHERIE NOUR — halal, Annemasse
   Site de démonstration.
   Troisième identité de l'écosystème, en clair cette fois :
   papier, encre, rouge d'étal. Rien à voir avec zkry (encre
   froide) ni L'Établi (sapin et laiton).
   ============================================================ */

:root{
  color-scheme:light;

  /* Palette brute */
  --papier-050:#faf8f5;
  --papier-100:#f2eee8;
  --papier-200:#e5dfd6;
  --papier-300:#d3cabd;
  --encre-900:#1a1613;
  --encre-700:#3d352e;
  --encre-500:#6b6055;
  --rouge-700:#8e211c;
  --rouge-600:#a82a24;
  --rouge-500:#c4362e;
  --olive-600:#5b6b3a;
  --or-500:#b8892b;

  /* Rôles */
  --fond:var(--papier-050);
  --fond-creuse:var(--papier-100);
  --surface:#ffffff;
  --bordure:var(--papier-200);
  --bordure-forte:var(--papier-300);
  --texte:var(--encre-900);
  --texte-doux:var(--encre-500);
  --accent:var(--rouge-700);
  --accent-clair:var(--rouge-500);
  --accent-contraste:#ffffff;
  --halal:var(--olive-600);

  --e1:4px; --e2:8px; --e3:16px; --e4:24px;
  --e5:40px; --e6:64px; --e7:96px; --e8:132px;

  --t-xs:.75rem; --t-sm:.875rem; --t-md:1.0625rem;
  --t-lg:1.1875rem; --t-xl:1.5rem;

  --r-sm:4px; --r-md:10px; --r-full:999px;
  --trait:1px;
  --ombre:0 18px 40px -26px rgb(26 22 19 / .34);
  --transition:250ms cubic-bezier(.2,.8,.2,1);
  --conteneur:1180px;

  --font-titre:'Fraunces','Georgia',serif;
  --font-texte:'Work Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------------- Reset ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-texte);font-size:var(--t-md);line-height:1.65;
  color:var(--texte);background:var(--fond);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:var(--accent-contraste)}
:where(section,[id]){scroll-margin-top:92px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* Trame de papier d'emballage */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    repeating-linear-gradient(112deg, transparent 0 22px, rgba(26,22,19,.018) 22px 23px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(26,22,19,.012) 5px 6px);
}
body > *{position:relative;z-index:1}

/* ---------------- Layout ---------------- */
.conteneur{width:100%;max-width:var(--conteneur);margin-inline:auto;padding-inline:var(--e4)}
@media (max-width:600px){.conteneur{padding-inline:var(--e3)}}
.section{padding-block:var(--e7)}
@media (max-width:768px){.section{padding-block:var(--e6)}}
.creuse{background:var(--fond-creuse);border-block:1px solid var(--bordure)}

.skip{
  position:absolute;left:var(--e3);top:-100px;z-index:200;
  background:var(--accent);color:var(--accent-contraste);
  padding:var(--e2) var(--e3);border-radius:var(--r-sm);transition:top var(--transition);
}
.skip:focus,.skip:focus-visible{top:var(--e3)}

/* ---------------- Typographie ---------------- */
.titre-geant{
  font-family:var(--font-titre);font-weight:600;
  font-variation-settings:'SOFT' 30,'WONK' 1,'opsz' 100;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:1.02;letter-spacing:-.022em;
  text-wrap:balance;
}
.titre-section{
  font-family:var(--font-titre);font-weight:600;
  font-variation-settings:'SOFT' 25,'WONK' 1,'opsz' 60;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.02em;
  text-wrap:balance;
}
.surtitre{
  font-family:var(--font-mono);font-size:var(--t-xs);
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:var(--e3);margin-bottom:var(--e3);
}
.surtitre::after{content:'';flex:1;height:1px;background:var(--bordure-forte);max-width:110px}
.chapo{color:var(--texte-doux);max-width:58ch;font-size:var(--t-lg);text-wrap:pretty}
.doux{color:var(--texte-doux)}

/* ---------------- Boutons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  padding:14px var(--e4);border-radius:var(--r-full);
  font-size:var(--t-sm);font-weight:500;
  transition:transform 120ms,background var(--transition),color var(--transition),border-color var(--transition);
}
.btn:active{transform:scale(.97)}
.btn--plein{background:var(--accent);color:var(--accent-contraste);box-shadow:0 14px 30px -16px var(--accent)}
.btn--plein:hover{background:var(--accent-clair);transform:translateY(-2px)}
.btn--vide{border:var(--trait) solid var(--bordure-forte);color:var(--texte)}
.btn--vide:hover{border-color:var(--accent);color:var(--accent)}

/* Étiquette halal, réutilisée partout */
.halal{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--halal);border:1px solid color-mix(in srgb,var(--halal) 40%,transparent);
  border-radius:var(--r-full);padding:5px 12px;background:color-mix(in srgb,var(--halal) 7%,transparent);
}
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  .halal{border-color:#a8b48c;background:#f0f3e8}
}
.halal svg{flex:none}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.header{position:sticky;top:0;z-index:60;background:var(--fond);border-bottom:1px solid transparent;transition:border-color var(--transition),box-shadow var(--transition)}
.header.is-scrolled{border-bottom-color:var(--bordure);box-shadow:0 8px 24px -20px rgb(26 22 19 / .5)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);height:80px}

.logo{display:flex;align-items:center;gap:11px}
.logo__marque{
  width:38px;height:38px;flex:none;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-contraste);
  display:grid;place-items:center;
}
.logo__texte{line-height:1.05}
.logo__nom{font-family:var(--font-titre);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;display:block}
.logo__sous{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-doux)}

.nav{display:flex;align-items:center;gap:var(--e5)}
.nav a{font-size:var(--t-sm);color:var(--texte-doux);position:relative;padding-block:4px;transition:color var(--transition)}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--transition)}
.nav a:hover{color:var(--texte)}
.nav a:hover::after{transform:scaleX(1)}

.burger{display:none;width:42px;height:42px;place-items:center;border:var(--trait) solid var(--bordure-forte);border-radius:var(--r-sm)}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:var(--transition)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:var(--transition)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:940px){
  .burger{display:grid}
  .header .btn{display:none}
  .nav{
    position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:flex-start;
    gap:var(--e4);padding:var(--e5) var(--e4);background:var(--fond);
    border-bottom:var(--trait) solid var(--bordure);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:var(--transition);
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav a{font-family:var(--font-titre);font-size:1.5rem;color:var(--texte)}
}

/* ============================================================
   BANDEAU D'ARRIVAGE
   ============================================================ */
.arrivage{
  background:var(--ruban-fond,var(--texte));color:var(--ruban-texte,var(--fond));
  overflow:hidden;padding-block:11px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
}
.arrivage__piste{display:flex;gap:var(--e5);width:max-content;animation:defile 42s linear infinite}
.arrivage:hover .arrivage__piste{animation-play-state:paused}
.arrivage span{
  display:flex;align-items:center;gap:var(--e3);white-space:nowrap;
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
}
.arrivage span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-clair);flex:none}
@keyframes defile{to{transform:translateX(-50%)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding-block:var(--e7);overflow:hidden}
.hero__grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--e6);align-items:center}
@media (max-width:940px){.hero__grille{grid-template-columns:1fr;gap:var(--e5)}}

.hero h1 em{font-style:normal;color:var(--accent)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e5)}
.hero__preuves{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);margin-top:var(--e6);padding-top:var(--e4);border-top:var(--trait) solid var(--bordure)}
.preuve b{
  display:block;font-family:var(--font-titre);font-weight:600;font-size:1.9rem;
  color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;
}
.preuve span{font-size:var(--t-xs);color:var(--texte-doux);display:block;margin-top:5px;max-width:16ch}

/* Carte d'état, style étiquette d'étal */
.etal{
  background:var(--surface);border:var(--trait) solid var(--bordure);border-radius:var(--r-md);
  padding:var(--e5);box-shadow:var(--ombre);position:relative;
}
/* Un liseré rouge comme le ruban d'une étiquette */
.etal::before{
  content:'';position:absolute;top:0;left:var(--e5);right:var(--e5);height:4px;
  background:var(--accent);border-radius:0 0 var(--r-sm) var(--r-sm);
}
.etal__ligne{display:flex;align-items:center;gap:10px;margin-bottom:var(--e2)}
.etal__pastille{width:9px;height:9px;border-radius:50%;background:var(--texte-doux);flex:none}
.etal__pastille.is-ouvert{background:#2f9e5f;box-shadow:0 0 0 4px rgb(47 158 95 / .16);animation:battement 2.4s ease-in-out infinite}
.etal__pastille.is-ferme{background:var(--accent)}
@keyframes battement{50%{opacity:.4}}
.etal__titre{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase}
.etal__detail{font-size:var(--t-sm);color:var(--texte-doux);margin-bottom:var(--e4)}
.horaires{display:grid;gap:5px;font-size:var(--t-sm);margin-bottom:var(--e4)}
.horaires li{display:flex;justify-content:space-between;gap:var(--e3);padding-block:3px}
.horaires li.is-aujourdhui{color:var(--accent);font-weight:500}
.horaires span:first-child{color:var(--texte-doux)}
.horaires li.is-aujourdhui span{color:inherit}
.horaires b{font-weight:400;font-variant-numeric:tabular-nums}

/* ============================================================
   SCHÉMA DES MORCEAUX
   Un plan d'atelier interactif : on survole une zone, elle
   s'allume et le panneau de droite se remplit.
   ============================================================ */
.schema{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--e6);align-items:start}
@media (max-width:900px){.schema{grid-template-columns:1fr;gap:var(--e5)}}

.schema__plan{
  background:var(--surface);border:var(--trait) solid var(--bordure);border-radius:var(--r-md);
  padding:var(--e4);position:relative;
}
.schema__plan svg{width:100%;height:auto;display:block;overflow:visible}

.zone{cursor:pointer;transition:fill var(--transition),stroke var(--transition)}
.zone rect,.zone path{
  fill:var(--fond-creuse);stroke:var(--bordure-forte);stroke-width:1.5;
  transition:fill var(--transition),stroke var(--transition);
}
.zone:hover rect,.zone:hover path,
.zone[aria-current="true"] rect,.zone[aria-current="true"] path{
  fill:color-mix(in srgb,var(--accent) 16%,var(--surface));stroke:var(--accent);
}
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  .zone:hover rect,.zone[aria-current="true"] rect{fill:#f3dcda}
}
.zone text{
  font-family:var(--font-mono);font-size:9.5px;fill:var(--texte-doux);
  letter-spacing:.06em;text-anchor:middle;pointer-events:none;transition:fill var(--transition);
}
.zone:hover text,.zone[aria-current="true"] text{fill:var(--accent);font-weight:600}
.zone:focus-visible{outline:none}
.zone:focus-visible rect,.zone:focus-visible path{stroke:var(--accent);stroke-width:3}

.schema__legende{
  font-family:var(--font-mono);font-size:var(--t-xs);color:var(--texte-doux);
  letter-spacing:.1em;text-transform:uppercase;margin-top:var(--e3);text-align:center;
}

/* Panneau de détail */
.morceau{
  background:var(--surface);border:var(--trait) solid var(--bordure);border-radius:var(--r-md);
  padding:var(--e5);position:sticky;top:110px;
}
@media (max-width:900px){.morceau{position:static}}
.morceau__num{
  font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;color:var(--accent);
  text-transform:uppercase;margin-bottom:var(--e2);
}
.morceau__nom{font-family:var(--font-titre);font-weight:600;font-size:var(--t-xl);margin-bottom:var(--e3);letter-spacing:-.015em}
.morceau__desc{color:var(--texte-doux);font-size:var(--t-sm);margin-bottom:var(--e4)}
.morceau__meta{display:grid;gap:var(--e3);border-top:var(--trait) solid var(--bordure);padding-top:var(--e4)}
.morceau__meta div{display:flex;justify-content:space-between;gap:var(--e3);font-size:var(--t-sm)}
.morceau__meta dt{color:var(--texte-doux)}
.morceau__meta dd{text-align:right;font-weight:500}
.morceau__prix{color:var(--accent);font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);font-variant-numeric:tabular-nums}

/* ============================================================
   PRODUITS ET COMMANDE
   ============================================================ */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--e5)}
.filtre{
  font-size:var(--t-sm);padding:9px 17px;border:var(--trait) solid var(--bordure-forte);
  border-radius:var(--r-full);color:var(--texte-doux);transition:var(--transition);
}
.filtre:hover{border-color:var(--accent);color:var(--accent)}
.filtre[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-contraste)}

.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--e3)}
.produit{
  background:var(--surface);border:var(--trait) solid var(--bordure);border-radius:var(--r-md);
  padding:var(--e4);display:flex;flex-direction:column;gap:var(--e2);
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.produit:hover{border-color:var(--bordure-forte);box-shadow:var(--ombre);transform:translateY(-3px)}
.produit[hidden]{display:none}
.produit.is-masque{opacity:0;transform:scale(.97);pointer-events:none}

.produit__nom{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);letter-spacing:-.015em;line-height:1.2}
.produit__desc{font-size:var(--t-sm);color:var(--texte-doux);flex:1}
.produit__bas{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);margin-top:var(--e2);padding-top:var(--e3);border-top:var(--trait) solid var(--bordure)}
.produit__prix{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.produit__prix small{font-family:var(--font-texte);font-weight:400;font-size:var(--t-xs);color:var(--texte-doux);margin-left:3px}

/* Sélecteur de quantité */

/* ============================================================
   PANIER FLOTTANT
   ============================================================ */

/* ============================================================
   HALAL
   ============================================================ */
.engagements{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--e4)}
.engagement{
  background:var(--surface);border:var(--trait) solid var(--bordure);border-radius:var(--r-md);
  padding:var(--e5);display:grid;gap:var(--e3);align-content:start;
}
.engagement__icone{
  width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--halal) 12%,transparent);color:var(--halal);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){ .engagement__icone{background:#eef1e5} }
.engagement h3{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);letter-spacing:-.015em}
.engagement p{font-size:var(--t-sm);color:var(--texte-doux)}

.a-renseigner{
  border:1px dashed var(--accent);border-radius:var(--r-sm);
  padding:2px 8px;font-family:var(--font-mono);font-size:var(--t-xs);
  color:var(--accent);letter-spacing:.06em;white-space:nowrap;
}

/* ============================================================
   PRÉPARATIONS MAISON, ÉQUIPE, INFOS
   ============================================================ */
.maison{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--e4)}
.plat{
  border:var(--trait) solid var(--bordure);border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  transition:transform var(--transition),box-shadow var(--transition);
}
.plat:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
.plat__visuel{
  aspect-ratio:4/3;display:grid;place-items:center;gap:8px;
  background:var(--fond-creuse);border-bottom:var(--trait) solid var(--bordure);color:var(--accent);
  text-align:center;padding:var(--e3);
}
.plat__visuel small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--texte-doux)}
.plat__corps{padding:var(--e4);display:grid;gap:6px}
.plat__nom{font-family:var(--font-titre);font-weight:600;font-size:var(--t-lg);letter-spacing:-.015em}
.plat p{font-size:var(--t-sm);color:var(--texte-doux)}
.plat__prix{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}

.infos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--e5)}
.info__titre{font-family:var(--font-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--e3)}
.info p,.info a{font-size:var(--t-sm);color:var(--texte-doux);line-height:1.75}
.info a:hover{color:var(--accent)}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer{border-top:var(--trait) solid var(--bordure);padding-block:var(--e5);background:var(--fond-creuse)}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;justify-content:space-between}
.footer small,.footer a{font-size:var(--t-xs);color:var(--texte-doux)}
.footer a:hover{color:var(--accent)}
.demo{
  border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--surface);
  padding:var(--e3) var(--e4);margin-bottom:var(--e4);
  font-size:var(--t-sm);color:var(--texte-doux);display:flex;gap:var(--e3);align-items:flex-start;
}
.demo svg{color:var(--accent);flex:none;margin-top:2px}
.demo b{color:var(--texte);font-weight:600}

/* ============================================================
   MOUVEMENT
   ============================================================ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

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

/* ============================================================
   LES VIANDES — illustrations animées
   Tout ce qui suit anime les pièces dessinées dans viandes.js.
   ============================================================ */

.viande{width:100%;height:auto;display:block;overflow:visible}
.viande__g{transform-origin:50% 55%;transition:transform 520ms cubic-bezier(.2,.8,.2,1)}

/* Le persillé se dessine quand la pièce entre à l'écran.
   --L est la longueur exacte du tracé, mesurée en JS. */
.viande .v-persil path,
.viande .v-ficelle path,
.viande .v-lien path{
  transition:stroke-dashoffset 900ms cubic-bezier(.35,.9,.35,1);
}
.viande.is-tracee .v-persil path,
.viande.is-tracee .v-ficelle path,
.viande.is-tracee .v-lien path{stroke-dashoffset:0!important}
/* chaque veine part avec un léger retard : la marbrure se remplit
   veine après veine plutôt que d'un bloc */
.viande .v-persil path:nth-child(1){transition-delay:60ms}
.viande .v-persil path:nth-child(2){transition-delay:150ms}
.viande .v-persil path:nth-child(3){transition-delay:240ms}
.viande .v-persil path:nth-child(4){transition-delay:330ms}
.viande .v-persil path:nth-child(5){transition-delay:420ms}
.viande .v-persil path:nth-child(6){transition-delay:510ms}

/* Les grains d'épices arrivent en pop, un par un. */
.viande .v-epice circle{transform-origin:center;transform:scale(0);transition:transform 380ms cubic-bezier(.34,1.7,.5,1)}
.viande.is-tracee .v-epice circle{transform:scale(1)}
.viande.is-tracee .v-epice circle:nth-child(2){transition-delay:90ms}
.viande.is-tracee .v-epice circle:nth-child(3){transition-delay:170ms}
.viande.is-tracee .v-epice circle:nth-child(4){transition-delay:250ms}
.viande.is-tracee .v-epice circle:nth-child(5){transition-delay:330ms}
.viande.is-tracee .v-epice circle:nth-child(6){transition-delay:410ms}
.viande .v-epice{transition:none}

/* ============================================================
   CARTES DE VIANDE
   ============================================================ */
.produit{
  display:flex;flex-direction:column;height:100%;
  background:var(--surface);border:var(--trait) solid var(--bordure);
  border-radius:var(--r-md);overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition),
             border-color var(--transition), opacity 300ms;
}
.produit:hover,.produit:focus-visible{
  transform:translateY(-5px);box-shadow:var(--ombre);
  border-color:var(--bordure-forte);outline:none;
}
.produit:hover .viande__g,.produit:focus-visible .viande__g{
  transform:scale(1.07) rotate(-2.5deg);
}
.produit.is-masque{opacity:0;transform:scale(.94) translateY(8px);pointer-events:none}

.produit__scene{
  position:relative;padding:var(--e4) var(--e4) var(--e2);
  background:
    repeating-linear-gradient(112deg, rgba(26,22,19,.035) 0 22px, transparent 22px 23px),
    linear-gradient(170deg, var(--fond-creuse), var(--fond));
  border-bottom:var(--trait) solid var(--bordure);
}
.produit__etiquette{
  position:absolute;top:var(--e3);right:var(--e3);
  background:var(--accent);color:var(--accent-contraste);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;
  padding:4px 10px;border-radius:var(--r-full);
  transform:rotate(2deg);
}
.produit__corps{padding:var(--e4);flex:1}
.produit__nom{font-family:var(--font-titre);font-size:var(--t-lg);line-height:1.2}
.produit__desc{font-size:var(--t-sm);color:var(--texte-doux);margin-top:var(--e2);line-height:1.55}

.produit__fiche{margin-top:var(--e3);display:grid;gap:6px}
.produit__fiche div{display:flex;gap:8px;font-size:var(--t-xs);line-height:1.5}
.produit__fiche dt{
  color:var(--texte-doux);text-transform:uppercase;letter-spacing:.07em;
  font-weight:600;min-width:58px;flex:none;
}
.produit__fiche dd{color:var(--texte)}

.produit__bas{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e3);
  padding:var(--e3) var(--e4);border-top:var(--trait) dashed var(--bordure);
  background:var(--fond);
}
.produit__prix{font-family:var(--font-titre);font-size:var(--t-xl);color:var(--accent);line-height:1}
.produit__prix small{font-size:var(--t-xs);font-family:var(--font-texte);color:var(--texte-doux);margin-left:4px}
.produit__note{font-size:var(--t-xs);color:var(--texte-doux);white-space:nowrap;flex:none}

.filtre i{
  font-style:normal;font-size:var(--t-xs);opacity:.6;
  margin-left:6px;font-variant-numeric:tabular-nums;
}

/* ============================================================
   L'ÉTAL SUSPENDU
   ============================================================ */
.suspension-section{padding-bottom:0}
.suspension{
  position:relative;height:330px;margin-top:var(--e5);
  background:linear-gradient(180deg, var(--fond-creuse), var(--fond));
  border-block:1px solid var(--bordure);overflow:hidden;
}
.suspension__piste{position:absolute;inset:0}
.suspension__barre{
  position:absolute;top:26px;left:0;right:0;height:7px;
  background:linear-gradient(180deg,#b9ab97,#8d8172);
  box-shadow:0 3px 8px -3px rgb(26 22 19/.4);
}
.suspendu{
  position:absolute;top:22px;width:172px;margin-left:-86px;
  transform-origin:50% 0;
  animation:balance var(--duree) ease-in-out var(--retard) infinite;
}
.suspendu__crochet{display:block;width:12px;margin:0 auto;color:#8d8172}
.suspendu__crochet svg{width:12px;height:40px;display:block}
.suspendu__piece{display:block;margin-top:-19px;filter:drop-shadow(0 10px 14px rgb(26 22 19/.16))}

/* Le balancement propre au crochet, plus la poussée du curseur. */
@keyframes balance{
  0%,100%{transform:rotate(calc(var(--angle) * -1 + var(--poussee,0deg)))}
  50%    {transform:rotate(calc(var(--angle) + var(--poussee,0deg)))}
}
.suspendu{transition:none}

@media (max-width:860px){
  .suspension{height:250px}
  .suspendu{width:124px;margin-left:-62px}
  .suspendu__piece{margin-top:-14px}
}
@media (max-width:560px){
  /* On ne supprime plus deux pièces sur cinq : l'étal se lit en
     entier, on le fait simplement défiler du doigt. Un étal
     amputé donnait une vitrine plus pauvre sur mobile que sur
     ordinateur, ce qui est exactement l'inverse du but. */
  .suspension{
    height:220px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .suspension__piste{position:relative;height:100%;min-width:560px}
  .suspendu{width:112px;margin-left:-56px}
  .suspendu__piece{margin-top:-13px}
}

/* ============================================================
   LA DÉCOUPE — couperet piloté par le défilement
   ============================================================ */
.decoupe{
  position:relative;height:400px;
  display:grid;place-items:end center;
  background:
    radial-gradient(60% 50% at 50% 78%, rgba(26,22,19,.07), transparent 70%),
    var(--fond-creuse);
  border:var(--trait) solid var(--bordure);border-radius:var(--r-md);
  overflow:hidden;
}
.decoupe__billot{
  position:absolute;left:50%;bottom:44px;transform:translateX(-50%);
  width:min(74%,430px);height:42px;border-radius:6px;
  background:linear-gradient(180deg,#a8825c,#7d5f41);
  box-shadow:0 12px 22px -14px rgb(26 22 19/.6);
}
.decoupe__billot::before{
  content:'';position:absolute;inset:0 0 auto;height:9px;border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 3px,transparent 3px 11px);
}
.decoupe__lame{
  position:absolute;left:50%;top:0;width:118px;
  transform:translate3d(-50%,-140px,0);
  filter:drop-shadow(0 8px 12px rgb(26 22 19/.3));
  will-change:transform;
}
.decoupe__lame svg{width:100%;height:auto;display:block}

/* la pièce repose sur le billot : son bas touche le dessus du bois */
.decoupe__piece{position:relative;width:min(64%,360px);height:110px;bottom:84px}
.decoupe__moitie{
  position:absolute;top:0;width:50%;height:100%;
  will-change:transform;
  filter:drop-shadow(0 10px 12px rgb(26 22 19/.22));
}
.decoupe__moitie svg{width:100%;height:100%;display:block}
.decoupe__moitie--g{left:0}
.decoupe__moitie--d{right:0}

.decoupe__trait{
  position:absolute;left:50%;top:-4px;width:3px;height:calc(100% + 8px);
  transform:translateX(-50%);background:rgb(26 22 19/.35);
  transition:opacity 200ms;
}

@media (max-width:620px){
  .decoupe{height:320px}
  .decoupe__lame{width:92px}
  .decoupe__piece{height:82px;bottom:74px}
  .decoupe__billot{bottom:34px;height:34px}
}

/* ============================================================
   PRÉPARATIONS MAISON — la vapeur
   ============================================================ */
.plat__visuel{position:relative;overflow:visible}
.plat__fumee{
  position:absolute;left:50%;top:6px;translate:-50% 0;
  width:60px;height:52px;pointer-events:none;
}
.plat__fumee i{
  position:absolute;bottom:0;width:5px;height:5px;border-radius:50%;
  background:rgb(107 96 85/.34);opacity:0;
}
.plat__fumee i:nth-child(1){left:12px;animation:fumee 3.4s ease-out .0s infinite}
.plat__fumee i:nth-child(2){left:28px;animation:fumee 3.4s ease-out 1.1s infinite}
.plat__fumee i:nth-child(3){left:43px;animation:fumee 3.4s ease-out 2.2s infinite}

@keyframes fumee{
  0%  {opacity:0;   transform:translateY(6px)  scale(.5) translateX(0)}
  18% {opacity:.55}
  60% {opacity:.3;  transform:translateY(-24px) scale(1.5) translateX(6px)}
  100%{opacity:0;   transform:translateY(-46px) scale(2.1) translateX(-3px)}
}

.plat:hover .viande__g{transform:scale(1.06) rotate(2deg)}

/* ============================================================
   HERO — mention « pas de commande en ligne »
   ============================================================ */
.hero__vitrine{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:var(--e4);padding:var(--e3);
  border:1px dashed var(--bordure-forte);border-radius:var(--r-md);
  background:var(--fond-creuse);
  font-size:var(--t-sm);color:var(--texte-doux);line-height:1.55;max-width:52ch;
}
.hero__vitrine svg{flex:none;margin-top:3px;color:var(--accent)}

.btn--tel{gap:8px;font-variant-numeric:tabular-nums}
@media (max-width:900px){.btn--tel span,.btn--tel{font-size:var(--t-sm)}}

/* ============================================================
   MOUVEMENT RÉDUIT — tout se fige, rien ne disparaît
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .suspendu{animation:none;transform:none}
  .viande__g{transition:none}
  .viande .v-persil path,.viande .v-ficelle path,.viande .v-lien path{
    stroke-dashoffset:0!important;transition:none;
  }
  .viande .v-epice circle{transform:scale(1);transition:none}
  .decoupe__lame{transform:translate3d(-50%,20px,0)!important}
  .decoupe__moitie--g{transform:translate3d(-46px,0,0) rotate(-7deg)!important}
  .decoupe__moitie--d{transform:translate3d(46px,0,0) rotate(7deg)!important}
  .decoupe__trait{opacity:0!important}
}

/* ---- Respiration des pièces ---- */
.viande.respire .viande__g{
  animation:souffle var(--souffle,6s) ease-in-out var(--souffle-retard,0s) infinite;
}
@keyframes souffle{
  0%,100%{transform:translateY(0)    rotate(0deg)   scale(1)}
  50%    {transform:translateY(-3px) rotate(.7deg)  scale(1.014)}
}
/* le survol reprend la main sur la respiration */
.produit:hover .viande.respire .viande__g,
.produit:focus-visible .viande.respire .viande__g,
.plat:hover .viande.respire .viande__g{animation:none}

/* ---- Entrée des zones du plan de découpe ---- */
.zone--entre{
  animation:zone-entre 620ms cubic-bezier(.2,.9,.3,1) var(--retard,0ms) both;
  transform-origin:center;
}
@keyframes zone-entre{
  from{opacity:0;transform:translateY(9px) scale(.94)}
  to  {opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce){
  .viande.respire .viande__g{animation:none}
  .zone--entre{animation:none;opacity:1}
}

/* ============================================================
   ============================================================
   THÈME « DESSINÉ »

   Le site tourne entièrement sur des variables : redéfinir le
   bloc suffit à rehabiller les couleurs, la typographie, les
   rayons et l'épaisseur des traits. Ne restent en surcharge que
   les quelques endroits où le style change de NATURE — l'ombre
   portée pleine, les contours des illustrations, le rebond.
   ============================================================
   ============================================================ */

[data-style="dessine"]{
  /* Palette brute */
  --creme-050:#fff8ec;
  --creme-100:#ffeed4;
  --creme-200:#f8dfbe;
  --creme-300:#e0c9a8;
  --brun-900:#2b1a12;
  --brun-700:#4a3020;
  --brun-500:#8a5a3c;
  --tomate-600:#e63a2a;
  --tomate-500:#ff4d3d;
  --tomate-400:#ff6f5f;
  --moutarde-400:#ffc233;
  --basilic-500:#3fa96b;

  /* Rôles */
  --fond:var(--creme-050);
  --fond-creuse:var(--creme-100);
  --surface:#ffffff;
  --bordure:var(--brun-900);
  --bordure-forte:var(--brun-900);
  --texte:var(--brun-900);
  --texte-doux:var(--brun-500);
  --accent:var(--tomate-600);
  --accent-clair:var(--tomate-500);
  --accent-contraste:#fff8ec;
  --halal:var(--basilic-500);

  /* Formes : tout s'arrondit et s'épaissit */
  --r-sm:10px; --r-md:22px; --r-full:999px;
  --trait:3px;
  --ombre:0 6px 0 var(--brun-900);

  /* Le mouvement rebondit au lieu de glisser */
  --transition:280ms cubic-bezier(.34,1.56,.5,1);

  --font-titre:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font-texte:'Nunito','Trebuchet MS',system-ui,sans-serif;
}

/* --- Ce qui change de nature, pas seulement de valeur --- */

/* L'ombre devient une ombre portée pleine, décalée : c'est elle
   qui donne l'impression de papier découpé posé sur la page. */
[data-style="dessine"] .produit,
[data-style="dessine"] .plat,
[data-style="dessine"] .engagement,
[data-style="dessine"] .info,
[data-style="dessine"] .etal,
[data-style="dessine"] .morceau{
  box-shadow:0 6px 0 var(--brun-900);
}
[data-style="dessine"] .produit:hover,
[data-style="dessine"] .produit:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 10px 0 var(--brun-900);
}

[data-style="dessine"] .btn{font-weight:800;letter-spacing:.01em}
[data-style="dessine"] .btn--plein{
  border:var(--trait) solid var(--brun-900);
  box-shadow:0 5px 0 var(--brun-900);
}
[data-style="dessine"] .btn--plein:hover{
  transform:translateY(-2px);box-shadow:0 7px 0 var(--brun-900);
}
[data-style="dessine"] .btn--plein:active{transform:translateY(2px);box-shadow:0 2px 0 var(--brun-900)}
[data-style="dessine"] .btn--vide{background:var(--creme-050)}

/* Les titres prennent du gras : Baloo n'existe pas en 600 fin */
[data-style="dessine"] .titre-geant,
[data-style="dessine"] .titre-section,
[data-style="dessine"] .produit__nom,
[data-style="dessine"] .plat__nom,
[data-style="dessine"] h1,[data-style="dessine"] h2,[data-style="dessine"] h3{
  font-weight:800;letter-spacing:-.015em;
}
[data-style="dessine"] .titre-geant em{font-style:normal;color:var(--accent)}

/* Le surtitre devient une étiquette collée de travers */
[data-style="dessine"] .surtitre{
  display:inline-block;padding:5px 14px;border-radius:var(--r-full);
  background:var(--moutarde-400);border:2.5px solid var(--brun-900);
  color:var(--brun-900);font-weight:800;font-family:var(--font-texte);
  letter-spacing:.05em;transform:rotate(-1.2deg);
}
[data-style="dessine"] .surtitre::after{display:none}

[data-style="dessine"] .produit__etiquette{
  border:2.5px solid var(--brun-900);
  background:var(--moutarde-400);color:var(--brun-900);
  font-weight:800;transform:rotate(4deg);
}

[data-style="dessine"] .header{border-bottom-color:var(--brun-900)}
[data-style="dessine"] .header.is-scrolled{box-shadow:0 4px 0 var(--brun-900)}
[data-style="dessine"] .arrivage{
  --ruban-fond:var(--moutarde-400);--ruban-texte:var(--brun-900);
  border-block:var(--trait) solid var(--brun-900);font-weight:700;
}
[data-style="dessine"] .filtre[aria-pressed="true"]{
  background:var(--tomate-500);color:var(--creme-050);
  border-color:var(--brun-900);box-shadow:0 3px 0 var(--brun-900);
}

/* --- Les illustrations : mêmes tracés, cernés et en aplats vifs ---
   Les calques ont été nommés dans viandes.js exactement pour ça :
   une règle CSS bat un attribut fill, donc rien à redessiner. */
[data-style="dessine"] .viande .v-chair{fill:#ff4d3d}
[data-style="dessine"] .viande .v-chair-clair{stroke:#ff6f5f;fill:#ff6f5f}
[data-style="dessine"] .viande .v-chair-ombre{fill:#d4321f;opacity:.42}
[data-style="dessine"] .viande .v-gras{fill:#fff1d9}
[data-style="dessine"] .viande .v-os path,
[data-style="dessine"] .viande .v-os ellipse,
[data-style="dessine"] .viande .v-os circle{fill:#fff3dd}
[data-style="dessine"] .viande .v-persil path{stroke:#fff1d9}
[data-style="dessine"] .viande .v-epice circle{fill:#3fa96b}
[data-style="dessine"] .viande .v-brin{stroke:#ff8a78}
[data-style="dessine"] .viande .v-boule ellipse{fill:#ff4d3d}
[data-style="dessine"] .viande .v-cube rect{fill:#ff4d3d}
[data-style="dessine"] .viande .v-fibre{stroke:#ffb8a8}
[data-style="dessine"] .viande .v-plan{stroke:#e0c9a8}

/* Le cerne : appliqué aux masses, jamais au persillé (qui est
   déjà un trait) ni aux épices (trop petites pour un contour). */
[data-style="dessine"] .viande .v-chair,
[data-style="dessine"] .viande .v-gras,
[data-style="dessine"] .viande .v-os path,
[data-style="dessine"] .viande .v-boule ellipse,
[data-style="dessine"] .viande .v-cube rect,
[data-style="dessine"] .viande .v-bol,
[data-style="dessine"] .viande .v-bord,
[data-style="dessine"] .viande .v-pilon path,
[data-style="dessine"] .viande .v-aile path{
  stroke:#2b1a12;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;
  paint-order:stroke fill;
}
/* la merguez est déjà un trait épais : on l'entoure sans la remplir */
[data-style="dessine"] .viande .v-chair[stroke]{stroke:#2b1a12}

/* Le plan de découpe suit la même règle */
[data-style="dessine"] .zone rect,[data-style="dessine"] .zone path{
  stroke:var(--brun-900);stroke-width:2.5;
}
[data-style="dessine"] .zone:hover rect,
[data-style="dessine"] .zone[aria-current="true"] rect{fill:var(--tomate-500)}

/* La vapeur se voit mieux sur crème */
[data-style="dessine"] .plat__fumee i{background:rgb(138 90 60/.42)}

/* La respiration rebondit un peu plus franchement */
[data-style="dessine"] .viande.respire .viande__g{
  animation-timing-function:cubic-bezier(.45,0,.55,1);
}

/* ============================================================
   L'ÉCRAN DE CHOIX

   Plein cadre à l'ouverture, le temps que le visiteur décide.
   Même mécanique que sur le portfolio : une seule variable --p
   pilote la découpe des deux côtés et la position du trait.
   ============================================================ */
.choix{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:#f2eee8;
  transition:opacity 460ms ease, visibility 460ms;
}
.choix.is-parti{opacity:0;visibility:hidden;pointer-events:none}
html:not(.js) .choix{display:none}          /* sans JS, on lit le site directement */
[data-style-choisi] .choix{display:none}     /* déjà choisi : on n'y revient pas */

.choix__intro{
  padding:20px 24px;text-align:center;
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:.9375rem;line-height:1.5;color:#3d352e;
  background:#faf8f5;border-bottom:1px solid #e5dfd6;
}
.choix__intro b{display:block;font-size:1.0625rem;color:#1a1613;margin-bottom:2px}

.choix__scene{
  --p:50%;--pente:7%;
  position:relative;flex:1;overflow:hidden;isolation:isolate;
  touch-action:pan-y;
}

.choix__cote{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  border:0;padding:0;margin:0;background:none;
  text-align:left;font:inherit;cursor:pointer;
  transition:clip-path 420ms cubic-bezier(.2,.8,.2,1);
}
.choix__cote--dessine{
  clip-path:polygon(0 0, calc(var(--p) + var(--pente)) 0, calc(var(--p) - var(--pente)) 100%, 0 100%);
  color:#2b1a12;
}
.choix__cote--reel{
  clip-path:polygon(calc(var(--p) + var(--pente)) 0, 100% 0, 100% 100%, calc(var(--p) - var(--pente)) 100%);
  color:#1a1613;
}
.choix__scene.is-suivi .choix__cote,
.choix__scene.is-suivi .choix__trait{transition:none}

.choix__decor{position:absolute;inset:0;z-index:0}
.choix__decor svg{width:100%;height:100%;display:block}

/* voile de lisibilité, ancré au coin du texte */
.choix__cote::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.choix__cote--dessine::after{
  background:radial-gradient(66% 88% at 0% 100%,
    rgba(255,238,212,.97) 0%, rgba(255,238,212,.82) 32%,
    rgba(255,238,212,.36) 56%, transparent 74%);
}
.choix__cote--reel::after{
  background:radial-gradient(66% 88% at 100% 100%,
    rgba(242,238,232,.97) 0%, rgba(242,238,232,.82) 32%,
    rgba(242,238,232,.36) 56%, transparent 74%);
}

.choix__contenu{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:clamp(22px,4vw,52px);max-width:min(46%,430px);
}
.choix__cote--reel .choix__contenu{margin-left:auto}

.choix__marque{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;
  padding:5px 13px;border-radius:999px;font-weight:700;
}
.choix__titre{font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.02}
.choix__texte{font-size:.9375rem;line-height:1.55;max-width:33ch}
.choix__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  padding:12px 22px;border-radius:999px;font-size:.9375rem;font-weight:700;
  transition:transform 240ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms;
}
.choix__cta svg{transition:transform 240ms}
.choix__cote:hover .choix__cta svg,
.choix__cote:focus-visible .choix__cta svg{transform:translateX(4px)}

/* chaque camp parle sa propre langue, jusque dans ce menu */
.choix__cote--dessine .choix__marque{background:#ffc233;border:2.5px solid #2b1a12;color:#2b1a12}
.choix__cote--dessine .choix__titre{font-family:'Baloo 2','Trebuchet MS',sans-serif;font-weight:800;letter-spacing:-.015em}
.choix__cote--dessine .choix__texte{font-family:'Nunito',system-ui,sans-serif;color:#4a3020}
.choix__cote--dessine .choix__cta{
  background:#ff4d3d;border:3px solid #2b1a12;color:#fff8ec;
  font-family:'Nunito',system-ui,sans-serif;font-weight:800;box-shadow:0 5px 0 #2b1a12;
}
.choix__cote--dessine:hover .choix__cta{transform:translateY(-2px);box-shadow:0 7px 0 #2b1a12}

.choix__cote--reel .choix__marque{background:#8e211c;color:#faf8f5;font-family:ui-monospace,Menlo,monospace}
.choix__cote--reel .choix__titre{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.025em}
.choix__cote--reel .choix__texte{font-family:'Work Sans',system-ui,sans-serif;color:#3d352e}
.choix__cote--reel .choix__cta{
  background:#8e211c;color:#fff;font-family:'Work Sans',system-ui,sans-serif;
  box-shadow:0 12px 26px -14px #8e211c;
}
.choix__cote--reel:hover .choix__cta{transform:translateY(-2px)}

.choix__trait{
  position:absolute;top:-4%;bottom:-4%;left:var(--p);
  width:3px;margin-left:-1.5px;z-index:3;
  background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);
  transform:rotate(var(--incl,4deg));pointer-events:none;
  box-shadow:0 0 18px rgb(0 0 0/.2);
  transition:left 420ms cubic-bezier(.2,.8,.2,1);
}
.choix__poignee{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#1a1613;box-shadow:0 6px 18px -6px rgb(0 0 0/.45);
  animation:choix-souffle 2.6s ease-in-out infinite;
}
@keyframes choix-souffle{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}

.choix__cote:focus-visible{outline:3px solid #1a1613;outline-offset:-3px}

/* le camp retenu s'ouvre en grand avant que l'écran s'efface */
.choix__scene.is-pris-dessine{--p:100%}
.choix__scene.is-pris-reel{--p:0%}
.choix__scene.is-pris-dessine .choix__cote--dessine,
.choix__scene.is-pris-reel .choix__cote--reel{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.choix__scene.is-pris-dessine .choix__trait,
.choix__scene.is-pris-reel .choix__trait{opacity:0}

@media (max-width:820px){
  /* La diagonale reste : c'est elle qui montre « deux styles ».
     Empilée, elle devenait deux affiches sans rapport. */
  .choix__scene{--p:50%;--pente:10%}
  .choix__contenu{max-width:min(58%,300px);padding:18px;gap:7px}
  .choix__titre{font-size:clamp(1.45rem,6.6vw,2rem)}
  .choix__texte{font-size:.8125rem;line-height:1.45;max-width:24ch}
  .choix__marque{font-size:.6875rem;padding:4px 10px}
  .choix__cta{padding:10px 16px;font-size:.8125rem}
  .choix__cote--reel .choix__contenu{margin-left:auto}
  .choix__poignee{width:52px;height:52px}
  .choix__cote--dessine::after{
    background:radial-gradient(88% 78% at 0% 0%,
      rgba(255,238,212,.97) 0%, rgba(255,238,212,.86) 38%,
      rgba(255,238,212,.42) 62%, transparent 80%);
  }
  .choix__cote--reel::after{
    background:radial-gradient(86% 82% at 100% 100%,
      rgba(242,238,232,.97) 0%, rgba(242,238,232,.86) 36%,
      rgba(242,238,232,.42) 60%, transparent 78%);
  }

  /* Le triangle de gauche est large en HAUT, celui de droite est
     large en BAS. On y pose leurs textes en conséquence, sinon la
     diagonale coupe les mots. */
  .choix__cote--dessine{align-items:flex-start}
  .choix__cote--reel{align-items:flex-end}
  .choix__contenu{max-width:min(52%,270px)}
}

/* ============================================================
   L'INVERSEUR — pour changer d'avis à tout moment
   ============================================================ */
.bascule{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 13px 6px 8px;border-radius:var(--r-full);
  border:var(--trait) solid var(--bordure-forte);background:var(--surface);
  cursor:pointer;font:inherit;font-size:var(--t-xs);font-weight:600;
  color:var(--texte);transition:border-color var(--transition), background var(--transition);
}
.bascule:hover{border-color:var(--accent)}
.bascule__piste{
  width:34px;height:19px;border-radius:999px;flex:none;
  background:var(--bordure);position:relative;
  transition:background var(--transition);
}
.bascule__piste i{
  position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgb(0 0 0/.28);
  transition:transform var(--transition);
}
.bascule[aria-pressed="true"] .bascule__piste{background:var(--accent)}
.bascule[aria-pressed="true"] .bascule__piste i{transform:translateX(15px)}
.bascule__nom{min-width:4.4em;text-align:left}

[data-style="dessine"] .bascule{box-shadow:0 3px 0 var(--brun-900);font-weight:800}
[data-style="dessine"] .bascule__piste{border:2px solid var(--brun-900)}
[data-style="dessine"] .bascule__piste i{background:var(--creme-050);top:1px;left:1px}
[data-style="dessine"] .bascule[aria-pressed="true"] .bascule__piste i{transform:translateX(13px)}

@media (max-width:700px){ .bascule__nom{display:none} .bascule{padding:6px 8px} }

@media (prefers-reduced-motion: reduce){
  .choix,.choix__cote,.choix__trait{transition:none}
  .choix__poignee{animation:none}
  .bascule__piste,.bascule__piste i{transition:none}
}

/* L'inverseur ajoute un élément dans une barre déjà chargée :
   on resserre la navigation plutôt que de la laisser passer à la ligne. */
.header__inner{gap:var(--e3)}
.nav{white-space:nowrap}
.header .btn--tel{white-space:nowrap;flex:none}
@media (max-width:1100px){
  .nav{gap:var(--e3);font-size:var(--t-sm)}
}

/* Le cadre épais serre l'illustration : on lui rend de l'air. */
[data-style="dessine"] .produit__scene{padding-bottom:var(--e3)}
[data-style="dessine"] .plat__visuel{padding-bottom:var(--e3)}

/* ============================================================
   AU DOIGT — cibles portées à 44 px
   ============================================================ */
@media (pointer: coarse), (max-width: 900px){
  .burger{width:44px;height:44px}
  .filtre{min-height:44px;display:inline-flex;align-items:center}
  .nav a,.footer a,.btn{min-height:44px}
  .nav a,.footer a{display:flex;align-items:center}
  .footer nav{display:flex;flex-wrap:wrap;gap:var(--e2) var(--e4)}

  /* L'inverseur de style faisait 33 px de haut : on le pose sur 44. */
  .bascule{min-height:44px;padding-inline:12px}

  /* Le plan de découpe : réduit à la largeur du téléphone, les
     petites zones tombaient à 29 px. On le laisse à sa taille
     lisible et on le fait défiler latéralement — mieux vaut un
     plan qu'on balaye qu'un plan qu'on rate. */
  .schema__plan{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    margin-inline:calc(var(--e3) * -1);padding-inline:var(--e3);
  }
  .schema__plan svg{min-width:640px}
  .schema__plan::after{
    content:'Balayez le plan →';
    display:block;text-align:right;padding-top:6px;
    font-size:var(--t-xs);color:var(--texte-doux);
  }
  .zone{cursor:default}
}

@media (pointer: coarse), (max-width: 900px){
  /* Le logo est un lien de retour à l'accueil : il mérite 44 px. */
  .logo{min-height:44px;display:inline-flex;align-items:center}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  /* Les liens EN PLEINE PHRASE gardent leur taille : les gonfler
     disloquerait le paragraphe, et la règle d'accessibilité les
     dispense justement pour cette raison. */
}

@media (pointer: coarse), (max-width: 900px){
  /* Un numéro de téléphone sur un mobile, c'est LE geste du site :
     il ne peut pas faire 16 px de haut. */
  a[href^="tel:"],a[href^="mailto:"]{
    min-height:44px;display:inline-flex;align-items:center;
  }
}

/* ---- La carte se soulève en passant au centre de l'écran ---- */
@media (pointer: coarse){
  /* La transformation est posée en JavaScript, image par image :
     pas de transition ici, elle lutterait contre le calcul. */
  .anime-au-doigt{will-change:transform}
}

@media (max-width:420px){
  /* Le panneau de navigation dépassait de 2 px sur les plus
     petits écrans : sa bordure s'ajoutait à sa largeur pleine. */
  .nav{max-width:100vw;box-sizing:border-box}
}

/* ============================================================
   NE PAS PEINDRE CE QUI EST HORS DE LÉCRAN

   Sur une page longue, le navigateur calcule la mise en page et
   peint des sections que personne ne regarde. « content-visibility »
   lui dit de sauter tout ce travail tant que la section napproche
   pas — cest le levier le plus efficace sur ce genre de page, et
   il ne change rien à lapparence.

   La taille estimée est indispensable : sans elle, la barre de
   défilement sauterait à mesure que les sections se révèlent.
   ============================================================ */
/* « content-visibility » a été essayé ici puis RETIRÉ. Il divisait
   bien le temps de mise en page par quatre, mais la grille des
   viandes est filtrable : sa hauteur change avec le filtre choisi,
   aucune estimation ne la suit, et la barre de défilement sautait
   de près de 1000 px sur téléphone. Un gain invisible ne vaut pas
   une gêne visible.
   Les gains conservés ici : transformations écrites directement,
   lectures de position groupées, et confinement des cartes. */
/* La première section est visible demblée : lexclure évite un
   passage inutile au chargement, celui qui compte le plus. */
main > section:first-of-type{content-visibility:visible}

/* Chaque carte se contient elle-même : ce qui change à lintérieur
   ne peut plus déclencher un recalcul de toute la page. */
.projet,.produit,.destination,.presta,.plat,.engagement,.info,.film,.formule,.carte-franchise,.etape{
  contain:layout paint style;
}


/* ============================================================
   REPÈRES DE NAVIGATION
   ============================================================ */
.lecture-jauge{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  pointer-events:none;background:transparent;
}
.lecture-jauge i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb,var(--accent) 55%, var(--texte)));
  will-change:transform;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .lecture-jauge i{background:var(--accent)}
}

.haut-page{
  position:fixed;right:18px;bottom:18px;z-index:110;
  width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--trait-fort, var(--trait));border-radius:50%;
  background:var(--surface);color:var(--texte);cursor:pointer;
  box-shadow:0 10px 26px -12px rgb(0 0 0/.45);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);
  transition:opacity .28s, transform .28s, visibility .28s, background .2s;
}
.haut-page.is-visible{opacity:1;visibility:visible;transform:none}
.haut-page:hover{background:var(--accent);color:var(--accent-contraste);border-color:var(--accent)}
.haut-page svg{width:20px;height:20px}
/* le repère de chapitre du portfolio occupe déjà ce coin */
.haut-page{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){ .haut-page{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))} }

/* La section en cours, dans le menu */
[data-menu] a[aria-current="true"]{color:var(--accent)}
[data-menu] a[aria-current="true"]::after{
  content:'';display:block;height:2px;border-radius:2px;
  background:var(--accent);margin-top:3px;
}

@media (prefers-reduced-motion: reduce){
  .haut-page{transition:opacity .01s, visibility .01s}
  .lecture-jauge i{transition:none}
}