/*
 * Caisse MAHALI — Copyright (c) 2025-2026 JEM Solutions — El Mehdi Jouan. Tous droits réservés.
 * Logiciel propriétaire : voir LICENSE à la racine du dépôt. https://jouan.us/
 *
 * ══════════════════════════════════════════════════════════════════════════
 * VITRINE V7 — feuille de style unique.
 *
 * Deux règles tenues par backend/test/landing_v7_chrome.test.js :
 *   1. AUCUNE propriété physique de côté (left / right / margin-left…).
 *      Tout passe par les propriétés logiques : inset-inline-*, margin-inline-*,
 *      padding-inline-*, border-inline-*, text-align:start|end. C'est ce qui
 *      permet à l'arabe de se retourner sans une seule règle miroir.
 *   2. 60 Ko au plus. La V7 charge UNE feuille, sans police en ligne.
 * ══════════════════════════════════════════════════════════════════════════
 */

/* ── Police latine, auto-hébergée ──────────────────────────────────────────
   Hanken Grotesk est une police VARIABLE : une seule ressource couvre toutes
   les graisses, ce qui coûte moins qu'un fichier par graisse. `swap` fait
   afficher le texte tout de suite avec la pile système, puis le remplace :
   on ne montre jamais de page blanche pendant le téléchargement. */
@font-face{
 font-family:'Hanken Grotesk';
 src:url('/assets/v7/fonts/HankenGrotesk.woff2') format('woff2'),
     url('/assets/v7/fonts/HankenGrotesk.ttf') format('truetype');
 font-weight:100 900;font-style:normal;font-display:swap;
}

:root{
 /* Jetons imposés par le plan V7 — ne pas dériver, ne pas ajouter de bleu. */
 --bg:#F7F4EF;
 --surface:#FFFFFF;
 --wine:#4A071C;
 --action:#6F1235;
 --gold:#D5A642;
 --ink:#201A1C;
 --sub:#756B6F;
 --green:#188653;
 --line:#E8E1DA;

 /* Dérivés (teintes des jetons, jamais de nouvelle couleur). */
 --wine-soft:rgba(74,7,28,.06);
 --action-soft:rgba(111,18,53,.08);
 --gold-soft:rgba(213,166,66,.16);
 --ombre:0 1px 2px rgba(32,26,28,.04),0 8px 24px rgba(32,26,28,.06);
 --ombre-forte:0 2px 6px rgba(32,26,28,.06),0 18px 48px rgba(32,26,28,.12);

 --ff:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
 --fs:Georgia,'Times New Roman',serif;   /* accents éditoriaux (em) */
 --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 --fa:'Segoe UI','Noto Naskh Arabic',Tahoma,sans-serif;  /* arabe : système */

 --wrap:1200px;
 --gout:32px;                  /* gouttière latérale de .wrap */
 --r:18px;                     /* rayon des cartes */
 --r-sm:12px;
 --head-h:72px;
 --sec-pad:104px;              /* respiration verticale d'une section */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 24px)}
body{
 margin:0;background:var(--bg);color:var(--ink);
 font-family:var(--ff);font-size:17px;line-height:1.62;
 font-weight:400;letter-spacing:-.005em;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:640;letter-spacing:-.03em;line-height:1.08;color:var(--wine)}
h1{font-size:clamp(38px,5vw,62px)}
h2{font-size:clamp(30px,3.6vw,46px)}
h3{font-size:clamp(20px,1.9vw,25px);line-height:1.22;letter-spacing:-.02em}
h4{font-size:17px;line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em}
strong{font-weight:660}
small{font-size:14px}
ul,ol{margin:0;padding-inline-start:1.15em}
hr{border:0;border-block-start:1px solid var(--line);margin:0}
:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-soft);color:var(--wine)}

.sr-only{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;
 overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
 position:absolute;inset-block-start:-999px;inset-inline-start:0;z-index:200;
 background:var(--wine);color:var(--bg);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{inset-block-start:0}

/* ══════════════════════════════════════════════════════════════════════════
   MISE EN PAGE — le contrat des sections (tâches 4 à 6)
   ══════════════════════════════════════════════════════════════════════════ */

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gout) * 2);margin-inline:auto;padding-inline:var(--gout)}
.wrap-tight{max-width:calc(880px + var(--gout) * 2)}

.v7-section{padding-block:var(--sec-pad);position:relative}
.v7-section--surface{background:var(--surface)}
.v7-section--wine{background:var(--wine);color:rgba(247,244,239,.88)}
.v7-section--wine h1,.v7-section--wine h2,.v7-section--wine h3,.v7-section--wine h4,
.v7-section--kitchen h1,.v7-section--kitchen h2,.v7-section--kitchen h3,.v7-section--kitchen h4{color:var(--bg)}
.v7-section--wine .eyebrow,.v7-section--kitchen .eyebrow{color:var(--gold)}
/* 08 — fond bordeaux qui s'approfondit vers le presque-noir, texte ivoire,
   or en accent seulement. */
.v7-section--kitchen{background:linear-gradient(180deg,var(--wine) 0%,#1A0509 100%);color:rgba(247,244,239,.88)}
.v7-section--kitchen .lead{color:rgba(247,244,239,.68)}
.v7-section--line{border-block-start:1px solid var(--line)}

/* Chapeau de section : surtitre + titre + accroche. */
.sec-head{max-width:760px;margin-block-end:52px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-title{margin-block-end:18px}
.lead{font-size:19px;line-height:1.62;color:var(--sub);max-width:64ch}
.note{font-size:14px;line-height:1.55;color:var(--sub)}

/* Surtitre : petites capitales espacées, précédées d'un filet or. */
.eyebrow{
 display:flex;align-items:center;gap:10px;
 margin:0 0 16px;font-size:11px;font-weight:680;line-height:1.4;
 letter-spacing:.16em;text-transform:uppercase;color:var(--action);
}
.eyebrow::before{content:"";inline-size:26px;block-size:2px;background:var(--gold);flex:none;border-radius:2px}
.sec-head--center .eyebrow{justify-content:center}

.rule{block-size:1px;background:var(--line);border:0;margin-block:44px}
.rule-gold{block-size:2px;inline-size:40px;background:var(--gold);border:0;border-radius:2px}

/* Grilles — les tâches 4 à 6 n'écrivent pas de grid-template à la main. */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-split{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* Chiffres et prix : toujours lus de gauche à droite, même en arabe. */
bdi,.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.num{font-weight:700;letter-spacing:-.02em;color:var(--wine)}
/* Sur fond bordeaux le chiffre disparaissait : il passe en or. */
.card-wine .num,.v7-section--wine .num,.card-wine bdi,.v7-section--wine bdi{color:var(--gold)}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;
 min-block-size:48px;padding:12px 24px;border-radius:999px;border:1px solid transparent;
 font-size:16px;font-weight:620;letter-spacing:-.01em;cursor:pointer;
 transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.btn svg{inline-size:18px;block-size:18px;flex:none}
.btn-primary{background:var(--action);color:#fff;box-shadow:0 6px 18px rgba(111,18,53,.22)}
.btn-primary:hover{background:var(--wine);box-shadow:0 10px 26px rgba(74,7,28,.26)}
.btn-ghost{background:transparent;color:var(--wine);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--wine);background:var(--wine-soft)}
.btn-gold{background:var(--gold);color:var(--wine)}
.btn-gold:hover{background:#c69833}
.btn-sm{min-block-size:40px;padding:8px 16px;font-size:15px}
.btn-lg{min-block-size:56px;padding:15px 30px;font-size:17px}
.btn-block{inline-size:100%}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;pointer-events:none}

.text-link{
 display:inline-flex;align-items:center;gap:8px;color:var(--action);
 font-weight:620;border-block-end:1px solid transparent;transition:border-color .2s ease,color .2s ease;
}
.text-link:hover{color:var(--wine);border-block-end-color:currentColor}
.text-link svg{inline-size:16px;block-size:16px;flex:none}

/* ── Puces, badges, cartes ──────────────────────────────────────────────── */
.chip{
 display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
 background:var(--surface);border:1px solid var(--line);
 font-size:13px;font-weight:600;color:var(--sub);
}
.chip-gold{background:var(--gold-soft);border-color:transparent;color:var(--wine)}
.chip-green{background:rgba(24,134,83,.1);border-color:transparent;color:var(--green)}
/* CM CONNECT : compatible = puce bordeaux pleine · disponible = liseré or.
   « À venir » n'a pas de classe : le .chip par défaut est déjà gris neutre. */
.chip-wine{background:var(--wine);border-color:var(--wine);color:var(--bg)}
.chip-outline-gold{background:transparent;border-color:var(--gold);color:var(--wine)}
/* Sur fond sombre (CM KITCHEN), le statut « En préparation » (liseré or)
   doit rester lisible : liseré clair au lieu du texte bordeaux par défaut. */
.v7-section--kitchen .chip-outline-gold{color:var(--bg)}
/* Sur le même fond, le vert par défaut (--green:#188653) tombe sous 4:1 —
   éclairci pour rester lisible (~7:1 sur le point le plus sombre du dégradé). */
.v7-section--kitchen .chip-green{color:#4FD08A}
/* :not() évite d'écraser chip-green / chip-outline-gold : sans lui, ce
   sélecteur plus spécifique que .chip-green rendait « Prêt » aussi terne
   que « Annulée ». */
.v7-section--kitchen .chip:not(.chip-green):not(.chip-outline-gold){
 background:rgba(247,244,239,.08);border-color:rgba(247,244,239,.24);color:rgba(247,244,239,.75);
}
.badge{
 display:inline-block;padding:3px 10px;border-radius:999px;
 background:var(--gold);color:var(--wine);
 font-size:11px;font-weight:720;letter-spacing:.1em;text-transform:uppercase;
}

.card{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
 padding:28px;box-shadow:var(--ombre);
 transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.card-hover:hover{box-shadow:var(--ombre-forte);transform:translateY(-3px);border-color:rgba(213,166,66,.5)}
.card-flat{box-shadow:none}
.card-wine{background:var(--wine);border-color:transparent;color:rgba(247,244,239,.86)}
.card-wine h3,.card-wine h4{color:var(--bg)}
.card-title{margin-block-end:8px}
.card-text{color:var(--sub);font-size:16px;margin:0}
.card-icon{
 display:inline-flex;align-items:center;justify-content:center;
 inline-size:44px;block-size:44px;border-radius:12px;margin-block-end:16px;
 background:var(--action-soft);color:var(--action);
}
.card-icon svg{inline-size:22px;block-size:22px}

/* Liste à coches — motif partagé par les tâches 4 à 6. */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.check-list li{position:relative;padding-inline-start:28px;font-size:16px;color:var(--sub)}
.check-list li::before{
 content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
 inline-size:9px;block-size:9px;border-radius:50%;background:var(--gold);
}

/* ══════════════════════════════════════════════════════════════════════════
   BANDEAU D'ANNONCE
   ══════════════════════════════════════════════════════════════════════════ */
.v7-announce{background:var(--wine);color:rgba(247,244,239,.92);font-size:14px}
.v7-announce[hidden]{display:none}
/* Les boutons de l'assistant : `.btn` fixe display, l'attribut hidden doit gagner —
   sinon Suivant et Envoyer restent visibles à toutes les étapes. */
.v7-wizard-nav .btn[hidden]{display:none}
.v7-announce-inner{display:flex;align-items:center;justify-content:center;gap:14px;
 min-block-size:44px;padding-block:8px;text-align:center;flex-wrap:wrap}
.v7-announce p{margin:0;line-height:1.4}
.v7-announce .v7-announce-cta{
 display:inline-flex;align-items:center;gap:6px;color:var(--gold);
 font-weight:640;border-block-end:1px solid rgba(213,166,66,.45);
}
.v7-announce .v7-announce-cta:hover{border-block-end-color:var(--gold)}
.v7-announce-close{
 position:absolute;inset-inline-end:12px;inset-block-start:50%;transform:translateY(-50%);
 display:inline-flex;align-items:center;justify-content:center;
 inline-size:32px;block-size:32px;border:0;border-radius:50%;
 background:transparent;color:rgba(247,244,239,.7);cursor:pointer;transition:background-color .2s ease,color .2s ease;
}
.v7-announce-close:hover{background:rgba(247,244,239,.12);color:#fff}
.v7-announce-close svg{inline-size:14px;block-size:14px}
.v7-announce .wrap{position:relative}

/* ══════════════════════════════════════════════════════════════════════════
   EN-TÊTE
   ══════════════════════════════════════════════════════════════════════════ */
.v7-header{
 position:sticky;inset-block-start:0;z-index:90;
 background:rgba(247,244,239,.94);
 border-block-end:1px solid var(--line);
 backdrop-filter:saturate(140%) blur(10px);
}
.v7-head-inner{display:flex;align-items:center;gap:28px;min-block-size:var(--head-h)}

.brand{display:inline-flex;align-items:center;gap:11px;flex:none;direction:ltr}
.brand img{inline-size:38px;block-size:38px;border-radius:10px}
.brand-name{
 display:flex;flex-direction:column;line-height:1;
 font-size:11px;font-weight:660;letter-spacing:.18em;color:var(--sub);
}
.brand-name strong{font-size:15px;font-weight:760;letter-spacing:.1em;color:var(--wine)}

.v7-nav{display:flex;align-items:center;gap:4px;margin-inline-end:auto}
.v7-nav>a,.v7-trigger{
 display:inline-flex;align-items:center;gap:6px;
 padding:9px 12px;border:0;border-radius:10px;background:transparent;
 font-size:15px;font-weight:560;color:var(--ink);cursor:pointer;white-space:nowrap;
 transition:background-color .2s ease,color .2s ease;
}
.v7-nav>a:hover,.v7-trigger:hover,.v7-trigger[aria-expanded=true]{background:var(--wine-soft);color:var(--wine)}
.v7-trigger svg{inline-size:14px;block-size:14px;transition:transform .22s ease}
.v7-trigger[aria-expanded=true] svg{transform:rotate(180deg)}
.v7-nav-item{position:relative}

.v7-head-actions{display:flex;align-items:center;gap:12px;flex:none}
.v7-login{font-size:15px;font-weight:560;color:var(--sub);padding:9px 6px;white-space:nowrap}
.v7-login:hover{color:var(--wine)}

/* Sélecteur de langue : quatre boutons, délégués à applyPageLanguage. */
.v7-langsel{display:inline-flex;align-items:center;gap:2px;
 padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.v7-langsel button{
 min-inline-size:32px;min-block-size:28px;padding:0 8px;border:0;border-radius:999px;
 background:transparent;font-size:12px;font-weight:660;letter-spacing:.04em;
 color:var(--sub);cursor:pointer;transition:background-color .2s ease,color .2s ease;
}
.v7-langsel button:hover{color:var(--wine)}
.v7-langsel button[aria-current=true]{background:var(--wine);color:var(--bg)}

.v7-burger{
 display:none;align-items:center;justify-content:center;
 inline-size:44px;block-size:44px;border:1px solid var(--line);border-radius:12px;
 background:var(--surface);color:var(--wine);cursor:pointer;
}
.v7-burger svg{inline-size:20px;block-size:20px}

/* ── Méga-menu « Solutions » ────────────────────────────────────────────── */
.v7-mega{
 position:absolute;inset-block-start:calc(100% + 12px);inset-inline-start:0;
 z-index:95;inline-size:520px;max-inline-size:calc(100vw - 48px);
 padding:22px;border:1px solid var(--line);border-radius:var(--r);
 background:var(--surface);box-shadow:var(--ombre-forte);
 animation:v7-pop .2s ease both;
}
.v7-mega[hidden]{display:none}
@keyframes v7-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.v7-mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.v7-mega-item{
 display:block;padding:11px 12px;border-radius:12px;
 transition:background-color .18s ease;
}
.v7-mega-item:hover{background:var(--wine-soft)}
.v7-mega-item strong{display:block;font-size:14px;font-weight:720;letter-spacing:.04em;color:var(--wine)}
.v7-mega-item span{display:block;margin-block-start:2px;font-size:13px;line-height:1.4;color:var(--sub)}
.v7-mega-foot{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);
}
.v7-mega-foot .text-link{font-size:14px}

/* ── Panneau mobile plein écran ─────────────────────────────────────────── */
.v7-veil{position:fixed;inset:0;z-index:96;background:rgba(32,26,28,.42);backdrop-filter:blur(2px)}
.v7-veil[hidden]{display:none}
.v7-mobile{
 position:fixed;inset:0;z-index:97;display:flex;flex-direction:column;
 background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
 animation:v7-slide .24s ease both;
}
.v7-mobile[hidden]{display:none}
@keyframes v7-slide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.v7-mobile-head{
 display:flex;align-items:center;justify-content:space-between;gap:16px;
 padding:14px var(--gout);border-block-end:1px solid var(--line);
 position:sticky;inset-block-start:0;background:var(--bg);z-index:2;
}
.v7-mobile-close{
 display:inline-flex;align-items:center;justify-content:center;
 inline-size:44px;block-size:44px;border:1px solid var(--line);border-radius:12px;
 background:var(--surface);color:var(--wine);cursor:pointer;
}
.v7-mobile-close svg{inline-size:18px;block-size:18px}
.v7-mobile-nav{display:flex;flex-direction:column;padding:8px var(--gout) 4px}
.v7-mobile-nav>a{
 display:flex;align-items:center;justify-content:space-between;gap:12px;
 min-block-size:56px;padding-block:8px;border-block-end:1px solid var(--line);
 font-size:19px;font-weight:600;color:var(--wine);
}
.v7-mobile-nav>a svg{inline-size:16px;block-size:16px;color:var(--sub);flex:none}
.v7-mobile-group{padding:20px var(--gout) 4px}
.v7-mobile-group>p{
 margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--sub);
}
.v7-mobile-mods{display:grid;gap:2px}
.v7-mobile-mods a{display:block;min-block-size:48px;padding:9px 0;border-block-end:1px solid var(--line)}
.v7-mobile-mods strong{display:block;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--wine)}
.v7-mobile-mods span{display:block;font-size:13px;line-height:1.4;color:var(--sub)}
.v7-mobile-foot{
 margin-block-start:auto;display:grid;gap:14px;
 padding:22px var(--gout) calc(22px + env(safe-area-inset-bottom,0px));
 border-block-start:1px solid var(--line);background:var(--surface);
 position:sticky;inset-block-end:0;
}
.v7-mobile-foot .v7-langsel{justify-content:center}
.v7-mobile-foot .v7-langsel button{min-inline-size:44px;min-block-size:40px;font-size:13px}

/* ══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.v7-footer{background:var(--wine);color:rgba(247,244,239,.74);font-size:15px;margin-block-start:0}
.v7-footer a{color:rgba(247,244,239,.74);transition:color .2s ease}
.v7-footer a:hover{color:var(--gold)}
.v7-foot-main{
 display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:40px 32px;
 padding-block:66px 46px;
}
.v7-foot-brand .brand{margin-block-end:16px}
.v7-foot-brand .brand-name{color:rgba(247,244,239,.6)}
.v7-foot-brand .brand-name strong{color:var(--bg)}
.v7-foot-tagline{max-width:34ch;line-height:1.6;margin-block-end:18px}
.v7-foot-contact{display:grid;gap:8px;font-size:14px}
.v7-foot-contact a{display:inline-flex;align-items:center;gap:9px}
.v7-foot-contact svg{inline-size:15px;block-size:15px;color:var(--gold);flex:none}
.v7-foot-col h4{
 margin-block-end:16px;font-size:11px;font-weight:720;letter-spacing:.16em;
 text-transform:uppercase;color:var(--gold);
}
.v7-foot-col nav{display:flex;flex-direction:column;gap:10px;font-size:15px}
.v7-foot-domaines{
 display:flex;flex-wrap:wrap;gap:8px 22px;padding-block:20px;
 border-block-start:1px solid rgba(247,244,239,.12);font-size:13px;
}
.v7-foot-domaines span{color:rgba(247,244,239,.45);letter-spacing:.1em;text-transform:uppercase;font-size:11px;font-weight:700}
.v7-foot-bottom{
 display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
 padding-block:20px 34px;border-block-start:1px solid rgba(247,244,239,.12);font-size:13px;
}
.v7-foot-bottom .v7-langsel{background:transparent;border-color:rgba(247,244,239,.2)}
.v7-foot-bottom .v7-langsel button{color:rgba(247,244,239,.7)}
.v7-foot-bottom .v7-langsel button[aria-current=true]{background:var(--gold);color:var(--wine)}
.v7-foot-bottom a{text-decoration:underline;text-underline-offset:3px}

/* ══════════════════════════════════════════════════════════════════════════
   03 — HERO
   Le visuel est une COMPOSITION : trois captures réelles empilées et un
   ticket en HTML, reliés par des courbes. Tout est positionné en pourcentage
   d'une scène à proportions fixes, donc rien ne se décale d'un écran à
   l'autre et aucune image n'est rognée.
   ══════════════════════════════════════════════════════════════════════════ */
.v7-hero{padding-block:72px 88px;position:relative;overflow:hidden}
/* Zellige : présent, jamais visible en tant que motif. 5 % d'opacité. */
.v7-hero-motif{
 position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
 background:url('/assets/v7/pattern-zellige.svg') 0 0/180px 180px repeat;
 -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 25%,transparent 78%);
 mask-image:radial-gradient(120% 90% at 70% 10%,#000 25%,transparent 78%);
}
.v7-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.02fr;
 gap:52px;align-items:center}
.v7-hero-titre{margin-block:14px 20px}
.v7-hero-lead{max-width:52ch}
.v7-hero-cta{margin-block-start:30px;gap:12px}
.v7-hero-preuve{
 margin-block-start:22px;font-size:14.5px;line-height:1.6;color:var(--sub);
 padding-block-start:18px;border-block-start:1px solid var(--line);max-width:48ch;
}

.v7-hero-visuel{position:relative}
.v7-hero-scene{position:relative;inline-size:100%;aspect-ratio:6/5}
/* z-index 6 : AU-DESSUS des quatre appareils (2, 3, 4, 5). Le tracé vivait
   sous eux, et chacune de ses courbes passait dans le rectangle de la
   tablette, opaque : les lignes existaient dans le DOM et n'ont jamais été
   visibles une seule fois. Elles passent maintenant par-dessus, et leurs
   extrémités sont posées sur le BORD des appareils, dans les vides que la
   composition laisse. `pointer-events:none` : un calque plein écran au-dessus
   des captures ne doit intercepter aucun clic. */
.v7-hero-liens{position:absolute;inset:0;inline-size:100%;block-size:100%;z-index:6;
 overflow:visible;pointer-events:none}
.v7-hero-liens path{
 fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;
 stroke-dasharray:5 9;opacity:.75;
 animation:v7-flux 8s linear infinite;animation-play-state:paused;
}
.v7-hero-liens.v7-flux-on path{animation-play-state:running}
@keyframes v7-flux{from{stroke-dashoffset:0}to{stroke-dashoffset:-56}}

/* Cadres d'appareils : un liseré, un fond blanc, une ombre. Pas de photo de
   MacBook, pas de reflet — les captures sont déjà le sujet. */
.v7-dev{position:absolute;margin:0;background:var(--surface);border:1px solid var(--line);
 box-shadow:var(--ombre-forte);overflow:hidden}
.v7-dev img{inline-size:100%;block-size:auto;border-radius:6px}
.v7-dev--kds{inset-block-start:0;inset-inline-start:30%;inline-size:60%;
 padding:5px;border-radius:12px;z-index:2;transform:rotate(-3.2deg);opacity:.96}
.v7-dev--tab{inset-block-start:16%;inset-inline-start:4%;inline-size:80%;
 padding:7px;border-radius:16px;z-index:3}
.v7-dev--tel{inset-block-end:2%;inset-inline-start:1%;inline-size:21%;
 padding:4px;border-radius:20px;z-index:5}
.v7-dev--tel img{border-radius:16px}

/* Imprimante + ticket thermique — en HTML, donc net, traduisible et gratuit. */
.v7-print{position:absolute;inset-block-end:5%;inset-inline-end:0;inline-size:31%;
 min-inline-size:132px;z-index:4}
.v7-print-corps{block-size:15px;border-radius:8px 8px 3px 3px;background:var(--ink);
 box-shadow:var(--ombre-forte);display:flex;align-items:center;justify-content:center}
.v7-print-corps span{inline-size:62%;block-size:3px;border-radius:2px;background:rgba(247,244,239,.35)}
.v7-ticket{
 position:relative;background:var(--surface);color:var(--ink);
 font-family:var(--fm);font-size:9.5px;line-height:1.5;letter-spacing:-.01em;
 padding:10px 11px 14px;box-shadow:var(--ombre-forte);
 border-inline:1px solid var(--line);
}
/* Bord dentelé du bas : deux dégradés décalés, comme un ticket déchiré. */
.v7-ticket::after{
 content:"";position:absolute;inset-inline:0;inset-block-end:-6px;block-size:6px;
 background:
  linear-gradient(45deg,transparent 50%,var(--surface) 50%) 0 0/12px 6px repeat-x,
  linear-gradient(-45deg,transparent 50%,var(--surface) 50%) 6px 0/12px 6px repeat-x;
}
.v7-ticket p{margin:0}
.v7-ticket-nom{text-align:center;font-weight:700;letter-spacing:.14em;font-size:10px;color:var(--wine)}
.v7-ticket-sous{text-align:center;color:var(--sub);font-size:8.5px;letter-spacing:.04em;
 padding-block-end:7px;margin-block-end:7px;border-block-end:1px dashed var(--line)}
.v7-ticket-lignes{list-style:none;margin:0;padding:0}
.v7-ticket-lignes li{display:flex;justify-content:space-between;gap:8px}
.v7-ticket-lignes li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v7-ticket-total{display:flex;justify-content:space-between;gap:8px;font-weight:700;
 color:var(--wine);margin-block-start:7px;padding-block-start:7px;border-block-start:1px dashed var(--line)}
.v7-ticket-tva{display:flex;justify-content:space-between;gap:8px;color:var(--sub);font-size:8.5px}
.v7-ticket-pied{text-align:center;color:var(--sub);font-size:8.5px;margin-block-start:8px}

/* ══════════════════════════════════════════════════════════════════════════
   04 — PREUVES CHIFFRÉES
   ══════════════════════════════════════════════════════════════════════════ */
.v7-trust .sec-head{margin-block-end:44px}
.v7-stats{gap:14px}
.v7-stat{
 padding:26px 24px;border-radius:var(--r);
 background:rgba(247,244,239,.05);border:1px solid rgba(213,166,66,.22);
}
.v7-stat__v{
 font-size:clamp(30px,3.4vw,42px);line-height:1.05;margin:0 0 8px;
 white-space:nowrap;font-variant-numeric:tabular-nums;
}
.v7-stat__v--txt{font-size:clamp(16px,1.45vw,20px);line-height:1.35;white-space:normal;letter-spacing:.02em;min-block-size:1.35em}
.v7-stat__l{margin:0;font-size:15px;font-weight:600;color:var(--bg);letter-spacing:-.01em}
.v7-stat__n{margin:10px 0 0;font-size:13.5px;line-height:1.55;color:rgba(247,244,239,.62)}

/* ══════════════════════════════════════════════════════════════════════════
   05 — MÉTIERS
   ══════════════════════════════════════════════════════════════════════════ */
.v7-chips{
 display:flex;gap:8px;flex-wrap:wrap;margin-block-end:34px;
 padding-block-end:2px;
}
.v7-chip{
 border:1px solid var(--line);background:var(--bg);color:var(--sub);
 padding:9px 16px;border-radius:999px;font-size:14.5px;font-weight:560;
 cursor:pointer;white-space:nowrap;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.v7-chip:hover{border-color:var(--wine);color:var(--wine)}
.v7-chip.is-on,.v7-chip[aria-selected=true]{background:var(--wine);border-color:var(--wine);color:var(--bg)}
.v7-metier[hidden]{display:none}
.v7-metier-grille{gap:44px;align-items:center}
.v7-metier-img{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
 box-shadow:var(--ombre)}
.v7-metier-img img{inline-size:100%;block-size:auto}
.v7-metier-txt h3{margin-block-end:12px}
.v7-metier-mods{gap:8px;margin-block:18px}
.v7-lab{
 margin:0 0 12px;font-size:11.5px;font-weight:720;letter-spacing:.14em;
 text-transform:uppercase;color:var(--sub);
}
.v7-metier-alias{margin-block-start:18px;padding-block-start:14px;border-block-start:1px solid var(--line);
 font-size:13px;color:var(--sub)}

/* ══════════════════════════════════════════════════════════════════════════
   06 — ÉCOSYSTÈME
   Huit modules en anneau autour du logo. Chaque nœud est centré dans la
   scène puis poussé le long de son rayon : aucune coordonnée codée à la
   main, aucune propriété physique — l'anneau se comporte pareil en arabe.
   ══════════════════════════════════════════════════════════════════════════ */
.v7-eco{position:relative}
.v7-ring{
 --ring:480px;--rad:182px;
 position:relative;inline-size:var(--ring);block-size:var(--ring);
 margin-inline:auto;margin-block-end:46px;
}
.v7-ring-liens{position:absolute;inset:0;inline-size:100%;block-size:100%}
.v7-ring-liens line,.v7-ring-liens circle{fill:none;stroke:rgba(213,166,66,.55);stroke-width:.45;stroke-dasharray:1.4 2.2}
.v7-ring-slot{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.v7-ring-slot>*{pointer-events:auto}
.v7-ring-node{
 transform:rotate(var(--a)) translate(var(--rad)) rotate(calc(-1 * var(--a)));
 inline-size:106px;min-block-size:52px;padding:8px 6px;cursor:pointer;
 border:1px solid var(--line);border-radius:14px;background:var(--surface);
 box-shadow:var(--ombre);color:var(--sub);
 font-size:12.5px;font-weight:700;letter-spacing:.05em;
 transition:border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.v7-ring-node span{display:block;direction:ltr;unicode-bidi:isolate}
.v7-ring-node:hover{border-color:var(--gold);color:var(--wine)}
.v7-ring-node.is-on,.v7-ring-node[aria-selected=true]{
 background:var(--wine);border-color:var(--wine);color:var(--bg);box-shadow:var(--ombre-forte);
}
.v7-ring-core{
 display:grid;place-items:center;gap:8px;inline-size:148px;block-size:148px;
 border-radius:50%;background:var(--surface);border:1px solid var(--line);
 box-shadow:var(--ombre-forte);text-align:center;
}
.v7-ring-core img{inline-size:46px;block-size:46px;border-radius:12px}
.v7-ring-core span{font-size:10.5px;font-weight:760;letter-spacing:.16em;color:var(--wine);direction:ltr}

.v7-eco-panel[hidden]{display:none}
.v7-eco-panel{padding:28px}
.v7-eco-grille{gap:36px;align-items:center}
.v7-eco-shot{margin:0;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
 box-shadow:var(--ombre);background:var(--surface)}
.v7-eco-shot img{inline-size:100%;block-size:auto}
/* Trois modules n'ont pas de capture : un bloc icône assumé, jamais une
   fausse capture d'écran. */
.v7-eco-mark{
 display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--r-sm);
 background:var(--wine);color:var(--gold);
 box-shadow:inset 0 0 0 1px rgba(213,166,66,.28);
}
.v7-eco-mark svg{inline-size:76px;block-size:76px;stroke-width:1.2}
.v7-eco-txt .eyebrow{margin-block-end:10px}
.v7-eco-txt h3{margin-block-end:12px}
.v7-eco-txt .check-list{margin-block:18px}

/* ══════════════════════════════════════════════════════════════════════════
   07-12 — SECTIONS PRODUIT (CM POS, KITCHEN, STOCK, PILOT, CONNECT, HARDWARE)
   Trois composants partagés : la capture mise en scène (.v7-stage), la
   pastille (.v7-pill) et la frise à nœuds numérotés (.v7-frise) — même socle
   ivoire, même cadre, sur les six sections, pour que la page reste cohérente
   malgré des captures dont certaines sont en thème sombre (CM STOCK).
   ══════════════════════════════════════════════════════════════════════════ */
.v7-stage{background:var(--bg);border-radius:var(--r);padding:32px;display:grid;
 place-items:center;margin-block-end:40px}
.v7-stage-frame{
 position:relative;max-inline-size:460px;inline-size:100%;border-radius:16px;
 border:1px solid var(--line);box-shadow:var(--ombre-forte);overflow:hidden;
 background:var(--surface);padding:10px;
}
.v7-stage-frame img{border-radius:8px}
.v7-stage-frame--phone{max-inline-size:220px;border-radius:32px;padding:14px}
.v7-stage-frame--phone img{border-radius:20px}

.v7-pill{padding:16px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--line)}
.v7-pill-t{margin:0 0 4px;font-size:15px;color:var(--wine)}
.v7-pill-x{margin:0;font-size:13.5px;line-height:1.5;color:var(--sub)}
.v7-cmpos-grille{align-items:start}
.v7-cmpos-grille .v7-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.v7-cmstock-pills{margin-block-start:36px}

.v7-frise{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
 gap:0;margin:0 0 40px;padding:0}
.v7-frise-step{display:flex;align-items:center;gap:12px}
.v7-num-rond{
 display:inline-flex;align-items:center;justify-content:center;flex:none;
 inline-size:30px;block-size:30px;border-radius:50%;
 background:var(--wine);color:var(--gold);font-size:13px;font-weight:760;
}
.v7-frise-lab{font-size:14.5px;font-weight:620;color:var(--wine);white-space:nowrap}
.v7-frise-arrow{display:inline-flex;color:var(--gold);margin-inline:14px;flex:none}
.v7-frise-arrow svg{inline-size:16px;block-size:16px}
/* Sur fond sombre, la puce du numéro s'inverse pour rester lisible. */
.v7-section--kitchen .v7-num-rond{background:var(--gold);color:var(--wine)}
.v7-section--kitchen .v7-frise-lab{color:var(--bg)}
/* Le chapeau de CM KITCHEN est centré (sec-head--center) : la frise doit
   l'être aussi, sinon elle démarre collée au bord sous un titre centré. */
.v7-section--kitchen .v7-frise{justify-content:center}

/* ── 08 CM KITCHEN — statuts, et la commande qui « apparaît » une fois ──── */
.v7-kitchen-txt{align-self:center}
.v7-lab{
 margin:0 0 12px;font-size:11.5px;font-weight:720;letter-spacing:.14em;
 text-transform:uppercase;color:var(--sub);
}
.v7-section--kitchen .v7-lab{color:rgba(247,244,239,.55)}
/* Légende : puce + explication d'une ligne par statut, pas juste trois puces
   côte à côte — donne au bloc de droite un vrai poids face à la capture. */
.v7-kitchen-legend{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.v7-kitchen-legend li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v7-kitchen-legend-x{font-size:14px;line-height:1.5;color:rgba(247,244,239,.68)}
/* La carte protège maintenant hors du cadre (overflow visible sur CE cadre
   seulement) : elle ne recouvre plus jamais un pixel de la vraie capture. */
.v7-cmkitchen .v7-stage-frame{overflow:visible}
.v7-kds-card{
 position:absolute;inset-block-start:-14px;inset-inline-end:-14px;inline-size:132px;
 padding:9px 11px;border-radius:12px;background:var(--surface);color:var(--ink);
 border:1px solid var(--line);box-shadow:var(--ombre-forte);
 font-size:11px;line-height:1.4;opacity:1;
}
.v7-kds-card b{display:block;color:var(--wine);font-size:11.5px;margin-block-end:2px}
/* La carte reste visible tout de suite sans JavaScript ; sous js-reveal elle
   part masquée puis « apparaît » une fois, 1,5 s après l'entrée en vue. */
.js-reveal .v7-kds-card{opacity:0}
.js-reveal .reveal.in .v7-kds-card{animation:v7-kds-pop .5s ease 1.5s both}
@keyframes v7-kds-pop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}

/* ── 10 CM PILOT — bascule et légende ─────────────────────────────────── */
/* La mention de démonstration est maintenant la légende (figcaption) du
   cadre commun aux deux vues (téléphone ET cartes établissement) : quel que
   soit le panneau affiché, elle reste visible sous lui — jamais seulement
   sous le téléphone. */
.v7-pilot-stage{display:block}
.v7-pilot-stage .v7-stage-frame--phone{margin-inline:auto}
.v7-pilot-note{margin-block:20px 0}
.v7-pilot-toggle{margin-block-end:30px;gap:8px}
.v7-pilot-toggle button{
 padding:10px 18px;border-radius:999px;border:1px solid var(--line);
 background:var(--surface);color:var(--sub);font-size:14.5px;font-weight:620;
 cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.v7-pilot-toggle button[aria-pressed=true]{background:var(--wine);border-color:var(--wine);color:var(--bg)}
.v7-pilot-grille{align-items:start}
.v7-pilot-panel{transition:opacity .3s ease;opacity:0}
.v7-pilot-panel.is-on{opacity:1}
.v7-pilot-panel[hidden]{display:none}
.v7-pilot-multilead{margin-block-end:18px}
.v7-pilot-site h3{margin-block-end:14px;font-size:16px}
.v7-pilot-site-stats{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.v7-pilot-site-stats li{display:flex;justify-content:space-between;gap:10px;
 font-size:13.5px;color:var(--sub)}
.v7-pilot-kpis li{font-size:15.5px}

/* ── 11 CM CONNECT — hub + trois groupes verrouillés par le CMS ─────────── */
.v7-connect-hub{
 display:grid;place-items:center;inline-size:76px;block-size:76px;
 border-radius:50%;margin:0 auto 40px;background:var(--wine);color:var(--gold);
 box-shadow:inset 0 0 0 1px rgba(213,166,66,.28);
}
.v7-connect-col{text-align:center}
.v7-connect-h{margin-block-end:16px;font-size:12.5px;font-weight:720;
 letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}
.v7-connect-chips{justify-content:center;gap:8px}

/* ── 12 CM HARDWARE — deux parcours, étapes numérotées ──────────────────── */
.v7-hw-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.v7-hw-steps li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--sub)}
.v7-hw-note{margin-block:24px 0;max-inline-size:64ch}
.v7-hw-cta{margin-block-start:28px}

/* ── 13 WORKFLOW — cinq étapes, connecteur léger, verticales sur mobile ──── */
.v7-flow{display:flex;flex-wrap:wrap;gap:28px;margin:0;padding:0;list-style:none}
.v7-flow-step{flex:1 1 180px;display:flex;flex-direction:column;gap:8px;position:relative}
.v7-flow-step:not(:last-child)::after{
 content:"";position:absolute;inset-block-start:15px;inset-inline-start:calc(100% + 4px);
 inline-size:20px;block-size:1px;background:var(--line);
}
.v7-flow-t{margin:0;font-size:16px}
.v7-flow-x{margin:0;font-size:13.5px;color:var(--sub)}

/* ── 14 FORMULES — cartes, équation, comparateur à 3 lignes ──────────────── */
.v7-formule-card{text-align:center;display:flex;flex-direction:column;gap:10px}
.v7-formule-name{margin:0;font-size:13px;font-weight:760;letter-spacing:.12em;color:var(--wine)}
.v7-formule-pitch{margin:0;font-size:13.5px;color:var(--sub);min-block-size:2.7em}
.v7-formule-price{margin:0;font-size:14.5px;font-weight:620;color:var(--ink)}
.v7-formule-price bdi{font-size:23px;font-weight:760;color:var(--wine)}
.v7-formule-equation{text-align:center;font-size:15px;color:var(--sub);margin-block:32px}
.v7-compare-wrap{overflow-x:auto;margin-block-end:8px}
.v7-compare{inline-size:100%;border-collapse:collapse;font-size:13.5px;min-inline-size:480px}
.v7-compare th,.v7-compare td{padding:12px 14px;border-block-end:1px solid var(--line);text-align:center}
.v7-compare th[scope=row]{text-align:start;color:var(--sub);font-weight:600}
.v7-compare thead th{color:var(--wine);font-weight:760}
.v7-formule-cta{justify-content:center;margin-block-start:8px}

/* ── 15 POURQUOI — deux colonnes, aucun nom de concurrent ────────────────── */
.v7-why-grille{gap:36px}
.v7-why-col--mahali h3{color:var(--wine)}
.v7-why-neg li::before{background:var(--sub);opacity:.6}

/* ── 16 MAROC — carte en fond à 6 %, nœuds bordeaux/or (numRond) ─────────── */
.v7-maroc{position:relative;overflow:hidden}
.v7-maroc-map{position:absolute;inset-inline-end:-60px;inset-block-start:-20px;
 inline-size:420px;block-size:420px;opacity:.06;pointer-events:none;z-index:0}
.v7-maroc-map img{inline-size:100%;block-size:100%}
.v7-maroc-grid{position:relative;z-index:1}
.v7-maroc-item{display:flex;gap:14px;align-items:flex-start}
.v7-maroc-item h3{margin:0 0 6px;font-size:16px}
.v7-maroc-item p{margin:0;font-size:14px;color:var(--sub)}

/* ── 17 RÉFÉRENCES ────────────────────────────────────────────────────────── */
.v7-ref-card{display:flex;flex-direction:column;gap:14px}
.v7-ref-quote{margin:0;font-size:16px;color:var(--ink)}
.v7-ref-meta{display:flex;align-items:center;gap:12px}
.v7-ref-logo{inline-size:40px;block-size:40px;border-radius:10px;object-fit:contain;background:var(--bg)}
.v7-ref-name{margin:0;font-size:14px;font-weight:700;color:var(--wine)}
.v7-ref-sub{margin:2px 0 0;font-size:12.5px;color:var(--sub)}
.v7-ref-mods{margin:0}

/* ── 18 DÉMO — tablist réutilisant .v7-chips, panneaux type CM POS ───────── */
.v7-demo-grille{align-items:center}
.v7-demo-txt h3{margin-block-end:10px}
.v7-demo-cta{margin-block-start:28px}

/* ── 19 CONFIGURATEUR — assistant à 6 étapes en une carte ────────────────── */
.v7-wizard{padding:32px}
.v7-wizard-steps{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:28px}
.v7-wizard-dot{
 display:inline-flex;align-items:center;justify-content:center;
 inline-size:28px;block-size:28px;border-radius:50%;font-size:12.5px;font-weight:700;
 background:var(--bg);color:var(--sub);border:1px solid var(--line);
}
.v7-wizard-dot.is-on{background:var(--wine);border-color:var(--wine);color:var(--bg)}
.v7-wizard-panel h3{margin-block-end:6px}
.v7-wizard-panel .note{margin-block-end:18px}
.v7-field{display:flex;flex-direction:column;gap:6px;font-size:14px;margin-block-end:14px;max-inline-size:420px}
.v7-field label{font-weight:620;color:var(--ink)}
.v7-field input{
 padding:12px 14px;border:1px solid var(--line);border-radius:10px;
 font:inherit;background:var(--surface);color:var(--ink);inline-size:100%;
}
.v7-field input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.v7-wizard-details{margin-block-start:18px;padding-block-start:18px;border-block-start:1px solid var(--line)}
.v7-hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}
.v7-wizard-nav{margin-block-start:8px;justify-content:space-between}
.v7-wizard-msg{margin-block-start:16px;font-size:14.5px;font-weight:600}
.v7-wizard-msg--ok{color:var(--green)}
.v7-wizard-msg--err{color:var(--action)}
.v7-wizard-lien{margin-block-start:20px}

/* ── 20 CTA FINAL ─────────────────────────────────────────────────────────── */
.v7-final-cta-inner{text-align:center;max-inline-size:720px;margin-inline:auto}
.v7-final-cta-actions{justify-content:center;margin-block-start:28px}
.v7-final-cta .btn-ghost{color:var(--bg);border-color:rgba(247,244,239,.4)}
.v7-final-cta .btn-ghost:hover{background:rgba(247,244,239,.1);border-color:var(--bg)}

/* ── BARRE MOBILE COLLANTE + WHATSAPP FLOTTANT ───────────────────────────── */
.v7-sticky-cta{
 display:none;position:fixed;inset-inline:0;inset-block-end:0;z-index:40;
 justify-content:center;padding:12px var(--gout);
 padding-block-end:calc(12px + env(safe-area-inset-bottom));
 background:var(--surface);border-block-start:1px solid var(--line);
 box-shadow:0 -8px 24px rgba(32,26,28,.1);
 transform:translateY(100%);transition:transform .3s ease;
}
.v7-sticky-cta.is-on{transform:translateY(0)}
.v7-sticky-cta .btn{inline-size:100%;justify-content:center}
.v7-wa-float{
 display:none;position:fixed;inset-inline-end:16px;inset-block-end:16px;z-index:39;
 inline-size:52px;block-size:52px;border-radius:50%;
 background:var(--action);color:#fff;align-items:center;justify-content:center;
 box-shadow:0 8px 20px rgba(111,18,53,.32);
}
.v7-wa-float[hidden],.v7-wa-float.v7-masque{display:none}

/* ══════════════════════════════════════════════════════════════════════════
   APPARITION AU DÉFILEMENT
   Contrat des tâches 4 à 6 : poser .reveal sur un bloc, v7.js ajoute .in
   quand il entre dans la fenêtre. Sans JavaScript, rien n'est masqué.
   ══════════════════════════════════════════════════════════════════════════ */
.reveal{opacity:1}
.js-reveal .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .reveal-d1{transition-delay:.08s}
.js-reveal .reveal-d2{transition-delay:.16s}
.js-reveal .reveal-d3{transition-delay:.24s}

/* ══════════════════════════════════════════════════════════════════════════
   MOUVEMENT RÉDUIT — tout s'arrête, rien ne disparaît.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important;
 }
 .js-reveal .reveal,.js-reveal .reveal.in{opacity:1;transform:none}
 .card-hover:hover{transform:none}
 .v7-mega,.v7-mobile{animation:none}
 .js-reveal .v7-kds-card,.js-reveal .reveal.in .v7-kds-card{opacity:1;animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ARABE ET RTL
   Aucune règle miroir : la mise en page est déjà logique. Ce bloc ne change
   que ce qui ne peut pas l'être — la police, le rythme du texte arabe, et
   le nom de marque, qui se lit toujours de gauche à droite.
   ══════════════════════════════════════════════════════════════════════════ */
html[dir=rtl]{--ff:var(--fa)}
body.ar{font-family:var(--fa);font-size:17px;line-height:1.85;letter-spacing:0}
body.ar h1,body.ar h2,body.ar h3,body.ar h4{letter-spacing:0;line-height:1.35;font-weight:700}
body.ar h1{font-size:clamp(32px,4.4vw,52px)}
body.ar h2{font-size:clamp(27px,3.2vw,40px)}
body.ar em{font-family:var(--fa);font-style:normal;font-weight:700;color:var(--action)}
body.ar .eyebrow{letter-spacing:0;font-size:12px}
body.ar .lead{font-size:18px;line-height:1.9}
body.ar .brand{direction:ltr}
body.ar .brand-name{letter-spacing:.18em}
body.ar .v7-nav>a,body.ar .v7-trigger{font-size:15px}
body.ar .v7-mega-item strong{letter-spacing:0}
body.ar .v7-foot-col h4{letter-spacing:0;font-size:13px}
body.ar .v7-mobile-group>p{letter-spacing:0;font-size:13px}
body.ar .badge,body.ar .v7-foot-domaines span{letter-spacing:0}
body.ar .card-text,body.ar .check-list li{font-size:16px}
/* Les modules, domaines et chiffres gardent l'alphabet latin. */
body.ar .v7-mega-item strong,body.ar .v7-foot-domaines a,body.ar .num,body.ar bdi{direction:ltr;unicode-bidi:isolate}
/* Une flèche « suivant » suit le sens de lecture : à gauche en arabe. */
html[dir=rtl] .text-link svg,html[dir=rtl] .btn svg{transform:scaleX(-1)}
html[dir=rtl] .v7-frise-arrow svg{transform:scaleX(-1)}
/* Le ticket est en police à chasse fixe latine, resserrée : appliquée à
   l'arabe, cette chasse détache les lettres d'un mot lié. On repasse donc en
   pile arabe, interlettrage neutre, sur le ticket seulement. Les montants
   restent isolés en LTR par leurs <bdi>. */
body.ar .v7-ticket{font-family:var(--fa);letter-spacing:0;font-size:10px;line-height:1.65}
body.ar .v7-ticket-nom,body.ar .v7-ticket-sous,body.ar .v7-ticket-pied,
body.ar .v7-ticket-tva{letter-spacing:0}
/* Le motif du hero est ancré côté visuel : il suit lui aussi la lecture. */
html[dir=rtl] .v7-hero-motif{-webkit-mask-image:radial-gradient(120% 90% at 30% 10%,#000 25%,transparent 78%);mask-image:radial-gradient(120% 90% at 30% 10%,#000 25%,transparent 78%)}

/* ══════════════════════════════════════════════════════════════════════════
   RUPTURES — 1190 / 960 / 720 / 374
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1190px){
 :root{--gout:28px;--sec-pad:88px}
 .v7-head-inner{gap:18px}
 .v7-nav{gap:0}
 .v7-nav>a,.v7-trigger{padding-inline:9px;font-size:14px}
 .v7-login{display:none}
 .grid-split{gap:40px}
 .v7-foot-main{grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:34px 24px}
 .v7-hero-inner{gap:36px}
 .v7-ring{--ring:410px;--rad:156px}
 .v7-ring-core{inline-size:132px;block-size:132px}
 .v7-metier-grille{gap:32px}
}

@media (max-width:960px){
 :root{--gout:24px;--sec-pad:72px;--head-h:64px}
 .v7-nav{display:none}
 .v7-burger{display:inline-flex}
 .v7-head-cta{display:none}
 .v7-head-actions{margin-inline-start:auto}
 .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
 .grid-split{grid-template-columns:1fr;gap:32px}
 .sec-head{margin-block-end:38px}
 .v7-foot-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;padding-block:52px 36px}
 .v7-foot-brand{grid-column:1 / -1}
 .v7-hero{padding-block:48px 64px}
 /* Le texte d'abord, le visuel ensuite : les deux boutons restent au-dessus
    de la ligne de flottaison sur un téléphone. */
 .v7-hero-inner{grid-template-columns:1fr;gap:40px}
 .v7-hero-visuel{max-inline-size:520px;margin-inline:auto;inline-size:100%}
 .v7-hero-lead,.v7-hero-preuve{max-width:none}
 .v7-stats{gap:12px}
 .v7-stat{padding:22px 20px}
 .v7-ring{--ring:344px;--rad:130px}
 .v7-ring-core{inline-size:112px;block-size:112px}
 .v7-ring-core img{inline-size:38px;block-size:38px}
 .v7-ring-node{inline-size:92px;min-block-size:46px;font-size:11.5px}
 .v7-eco-panel{padding:22px}
}

@media (max-width:720px){
 :root{--gout:20px;--sec-pad:60px}
 body{font-size:16px}
 .lead{font-size:17px}
 .grid,.grid-2,.grid-3,.grid-4,.grid-auto{grid-template-columns:1fr;gap:18px}
 .card{padding:22px}
 .v7-langsel{display:none}
 .v7-head-actions{gap:8px}
 .v7-mobile-foot .v7-langsel{display:inline-flex}
 .v7-announce{font-size:13px}
 .v7-announce-inner{padding-inline-end:36px;gap:8px}
 .v7-foot-main{grid-template-columns:1fr;gap:30px;padding-block:44px 30px}
 .v7-foot-bottom{flex-direction:column;align-items:flex-start;padding-block-end:28px}
 .v7-foot-domaines{gap:6px 16px}
 .btn{inline-size:auto}
 .sec-head{margin-block-end:30px}

 /* Hero : la scène se resserre, l'écran de cuisine (décoratif, en arrière-
    plan) laisse la place. Rien n'est rogné — les trois pièces restantes
    gardent leurs proportions. */
 .v7-hero-scene{aspect-ratio:5/4}
 .v7-dev--kds{display:none}
 .v7-dev--tab{inset-block-start:4%;inset-inline-start:0;inline-size:84%}
 .v7-dev--tel{inline-size:24%;inset-block-end:0}
 .v7-print{inline-size:34%;min-inline-size:118px;inset-block-end:2%}
 .v7-hero-cta .btn{flex:1 1 auto;justify-content:center}

 /* Les puces métier défilent horizontalement, jusqu'au bord de l'écran. */
 .v7-chips{
  flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:calc(var(--gout) * -1);padding-inline:var(--gout);
  padding-block-end:6px;-webkit-overflow-scrolling:touch;
 }
 .v7-chip{scroll-snap-align:start;flex:none}
 .v7-metier-grille{gap:22px}

 /* L'anneau n'a pas de sens sur 375 px : il redevient une file de modules
    que l'on fait défiler. Les mêmes boutons, la même sémantique ARIA. */
 .v7-ring{
  --ring:auto;inline-size:auto;block-size:auto;
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;
  margin-inline:calc(var(--gout) * -1);padding-inline:var(--gout);
  padding-block-end:6px;margin-block-end:26px;
 }
 .v7-ring-slot{position:static;display:contents}
 .v7-ring-slot--core,.v7-ring-liens{display:none}
 .v7-ring-node{transform:none;flex:none;scroll-snap-align:start;inline-size:108px}
 .v7-eco-panel{padding:18px}
 .v7-eco-grille{gap:20px}

 /* 07-12 : la frise verticale plutôt qu'un défilement supplémentaire — les
    numéros suffisent à lire l'ordre, la flèche pivote pour suivre. */
 .v7-frise{flex-direction:column;align-items:flex-start;gap:14px;margin-block-end:32px}
 .v7-frise-arrow{transform:rotate(90deg);margin-inline:9px}
 .v7-cmpos-grille .v7-pills{grid-template-columns:1fr}
 .v7-stage{padding:20px}
 .v7-pilot-toggle button{flex:1 1 auto;text-align:center}
 .v7-hw-cta .btn{inline-size:100%;justify-content:center}

 /* 13-20 : connecteur du flux masqué (la colonne suffit), assistant en
    pleine largeur, barre collante + WhatsApp flottant activés. */
 .v7-flow{flex-direction:column;gap:20px}
 .v7-flow-step:not(:last-child)::after{display:none}
 .v7-wizard{padding:22px}
 .v7-wizard-nav .btn{flex:1 1 auto;justify-content:center}
 .v7-final-cta-actions .btn{flex:1 1 auto;justify-content:center}
 .v7-sticky-cta{display:flex}
 .v7-wa-float{display:flex}
}

@media (max-width:374px){
 :root{--gout:16px}
 .brand-name strong{font-size:14px}
 .v7-mobile-nav>a{font-size:17px}
 .btn{padding-inline:18px;font-size:15px}
}

@media print{
 .v7-header,.v7-announce,.v7-mobile,.v7-veil,.v7-burger{display:none!important}
 body{background:#fff;font-size:12pt}
}