/* =============================================================================
   SimplyCell — site vitrine
   Design sobre & pro, aligné sur le design system de l'app (Inter, bleu, cartes).
   100% autonome (aucun build). Palette pensée pour rester douce, non saturée.
   ============================================================================= */

:root{
  /* Marque */
  --blue:#2563eb;   --blue-d:#1d4ed8;   --blue-l:#3b82f6;   --blue-soft:#eef4ff;
  --ink:#0f1e3a;    --ink-2:#16233b;    --ink-3:#1e3358;
  /* Texte & surfaces */
  --text:#1e293b;   --muted:#5b6b85;    --muted-2:#8a97ad;
  --line:#e7ebf3;   --line-2:#eef2f8;   --bg:#f6f8fc;   --card:#ffffff;
  /* Accents (sobres, usage parcimonieux) */
  --amber:#e6a417;  --amber-soft:#fdf3d9;
  --green:#12b981;  --green-soft:#dff5ec;
  --indigo:#6d5cf0; --indigo-soft:#eeecfe;
  --red:#e0564a;    --red-soft:#fce9e7;
  /* Rayons / ombres */
  --r:16px; --r-sm:12px; --r-lg:22px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(15,23,42,.06);
  --sh:0 8px 24px rgba(15,31,58,.07);
  --sh-lg:0 24px 60px rgba(15,31,58,.14);
  --container:1140px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:-.02em; color:var(--ink); font-weight:800; }
p{ margin:0; }
::selection{ background:rgba(37,99,235,.18); }

/* ---- Layout ---------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:84px 0; }
.section--tight{ padding:56px 0; }
.center{ text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-soft); padding:6px 13px; border-radius:var(--r-pill);
}
.section-head{ max-width:680px; margin:0 auto 52px; text-align:center; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin:18px 0 14px; }
.section-head p{ font-size:1.08rem; color:var(--muted); }

/* ---- Boutons --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-weight:700; font-size:.98rem; line-height:1;
  padding:14px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .18s ease, background .18s, border-color .18s, color .18s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 10px 24px -8px rgba(37,99,235,.6); }
.btn--primary:hover{ background:var(--blue-d); box-shadow:0 14px 30px -8px rgba(37,99,235,.7); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn--ghost:hover{ border-color:#cfd8e8; background:#fbfcff; }
.btn--light{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px); }
.btn--light:hover{ background:rgba(255,255,255,.2); }
.btn--lg{ padding:16px 28px; font-size:1.04rem; }
.btn--block{ width:100%; }

/* ---- Navigation ------------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,252,.82); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s, background .2s;
}
.nav.is-scrolled{ border-bottom-color:var(--line); background:rgba(255,255,255,.9); }
.nav__in{ display:flex; align-items:center; gap:24px; height:70px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.18rem; color:var(--ink); letter-spacing:-.02em; }
.brand__logo{ width:38px; height:38px; border-radius:11px; box-shadow:var(--sh-sm); }
/* Logo officiel en un seul bloc (mascotte + mot-symbole). Le fichier source est carre
   avec de larges marges transparentes : -nav.png en est la version recadree. */
.brand__mark{ height:44px; width:auto; display:block; }
/* Fond sombre du pied de page : version au mot-symbole blanc. */
.brand__mark--footer{ height:52px; }
.brand b{ color:var(--blue); font-weight:800; }
.nav__links{ display:flex; align-items:center; gap:6px; margin-left:14px; }
.nav__links a{ color:var(--muted); font-weight:600; font-size:.94rem; padding:8px 12px; border-radius:10px; transition:.15s; }
.nav__links a:hover{ color:var(--ink); background:rgba(37,99,235,.06); }
.nav__cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
/* Lien « Espace annonceurs » : volontairement en TEXTE, pas en bouton. Il
   s'adresse aux fournisseurs, pas aux clients — un troisième bouton diluerait
   le seul appel à l'action qui compte sur cette page. Masqué sous 1080 px :
   il est repris dans le menu déroulant, où il ne serre plus la barre. */
.nav__ann{ color:var(--muted); font-weight:600; font-size:.88rem; padding:8px 10px; border-radius:10px; transition:.15s; white-space:nowrap; }
.nav__ann:hover{ color:var(--ink); background:rgba(37,99,235,.06); }
@media (max-width:1080px){ .nav__ann{ display:none; } }
.nav__burger{ display:none; margin-left:auto; background:none; border:none; padding:8px; cursor:pointer; color:var(--ink); }

/* ---- Hero ------------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden; color:#eaf1ff;
  background:
    radial-gradient(900px 500px at 82% -8%, rgba(59,130,246,.34), transparent 60%),
    radial-gradient(700px 480px at 4% 108%, rgba(109,92,240,.24), transparent 60%),
    linear-gradient(160deg, #0f1e3a 0%, #16294b 52%, #1b3564 100%);
}
.hero::after{ /* fondu vers le fond de page */
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:120px;
  background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none;
}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:74px 0 96px;
}
.hero__badge{
  display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:600;
  color:#bcd2ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  padding:7px 14px; border-radius:var(--r-pill); margin-bottom:22px;
}
.hero__badge .dot{ width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 4px rgba(74,222,128,.22); }
.hero h1{
  color:#fff; font-size:clamp(2.1rem,4.8vw,3.5rem); line-height:1.06; letter-spacing:-.03em;
}
.hero h1 .grad{ background:linear-gradient(100deg,#7db2ff,#a99bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__lead{ margin:22px 0 30px; font-size:1.16rem; color:#c3d2ee; max-width:540px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:30px; }
.hero__meta span{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; color:#b7c6e6; }
.hero__meta svg{ width:18px; height:18px; color:#6fe0a8; flex:0 0 auto; }

/* ---- Maquette app (hero) --------------------------------------------------- */
.mock{ position:relative; }
.mock__win{
  background:#fff; border-radius:18px; box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.5); overflow:hidden; transform:rotate(.6deg);
}
.mock__bar{ display:flex; align-items:center; gap:7px; padding:12px 15px; background:#f2f5fb; border-bottom:1px solid var(--line); }
.mock__bar i{ width:11px; height:11px; border-radius:50%; background:#d6deec; }
.mock__bar i:nth-child(1){ background:#f7a9a0; } .mock__bar i:nth-child(2){ background:#fbd28a; } .mock__bar i:nth-child(3){ background:#a8dfb6; }
.mock__bar span{ margin-left:10px; font-size:.72rem; color:var(--muted-2); font-weight:600; }
.mock__body{ display:grid; grid-template-columns:52px 1fr; }
.mock__side{ background:#101f3c; padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:16px; }
.mock__side b{ width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.14); }
.mock__side b.on{ background:var(--blue-l); }
.mock__main{ padding:18px; background:var(--bg); }
.mock__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.mstat{ background:#fff; border:1px solid var(--line); border-left-width:3px; border-radius:10px; padding:10px 11px; }
.mstat small{ display:block; font-size:.6rem; letter-spacing:.03em; text-transform:uppercase; color:var(--muted-2); font-weight:700; }
.mstat b{ font-size:1.18rem; color:var(--ink); }
.mstat--b{ border-left-color:var(--blue); } .mstat--g{ border-left-color:var(--green); } .mstat--a{ border-left-color:var(--amber); }
.mock__row{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; }
.mcard{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px; }
.mcard h5{ margin:0 0 11px; font-size:.72rem; color:var(--ink); font-weight:800; }
.mbars{ display:flex; align-items:flex-end; gap:8px; height:74px; }
.mbars i{ flex:1; background:linear-gradient(180deg,var(--blue-l),var(--blue)); border-radius:5px 5px 3px 3px; opacity:.9; }
.magenda{ display:flex; flex-direction:column; gap:9px; }
.magenda div{ display:flex; align-items:center; gap:8px; font-size:.66rem; color:var(--muted); }
.magenda span{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.magenda .b{ background:var(--blue); } .magenda .a{ background:var(--amber); } .magenda .r{ background:var(--red); }
.magenda em{ margin-left:auto; font-style:normal; font-weight:700; color:var(--muted-2); }
.mock__celly{
  position:absolute; right:-18px; bottom:-24px; width:96px; height:96px; border-radius:24px;
  box-shadow:var(--sh-lg); border:4px solid #fff; z-index:3;
}
.mock__float{
  position:absolute; left:-26px; top:34px; z-index:3;
  background:#fff; border-radius:14px; box-shadow:var(--sh-lg); padding:11px 14px;
  display:flex; align-items:center; gap:11px; border:1px solid var(--line);
}
.mock__float .ic{ width:34px; height:34px; border-radius:10px; background:var(--green-soft); color:var(--green); display:grid; place-items:center; }
.mock__float b{ font-size:.82rem; color:var(--ink); } .mock__float small{ display:block; font-size:.68rem; color:var(--muted); }

/* ---- Bandeau secteurs ------------------------------------------------------ */
.sectors{ padding:34px 0; border-bottom:1px solid var(--line); }
.sectors p{ text-align:center; font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); margin-bottom:20px; }
.sectors__row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 14px; }
.sector-chip{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 17px; font-weight:600; font-size:.92rem; color:var(--muted); box-shadow:var(--sh-sm); }
.sector-chip svg{ width:18px; height:18px; color:var(--blue); }

/* ---- Problème / Solution --------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.stackcard{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:22px; }
.stackcard + .stackcard{ margin-top:14px; }
.stackcard--bad{ display:flex; gap:14px; align-items:flex-start; }
.stackcard--bad .x{ width:30px; height:30px; border-radius:9px; background:var(--red-soft); color:var(--red); display:grid; place-items:center; flex:0 0 auto; font-weight:800; }
.solved{ position:relative; background:linear-gradient(160deg,#12294f,#1b3a68); color:#eaf1ff; border-radius:var(--r-lg); padding:34px; box-shadow:var(--sh-lg); overflow:hidden; }
.solved h3{ color:#fff; font-size:1.4rem; margin-bottom:8px; }
.solved p{ color:#bcccea; margin-bottom:20px; }
.solved ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.solved li{ display:flex; align-items:flex-start; gap:12px; font-size:.98rem; color:#dbe6fb; }
.solved li svg{ width:22px; height:22px; color:#5fe0a0; flex:0 0 auto; margin-top:1px; }

/* ---- Grille fonctionnalités ------------------------------------------------ */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.feature{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 22px; box-shadow:var(--sh-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:#dde5f2; }
.feature__ic{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; margin-bottom:16px; }
.feature__ic svg{ width:24px; height:24px; }
.ic-blue{ background:var(--blue-soft); color:var(--blue); }
.ic-green{ background:var(--green-soft); color:var(--green); }
.ic-amber{ background:var(--amber-soft); color:var(--amber); }
.ic-indigo{ background:var(--indigo-soft); color:var(--indigo); }
.feature h3{ font-size:1.06rem; margin-bottom:8px; }
.feature p{ font-size:.92rem; color:var(--muted); }
.feature--wide{ grid-column:span 2; }

/* ---- Éco / zéro papier ----------------------------------------------------- */
.eyebrow--green{ color:var(--green); background:var(--green-soft); }
.eco{ background:linear-gradient(180deg,#edf8f2 0%, var(--bg) 100%); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.eco-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.eco-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 22px; box-shadow:var(--sh-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s; }
.eco-card:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:#d7e7dd; }
.eco-card h3{ font-size:1.02rem; margin-bottom:8px; }
.eco-card p{ font-size:.92rem; color:var(--muted); }
.eco-formats{ display:flex; gap:8px; margin-top:14px; }
.fmt{ font-size:.72rem; font-weight:800; letter-spacing:.03em; padding:5px 11px; border-radius:8px; }
.fmt-csv{ background:var(--green-soft); color:#0f9d6e; }
.fmt-pdf{ background:var(--blue-soft); color:var(--blue); }
@media (max-width:980px){ .eco-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .eco-grid{ grid-template-columns:1fr; } }

/* ---- Signature hero + section « Né sur le terrain » ----------------------- */
.hero__sign{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.14); font-size:.96rem; color:#c8d6f0; font-style:italic; }
.hero__sign svg{ width:19px; height:19px; color:#8fb3ff; flex:0 0 auto; }
.hero__sign b{ font-style:normal; font-weight:700; color:#eaf1ff; }

.origin{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.origin-card{ max-width:800px; margin:0 auto; text-align:center; position:relative; }
.origin-card .eyebrow{ margin-bottom:16px; }
.origin-card h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:18px; }
.origin-card p{ font-size:1.08rem; color:var(--muted); line-height:1.7; }
.origin-sign{ position:relative; margin-top:28px; font-size:clamp(1.3rem,2.5vw,1.7rem); font-weight:800; color:var(--ink); letter-spacing:-.01em; line-height:1.35; }
.origin-sign .hl{ color:var(--blue); }
.origin-sign::before{ content:"\201C"; display:block; font-family:Georgia,"Times New Roman",serif; font-size:3.6rem; line-height:.5; color:var(--blue); opacity:.26; margin-bottom:10px; }

/* ---- Galerie « Aperçu de l'app » ------------------------------------------
   Chaque carte contient une capture ET un bandeau d'attente. Le bandeau est
   affiché par défaut ; l'image ne prend sa place QUE si elle se charge
   (classe .has-img posée par l'attribut onload). Déposer le PNG dans
   assets/shots/ suffit donc à basculer, sans toucher au HTML.
   --------------------------------------------------------------------------- */
.shots{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:860px){ .shots{ grid-template-columns:1fr; } }

.shot{ margin:0; }
.shot__frame{ background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); transition:transform .18s ease, box-shadow .18s ease; }
.shot__frame:hover{ transform:translateY(-3px); box-shadow:var(--sh-lg); }
.shot__bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:#f2f5fb; border-bottom:1px solid var(--line); }
.shot__bar i{ width:10px; height:10px; border-radius:50%; background:#d6deec; flex:0 0 auto; }
.shot__bar i:nth-child(1){ background:#f7a9a0; } .shot__bar i:nth-child(2){ background:#fbd28a; } .shot__bar i:nth-child(3){ background:#a8dfb6; }
.shot__bar span{ margin-left:8px; font-size:.74rem; color:var(--muted-2); font-weight:600; }

.shot__img{ position:relative; background:var(--bg); }
.shot__img img{ display:none; width:100%; height:auto; }
.shot__img.has-img img{ display:block; cursor:zoom-in; }
.shot__img.has-img .shot__ph{ display:none; }

/* Capture verticale (téléphone, 9:16) : on la contient dans la carte
   (toute la capture visible, calée sur la hauteur, bandes de fond sur les
   côtés) pour ne pas casser la grille — vue plein écran au clic (lightbox). */
.shot__img--phone{ aspect-ratio:16/10; }
.shot__img--phone img{ height:100%; object-fit:contain; object-position:center; }

/* Bandeau d'attente (remplacé par la capture le jour où elle est déposée) */
.shot__ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:230px; padding:26px 20px; text-align:center;
  background:
    repeating-linear-gradient(135deg, rgba(37,99,235,.035) 0 12px, transparent 12px 24px),
    var(--blue-soft);
}
.shot__ph svg{ width:32px; height:32px; color:var(--blue); opacity:.65; }
.shot__ph b{ font-size:.94rem; color:var(--ink); }
.shot__ph small{ font-size:.82rem; color:var(--muted); }

.shot figcaption{ padding:15px 4px 0; }
.shot figcaption b{ display:block; font-size:1rem; color:var(--ink); margin-bottom:3px; }
.shot figcaption span{ font-size:.9rem; color:var(--muted); }

/* Visionneuse plein écran (uniquement pour les captures réellement chargées) */
.lightbox{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:28px;
  background:rgba(9,17,33,.88); backdrop-filter:blur(3px); cursor:zoom-out; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lightbox__close{ position:absolute; top:18px; right:22px; background:none; border:none; color:#fff; font-size:34px; line-height:1; cursor:pointer; opacity:.8; }
.lightbox__close:hover{ opacity:1; }

/* ---- Pages légales -------------------------------------------------------- */
.legal{ max-width:800px; margin:0 auto; padding:52px 24px 84px; }
.legal h1{ font-size:clamp(1.8rem,3.4vw,2.4rem); margin-bottom:8px; }
.legal__date{ color:var(--muted-2); font-size:.9rem; margin-bottom:34px; }
.legal h2{ font-size:1.18rem; margin:34px 0 10px; color:var(--ink); }
.legal p, .legal li{ color:var(--muted); line-height:1.72; }
.legal p{ margin-bottom:12px; }
.legal ul{ padding-left:22px; margin:0 0 12px; display:flex; flex-direction:column; gap:6px; }
.legal a{ color:var(--blue); }
.legal strong{ color:var(--ink); font-weight:700; }
.todo{ background:var(--amber-soft); color:#9a6a00; padding:1px 7px; border-radius:5px; font-weight:700; font-size:.92em; }
.footer__legal{ display:flex; gap:16px; flex-wrap:wrap; }
.footer__legal a{ color:#7d8fb5; } .footer__legal a:hover{ color:#fff; }

/* ---- Partage inter-entreprise --------------------------------------------- */
.collab-card{ background:linear-gradient(160deg,#12294f,#1b3a68); border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-lg); color:#eaf1ff; }
.collab-steps{ display:flex; flex-direction:column; gap:11px; margin-bottom:16px; }
.collab-steps > div{ display:flex; align-items:center; gap:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); border-radius:12px; padding:13px 15px; font-size:.95rem; color:#dbe6fb; }
.collab-steps b{ width:30px; height:30px; border-radius:9px; background:var(--blue); color:#fff; display:grid; place-items:center; font-size:.9rem; font-weight:800; flex:0 0 auto; }
.collab-result{ display:flex; align-items:flex-start; gap:12px; background:rgba(95,224,160,.12); border:1px solid rgba(95,224,160,.32); border-radius:12px; padding:14px 16px; font-size:.94rem; color:#c9f5e0; line-height:1.5; }
.collab-result svg{ width:22px; height:22px; color:#5fe0a0; flex:0 0 auto; margin-top:1px; }

/* ---- Section mobile -------------------------------------------------------- */
.mobile{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.phone{ position:relative; justify-self:center; width:270px; height:540px; border-radius:40px; background:#101f3c; padding:12px; box-shadow:var(--sh-lg); }
.phone__scr{ width:100%; height:100%; border-radius:30px; background:var(--bg); overflow:hidden; position:relative; }
.phone__shot{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
.phone__notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:#101f3c; border-radius:0 0 14px 14px; z-index:4; }
.phone__top{ background:#101f3c; color:#fff; padding:26px 16px 14px; }
.phone__top small{ color:#8fb0e8; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.phone__top b{ display:block; font-size:1.05rem; margin-top:3px; }
.phone__list{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.pitem{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px; display:flex; align-items:center; gap:11px; box-shadow:var(--sh-sm); }
.pitem .pic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:0 0 auto; }
.pitem b{ font-size:.76rem; color:var(--ink); display:block; } .pitem small{ font-size:.66rem; color:var(--muted); }
.pitem .tag{ margin-left:auto; font-size:.6rem; font-weight:800; padding:3px 8px; border-radius:var(--r-pill); }
.tag-g{ background:var(--green-soft); color:#0f9d6e; } .tag-a{ background:var(--amber-soft); color:#b9820b; }
.feat-list{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.feat-list li{ display:flex; gap:14px; align-items:flex-start; }
.feat-list .n{ width:34px; height:34px; border-radius:10px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:0 0 auto; }
.feat-list b{ display:block; color:var(--ink); font-size:1rem; }
.feat-list p{ color:var(--muted); font-size:.94rem; }

/* ---- Tarifs ---------------------------------------------------------------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.plan{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 26px; display:flex; flex-direction:column; box-shadow:var(--sh-sm); }
.plan--feat{ border:1.5px solid var(--blue); box-shadow:0 22px 50px -20px rgba(37,99,235,.4); }
.plan__tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:6px 15px; border-radius:var(--r-pill); box-shadow:var(--sh); }
.plan__name{ font-size:1.15rem; font-weight:800; color:var(--ink); }
.plan__desc{ color:var(--muted); font-size:.9rem; margin:6px 0 20px; min-height:40px; }
.plan__price{ display:flex; align-items:flex-end; gap:6px; margin-bottom:4px; }
.plan__price b{ font-size:2.8rem; font-weight:800; color:var(--ink); letter-spacing:-.03em; line-height:1; }
.plan__price span{ color:var(--muted); font-weight:600; font-size:.95rem; padding-bottom:5px; }
.plan__ht{ font-size:.78rem; color:var(--muted-2); margin-bottom:22px; }
.plan__quote b{ font-size:1.7rem; }
.plan ul{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan li{ display:flex; align-items:flex-start; gap:11px; font-size:.94rem; color:var(--text); }
.plan li svg{ width:19px; height:19px; color:var(--green); flex:0 0 auto; margin-top:2px; }
.plan li.muted{ color:var(--muted-2); } .plan li.muted svg{ color:var(--muted-2); }
.plan__foot{ font-size:.82rem; color:var(--muted); text-align:center; margin-top:14px; }
.pricing-note{ text-align:center; margin-top:30px; color:var(--muted); font-size:.95rem; }
.pricing-note b{ color:var(--ink); }

/* ---- Bascule mensuel / annuel (tarifs) ------------------------------------ */
.per-switch{ display:flex; justify-content:center; margin:-18px 0 30px; }
.per-switch{ gap:4px; }
.per-switch button{ border:none; background:none; font:inherit; font-size:.92rem; font-weight:700;
  color:var(--muted); padding:9px 20px; border-radius:var(--r-pill); cursor:pointer; transition:.15s; }
.per-switch{ background:transparent; }
.per-switch > button{ background:#fff; border:1px solid var(--line); }
.per-switch > button:first-child{ border-radius:var(--r-pill) 0 0 var(--r-pill); }
.per-switch > button:last-child{ border-radius:0 var(--r-pill) var(--r-pill) 0; margin-left:-1px; }
.per-switch > button.on{ background:var(--blue); border-color:var(--blue); color:#fff; z-index:1; }
.per-switch button span{ display:inline-block; margin-left:8px; font-size:.7rem; font-weight:800;
  color:#0f9d6e; background:var(--green-soft); padding:2px 8px; border-radius:var(--r-pill); }
.per-switch > button.on span{ background:rgba(255,255,255,.22); color:#fff; }
@media (max-width:480px){ .per-switch button{ padding:9px 13px; font-size:.86rem; } }

/* ---- FAQ ------------------------------------------------------------------- */
.faq{ max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq details{ background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--sh-sm); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:14px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; font-size:1.4rem; font-weight:400; color:var(--blue); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq__a{ padding:0 22px 20px; color:var(--muted); font-size:.96rem; }

/* ---- Bandeau CTA ----------------------------------------------------------- */
.ctaband{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:56px; text-align:center;
  background:radial-gradient(700px 320px at 50% -20%, rgba(59,130,246,.4), transparent 65%), linear-gradient(160deg,#12244a,#1b3a6b); color:#fff; box-shadow:var(--sh-lg); }
.ctaband h2{ color:#fff; font-size:clamp(1.6rem,3.2vw,2.3rem); margin-bottom:14px; }
.ctaband p{ color:#c3d2ee; font-size:1.08rem; max-width:520px; margin:0 auto 28px; }
.ctaband__btns{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ---- Formulaire devis ------------------------------------------------------ */
.devis{ display:grid; grid-template-columns:1fr 1.1fr; gap:44px; align-items:start; }
.devis__aside h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px; }
.devis__aside p{ color:var(--muted); font-size:1.05rem; margin-bottom:26px; }
.contact-line{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.contact-line:last-child{ border-bottom:1px solid var(--line); }
.contact-line .ic{ width:44px; height:44px; border-radius:12px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; flex:0 0 auto; }
.contact-line small{ display:block; color:var(--muted-2); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.contact-line b{ color:var(--ink); font-size:1.02rem; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); padding:30px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:7px; }
.field label .req{ color:var(--red); }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:.96rem; color:var(--text);
  border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; background:#fbfcfe;
  transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.14); background:#fff; }
.field textarea{ min-height:110px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-consent{ font-size:.8rem; color:var(--muted); margin-top:6px; }
.form-msg{ display:none; padding:13px 16px; border-radius:11px; font-size:.92rem; font-weight:600; margin-bottom:16px; }
.form-msg.ok{ display:block; background:var(--green-soft); color:#0d8a63; }
.form-msg.err{ display:block; background:var(--red-soft); color:#c0392b; }

/* ---- Footer ---------------------------------------------------------------- */
.footer{ background:#0e1b34; color:#a8b7d4; padding:64px 0 30px; margin-top:8px; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin-bottom:44px; }
.footer .brand{ color:#fff; margin-bottom:14px; }
.footer .brand b{ color:var(--blue-l); }
.footer__about{ font-size:.92rem; color:#8496ba; max-width:300px; }
.footer h4{ color:#fff; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer a{ color:#a8b7d4; font-size:.94rem; transition:.15s; } .footer a:hover{ color:#fff; }
.footer__bar{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.86rem; color:#7d8fb5; }
.footer__made{ display:inline-flex; align-items:center; gap:8px; }
.footer__made img{ width:24px; height:24px; border-radius:7px; }

/* ---- Reveal au scroll ------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:44px; padding:56px 0 80px; }
  .mock{ max-width:520px; margin:0 auto; }
  .split, .devis{ grid-template-columns:1fr; gap:30px; }
  .features{ grid-template-columns:repeat(2,1fr); }
  .feature--wide{ grid-column:span 2; }
  .pricing{ grid-template-columns:1fr; max-width:460px; margin:0 auto; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .section{ padding:60px 0; }
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .nav__cta .btn--ghost{ display:none; }
  .features{ grid-template-columns:1fr; }
  .feature--wide{ grid-column:span 1; }
  .field-row{ grid-template-columns:1fr; }
  .ctaband{ padding:38px 22px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .hero__meta{ gap:12px 20px; }
}

/* ---- Menu mobile (déroulant) ---------------------------------------------- */
.mnav{ display:none; position:fixed; inset:70px 0 auto 0; z-index:49; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh); padding:12px 24px 20px; }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:13px 6px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-2); }
.mnav .btn{ margin-top:14px; }

/* ===========================================================================
   AFFINAGE TÉLÉPHONE
   ---------------------------------------------------------------------------
   Cause principale du rendu bancal : dans le hero, Celly et la pastille
   « Contrôle enregistré » sont volontairement en DÉBORD du cadre
   (right:-18px / left:-26px). Sur un grand écran c'est un effet de style ;
   sur un téléphone, ça élargit la page et déclenche un défilement
   HORIZONTAL de tout le site. On les réintègre dans le cadre.
   =========================================================================== */

/* Filet de sécurité : aucun élément ne doit pouvoir élargir la page. */
html, body{ max-width:100%; overflow-x:hidden; }

@media (max-width:640px){
  .container{ padding:0 18px; }

  /* --- Barre du haut -------------------------------------------------
     Le nom de la marque et le bouton se disputaient la largeur : le bouton,
     poussé à droite par `margin-left:auto`, passait PAR-DESSUS le logo.
     On resserre tout, et le nom ne rétrécit plus indéfiniment. */
  .nav__in{ height:64px; gap:10px; }
  .brand{ font-size:1.02rem; gap:8px; flex:0 1 auto; min-width:0; }
  .brand span{ white-space:nowrap; }
  .brand__logo{ width:32px; height:32px; border-radius:9px; }
  .brand__mark{ height:36px; }
  .nav__cta{ gap:6px; flex:0 0 auto; }
  .nav__cta .btn--primary{ padding:10px 15px; font-size:.85rem; }
  .nav__burger{ padding:6px; }
  .mnav{ inset:64px 0 auto 0; padding:10px 18px 18px; }

  /* --- Hero ---------------------------------------------------------- */
  .hero__grid{ padding:40px 0 64px; gap:34px; }
  .hero h1{ font-size:clamp(1.75rem,7.4vw,2.3rem); }
  .hero__lead{ font-size:1.02rem; margin:16px 0 24px; }
  .hero__badge{ margin-bottom:16px; font-size:.76rem; }
  .hero__cta .btn{ flex:1 1 100%; }          /* boutons pleine largeur, plus faciles à viser */
  .hero__meta{ gap:10px 18px; margin-top:22px; }
  .hero__meta span{ font-size:.86rem; }
  .hero__sign{ margin-top:20px; padding-top:16px; font-size:.9rem; }

  /* La maquette et ses éléments décoratifs restent DANS le cadre */
  .mock{ padding-bottom:8px; }
  .mock__win{ transform:none; }               /* la légère rotation ajoutait du débord */
  .mock__float{ display:none; }               /* purement décoratif : masqué */
  .mock__celly{ width:60px; height:60px; right:6px; bottom:-16px; border-width:3px; border-radius:16px; }
  .mock__side{ display:none; }                /* barre latérale illisible à cette taille */
  .mock__body{ grid-template-columns:1fr; }
  .mock__row{ grid-template-columns:1fr; }
  .mock__stats{ gap:8px; }

  /* --- Rythme général ------------------------------------------------ */
  .section-head{ margin-bottom:34px; }
  .section-head p{ font-size:1rem; }
  .sectors__row{ gap:9px 10px; }
  .sector-chip{ padding:8px 14px; font-size:.86rem; }

  /* --- Cartes & blocs ------------------------------------------------- */
  .solved{ padding:26px 22px; }
  .stackcard{ padding:18px; }
  .feature{ padding:20px 18px; }
  .eco-card{ padding:20px 18px; }
  .collab-card{ padding:20px; }
  .shots{ gap:20px; }
  .shot__ph{ min-height:180px; }

  /* --- Tarifs --------------------------------------------------------- */
  .plan{ padding:26px 22px; }
  .plan__price b{ font-size:2.4rem; }
  .plan__desc{ min-height:0; }

  /* --- Devis / contact ------------------------------------------------ */
  .form-card{ padding:22px 18px; }
  .devis{ gap:26px; }

  /* --- Pied de page --------------------------------------------------- */
  .footer{ padding:46px 0 26px; }
  .footer__grid{ margin-bottom:32px; }
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Écrans étroits : plus de place pour le bouton à côté du nom. On le retire
   de la barre — le menu (☰) le contient, et le hero l'affiche juste dessous
   en pleine largeur : le visiteur ne perd jamais l'appel à l'action. */
@media (max-width:430px){
  .nav__cta .btn--primary{ display:none; }
}

/* Très petits écrans (≤ 360 px) : on serre encore d'un cran. */
@media (max-width:360px){
  .container{ padding:0 15px; }
  .hero h1{ font-size:1.62rem; }
  .plan__price b{ font-size:2.1rem; }
  .brand{ font-size:.98rem; }
  .brand__logo{ width:29px; height:29px; }
}