/* ===========================================================
   Qlovya, feuille des pages refondues : page d'accueil et pages
   de module. Elle ne cohabite jamais avec site.css, qui sert les
   anciennes pages : les deux emploient les memes noms de classe
   avec des valeurs differentes. Une page charge l'une ou l'autre,
   jamais les deux.
   =========================================================== */
/* ============================================================
   Socle QLOVYA. Jetons repris tels quels de la charte v1.0.
   Une seule regle s'ecarte de la planche de marque : sur la
   planche, "Conforme" est illustre en bleu. La charte ecrite,
   elle, impose #21865F. C'est la charte qui gagne, parce que
   le bleu de marque sert deja aux graphiques et aux boutons :
   s'il disait aussi "c'est fait", un ecran ne saurait plus
   distinguer un bouton d'un resultat.
   ============================================================ */
:root{
  --brand:#A16480; --brand-text:#7B405F;
  --accent:#29AFC8; --accent-text:#12697A; --accent-light:#7DCFE0;
  --point:#FF745B;
  --ink:#43293A; --ink-2:#6E5462; --ink-3:#7E6773;
  --page:#FFF8EB; --surface:#FFFFFF;
  --sec-rose:#FAF0F4; --sec-blue:#EAF7FA; --blush:#E8CAD7;
  --ok:#21865F; --ok-t:#176B50; --ok-bg:#E9F6F0;
  --cours:#E69F00; --cours-t:#7A4B00; --cours-bg:#FFF5D9;
  --act:#C63F48; --act-t:#9E2833; --act-bg:#FCECEF;
  --r-card:16px; --r-btn:12px; --r-field:10px; --r-pill:999px;
  --bord:1px solid rgba(123,64,95,.16);
  --omb:0 2px 3px rgba(67,41,58,.04), 0 12px 30px rgba(67,41,58,.08);
  --omb-h:0 4px 8px rgba(67,41,58,.06), 0 20px 44px rgba(67,41,58,.12);
  --tit:'Space Grotesk','Inter Tight',system-ui,sans-serif;
  --corps:'Inter Tight',system-ui,-apple-system,sans-serif;
  --courbe:cubic-bezier(.2,.8,.2,1);

  /* ===== COULEURS DE MODULE =====
     Six teintes, une par module, employees a l identique sur le site, dans le
     back-office et sur la tablette. Chacune a deux valeurs : la vive, pour les
     aplats, les halos et les grandes formes ; et la version texte, seule
     autorisee pour un libelle ou un trait d icone.
     Elles ont ete choisies au calcul, pas a l oeil : les six se distinguent
     deux a deux en vision normale ET en vision daltonienne, et aucune ne peut
     etre confondue avec le rouge ou l ambre des etats.
     Une seule exception assumee : le vert du module Stock est proche du vert
     « conforme ». C est tenable parce qu un etat ne parait jamais autrement
     que dans une pastille, avec une coche et un mot. Un libelle vert ne dit
     donc jamais un etat, il nomme un module. */
  --mod-haccp:#15A89C;  --mod-haccp-t:#0F7A71;   /* HACCP et hygiene */
  --mod-sondes:#0080B0; --mod-sondes-t:#007796;  /* Sondes connectees */
  --mod-rh:#565CFE;     --mod-rh-t:#605CDD;      /* RH et planning */
  --mod-fid:#FE5ACC;    --mod-fid-t:#C61F9A;     /* Fidelisation */
  --mod-food:#FE8445;   --mod-food-t:#BD4600;    /* Food cost */
  --mod-stock:#00A144;  --mod-stock-t:#047E35;   /* Controle de stock */
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:var(--corps);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.tit{font-family:var(--tit);margin:0;text-wrap:balance}

/* Chassis commun aux pages du site Qlovya : jetons, entete, boutons, cadres
   photo, sections, apparitions, formulaire de contact, bloc final et pied.
   Extrait du CSS de la page d accueil en retirant ce qui lui est propre.
   Ecrit une fois pour que les sept pages ne divergent pas. */

/* ============================================================
   Page d'accueil Qlovya. Mouvement : 180 a 260 ms, courbe de la
   charte, et tout est coupe si la personne a demande moins
   d'animations dans son systeme.
   ============================================================ */
:root{--wrap:1160px;--trait:rgba(123,64,95,.16);--cb:cubic-bezier(.2,.8,.2,1)}
body{background:var(--page);color:var(--ink);font-family:var(--corps);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
section{position:relative}
h1,h2,h3{font-family:var(--tit);text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}

/* ---------- entete ---------- */
.hd{position:sticky;top:0;z-index:80;background:rgba(255,248,235,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--trait);
  transition:box-shadow 220ms var(--cb)}
.hd.scr{box-shadow:0 4px 22px rgba(67,41,58,.09)}
.hd .in{display:flex;align-items:center;gap:30px;height:88px}
.hd .in>a:first-child{display:inline-flex;align-items:center;min-height:44px}
.mot{height:36px;width:auto;display:block;color:var(--brand-text)}
.nav{display:flex;gap:26px;margin-left:14px}
/* 34 px de haut : invisable au pouce. On monte a 44 px par le rembourrage,
   la barre fait deja 88 px donc rien ne bouge a l ecran. */
.nav a{font-size:14.5px;font-weight:600;color:var(--ink-2);position:relative;padding:13px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:9px;height:2px;
  background:var(--point);transition:right 220ms var(--cb)}
.nav a:hover::after,.nav a.on::after{right:0}
.nav a.on{color:var(--ink)}
.act{margin-left:auto;display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  padding:0 22px;border-radius:var(--r-btn,12px);font-family:var(--tit);font-weight:700;
  font-size:14.5px;cursor:pointer;border:1px solid transparent;
  transition:transform 200ms var(--cb),box-shadow 200ms var(--cb),background 200ms var(--cb)}
.btn.p{background:var(--brand-text);color:#fff}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(123,64,95,.32)}
.btn.g{background:var(--surface);border-color:var(--trait);color:var(--ink)}
.btn.g:hover{transform:translateY(-2px);box-shadow:var(--omb)}
.btn.lg{min-height:54px;padding:0 28px;font-size:15.5px}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--cb)}
.btn:hover svg{transform:translateX(3px)}

.bandeau{background:linear-gradient(90deg,var(--brand-text),#12697A);color:#fff;
  text-align:center;padding:12px 20px;font-size:13.5px}
.bandeau b{font-weight:700}

/* ---------- emplacements photo ---------- */
/* Une case vide doit ressembler a une intention, pas a une image cassee :
   fond de marque, trame reguliere, et une legende qui dit ce qui viendra. */
.ph{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:var(--r,16/9);
  background:
    repeating-linear-gradient(135deg,rgba(123,64,95,.05) 0 12px,rgba(123,64,95,0) 12px 24px),
    var(--sec-rose);
  border:1px solid rgba(123,64,95,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:22px;text-align:center}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.ph.remplie img{display:block}
.ph.remplie .ico,.ph.remplie .lg{display:none}
.ph .ico{width:44px;height:44px;border-radius:50%;background:rgba(123,64,95,.10);
  display:grid;place-items:center}
.ph .ico svg{width:22px;height:22px;fill:none;stroke:var(--brand-text);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ph .lg{font-size:13px;color:var(--brand-text);font-weight:600;max-width:34ch;line-height:1.5}
.ph .lg em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-2);
  font-weight:500;margin-top:4px;font-variant-numeric:tabular-nums}

/* ---------- groupes de boutons ---------- */
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------- sections ---------- */
.sec{padding:60px 0}
.sec.alt{background:var(--sec-rose)}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow i{width:22px;height:2px;background:var(--point);border-radius:2px;display:block}
h2.t{font-size:clamp(25px,2.7vw,33px);line-height:1.18;font-weight:700;margin-top:11px;
  max-width:22ch}
.sous{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin-top:13px;max-width:60ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.centre{text-align:center;max-width:64ch;margin:0 auto}
.centre h2.t,.centre .sous{max-width:none;margin-left:auto;margin-right:auto}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(20px)}
.rv.vu{opacity:1;transform:none;
  transition:opacity 460ms var(--cb),transform 460ms var(--cb)}

/* ---------- avant / avec Qlovya ---------- */
.avant-apres{display:grid;grid-template-columns:1fr 44px 1fr;gap:18px;align-items:center}
.avant-apres .col{background:var(--surface);border:var(--bord);border-radius:var(--r-card);
  padding:22px 20px}
.avant-apres .col.vieux{background:var(--sec-rose);border-style:dashed}
.avant-apres .et{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.avant-apres .col.neuf .et{color:var(--ok-t)}
.avant-apres p{font-size:14px;line-height:1.55;color:var(--ink-2);padding:9px 0;
  border-top:1px solid var(--trait)}
.avant-apres p:first-of-type{border-top:0;padding-top:0}
.avant-apres .fl{display:grid;place-items:center}
.avant-apres .fl svg{width:26px;height:26px;fill:none;stroke:var(--point);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- formulaire de contact ---------- */
/* Il passe du statut de bouton a celui de section : c est le seul endroit de
   la page ou quelqu un peut se manifester, il merite la place. */
.fin{text-align:left}
.fin-g{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:start}
.fin-t h2{margin:14px 0 0;max-width:18ch}
.fin-t p{margin:16px 0 0;max-width:44ch;margin-left:0}
.fin-l{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px}
.fin-l li{display:flex;gap:11px;align-items:center;font-size:14.5px;color:#E4D2DC}
.fin-l span{width:22px;height:22px;border-radius:50%;background:rgba(125,207,224,.18);
  color:#7DCFE0;display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.fin-m{font-size:14px;color:#B79CAB;margin-top:24px}
.fin-m a{color:#7DCFE0;font-weight:600}
.form{background:var(--page);border-radius:20px;padding:26px 24px;display:flex;
  flex-direction:column;gap:14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fc{display:flex;flex-direction:column}
.form label,.form .lab{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:7px}
.form input,.form select{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--trait);
  border-radius:var(--r-md,10px);font-size:15px;font-family:var(--corps);color:var(--ink);
  background:var(--surface);box-sizing:border-box;
  transition:border-color 200ms var(--cb),box-shadow 200ms var(--cb)}
.form input::placeholder{color:var(--ink-3)}
.form input:focus,.form select:focus{outline:none;border-color:var(--brand-text);
  box-shadow:0 0 0 3px rgba(123,64,95,.15)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 15px;border-radius:999px;border:1px solid var(--trait);
  background:var(--surface);font-family:var(--corps);font-size:13.5px;font-weight:600;
  color:var(--ink-2);cursor:pointer;
  transition:background 200ms var(--cb),border-color 200ms var(--cb),color 200ms var(--cb)}
.chip:hover{border-color:var(--brand-text)}
.chip.on{background:var(--c,var(--brand-text));border-color:var(--c,var(--brand-text));color:#fff}
.rgpd{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
@media (max-width:940px){.fin-g{grid-template-columns:1fr;gap:30px}.f2{grid-template-columns:1fr}}

/* ---------- bloc final ---------- */
.fin{background:#3A2431;color:#F6EAF0;border-radius:26px;padding:44px 42px;text-align:left;
  position:relative;overflow:hidden}
.fin::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-190px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,116,91,.20),rgba(255,116,91,0) 70%)}
.fin>*{position:relative}
.fin h2{font-size:clamp(25px,2.7vw,32px);line-height:1.18;color:#FFF8EB;max-width:18ch;margin:0}
.fin p{font-size:15.5px;color:#E4D2DC;margin-top:15px;max-width:46ch;line-height:1.6}

.fin .btn.g{background:transparent;border-color:rgba(255,248,235,.34);color:#FFF8EB}

.pied{padding:32px 0 44px;border-top:1px solid var(--trait);margin-top:56px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pied .mot{height:26px;color:var(--ink-3)}
.pied p{font-size:13px;color:var(--ink-3)}
.pied nav{margin-left:auto;display:flex;gap:8px;font-size:13px;color:var(--ink-3)}
.pied nav a{padding:12px 10px;display:inline-flex;align-items:center;min-height:44px}

@media (max-width:940px){
  .hero .in,.duo{grid-template-columns:1fr;gap:36px}
  .g3,.plans,.stats{grid-template-columns:1fr}
  .stats>div{border-left:0;border-top:1px solid var(--trait)}
  .stats>div:first-child{border-top:0}
  .nav{display:none}}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rv{opacity:1!important;transform:none!important}
  .shot .row{opacity:1!important;transform:none!important}
  .gr-line{stroke-dashoffset:0!important}
  .gr-bad{opacity:1!important}}

/* ============================================================
   Page de module. Une seule feuille sert les six : la couleur du
   module arrive par --m et --m-t, tout le reste en decoule.
   ============================================================ */
.mod{--m:var(--mod-haccp);--m-t:var(--mod-haccp-t)}

/* ---------- fil d Ariane ---------- */
.fil{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);
  padding:20px 0 0}
/* meme regle que la navigation : 20 px de haut ne se vise pas au pouce */
.fil a{color:var(--ink-3);padding:12px 4px;margin:-12px -4px;display:inline-flex;
  align-items:center;min-height:44px}
.fil a:hover{color:var(--ink)}
.fil b{color:var(--ink);font-weight:600}

/* ---------- heros du module ---------- */
.mhero{padding:34px 0 58px}
.mhero .in{display:grid;grid-template-columns:1fr 1.04fr;gap:48px;align-items:center}
.mhero h1{font-size:clamp(30px,3.4vw,42px);line-height:1.14;font-weight:700;margin:14px 0 0;
  max-width:16ch}
.mhero .lead{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin-top:18px;max-width:48ch}
.mhero .prix{display:inline-flex;align-items:center;gap:10px;margin-top:24px;
  background:var(--surface);border:var(--bord);border-radius:var(--r-pill);
  padding:9px 18px 9px 12px;font-size:13.5px;color:var(--ink-2)}
.mhero .prix b{font-family:var(--tit);color:var(--ink)}
.mhero .prix i{width:9px;height:9px;border-radius:50%;background:var(--m);display:block;flex:none}
.mhero .ctas{margin-top:24px}
.btn.m{background:var(--m-t);color:#fff}
.btn.m:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18)}

/* ---------- le champ colore qui porte l ecran ---------- */
/* Composition maison : un champ a la couleur du module, la trame Qlovya
   dessus, l ecran pose au centre, et une carte d etat qui deborde d un coin.
   Le debord est ce qui donne la profondeur, sans incliner ni empiler. */
.champ{position:relative;border-radius:24px;padding:30px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 14px,rgba(255,255,255,0) 14px 28px),
    var(--m);
  box-shadow:0 24px 60px -24px color-mix(in srgb,var(--m) 55%,transparent)}
.champ .ecr{border-radius:16px;overflow:hidden;background:var(--surface);
  box-shadow:0 12px 34px rgba(67,41,58,.22);aspect-ratio:var(--r,4/3);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;
  padding:22px;text-align:center}
.champ .ecr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.champ .ecr.remplie img{display:block}
.champ .ecr.remplie .ico,.champ .ecr.remplie .lg{display:none}
.champ .ecr .ico{width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--m) 14%,transparent);
  display:grid;place-items:center}
.champ .ecr .ico svg{width:22px;height:22px;fill:none;stroke:var(--m-t);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.champ .ecr .lg{font-size:13.5px;color:var(--m-t);font-weight:600;max-width:30ch;line-height:1.5}
.champ .ecr .lg em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-2);
  font-weight:500;margin-top:4px;font-variant-numeric:tabular-nums}
.deb{position:absolute;right:-16px;bottom:-18px;background:var(--surface);
  border-radius:14px;box-shadow:0 14px 34px rgba(67,41,58,.20);padding:13px 16px;
  display:flex;align-items:center;gap:11px;max-width:260px;
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity 300ms var(--cb),transform 300ms var(--cb)}
.vu .deb{opacity:1;transform:none;transition-delay:340ms}
.deb .k{width:26px;height:26px;border-radius:50%;background:var(--ok-bg);color:var(--ok-t);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.deb b{display:block;font-family:var(--tit);font-size:13.5px}
.deb span{font-size:12px;color:var(--ink-3)}

/* ---------- capacites ---------- */
.caps{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:26px}
.cap{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--trait);align-items:flex-start}
.cap:first-child,.caps>.cap:nth-child(2){border-top:0}
.cap .i{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--m) 13%,transparent)}
.cap .i svg{width:17px;height:17px;fill:none;stroke:var(--m-t);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.cap b{display:block;font-size:14.5px;font-weight:600;line-height:1.4}
.cap p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:3px}

/* ---------- frise des douze mois ---------- */
.frise{background:var(--surface);border:var(--bord);border-radius:var(--r-card);padding:24px;
  margin-top:28px}
.fr-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px}
.fr-h b{font-family:var(--tit);font-size:15px}
.fr-h span{font-size:12.5px;color:var(--ink-3)}
.fr-l{display:grid;grid-template-columns:132px 1fr;gap:14px;align-items:center;
  padding:7px 0;font-size:13.5px}
.fr-l .n{color:var(--ink-2);font-weight:600}
.fr-c{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.fr-c i{height:22px;border-radius:5px;background:color-mix(in srgb,var(--m) 16%,transparent);
  transform:scaleY(.25);transform-origin:center;
  transition:transform 340ms var(--cb),background 340ms var(--cb)}
.vu .fr-c i{transform:scaleY(1);background:var(--m)}
.fr-m{display:grid;grid-template-columns:132px 1fr;gap:14px;margin-top:10px}
.fr-m .mm{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;font-size:10.5px;
  color:var(--ink-3);text-align:center}

/* ---------- comment ca se passe ---------- */
.pas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.pa{background:var(--surface);border:var(--bord);border-radius:var(--r-card);padding:22px}
.pa .n{width:30px;height:30px;border-radius:50%;background:var(--m);color:#fff;
  display:grid;place-items:center;font-family:var(--tit);font-weight:700;font-size:14px;
  margin-bottom:14px}
.pa b{display:block;font-family:var(--tit);font-size:16px}
.pa p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:7px}

/* ---------- les autres modules ---------- */
.autres{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.au{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;
  border-radius:var(--r-pill);border:1px solid var(--trait);background:var(--surface);
  font-size:14px;font-weight:600;color:var(--ink);
  transition:transform 200ms var(--cb),box-shadow 200ms var(--cb),border-color 200ms var(--cb)}
.au:hover{transform:translateY(-2px);box-shadow:var(--omb);border-color:var(--c)}
.au i{width:11px;height:11px;border-radius:50%;background:var(--c);display:block;flex:none}

/* ---------- visuels graphiques propres a chaque module ---------- */
/* Une seule feuille sert les six : chaque module n active que le sien.
   Tout prend --m, donc la couleur suit le module sans une ligne de plus. */
.jour,.sem,.mvt{width:100%;height:auto;display:block;margin:6px 0 4px}
.j-ax{stroke:rgba(67,41,58,.16);stroke-width:1}
.j-lab,.j-h text{font-size:10.5px;fill:var(--ink-3)}
.j-h text{text-anchor:middle}
.j-nuit{fill:rgba(67,41,58,.05)}
.j-zone{fill:color-mix(in srgb,var(--ok) 8%,transparent)}
.j-l{fill:none;stroke:var(--m-t);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400}
.vu .j-l{animation:trace 1600ms var(--cb) forwards}
.j-p{fill:var(--act);opacity:0}
.vu .j-p{animation:apparait 400ms var(--cb) 1400ms forwards}
.j-ping{fill:none;stroke:var(--act);stroke-width:2;opacity:0}
.vu .j-ping{animation:ping 1700ms ease-out 1700ms infinite}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes apparait{to{opacity:1}}
@keyframes ping{0%{r:5;opacity:.7}100%{r:18;opacity:0}}
.j-a{display:flex;gap:12px;align-items:flex-start;background:var(--act-bg);border-radius:12px;
  padding:13px 15px;margin-top:12px}
.j-a .ax{width:23px;height:23px;border-radius:50%;background:var(--act);color:#fff;font-weight:800;
  font-size:13px;display:grid;place-items:center;flex:none}
.j-a b{display:block;font-family:var(--tit);font-size:14px;color:var(--act-t)}
.j-a span{font-size:12.5px;color:var(--act-t)}

/* RH : prevu contre reel */
.s-p{fill:color-mix(in srgb,var(--m) 26%,transparent)}
.s-r{fill:var(--m)}
.sb rect{transform:scaleY(0);transform-origin:0 150px;transition:transform 520ms var(--cb)}
.vu .sb rect{transform:scaleY(1)}
.sb:nth-of-type(2) rect{transition-delay:70ms}
.sb:nth-of-type(3) rect{transition-delay:140ms}
.sb:nth-of-type(4) rect{transition-delay:210ms}
.sb:nth-of-type(5) rect{transition-delay:280ms}
.sb:nth-of-type(6) rect{transition-delay:350ms}
.sb:nth-of-type(7) rect{transition-delay:420ms}

/* Food cost : la fiche technique qui se decompose */
.fiche{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.fl2{display:grid;grid-template-columns:150px 1fr 62px;gap:14px;align-items:center;
  padding:10px 0;border-top:1px solid var(--trait);font-size:13.5px}
.fl2:first-child{border-top:0}
.fl2 .n{font-weight:600}
.fl2 .v{font-family:var(--tit);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.fl2 .ba{height:8px;border-radius:99px;background:rgba(123,64,95,.10);overflow:hidden}
.fl2 .ba i{display:block;height:100%;border-radius:99px;background:var(--m);
  transform:scaleX(0);transform-origin:left;transition:transform 620ms var(--cb)}
.vu .fl2 .ba i{transform:scaleX(1)}
.fl2:nth-child(2) .ba i{transition-delay:80ms}
.fl2:nth-child(3) .ba i{transition-delay:160ms}
.fl2:nth-child(4) .ba i{transition-delay:240ms}
.fl2:nth-child(5) .ba i{transition-delay:320ms}
.fl2.tot{border-top:2px solid var(--trait);margin-top:6px;padding-top:14px}
.fl2.tot .n,.fl2.tot .v{font-family:var(--tit);font-size:15px}

/* Stock : entrees, sorties et valeur */
.m-l{fill:none;stroke:var(--m-t);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:1200}
.vu .m-l{animation:trace 1500ms var(--cb) 300ms forwards}
.m-e{fill:var(--m);opacity:.85}
.m-s{fill:color-mix(in srgb,var(--m) 34%,transparent)}
.mb-g rect{transform:scaleY(0);transform-origin:0 110px;transition:transform 460ms var(--cb)}
.vu .mb-g rect{transform:scaleY(1)}

/* Fidelisation : ce que devient un scan */
.ento{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.et2{position:relative;background:rgba(123,64,95,.06);border-radius:12px;padding:14px 18px;
  display:flex;align-items:baseline;gap:12px;overflow:hidden}
.et2 i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--m) 20%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 640ms var(--cb);z-index:0}
.vu .et2 i{transform:scaleX(1)}
.et2:nth-child(2) i{transition-delay:110ms}
.et2:nth-child(3) i{transition-delay:220ms}
.et2:nth-child(4) i{transition-delay:330ms}
.et2 b,.et2 span{position:relative;z-index:1}
.et2 b{font-family:var(--tit);font-size:22px;font-variant-numeric:tabular-nums;min-width:76px}
.et2 span{font-size:14px;color:var(--ink-2)}

/* legende commune aux visuels */
.lgd{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--trait);font-size:13px;color:var(--ink-2)}
.lgd span{display:flex;align-items:center;gap:8px}
.lgd i{width:12px;height:12px;border-radius:3.5px;display:block}
.lgd .lp,.lgd .ls{background:color-mix(in srgb,var(--m) 28%,transparent)}
.lgd .lr,.lgd .le{background:var(--m)}
.lgd .ec{margin-left:auto;font-family:var(--tit);font-weight:700;color:var(--act-t)}
.lgd .ec2{margin-left:auto;font-family:var(--tit);font-weight:700;color:var(--ink)}
.lgd .ok2{font-family:var(--tit);font-weight:700;color:var(--ok-t)}
@media (prefers-reduced-motion:reduce){
  .j-l,.m-l{stroke-dashoffset:0!important}.j-p{opacity:1!important}
  .sb rect,.mb-g rect,.fl2 .ba i,.et2 i{transform:none!important}}

@media (max-width:940px){.mhero .in{grid-template-columns:1fr;gap:32px}
  .caps{grid-template-columns:1fr}.cap:nth-child(2){border-top:1px solid var(--trait)}
  .pas{grid-template-columns:1fr}
  .fr-l,.fr-m{grid-template-columns:1fr}.fr-l .n{margin-bottom:4px}}
@media (prefers-reduced-motion:reduce){.deb{opacity:1!important;transform:none!important}
  .fr-c i{transform:none!important;background:var(--m)!important}}