/* ===== S2M Vision — famille "mobile" — socle graphique V2 =====
   5 jetons de couleur : --paper --ink --muted --accent --line, posés par client.js
   depuis window.CLIENT.couleurs (valeurs par défaut ci-dessous pour la page sans JS).
   Cadre téléphone sur ordinateur, plein écran sur mobile. Héros éditorial asymétrique
   (texte col. 1–6 / photo pleine hauteur col. 7–12), grille 12 colonnes, base 8 px. */

:root{
  --paper:#F4F0E8; --ink:#23292C; --muted:#6B6459; --accent:#E8631B; --line:#DED6C6;
  --radius-s:6px; --radius-m:8px; --radius-pill:999px;
  --font-display:'Bricolage Grotesque',serif; --font-body:'Figtree',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:-.02em}
p{margin:0}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}
.num-tab{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---------- bandeau démo ---------- */
.demo-banner{
  position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--paper);font-size:13px;padding:8px 40px 8px 14px;text-align:center;line-height:1.4;
}
.demo-banner button{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:inherit;
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.demo-banner button svg{width:15px;height:15px}
.demo-banner button:hover{background:rgba(255,255,255,.16)}
.demo-banner.masque{display:none}

/* ---------- héros éditorial asymétrique ---------- */
.scene{
  display:grid;grid-template-columns:repeat(12,1fr);gap:32px;min-height:calc(100vh - 37px);
  align-items:stretch;position:relative;
}
.hero-texte{
  grid-column:1 / 6;grid-row:1;display:flex;flex-direction:column;justify-content:center;
  padding:64px 16px 64px 48px;max-width:480px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--accent);margin-bottom:20px;
}
.eyebrow::before{content:'';width:18px;height:1.5px;background:var(--accent)}
.hero-texte h1{
  font-size:clamp(28px,3vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--ink);
  max-width:11ch;overflow-wrap:break-word;
  opacity:0;transform:translateY(28px);animation:entree-h1 .7s cubic-bezier(.22,1,.36,1) .05s forwards;
}
.hero-texte h1 .mot-accent{color:var(--accent);font-weight:800}
.chapo{
  font-size:18px;line-height:1.6;color:var(--muted);margin:24px 0 32px;max-width:56ch;padding-left:18px;
  border-left:2px solid var(--line);
  opacity:0;transform:translateY(20px);animation:entree-fade .6s cubic-bezier(.22,1,.36,1) .18s forwards;
}
.liste-ecrans{
  list-style:none;margin:0;padding:0;counter-reset:ecran;
  opacity:0;transform:translateY(16px);animation:entree-fade .6s cubic-bezier(.22,1,.36,1) .30s forwards;
}
.liste-ecrans li{border-top:1px solid var(--line)}
.liste-ecrans li:last-child{border-bottom:1px solid var(--line)}
.liste-ecrans button{
  width:100%;display:flex;align-items:center;gap:16px;background:none;border:none;padding:15px 4px;
  text-align:left;font-size:15px;font-weight:600;color:var(--ink);
}
.liste-ecrans button .n{
  counter-increment:ecran;font-family:var(--font-display);font-weight:700;font-size:13px;
  color:var(--muted);width:20px;flex-shrink:0;
}
.liste-ecrans button .n::before{content:counter(ecran, decimal-leading-zero)}
.liste-ecrans button svg{width:16px;height:16px;color:var(--line);margin-left:auto;flex-shrink:0;transition:transform .2s ease}
.liste-ecrans button:hover svg,.liste-ecrans button.actif svg{color:var(--accent);transform:translateX(3px)}
.liste-ecrans button.actif .n{color:var(--accent)}
.pied-hero{margin-top:32px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:48ch}
.pied-hero a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.hero-photo{
  grid-column:7 / 13;grid-row:1;position:relative;overflow:hidden;min-height:520px;background:var(--line);
}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  filter:saturate(.86) contrast(1.05);
}
.hero-photo .voile-photo{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.34) 100%);
}
.hero-photo .grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.credit-photo{
  position:absolute;left:16px;bottom:14px;color:#fff;font-size:10.5px;opacity:.8;z-index:2;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}

.phone-wrap{
  grid-column:6 / 8;grid-row:1;align-self:end;justify-self:start;z-index:4;margin:0 0 40px 4px;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.32));
}
.phone{
  width:340px;height:700px;border-radius:38px;background:#0c0c0e;padding:11px;position:relative;
}
.phone::before{
  content:'';position:absolute;top:20px;left:50%;transform:translateX(-50%);width:78px;height:19px;
  background:#0c0c0e;border-radius:12px;z-index:5;
}
.phone-screen{width:100%;height:100%;border-radius:29px;overflow:hidden;background:var(--paper);position:relative;display:flex;flex-direction:column}

@keyframes entree-h1{to{opacity:1;transform:translateY(0)}}
@keyframes entree-fade{to{opacity:1;transform:translateY(0)}}

/* ---------- app interne ---------- */
.app{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;background:var(--paper);font-size:15px}
.ecran{
  position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;background:var(--paper);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
.ecran.actif{opacity:1;transform:translateY(0);pointer-events:auto;position:relative}
.ecran::-webkit-scrollbar{width:0;height:0}

.entete{
  flex-shrink:0;display:flex;align-items:center;gap:10px;padding:34px 18px 12px;background:var(--paper);
  position:sticky;top:0;z-index:4;border-bottom:1px solid transparent;
}
.entete h2{font-size:19px;color:var(--ink);letter-spacing:-.02em}
.entete .soustitre{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600}
@media (max-width:600px){.entete{padding-top:calc(env(safe-area-inset-top,0px) + 16px)}}
.corps{flex:1;padding:0 18px 100px}

/* ---------- barre d'onglets ---------- */
.tabbar{
  flex-shrink:0;display:flex;background:var(--paper);border-top:1px solid var(--line);
  padding:8px 6px calc(env(safe-area-inset-bottom,0px) + 8px);position:sticky;bottom:0;z-index:10;
}
.tabbar button{
  flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;color:var(--muted);font-size:10.5px;font-weight:600;border-radius:var(--radius-s);min-height:44px;
  justify-content:center;transition:color .16s ease;
}
.tabbar button svg{width:21px;height:21px;transition:transform .18s ease}
.tabbar button.actif{color:var(--accent)}
.tabbar button.actif svg{transform:translateY(-1px)}

/* ---------- cartes / listes génériques ---------- */
.carte{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-m);padding:16px;margin-bottom:12px}
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);
  color:var(--paper);border:1.5px solid var(--ink);border-radius:var(--radius-s);padding:13px 18px;font-weight:700;
  font-size:14.5px;min-height:44px;transition:transform .15s ease, opacity .15s ease, background .15s ease;
}
.bouton:active{transform:scale(.97)}
.bouton.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.bouton.accent{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.bouton.pleine-largeur{width:100%}
.bouton:disabled{opacity:.42;pointer-events:none}
.puce{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--line) 45%, var(--paper));color:var(--muted);border:1px solid var(--line);
}

/* ---------- feuille modale ---------- */
.voile{position:absolute;inset:0;background:rgba(15,12,8,.4);opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:20}
.voile.ouvert{opacity:1;pointer-events:auto}
.feuille{
  position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-radius:var(--radius-m) var(--radius-m) 0 0;
  border-top:1px solid var(--line);
  padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 20px);max-height:84%;overflow-y:auto;
  transform:translateY(100%);transition:transform .34s cubic-bezier(.22,.9,.32,1);z-index:21;
}
.feuille.ouvert{transform:translateY(0)}
.feuille .poignee{width:36px;height:3px;border-radius:2px;background:var(--line);margin:6px auto 14px}

/* ---------- toast ---------- */
.toast{
  position:absolute;left:18px;right:18px;bottom:96px;background:var(--ink);color:var(--paper);
  padding:12px 16px;border-radius:var(--radius-s);font-size:13.5px;font-weight:600;text-align:center;z-index:30;
  opacity:0;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease;pointer-events:none;
}
.toast.visible{opacity:1;transform:translateY(0)}

/* ---------- reset démo ---------- */
.reset-demo{
  position:fixed;right:14px;bottom:14px;z-index:80;background:var(--paper);border:1px solid var(--line);
  color:var(--muted);font-size:11.5px;font-weight:600;padding:8px 12px;border-radius:var(--radius-pill);
  display:flex;align-items:center;gap:6px;
}
.reset-demo svg{width:14px;height:14px}
@media (max-width:600px){.reset-demo{right:10px;bottom:10px;font-size:10.5px;padding:7px 10px}}

/* ---------- pied de page ---------- */
.pied-page{
  max-width:1180px;margin:0 auto;padding:0 32px 40px;font-size:12px;color:var(--muted);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.pied-page a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---------- responsive ---------- */
@media (max-width:600px){
  .demo-banner{font-size:12px;padding:7px 36px 7px 10px}
  .scene{display:block;min-height:auto}
  .hero-texte,.hero-photo{display:none}
  .pied-page{display:none}
  .phone-wrap{position:static;filter:none}
  .phone{width:100%;height:100vh;height:100dvh;border-radius:0;padding:0}
  .phone::before{display:none}
  .phone-screen{border-radius:0;height:100%}
}
@media (min-width:601px) and (max-width:1080px){
  .hero-texte{padding:48px 20px 48px 28px}
  .phone{width:280px;height:580px}
  .phone-wrap{margin-bottom:28px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .hero-texte h1,.chapo,.liste-ecrans{opacity:1;transform:none;animation:none}
}