/*
  Resamie — feuille commune aux trois pages (accueil, site web, click & collect).
  Charte v2 du 2026-10-02 : vert bistrot, crème, moutarde, tomate.
  Polices locales : Gambarino (titres), Switzer (texte).
*/
@font-face{font-family:Gambarino;src:url(../polices/Gambarino-Regular.woff2) format('woff2');font-display:swap}
@font-face{font-family:Switzer;src:url(../polices/Switzer-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Switzer;src:url(../polices/Switzer-VariableItalic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --nuit:#0c1d17; --nuit-2:#12291f; --vert:#163a2d; --vert-c:#2b6a52;
  --sauge:#a9bdb1;                 /* texte secondaire sur fond sombre : 8,8:1 */
  --creme:#f4ede1; --papier:#faf7f1; --blanc:#fff;
  --encre:#15130f; --gris:#5c574e; --gris-c:#a39c90; --filet:#e3d9c9;
  --filet-n:rgba(244,237,225,.13);
  --moutarde:#edb23c; --moutarde-c:#f6cd72;
  --tomate:#e0472b;                /* décor seulement : 4,2:1 sur la nuit */
  --tomate-f:#b8351c;              /* texte : 5,1:1 sur crème */
  --e:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.65,0,.35,1); --ressort:cubic-bezier(.34,1.56,.64,1);
  --max:1200px; --r:18px;
  --bruit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{font-family:Switzer,system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--encre);
  background:var(--papier);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg,iframe{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.serif{font-family:Gambarino,Georgia,serif;font-weight:400}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:120px 0;position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--moutarde);outline-offset:3px;border-radius:6px}

/* ----------------------------------------------------------- typographie */
.sur{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vert-c);margin-bottom:20px}
.sur::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px}
.sombre .sur{color:var(--moutarde)}
h1,h2,h3{text-wrap:balance}
h2{font-family:Gambarino,Georgia,serif;font-weight:400;font-size:clamp(38px,5vw,66px);line-height:1.04;letter-spacing:-.015em;max-width:17ch}
h2 em{font-style:normal;color:var(--vert-c)}
.sombre h2 em{color:var(--moutarde)}
.chapo{font-size:19px;color:var(--gris);max-width:56ch;margin-top:22px;text-wrap:pretty}
.sombre{background:var(--nuit);color:var(--creme)}
.sombre .chapo{color:var(--sauge)}
.tete{margin-bottom:64px}
.tete.centre{text-align:center}
.tete.centre h2,.tete.centre .chapo{margin-left:auto;margin-right:auto}
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--bruit);pointer-events:none}

/* --------------------------------------------------------------- boutons */
.btn{--fond:var(--moutarde);--texte:var(--encre);--balai:var(--moutarde-c);--bord:var(--fond);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:0 28px;border-radius:999px;background:var(--fond);color:var(--texte);border:1.5px solid var(--bord);
  font:600 16px/1.1 Switzer,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .4s var(--ressort),box-shadow .4s var(--e),color .3s,border-color .3s}
.btn::before{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--balai);border-radius:inherit;
  transform:translateY(102%);transition:transform .5s var(--e)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 32px -14px rgba(12,29,23,.55)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.12s}
.btn:focus-visible{border-radius:999px}
.btn-vert{--fond:var(--vert);--texte:var(--creme);--balai:var(--nuit)}
.btn-fantome{--fond:transparent;--texte:var(--creme);--balai:var(--creme);--bord:rgba(244,237,225,.4)}
.btn-fantome:hover,.btn-fantome:focus-visible{color:var(--nuit);border-color:var(--creme)}
.btn-ligne{--fond:transparent;--texte:var(--encre);--balai:var(--encre);--bord:var(--encre)}
.btn-ligne:hover,.btn-ligne:focus-visible{color:var(--creme)}
.btn-petit{min-height:44px;padding:0 20px;font-size:15px}
/* la flèche sort à droite, la suivante entre par la gauche */
.fl{position:relative;width:18px;height:18px;overflow:hidden;flex:none}
.fl svg{position:absolute;inset:0;width:18px;height:18px;transition:transform .45s var(--e)}
.fl svg+svg{transform:translateX(-150%)}
.btn:hover .fl svg:first-child,.btn:focus-visible .fl svg:first-child{transform:translateX(150%)}
.btn:hover .fl svg+svg,.btn:focus-visible .fl svg+svg{transform:none}
/* reflet qui passe de temps en temps sur l'appel principal */
.brille::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:reflet 5.5s var(--e2) 2s infinite}
@keyframes reflet{0%{left:-60%}22%,100%{left:130%}}
/* onde au clic */
.onde-clic{position:absolute;border-radius:50%;background:currentColor;opacity:.22;pointer-events:none;z-index:0;
  transform:translate(-50%,-50%) scale(0);animation:onde-clic .6s var(--e) forwards}
@keyframes onde-clic{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.lien{position:relative;text-decoration:none;font-weight:600}
.lien::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:currentColor;
  transform:scaleX(.25);transform-origin:left;transition:transform .45s var(--e)}
.lien:hover::after,.lien:focus-visible::after{transform:scaleX(1)}

/* ------------------------------------------------------- bandeau d'offre */
.annonce{position:relative;z-index:61;background:var(--moutarde);color:var(--encre);font-size:15px;text-align:center;
  padding:9px 16px;line-height:1.4}
.annonce b{font-weight:700}
.annonce a{font-weight:600;margin-left:10px;white-space:nowrap;text-underline-offset:3px}
.annonce .pt{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tomate);margin-right:10px;
  vertical-align:1px;animation:pouls 2s infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(224,71,43,.55)}70%{box-shadow:0 0 0 9px rgba(224,71,43,0)}100%{box-shadow:0 0 0 0 rgba(224,71,43,0)}}

/* ----------------------------------------------------------------- en-tête */
.entete{position:sticky;top:0;z-index:60;background:rgba(12,29,23,.86);color:var(--creme);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.entete.scrolle{border-color:var(--filet-n);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none}
.logo svg{width:38px;height:38px;overflow:visible}
.logo b{font-family:Gambarino,Georgia,serif;font-weight:400;font-size:28px;letter-spacing:-.01em;line-height:1}
.cloche-dome{transition:transform .55s var(--ressort)}
.logo:hover .cloche-dome,.logo:focus-visible .cloche-dome{transform:translateY(-3.5px)}
.nav>nav{margin-left:auto}
.menu{display:flex;align-items:center;gap:6px;list-style:none}
.menu>li{position:relative}
.menu a,.menu button.ouvre{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:999px;border:0;background:none;
  font-size:15.5px;font-weight:500;color:rgba(244,237,225,.82);text-decoration:none;cursor:pointer;transition:color .2s,background .2s}
.menu a:hover,.menu button.ouvre:hover,.menu button.ouvre[aria-expanded=true]{color:#fff;background:rgba(244,237,225,.08)}
.menu a[aria-current=page]{color:#fff}
.ouvre svg{width:14px;height:14px;transition:transform .4s var(--e)}
.ouvre[aria-expanded=true] svg{transform:rotate(180deg)}
.nav>.btn{flex:none}

/* menu déroulant des prestations */
.deroulant{position:absolute;top:calc(100% + 14px);left:-24px;width:500px;padding:10px;border-radius:22px;
  background:var(--papier);color:var(--encre);box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px rgba(12,29,23,.06);
  opacity:0;transform:translateY(-10px) scale(.98);transform-origin:20% 0;pointer-events:none;visibility:hidden;
  transition:opacity .25s,transform .45s var(--e),visibility 0s .45s}
.deroulant.ouvert{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .25s,transform .45s var(--e),visibility 0s}
.deroulant::before{content:"";position:absolute;top:-6px;left:64px;width:14px;height:14px;background:var(--papier);transform:rotate(45deg);border-radius:3px}
.presta{position:relative;display:grid;grid-template-columns:52px 1fr 20px;gap:16px;align-items:center;padding:14px;border-radius:16px;
  text-decoration:none;color:inherit;transition:background .25s}
.presta:hover,.presta:focus-visible{background:var(--creme)}
.presta .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--creme);color:var(--vert);transition:transform .4s var(--ressort)}
.presta:hover .ic{transform:rotate(-6deg) scale(1.06)}
.presta .ic svg{width:24px;height:24px}
.presta.phare .ic{background:var(--vert);color:var(--moutarde)}
.presta b{display:flex;align-items:center;gap:10px;font-size:16.5px;font-weight:650}
.presta span{display:block;font-size:14px;color:var(--gris);line-height:1.4;margin-top:2px}
.presta .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--moutarde);
  color:var(--encre);padding:3px 8px;border-radius:999px;margin:0}
.presta>svg{width:18px;height:18px;color:var(--vert-c);opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .4s var(--e)}
.presta:hover>svg,.presta:focus-visible>svg{opacity:1;transform:none}
.js .deroulant .presta{opacity:0;transform:translateY(8px);transition:background .25s,opacity .3s,transform .5s var(--e)}
.js .deroulant.ouvert .presta{opacity:1;transform:none}
.js .deroulant.ouvert .presta:nth-child(2){transition-delay:.05s}
.js .deroulant.ouvert .presta:nth-child(3){transition-delay:.1s}
.deroulant .pied{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding:14px 14px 8px;
  border-top:1px solid var(--filet);font-size:14px;color:var(--gris)}
.deroulant .pied a{color:var(--vert);font-weight:600}

/* menu mobile */
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--filet-n);background:none;cursor:pointer;
  position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;background:var(--creme);border-radius:2px;transition:transform .45s var(--e),opacity .2s}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:27px}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] i:nth-child(2){opacity:0}
.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.tiroir{position:fixed;inset:0;z-index:59;background:var(--nuit);color:var(--creme);padding:150px 20px 40px;overflow-y:auto;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--e),visibility 0s .6s}
.tiroir.ouvert{clip-path:inset(0);visibility:visible;transition:clip-path .6s var(--e),visibility 0s}
.tiroir .presta{color:var(--creme)}
.tiroir .presta .ic{background:var(--nuit-2);color:var(--moutarde)}
.tiroir .presta span{color:var(--sauge)}
.tiroir .presta:hover{background:var(--nuit-2)}
.tiroir .liens{list-style:none;margin:22px 0 28px;border-top:1px solid var(--filet-n)}
.tiroir .liens a{display:block;padding:16px 4px;border-bottom:1px solid var(--filet-n);font-family:Gambarino,serif;font-size:28px;text-decoration:none}
.tiroir .btn{width:100%}
.tiroir .titre{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--moutarde);font-weight:600;margin:0 4px 8px}

/* barre de lecture */
.lecture{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:var(--moutarde);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* -------------------------------------------------------------------- héros */
.heros{background:var(--nuit);color:var(--creme);padding:72px 0 120px;overflow:hidden}
.heros::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(900px 600px at 78% 28%,rgba(43,106,82,.5),transparent 62%),
             radial-gradient(700px 500px at 0% 100%,rgba(237,178,60,.09),transparent 60%);}
.heros .quadrillage{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(244,237,225,.05) 1px,transparent 1px);background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%);mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.heros .halo{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(237,178,60,.13),transparent 62%);transform:translate3d(var(--mx,70vw),var(--my,30vh),0);
  transition:transform .9s var(--e)}
.heros>.wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
.puce{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;border:1px solid var(--filet-n);
  background:rgba(244,237,225,.04);font-size:14px;color:var(--sauge);margin-bottom:28px}
.puce i{width:8px;height:8px;border-radius:50%;background:#55c08a;box-shadow:0 0 0 0 rgba(85,192,138,.6);animation:pouls-v 2.2s infinite}
@keyframes pouls-v{0%{box-shadow:0 0 0 0 rgba(85,192,138,.55)}70%{box-shadow:0 0 0 9px rgba(85,192,138,0)}100%{box-shadow:0 0 0 0 rgba(85,192,138,0)}}
.heros h1{font-family:Gambarino,Georgia,serif;font-weight:400;font-size:clamp(46px,6.6vw,92px);line-height:1;letter-spacing:-.02em}
.heros h1 .rot{color:var(--moutarde)}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
.js .heros .ln>span{transform:translateY(110%);transition:transform 1.1s var(--e)}
.js .heros.vu .ln>span{transform:none}
.js .heros.vu .ln:nth-child(2)>span{transition-delay:.12s}
.ln>.pile,.pile{display:grid}
.pile>span{grid-area:1/1;transition:transform .8s var(--e),opacity .5s}
.js .pile>span{transform:translateY(105%);opacity:0}
.js .pile>span.on{transform:none;opacity:1}
.js .pile>span.sort{transform:translateY(-105%);opacity:0}
.heros .chapo{font-size:20px;max-width:46ch;margin-top:28px;color:var(--sauge)}
.heros .chapo b{color:var(--creme);font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.rassure{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:34px;list-style:none;font-size:15px;color:var(--sauge)}
.rassure li{display:flex;align-items:center;gap:8px}
.rassure svg{width:18px;height:18px;color:var(--moutarde);flex:none}
.js .heros .apparait{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
.js .heros.vu .apparait{opacity:1;transform:none}
.js .heros.vu .apparait.a1{transition-delay:.3s}.js .heros.vu .apparait.a2{transition-delay:.42s}
.js .heros.vu .apparait.a3{transition-delay:.54s}.js .heros.vu .apparait.a4{transition-delay:.66s}

/* ----------------------------------------- la scène du héros (tout en em) */
.scene{container-type:inline-size;width:100%}
.boite{position:relative;font-size:min(16px,calc(100cqw / 32.5));width:32.5em;height:42em;margin:0 auto}
.assiette{position:absolute;left:4.4em;top:7.6em;width:28em;height:28em;border-radius:50%;
  border:1px solid rgba(244,237,225,.1);box-shadow:inset 0 0 0 2.6em rgba(244,237,225,.025),inset 0 0 0 2.7em rgba(244,237,225,.07)}
.assiette::after{content:"";position:absolute;inset:5.5em;border-radius:50%;border:1px dashed rgba(244,237,225,.1);animation:tourne 120s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.cote{position:absolute;left:18.375em;top:0;transform:translateX(-50%);display:flex;gap:.25em;padding:.3em;border-radius:999px;
  background:rgba(244,237,225,.08);border:1px solid var(--filet-n);z-index:3}
.cote button{border:0;background:transparent;color:var(--sauge);font:600 .82em/1 Switzer,sans-serif;padding:.75em 1.15em;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:background .35s var(--e),color .35s;min-height:34px}
.cote button[aria-pressed=true]{background:var(--moutarde);color:var(--encre)}
.tel{position:absolute;left:9em;top:3.6em;width:18.75em;height:37.75em;border-radius:2.9em;background:#060f0c;padding:.62em;z-index:2;
  box-shadow:0 3em 5em -2em rgba(0,0,0,.65),0 0 0 .12em #24382f inset,0 0 0 .06em rgba(255,255,255,.05)}
.ecran{position:relative;width:100%;height:100%;border-radius:2.3em;background:var(--papier);overflow:hidden;color:var(--encre)}
.ilot{position:absolute;top:.6em;left:50%;width:5.6em;height:1.55em;margin-left:-2.8em;border-radius:1em;background:#060f0c;z-index:6}
.vue{position:absolute;inset:0;padding:3.1em 1.15em 1.15em;display:flex;flex-direction:column;transition:transform .7s var(--e),opacity .5s}
.vue-resto{transform:translateX(100%);opacity:0;background:var(--papier)}
.boite[data-cote=resto] .vue-client{transform:translateX(-30%);opacity:0}
.boite[data-cote=resto] .vue-resto{transform:none;opacity:1}
.resto-nom{display:flex;align-items:center;gap:.5em;padding-bottom:.75em;border-bottom:1px solid var(--filet)}
.resto-nom i{width:2.1em;height:2.1em;border-radius:.6em;background:var(--vert);color:var(--moutarde);display:grid;place-items:center;
  font-family:Gambarino,serif;font-style:normal;font-size:1em;flex:none}
.resto-nom b{display:block;font-family:Gambarino,serif;font-weight:400;font-size:1.2em;line-height:1.1}
.resto-nom small{display:block;font-size:.66em;color:var(--gris)}
.phrase{font-size:1em;line-height:1.5;font-weight:500;margin:.9em 0 .4em;letter-spacing:-.01em}
.trou{display:inline-block;min-width:3.4em;padding:0 .25em;border-radius:.3em;background:#efe6d6;color:transparent;
  font-weight:700;text-align:center;transition:background .4s,color .3s;line-height:1.35}
.trou.plein{background:transparent;color:var(--vert);box-shadow:inset 0 -.14em 0 var(--moutarde)}
.rang{margin-top:.75em}
.rang small{display:block;font-size:.58em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);margin-bottom:.4em}
.puces{display:flex;gap:.35em}
.puces span,.creneaux span{position:relative;flex:1;border:1px solid var(--filet);border-radius:.6em;text-align:center;
  font-size:.74em;font-weight:600;padding:.55em 0;line-height:1.15;background:#fff;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ressort)}
.puces span em{display:block;font-style:normal;font-size:.8em;color:var(--gris);font-weight:500}
.puces.rond span{border-radius:50%;aspect-ratio:1;padding:0;display:grid;place-items:center;flex:none;width:2.6em}
.creneaux{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em}
.creneaux .complet{color:var(--gris-c);text-decoration:line-through;background:transparent}
.choisi{background:var(--vert)!important;border-color:var(--vert)!important;color:#fff!important}
.choisi em{color:rgba(255,255,255,.75)!important}
.tape{animation:tape .45s var(--ressort)}
@keyframes tape{40%{transform:scale(.88)}}
.doigt{position:absolute;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(12,29,23,.18);
  border:.12em solid rgba(12,29,23,.35);pointer-events:none;opacity:0;z-index:5;left:0;top:0}
.doigt.go{animation:doigt .6s ease forwards}
@keyframes doigt{0%{opacity:0;transform:scale(1.6)}35%{opacity:1;transform:scale(1)}60%{opacity:1;transform:scale(.8)}100%{opacity:0;transform:scale(1.2)}}
.valider{margin-top:auto;border-radius:999px;background:var(--encre);color:#fff;text-align:center;padding:.95em;font-weight:600;font-size:.84em;transition:transform .3s var(--ressort),background .3s}
.valider.tape{background:var(--vert)}
.succes{position:absolute;inset:3.1em 0 0;background:var(--papier);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 1.2em 2em;opacity:0;pointer-events:none;transition:opacity .4s}
.boite.reserve .succes{opacity:1}
.succes .rond{width:5em;height:5em;border-radius:50%;background:var(--vert);display:grid;place-items:center;transform:scale(0);transition:transform .55s var(--ressort) .1s}
.boite.reserve .succes .rond{transform:none}
.succes .rond svg{width:2.4em;height:2.4em;fill:none;stroke:var(--moutarde);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.succes path{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .5s var(--e) .45s}
.boite.reserve .succes path{stroke-dashoffset:0}
.succes h4{font-family:Gambarino,serif;font-weight:400;font-size:1.65em;margin:.7em 0 .25em}
.succes p{font-size:.74em;color:var(--gris)}
.succes .recap{margin-top:1em;padding:.7em 1em;border-radius:.8em;background:var(--creme);font-weight:600;font-size:.74em}
/* côté restaurant */
.jour{display:flex;justify-content:space-between;font-size:.6em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.couverts{display:flex;align-items:baseline;gap:.35em;margin:.25em 0 .4em}
.couverts b{font-family:Gambarino,serif;font-weight:400;font-size:3.6em;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.couverts span{font-size:.78em;color:var(--gris);font-weight:500}
.jauge{height:.42em;border-radius:1em;background:var(--creme);overflow:hidden}
.jauge i{display:block;height:100%;width:63%;border-radius:1em;background:var(--vert);transition:width 1s var(--e)}
.boite.ajout .jauge i{width:70%}
.jauge-l{display:flex;justify-content:space-between;font-size:.6em;color:var(--gris);margin:.35em 0 .7em;font-weight:500}
.liste-r{position:relative;border-top:1px solid var(--filet)}
.ligne{display:grid;grid-template-columns:2.9em 1fr auto;gap:.5em;align-items:center;height:3.05em;border-bottom:1px solid var(--filet);font-size:.82em;padding:0 .2em}
.ligne b{font-variant-numeric:tabular-nums;font-size:.95em}
.ligne span{font-weight:600;line-height:1.2}
.ligne span small{display:block;font-weight:500;font-size:.8em;color:var(--gris)}
.ligne i{font-style:normal;font-size:.66em;font-weight:700;padding:.3em .55em;border-radius:999px;background:var(--creme);color:var(--vert)}
.ligne.neuve{height:0;opacity:0;overflow:hidden;border-bottom-width:0;transition:height .55s var(--e),opacity .4s .15s,background 1.6s}
.boite.ajout .ligne.neuve{height:3.05em;opacity:1;border-bottom-width:1px;background:rgba(237,178,60,.22)}
.boite.ajout.calme .ligne.neuve{background:transparent}
.notif{position:absolute;left:.55em;right:.55em;top:2.55em;z-index:7;display:flex;gap:.65em;align-items:center;padding:.7em .8em;border-radius:1.15em;
  background:rgba(12,29,23,.95);color:#fff;box-shadow:0 1em 2em -1em rgba(0,0,0,.55);
  transform:translateY(-140%);opacity:0;transition:transform .6s var(--ressort),opacity .3s}
.boite.notifie .notif{transform:none;opacity:1}
.notif .ic{width:2.3em;height:2.3em;border-radius:.65em;background:var(--moutarde);display:grid;place-items:center;flex:none}
.notif .ic svg{width:1.6em;height:1.6em}
.notif b{display:block;font-size:.76em}
.notif span{display:block;font-size:.7em;opacity:.78}
.notif em{margin-left:auto;align-self:flex-start;font-style:normal;font-size:.6em;opacity:.6}
/* tampon 30 jours */
.tampon{position:absolute;left:23.6em;top:5.4em;width:8.4em;height:8.4em;z-index:4;border-radius:50%;background:var(--moutarde);color:var(--encre);
  display:grid;place-items:center;box-shadow:0 1.2em 2.4em -1em rgba(0,0,0,.5);transition:transform .5s var(--ressort)}
.tampon:hover{transform:scale(1.06) rotate(-4deg)}
.tampon svg{position:absolute;inset:0;width:100%;height:100%;animation:tourne 22s linear infinite}
.tampon text{font:700 8.3px Switzer,sans-serif;letter-spacing:.6px;fill:var(--encre);text-transform:uppercase}
.tampon .c{text-align:center;line-height:1}
.tampon .c b{display:block;font-family:Gambarino,serif;font-weight:400;font-size:2.5em;letter-spacing:-.03em}
.tampon .c span{display:block;font-size:.62em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-top:.15em}
/* carte flottante */
.flotte{position:absolute;left:0;top:27.5em;width:13em;z-index:3;display:flex;gap:.7em;align-items:center;padding:.85em .95em;border-radius:1.1em;
  background:var(--papier);color:var(--encre);box-shadow:0 1.6em 3em -1.4em rgba(0,0,0,.6)}
.flotte .ic{width:2.5em;height:2.5em;border-radius:.75em;background:var(--creme);color:var(--vert);display:grid;place-items:center;flex:none}
.flotte .ic svg{width:1.3em;height:1.3em}
.flotte-txt{display:grid}
.flotte-txt>div{grid-area:1/1;transition:opacity .4s,transform .5s var(--e)}
.flotte b{display:block;font-size:.84em;line-height:1.25}
.flotte span{display:block;font-size:.72em;color:var(--gris);line-height:1.3}
.flotte .f-resto{opacity:0;transform:translateY(.6em)}
.boite[data-cote=resto] .f-client{opacity:0;transform:translateY(-.6em)}
.boite[data-cote=resto] .f-resto{opacity:1;transform:none}
/* petits écrans : on garde le téléphone lisible, on resserre le décor */
@container (max-width:480px){
  .boite{width:24em;font-size:min(16px,calc(100cqw / 24))}
  .assiette{left:-2em}
  .tel{left:2.6em}
  .cote{left:11.975em}
  .tampon{left:16.4em;top:4.8em;width:7.2em;height:7.2em}
  .flotte{display:none}
}


/* ------------------------------------------------------------ le constat */
.constat .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.journal{background:#fff;border-radius:28px;overflow:hidden;padding:10px 0 6px;box-shadow:0 40px 80px -40px rgba(12,29,23,.35),0 0 0 1px var(--filet)}
.journal .h{display:flex;justify-content:space-between;align-items:center;padding:14px 26px 12px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.journal .h b{display:inline-flex;align-items:center;gap:8px;color:var(--tomate-f);letter-spacing:.04em;text-transform:none;font-size:15px}
.journal .h b i{width:22px;height:22px;border-radius:50%;background:var(--tomate-f);color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.appel{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:18px 26px;border-top:1px solid var(--filet)}
.appel .ic{width:44px;height:44px;border-radius:50%;background:#fbe6e1;color:var(--tomate-f);display:grid;place-items:center}
.appel .ic svg{width:20px;height:20px}
.appel b{display:block;font-size:17px;font-weight:650;color:var(--tomate-f)}
.appel span{font-size:15px;color:var(--gris)}
.appel time{font-family:Gambarino,serif;font-size:28px;line-height:1;color:var(--encre)}
.js .journal .appel{opacity:0;transform:translateX(30px);transition:opacity .7s var(--e),transform .8s var(--e)}
.js .journal.in .appel{opacity:1;transform:none}
.js .journal.in .appel:nth-of-type(2){transition-delay:.25s}
.js .journal.in .appel:nth-of-type(3){transition-delay:.5s}
.chute{margin-top:40px;padding:28px 30px;border-radius:22px;background:var(--vert);color:var(--creme);display:flex;gap:22px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.chute p{font-size:20px;max-width:34ch;line-height:1.45}
.chute p b{color:var(--moutarde);font-weight:600}

/* ----------------------------------------------------------------- vidéo */
.film{padding:110px 0}
.cadre-video{position:relative;border-radius:28px;overflow:hidden;background:#000;aspect-ratio:16/9;
  box-shadow:0 60px 120px -50px rgba(0,0,0,.8),0 0 0 1px var(--filet-n)}
.cadre-video video{width:100%;height:100%;object-fit:cover}
.lecture-btn{position:absolute;inset:0;display:grid;place-items:center;border:0;background:rgba(12,29,23,.25);cursor:pointer;transition:background .4s,opacity .4s}
.lecture-btn span{position:relative;width:96px;height:96px;border-radius:50%;background:var(--moutarde);color:var(--encre);display:grid;place-items:center;
  transition:transform .5s var(--ressort)}
.lecture-btn span::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--moutarde);opacity:.6;animation:anneau 2.2s var(--e) infinite}
@keyframes anneau{from{transform:scale(.85);opacity:.7}to{transform:scale(1.35);opacity:0}}
.lecture-btn svg{width:34px;height:34px;margin-left:5px}
.lecture-btn:hover span{transform:scale(1.08)}
.cadre-video.joue .lecture-btn{opacity:0;pointer-events:none}
.film .tete{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap}
.film .tete .chapo{margin-top:0;max-width:40ch}

/* ------------------------------------------------- comment ça marche (fil) */
.etapes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fil{position:absolute;left:0;right:0;top:34px;height:2px;background:var(--filet);overflow:hidden}
.fil i{display:block;height:100%;background:var(--vert-c);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e2)}
.etapes.in .fil i{transform:none}
.etape{position:relative;padding-top:0}
.etape .n{position:relative;z-index:1;width:70px;height:70px;border-radius:50%;background:var(--papier);border:2px solid var(--filet);
  display:grid;place-items:center;font-family:Gambarino,serif;font-size:30px;color:var(--vert);transition:background .5s,border-color .5s,color .5s}
.etapes.in .etape .n{background:var(--vert);border-color:var(--vert);color:var(--moutarde)}
.etapes.in .etape:nth-child(3) .n{transition-delay:.5s}.etapes.in .etape:nth-child(4) .n{transition-delay:1s}
.etape h3{font-size:23px;font-weight:650;letter-spacing:-.01em;margin:26px 0 10px}
.etape p{color:var(--gris);font-size:16.5px;max-width:34ch}
.etape ul{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.etape li{font-size:13px;font-weight:600;background:var(--creme);border-radius:999px;padding:6px 12px}

/* ------------------------------------------------------------- bento */
.fonc{background:var(--creme)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(250px,auto);gap:18px}
.tuile{position:relative;overflow:hidden;background:var(--papier);border-radius:24px;padding:30px;border:1px solid var(--filet);
  display:flex;flex-direction:column;transition:transform .5s var(--e),box-shadow .5s var(--e)}
.tuile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -36px rgba(12,29,23,.45)}
.tuile h3{font-size:20px;font-weight:650;letter-spacing:-.01em;line-height:1.25}
.tuile p{font-size:15.5px;color:var(--gris);margin-top:8px;line-height:1.5}
.tuile .mini{margin-top:auto;padding-top:22px}
.t-grande{grid-column:span 2;grid-row:span 2;background:var(--vert);color:var(--creme);border-color:var(--vert)}
.t-grande p{color:var(--sauge)}
.t-grande h3{font-family:Gambarino,serif;font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1.08}
.t-large{grid-column:span 2}
.t-sombre{background:var(--nuit);color:var(--creme);border-color:var(--nuit)}
.t-sombre p{color:var(--sauge)}
/* mini widget qui change de couleurs */
.themes{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.widget{--w-f:#fff;--w-a:#7a2e1f;--w-t:#2a1a14;width:min(270px,100%);border-radius:18px;background:var(--w-f);color:var(--w-t);padding:18px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transition:background .6s,color .6s}
.widget .wn{font-family:Gambarino,serif;font-size:22px;display:flex;align-items:center;gap:8px;transition:color .6s}
.widget .wn i{width:10px;height:10px;border-radius:50%;background:var(--w-a);transition:background .6s}
.widget .wp{font-size:14px;margin:10px 0 12px;line-height:1.45}
.widget .wp u{text-decoration:none;font-weight:700;color:var(--w-a);border-bottom:2px solid var(--w-a);transition:color .6s,border-color .6s}
.widget .wh{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.widget .wh span{font-size:12px;font-weight:600;text-align:center;padding:7px 0;border-radius:8px;border:1px solid rgba(0,0,0,.1)}
.widget .wh .on{background:var(--w-a);color:#fff;border-color:var(--w-a);transition:background .6s}
.widget .wb{margin-top:12px;border-radius:999px;background:var(--w-a);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:10px;transition:background .6s}
.nuancier{display:flex;gap:8px}
.nuancier button{width:30px;height:30px;border-radius:50%;border:2px solid rgba(244,237,225,.3);cursor:pointer;transition:transform .3s var(--ressort),border-color .3s}
.nuancier button[aria-pressed=true]{border-color:var(--creme);transform:scale(1.15)}
.nuancier button:hover{transform:scale(1.12)}
.nuancier small{display:block;font-size:12px;color:var(--sauge);margin-bottom:8px;width:100%}
/* mini éléments */
.mail{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 18px 40px -24px rgba(12,29,23,.5);border:1px solid var(--filet);font-size:13.5px}
.mail .de{display:flex;justify-content:space-between;color:var(--gris);font-size:12px;margin-bottom:6px}
.mail b{display:block;font-size:14.5px}
.cloche-ic{display:inline-block;transform-origin:50% 10%}
.tuile:hover .cloche-ic{animation:sonne .9s var(--e)}
@keyframes sonne{20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.lien-annul{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--filet);border-radius:999px;padding:10px 16px;font-size:14px;font-weight:600}
.lien-annul i{width:22px;height:22px;border-radius:50%;background:var(--creme);display:grid;place-items:center;transition:background .4s,transform .5s var(--ressort)}
.lien-annul i svg{width:12px;height:12px}
.tuile:hover .lien-annul i{background:var(--tomate-f);color:#fff;transform:rotate(90deg)}
.jauge-g{height:12px;border-radius:99px;background:rgba(244,237,225,.12);overflow:hidden}
.jauge-g i{display:block;height:100%;width:0;background:var(--moutarde);border-radius:99px;transition:width 1.6s var(--e)}
.tuile.in .jauge-g i{width:84%}
.jauge-gl{display:flex;justify-content:space-between;font-size:13px;color:var(--sauge);margin-top:8px}
.jauge-gl b{color:var(--creme);font-size:22px;font-family:Gambarino,serif;font-weight:400}
.cadence{display:flex;align-items:flex-end;gap:6px;height:74px}
.cadence i{flex:1;border-radius:6px 6px 2px 2px;background:var(--creme);height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--e)}
.cadence i.max{background:var(--vert-c)}
.tuile.in .cadence i{transform:none}
.tuile.in .cadence i:nth-child(2){transition-delay:.06s}.tuile.in .cadence i:nth-child(3){transition-delay:.12s}
.tuile.in .cadence i:nth-child(4){transition-delay:.18s}.tuile.in .cadence i:nth-child(5){transition-delay:.24s}
.tuile.in .cadence i:nth-child(6){transition-delay:.3s}.tuile.in .cadence i:nth-child(7){transition-delay:.36s}
.cadence-l{display:flex;justify-content:space-between;font-size:12px;color:var(--gris);margin-top:6px}
.ajout-btn{display:inline-flex;align-items:center;gap:10px;border-radius:12px;background:var(--vert);color:var(--creme);padding:12px 16px;font-size:14px;font-weight:600}
.ajout-btn svg{width:16px;height:16px;transition:transform .5s var(--ressort)}
.tuile:hover .ajout-btn svg{transform:rotate(90deg)}
.semaine{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.semaine span{font-size:12px;font-weight:600;padding:9px 0;border-radius:9px;background:#fff;border:1px solid var(--filet)}
.semaine .ferme{background:transparent;color:var(--gris-c);text-decoration:line-through;border-style:dashed}

/* ---------------------------------------------------------- comparatif */
.face{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.colonne{border-radius:26px;padding:34px 34px 30px}
.colonne h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:22px;display:flex;align-items:center;gap:10px}
.colonne ul{list-style:none;display:grid;gap:4px}
.colonne li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:12px 0;border-top:1px solid;font-size:16.5px}
.colonne li small{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;opacity:.7;margin-bottom:2px}
.colonne li svg{width:22px;height:22px;margin-top:14px}
.c-eux{background:var(--creme);color:var(--gris)}
.c-eux li{border-color:var(--filet)}
.c-eux li small{opacity:1}
.c-eux li svg{color:var(--gris-c)}
.c-nous{background:var(--vert);color:var(--creme)}
.c-nous h3{color:var(--moutarde)}
.c-nous li{border-color:var(--filet-n);font-weight:500}
.c-nous li svg{color:var(--moutarde)}
.c-nous h3 svg{width:28px;height:28px}

/* ----------------------------------------------------------------- moi */
.moi{overflow:hidden}
.moi>.wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
.moi h2{max-width:13ch}
.moi .texte p{font-size:19px;color:var(--sauge);margin-top:22px;max-width:52ch}
.moi .texte p b{color:var(--creme);font-weight:600}
.signe{display:flex;align-items:center;gap:16px;margin-top:34px}
.signe .av{width:60px;height:60px;border-radius:50%;background:var(--moutarde);color:var(--encre);display:grid;place-items:center;
  font-family:Gambarino,serif;font-size:28px;flex:none}
.signe b{display:block;font-family:Gambarino,serif;font-weight:400;font-size:26px;line-height:1.1}
.signe span{font-size:14.5px;color:var(--sauge)}
.promesses{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:80px;list-style:none;grid-column:1/-1}
.promesses li{border-top:1px solid var(--filet-n);padding-top:22px}
.promesses .ic{width:46px;height:46px;border-radius:14px;background:var(--nuit-2);color:var(--moutarde);display:grid;place-items:center;border:1px solid var(--filet-n)}
.promesses .ic svg{width:22px;height:22px}
.promesses b{display:block;font-size:18px;margin:16px 0 6px;font-weight:650}
.promesses span{font-size:15.5px;color:var(--sauge);display:block;line-height:1.5}
/* carte de visite qui se retourne */
.cv-zone{perspective:1400px;display:grid;place-items:center;gap:22px}
.cv{position:relative;width:min(440px,100%);aspect-ratio:85/55;transform-style:preserve-3d;cursor:pointer;border:0;background:none;padding:0;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--e)}
.cv-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s var(--e)}
.cv.retourne .cv-in{transform:rotateY(180deg)}
.cv-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 40px 70px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06)}
.cv-recto{background:var(--vert);color:var(--creme);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.cv-recto::before{content:"";position:absolute;inset:12px;border:1px solid rgba(237,178,60,.35);border-radius:9px}
.cv-recto svg{width:22%;height:auto}
.cv-recto b{font-family:Gambarino,serif;font-weight:400;font-size:clamp(28px,4.4vw,40px);line-height:1;letter-spacing:-.01em}
.cv-recto small{font-size:clamp(8px,1.1vw,10.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--sauge);font-weight:600}
.cv-verso{background:var(--creme);color:var(--encre);transform:rotateY(180deg);padding:9% 9%;display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.cv-verso .nom{font-family:Gambarino,serif;font-size:clamp(26px,4vw,36px);line-height:1}
.cv-verso .role{font-size:clamp(9px,1.2vw,12px);letter-spacing:.2em;text-transform:uppercase;color:var(--vert-c);font-weight:700;margin-top:6px}
.cv-verso .co{display:grid;gap:3px;font-size:clamp(11px,1.5vw,14px)}
.cv-verso .co span{display:flex;align-items:center;gap:8px}
.cv-verso .co svg{width:14px;height:14px;color:var(--vert-c)}
.cv-verso .marque{position:absolute;right:9%;top:9%;width:13%;color:var(--vert)}
.cv-verso .web{position:absolute;right:9%;bottom:15.3%;width:21%;display:grid;justify-items:center;gap:6px}
.cv-verso .qr{display:block;width:100%;height:auto;aspect-ratio:1;padding:10%;color:var(--encre);background:#fff;border:1.5px solid var(--vert-c);border-radius:6px;shape-rendering:crispEdges}
.cv-verso .web span{display:flex;align-items:center;gap:4px;font-size:clamp(8px,1.1vw,11px);font-weight:600;color:var(--vert-c)}
.cv-verso .web span svg{width:12px;height:12px}
.cv-aide{font-size:14px;color:var(--sauge);display:flex;align-items:center;gap:8px}
.cv-aide svg{width:16px;height:16px}

/* ------------------------------------------------------- autres prestations */
.services{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.service{position:relative;display:flex;flex-direction:column;border-radius:30px;padding:40px 40px 0;text-decoration:none;overflow:hidden;min-height:560px;
  transition:transform .6s var(--e),box-shadow .6s var(--e)}
.service:hover{transform:translateY(-6px);box-shadow:0 50px 90px -50px rgba(12,29,23,.6)}
.service.s-site{background:var(--creme);color:var(--encre);border:1px solid var(--filet)}
.service.s-cc{background:var(--vert);color:var(--creme)}
.service .num{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.65}
.service h3{font-family:Gambarino,serif;font-weight:400;font-size:clamp(36px,4vw,52px);line-height:1.02;margin:14px 0 12px}
.service p{font-size:17px;max-width:38ch;opacity:.85}
.service .bas{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.service .px{font-size:15px;opacity:.85}
.service .px b{font-family:Gambarino,serif;font-weight:400;font-size:30px;opacity:1}
.service .go{display:inline-flex;align-items:center;gap:10px;font-weight:650;font-size:16px}
.service .go i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--encre);color:var(--creme);transition:transform .5s var(--ressort),background .3s}
.service.s-cc .go i{background:var(--moutarde);color:var(--encre)}
.service .go svg{width:18px;height:18px}
.service:hover .go i{transform:rotate(-45deg) scale(1.08)}
.service .vis{position:relative;margin-top:auto;height:270px;padding-top:30px}
/* mini navigateur */
.nav-mini{position:absolute;left:0;right:-40px;bottom:-1px;top:30px;border-radius:16px 0 0 0;background:#fff;overflow:hidden;
  box-shadow:0 -10px 50px -20px rgba(12,29,23,.35);border:1px solid var(--filet);border-right:0;border-bottom:0;transition:transform .7s var(--e)}
.service:hover .nav-mini{transform:translateY(-12px)}
.nav-mini .barre{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid var(--filet);background:var(--papier)}
.nav-mini .barre i{width:9px;height:9px;border-radius:50%;background:var(--filet)}
.nav-mini .barre span{margin-left:12px;font-size:11.5px;color:var(--gris);background:#fff;border:1px solid var(--filet);border-radius:999px;padding:2px 12px}
.nav-mini .page{display:block;position:relative;height:calc(100% - 34px);overflow:hidden}
.nav-mini .defil{transition:transform 2.6s var(--e2)}
.service:hover .nav-mini .defil{transform:translateY(-38%)}
.nav-mini .h{position:relative;height:200px;background:#2c1810 center/cover;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:20px}
.nav-mini .h::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,10,6,.85),rgba(20,10,6,.1))}
.nav-mini .h b,.nav-mini .h span{position:relative}
.nav-mini .h b{font-family:Georgia,serif;font-size:30px;font-weight:400;font-style:italic}
.nav-mini .h span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.nav-mini .h em{position:relative;display:inline-block;margin-top:10px;align-self:flex-start;font-style:normal;font-size:11px;font-weight:700;background:#c0513a;padding:7px 12px;border-radius:999px}
.nav-mini .c{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.nav-mini .c i{height:70px;border-radius:8px;background:#e8d5b5 center/cover}
.nav-mini .c .lg{display:block;grid-column:1/-1;font-size:12px;color:var(--gris);margin:0}
/* mini commande */
.cmd-mini{position:absolute;left:50%;bottom:-40px;width:270px;margin-left:-135px;top:30px;border-radius:30px 30px 0 0;background:#060f0c;padding:9px 9px 0;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.6);transition:transform .7s var(--e)}
.service:hover .cmd-mini{transform:translateY(-14px)}
.cmd-mini .ecr{height:100%;border-radius:22px 22px 0 0;background:#faf5ec;color:#2c1810;padding:16px 14px;overflow:hidden}
.cmd-mini .t{font-family:Georgia,serif;font-style:italic;font-size:18px;color:#9b3e2b}
.cmd-mini .s{font-size:11px;color:#7a6a5c;margin-bottom:10px}
.plat{display:grid;grid-template-columns:46px 1fr 28px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #eadfcd}
.plat i{width:46px;height:46px;border-radius:10px;background:#e8d5b5 center/cover}
.plat b{display:block;font-size:12.5px;line-height:1.2}
.plat span{font-size:11.5px;color:#7a6a5c}
.plat u{width:28px;height:28px;border-radius:50%;background:#c0513a;color:#fff;display:grid;place-items:center;text-decoration:none;font-weight:700;font-size:16px;transition:transform .4s var(--ressort)}
.service:hover .plat:first-of-type u{transform:scale(1.15) rotate(90deg)}
.panier-mini{margin-top:10px;border-radius:12px;background:#9b3e2b;color:#fff;display:flex;justify-content:space-between;padding:10px 12px;font-size:12px;font-weight:600}

/* ------------------------------------------------------------------- tarifs */
.tarifs{background:var(--papier)}
.offert{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;padding:30px 40px;border-radius:28px;
  background:var(--moutarde);color:var(--encre);margin-bottom:28px;overflow:hidden}
.offert::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;border:2px dashed rgba(12,29,23,.18);animation:tourne 60s linear infinite}
.offert .gros{font-family:Gambarino,serif;font-size:clamp(70px,9vw,120px);line-height:.8;letter-spacing:-.04em}
.offert .gros small{display:block;font-family:Switzer,sans-serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-top:10px}
.offert h3{font-family:Gambarino,serif;font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.offert p{font-size:16.5px;margin-top:6px;max-width:52ch}
.offert .btn{--fond:var(--nuit);--texte:var(--creme);--balai:var(--vert);position:relative;z-index:1}
.lancement{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:16px 22px;border-radius:16px;
  background:var(--creme);font-size:15px;margin-bottom:40px}
.lancement b{font-weight:700}
.lancement .barre{flex:1;min-width:160px;max-width:300px;height:8px;border-radius:99px;background:var(--papier);overflow:hidden;border:1px solid var(--filet)}
.lancement .barre i{display:block;height:100%;width:0;background:var(--tomate);border-radius:99px;transition:width 1.4s var(--e)}
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.offre{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--filet);border-radius:26px;padding:36px 30px 30px;
  transition:transform .5s var(--e),box-shadow .5s var(--e)}
.offre:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(12,29,23,.45)}
.offre.vedette{background:var(--nuit);color:var(--creme);border-color:var(--nuit)}
.offre .etiq{position:absolute;top:-13px;left:30px;background:var(--vert);color:var(--creme);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:6px 12px;border-radius:999px}
.offre.vedette .etiq{background:var(--moutarde);color:var(--encre)}
.offre h3{font-size:22px;font-weight:650}
.offre .desc{font-size:15px;color:var(--gris);margin-top:6px;min-height:46px}
.offre.vedette .desc{color:var(--sauge)}
.prix{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:24px 0 2px}
.prix .m{font-family:Gambarino,serif;font-size:66px;line-height:1;letter-spacing:-.03em}
.prix .u{font-size:15px;color:var(--gris)}
.offre.vedette .prix .u{color:var(--sauge)}
.prix s{font-size:21px;color:var(--gris);text-decoration-thickness:2px;text-decoration-color:var(--tomate)}
.offre.vedette .prix s{color:var(--sauge)}
.prix-note{font-size:13.5px;font-weight:600;color:var(--tomate-f);min-height:21px}
.offre.vedette .prix-note{color:var(--moutarde)}
.essai{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:6px 12px;border-radius:999px;background:var(--creme);
  font-size:13px;font-weight:700;color:var(--vert)}
.offre.vedette .essai{background:rgba(237,178,60,.16);color:var(--moutarde)}
.essai svg{width:15px;height:15px}
.offre ul{list-style:none;margin:22px 0 28px;display:grid;gap:11px;font-size:15.5px}
.offre li{display:grid;grid-template-columns:20px 1fr;gap:10px;line-height:1.45}
.offre li svg{width:18px;height:18px;margin-top:2px;color:var(--vert-c)}
.offre.vedette li svg{color:var(--moutarde)}
.offre li.plus{font-weight:650}
.offre .btn{margin-top:auto;width:100%}
.alacarte{margin-top:20px;display:grid;grid-template-columns:auto 1fr 1fr;border:1px solid var(--filet);border-radius:24px;overflow:hidden;background:#fff}
.alacarte .t{padding:24px 30px;background:var(--creme);display:flex;flex-direction:column;justify-content:center}
.alacarte .t b{font-size:17px}
.alacarte .t span{font-size:14px;color:var(--gris)}
.alacarte a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 30px;border-left:1px solid var(--filet);text-decoration:none;transition:background .3s}
.alacarte a:hover{background:var(--papier)}
.alacarte a b{display:block;font-size:17px}
.alacarte a span{font-size:14px;color:var(--gris)}
.alacarte .p{font-family:Gambarino,serif;font-size:34px;white-space:nowrap}
.alacarte .p small{font-family:Switzer,sans-serif;font-size:14px;color:var(--gris)}
.notes{margin-top:24px;text-align:center;font-size:14.5px;color:var(--gris)}
.sans-lancement [data-lancement-seul]{display:none!important}

/* ------------------------------------------------------------------- FAQ */
.faq{background:var(--creme)}
.faq>.wrap{display:grid;grid-template-columns:.9fr 1.3fr;gap:72px;align-items:start}
.questions{border-top:1px solid var(--gris-c)}
details{border-bottom:1px solid var(--gris-c)}
summary{list-style:none;cursor:pointer;padding:24px 56px 24px 0;font-size:19px;font-weight:600;position:relative;transition:color .2s}
summary:hover{color:var(--vert-c)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;border:1.5px solid var(--gris-c);
  background:linear-gradient(var(--encre),var(--encre)) center/12px 2px no-repeat,linear-gradient(var(--encre),var(--encre)) center/2px 12px no-repeat;
  transition:transform .45s var(--e),background-color .3s,border-color .3s}
details[open] summary::after{transform:rotate(135deg);background-color:var(--moutarde);border-color:var(--moutarde)}
details p{padding:0 50px 26px 0;color:var(--gris);font-size:16.5px;max-width:62ch}
.faq .aside .btn{margin-top:30px}

/* ---------------------------------------------------------------- contact */
.contact>.wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.contact h2{max-width:14ch}
.direct{margin-top:34px;display:grid;gap:14px;font-size:17px}
.direct a{display:inline-flex;align-items:center;gap:14px;text-decoration:none;color:var(--creme)}
.direct a i{width:46px;height:46px;border-radius:50%;background:var(--nuit-2);border:1px solid var(--filet-n);display:grid;place-items:center;color:var(--moutarde);transition:transform .4s var(--ressort)}
.direct a:hover i{transform:rotate(-10deg) scale(1.08)}
.direct svg{width:20px;height:20px}
form.demande{background:var(--papier);color:var(--encre);border-radius:28px;padding:38px 36px;display:grid;gap:18px;box-shadow:0 50px 100px -50px rgba(0,0,0,.8)}
form .deux{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:7px;font-size:14.5px;font-weight:600}
input,select{font:16px Switzer,sans-serif;min-height:52px;padding:0 15px;border:1.5px solid var(--filet);border-radius:14px;background:#fff;color:var(--encre);width:100%;
  transition:border-color .2s,box-shadow .2s}
input:hover,select:hover{border-color:var(--gris-c)}
input:focus,select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 4px rgba(237,178,60,.45)}
input.erreur{border-color:var(--tomate-f);animation:secoue .4s}
@keyframes secoue{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
form .btn{width:100%;margin-top:6px}
form small{font-size:13px;color:var(--gris);text-align:center}
form .piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .echec{margin:0;font-size:14.5px;color:var(--tomate-f);text-align:center}
form .echec a{color:inherit}
form .btn:disabled{opacity:.6;cursor:wait}
.merci{display:none;text-align:center;padding:30px 0}
.merci .rond{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:var(--vert);display:grid;place-items:center}
.merci svg{width:34px;height:34px;color:var(--moutarde)}
.merci b{font-size:22px;display:block;margin-bottom:6px}
form.envoye>:not(.merci){display:none}
form.envoye .merci{display:block;animation:monte .6s var(--e)}
@keyframes monte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ pied de page */
.pied-page{background:var(--nuit);color:var(--sauge);padding:90px 0 40px;font-size:15px;border-top:1px solid var(--filet-n)}
.pied-page .grand{font-family:Gambarino,serif;color:var(--creme);font-size:clamp(56px,11vw,170px);line-height:.85;letter-spacing:-.04em;margin-bottom:60px;
  display:flex;align-items:center;gap:.18em}
.pied-page .grand svg{width:.62em;height:.62em;flex:none;overflow:visible}
.pied-page .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid var(--filet-n)}
.pied-page h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--moutarde);font-weight:700;margin-bottom:16px}
.pied-page ul{list-style:none;display:grid;gap:10px}
.pied-page a{text-decoration:none;transition:color .2s}
.pied-page a:hover{color:var(--creme)}
.pied-page .bas{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;font-size:14px}

/* barre d'action mobile */
.barre-m{display:none}

/* ------------------------------------------------ pages des prestations */
.heros-p{padding:80px 0 0}
.heros-p>.wrap{display:block;text-align:center}
.heros-p h1{max-width:15ch;margin:0 auto}
.heros-p .chapo{margin-left:auto;margin-right:auto;max-width:54ch}
.heros-p .actions,.heros-p .rassure{justify-content:center}
.fil-ariane{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--sauge);margin-bottom:26px}
.fil-ariane a{text-decoration:none}
.fil-ariane a:hover{color:var(--creme)}
.fil-ariane svg{width:14px;height:14px}
.vitrine{position:relative;margin:70px auto 0;max-width:1100px;height:clamp(300px,52vw,600px)}
.navigateur{position:absolute;left:0;right:9%;top:0;bottom:0;border-radius:18px 18px 0 0;background:#fff;overflow:hidden;
  box-shadow:0 -30px 90px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08)}
.navigateur .barre{display:flex;align-items:center;gap:7px;height:42px;padding:0 16px;background:#f1ece3;border-bottom:1px solid var(--filet)}
.navigateur .barre i{width:11px;height:11px;border-radius:50%;background:#dcd3c4}
.navigateur .barre i:first-child{background:#e2725b}.navigateur .barre i:nth-child(2){background:#e9b949}.navigateur .barre i:nth-child(3){background:#6bb77b}
.navigateur .barre span{margin:0 auto;font-size:13px;color:var(--gris);background:#fff;border-radius:8px;padding:4px 40px;display:flex;align-items:center;gap:6px}
.navigateur .barre span svg{width:12px;height:12px}
.cadre-site{position:relative;height:calc(100% - 42px);overflow:hidden;background:var(--creme)}
.cadre-site iframe{max-width:none;position:absolute;left:0;top:0;border:0;transform-origin:0 0;background:#fff}
.portable{position:absolute;right:0;bottom:-30px;width:clamp(150px,22%,240px);aspect-ratio:9/19;border-radius:34px;background:#060f0c;padding:8px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);z-index:2}
.portable .cadre-site{height:100%;border-radius:27px}
.vitrine .etiquette,.realisation .etiquette{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:var(--moutarde);color:var(--encre);font-size:13px;font-weight:700}
.realisation{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center;padding:70px 0;border-top:1px solid var(--filet)}
.realisation:nth-of-type(even){grid-template-columns:.75fr 1.25fr}
.realisation:nth-of-type(even) .ecrans{order:2}
.ecrans{position:relative;padding:0 8% 40px 0}
.ecrans .navigateur{position:relative;inset:auto;height:auto;aspect-ratio:16/10.6;border-radius:16px;box-shadow:0 40px 80px -40px rgba(12,29,23,.55),0 0 0 1px var(--filet)}
.ecrans .portable{bottom:0;width:26%}
.realisation h3{font-family:Gambarino,serif;font-weight:400;font-size:clamp(34px,3.6vw,48px);line-height:1.04}
.realisation .lieu{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--vert-c);margin-bottom:12px}
.realisation p{color:var(--gris);margin-top:14px;font-size:16.5px}
.realisation .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;list-style:none}
.realisation .tags li{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--creme)}
.realisation .btn{margin-top:26px}
.compris{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.compris li{list-style:none;background:var(--papier);border:1px solid var(--filet);border-radius:22px;padding:28px;transition:transform .5s var(--e),border-color .3s}
.compris li:hover{transform:translateY(-4px);border-color:var(--gris-c)}
.compris .ic{width:50px;height:50px;border-radius:15px;background:var(--vert);color:var(--moutarde);display:grid;place-items:center;margin-bottom:18px;transition:transform .5s var(--ressort)}
.compris li:hover .ic{transform:rotate(-8deg) scale(1.06)}
.compris .ic svg{width:23px;height:23px}
.compris b{display:block;font-size:18px;font-weight:650;margin-bottom:6px}
.compris span{color:var(--gris);font-size:15.5px;line-height:1.5}
.prix-p{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prix-p .offre{padding:40px 36px 34px}
.croise{margin-top:22px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:24px 30px;border-radius:22px;background:var(--creme)}
.croise p{font-size:17px;max-width:60ch}
.croise p b{color:var(--vert)}

/* scène click & collect (en em, comme celle du héros) */
.duo-ecrans{position:relative;font-size:min(16px,calc(100cqw / 62));width:62em;height:36em;margin:0 auto}
.tablette{position:absolute;left:0;top:2em;width:44em;height:31em;border-radius:2em;background:#060f0c;padding:.9em;box-shadow:0 3em 6em -2em rgba(0,0,0,.7)}
.tablette .ecr{height:100%;border-radius:1.2em;background:#f6f3ee;overflow:hidden;color:var(--encre);display:flex;flex-direction:column}
.tab-h{display:flex;justify-content:space-between;align-items:center;padding:1em 1.4em;background:#fff;border-bottom:1px solid var(--filet)}
.tab-h b{font-size:1.05em}
.tab-h span{font-size:.75em;color:var(--gris);display:flex;align-items:center;gap:.5em}
.tab-h span i{width:.6em;height:.6em;border-radius:50%;background:#3f9a68;animation:pouls-v 2s infinite}
.colonnes{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:.9em;padding:1em 1.2em}
.col h5{display:flex;justify-content:space-between;font-size:.7em;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:.7em}
.col h5 i{font-style:normal;background:var(--creme);padding:0 .6em;border-radius:1em;color:var(--encre)}
.bon{position:relative;background:#fff;border-radius:.8em;padding:.75em .85em;margin-bottom:.6em;font-size:.78em;box-shadow:0 .2em .6em -.3em rgba(0,0,0,.25);border-left:.3em solid var(--filet)}
.bon b{display:flex;justify-content:space-between;font-size:1.05em}
.bon b em{font-style:normal;color:var(--vert-c)}
.bon span{display:block;color:var(--gris);font-size:.92em;line-height:1.35;margin-top:.15em}
.bon.nouveau{border-left-color:var(--tomate)}
.bon.prepa{border-left-color:var(--moutarde)}
.bon.pret{border-left-color:#3f9a68}
/* la commande suivie : une copie par colonne, montrée selon l'étape */
.bon.suivi{max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin-bottom:0;overflow:hidden;transform:translateX(-1.4em);
  transition:max-height .5s var(--e),opacity .4s,transform .6s var(--ressort),padding .5s var(--e),margin .5s var(--e)}
.duo-ecrans.etape-1 .bon.s1,.duo-ecrans.etape-2 .bon.s2,.duo-ecrans.etape-3 .bon.s3{max-height:7em;opacity:1;transform:none;padding-top:.75em;padding-bottom:.75em;margin-bottom:.6em}
.duo-ecrans.etape-1 .bon.s1{animation:clignote 1s .4s 2}
@keyframes clignote{50%{box-shadow:0 0 0 .45em rgba(224,71,43,.28)}}
.tel-cc{position:absolute;right:0;top:0;width:17em;height:35em;border-radius:2.6em;background:#060f0c;padding:.55em;z-index:2;box-shadow:0 3em 5em -2em rgba(0,0,0,.7)}
.tel-cc .ecr{position:relative;height:100%;border-radius:2.1em;background:#faf5ec;overflow:hidden;color:#2c1810;padding:2.8em 1em 1em;display:flex;flex-direction:column}
.tel-cc .ilot{width:5em;margin-left:-2.5em;height:1.4em;top:.55em}
.tel-cc .t{font-family:Georgia,serif;font-style:italic;font-size:1.25em;color:#9b3e2b;line-height:1.1}
.tel-cc .s{font-size:.66em;color:#7a6a5c;margin-bottom:.7em}
.tel-cc .plat{grid-template-columns:3.2em 1fr 1.9em;gap:.6em;padding:.5em 0;font-size:inherit}
.tel-cc .plat i{width:3.2em;height:3.2em;border-radius:.6em}
.tel-cc .plat b{font-size:.78em}
.tel-cc .plat span{font-size:.72em}
.tel-cc .plat u{width:1.9em;height:1.9em;font-size:1em;transition:transform .4s var(--ressort),background .3s}
.tel-cc .plat u.ok{background:#3f9a68;transform:scale(1.15)}
.creno{margin-top:.6em}
.creno small{display:block;font-size:.58em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#7a6a5c;margin-bottom:.35em}
.creno div{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.creno span{font-size:.66em;font-weight:600;text-align:center;padding:.5em 0;border-radius:.5em;border:1px solid #eadfcd;background:#fff;transition:background .3s,color .3s}
.creno span.plein{color:#bfb2a2;text-decoration:line-through;background:transparent}
.creno span.on{background:#9b3e2b;color:#fff;border-color:#9b3e2b}
.payer{margin-top:auto;border-radius:.9em;background:#15130f;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:.85em 1em;font-size:.76em;font-weight:600;transition:transform .3s var(--ressort)}
.payer.tape{transform:scale(.95)}
.tel-cc .fin{position:absolute;inset:2.8em 0 0;background:#faf5ec;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1em;
  opacity:0;transition:opacity .4s;pointer-events:none}
.duo-ecrans.etape-1 .tel-cc .fin,.duo-ecrans.etape-2 .tel-cc .fin,.duo-ecrans.etape-3 .tel-cc .fin{opacity:1}
.tel-cc .fin .rond{width:4.4em;height:4.4em;border-radius:50%;background:#3f9a68;display:grid;place-items:center;color:#fff}
.tel-cc .fin .rond svg{width:2em;height:2em}
.tel-cc .fin b{font-family:Georgia,serif;font-style:italic;font-size:1.3em;margin-top:.6em;color:#9b3e2b}
.tel-cc .fin span{font-size:.7em;color:#7a6a5c;margin-top:.3em}
.tel-cc .fin em{margin-top:.8em;font-style:normal;font-size:.75em;font-weight:700;background:#f1e6d3;padding:.5em .9em;border-radius:.6em}
.cc-panier{display:flex;justify-content:space-between;border-radius:.7em;background:#9b3e2b;color:#fff;padding:.6em .8em;font-size:.68em;font-weight:600;margin-top:.5em;
  transform:translateY(.5em);opacity:0;transition:transform .5s var(--ressort),opacity .3s}
.cc-panier.vu{transform:none;opacity:1}


/* parcours client / cuisine (click & collect) */
.scene-cc{container-type:inline-size;width:100%;margin-top:64px}
@container (max-width:640px){
  .duo-ecrans{width:30em;height:62em;font-size:min(16px,calc(100cqw / 30))}
  .tablette{top:37em;width:30em;height:24em}
  .colonnes{gap:.6em;padding:.8em}
  .tel-cc{left:6.5em;right:auto}
}
.parcours{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.col-p{border-radius:28px;padding:36px 34px 24px}
.col-p h3{display:flex;align-items:center;gap:12px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.col-p h3 svg{width:22px;height:22px}
.col-p ol{list-style:none;counter-reset:p}
.col-p li{counter-increment:p;display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--filet)}
.col-p li::before{content:counter(p);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:Gambarino,serif;font-size:21px;
  background:var(--creme);color:var(--vert)}
.col-p b{display:block;font-size:17.5px;font-weight:650;margin-top:2px}
.col-p span{display:block;color:var(--gris);font-size:15.5px;line-height:1.5}
.col-p.client{background:#fff;border:1px solid var(--filet)}
.col-p.cuisine{background:var(--vert);color:var(--creme)}
.col-p.cuisine h3{color:var(--moutarde)}
.col-p.cuisine li{border-color:var(--filet-n)}
.col-p.cuisine li::before{background:var(--nuit);color:var(--moutarde)}
.col-p.cuisine span{color:var(--sauge)}
@media (max-width:860px){.parcours{grid-template-columns:1fr}.col-p{padding:30px 22px 18px}}

/* ---------------------------------------------------- révélation au défilement */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* --------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .heros>.wrap,.constat .wrap,.moi>.wrap,.contact>.wrap,.faq>.wrap{grid-template-columns:1fr;gap:56px}
  .heros{padding-bottom:90px}
  .scene{max-width:560px;margin:0 auto}
  .nav>nav{display:none}
  .burger{display:block}
  .nav>.btn{margin-left:auto}
  .nav>.btn+.burger{margin-left:0}
  .bento{grid-template-columns:repeat(2,1fr)}
  .offres{grid-template-columns:1fr;max-width:540px;margin:0 auto}
  .offre.vedette{order:-1}
  .alacarte{grid-template-columns:1fr}
  .alacarte a{border-left:0;border-top:1px solid var(--filet)}
  .promesses{grid-template-columns:repeat(2,1fr);margin-top:50px}
  .realisation,.realisation:nth-of-type(even){grid-template-columns:1fr;gap:34px}
  .realisation:nth-of-type(even) .ecrans{order:0}
  .compris{grid-template-columns:repeat(2,1fr)}
  .pied-page .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  section{padding:84px 0}
  .services,.face,.prix-p{grid-template-columns:1fr}
  .etapes{grid-template-columns:1fr;gap:34px}
  .fil{left:34px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .fil i{transform:scaleY(0);transform-origin:top;height:100%}
  .etapes.in .fil i{transform:none}
  .etape{display:grid;grid-template-columns:70px 1fr;gap:0 22px}
  .etape h3{margin-top:16px}
  .etape p,.etape ul{grid-column:2}
  .offert{grid-template-columns:1fr;gap:16px;padding:28px 26px}
  .film .tete{display:block}
  .film .tete .chapo{margin-top:16px}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .annonce{font-size:13.5px}
  .annonce a{display:none}
  .annonce [data-lancement-seul]{display:none}
  .nav{height:66px;gap:12px}
  .logo svg{width:32px;height:32px}
  .logo b{font-size:24px}
  .nav>.btn{display:none}
  .nav>.btn+.burger{margin-left:auto}
  .heros{padding:48px 0 70px}
  .heros .chapo{font-size:18px}
  .actions .btn{flex:1 1 100%}
  .chapo{font-size:17.5px}
  .bento{grid-template-columns:1fr}
  .t-grande,.t-large{grid-column:auto;grid-row:auto}
  .tuile{padding:26px 22px}
  .journal .h,.appel{padding-left:18px;padding-right:18px}
  .appel{grid-template-columns:40px 1fr auto;gap:12px}
  .appel time{font-size:22px}
  .chute{padding:24px 22px}
  .chute .btn{width:100%}
  .colonne{padding:28px 22px}
  .promesses{grid-template-columns:1fr}
  .service{padding:30px 24px 0;min-height:500px}
  .offre{padding:32px 22px 24px}
  .alacarte .t,.alacarte a{padding:20px 22px}
  form.demande{padding:28px 20px}
  form .deux{grid-template-columns:1fr}
  .compris{grid-template-columns:1fr}
  .pied-page .cols{grid-template-columns:1fr}
  .lecture-btn span{width:72px;height:72px}
  .barre-m{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:58;transform:translateY(150%);transition:transform .5s var(--e)}
  .barre-m.vue{transform:none}
  .barre-m .btn{flex:1;box-shadow:0 14px 30px -10px rgba(0,0,0,.55)}
  .pied-page{padding-bottom:110px}
  .navigateur .barre span{padding:4px 14px}
  .portable{border-radius:24px;padding:6px}
  .portable .cadre-site{border-radius:19px}
  .croise{padding:22px 20px}
  .ecrans .portable{width:34%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}
  .js .rv,.js .heros .apparait,.js .journal .appel,.js .deroulant .presta{opacity:1;transform:none}
  .js .heros .ln>span{transform:none}
  .js .pile>span{transform:none;opacity:0}
  .js .pile>span.on{opacity:1}
  .cadence i{transform:none}
}

/* ------------------------------------------------- accès direct au contenu */
.evitement{position:absolute;left:12px;top:-80px;z-index:100;background:var(--moutarde);color:var(--encre);padding:12px 18px;
  border-radius:999px;font-weight:600;text-decoration:none;transition:top .2s}
.evitement:focus{top:12px}

/* liens légaux du pied de page et mention sous le formulaire */
.liens-legaux{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none}
form small a{color:var(--vert);font-weight:600;text-underline-offset:3px}
label .facultatif{font-weight:400;color:var(--gris)}

/* ------------------------------------------------------------ pages légales */
.heros-l{background:var(--nuit);color:var(--creme);padding:64px 0 76px;overflow:hidden}
.heros-l::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(800px 420px at 85% 0%,rgba(43,106,82,.45),transparent 65%)}
.heros-l h1{font-family:Gambarino,Georgia,serif;font-weight:400;font-size:clamp(42px,5.6vw,76px);line-height:1.02;letter-spacing:-.015em;max-width:16ch}
.heros-l h1 em{font-style:normal;color:var(--moutarde)}
.heros-l .chapo{color:var(--sauge);max-width:58ch}
.heros-l .maj{display:inline-flex;align-items:center;gap:9px;margin-top:28px;padding:7px 15px;border:1px solid var(--filet-n);border-radius:999px;font-size:14px;color:var(--sauge)}
.heros-l .maj i{width:7px;height:7px;border-radius:50%;background:var(--moutarde)}
.legal{padding:84px 0 110px}
.legal>.wrap{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
.sommaire{position:sticky;top:104px;font-size:14.5px;max-height:calc(100vh - 130px);overflow:auto}
.sommaire>p{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--vert-c);margin-bottom:14px}
.sommaire ol{list-style:none;border-left:2px solid var(--filet)}
.sommaire a{display:block;padding:6px 0 6px 16px;margin-left:-2px;border-left:2px solid transparent;text-decoration:none;color:var(--gris);line-height:1.35;transition:color .2s,border-color .2s}
.sommaire a:hover{color:var(--encre)}
.sommaire a.actif{color:var(--encre);border-color:var(--moutarde);font-weight:600}
.texte-legal{max-width:76ch;font-size:16.5px;line-height:1.7;color:#2a2722}
.texte-legal>h2{font-size:clamp(28px,3vw,38px);max-width:none;margin:64px 0 16px;scroll-margin-top:100px}
.texte-legal>h2:first-child{margin-top:0}
.texte-legal h3{font-size:18px;font-weight:650;line-height:1.35;margin:30px 0 8px;color:var(--encre)}
.texte-legal p,.texte-legal ul,.texte-legal ol{margin-top:12px}
.texte-legal ul,.texte-legal ol{padding-left:22px}
.texte-legal li{margin-top:7px}
.texte-legal li::marker{color:var(--vert-c)}
.texte-legal a{color:var(--vert);text-underline-offset:3px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.texte-legal a:hover{color:var(--vert-c)}
.texte-legal strong{font-weight:650;color:var(--encre)}
.texte-legal .num{color:var(--vert-c);margin-right:.35em}
.fiche{display:grid;grid-template-columns:minmax(150px,max-content) 1fr;margin-top:18px;border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;background:#fff}
.fiche dt,.fiche dd{padding:13px 18px;border-top:1px solid var(--filet)}
.fiche dt{font-weight:600;color:var(--gris);font-size:14.5px;background:var(--papier)}
.fiche dt:first-of-type,.fiche dd:first-of-type{border-top:0}
.resume{background:var(--creme);border-radius:24px;padding:28px 30px;margin-bottom:56px}
.resume>b{display:block;font-family:Gambarino,Georgia,serif;font-weight:400;font-size:26px;margin-bottom:14px}
.resume ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.resume li{display:flex;gap:12px;margin:0}
.resume svg{width:20px;height:20px;color:var(--vert-c);flex:none;margin-top:4px}
.defile-x{overflow-x:auto;margin-top:18px;border:1px solid var(--filet);border-radius:var(--r);background:#fff}
.tableau{width:100%;min-width:620px;border-collapse:collapse;font-size:15px;line-height:1.5}
.tableau th,.tableau td{text-align:left;vertical-align:top;padding:13px 16px;border-top:1px solid var(--filet)}
.tableau thead th{border-top:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:700;background:var(--papier)}
.tableau tbody th{font-weight:650;color:var(--encre)}
.encadre{border-left:3px solid var(--moutarde);background:var(--papier);padding:16px 20px;border-radius:0 14px 14px 0;margin-top:18px}
.encadre>:first-child{margin-top:0}
.formulaire-type{border:1.5px dashed var(--gris-c);border-radius:20px;padding:26px 28px;margin-top:18px;background:#fff}
.formulaire-type p:first-child{margin-top:0}
.formulaire-type .ligne{display:block;border-bottom:1px solid var(--gris-c);height:1.9em}
.a-completer{background:#fdecc4;color:#6f4300;border:1px dashed #c98a12;border-radius:6px;padding:1px 7px;font-size:.92em;font-weight:600;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.autres-docs{margin-top:80px;padding-top:40px;border-top:1px solid var(--filet)}
.autres-docs>p{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--vert-c);margin-bottom:16px}
.autres-docs ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.autres-docs a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border:1px solid var(--filet);border-radius:18px;
  background:#fff;text-decoration:none;font-weight:600;transition:border-color .3s,transform .4s var(--e)}
.autres-docs a:hover{border-color:var(--gris-c);transform:translateY(-3px)}
.autres-docs svg{width:18px;height:18px;flex:none;color:var(--vert-c)}
@media (max-width:1080px){
  .legal>.wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .sommaire{position:static;max-height:none;background:var(--creme);border-radius:20px;padding:22px 24px}
  .sommaire ol{columns:2;column-gap:28px}
  .sommaire li{break-inside:avoid}
}
@media (max-width:600px){
  .heros-l{padding:44px 0 56px}
  .legal{padding:56px 0 90px}
  .sommaire ol{columns:1}
  .fiche{grid-template-columns:1fr}
  .fiche dd{border-top:0;padding-top:0}
  .resume{padding:24px 20px}
  .formulaire-type{padding:22px 18px}
  .texte-legal{font-size:16px}
}

/* ----------------------------------------------------------------- page 404 */
.perdu{min-height:calc(100vh - 74px);display:grid;place-items:center;text-align:center;padding:80px 0}
.perdu .gros{font-family:Gambarino,Georgia,serif;font-size:clamp(110px,22vw,240px);line-height:.9;color:var(--moutarde)}
.perdu h1{font-family:Gambarino,Georgia,serif;font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1.05;margin-top:14px}
.perdu .chapo{margin:18px auto 0}
.perdu .actions{justify-content:center}