/* ==========================================================================
   Gillia — Site vitrine
   Design : crème éditorial × liquid glass, accent vert → cyan
   ========================================================================== */

/* ---------- 1. Variables & reset ---------- */
:root{
  --bg:        #F6F5EE;
  --bg-soft:   #FBFAF4;
  --surface:   #FFFFFF;
  --ink:       #15211B;
  --ink-soft:  #15353C;
  --ink-faint: #13343B;
  --line:      rgba(21,33,27,.10);
  --line-soft: rgba(21,33,27,.06);

  --green:      rgb(29,158,117);
  --green-deep: #004241;
  --green-ink:  #0C1F17;
  --teal:       #14A3A0;
  --blue:       #00ee9f;

  --grad-ia: linear-gradient(105deg, var(--green) 10%, var(--teal) 55%, var(--blue) 110%);
  --grad-btn: linear-gradient(135deg, #22B585, var(--green) 45%, var(--green-deep));

  --glass-bg: rgba(255,255,255,.58);
  --glass-line: rgba(255,255,255,.72);

  --r-lg: 15px;
  --r-md: 11px;
  --r-sm: 8px;

  --shadow-soft: 0 6px 24px rgba(21,33,27,.07);
  --shadow-lift: 0 18px 50px rgba(21,33,27,.12);

  --font-serif: "gira-sans", Arial, sans-serif;
  --font-sans: "Inter", "Segoe UI", system-ui, sans-serif;

  --ease-spring: cubic-bezier(.22,.9,.3,1.05);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.page-integrations{
  background:linear-gradient(180deg, #fff 0%, #fff 8%, #FAF9F3 42%, var(--bg) 100%);
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:rgba(29,158,117,.22); }

/* ---------- 2. Typo & utilitaires ---------- */
.container{ width:min(1260px, 100% - 48px); margin-inline:auto; }

h1,h2,h3,h4,.serif{
  font-family:var(--font-serif);
  line-height:1;
}

h1{ font-size:clamp(40px, 8.2vw, 72px); font-weight:500; letter-spacing:-.069em; }
h2{ font-size:clamp(31px, 5.4vw, 48px); font-weight:500; letter-spacing:-.073em; }
h3{ font-size:20px; font-weight:500; letter-spacing:-.065em; }
h4{ font-size:22px; font-weight:700; letter-spacing:-.4px; }
h5{ font-size:15px; font-weight:700; letter-spacing:0px; line-height:2em; text-transform: uppercase; }
p{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  letter-spacing:-0.3px;
}

.lead{
  font-size:clamp(16.5px, 1.1vw + 13px, 19px);
  letter-spacing:-0.04em;
  color:var(--ink-soft);
  max-width:56ch;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-deep);
}
.eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:var(--grad-ia);
}

em.grad{ font-style:normal; }

.section{ padding:clamp(72px, 9vw, 120px) 0; }
.section-head{ max-width:680px; margin-bottom:clamp(36px, 5vw, 60px); }
.section-head .lead{ margin-top:16px; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-head h2{ margin-top:14px; }

/* Boutons */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:999px;
  font-weight:600; font-size:1rem; line-height:1;
  transition:top .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn::after{
  content:""; position:absolute; z-index:-1;
  left:3px; right:3px; bottom:-2px; height:20px;
  border-radius:0 0 999px 999px;
  background:var(--grad-ia);
  box-shadow:0 3px 10px rgba(20,163,160,.35);
  transform:scaleX(1); transform-origin:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ top:-2px; }
.btn:active{ top:0; transition-duration:.08s; }
.btn:hover::after{
  transform:scaleX(1.01);
  box-shadow:0 4px 12px rgba(20,163,160,.45);
}
.btn svg{ width:17px; height:17px; }

.btn-primary{
  background:#0e291e;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(14,41,30,.28); }
.btn-ghost{
  border:1.5px solid var(--line-soft);
  background:rgba(255,255,255,.5);
  color:var(--ink);
}
.btn-ghost:hover{ border-color:rgba(29,158,117,.45); background:rgba(255,255,255,.75); }

.btn-light{
  background:linear-gradient(180deg, #ffffff 0%, #eef3ef 100%);
  color:var(--green-ink);
  box-shadow:
    inset 0 1px 0 #ffffff,                 /* arête supérieure lumineuse */
    inset 0 0 0 1px rgba(255,255,255,.55),  /* liseré net */
    0 2px 6px rgba(8,20,15,.18),            /* ombre de contact */
    0 12px 28px rgba(8,20,15,.22);          /* flottement sur fond sombre */
  transition:top .2s ease, box-shadow .25s ease, background .25s ease;
}
.btn-light:hover{
  background:linear-gradient(180deg, #ffffff 0%, #f5f8f6 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 4px 10px rgba(8,20,15,.20),
    0 20px 42px rgba(8,20,15,.32);
}
.btn-light:active{
  box-shadow:
    inset 0 2px 5px rgba(8,20,15,.16),      /* enfoncé au clic */
    0 2px 8px rgba(8,20,15,.18);
}
/* Halo de marque sous le bouton clair (le liseré ::after du fond sombre) */
.btn-light::after{ box-shadow:0 5px 16px rgba(20,163,160,.5); }
.btn-light:hover::after{ box-shadow:0 9px 24px rgba(20,163,160,.62); }

.btn-sm{ padding:11px 20px; font-size:.92rem; }

/* Verre */
.glass{
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-sm);
  /* Verre clair allégé : le fond reste visible, mais sans les biseaux/halos
     internes qui surchargeaient le rendu. */
  background:
    linear-gradient(150deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.18) 100%);
  backdrop-filter:blur(7px) saturate(120%);
  -webkit-backdrop-filter:blur(7px) saturate(120%);
  box-shadow:
    0 20px 48px rgba(21,33,27,.13),        /* flottement */
    inset 0 1px 1px rgba(255,255,255,.7);  /* arête supérieure brillante */
}

/* Apparition au scroll */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s var(--ease-spring); transition-delay:var(--rd, 0s); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- 3. Navigation ---------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  width:100%;
  margin:0;
  display:flex; align-items:center; gap:24px;
  padding:9px clamp(18px, 4vw, 64px);
  border-radius:0;
  background:rgba(253,252,249,.48);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  border:0;
  border-bottom:1px solid rgba(21,33,27,.06);
  box-shadow:none;
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled .nav{
  background:rgba(253,252,249,.88);
  box-shadow:0 6px 20px rgba(21,33,27,.07);
}

.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:500; font-size:1.22rem; letter-spacing:-.04em; }
.nav-logo{ width:auto; height:40px; flex:none; }
.nav-wordmark{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  color:var(--ink);
  font-family:"gira-sans", var(--font-sans);
  font-size:1.35rem;
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1;
}
.logo-circle{
  display:inline-block;
  width:30px; height:30px; flex:none;
  position:relative;
  border-radius:50%;
  background:conic-gradient(from 180deg, #34d399, #cfd5ee, #1f89a1, #20DFBB);
  box-shadow:
    0 0 0 4px rgba(16, 185, 129, 0.145),
    0 8px 20px -8px rgba(209, 204, 239, 0.5);
  animation:logo-spin 9s linear infinite;
}
.logo-circle::after{
  content:"";
  position:absolute; inset:0;
  background:url("../images/logo-j.svg") center / auto 60% no-repeat;
  /* contre-rotation synchronisée : le fond tourne, pas le J */
  animation:logo-spin-rev 9s linear infinite;
}
.logo-circle--chat{ width:36px; height:36px; }
.logo-circle--chat-sm{
  width:24px; height:24px;
  margin:2px;
}
/* Chats (démos) : on garde l'ancien logo — reflet glossy, sans le J */
.logo-circle--chat::after,
.logo-circle--chat-sm::after{
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.2));
  animation:none;                 /* le reflet tourne avec le cercle, comme avant */
}
.logo-circle--chat::after{ inset:2px; }
.logo-circle--chat-sm::after{ inset:1.5px; }
@keyframes logo-spin{ to{ transform:rotate(360deg); } }
@keyframes logo-spin-rev{ to{ transform:rotate(-360deg); } }

.nav-links{
  position:absolute;
  left:50%;
  translate:-50% 0;
  display:flex;
  align-items:center;
  gap:24px;
}
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 0;
  font-weight:500; font-size:.92rem; color:var(--ink-soft);
  transition:color .2s ease, opacity .2s ease;
}
.nav-link:hover, .nav-link[aria-current="page"]{ color:var(--ink); }
.nav-link .chev{ width:11px; height:11px; transition:transform .25s ease; }

.has-sub{ position:relative; }
/* Méga-menu "Fonctionnalités" : aperçu large des quatre modules. */
.sub-menu{
  position:fixed; top:68px; left:50%;
  translate:-50% 0;
  width:min(1120px, calc(100vw - 32px)); padding:14px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 28px 70px -18px rgba(21,33,27,.24);
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.985);
  transition:opacity .25s ease, transform .25s var(--ease-spring), visibility .25s;
}
.has-sub.open .sub-menu,
.has-sub:focus-within .sub-menu{ opacity:1; visibility:visible; transform:none; }
.has-sub.open .nav-link .chev{ transform:rotate(180deg); }
@media (hover:hover){
  .has-sub:hover .sub-menu{ opacity:1; visibility:visible; transform:none; }
  .has-sub:hover .nav-link .chev{ transform:rotate(180deg); }
}

.sub-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.sub-item{
  --mm-accent:var(--green-deep);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  min-width:0; padding:8px 8px 16px; border-radius:15px;
  background:#fff;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, transform .25s var(--ease-spring);
}
.sub-grid .sub-item:nth-child(1){ --mm-accent:#1D9E75; }
.sub-grid .sub-item:nth-child(2){ --mm-accent:#4E7FE1; }
.sub-grid .sub-item:nth-child(3){ --mm-accent:#E0795A; }
.sub-grid .sub-item:nth-child(4){ --mm-accent:#C15D86; }
.sub-grid .sub-item:nth-child(1)::before{ background-image:url("../images/stock-feature-bg.jpg"); }
.sub-grid .sub-item:nth-child(2)::before{ background-image:url("../images/shop-feature-bg.jpg"); }
.sub-grid .sub-item:nth-child(3)::before{ background-image:url("../images/resa-feature-bg.jpg"); }
.sub-grid .sub-item:nth-child(4)::before{ background-image:url("../images/fidel-feature-bg.jpg"); }
.sub-item::before{
  content:"";
  width:100%; aspect-ratio:3 / 1;
  border-radius:10px;
  background-position:center 42%;
  background-size:cover;
  transition:transform .35s var(--ease-spring), filter .25s ease;
}
.sub-item:hover{
  background:color-mix(in srgb, var(--mm-accent) 5%, #fff);
  border-color:color-mix(in srgb, var(--mm-accent) 18%, transparent);
  transform:translateY(-2px);
}
.sub-item:hover::before{ transform:scale(1.025); filter:saturate(1.08); }
.sub-item .ic{
  position:absolute; top:16px; left:16px;
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  border-radius:10px;
  background:#fff;
  color:var(--mm-accent);
  box-shadow:0 5px 16px rgba(21,33,27,.16);
  transition:transform .25s ease;
}
.sub-item:hover .ic{ transform:translateY(-1px); }
.sub-item .ic svg{ width:18px; height:18px; }
.sub-item > span:last-child{ padding-inline:6px; }
.sub-item strong{ display:block; font-size:.91rem; font-weight:650; color:var(--ink); margin-bottom:4px; letter-spacing:-.01em; }
.sub-item span{ font-size:.77rem; color:var(--ink-faint); line-height:1.4; }
.sub-item > span:last-child > span{
  display:-webkit-box;
  overflow:hidden;
  -webkit-box-orient:vertical;
  line-clamp:2;
  -webkit-line-clamp:2;
}

/* Bandeau d'appel sous la grille */
.sub-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:8px; padding:11px 12px 11px 16px; border-radius:13px;
  background:#fff;
  border:1px solid var(--line);
  transition:background .2s ease, border-color .2s ease;
}
.sub-foot:hover{
  background:color-mix(in srgb, var(--green) 3%, #fff);
  border-color:color-mix(in srgb, var(--green-deep) 22%, var(--line));
}
.sub-foot__txt strong{ display:block; font-size:.86rem; font-weight:620; color:var(--ink); }
.sub-foot__txt span{ font-size:.75rem; color:var(--ink-faint); }
.sub-foot > svg{
  width:32px; height:32px; padding:8px;
  color:#fff; background:var(--ink); border-radius:999px; flex:none;
  transition:transform .2s ease, background .2s ease;
}
.sub-foot:hover > svg{ background:var(--ink-soft); transform:translateX(3px); }

.nav-cta{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.link-login{ font-weight:500; font-size:.88rem; color:var(--ink-soft); white-space:nowrap; }
.link-login:hover{ color:var(--ink); }
.link-login__ic{ display:none; }   /* grand écran : texte seul, icône masquée */
.nav-cta .btn-sm{ padding:11px 18px; font-size:.88rem; }
.nav-cta .btn-sm::after{ display:none; }

.nav-burger{ display:none; width:42px; height:42px; border-radius:999px; place-items:center; }
.nav-burger svg{ width:22px; height:22px; }
.nav-burger .x{ display:none; }
body.menu-open .nav-burger .bars{ display:none; }
body.menu-open .nav-burger .x{ display:block; }

/* Menu mobile */
.mobile-menu{
  position:fixed; z-index:99; inset-inline:16px; top:78px;
  border-radius:var(--r-md); padding:12px;
  background:rgba(253,252,249,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);
  box-shadow:0 14px 36px rgba(21,33,27,.11);
  display:none; flex-direction:column; gap:4px;
}
body.menu-open .mobile-menu{ display:flex; }
.mobile-menu a{ padding:11px 12px; border-radius:var(--r-sm); font-weight:500; font-size:.94rem; }
.mobile-menu a:hover{ background:rgba(21,33,27,.05); }
.mobile-menu .mm-group{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); padding:14px 14px 6px; }
.mobile-menu .mm-sub{
  --mm-accent:var(--green-deep);
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; font-weight:500; color:var(--ink-soft);
}
.mobile-menu .mm-sub:nth-of-type(2){ --mm-accent:#4E7FE1; }
.mobile-menu .mm-sub:nth-of-type(3){ --mm-accent:#E0795A; }
.mobile-menu .mm-sub:nth-of-type(4){ --mm-accent:#C15D86; }
.mm-sub__ic{
  width:30px; height:30px; flex:none;
  display:grid; place-items:center;
  border-radius:9px;
  color:var(--mm-accent);
  background:color-mix(in srgb, var(--mm-accent) 11%, #fff);
}
.mm-sub__ic svg{ width:16px; height:16px; }
.mobile-menu .btn{ margin-top:12px; justify-content:center; }

/* ---------- 4. Hero ---------- */
.hero{
  position:relative;
  padding:clamp(140px, 17vh, 190px) 0 clamp(60px, 7vw, 100px);
  overflow:clip;
  background:linear-gradient(
    to bottom,
    var(--bg) 0%,
    var(--bg) 62%,
    #fff 100%
  );
}
.hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.5;
}
.blob.b1{ width:560px; height:560px; right:-120px; top:-80px; background:radial-gradient(circle, rgba(29,158,117,.5), transparent 65%); }
.blob.b2{ width:480px; height:480px; right:280px; top:240px; background:radial-gradient(circle, rgba(20,163,160,.38), transparent 65%); }
.blob.b3{ width:420px; height:420px; left:-160px; top:120px; background:radial-gradient(circle, rgba(78,127,225,.2), transparent 65%); }
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to bottom, transparent 60%, rgba(255,255,255,.92)),
    repeating-linear-gradient(90deg, rgba(21,33,27,.025) 0 1px, transparent 1px 88px);
}

.platform-section{
  background:linear-gradient(
    to bottom,
    #fff 0%,
    #fff 100%
  );
  padding:clamp(130px, 15vw, 220px) 0 clamp(90px, 10vw, 150px);
}
.platform-section .container{
  width:min(1320px, 100% - 64px);
}
.platform-section .section-head{
  max-width:900px;
  margin-bottom:clamp(80px, 9vw, 130px);
}
.platform-section .section-head .lead{
  max-width:62ch;
  margin-top:28px;
  margin-inline:auto;
}

.hero-grid{
  display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(36px, 5vw, 72px);
  align-items:center;
}

.hero-copy h1{ margin:20px 0 22px; }
.hero-copy .lead{ margin-bottom:34px; }

.hero-actions{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-note{ font-size:.88rem; color:var(--ink-faint); }

.hero-pos{
  margin-top:46px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.85rem; color:var(--ink-faint);
}
.hero-pos .pos-list{ display:flex; gap:8px; flex-wrap:wrap; }
.hero-pos .pos-list span{
  padding:5px 13px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.55);
  font-weight:550; color:var(--ink-soft); font-size:.82rem;
}

/* ---------- 5. Chat Gillia ---------- */
.hero-demo{ position:relative; }

.chat{
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  max-width:470px; margin-inline:auto;
}
.chat::before{ /* reflet liquid glass */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
}

.chat-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid rgba(21,33,27,.07);
  background:rgba(255,255,255,.4);
}
.chat-id{ display:flex; align-items:center; gap:12px; }
.chat-id strong{ display:block; font-size:.98rem; letter-spacing:.05em; line-height:1.2; }
.chat-id span{ font-size:.8rem; color:var(--ink-faint); display:flex; align-items:center; gap:6px; }
.avatar{
  width:40px; height:40px; border-radius:14px; flex:none;
  background:var(--grad-ia);
  display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(29,158,117,.35), inset 0 1px 0 rgba(255,255,255,.4);
}
.avatar svg{ width:20px; height:20px; color:#fff; }
.avatar--sm{ width:28px; height:28px; border-radius:10px; }
.avatar--sm svg{ width:14px; height:14px; }

.chat-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
  padding:5px 11px; border-radius:999px;
  background:rgba(21,33,27,.04); border:1px solid rgba(21,33,27,.08);
}
.chat-live::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(29,158,117,.16);
  animation:livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse{ 50%{ box-shadow:0 0 0 5px rgba(29,158,117,0);} }
@media (prefers-reduced-motion:reduce){ .chat-live::before{ animation:none; } }

.chat-stream{
  height:400px;
  padding:20px 18px 8px;
  overflow-y:auto;
  scrollbar-width:none;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}
.chat-stream::-webkit-scrollbar{ display:none; }

.msg{ display:flex; gap:10px; max-width:88%; animation:msgIn .45s var(--ease-spring) both; }
@keyframes msgIn{ from{ opacity:0; transform:translateY(14px) scale(.97);} }
.msg.fade-out{ animation:msgOut .4s ease both; }
@keyframes msgOut{ to{ opacity:0; transform:translateY(-8px);} }

.msg--user{ align-self:flex-end; flex-direction:row-reverse; }
.msg--Gillia{ align-self:flex-start; }
.msg-content{ flex:1; min-width:0; }

.bubble{
  padding:11px 16px; border-radius:18px;
  font-size:.93rem; line-height:1.5;
}
.msg--user .bubble{
  background:var(--ink); color:#F4F7F5;
  border-bottom-right-radius:6px;
  box-shadow:0 4px 14px rgba(21,33,27,.22);
}
.msg--Gillia .bubble{
  background:#fff; border:1px solid var(--line-soft);
  border-bottom-left-radius:6px;
  box-shadow:var(--shadow-soft);
}

/* Pièce jointe photo (BL) */
.attach{
  width:190px; border-radius:14px; overflow:hidden; position:relative;
  border:1px solid rgba(255,255,255,.4);
}
.attach .attach-name{
  position:absolute; left:8px; bottom:8px;
  display:flex; align-items:center; gap:5px;
  font-size:.7rem; font-weight:600; color:#fff;
  background:rgba(12,31,23,.55); backdrop-filter:blur(6px);
  padding:4px 9px; border-radius:999px;
}
.attach .attach-name svg{ width:11px; height:11px; }
.attach.scanning::after{
  content:""; position:absolute; inset-inline:0; top:0; height:38%;
  background:linear-gradient(to bottom, transparent, rgba(20,163,160,.35) 55%, rgba(29,158,117,.65));
  border-bottom:2px solid rgba(29,158,117,.9);
  animation:scanY 1.5s ease-in-out infinite;
}
@keyframes scanY{ 0%{ transform:translateY(-10%);} 50%{ transform:translateY(170%);} 100%{ transform:translateY(-10%);} }

/* Bulle "réflexion" */
.thinking{ display:inline-flex; gap:5px; padding:15px 16px; }
.thinking i{
  width:7px; height:7px; border-radius:50%;
  background:var(--green); opacity:.4;
  animation:think 1.1s infinite;
}
.thinking i:nth-child(2){ animation-delay:.18s; }
.thinking i:nth-child(3){ animation-delay:.36s; }
@keyframes think{ 30%{ opacity:1; transform:translateY(-4px);} }

/* Widgets riches */
.widget{
  margin-top:10px;
  background:#fff; border:1px solid var(--line-soft);
  border-radius:16px; padding:14px;
  box-shadow:var(--shadow-soft);
  animation:widgetIn .55s var(--ease-spring) both;
  font-size:.86rem;
  width:100%;
}
@keyframes widgetIn{ from{ opacity:0; transform:translateY(14px) scale(.95);} }

.w-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.w-title{ font-weight:650; font-size:.86rem; }
.w-badge{
  font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.w-badge.up{ background:rgba(29,158,117,.12); color:var(--green-deep); }
.w-foot{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); color:var(--ink-faint); font-size:.8rem; }

/* Graphique en barres */
.w-bars{ display:flex; align-items:flex-end; gap:9px; height:96px; padding-top:6px; }
.w-bar{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; }
.w-bar i{
  width:100%; border-radius:7px 7px 3px 3px;
  height:var(--h);
  background:linear-gradient(to top, var(--green-deep), var(--green) 70%, #3FC79A);
  transform:scaleY(0); transform-origin:bottom;
  animation:barUp .7s var(--ease-spring) forwards;
  animation-delay:var(--d);
  position:relative;
}
.w-bar i::after{
  content:attr(data-v);
  position:absolute; top:-19px; left:50%; translate:-50%;
  font-size:.66rem; font-weight:700; color:var(--green-deep);
  opacity:0; animation:fadeIn .3s ease forwards; animation-delay:calc(var(--d) + .55s);
}
.w-bar.best i{ background:var(--grad-ia); box-shadow:0 4px 12px rgba(20,163,160,.3); }
.w-bar span{ font-size:.7rem; color:var(--ink-faint); font-weight:550; }
@keyframes barUp{ to{ transform:scaleY(1);} }
@keyframes fadeIn{ to{ opacity:1;} }

/* Carte produit */
.p-card{ display:flex; align-items:center; gap:12px; }
.p-img{
  width:54px; height:54px; flex:none; border-radius:12px;
  background:linear-gradient(135deg, #E7F4EE, #DDF0F0);
  display:grid; place-items:center; color:var(--green-deep);
}
.p-img svg{ width:26px; height:26px; }
.p-info{ flex:1; min-width:0; }
.p-info strong{ display:block; font-size:.92rem; }
.p-cat{ font-size:.76rem; color:var(--ink-faint); }
.p-price{ display:flex; align-items:center; gap:8px; margin-top:3px; flex-wrap:wrap; }
.p-price s{ color:var(--ink-faint); font-size:.8rem; }
.p-price b{ font-size:.98rem; color:var(--green-deep); }
.p-promo{
  font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--grad-ia); color:#fff;
}

/* Interrupteur "publié" */
.p-switch{
  width:38px; height:22px; flex:none; border-radius:999px;
  background:var(--green); position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.15);
}
.p-switch::after{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
  animation:switchOn .4s var(--ease-spring) .5s both;
}
@keyframes switchOn{ from{ transform:translateX(0);} to{ transform:translateX(16px);} }

/* Coche animée */
.w-check{
  display:flex; align-items:center; gap:8px;
  font-weight:650; font-size:.85rem; color:var(--green-deep);
}
.w-check + .p-card, .w-check + table, .w-check + .r-card{ margin-top:10px; }
.w-check svg{ width:18px; height:18px; flex:none; }
.w-check svg circle{
  stroke-dasharray:57; stroke-dashoffset:57;
  animation:draw .45s ease-out forwards;
}
.w-check svg path{
  stroke-dasharray:14; stroke-dashoffset:14;
  animation:draw .3s ease-out .4s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0;} }

/* Tableau BL */
.w-table table{ width:100%; border-collapse:collapse; }
.w-table td{
  padding:8px 6px; border-bottom:1px solid var(--line-soft);
  font-size:.84rem;
}
.w-table tr{ opacity:0; transform:translateX(-10px); animation:rowIn .45s var(--ease-spring) forwards; animation-delay:var(--d); }
@keyframes rowIn{ to{ opacity:1; transform:none;} }
.w-table td:first-child{ font-weight:550; }
.w-table td:last-child{ text-align:right; font-weight:700; color:var(--green-deep); }
.w-table td.qty{ color:var(--ink-faint); text-align:right; }
.w-table .w-check{ margin-top:12px; }

/* Carte réservation */
.r-card{ display:flex; gap:14px; align-items:center; }
.r-date{
  width:56px; flex:none; text-align:center;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
}
.r-date b{ display:block; font-size:1.25rem; padding:6px 0 2px; font-family:var(--font-serif); }
.r-date span{ display:block; font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; background:var(--green); color:#fff; padding:3px 0; }
.r-info strong{ display:block; font-size:.94rem; }
.r-info span{ font-size:.8rem; color:var(--ink-faint); display:block; }

/* Barre de saisie */
.chat-bar{
  margin:10px 14px 8px;
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 8px 8px 16px;
  box-shadow:var(--shadow-soft);
}
.chat-cam{ color:var(--ink-faint); display:grid; place-items:center; }
.chat-cam svg{ width:19px; height:19px; }
.chat-cam.snap{ animation:snap .5s ease; color:var(--green-deep); }
@keyframes snap{ 50%{ transform:scale(1.35);} }

.chat-field{
  flex:1; position:relative; min-height:22px;
  font-size:.92rem; display:flex; align-items:center;
  overflow:hidden; white-space:nowrap;
}
.chat-field .ph{ color:var(--ink-faint); position:absolute; transition:opacity .2s; }
.chat-field.typing .ph{ opacity:0; }
.caret{
  width:2px; height:17px; margin-left:1px; flex:none;
  background:var(--green); border-radius:2px;
  animation:caret 1s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0;} }

.chat-send{
  width:38px; height:38px; flex:none; border-radius:50%;
  background:rgba(21,33,27,.05); color:var(--ink-soft);
  border:1px solid rgba(21,33,27,.08);
  display:grid; place-items:center;
  box-shadow:none;
  transition:transform .2s var(--ease-spring);
}
.chat-send svg{ width:16px; height:16px; }
.chat-send.pop{ animation:snap .4s ease; }

.chat-chips{
  display:flex; gap:8px; padding:4px 14px 16px; flex-wrap:wrap;
}
.chat-chips button{
  font-size:.72rem; font-weight:600;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.65);
  color:var(--ink-soft);
  transition:all .2s ease;
}
.chat-chips button:hover{ border-color:rgba(29,158,117,.5); color:var(--green-deep); background:rgba(29,158,117,.07); }
.chat-chips button.active{
  background:rgba(29,158,117,.12); color:var(--green-deep);
  border-color:rgba(29,158,117,.45);
  font-weight:650;
  box-shadow:none;
}

/* ---------- 6. Bande modules ---------- */
.modules-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.module-card{
  position:relative;
  background:var(--bg-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:30px 26px 26px;
  display:flex; flex-direction:column; gap:14px;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
  overflow:hidden;
}
.module-card::after{
  content:""; position:absolute; inset:auto 0 0 0; height:3px;
  background:var(--grad-ia);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-spring);
}
.module-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:transparent; }
.module-card:hover::after{ transform:scaleX(1); }

.module-card .ic{
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(29,158,117,.13), rgba(20,163,160,.09));
  color:var(--green-deep);
}
.module-card .ic--stocks,
.module-card .ic--shop{
  position:relative;
  isolation:isolate;
  background-position:center;
  background-size:cover;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 5px 14px rgba(21,33,27,.16);
}
.module-card .ic--stocks::before,
.module-card .ic--shop::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:rgba(0,35,30,.38);
}
.platform-section .module-card .ic--stocks::before{ display:none; }
.platform-section .module-card .ic--stocks svg{ display:none; }
.platform-section .module-card .ic--shop::before{ display:none; }
.platform-section .module-card .ic--shop svg,
.platform-section .module-card .ic--reservation svg,
.platform-section .module-card .ic--loyalty svg{ display:none; }
.module-card .ic--stocks{ background-image:url("../images/stock-feature-bg.jpg"); }
.module-card .ic--shop{ background-image:url("../images/shop-feature-bg.jpg"); }
.platform-section .module-card .ic--reservation{
  background:url("../images/resa-feature-bg.jpg") center / cover no-repeat;
}
.platform-section .module-card .ic--loyalty{
  background:url("../images/fidel-feature-bg.jpg") center / cover no-repeat;
}
.module-card .ic svg{ width:23px; height:23px; }
.module-card .ic--stocks svg,
.module-card .ic--shop svg{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
  stroke-width:2.2;
}
.module-card p{ font-size:.93rem; color:var(--ink-soft); flex:1; }
.module-card .more{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:.9rem; color:var(--green-deep);
}
.module-card .more svg{ width:15px; height:15px; transition:transform .25s ease; }
.module-card:hover .more svg{ transform:translateX(4px); }

.platform-section .modules-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(22px, 2.6vw, 38px);
  align-items:stretch;
  width:min(100%, 1160px);
  margin-inline:auto;
}
.platform-section .module-card{
  min-height:360px;
  padding:clamp(34px, 4vw, 56px);
  gap:22px;
  display:grid;
  grid-template-rows:auto auto auto 1fr auto;
  align-content:stretch;
  border-radius:var(--r-md);
  background:#fff;
  border-color:rgba(21,33,27,.09);
  box-shadow:0 1px 0 rgba(21,33,27,.04);
}
.platform-section .module-card--stocks::before,
.platform-section .module-card--shop::before,
.platform-section .module-card--reservation::before,
.platform-section .module-card--loyalty::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-36px;
  right:-82px;
  width:200px;
  height:200px;
  opacity:.15;
  pointer-events:none;
}
.platform-section .module-card--stocks::before{
  background:url("../images/stock-feature-bg.jpg") center / cover no-repeat;
  -webkit-mask:url("../images/stock-symbol.svg") center / contain no-repeat;
  mask:url("../images/stock-symbol.svg") center / contain no-repeat;
}
.platform-section .module-card--shop::before{
  background:url("../images/shop-feature-bg.jpg") center / cover no-repeat;
  -webkit-mask:url("../images/shop-symbol.svg") center / contain no-repeat;
  mask:url("../images/shop-symbol.svg") center / contain no-repeat;
}
.platform-section .module-card--reservation::before{
  background:url("../images/resa-feature-bg.jpg") center / cover no-repeat;
  -webkit-mask:url("../images/reservation-symbol.svg") center / contain no-repeat;
  mask:url("../images/reservation-symbol.svg") center / contain no-repeat;
}
.platform-section .module-card--loyalty::before{
  background:url("../images/fidel-feature-bg.jpg") center / cover no-repeat;
  -webkit-mask:url("../images/loyalty-symbol.svg") center / contain no-repeat;
  mask:url("../images/loyalty-symbol.svg") center / contain no-repeat;
}
.platform-section .module-card--stocks > *,
.platform-section .module-card--shop > *,
.platform-section .module-card--reservation > *,
.platform-section .module-card--loyalty > *{
  position:relative;
  z-index:1;
}
.platform-section .module-card:hover{
  transform:translateY(-5px);
  box-shadow:0 26px 70px rgba(21,33,27,.11);
}
.platform-section .module-card .ic{
  width:64px;
  height:64px;
  border-radius:18px;
}
.platform-section .module-card .ic svg{
  width:29px;
  height:29px;
}
.platform-section .module-card h3{ margin-top:0; }
.platform-section .module-card p{
  max-width:50ch;
  align-self:start;
}
.platform-section .module-chips{
  display:flex;
  align-items:flex-start;
  align-content:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.platform-section .module-chips span{
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(29,158,117,.045);
  color:var(--ink-soft);
  font-size:.74rem;
  font-weight:600;
  line-height:1.2;
}
.platform-section .module-card .more{
  margin-top:8px;
  align-self:end;
}

/* Écran blanc de respiration : le Lottie reste entièrement hors champ.
   Hauteur généreuse pour laisser la section « La plateforme » respirer
   avant que l'animation n'arrive. */
.platform-lottie-breath{
  height:45svh;
  /* Transition douce : on quitte le blanc de la section "La plateforme"
     pour glisser vers le crème de la scène animée, sans couture visible. */
  background:linear-gradient(
    to bottom,
    #fff 0%,
    #fff 28%,
    var(--bg-soft) 70%,
    var(--bg) 100%
  );
}

/* Animation de transition après la présentation des modules */
.lottie-scene-section{
  position:relative;
  width:100%;
  height:100svh;
  padding:0;
  overflow:hidden;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lottie-scene{
  /* Cadre réduit, centré, au ratio natif de la vidéo (1656×1030) → elle tient
     en entier, sans rognage ni letterbox. width = levier de taille. */
  display:block;
  width:min(1040px, 92vw);
  aspect-ratio:1656 / 1030;
  height:auto;
  max-height:82svh;
  object-fit:contain;
  overflow:hidden;
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px -26px rgba(21,33,27,.28);
  will-change:transform;
}
.lottie-scene svg,
.lottie-scene canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

/* Stacking au scroll : stocks, boutique, réservation puis fidélisation.
   La hauteur des sections définit la durée d'épinglage (donc le temps de
   lecture) de chaque carte : ~220svh = la carte reste fixe et lisible le
   temps d'environ 1,2 écran après son apparition. */
.stock-feature-section{
  position:relative; z-index:1;
  background:var(--bg);
  min-height:220svh;
}
.shop-feature-section{
  position:relative; z-index:2;
  background:var(--bg);
  min-height:220svh;
}
.reservation-feature-section{
  position:relative; z-index:3;
  background:var(--bg);
  min-height:220svh;
}
.loyalty-feature-section{
  position:relative; z-index:4;
  background:var(--bg);
  min-height:220svh;
}

/* ===== Scène fonctionnalités : image sticky + contenus défilants ===== */
.features-stage{
  position:relative;
  /* Fondu progressif : démarre beige (raccord avec la section vidéo) puis fond
     vers le blanc sur le haut de la section. Le reste reste blanc. */
  background:linear-gradient(to bottom, var(--bg) 0, #fff clamp(340px, 44vh, 680px));
  /* Espace au-dessus (après le Lottie) et en dessous (avant la section suivante). */
  padding-top:clamp(240px, 26vw, 400px);
  padding-bottom:clamp(240px, 26vw, 400px);
}
.features-pin{
  position:relative;
  display:grid;
  grid-template-columns:32% minmax(0, 68%);
  /* Hauteur de scroll du pin = rythme du défilement entre features.
     Plus haut = chaque feature dispose de plus de scroll (transitions plus lentes). */
  min-height:420vh;
  width:min(1260px, 100% - 48px);
  margin-inline:auto;
}
.features-sticky-media{
  position:relative;
  min-width:0;
}
.features-sticky-media__frame{
  position:sticky;
  top:calc(50vh - clamp(220px, 23vw, 290px));
  height:clamp(440px, 46vw, 580px);
  max-height:calc(100vh - 112px);
  overflow:hidden;
  border-radius:var(--r-md);
  background:#d8d5bd;
}
.features-sticky-media__image{
  position:absolute;
  /* Overscan vertical : l'image dépasse de 24px en haut/bas (masqué par
     overflow:hidden) pour que la parallaxe ±16px ne découvre jamais le fond. */
  inset:-24px 0;
  opacity:0;
  transform:scale(1.025);
  background:center / cover no-repeat;
  transition:opacity .7s ease, transform 1.1s ease;
}
.features-sticky-media__image.is-active{
  opacity:1;
  transform:scale(1);
  /* Parallaxe scroll-liée : propriété `translate` indépendante de `transform`
     (qui gère le crossfade), donc pas de conflit ni de lissage parasite. */
  translate:0 calc(var(--feat-local, 0) * -16px);
}
/* Dégradé + bordure interne portés par le CADRE (et non l'image) : ils restent
   collés aux bords du cadre, sans bouger avec la parallaxe de l'image. */
.features-sticky-media__frame::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(195deg, rgba(12,31,23,0) 42%, rgba(12,31,23,.46) 100%),
    linear-gradient(0deg, rgba(20,163,160,.20), transparent 55%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.features-sticky-media__image[data-feat-image="stocks"]{ background-image:url("../images/stock-feature-bg.jpg"); }
.features-sticky-media__image[data-feat-image="shop"]{ background-image:url("../images/shop-feature-bg.jpg"); background-position:5% 5%; }
.features-sticky-media__image[data-feat-image="reservation"]{ background-image:url("../images/resa-feature-bg.jpg"); background-position:center bottom; }
.features-sticky-media__image[data-feat-image="loyalty"]{ background-image:url("../images/fidel-feature-bg.jpg"); }
.features-track{
  position:sticky;
  top:calc(50vh - clamp(220px, 23vw, 290px));
  height:clamp(440px, 46vw, 580px);
  min-width:0;
  align-self:start;
  overflow:visible;
}

/* Mode carousel (desktop, JS actif) : conteneur fixe (100vh), piste translatée,
   feature active centrée, voisines qui dépassent et s'atténuent (opacité en JS). */
.features-stage.is-carousel .features-pin{ height:100vh; overflow:hidden; }
.features-stage.is-carousel .features-track{
  position:absolute; left:0; right:0; top:0;
  display:block; gap:0; padding:0;
  will-change:transform;
}
.features-stage.is-carousel .feat-slide{
  height:80vh;
  display:grid; place-items:center;
}
.features-stage{
  /* Échelle des cards hors focus : zoom .78 → 1 à l'entrée en focus. */
  --feat-scale-off:.78;
  /* Pivot du scale = centre de la card de contenu (à droite, ~62%), pour que
     les cards réduites restent alignées sur la card active. */
  --feat-origin-x:62%;
}
.features-stage .feat-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  pointer-events:none;
  transform:translateY(115%) scale(var(--feat-scale-off));
  transform-origin:var(--feat-origin-x) center;
  transition:transform .78s var(--ease-spring);
  will-change:transform;
}
.features-stage .feat-slide.is-active{
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
.features-stage .feat-slide.is-before{
  transform:translateY(-115%) scale(var(--feat-scale-off));
}
@media (prefers-reduced-motion:reduce){
  .features-stage .feat-slide{ transition:none; }
}
.features-stage .feat-slide > .container{
  width:100%;
  margin:0;
}
.features-stage .stock-feature{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(18px, 2.4vw, 40px);
}
.features-stage .stock-feature > .stock-feature__media{ display:none; }
.features-stage .stock-feature__demo{
  order:2;
  z-index:2;
  flex:0 0 53%;
  width:auto;
  align-self:center;
  margin-left:-29.5%;
  transform:translateY(-18px);
  /* Parallaxe scroll-liée (sens inverse de l'image → profondeur). */
  translate:0 calc(var(--feat-local, 0) * -30px);
}
.features-stage .stock-feature__content{
  order:3;
  width:auto;
  flex:1 1 0;
  align-self:stretch;
  height:clamp(440px, 46vw, 580px);
  transition:transform .78s var(--ease-spring);
  transform:translateY(32px);
}
.features-stage .feat-slide.is-active .stock-feature__content,
.features-stage .feat-slide.is-before .stock-feature__content{
  transform:translateY(0);
}
.features-stage .stock-feature__demo .demo-snippet{ max-width:440px; }

/* Entrée en cascade — DESKTOP UNIQUEMENT (≥1200px). Enfermée dans la media query
   pour qu'aucun opacity:0 ne puisse masquer le contenu en mobile/tablette. */
@media (min-width: 1200px){
.features-stage .feat-slide .stock-feature__content > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s ease, transform .7s var(--ease-spring);
  transition-delay:0s;
}
.features-stage .feat-slide.is-active .stock-feature__content > *{
  opacity:1;
  transform:none;
}
.features-stage .feat-slide.is-active .stock-feature__content > *:nth-child(1){ transition-delay:.10s; }
.features-stage .feat-slide.is-active .stock-feature__content > *:nth-child(2){ transition-delay:.18s; }
.features-stage .feat-slide.is-active .stock-feature__content > *:nth-child(3){ transition-delay:.26s; }
.features-stage .feat-slide.is-active .stock-feature__content > *:nth-child(4){ transition-delay:.34s; }
.features-stage .feat-slide.is-active .stock-feature__content > *:nth-child(n+5){ transition-delay:.42s; }
/* La démo flotte en dernier, en écho à la cascade. */
.features-stage .feat-slide .stock-feature__demo{
  opacity:0;
  transition:opacity .6s ease .12s;
}
.features-stage .feat-slide.is-active .stock-feature__demo{
  opacity:1;
}
}
@media (prefers-reduced-motion:reduce){
  .features-sticky-media__image.is-active,
  .features-stage .stock-feature__demo{ translate:none; }
  .features-stage .feat-slide .stock-feature__content > *,
  .features-stage .feat-slide .stock-feature__demo{
    opacity:1; transform:none; transition:none;
  }
}

/* Détails fonctionnalités — plus d'encadré : la composition (image · contenu ·
   démo) repose directement sur le fond de page. */
.stock-feature,
.shop-feature{
  position:relative;
  width:100%; margin-inline:0;
  display:flex;
  align-items:center;
  gap:clamp(18px, 2.4vw, 40px);
  padding:0;
}

/* Colonne image : le rappel visuel du module. La card démo viendra flotter
   par-dessus (cf. .stock-feature__demo). Ordre : image (1) · démo (2) · contenu (3). */
.stock-feature__media{
  order:1;
  flex:0 0 32%; align-self:stretch;
  position:relative; overflow:hidden; z-index:1;
  min-height:clamp(440px, 46vw, 580px);
  border-radius:var(--r-md);
  background:#d8d5bd center / cover no-repeat;
  background-image:url("../images/stock-feature-bg.jpg");
}
.stock-feature__media::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:
    linear-gradient(195deg, rgba(12,31,23,0) 42%, rgba(12,31,23,.46) 100%),
    linear-gradient(0deg, rgba(20,163,160,.20), transparent 55%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.stock-feature__content,
.shop-feature__content{
  order:3;
  position:relative; z-index:1;
  overflow:hidden; isolation:isolate;
  flex:1 1 0; align-self:stretch;    /* card en pleine hauteur du cadre */
  display:flex; flex-direction:column; /* titre+texte en haut, chips+bouton en bas */
  padding:clamp(30px, 3.4vw, 52px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--r-md);
  background: #FFF;
  box-shadow:var(--shadow-soft);
  color:var(--ink);
}
/* Reflet spéculaire glossy : glint d'angle + sheen haut + traînée de lumière */
.stock-feature__content::before,
.shop-feature__content::before{
  content:""; position:absolute; z-index:-1;
  inset:0; border-radius:inherit;
  background:
    radial-gradient(140% 100% at 8% 4%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 14%),
    linear-gradient(116deg, transparent 38%, rgba(255,255,255,.14) 47%, transparent 57%);
  pointer-events:none;
}
/* Réfraction colorée diffuse, lumière qui « coule » depuis le bas */
.stock-feature__content::after,
.shop-feature__content::after{
  content:""; position:absolute; z-index:-1;
  inset:auto -16% -52% 26%; height:74%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(20,163,160,.16), rgba(52,211,153,.07) 44%, transparent 70%);
  filter:blur(26px);
  pointer-events:none;
}
.stock-feature .eyebrow,
.shop-feature .eyebrow{ color:var(--green-deep); }
.stock-feature h2,
.shop-feature h2{ margin-top:6px; color:var(--ink); }
.stock-feature .lead,
.shop-feature .lead{ margin-top:24px; color:var(--ink-soft); }
.stock-feature__points,
.shop-feature__points{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px;
  margin:30px 0 0;   /* chips directement sous le texte */
}
/* Bouton "Tester …" : seul en bas de la card */
.feature-cta{
  margin-top:auto;          /* poussé tout en bas */
  align-self:flex-start;    /* largeur naturelle, pas pleine largeur */
}

/* ---- Bouton morphing : la flèche émerge en pastille au survol (effet gooey) ---- */
.morph-btn{
  --mb-travel:50px;
  position:relative;
  display:inline-flex; align-items:center;
  height:54px;
  color:#fff; font-weight:600; font-size:1rem; line-height:1;
}
/* Couche filtrée (goo) : le fond pill + la pastille fusionnent */
.morph-btn .mb-shapes{
  position:absolute; inset:0; z-index:0;
  filter:url(#goo); pointer-events:none;
}
.morph-btn .mb-pill{
  position:absolute; inset:0;
  background:var(--ink); border-radius:999px;
}
.morph-btn .mb-dot{
  position:absolute; top:50%; right:0;
  width:54px; height:54px; border-radius:50%;  /* même hauteur que le pill */
  background:var(--ink);
  transform:translate(0, -50%) scale(.5);
  opacity:0;
  transition:transform .42s var(--ease-spring), opacity .3s ease;
}
/* Texte et flèche : au-dessus du filtre → nets, pas floutés */
.morph-btn .mb-label{
  position:relative; z-index:1;
  padding:0 28px; white-space:nowrap;
}
.morph-btn .mb-arrow{
  position:absolute; top:50%; right:0;
  width:54px; height:54px; display:grid; place-items:center;
  z-index:2; color:#fff; pointer-events:none;
  transform:translate(0, -50%) scale(.5);
  opacity:0;
  transition:transform .42s var(--ease-spring), opacity .3s ease;
}
.morph-btn .mb-arrow svg{ width:30px; height:30px; }
/* Survol : la pastille-flèche émerge vers la droite */
.morph-btn:hover .mb-dot,
.morph-btn:hover .mb-arrow,
.morph-btn:focus-visible .mb-dot,
.morph-btn:focus-visible .mb-arrow{
  transform:translate(var(--mb-travel), -50%) scale(1);
  opacity:1;
}
.stock-feature__points span,
.shop-feature__points span{
  padding:8px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:.82rem; font-weight:600;
}
/* Card démo : flotte par-dessus l'image, légèrement surélevée. */
.stock-feature__demo,
.shop-feature__demo{
  order:2;
  position:relative; z-index:2;
  flex:0 0 36%; align-self:center;
  margin-left:-20%;                  /* chevauche la colonne image */
  transform:translateY(-18px);       /* légère élévation : effet flottant */
}
.stock-feature__demo .demo-snippet,
.shop-feature__demo .demo-snippet{
  /* Le rendu verre vient de .glass ; ici la mise en page + l'ombre flottante */
  width:100%;
  max-width:440px;
  margin-inline:auto;
  padding:22px 18px;
  box-shadow:0 30px 60px -22px rgba(12,31,23,.45), var(--shadow-soft);
}
/* Icône flèche : ancrée à la card chat et débordant au coin bas-droite,
   à l'extérieur de la card (offsets négatifs). */
.stock-feature__arrow,
.shop-feature__arrow{
  position:absolute;
  top:auto; left:auto;
  bottom:-90px;
  right:-4px;
  z-index:3;
  width:clamp(56px, 5vw, 70px); height:clamp(56px, 5vw, 70px);
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--green-ink);
  background:#fff;
  box-shadow:0 12px 28px rgba(21,33,27,.20), inset 0 0 0 1px rgba(21,33,27,.05);
  transition:transform .2s var(--ease-spring), box-shadow .2s ease, color .2s ease, background .2s ease;
}
.stock-feature__arrow svg,
.shop-feature__arrow svg{ width:48%; height:48%; }
.stock-feature__arrow svg path,
.shop-feature__arrow svg path{
  fill:currentColor;
  stroke:none;
  transition:fill .2s ease;
}
.stock-feature__arrow:hover,
.shop-feature__arrow:hover{
  transform:translateY(0px);
  color:#fff;
  background:var(--ink);
  box-shadow:0 18px 34px rgba(21,33,27,.26), inset 0 0 0 1px rgba(21,33,27,.05);
}
.stock-feature__arrow:hover svg path,
.shop-feature__arrow:hover svg path{
  fill:currentColor;   /* symbole plein blanc */
  stroke:none;         /* plus de contour */
}

/* Image propre à chaque module. Toutes les variantes gardent l'image à gauche. */
.stock-feature--shop .stock-feature__media{
  background-image:url("../images/shop-feature-bg.jpg");
  background-position:5% 5%;
}
.stock-feature--shop .stock-feature__arrow{ right:clamp(24px, 2.8vw, 38px); left:auto; }

.stock-feature--reservation .stock-feature__media{
  background-image:url("../images/resa-feature-bg.jpg");
  background-position:center bottom;
}

.stock-feature--loyalty .stock-feature__media{ background-image:url("../images/fidel-feature-bg.jpg"); }

/* ---------- 7. Section "Parlez, Gillia exécute" ---------- */
.talk{ background:var(--green-ink); color:#EDF3EF; position:relative; z-index:5; overflow:clip; }
.talk .blob{ opacity:.32; }
.talk .eyebrow{ color:#6FD8B2; }
.talk .lead{ color:#A9BCB1; }
.talk .section-head{ position:relative; z-index:1; }

.marquee{ position:relative; margin:14px 0; z-index:1; }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:scroll 46s linear infinite; }
.marquee--rev .marquee-track{ animation-direction:reverse; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll{ to{ transform:translateX(-50%);} }
.marquee .prompt{
  display:flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:.95rem; color:#D7E2DB;
  backdrop-filter:blur(8px);
}
.marquee .prompt svg{ width:15px; height:15px; color:#5BC79F; flex:none; }
.marquee-fade{ position:absolute; inset-block:0; width:120px; z-index:2; pointer-events:none; }
.marquee-fade.l{ left:0; background:linear-gradient(to right, var(--green-ink), transparent); }
.marquee-fade.r{ right:0; background:linear-gradient(to left, var(--green-ink), transparent); }

.talk-cols{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:54px; position:relative; z-index:1;
}
.talk-col{
  padding:28px 26px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(10px);
}
.talk-col .ic{
  width:42px; height:42px; border-radius:12px; margin-bottom:16px;
  display:grid; place-items:center;
  background:var(--grad-ia); color:#fff;
  box-shadow:0 6px 16px rgba(20,163,160,.3);
}
.talk-col .ic svg{ width:20px; height:20px; }
.talk-col h3{ color:#fff; margin-bottom:8px; }
.talk-col p{ font-size:.93rem; color:#A9BCB1; }

/* ---------- 8. Section scan / photo ---------- */
.vision-section{
  position:relative;
  z-index:6;
  /* Fond blanc qui glisse vers le crème de la section Tarifs (transition douce) */
  background:linear-gradient(180deg, #ffffff 0%, #ffffff 52%, var(--bg) 100%);
  /* Espace blanc sous le bandeau sombre (même couleur que Vision IA) */
  padding-top:clamp(190px, 21vw, 320px);
  /* Plus d'air avant la section Tarifs */
  padding-bottom:clamp(140px, 16vw, 220px);
}
/* Intro Vision IA : texte + photo illustrative (style "media" des features) */
.vision-intro{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(28px, 4vw, 60px);
  align-items:center;
  margin-bottom:clamp(40px, 5vw, 64px);
}
.vision-intro .section-head{ margin-bottom:0; max-width:none; }
.vision-cta{ margin-top:28px; }

.vision-photo{
  position:relative; margin:0;
  aspect-ratio:4 / 3;
  border-radius:var(--r-lg);
  overflow:hidden;
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-lift);
  background:linear-gradient(150deg, #eaf4ef 0%, #dcece6 55%, #cfe6df 100%);
  display:grid; place-items:center;
}
/* La vraie photo, une fois ajoutée, recouvre le placeholder */
.vision-photo__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.vision-photo__badge{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:5px 11px; border-radius:999px;
  background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--line-soft);
  font-size:.72rem; font-weight:700; letter-spacing:.02em;
  color:var(--green-deep);
}
.vision-photo__ph{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:24px;
  color:var(--green-deep);
}
.vision-photo__ph strong{ font-size:1.02rem; }
.vision-photo__ph span{ font-size:.86rem; color:var(--ink-soft); max-width:30ch; }
.vision-photo__cam{
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; margin-bottom:4px;
  background:rgba(29,158,117,.14);
  color:var(--green-deep);
}
.vision-photo__cam svg{ width:28px; height:28px; }
/* Ligne de scan : évoque la lecture par l'IA */
.vision-photo__scan{
  position:absolute; left:0; right:0; top:0; height:38%;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(20,163,160,0), rgba(20,163,160,.10) 60%, rgba(29,158,117,.18));
  border-bottom:1.5px solid rgba(29,158,117,.5);
  opacity:0;
  transform:translateY(-40%);
  transition:opacity .45s ease;
}
/* Phase de balayage (pilotée en JS) : direction alternée à chaque passage
   → 1 bas→haut, 2 haut→bas, 3 bas→haut */
.vision-photo.scanning .vision-photo__scan{
  opacity:1;
  animation:visionScanSweep 1.4s ease-in-out infinite alternate;
}
@keyframes visionScanSweep{
  from { transform:translateY(220%); }   /* bas */
  to   { transform:translateY(-40%); }   /* haut */
}
/* Card flottante : mise à jour de stock générée, posée sur la photo */
.vision-photo__card{
  position:absolute; z-index:3;
  left:clamp(14px, 4%, 26px); bottom:clamp(14px, 4%, 26px);
  width:min(64%, 270px);
  padding:14px 16px;
  border-radius:14px;
  box-shadow:0 18px 40px -14px rgba(12,31,23,.5), inset 0 1px 1px rgba(255,255,255,.85);
  /* masquée jusqu'à la fin du passage de la ligne de scan (révélée en JS) */
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease-spring), transform .5s var(--ease-spring);
}
.vision-photo__card.show{ opacity:1; transform:none; }
.vp-card__head{
  display:flex; align-items:center; gap:7px;
  font-size:.82rem; font-weight:700; color:var(--green-deep);
  margin-bottom:9px;
}
.vp-card__head svg{ width:16px; height:16px; flex:none; color:var(--green); }
.vp-card__badge{
  margin-left:auto;
  padding:2px 8px; border-radius:999px;
  background:rgba(29,158,117,.14); color:var(--green-deep);
  font-size:.68rem; font-weight:700;
}
.vp-card__table{ width:100%; border-collapse:collapse; }
.vp-card__table td{
  padding:4px 0; font-size:.82rem; color:var(--ink-soft);
  opacity:0; transform:translateX(-8px);
}
.vision-photo__card.show .vp-card__table td{
  animation:rowIn .45s var(--ease-spring) forwards;
  animation-delay:calc(var(--d, 0s) + .12s);
}
.vp-card__table td:last-child{
  text-align:right; font-weight:700; color:var(--green-deep);
}
.scan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.scan-card{
  display:flex; flex-direction:column;
  min-height:clamp(440px, 32vw, 520px);
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:32px 28px;
  box-shadow:var(--shadow-soft);
  transition:transform .35s var(--ease-spring), box-shadow .35s ease;
}
.scan-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.scan-card .step{
  font-family:var(--font-serif);
  font-size:.95rem; color:var(--teal);
  display:block; margin-bottom:14px;
}
.scan-card h3{ margin-bottom:10px; }
.scan-card p{ font-size:.93rem; color:var(--ink-soft); }
.scan-card .visu{
  margin-top:auto;            /* ancré en bas → visus alignés */
  height:220px;               /* hauteur fixe → tous identiques */
  border-radius:var(--r-sm);
  background:linear-gradient(150deg, #FFFFFF, #FAF8F2);
  border:1px solid var(--line-soft);
  padding:16px; overflow:hidden;
  display:grid; place-items:center;
}
.scan-card .visu > .widget{ width:100%; }

/* ---------- 9. Tarifs ---------- */
.pricing-toggle{
  display:inline-flex; align-items:center; gap:3px;
  padding:4px; border-radius:999px;
  background:rgba(21,33,27,.045);
  border:1px solid var(--line-soft);
  margin:clamp(34px, 4vw, 48px) auto 0;
}
.pricing-toggle button{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 20px; border-radius:999px;
  font-weight:600; font-size:.9rem; letter-spacing:-.01em;
  color:rgba(21,33,27,.5);
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.pricing-toggle button:hover{ color:rgba(21,33,27,.78); }
.pricing-toggle button.on{
  background:#fff; color:var(--ink);
  box-shadow:0 1px 2px rgba(21,33,27,.12), inset 0 0 0 1px rgba(21,33,27,.05);
}
.pricing-toggle button.on:hover{ color:var(--ink); }
.pricing-toggle .save{
  font-size:.7rem; font-weight:700; line-height:1; letter-spacing:0;
  color:var(--green-deep);
  background:rgba(29,158,117,.13);
  padding:3px 7px; border-radius:999px;
}

.plans{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-items:stretch; margin-top:46px;
}
.plan{
  position:relative;
  background:var(--bg-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:34px 30px;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease;
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.plan--hero{
  background:var(--green-ink); color:#EDF3EF;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-lift);
  overflow:hidden;
}
.plan--hero::before{
  content:""; position:absolute; width:300px; height:300px; border-radius:50%;
  right:-90px; top:-110px;
  background:radial-gradient(circle, rgba(29,158,117,.45), transparent 65%);
  filter:blur(40px);
}
.plan-pop{
  position:absolute; top:22px; right:22px;
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
  background:var(--grad-ia); color:#fff;
}
.plan .plan-for{ font-size:.88rem; color:var(--ink-faint); margin-top:6px; min-height:42px; }
.plan--hero .plan-for{ color:#9FB4A8; }
.plan-price{ margin:20px 0 4px; display:flex; align-items:baseline; gap:8px; }
.plan-price b{ font-family:var(--font-serif); font-size:2.9rem; font-weight:560; letter-spacing:-.02em; }
.plan-price > span{ color:var(--ink-faint); font-size:.9rem; }
.plan--hero .plan-price > span{ color:#9FB4A8; }
.plan-note{ font-size:.8rem; color:var(--ink-faint); min-height:20px; }
.plan--hero .plan-note{ color:#9FB4A8; }
.plan ul{ margin:24px 0 30px; display:flex; flex-direction:column; gap:11px; flex:1; }
.plan li{ display:flex; gap:10px; font-size:.92rem; align-items:flex-start; }
.plan li svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--green-deep); }
.plan--hero li svg{ color:#5BC79F; }
.plan .btn{ justify-content:center; }

.compare{ margin-top:clamp(100px, 12vw, 170px); }
.compare table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
.compare th, .compare td{ padding:20px 26px; text-align:center; border-bottom:1px solid var(--line-soft); font-size:.93rem; }
/* En-tête figé, collé sous la nav, en liquid glass + coins arrondis,
   texte au style H3 global (serif). */
.compare thead th{
  position:sticky; top:54px; z-index:5;
  font-family:var(--font-serif); font-size:20px; font-weight:500;
  letter-spacing:-1.3px; line-height:1; color:var(--ink);
  background:linear-gradient(150deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.38) 100%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7);
}
.compare thead th:first-child{ border-radius:14px 0 0 14px; }
.compare thead th:last-child{ border-radius:0 14px 14px 0; }
.compare th{ font-family:var(--font-serif); font-size:1.05rem; font-weight:600; }
.compare td:first-child, .compare th:first-child{ text-align:left; }
.compare td:first-child{ font-weight:550; color:var(--ink-soft); }
.compare tr:hover td{ background:rgba(29,158,117,.04); }
.compare .group td{ font-weight:700; color:var(--green-deep); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; padding-top:48px; padding-bottom:18px; background:none !important; }
.compare svg{ width:18px; height:18px; margin-inline:auto; color:var(--green-deep); }
.compare .no{ color:var(--ink-faint); }

/* Sélecteur de forfait : visible uniquement sur mobile (cf. media query). */
.compare-switch{ display:none; }
.cs-track{
  display:flex; gap:4px; padding:5px;
  background:rgba(244,245,243,.92);
  -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--line-soft); border-radius:999px;
  box-shadow:0 10px 30px rgba(21,33,27,.16), inset 0 1px 1px rgba(255,255,255,.7);
}
.cs-chip{
  padding:9px 16px; border-radius:999px;
  font-weight:600; font-size:.9rem; color:var(--ink-soft);
  white-space:nowrap; transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cs-chip.active{
  background:#fff; color:var(--green-ink);
  box-shadow:0 2px 8px rgba(21,33,27,.12);
}

/* FAQ */
.faq{ max-width:760px; margin-inline:auto; }
.faq-item{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  background:var(--bg-soft); margin-bottom:12px;
  overflow:hidden;
}
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 24px; text-align:left;
  font-weight:600; font-size:1.02rem;
}
.faq-q svg{ width:18px; height:18px; flex:none; color:var(--green-deep); transition:transform .3s ease; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-a p{ padding:0 24px 22px; color:var(--ink-soft); font-size:.95rem; }

/* ---------- 10. Intégrations ---------- */
.integrations-list-section{ padding-top:clamp(80px, 9vw, 130px); }
.integ-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.integ-card{
  --accent:var(--green-deep);
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:30px 28px;
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; gap:14px;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
}
/* Liseré supérieur à la couleur du connecteur — discret, intensifié au survol */
.integ-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--accent); opacity:.45;
  transform:scaleX(.0); transform-origin:left;
  transition:transform .45s var(--ease-spring), opacity .35s ease;
}
.integ-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lift);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line-soft));
}
.integ-card:hover::before{ transform:scaleX(1); opacity:1; }
.integ-logo{
  width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center;
  font-family:var(--font-serif); font-weight:700; font-size:1.3rem; color:#fff;
  transition:box-shadow .35s ease;
}
.integ-card:hover .integ-logo{ box-shadow:0 10px 24px color-mix(in srgb, var(--accent) 38%, transparent); }
.integ-tag{
  align-self:flex-start;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:color-mix(in srgb, var(--accent) 78%, var(--ink));
}
.integ-card p{ font-size:.93rem; color:var(--ink-soft); flex:1; }

.sync-story{
  position:relative; isolation:isolate; overflow:hidden;
  margin-top:80px; padding:clamp(34px, 5vw, 64px);
  border:1px solid rgba(255,255,255,.1); border-radius:24px;
  background:
    radial-gradient(circle at 48% 42%, rgba(20,163,160,.12), transparent 28%),
    linear-gradient(145deg, #10251d 0%, #071610 100%);
  color:#fff;
  box-shadow:0 26px 70px rgba(8,24,17,.18);
}
.sync-story__glow{
  position:absolute; z-index:-1; width:430px; height:430px; right:-190px; top:-230px;
  border-radius:50%; background:rgba(0,238,159,.13); filter:blur(18px);
}
.sync-story__intro{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px, 7vw, 90px);
  align-items:end; padding-bottom:clamp(38px, 5vw, 64px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sync-story .eyebrow{ color:#7DE0BF; }
.sync-story .eyebrow::before{ box-shadow:0 0 14px rgba(0,238,159,.55); }
.sync-story h2{ margin-top:16px; color:#fff; }
.sync-story h2 .grad{
  color:#71DCB8;
  background:linear-gradient(105deg, #fff 0%, #71DCB8 60%, #00EE9F 110%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sync-story__intro > p{ color:#AFC2B7; max-width:48ch; font-size:.96rem; }

.sync-map{
  display:grid; grid-template-columns:1fr minmax(70px,.45fr) 170px minmax(70px,.45fr) 1.35fr;
  gap:clamp(14px, 2vw, 28px); align-items:center;
  min-height:330px; padding:clamp(42px, 6vw, 76px) 0;
}
.sync-map__label{
  display:block; margin-bottom:12px; color:#70877B;
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.sync-system-card{
  position:relative; display:flex; align-items:center; gap:13px; min-width:205px;
  padding:16px; border:1px solid rgba(255,255,255,.11); border-radius:14px;
  background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.sync-system-card__icon{
  width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:11px;
  background:rgba(255,255,255,.08); color:#8DE6C7;
}
.sync-system-card__icon svg{ width:20px; height:20px; }
.sync-system-card strong,.sync-output strong{ display:block; color:#fff; font-size:.82rem; line-height:1.3; }
.sync-system-card small,.sync-output small{ display:block; margin-top:3px; color:#82988C; font-size:.64rem; line-height:1.35; }
.sync-system-card > i{
  position:absolute; width:8px; height:8px; right:-4px; top:calc(50% - 4px);
  border-radius:50%; background:#00EE9F; box-shadow:0 0 16px #00EE9F;
}
.sync-map__route{ display:flex; align-items:center; gap:8px; color:#00EE9F; }
.sync-map__route span{ height:1px; flex:1; background:linear-gradient(90deg, rgba(0,238,159,.1), #00EE9F); }
.sync-map__route span:last-child{ display:none; }
.sync-map__route b{
  color:#83A395; font-size:.55rem; line-height:1; letter-spacing:.1em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.sync-map__route--out span{ background:linear-gradient(90deg, #00EE9F, rgba(0,238,159,.1)); }
.sync-map__core{ position:relative; display:grid; place-items:center; aspect-ratio:1; }
.sync-core{
  position:relative; z-index:2; width:118px; height:118px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(145deg, #214F3C, #10291E);
  border:1px solid rgba(125,224,191,.45);
  box-shadow:0 0 0 10px rgba(29,158,117,.07), 0 18px 40px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.15);
}
.sync-core img{ width:34px; height:34px; object-fit:contain; margin-bottom:7px; filter:brightness(0) invert(1); }
.sync-core strong{ font-family:var(--font-serif); font-size:.85rem; letter-spacing:.08em; }
.sync-core small{ margin-top:2px; color:#8DAA9A; font-size:.52rem; }
.sync-orbit{ position:absolute; z-index:1; inset:10px; border:1px solid rgba(0,238,159,.16); border-radius:50%; }
.sync-orbit--two{ inset:-8px; border-style:dashed; animation:sync-spin 16s linear infinite; }
.sync-orbit--two::before,.sync-orbit--two::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:#00EE9F; box-shadow:0 0 14px #00EE9F;
}
.sync-orbit--two::before{ top:10px; left:24px; }
.sync-orbit--two::after{ right:5px; bottom:38px; }
@keyframes sync-spin{ to{ transform:rotate(360deg); } }
.sync-output-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sync-output{
  display:flex; align-items:center; gap:9px; min-width:0; padding:12px;
  border:1px solid rgba(255,255,255,.08); border-radius:11px;
  background:rgba(255,255,255,.045);
}
.sync-output__dot{
  width:7px; height:7px; flex:none; border-radius:50%; background:#4BD1A5;
  box-shadow:0 0 0 4px rgba(75,209,165,.09);
}
.sync-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid rgba(255,255,255,.1);
}
.sync-steps li{ display:flex; gap:15px; padding:28px 26px 0; border-left:1px solid rgba(255,255,255,.1); }
.sync-steps li:first-child{ padding-left:0; border-left:0; }
.sync-steps li:last-child{ padding-right:0; }
.sync-steps li > span{
  color:#63D9B3; font-family:var(--font-serif); font-size:.78rem; font-weight:700; letter-spacing:.05em;
}
.sync-steps strong{ display:block; font-size:.84rem; line-height:1.3; }
.sync-steps p{ margin-top:6px; color:#81978B; font-size:.68rem; line-height:1.5; }

/* Éditeur & engagements */
.maker-section{
  position:relative; padding-top:clamp(96px, 12vw, 170px);
  background:transparent;
}
.maker-intro{
  display:grid; grid-template-columns:1fr .82fr; gap:clamp(40px, 8vw, 110px);
  align-items:end; margin-bottom:clamp(42px, 6vw, 76px);
}
.maker-intro__copy h2{ max-width:16ch; margin-top:16px; }
.maker-intro__copy .lead{ margin-top:22px; max-width:55ch; }
.maker-intro__panel{
  position:relative; overflow:hidden; padding:clamp(28px, 4vw, 46px);
  border:1px solid var(--line); border-radius:20px; background:var(--green-ink); color:#fff;
  box-shadow:0 24px 60px rgba(12,31,23,.15);
}
.maker-intro__panel::after{
  content:""; position:absolute; width:280px; height:280px; right:-120px; top:-150px;
  border-radius:50%; background:rgba(0,238,159,.14); filter:blur(16px);
}
.maker-intro__number{
  position:relative; z-index:1; display:inline-flex; margin-bottom:22px; padding:6px 11px;
  border:1px solid rgba(125,224,191,.25); border-radius:999px;
  color:#7DE0BF; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.maker-intro__panel h3{ position:relative; z-index:1; max-width:20ch; color:#fff; font-size:clamp(24px, 2.4vw, 34px); line-height:1.05; }
.maker-intro__panel p{ position:relative; z-index:1; margin-top:16px; color:#A9BCB1; font-size:.86rem; }
.maker-release{ position:relative; z-index:1; display:grid; gap:10px; margin-top:26px; }
.maker-release span{ display:flex; align-items:center; gap:9px; color:#D8E5DE; font-size:.72rem; font-weight:600; }
.maker-release i{ width:6px; height:6px; border-radius:50%; background:#42D5A5; box-shadow:0 0 0 4px rgba(66,213,165,.1); }
.maker-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.maker-card{
  position:relative; overflow:hidden; min-height:280px; padding:clamp(26px, 3vw, 38px);
  border:1px solid var(--line-soft); border-radius:18px; background:rgba(255,255,255,.75);
  box-shadow:0 10px 36px rgba(21,33,27,.05);
  transition:transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
}
.maker-card:hover{ transform:translateY(-5px); border-color:rgba(29,158,117,.25); box-shadow:var(--shadow-lift); }
.maker-card--wide{ grid-column:span 2; min-height:240px; padding-right:min(45%, 520px); }
.maker-card--wide::after{
  content:""; position:absolute; right:6%; top:50%; translate:0 -50%;
  width:min(32%, 330px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(29,158,117,.18) 0 2%, transparent 3% 19%, rgba(29,158,117,.1) 20% 20.5%, transparent 21% 38%, rgba(29,158,117,.08) 39% 39.5%, transparent 40%);
}
.maker-card--data{
  grid-column:span 2; min-height:230px; padding-right:min(42%, 500px);
  background:linear-gradient(145deg, #F0F8F4, #fff);
}
.maker-card--data::after{
  content:""; position:absolute; right:10%; top:50%; translate:0 -50%;
  width:110px; height:130px;
  background:rgba(29,158,117,.09);
  clip-path:polygon(50% 0, 92% 16%, 86% 67%, 50% 100%, 14% 67%, 8% 16%);
}
.maker-card__icon{
  width:44px; height:44px; display:grid; place-items:center; margin-bottom:25px;
  border-radius:12px; background:rgba(29,158,117,.09); color:var(--green-deep);
}
.maker-card__icon svg{ width:21px; height:21px; }
.maker-card__tag{
  display:block; margin-bottom:12px; color:var(--green-deep);
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}
.maker-card h3{ max-width:25ch; font-size:clamp(22px, 2.2vw, 30px); line-height:1.08; }
.maker-card p{ max-width:58ch; margin-top:14px; color:var(--ink-soft); font-size:.86rem; }
.maker-pledge{
  display:flex; align-items:center; gap:18px; margin-top:16px; padding:20px 24px;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.7);
}
.maker-pledge__flag{ display:flex; width:38px; height:26px; flex:none; overflow:hidden; border-radius:5px; box-shadow:0 3px 10px rgba(21,33,27,.12); }
.maker-pledge__flag i{ flex:1; }
.maker-pledge__flag i:nth-child(1){ background:#182F8C; }
.maker-pledge__flag i:nth-child(2){ background:#fff; }
.maker-pledge__flag i:nth-child(3){ background:#E63B49; }
.maker-pledge p{ color:var(--ink-soft); font-size:.83rem; }
.maker-pledge strong{ color:var(--ink); }

/* ---------- 11. Bande CTA ---------- */
.cta-band{
  position:relative; overflow:clip;
  width:100vw; margin-inline:calc(50% - 50vw);   /* pleine largeur (hors container) */
  border-radius:0;
  background:var(--green-ink); color:#fff;
  padding-block:clamp(52px, 7vw, 96px);
  /* contenu centré ~1080px, fond plein écran */
  padding-inline:max(clamp(24px, 6vw, 40px), calc(50vw - 540px));
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px, 5vw, 64px); align-items:stretch;
  text-align:left;
}
.cta-band .blob{ opacity:.4; }
.cta-band__text{
  position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
}
.cta-band__form{ position:relative; }
.cta-band__form h3{ color:#fff; margin:0 0 16px; text-transform:uppercase; letter-spacing:.02em; }
.cta-band__text{ position:relative; }
.cta-band h2{ position:relative; color:#fff; max-width:16ch; margin:0; }
.cta-band p{ position:relative; color:#A9BCB1; margin:18px 0 0; max-width:46ch; }
.cta-band .cta-note{ margin-top:22px; }
.cta-form{
  position:relative;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.cta-form input{
  width:min(340px, 100%);
  padding:15px 24px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  color:#fff; font:inherit; font-size:.97rem;
  outline:none; transition:border-color .25s ease, background .25s ease;
}
.cta-form input::placeholder{ color:#8FA59A; }
.cta-form input:focus{ border-color:rgba(29,158,117,.7); background:rgba(255,255,255,.12); }
.cta-note{ position:relative; margin-top:18px; font-size:.85rem; color:#8FA59A; }

/* Formulaire de contact minimaliste (bande CTA) */
.contact-form{
  position:relative;
  display:grid; gap:22px;
  max-width:none; margin:0;
  text-align:left;
}
.contact-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px 18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; font:inherit; font-size:.95rem;
  outline:none; transition:border-color .25s ease, background .25s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:#8FA59A; }
.contact-form input:focus,
.contact-form textarea:focus{ border-color:rgba(29,158,117,.7); background:rgba(255,255,255,.12); }
.contact-form textarea{ resize:vertical; min-height:96px; line-height:1.5; }
.contact-form button{ width:100%; justify-content:center; margin-top:2px; }

/* ---------- 12. Pied de page ---------- */
.footer{ padding:clamp(64px, 8vw, 104px) 0 0; overflow:hidden; }
/* Footer pleine largeur : le contenu n'est plus bridé par le container centré */
.footer .container{ width:100%; max-width:none; margin:0; padding-inline:clamp(24px, 4vw, 64px); }
/* Haut : intro (marque + réseaux) à gauche, colonnes de liens à droite */
.footer-top{
  display:grid; grid-template-columns:1.2fr 2fr;
  gap:clamp(36px, 5vw, 80px);
  padding-bottom:clamp(40px, 5vw, 64px);
}
.footer-intro{ max-width:360px; }
.footer .brand{ margin-bottom:18px; }
.footer-logo{ height:96px; width:auto; flex:none; }
.footer-brand-name{
  display:none;
  color:var(--ink);
  font-size:1.4rem;
  font-weight:500;
  letter-spacing:.01em;
}
.footer-tag{ font-size:.94rem; color:var(--ink-soft); }
.footer-contact{
  font-style:normal;
  display:flex; flex-direction:column; gap:7px;
  margin-top:18px;
  font-size:.9rem; color:var(--ink-soft); line-height:1.4;
}
.footer-contact a{ color:var(--ink-soft); transition:color .2s ease; }
.footer-contact a:hover{ color:var(--green-deep); }
.footer-contact strong{
  display:inline-block; min-width:76px;
  color:var(--ink); font-size:.78rem; font-weight:650;
}
.footer-fr{ margin-top:22px; display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; color:var(--ink-faint); }
.footer-fr i{ width:16px; height:11px; border-radius:2px; flex:none; background:linear-gradient(to right, #1A3A8F 33%, #fff 33% 66%, #D2363E 66%); border:1px solid var(--line-soft); }
.footer-cols{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;
}
.footer-col h5{
  text-transform:uppercase; letter-spacing:.05em;
  font-size:.76rem; font-weight:700; color:var(--ink-faint);
  margin-bottom:16px;
}
.footer-col a{ display:block; padding:6px 0; font-size:.94rem; color:var(--ink-soft); transition:color .2s; }
.footer-col a:hover{ color:var(--green-deep); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 0; flex-wrap:wrap;
  border-top:1px solid var(--line-soft);
  font-size:.85rem; color:var(--ink-faint);
}
.footer-bottom a:hover{ color:var(--ink); }
/* Wordmark géant pleine largeur (signature façon Perplexity) */
.footer-wordmark{
  --footer-wordmark-base:clamp(120px, 42vw, 720px);
  width:100%;
  max-width:100vw;
  overflow:hidden;
  box-sizing:border-box;
  font-family:var(--font-serif); font-weight:300;
  font-size:var(--footer-wordmark-size, var(--footer-wordmark-base));
  line-height:.8; letter-spacing:-.055em;
  color:var(--ink); opacity:.1;          /* watermark discret */
  text-align:center; white-space:nowrap;
  margin:clamp(6px, 1.5vw, 26px) 0 -.12em;
  user-select:none;
}

/* ---------- Pages légales ---------- */
.legal-page{ background:#FDFCF9; }
.legal-main{ padding:clamp(120px, 14vw, 170px) 0 clamp(80px, 10vw, 140px); }

/* À propos */
.about-page{ background:#fff; }
.about-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(150px,18vw,230px) 0 clamp(100px,12vw,170px);
  text-align:center;
}
.about-hero .container{ position:relative; z-index:1; }
.about-hero .eyebrow{ justify-content:center; }
.about-hero h1{ max-width:16ch; margin:20px auto 24px; text-wrap:balance; }
.about-hero .lead{ max-width:62ch; margin-inline:auto; }
.about-story{ background:var(--bg-soft); }
.about-story__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(48px,9vw,140px); align-items:start; }
.about-story__grid h2{ margin-top:18px; }
.about-story__copy{ display:grid; gap:22px; font-size:clamp(18px,1.6vw,22px); line-height:1.65; color:var(--muted); }
.about-values{ padding-top:0; background:var(--bg-soft); }
.about-values__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.about-values article{ padding:clamp(28px,3vw,42px); background:#fff; border:1px solid var(--line); border-radius:var(--r-md); }
.about-values article span{ color:var(--green); font-size:13px; font-weight:700; letter-spacing:.12em; }
.about-values article h3{ margin:28px 0 12px; }
.about-values article p{ color:var(--muted); line-height:1.65; }
.about-contact{ padding-block:clamp(80px,10vw,140px); }
.about-contact__card{ display:flex; align-items:end; justify-content:space-between; gap:40px; padding:clamp(36px,6vw,80px); border-radius:var(--r-lg); background:var(--ink); color:#fff; }
.about-contact__card h2{ margin:18px 0 14px; color:#fff; }
.about-contact__card .eyebrow{ color:#fff; }
.about-contact__card p:not(.eyebrow){ color:rgba(255,255,255,.7); }
.about-contact__card .btn{ flex:none; background:#fff; color:var(--ink); }
.legal-hero{ max-width:850px; padding-bottom:clamp(42px, 6vw, 72px); border-bottom:1px solid var(--line); }
.legal-hero h1{ margin-top:16px; max-width:14ch; }
.legal-hero .lead{ margin-top:20px; max-width:66ch; }
.legal-updated{ margin-top:20px; font-size:.82rem; color:var(--ink-faint); }
.legal-layout{
  display:grid; grid-template-columns:220px minmax(0, 760px);
  gap:clamp(40px, 7vw, 100px); align-items:start;
  margin-top:clamp(48px, 7vw, 80px);
}
.legal-toc{
  position:sticky; top:100px; display:grid; gap:8px;
  padding:18px; border:1px solid var(--line); border-radius:16px; background:#fff;
}
.legal-toc strong{ margin-bottom:5px; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.legal-toc a{ font-size:.84rem; color:var(--ink-soft); }
.legal-toc a:hover{ color:var(--green-deep); }
.legal-content{ min-width:0; }
.legal-section{ scroll-margin-top:110px; padding-bottom:42px; margin-bottom:42px; border-bottom:1px solid var(--line-soft); }
.legal-section:last-child{ margin-bottom:0; border-bottom:0; }
.legal-section h2{ margin-bottom:18px; font-size:clamp(1.45rem, 2.4vw, 2rem); }
.legal-section h3{ margin:24px 0 10px; font-size:1rem; }
.legal-section p, .legal-section li{ color:var(--ink-soft); font-size:.94rem; line-height:1.75; }
.legal-section p + p{ margin-top:12px; }
.legal-section ul{ display:grid; gap:8px; margin:14px 0 0; padding-left:20px; list-style:disc; }
.legal-section a{ color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; }
.legal-callout{
  margin-top:18px; padding:18px 20px; border-radius:14px;
  background:color-mix(in srgb, var(--green) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--green) 18%, var(--line));
}
.legal-callout strong{ color:var(--ink); }
.legal-footer-contact{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:30px 0; border-top:1px solid var(--line-soft);
}
.legal-footer-contact strong{ display:block; margin-bottom:5px; color:var(--ink); font-size:.86rem; }
.legal-footer-contact address{ display:flex; gap:clamp(24px, 5vw, 64px); flex-wrap:wrap; font-style:normal; }
.legal-footer-contact address span, .legal-footer-contact address a{ color:var(--ink-soft); font-size:.86rem; }
.legal-footer-contact address a:hover{ color:var(--green-deep); }

@media (max-width: 760px){
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; }
  .legal-footer-contact address{ flex-direction:column; gap:16px; }
}

/* ---------- 13. Pages fonctionnalités ---------- */
.feature-page{
  --feature-accent:#1D9E75;
  --feature-image:url("../images/stock-feature-bg.jpg");
  --feature-image-position:center 48%;
  background:linear-gradient(180deg, #fff 0%, var(--bg) 32%, #fff 64%, var(--bg) 100%);
}
.feature-shop{ --feature-accent:#4E7FE1; --feature-image:url("../images/shop-feature-bg.jpg"); --feature-image-position:center 44%; }
.feature-reservation{ --feature-accent:#E0795A; --feature-image:url("../images/resa-feature-bg.jpg"); --feature-image-position:center 52%; }
.feature-loyalty{ --feature-accent:#C15D86; --feature-image:url("../images/fidel-feature-bg.jpg"); --feature-image-position:center 48%; }
.feature-page .page-hero{
  min-height:auto;
  background:#fff;
  /* Moins d'espace au-dessus de la bannière (tout en dégageant la nav fixe). */
  padding-top:clamp(84px, 9vh, 104px);
}
/* Le visuel du module : bannière arrondie en haut du hero (image plein cadre,
   sans voile blanc), moins haute. Le contenu (texte + démo) vient dessous. */
.feature-page .page-hero .hero-grid{
  --banner-h:clamp(150px, 19vw, 240px);
  position:relative;
  grid-template-columns:minmax(0,1.18fr) minmax(420px,.82fr); gap:clamp(40px, 5vw, 84px);
  align-items:start;
  padding-top:calc(var(--banner-h) + clamp(34px, 4vw, 60px));
}
.feature-page .page-hero .hero-grid::before{
  content:""; position:absolute; top:0; z-index:0;
  /* Bannière un peu plus large que le contenu (déborde dans la gouttière,
     sans dépasser le viewport : la gouttière mini du conteneur est de 24px). */
  left:-50px; right:-50px;
  height:var(--banner-h);
  border-radius:22px;
  background:var(--feature-image) var(--feature-image-position) / cover no-repeat;
  box-shadow:0 18px 50px rgba(21,33,27,.12);
}
.feature-page .hero-grid > *{ min-width:0; }
.feature-page .page-hero .hero-grid > *{ position:relative; z-index:1; }
.feature-page .page-hero h1{ max-width:18ch; font-size:clamp(52px, 5.3vw, 74px); line-height:.98; letter-spacing:-.05em; text-wrap:balance; }
.feature-page .page-hero .lead{ max-width:53ch; }
.feature-page .page-hero .hero-demo{ min-height:auto; padding:0; }
.feature-page .page-hero .hero-demo::before,
.feature-page .page-hero .hero-demo::after{ display:none; content:none; }
/* Bouton déplacé (JS, mobile) sous la card démo : devenu enfant direct de la
   grille, on l'espace et on le centre. */
.feature-page .page-hero .hero-grid > .hero-actions{ margin-top:22px; justify-content:center; }
.feature-page .page-hero .demo-snippet{
  width:100%; max-width:520px; padding:30px 26px; border-radius:22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 28px 70px rgba(21,33,27,.13), inset 0 1px 0 #fff;
}
.feature-page .page-hero .btn-primary::after{ background:var(--feature-accent); }
.feature-points{ padding-top:clamp(76px, 8vw, 112px); }
.feature-points .points-grid{ counter-reset:feature-point; }
.feature-points .point-card{
  counter-increment:feature-point; position:relative; min-height:310px;
  padding:34px 30px 30px; background:rgba(255,255,255,.78); border-radius:18px;
}
.feature-points .point-card::after{
  content:"0" counter(feature-point); position:absolute; right:24px; top:24px;
  color:color-mix(in srgb, var(--feature-accent) 45%, var(--ink-faint));
  font-family:var(--font-serif); font-size:.72rem; font-weight:700; letter-spacing:.08em;
}
.feature-points .point-card .ic{
  width:48px; height:48px; margin-bottom:28px; border-radius:14px;
  color:color-mix(in srgb, var(--feature-accent) 80%, var(--ink));
  background:color-mix(in srgb, var(--feature-accent) 11%, #fff);
}
.feature-points .point-card h3{ max-width:22ch; font-size:24px; line-height:1.08; }
.feature-points .point-card p{ margin-top:14px; }
.feature-detail{ padding-top:clamp(70px, 8vw, 110px); padding-bottom:clamp(90px, 10vw, 150px); }
.feature-detail .hero-grid{
  position:relative; padding:clamp(32px, 5vw, 68px); border:1px solid var(--line-soft);
  border-radius:24px; background:rgba(255,255,255,.68); box-shadow:0 20px 60px rgba(21,33,27,.06);
}
.feature-detail .hero-grid::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:24px 0 0 24px;
  background:var(--feature-accent);
}
.feature-detail .demo-snippet{ border-radius:18px; box-shadow:var(--shadow-soft); background:rgba(255,255,255,.72); }
.feature-detail h2{ max-width:12ch; line-height:1; margin-top:15px; }
.feature-page .talk{ padding-block:clamp(95px, 10vw, 145px); }
.feature-page .talk::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 88px);
}
.feature-page .talk .container{ position:relative; z-index:1; }
.feature-page .talk .ask-item{ border-radius:14px; padding:17px 18px; }
.feature-impact{ padding-block:clamp(100px, 12vw, 180px); }
.feature-impact__head{
  display:grid; grid-template-columns:1fr .72fr; gap:clamp(36px, 8vw, 110px);
  align-items:end; margin-bottom:clamp(45px, 6vw, 76px);
}
.feature-impact__head h2{ max-width:16ch; margin-top:15px; }
.feature-impact__head .lead{ margin:0; }
.feature-impact__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.impact-card{
  position:relative; min-height:280px; padding:32px 28px;
  border:1px solid var(--line-soft); border-radius:18px; background:rgba(255,255,255,.72);
  transition:transform .35s var(--ease-spring), box-shadow .35s ease;
}
.impact-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.impact-card > span{
  display:inline-flex; margin-bottom:55px; color:var(--feature-accent);
  font-family:var(--font-serif); font-size:.72rem; font-weight:700; letter-spacing:.08em;
}
.impact-card h3{ max-width:21ch; font-size:25px; line-height:1.08; }
.impact-card p{ margin-top:14px; color:var(--ink-soft); font-size:.86rem; }
.feature-setup{
  display:grid; grid-template-columns:.65fr 1.35fr; gap:clamp(30px, 6vw, 80px);
  align-items:center; margin-top:16px; padding:clamp(30px, 4vw, 48px);
  border-radius:20px; background:var(--green-ink); color:#fff;
}
.feature-setup .eyebrow{ color:#74DDB9; }
.feature-setup h3{ max-width:17ch; margin-top:14px; color:#fff; font-size:clamp(26px, 3vw, 38px); line-height:1.05; }
.feature-setup ol{ display:grid; grid-template-columns:repeat(3,1fr); }
.feature-setup li{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; padding:8px 20px; border-left:1px solid rgba(255,255,255,.1); }
.feature-setup li:first-child{ border-left:0; }
.feature-setup b{
  width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:rgba(116,221,185,.12); color:#74DDB9; font-size:.74rem;
}
.feature-setup span{ color:#8FA59A; font-size:.92rem; line-height:1.5; }
.feature-setup strong{ display:block; margin-bottom:6px; color:#fff; font-size:.92rem; line-height:1.3; }
.feature-cross{ padding-block:clamp(90px, 10vw, 145px); }
.feature-cross .section-head{ margin-bottom:34px; }
.feature-cross .cross a{
  position:relative; min-height:88px; padding:22px 58px 22px 22px;
  background:rgba(255,255,255,.72); border-radius:14px;
}
.feature-cross .cross a::after{
  content:"→"; position:absolute; right:22px; top:50%; translate:0 -50%;
  color:var(--feature-accent); font-size:1.1rem; transition:transform .25s ease;
}
.feature-cross .cross a:hover::after{ transform:translateX(4px); }
.feature-cross .cross .ic{ background:color-mix(in srgb, var(--feature-accent) 11%, #fff); color:var(--feature-accent); }

.page-hero{
  position:relative;
  padding:clamp(140px, 16vh, 180px) 0 clamp(50px, 6vw, 80px);
  overflow:clip;
}
/* Page tarifs : fond blanc ↔ beige en dégradé alterné subtil (haut → bas) */
body.page-tarifs{
  background:#ffffff;
}
.page-hero .hero-grid{ align-items:center; }
.page-hero h1{ margin:18px 0 20px; }
.page-hero .lead{ margin-bottom:32px; }

/* Mini-chat statique des pages internes */
.demo-snippet{
  padding:26px 22px;
  display:flex; flex-direction:column; gap:14px;
  max-width:440px; margin-inline:auto;
  position:relative;
}
.demo-snippet .msg{ animation:none; max-width:100%; }
.demo-snippet .widget{ animation:none; }
.demo-snippet .w-bar i{ animation-duration:1s; }

/* ---- Démos animées (séquence question → réflexion → réponse, pilotée par
   js/demo-snippet.js). Sans la classe .seq, tout reste affiché statiquement.
   L'état masqué est conditionné par :not(.in) : une fois .in posée, l'élément
   reprend son opacité normale (1), donc msgIn — qui n'a pas de keyframe `to` —
   se termine bien visible. ---- */
.demo-snippet.seq .msg--user:not(.in){ opacity:0; }
.demo-snippet.seq .msg--user.in{ animation:msgIn .32s var(--ease-spring) both; }

/* Le bloc Gillia reste présent (réserve la hauteur), seul son contenu est
   masqué tant que la réponse n'est pas révélée. */
.demo-snippet.seq .msg--Gillia{ position:relative; }
.demo-snippet.seq .msg--Gillia:not(.in) > .logo-circle,
.demo-snippet.seq .msg--Gillia:not(.in) > .msg-content{ opacity:0; }
.demo-snippet.seq .msg--Gillia.in > .logo-circle{ animation:msgIn .32s var(--ease-spring) both; }
.demo-snippet.seq .msg--Gillia.in > .msg-content{ animation:msgIn .32s var(--ease-spring) .03s both; }

/* Lignes de tableau : rejouées en cascade au moment de la révélation.
   (rowIn définit bien un keyframe `to`, donc reste visible en fin d'anim.) */
.demo-snippet.seq .msg--Gillia:not(.in) .w-table tr{ animation:none; opacity:0; transform:translateX(-10px); }
.demo-snippet.seq .msg--Gillia.in .w-table tr{
  animation:rowIn .3s var(--ease-spring) forwards;
  animation-delay:calc(var(--d, 0s) + .12s);
}

/* Bulle de réflexion, superposée à l'emplacement réservé de la réponse. */
.demo-snippet.seq .think-row{
  position:absolute; top:0; left:0;
  display:flex; gap:10px; align-items:flex-start;
  animation:msgIn .26s var(--ease-spring) both;
}
.demo-snippet.seq .think-row.out{ animation:msgOut .2s ease both; }

.points-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.point-card{
  background:var(--bg-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:30px 28px;
  transition:transform .35s var(--ease-spring), box-shadow .35s ease;
}
.point-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); }
.point-card .ic{
  width:44px; height:44px; border-radius:13px; margin-bottom:18px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(29,158,117,.13), rgba(20,163,160,.09));
  color:var(--green-deep);
}
.point-card .ic svg{ width:21px; height:21px; }
.point-card h3{ margin-bottom:10px; }
.point-card p{ font-size:.93rem; color:var(--ink-soft); }

/* ===== Cartes tarifs — version minimaliste (panneau divisé en 3) ===== */
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:1040px; margin-inline:auto;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  overflow:hidden;
}
/* Sur la page tarifs : pleine largeur du container, pour s'aligner au comparatif */
.pricing-grid--full{ max-width:none; }
.price-card{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(28px, 3vw, 42px) clamp(22px, 2.4vw, 34px);
  border-left:1px solid var(--line-soft);
  --accent:var(--green);
}
/* Touche de couleur sobre par forfait : bleu · violet · ambre (sans vert) */
.pricing-grid .price-card:nth-child(1){ --accent:#3F6BF6; }
.pricing-grid .price-card:nth-child(2){ --accent:#1D9E75; }
.pricing-grid .price-card:nth-child(3){ --accent:#EC7A3C; }
/* Fin liseré coloré en haut de chaque colonne */
.price-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent);
}
.price-card:first-child{ border-left:0; }
.price-card--featured{ background:#FDFCF8; }   /* beige plus clair que --bg-soft */

.price-card h3{ margin:0; }   /* reprend le style h3 global (serif) */
.price-card__tag{ margin:6px 0 0; font-size:.86rem; color:var(--ink-faint); min-height:40px; }
.price-card__price{ display:flex; align-items:baseline; gap:5px; margin:14px 0 6px; }
.price-card__price .amount{ font-size:2.2rem; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.price-card__price .per{ font-size:.85rem; color:var(--ink-faint); }
.price-card__note{ margin:0 0 18px; font-size:.78rem; color:var(--ink-faint); }
.pricing-teaser__note,
.compare-note{
  max-width:980px;
  margin:22px auto 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.6;
  text-align:center;
}
.compare-note{ padding-inline:18px; }

/* CTA minimal : pilule contour, pleine au survol ; pleine d'office pour l'offre phare */
.price-card__cta{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; border-radius:999px; padding:0 18px;
  font-size:.9rem; font-weight:600;
  border:1px solid var(--line); color:var(--ink);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.price-card__cta:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.price-card__cta--solid{ background:var(--accent); color:#fff; border-color:transparent; }
.price-card__cta--solid:hover{ filter:brightness(.93); background:var(--accent); border-color:transparent; }

.price-card__feats{
  list-style:none; margin:22px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:11px;
}
.price-card__feats li{
  position:relative; padding-left:24px;
  font-size:.87rem; color:var(--ink-soft); line-height:1.45;
}
.price-card__feats li::before{
  content:""; position:absolute; left:0; top:3px;
  width:15px; height:15px;
  background:var(--accent);   /* coche à la couleur du forfait */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Petit label de l'offre mise en avant (positionné, n'affecte pas l'alignement) */
.price-card__badge{
  position:absolute; top:clamp(14px,2vw,20px); right:clamp(16px,2vw,22px);
  font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent);
}

/* Page tarifs : trois cartes autonomes dans l'esprit de la section plateforme. */
.pricing-grid--full{
  gap:clamp(18px, 2.4vw, 32px);
  align-items:stretch;
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.pricing-grid--full .price-card{
  isolation:isolate;
  overflow:hidden;
  min-height:580px;
  padding:clamp(34px, 3.5vw, 50px) clamp(28px, 3vw, 42px);
  border:1px solid rgba(21,33,27,.09);
  border-radius:var(--r-md);
  background:#fff;
  box-shadow:0 1px 0 rgba(21,33,27,.04);
  transition:transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
}
.pricing-grid--full .price-card::before{
  z-index:-1;
  top:-74px; right:-70px; bottom:auto; left:auto;
  width:205px; height:205px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 68%);
}
.pricing-grid--full .price-card::after{
  content:"";
  position:absolute; z-index:-1;
  top:0; left:clamp(28px, 3vw, 42px);
  width:48px; height:3px;
  border-radius:0 0 4px 4px;
  background:var(--accent);
}
.pricing-grid--full .price-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 22%, rgba(21,33,27,.09));
  box-shadow:0 26px 70px rgba(21,33,27,.1);
}
.pricing-grid--full .price-card--featured{
  transform:scale(1.025);
  border-color:color-mix(in srgb, var(--accent) 24%, var(--line));
  box-shadow:0 18px 48px rgba(21,33,27,.08);
}
.pricing-grid--full .price-card--featured:hover{ transform:translateY(-5px) scale(1.025); }
.pricing-grid--full .price-card__tag{ margin-top:10px; min-height:54px; line-height:1.5; }
.pricing-grid--full .price-card__price{ margin:28px 0 8px; }
.pricing-grid--full .price-card__note{ margin-bottom:22px; }
.pricing-grid--full .price-card__cta{ height:48px; }
.pricing-grid--full .price-card__feats{ margin-top:30px; padding-top:28px; gap:15px; }
.pricing-grid--full .price-card__badge{
  top:24px; right:26px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
}

/* Teaser tarifs de l'accueil : cartes distinctes et aérées, avec une présence
   colorée discrète inspirée de la plateforme sans reprendre ses modules. */
.pricing-teaser{
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.55) 52%, #fff 100%);
}
.home-final-cta{ background:#fff; }
.pricing-teaser .section-head{ margin-bottom:clamp(60px, 7vw, 92px); }
.pricing-grid--teaser{
  max-width:1160px;
  gap:clamp(18px, 2vw, 28px);
  align-items:stretch;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
.pricing-grid--teaser .price-card{
  isolation:isolate;
  overflow:hidden;
  min-height:590px;
  padding:clamp(34px, 3.3vw, 48px) clamp(28px, 3vw, 42px);
  border:1px solid rgba(21,33,27,.09);
  border-radius:22px;
  background:#fff;
  box-shadow:0 1px 0 rgba(21,33,27,.04);
  transition:transform .35s var(--ease-spring), box-shadow .35s ease, border-color .35s ease;
}
.pricing-grid--teaser .price-card::before{
  z-index:-1;
  top:-70px; right:-70px; left:auto;
  width:190px; height:190px;
  border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 11%, transparent), transparent 68%);
}
.pricing-grid--teaser .price-card::after{
  content:"";
  position:absolute; z-index:-1;
  top:0; left:clamp(28px, 3vw, 42px);
  width:44px; height:3px; border-radius:0 0 4px 4px;
  background:var(--accent);
}
.pricing-grid--teaser .price-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 22%, rgba(21,33,27,.09));
  box-shadow:0 26px 70px rgba(21,33,27,.1);
}
.pricing-grid--teaser .price-card--featured{
  background:#fff;
  border-color:color-mix(in srgb, var(--accent) 20%, var(--line));
  box-shadow:0 18px 48px rgba(21,33,27,.08);
  transform:scale(1.055);
}
.pricing-grid--teaser .price-card--featured:hover{ transform:translateY(-5px) scale(1.055); }
.pricing-grid--teaser .price-card__tag{
  max-width:25ch;
  min-height:54px;
  margin-top:10px;
  font-size:.91rem;
  line-height:1.5;
}
.pricing-grid--teaser .price-card__price{ margin:28px 0 8px; }
.pricing-grid--teaser .price-card__price .per{ font-size:.9rem; }
.pricing-grid--teaser .price-card__note{
  min-height:38px;
  margin-bottom:22px;
  font-size:.79rem;
  line-height:1.45;
}
.pricing-grid--teaser .price-card__cta{ height:48px; }
.pricing-grid--teaser .price-card__feats{
  flex:1;
  margin-top:30px;
  padding-top:28px;
  gap:15px;
}
.pricing-grid--teaser .price-card__feats li{
  padding-left:27px;
  font-size:.89rem;
  line-height:1.5;
}
.pricing-grid--teaser .price-card__feats li::before{
  top:4px;
  width:16px; height:16px;
}
.pricing-grid--teaser .price-card__badge{
  top:24px; right:26px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
}

/* "Demandez à Gillia" — exemples */
.ask-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
  max-width:880px; margin-inline:auto;
}
.ask-item{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line-soft);
  border-radius:999px; padding:14px 22px 14px 14px;
  box-shadow:var(--shadow-soft);
  font-size:.96rem; font-weight:500;
  transition:transform .3s var(--ease-spring), box-shadow .3s ease;
}
.ask-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.ask-item .avatar--sm{ flex:none; }
.talk .ask-item{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#D7E2DB; box-shadow:none; }
.talk .ask-item .avatar--sm{ color:#fff; }

/* Liens croisés entre modules */
.cross{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cross a{
  display:flex; align-items:center; gap:14px;
  padding:20px 22px; border-radius:var(--r-sm);
  background:var(--bg-soft); border:1px solid var(--line-soft);
  font-weight:600; font-size:.96rem;
  transition:all .25s ease;
}
.cross a:hover{ border-color:rgba(29,158,117,.4); background:rgba(29,158,117,.05); }
.cross .ic{
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(29,158,117,.13), rgba(20,163,160,.09));
  color:var(--green-deep);
}
.cross .ic svg{ width:18px; height:18px; }

/* ---------- 14. Responsive ---------- */
/* Tablette + petits écrans desktop : liens de nav alignés à gauche (après le logo).
   Le centrage absolu n'est conservé que sur les grands écrans (≥1280px). */
@media (max-width: 1279px){
  .nav-links{ position:static; left:auto; translate:none; }
}

@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; gap:54px; min-width:0; }
  /* Empêche les colonnes 1fr de déborder à cause d'un contenu non sécable
     (eyebrow, chat) : sans min-width:0, la piste s'élargit au-delà du viewport. */
  .hero-copy, .hero-demo{ min-width:0; }
  .hero-copy h1{ overflow-wrap:break-word; }
  .hero-copy{ text-align:center; }
  .hero-copy .lead{ margin-inline:auto; }
  /* Section "feature-detail" : on garde le texte aligné à gauche (pas centré). */
  .feature-detail .hero-copy{ text-align:left; }
  .feature-detail .hero-copy .lead{ margin-inline:0; }
  .hero-actions, .hero-pos{ justify-content:center; }
  /* Bouton + note déplacés (JS) sous la démo : enfant direct du grid → on espace. */
  .hero .hero-grid > .hero-actions{ margin-top:clamp(22px, 4vw, 36px); justify-content:center; }
  .modules-grid{ grid-template-columns:repeat(2,1fr); }
  .platform-section .container{ width:min(100% - 48px, 1320px); }
  .platform-section .module-card{ min-height:330px; }
  .talk-cols, .scan-grid, .points-grid, .integ-grid, .cross{ grid-template-columns:1fr 1fr; }
  .vision-intro{ grid-template-columns:1fr; }
  .vision-photo{ aspect-ratio:16 / 9; }
  .pricing-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .price-card{ border-left:0; border-top:1px solid var(--line-soft); }
  .price-card:first-child{ border-top:0; }
  .price-card__tag{ min-height:0; }
  .pricing-grid--full{ max-width:620px; gap:20px; }
  .pricing-grid--full .price-card,
  .pricing-grid--full .price-card:first-child{ border:1px solid rgba(21,33,27,.09); }
  .pricing-grid--full .price-card--featured,
  .pricing-grid--full .price-card--featured:hover{ transform:none; }
  .pricing-grid--full .price-card__tag{ min-height:0; }
  .pricing-grid--teaser{ max-width:620px; gap:20px; }
  .pricing-grid--teaser .price-card,
  .pricing-grid--teaser .price-card:first-child{ border:1px solid rgba(21,33,27,.09); }
  .pricing-grid--teaser .price-card--featured,
  .pricing-grid--teaser .price-card--featured:hover{ transform:none; }
  .pricing-grid--teaser .price-card__tag,
  .pricing-grid--teaser .price-card__note{ min-height:0; }
  .plans{ grid-template-columns:1fr; max-width:480px; margin-inline:auto; }
  .footer-top{ grid-template-columns:1fr; gap:40px; }
  .sync-map{ grid-template-columns:1fr 60px 150px 60px 1.2fr; gap:12px; }
  .sync-output-grid{ grid-template-columns:1fr; }
  .maker-intro{ grid-template-columns:1fr; }
  .feature-page .page-hero .hero-grid{ grid-template-columns:1fr; }
  /* Hero empilé (tablette + mobile) : bannière moins large que le contenu. */
  .feature-page .page-hero .hero-grid::before{ left:20px; right:20px; }
  .feature-page .page-hero h1{ margin-inline:auto; }
  .feature-page .page-hero .hero-demo{ width:min(620px,100%); margin-inline:auto; }
  .feature-impact__head{ grid-template-columns:1fr; }
  .feature-impact__grid{ grid-template-columns:1fr 1fr; }
  .feature-impact__grid .impact-card:last-child{ grid-column:span 2; }
  .feature-setup{ grid-template-columns:1fr; }
}

@media (max-width: 920px){
  .nav{ gap:14px; }
  .nav-link{ padding:9px 11px; font-size:.92rem; }
  /* Petit écran + mobile : "Se connecter" devient une icône profil (texte masqué). */
  .link-login{
    display:inline-grid; place-items:center;
    width:40px; height:40px; border-radius:50%;
    border:1px solid var(--line); background:rgba(255,255,255,.6);
    color:var(--ink-soft);
  }
  .link-login:hover{ background:rgba(255,255,255,.9); color:var(--ink); }
  .link-login__txt{ display:none; }
  .link-login__ic{ display:block; width:20px; height:20px; }
}

@media (max-width: 760px){
  body{ font-size:16px; }
  /* Hero : actions empilées, bouton pleine largeur, note centrée */
  .hero{ padding-top:clamp(116px, 22vw, 150px); }
  .hero-actions{ flex-direction:column; align-items:center; gap:14px; width:100%; }
  .hero-actions .btn{ width:100%; max-width:360px; justify-content:center; }
  .hero-note{ text-align:center; }
  .hero-pos{ margin-top:34px; }
  .chat{ max-width:none; }
  /* Marquee : prompts un peu plus compacts, dégradés latéraux réduits */
  .marquee .prompt{ font-size:.88rem; padding:11px 18px; }
  .marquee-fade{ width:64px; }
  .talk-cols{ margin-top:40px; }
  /* Comparatif sur mobile : un seul forfait visible à la fois (pas de scroll
     horizontal). On masque les colonnes forfait, sauf celle active. */
  .compare{ overflow-x:visible; }
  .compare table{ min-width:0; }
  .compare thead th{ position:static; box-shadow:none; }
  .compare th, .compare td{ padding:16px 14px; }
  .compare thead th:first-child{ width:58% !important; }   /* surcharge le width:40% inline */
  .compare :is(th,td):nth-child(2),
  .compare :is(th,td):nth-child(3),
  .compare :is(th,td):nth-child(4){ display:none; }
  .compare[data-active="2"] :is(th,td):nth-child(2),
  .compare[data-active="3"] :is(th,td):nth-child(3),
  .compare[data-active="4"] :is(th,td):nth-child(4){ display:table-cell; }
  /* Sélecteur de forfait, collé en bas de l'écran pendant la lecture du tableau. */
  .compare-switch{
    display:flex; justify-content:center;
    position:sticky; bottom:14px; z-index:6;
    margin-top:22px; pointer-events:none;
  }
  .cs-track{ pointer-events:auto; }
  .contact-form__row{ grid-template-columns:1fr; }
  .cta-band{ grid-template-columns:1fr; gap:28px; text-align:center; }
  .cta-band h2{ max-width:none; margin-inline:auto; }
  .cta-band p{ margin-inline:auto; }
  .contact-form{ text-align:left; }
  .nav-links{ display:none; }   /* .link-login reste affiché en icône profil (cf. ≤920px) */
  .nav-cta .btn{ display:none; }
  .nav-burger{ display:grid; }
  .nav{ padding:10px 18px; }
  .modules-grid, .talk-cols, .scan-grid, .points-grid, .integ-grid, .ask-grid, .cross{ grid-template-columns:1fr; }
  .platform-section{
    padding:100px 0 48px;
  }
  .platform-section .container{ width:min(100% - 32px, 1320px); }
  .platform-section .section-head{ margin-bottom:64px; }
  .platform-section .modules-grid{ grid-template-columns:1fr; gap:18px; }
  .platform-section .module-card{ min-height:300px; padding:30px; }
  .platform-lottie-breath{ height:0; }
  .footer-logo{ height:120px; }
  .footer-cols{ grid-template-columns:1fr 1fr; gap:24px 30px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
  .chat-stream{ height:360px; }
  /* Mobile : pas de scrub (pas d'épinglage), la vidéo est lue en boucle.
     Plein écran en largeur, hauteur auto → la section s'adapte à la vidéo. */
  .lottie-scene-section{
    width:100%;
    height:auto;
    padding:0;
  }
  .lottie-scene{
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:auto;
    margin:0;
    border-radius:0;
    box-shadow:none;
  }
}

/* ===== Features : layout classique (mobile + tablette, < 1200px) =====
   Sous 1200px : pas d'animation snap, pile statique à scroll naturel.
   Le pin + slides absolus + cascade/parallaxe restent réservés au desktop (≥ 1200px). */
@media (max-width: 1199px){
  .features-pin{
    display:block;
    min-height:0;
    width:auto;
    margin:0;
  }
  .features-sticky-media{ display:none; }
  .features-track{
    position:relative;
    top:auto;
    height:auto;
    display:flex;
    flex-direction:column;
    gap:clamp(56px, 8vw, 110px);
    padding:clamp(48px, 8vw, 110px) 0;
  }
  .features-stage .feat-slide{
    position:relative;
    inset:auto;
    min-height:auto;
    display:block;
    pointer-events:auto;
    transform:none;
    transition:none;
  }
  .features-stage .feat-slide > .container{
    width:min(1260px, 100% - 48px);
    margin-inline:auto;
  }
  .features-stage .stock-feature{
    display:flex;
    flex-direction:column;   /* bat le flex-direction:row desktop (même spécificité) */
    gap:0;
  }
  .features-stage .stock-feature > .stock-feature__media{ display:block; }
  .features-stage .stock-feature__content{
    order:2;
    width:100%;
    flex:0 0 auto;
    align-self:auto;
    height:auto;
    min-height:0;
  }
  .features-stage .stock-feature__demo{
    order:3;
    width:100%;
    flex:none;
    align-self:auto;
    margin-left:0;
    transform:none;
  }
  .features-stage .stock-feature__demo .demo-snippet{ max-width:none; }
  /* Mobile : pile statique sans snap → on annule cascade + parallaxe
     (sinon le contenu des slides non-actives resterait invisible). */
  .features-stage .feat-slide .stock-feature__content > *,
  .features-stage .feat-slide .stock-feature__demo{
    opacity:1; transform:none; translate:none; transition:none;
  }
  .features-sticky-media__image.is-active{ translate:none; }
  .stock-feature,
  .shop-feature{
    width:100%; margin-inline:0; /* pas de débordement sur mobile */
    padding:16px;
    border-radius:22px;
    flex-direction:column;        /* image en bandeau, puis cards empilées */
    gap:0;                        /* espacement géré par les marges (chevauchement) */
  }
  /* En pile : image en bandeau (1), contenu (2), démo (3).
     L'image est plus haute, déborde légèrement sur les côtés, et son bas
     est recouvert par le haut de la card contenu (effet de superposition). */
  .stock-feature__media{
    flex:none; order:1;
    width:auto; margin-inline:-16px;          /* déborde de 16px de chaque côté */
    min-height:clamp(250px, 64vw, 340px);     /* nettement plus haute */
    align-self:stretch; z-index:1;
  }
  .stock-feature__content,
  .shop-feature__content{
    order:2; width:100%; align-self:auto; padding:26px 22px; border-radius:18px;
    /* En pile (flex column), flex:1 1 0 hérité + overflow:hidden réduisaient
       min-height auto à 0 → la card se repliait sur son seul padding et masquait
       le contenu. On rend la hauteur dépendante du contenu. */
    flex:0 0 auto;
    position:relative; z-index:2;
    margin-top:-180px;                          /* remonte sur le bas de l'image */
  }
  .stock-feature__demo,
  .shop-feature__demo{
    order:3; width:100%; align-self:auto; flex:none;
    margin-left:0; transform:none;   /* on annule le chevauchement/flottement */
    margin-top:clamp(28px, 5vw, 44px);  /* espace entre la card contenu et la card chat */
  }
  .stock-feature__demo .demo-snippet,
  .shop-feature__demo .demo-snippet{ max-width:none; }
  .stock-feature--shop,
  .stock-feature--loyalty{ flex-direction:column; }       /* miroir désactivé en pile */
  /* Variantes miroir : on force le même ordre (image en haut) que les autres,
     en surpassant les règles desktop de plus forte spécificité. */
  .stock-feature--shop .stock-feature__media,
  .stock-feature--loyalty .stock-feature__media{ order:1; }
  .stock-feature--shop .stock-feature__content,
  .stock-feature--loyalty .stock-feature__content{ order:2; }
  .stock-feature--shop .stock-feature__demo,
  .stock-feature--loyalty .stock-feature__demo{ order:3; }
  .stock-feature__arrow{ width:50px; height:50px; top:auto; left:auto; bottom:-18px; right:12px; }
  .feature-cta{ margin-top:24px; }   /* en pile : pas d'espace auto, on garde un écart */
  /* Bouton "Tester …" déplacé (JS) sous la card démo : devenu enfant direct du
     bloc, on le place en dernier (order:4) et en pleine largeur. */
  .stock-feature > .feature-cta,
  .shop-feature > .feature-cta{
    order:4; align-self:stretch; justify-content:center;
    width:100%; margin-top:14px;
  }
  .stock-feature-section,
  .shop-feature-section,
  .reservation-feature-section,
  .loyalty-feature-section{ min-height:auto; }   /* pas d'empilement sur mobile */
}

@media (max-width: 760px){
  .about-hero{ padding-top:130px; }
  .about-story__grid{ grid-template-columns:1fr; gap:30px; }
  .about-values__grid{ grid-template-columns:1fr; }
  .about-contact__card{ align-items:flex-start; flex-direction:column; padding:32px 24px; border-radius:20px; }

  .page-hero{ padding-top:120px; }
  .feature-page .page-hero{ min-height:auto; padding-top:86px; padding-bottom:80px; }
  .feature-page .page-hero h1{ max-width:none; font-size:clamp(46px, 8vw, 64px); }
  /* Bannière du hero plus courte sur mobile (la hauteur pilote le padding-top
     défini en desktop, qui place le contenu sous la bannière). */
  .feature-page .page-hero .hero-grid{ --banner-h:clamp(120px, 33vw, 180px); }
  .feature-page .page-hero .hero-demo{ min-height:0; padding:0; }
  .feature-page .hero-grid{ grid-template-columns:minmax(0,1fr); width:calc(100% - 48px); max-width:none; }
  .feature-page .hero-copy,.feature-page .hero-demo,.feature-page .msg-content,.feature-page .widget{ min-width:0; max-width:100%; }
  .feature-page .page-hero h1{ max-width:none; font-size:clamp(33px, 8.6vw, 44px); overflow-wrap:break-word; }
  .feature-page .page-hero .lead{ max-width:30ch; overflow-wrap:anywhere; }
  .feature-page .page-hero .hero-actions{ justify-content:center; }
  .feature-page .page-hero .btn{ padding-inline:18px; white-space:normal; text-align:center; }
  .feature-page .page-hero .demo-snippet{ width:100%; padding:20px 16px; border-radius:16px; overflow:hidden; }
  /* Les tableaux des réponses tiennent dans la largeur, sans scroll ni
     débordement : le tableau s'adapte au conteneur (table-layout:fixed),
     colonnes proportionnées, police réduite et césure des mots longs. */
  .feature-page .w-table{ overflow-x:visible; }
  .feature-page .w-table table{ min-width:0; max-width:100%; width:auto; table-layout:auto; }
  /* Texte réduit + une seule ligne par cellule : chaque info (désignation,
     quantité, montant) tient sur une ligne. Tableau ramené à la largeur de son
     contenu pour garder désignation et quantité rapprochées. */
  .feature-page .w-table td{ font-size:.74rem; white-space:nowrap; padding-right:5px; }
  .feature-page .w-table td.qty{ text-align:left; }
  .feature-page .w-table td:last-child{ padding-right:0; }
  /* On élargit la bulle de réponse + on réduit le padding du widget pour donner
     le plus de largeur possible au tableau. */
  .feature-page .demo-snippet .msg{ max-width:100%; }
  .feature-page .demo-snippet .widget{ padding:12px; }
  .feature-points{ padding-top:72px; }
  .feature-points .point-card{ min-height:auto; padding:28px 24px; }
  .feature-detail{ padding-top:70px; padding-bottom:90px; }
  .feature-detail .hero-grid{ padding:30px 20px; border-radius:18px; }
  .feature-detail .hero-grid::before{ width:3px; border-radius:18px 0 0 18px; }
  .feature-impact{ padding-block:90px; }
  .feature-impact__head{ gap:18px; margin-bottom:34px; }
  .feature-impact__grid{ grid-template-columns:1fr; }
  .feature-impact__grid .impact-card:last-child{ grid-column:auto; }
  .impact-card{ min-height:auto; padding:26px 24px; }
  .impact-card > span{ margin-bottom:32px; }
  .feature-setup{ padding:28px 22px; }
  .feature-setup ol{ grid-template-columns:1fr; }
  .feature-setup li,.feature-setup li:first-child{ padding:16px 0; border-left:0; border-top:1px solid rgba(255,255,255,.1); }
  .feature-setup li:first-child{ border-top:0; }
  .feature-cross .cross a{ min-height:76px; }
  .sync-story__intro{ grid-template-columns:1fr; gap:18px; }
  /* Pleine largeur du conteneur (même gouttière que les autres sections). */
  .sync-story{
    padding:32px 22px; border-radius:18px; min-width:0;
    width:auto; margin-inline:0;
  }
  .sync-map{ display:flex; flex-direction:column; min-height:0; padding:42px 0; }
  .sync-map__source,.sync-map__outputs{ width:100%; }
  .sync-system-card{ width:100%; }
  .sync-system-card > i{ right:calc(50% - 4px); top:auto; bottom:-4px; }
  .sync-map__route{ width:1px; height:46px; flex-direction:column; }
  .sync-map__route span{ width:1px; min-height:18px; background:linear-gradient(180deg, rgba(0,238,159,.1), #00EE9F); }
  .sync-map__route b{ writing-mode:horizontal-tb; transform:none; white-space:nowrap; }
  .sync-map__route--out span{ background:linear-gradient(180deg, #00EE9F, rgba(0,238,159,.1)); }
  .sync-map__core{ width:154px; }
  .sync-output-grid{ grid-template-columns:1fr 1fr; }
  .sync-steps{ grid-template-columns:1fr; }
  .sync-steps li,.sync-steps li:first-child,.sync-steps li:last-child{
    padding:20px 0; border-left:0; border-top:1px solid rgba(255,255,255,.08);
  }
  .sync-steps li:first-child{ border-top:0; }
  .maker-section{ padding-top:90px; }
  .maker-intro{ gap:30px; }
  .maker-intro__copy h2{ max-width:none; }
  .maker-grid{ grid-template-columns:1fr; }
  .maker-card,.maker-card--wide,.maker-card--data{ grid-column:auto; min-height:auto; padding:28px 24px; }
  .maker-card--wide::after,.maker-card--data::after{ display:none; }
  .maker-pledge{ align-items:flex-start; padding:18px; }
}

/* ---------- 14b. Petits téléphones ---------- */
@media (max-width: 480px){
  /* Plus de largeur utile : marges latérales resserrées */
  .container{ width:min(100%, 100% - 32px); }
  .platform-section .container{ width:min(100% - 32px, 1320px); }

  /* Hero */
  .hero{ padding-top:104px; }
  .hero-copy h1{ margin:16px 0 18px; }
  .hero-copy .lead{ margin-bottom:28px; }
  .hero-pos{ font-size:.8rem; }

  /* Chat démo */
  .chat-top{ padding:13px 16px; }
  .chat-stream{ height:300px; padding:16px 14px 6px; }
  .chat-bar{ margin:8px 12px 6px; padding:7px 7px 7px 14px; }
  .chat-chips{ padding:4px 12px 14px; }
  .chat-chips button{ font-size:.74rem; padding:6px 11px; }

  /* Cartes & blocs : padding allégé */
  .platform-section .module-card{ min-height:auto; padding:26px 22px; }
  .talk-col{ padding:24px 22px; }
  .scan-card{ min-height:auto; padding:26px 22px; }
  /* Carte en hauteur auto : margin-top:auto ne crée plus d'espace, on en ajoute un. */
  .scan-card .visu{ margin-top:20px; }
  .price-card{ padding:30px 24px; }
  .pricing-grid--teaser .price-card{ min-height:auto; padding:32px 26px; }
  .demo-snippet{ padding:20px 16px; }

  /* Pied de page : une colonne, wordmark contenu */
  .footer-cols{ grid-template-columns:1fr; gap:22px; }
  .footer-wordmark{ --footer-wordmark-base:clamp(96px, 42vw, 240px); }
}

/* ---------- 15. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; }
  .t-line-i{ transform:none !important; }
  .pre-anim .hero-copy > *, .pre-anim .hero-demo{ opacity:1 !important; }
}

/* ---------- 16. Motion premium (page d'accueil) ----------
   Règles additives, inertes hors index : .lenis n'est posée que lorsque le
   scroll inertiel tourne, .pre-anim que par le script anti-FOUC, et .t-line
   n'est créée qu'à l'exécution par js/motion.js. */

/* Scroll inertiel Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* Anti-FOUC : le hero est masqué avant l'animation d'entrée pilotée par GSAP */
.pre-anim .hero-copy > *,
.pre-anim .hero-demo{ opacity:0; }

/* Révélation de titres ligne par ligne : masque qui clippe, contenu qui monte.
   Le padding/margin compensé évite de rogner accents et jambages. */
.t-line{ display:block; overflow:hidden; padding-block:.12em; margin-block:-.12em; }
.t-line-i{ display:block; will-change:transform; }

/* Indices de compositing pendant l'entrée du hero */
.hero-demo{ will-change:transform, opacity; }