/* ============================================================================
   QR-Bell — vitrine. CSS vanilla, zéro build, zéro CDN.
   Marque reprise fidèlement du site d'origine : dégradé bleu→magenta
   (#4f6ef7 → #df1bbb), magenta plein pour les accents, texte indigo #2b2350,
   Poppins (titres) + Roboto (texte).
   ========================================================================== */

/* ---------------------------------------------------------------- Polices */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Roboto'; font-style:normal; font-weight:400 500; font-display:swap; src:url('../fonts/roboto-400.woff2') format('woff2'); }

/* ---------------------------------------------------------------- Tokens */
:root {
  --grad:linear-gradient(120deg, #4f6ef7 0%, #8a3fd4 55%, #df1bbb 100%);
  --grad-hover:linear-gradient(120deg, #4360e6 0%, #7c34c7 55%, #cf12ac 100%);
  --grad-soft:linear-gradient(120deg, #eef1fe 0%, #fbedf8 100%);
  --magenta:#df1bbb; --magenta-600:#c1179f; --magenta-050:#fbeaf7;
  --indigo:#5b6ef5;
  --navy:#2b2350; --navy-700:#221b42;
  --ink:#2b2350; --text:#535c76; --muted:#8b93a7;
  --bg:#ffffff; --bg-soft:#f6f7fc; --border:#e8eaf3;
  --white:#ffffff;
  --shadow-sm:0 1px 2px rgba(31,27,66,.06), 0 2px 8px rgba(31,27,66,.05);
  --shadow-md:0 8px 26px rgba(43,35,80,.10);
  --shadow-lg:0 22px 55px rgba(43,35,80,.18);
  --shadow-grad:0 10px 26px rgba(129,49,187,.32);
  --radius:14px; --radius-lg:22px;
  --maxw:1120px; --gap:clamp(1rem,2vw,1.6rem);
  --font-head:'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ---------------------------------------------------------------- Reset */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body { font-family:var(--font-body); color:var(--text); background:var(--bg);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:var(--magenta-600); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { font-family:var(--font-head); color:var(--ink); line-height:1.15; font-weight:700; }
h1 { font-size:clamp(2rem,4.6vw,3.2rem); letter-spacing:-.02em; }
h2 { font-size:clamp(1.55rem,3vw,2.3rem); letter-spacing:-.01em; }
h3 { font-size:1.15rem; font-weight:600; }
ul { padding:0; list-style:none; }
:focus-visible { outline:3px solid var(--indigo); outline-offset:2px; border-radius:4px; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:.6rem 1rem; z-index:200; }
.skip-link:focus { left:8px; top:8px; }

/* ---------------------------------------------------------------- Layout */
.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem); }
.wrap-narrow { max-width:760px; }
.center { text-align:center; }
.section { padding-block:clamp(3rem,7vw,5.5rem); }
.section-title.center { margin-inline:auto; }
.section-lead { color:var(--muted); font-size:1.05rem; max-width:56ch; }
.section-lead.center { margin:.7rem auto 0; }
.kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600;
  color:var(--magenta-600); font-family:var(--font-head); }
.lead { font-size:1.12rem; color:var(--text); }
.badge { display:inline-block; background:var(--magenta-050); color:var(--magenta-600);
  font-weight:600; font-size:.78rem; padding:.3rem .7rem; border-radius:999px; font-family:var(--font-head); }

/* ---------------------------------------------------------------- Boutons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-head); font-weight:600; font-size:.95rem; line-height:1;
  padding:.82rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, filter .2s ease;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn-primary { background-image:var(--grad); color:#fff; box-shadow:var(--shadow-grad); }
.btn-primary:hover { background-image:var(--grad-hover); box-shadow:0 12px 30px rgba(129,49,187,.4); }
.btn-outline { background:transparent; color:var(--magenta-600); border-color:var(--magenta); }
.btn-outline:hover { background:var(--magenta); color:#fff; }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--border); }
.btn-ghost:hover { border-color:var(--muted); }
.btn-sm { padding:.55rem 1.05rem; font-size:.85rem; }
.btn-lg { padding:.98rem 1.8rem; font-size:1rem; }

/* ---------------------------------------------------------------- Header */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent;
  transition:background-color .25s, border-color .2s, box-shadow .2s; }
.site-header.is-scrolled { border-bottom-color:var(--border); box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:64px; }
.brand-logo { height:34px; width:auto; }
.brand-logo--light { display:none; }

/* Home : header en OVERLAY transparent sur le hero dégradé (repris de l'ancien site),
   bascule en blanc + ombre dès qu'on scrolle (is-scrolled, géré par site.js). */
body.page-home .site-header { margin-bottom:-64px; }
body.page-home .site-header:not(.is-scrolled) { background:transparent; backdrop-filter:none; }
body.page-home .site-header:not(.is-scrolled) .brand-logo { display:none; }
body.page-home .site-header:not(.is-scrolled) .brand-logo--light { display:block; }
body.page-home .site-header:not(.is-scrolled) .nav-burger { background:transparent; border-color:rgba(255,255,255,.55); }
body.page-home .site-header:not(.is-scrolled) .nav-burger span { background:#fff; }
/* Desktop seulement : dans le panneau mobile déroulé (fond blanc), on garde les couleurs normales */
@media (min-width:761px) {
  body.page-home .site-header:not(.is-scrolled) .site-nav a { color:#fff; }
  body.page-home .site-header:not(.is-scrolled) .site-nav ul a:hover { color:#fff; text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:2px; }
  body.page-home .site-header:not(.is-scrolled) .lang-switch { color:rgba(255,255,255,.85); }
  body.page-home .site-header:not(.is-scrolled) .lang-switch:hover { color:#fff; }
  body.page-home .site-header:not(.is-scrolled) .lang-flag { box-shadow:0 0 0 1px rgba(255,255,255,.45); }
  body.page-home .site-header:not(.is-scrolled) .lang-flag.is-active { box-shadow:0 0 0 2px #fff; }
  body.page-home .site-header:not(.is-scrolled) .nav-actions .btn-primary {
    background-image:none; background-color:transparent; border-color:rgba(255,255,255,.9); box-shadow:none; }
  body.page-home .site-header:not(.is-scrolled) .nav-actions .btn-primary:hover { background-color:rgba(255,255,255,.14); }
}
.site-nav { display:flex; align-items:center; gap:1.6rem; }
.site-nav ul { display:flex; gap:1.35rem; }
.site-nav a { color:var(--ink); font-weight:500; font-size:.95rem; font-family:var(--font-head); }
.site-nav a:hover { color:var(--magenta-600); text-decoration:none; }
.nav-actions { display:flex; align-items:center; gap:1rem; }
.lang-switch { color:var(--muted); font-size:.85rem; font-weight:600; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.05em; }
.lang-switch:hover { color:var(--magenta-600); text-decoration:none; }
/* Sélecteur de langue = 2 petits drapeaux, à droite du CTA */
.lang-flags { display:flex; align-items:center; gap:.4rem; }
.lang-flag { display:inline-flex; line-height:0; border-radius:3px; overflow:hidden; opacity:.5;
  box-shadow:0 0 0 1px rgba(43,35,80,.2); transition:opacity .2s ease, box-shadow .2s ease; }
.lang-flag img { display:block; width:22px; height:15px; }
.lang-flag:hover { opacity:1; text-decoration:none; }
.lang-flag.is-active { opacity:1; box-shadow:0 0 0 2px var(--magenta); }
.nav-toggle, .nav-burger { display:none; }

/* ---------------------------------------------------------------- Hero (dégradé) */
.hero { position:relative; background-image:var(--grad); color:#fff; overflow:hidden;
  border-bottom-left-radius:50% 46px; border-bottom-right-radius:50% 46px; }
.hero-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding-block:calc(64px + clamp(2.2rem,5vw,3.6rem)) clamp(3.6rem,8vw,6rem); }
.hero h1, .hero .kicker { color:#fff; }
.hero .kicker { color:rgba(255,255,255,.82); }
.hero-copy h1 { margin-top:.6rem; }
.hero-copy .lead { margin-top:1rem; max-width:46ch; color:rgba(255,255,255,.92); }
.hero-bullets { margin-top:1.4rem; display:grid; gap:.55rem; }
.hero-bullets li { position:relative; padding-left:2rem; color:#fff; font-weight:500; }
.hero-bullets li::before { content:""; position:absolute; left:0; top:.1em; width:1.3rem; height:1.3rem;
  border-radius:50%; background:rgba(255,255,255,.2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:.85rem; background-repeat:no-repeat; background-position:center; }
.hero-cta { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.hero .btn-primary { background-image:none; background-color:#fff; color:var(--magenta-600); box-shadow:0 10px 26px rgba(0,0,0,.18); }
.hero .btn-primary:hover { background-color:#fff; filter:brightness(.98); }
.hero .btn-ghost { color:#fff; border-color:rgba(255,255,255,.55); }
.hero .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:#fff; }
.hero-visual { justify-self:center; }
.hero-visual img { filter:drop-shadow(0 30px 50px rgba(20,10,50,.35)); border-radius:28px; }

/* ---------------------------------------------------------------- Steps */
.steps-section { background:var(--bg); }
.steps-inner { display:grid; grid-template-columns:minmax(0,440px) 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem;
  border-radius:50%; background-image:var(--grad); color:#fff; font-family:var(--font-head); font-weight:700;
  box-shadow:var(--shadow-grad); }

/* Liste synchronisée avec la scène */
.steps { margin-top:2rem; display:grid; gap:.7rem; }
.steps li { display:flex; gap:1rem; align-items:flex-start; padding:.85rem 1rem; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:background .3s ease, border-color .3s ease, opacity .3s ease; opacity:.62; }
.steps li .step-num { flex:0 0 auto; }
.steps li p { color:var(--text); font-size:.98rem; padding-top:.45rem; }
.steps li.is-active { opacity:1; background:var(--grad-soft); border-color:var(--border); }

/* Scène : calques absolus dans un carré, cercle lavande en fond */
.process-stage { position:relative; aspect-ratio:1/1; max-width:440px; margin-inline:auto; }
.process-stage::before { content:""; position:absolute; inset:5%; border-radius:50%;
  background:linear-gradient(135deg, #eef1fe 0%, #f6e9f7 100%); }
.scene { position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility 0s .55s; }
.scene.is-active { opacity:1; visibility:visible; transition:opacity .55s ease, visibility 0s; }
.ly { position:absolute; height:auto; }
.scene-1 .door    { left:13%; bottom:10%; width:36%; }
.scene-1 .visitor { right:15%; bottom:10%; width:27%; }
.scene-2 .phone   { left:30%; bottom:7%; width:40%; }
.scene-2 .qr      { left:38%; top:31%; width:24%; }
.scene-2 .frame   { left:35.5%; top:28.5%; width:29%; }
.scene-2 .link    { left:38%; top:60%; width:24%; }
.scene-3 .phone   { left:30%; bottom:7%; width:40%; }
.scene-3 .contact1 { left:7%; top:25%; width:64%; }
.scene-3 .contact2 { left:29%; top:48%; width:64%; }
.scene-4 .calling { left:23%; bottom:8%; width:55%; }
.scene-4 .bub1    { left:16%; top:22%; width:27%; }
.scene-4 .bub2    { right:17%; top:12%; width:21%; }

/* Entrées des calques + accents en boucle. Les calques restent opaques par défaut :
   la scène sortante fond en bloc (crossfade), l'animation ne joue qu'à l'activation. */
@keyframes ly-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes ly-in-side { from { opacity:0; transform:translateX(26px); } to { opacity:1; transform:none; } }
@keyframes ly-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@keyframes ly-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
.scene.is-active .ly { animation:ly-in .5s ease both; }
.scene.is-active .ly:nth-child(2) { animation-delay:.18s; }
.scene.is-active .ly:nth-child(3) { animation-delay:.36s; }
.scene.is-active .ly:nth-child(4) { animation-delay:.54s; }
.scene-1.is-active .visitor { animation-name:ly-in-side; }
.scene-2.is-active .frame   { animation:ly-in .5s .36s ease both, ly-pulse 1.8s 1.2s ease-in-out infinite; }
.scene-4.is-active .bub1    { animation:ly-in .5s .18s ease both, ly-bob 2.2s 1s ease-in-out infinite; }
.scene-4.is-active .bub2    { animation:ly-in .5s .36s ease both, ly-bob 2.2s 1.6s ease-in-out infinite; }

/* Pastilles de navigation */
.process-dots { display:flex; justify-content:center; gap:.6rem; margin-top:1.2rem; }
.process-dots button { width:11px; height:11px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:var(--border); transition:transform .25s ease, background-color .25s ease; }
.process-dots button.is-active { background:var(--magenta); transform:scale(1.3); }

@media (prefers-reduced-motion:reduce) {
  .scene { transition:none; }
  .scene .ly { animation:none !important; }
  .scene .kp-key, .scene .kp-code { animation:none !important; }
  .scene .kp-code { opacity:1; }
}

/* ---------------------------------------------------------------- Demo */
.demo-section { background:var(--bg-soft); }
.demo-inner { display:grid; grid-template-columns:1fr auto; gap:clamp(2rem,5vw,4rem); align-items:center; }
.demo-sub { margin-top:1.4rem; font-family:var(--font-head); font-weight:600; color:var(--ink); }
.demo-qr img { border-radius:var(--radius-lg); background:#fff; padding:1.2rem; box-shadow:var(--shadow-md); }

/* ---------------------------------------------------------------- Grilles */
.grid { display:grid; gap:var(--gap); margin-top:2.4rem; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); }
.card h3 { margin-bottom:.5rem; }
.card p { color:var(--text); font-size:.97rem; }
.solution-section .card { transition:transform .15s ease, box-shadow .2s ease; }
.solution-section .card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* ---------------------------------------------------------------- Features */
.features-section { background:var(--bg); }
.feature { padding:1.4rem 1.4rem 1.4rem 1.6rem; border-left:3px solid var(--magenta-050); }
.feature-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background-image:var(--grad); margin-bottom:.8rem; }
.feature h3 { margin-bottom:.4rem; }
.feature p { color:var(--text); font-size:.96rem; }

/* ---------------------------------------------------------------- Door (dark) */
.door-section { background:linear-gradient(160deg, var(--navy), var(--navy-700)); color:#cdd0e6; }
.door-section .section-title, .door-section h3 { color:#fff; }
.door-section .lead { color:#c6c9e4; }
.door-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; }
.door-features { margin-top:1.8rem; display:grid; gap:1.3rem; }
.door-features h3 { margin-bottom:.3rem; }
.door-features p { color:#b6bbdd; font-size:.96rem; }

/* Scène animée de l'ouverture de porte (même moteur que la section steps).
   Fond clair translucide : les illustrations sont en aplats clairs, illisibles sur le navy. */
.door-stage { max-width:360px; }
.door-stage::before { background:linear-gradient(135deg, rgba(255,255,255,.13) 0%, rgba(223,27,187,.16) 100%); }
.scene-d1 .door   { left:8%;  bottom:11%; width:25%; }
.scene-d1 .person { right:6%; bottom:20%; width:41%; }
.scene-d1 .bubble { right:9%; top:20%;    width:21%; }
.scene-d2 .phone  { left:31%; bottom:8%;  width:38%; }
.scene-d2 .keypad { left:32.5%; top:29%;  width:35%; }
.scene-d3 .door   { left:34%; bottom:11%; width:31%; }
.scene-d3 .guest  { left:6%;  bottom:11%; width:26%; }
.scene-d3 .host   { right:6%; bottom:11%; width:24%; }
/* Pavé numérique SVG (écran du téléphone). Touches en dégradé de marque, code saisi
   chiffre par chiffre : la touche s'allume, puis le chiffre s'inscrit en haut de l'écran. */
.kp-key { fill:url(#kpGrad); opacity:.26; }
.kp-digit { fill:var(--ink); font-family:var(--font-head); font-weight:600; font-size:20px; text-anchor:middle; }
.kp-code { fill:var(--ink); font-family:var(--font-head); font-weight:700; font-size:30px; text-anchor:middle; opacity:0; }
.scene-d2.is-active .kp-hit { animation:kp-press .5s ease both; }
.scene-d2.is-active .kp-code { animation:kp-type .3s ease both; }
.scene-d2.is-active .kp-hit-1 { animation-delay:.5s; }
.scene-d2.is-active .kp-hit-2 { animation-delay:1.1s; }
.scene-d2.is-active .kp-hit-3 { animation-delay:1.7s; }
.scene-d2.is-active .kp-code-1 { animation-delay:.7s; }
.scene-d2.is-active .kp-code-2 { animation-delay:1.3s; }
.scene-d2.is-active .kp-code-3 { animation-delay:1.9s; }
@keyframes kp-press { 0%,100% { opacity:.26; } 40% { opacity:1; } }
@keyframes kp-type { from { opacity:0; } to { opacity:1; } }
.scene-d1.is-active .person { animation-name:ly-in-side; }
.scene-d1.is-active .bubble { animation:ly-in .5s .36s ease both, ly-bob 2.2s 1s ease-in-out infinite; }
.scene-d3.is-active .guest  { animation:ly-in .5s .18s ease both; }
.scene-d3.is-active .host   { animation:ly-in .5s .36s ease both; }

.door-process .process-dots { margin-bottom:1.6rem; }
.door-process .process-dots button { background:rgba(255,255,255,.28); }
.door-process .process-dots button.is-active { background:var(--magenta); }
.door-steps { display:grid; gap:1.1rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg); padding:1.6rem; }
.door-steps li { display:flex; gap:1rem; align-items:flex-start; cursor:pointer; opacity:.55;
  padding:.7rem .8rem; margin:-.7rem -.8rem; border-radius:var(--radius);
  transition:background-color .3s ease, opacity .3s ease; }
.door-steps li.is-active { opacity:1; background:rgba(255,255,255,.08); }
.door-steps p { color:#d4d7ee; font-size:.96rem; padding-top:.45rem; }
.door-steps .step-num { flex:0 0 auto; }

/* ---------------------------------------------------------------- Cases */
.cases-section { background:var(--bg-soft); }
.case-card { background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.case-card img { width:100%; height:190px; object-fit:cover; }
.case-card h3 { margin:1.1rem 1.3rem .4rem; }
.case-card p { margin:0 1.3rem 1.4rem; color:var(--text); font-size:.95rem; }
.examples-gallery { margin-top:2rem; display:grid; grid-template-columns:repeat(5,1fr); gap:.8rem; }
.examples-gallery img { width:100%; height:120px; object-fit:cover; border-radius:10px; box-shadow:var(--shadow-sm); }

/* ---------------------------------------------------------------- Pricing */
.pricing-section { background:var(--bg); }
.pricing-radio { position:absolute; opacity:0; pointer-events:none; }
.pricing-tabs { text-align:center; }
.tab-labels { margin:2rem auto 0; display:inline-flex; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:999px; padding:.3rem; gap:.2rem; }
.tab-labels label { cursor:pointer; padding:.65rem 1.4rem; border-radius:999px; font-family:var(--font-head);
  font-weight:600; font-size:.9rem; color:var(--muted); transition:color .2s; }
#tab-single:checked ~ .tab-labels label[for="tab-single"],
#tab-multi:checked ~ .tab-labels label[for="tab-multi"] { background-image:var(--grad); color:#fff; box-shadow:var(--shadow-grad); }
.tab-panel { display:none; text-align:left; }
#tab-single:checked ~ .panel-single { display:block; }
#tab-multi:checked ~ .panel-multi { display:block; }
.plans { margin-top:2.4rem; align-items:stretch; }
.plan { position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2rem 1.7rem; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); }
.plan-popular { border-color:transparent; box-shadow:var(--shadow-md); background:
  linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border:2px solid transparent; }
.plan-flag { position:absolute; top:-.8rem; left:50%; transform:translateX(-50%); background-image:var(--grad); color:#fff;
  font-size:.72rem; font-weight:700; font-family:var(--font-head); padding:.28rem .85rem; border-radius:999px; letter-spacing:.03em; }
.plan-name { font-family:var(--font-head); text-transform:uppercase; letter-spacing:.05em; font-size:.9rem; color:var(--muted); }
.plan-price { font-family:var(--font-head); font-weight:700; font-size:2.3rem; color:var(--ink); margin:.4rem 0 1rem; }
.plan-price span { display:block; font-size:.82rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.plan-price--custom { font-size:1.4rem; color:var(--magenta-600); }
.plan-features { display:grid; gap:.6rem; margin-bottom:1.6rem; }
.plan-features li { position:relative; padding-left:1.6rem; color:var(--text); font-size:.95rem; }
.plan-features li::before { content:""; position:absolute; left:0; top:.35em; width:1rem; height:1rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23df1bbb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; }
.plan-cta { margin-top:auto; }

/* ---------------------------------------------------------------- Clients */
.clients-section { background:var(--bg-soft); }
.clients-title { text-align:center; font-family:var(--font-head); font-weight:600; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.clients-logos { margin-top:1.8rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.6rem,4vw,3.4rem); }
.clients-logos img { height:38px; width:auto; opacity:.72; filter:grayscale(1); transition:opacity .2s, filter .2s; }
.clients-logos img:hover { opacity:1; filter:grayscale(0); }

/* ---------------------------------------------------------------- Closing */
.closing-section { background:var(--bg); }
.closing-inner { text-align:center; max-width:640px; margin-inline:auto; }
.closing-inner .lead { margin:.8rem 0 1.8rem; }

/* ---------------------------------------------------------------- Contact */
.contact-section { background:linear-gradient(160deg, var(--navy), var(--navy-700)); color:#cdd0e6; }
.contact-section .section-title { color:#fff; }
.contact-section .lead { color:#c6c9e4; }
.contact-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
.contact-phone { margin-top:1.4rem; font-family:var(--font-head); font-size:1.3rem; font-weight:600; }
.contact-phone a { color:#fff; }
.contact-phone a:hover { color:var(--magenta); }

/* ---------------------------------------------------------------- Formulaires */
.card.contact-form, .card.signup-form { background:#fff; color:var(--text); padding:1.8rem; }
.field { margin-bottom:1.1rem; display:flex; flex-direction:column; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field label, .door-field legend { font-family:var(--font-head); font-weight:600; font-size:.85rem; color:var(--ink); margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  font:inherit; color:var(--ink); background:#fff; border:1.5px solid var(--border); border-radius:10px;
  padding:.7rem .85rem; width:100%; transition:border-color .15s, box-shadow .15s; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px var(--magenta-050); }
.field textarea { resize:vertical; }
.door-field { border:1px solid var(--border); border-radius:10px; padding:1rem 1.1rem; }
.door-field .radio { display:inline-flex; align-items:center; gap:.4rem; margin-right:1.4rem; font-weight:400; font-family:var(--font-body); color:var(--text); }
.door-field .radio input { width:auto; }
.field-error { color:#c0392b; font-size:.82rem; margin-top:.3rem; }
.form-alert { background:#fdecea; color:#b23b2e; border:1px solid #f5c6c0; border-radius:10px; padding:.7rem 1rem; margin-bottom:1rem; font-size:.9rem; }
.signup-form .btn, .contact-form .btn { width:100%; margin-top:.4rem; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------------------------------------------------------------- Pages internes */
.breadcrumb { display:flex; gap:.5rem; align-items:center; color:var(--muted); font-size:.85rem; margin-bottom:1rem; }
.breadcrumb a { color:var(--muted); }
.breadcrumb a:hover { color:var(--magenta-600); }
.form-page .section-lead { margin-bottom:2rem; }
.legal-page .legal-updated { color:var(--muted); font-size:.85rem; margin-bottom:1.5rem; }
.legal-body h2 { font-size:1.25rem; margin:2rem 0 .6rem; }
.legal-body p { margin-bottom:1rem; color:var(--text); }
.confirmation-page .confirm-check { width:5rem; height:5rem; border-radius:50%; background-image:var(--grad);
  color:#fff; font-size:2.4rem; display:flex; align-items:center; justify-content:center; margin:0 auto 1.4rem; font-weight:700; box-shadow:var(--shadow-grad); }
.error-page .error-code { font-family:var(--font-head); font-weight:700; font-size:4rem;
  background-image:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background:var(--navy-700); color:#a7abca; padding-block:2.6rem 1.4rem; }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.6rem; align-items:center; }
.footer-logo { width:60px; height:auto; }
.footer-tagline { margin-top:.6rem; font-size:.9rem; max-width:32ch; color:#888dae; }
.footer-links { display:flex; flex-wrap:wrap; gap:1.4rem; align-items:center; }
.footer-links a { color:#c1c4de; font-size:.9rem; font-family:var(--font-head); }
.footer-links a:hover { color:#fff; text-decoration:none; }
.footer-legal { margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.08); font-size:.82rem; color:#777ca0; }

/* ---------------------------------------------------------------- Cookie bar */
.cookie-bar { position:fixed; left:1rem; right:1rem; bottom:1rem; max-width:640px; margin-inline:auto; z-index:150;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:1rem 1.2rem; display:flex; gap:1rem; align-items:center; justify-content:space-between; }
/* display:flex ci-dessus neutraliserait l'attribut hidden (géré par site.js) sans ceci */
.cookie-bar[hidden] { display:none; }
.cookie-bar p { font-size:.85rem; color:var(--text); margin:0; }
.cookie-bar .btn { flex:0 0 auto; }

/* ---------------------------------------------------------------- Wayfinding
   Signalétique & itinéraires (fonctionnalité de la démo Mines 15, plan fictif).
   Téléphone en CSS, 3 écrans SVG pilotés par le moteur [data-process]. */
.wayfind-section { background:var(--bg-soft); }
.wayfind-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.wf-visual { position:relative; }
.wf-visual::before { content:""; position:absolute; left:50%; top:46%; width:min(420px,100%); aspect-ratio:1/1;
  transform:translate(-50%,-50%); border-radius:50%; background:linear-gradient(135deg, #eef1fe 0%, #f6e9f7 100%); }
.wf-phone { position:relative; width:min(270px,78vw); margin-inline:auto; padding:10px; border-radius:38px;
  background:var(--navy); box-shadow:var(--shadow-lg); }
.wf-screen { position:relative; aspect-ratio:240/440; border-radius:28px; overflow:hidden; background:#fff; }
.wf-svg { width:100%; height:100%; }
.wf-svg text { font-family:var(--font-body); }
.wf-svg .wf-h { font-family:var(--font-head); font-weight:600; font-size:14px; }
.wf-svg .wf-t { font-size:12px; font-weight:500; }
.wf-svg .wf-s { font-size:10px; }
.wf-svg .wf-lbl { font-family:var(--font-head); font-weight:600; font-size:9px; letter-spacing:.12em; }
.wf-svg .wf-btn { font-family:var(--font-head); font-weight:600; font-size:10px; text-anchor:middle; }
.wf-copy .section-title { margin-top:.8rem; }
.wf-steps { margin-top:1.6rem; padding:0; }
.wf-copy .lead { margin-top:.8rem; }
.wf-features { margin:1.6rem 0 1.8rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.wf-features h3 { font-size:1rem; margin-bottom:.3rem; }
.wf-features p { font-size:.92rem; }

/* Animations (jouées à l'activation de l'écran) */
@keyframes wf-draw { to { stroke-dashoffset:0; } }
@keyframes wf-ping { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(2.2); opacity:0; } }
@keyframes wf-tap  { 0% { transform:scale(.2); opacity:0; } 40% { opacity:.35; } 100% { transform:scale(1.6); opacity:0; } }
@keyframes wf-drop { from { transform:translateY(-14px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes wf-glow { 0%,100% { opacity:1; } 50% { opacity:.55; } }
.wf-route { stroke-dasharray:1; stroke-dashoffset:1; }
.wf-ring, .wf-tap { transform-box:fill-box; transform-origin:center; }
.wf-tap { opacity:0; }
.wf-scene.is-active .wf-route { animation:wf-draw 1.6s .5s ease-in-out forwards; }
.wf-scene.is-active .wf-ring { animation:wf-ping 1.8s ease-out infinite; }
.wf-scene.is-active .wf-tap { animation:wf-tap .8s 1.6s ease-out both; }
.wf-scene.is-active .wf-hit { animation:wf-glow 1.6s ease-in-out infinite; }
.wf-scene.is-active .wf-pin { animation:wf-drop .5s 2s ease-out both; }
.wf-scene.is-active .wf-ringbtn { animation:wf-glow 1.4s 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) {
  .wf-route { stroke-dashoffset:0; }
  .wf-scene * { animation:none !important; }
}

/* ---------------------------------------------------------------- Reveal */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------------------------------------------------------------- Responsive */
@media (max-width:960px){
  .hero-inner { grid-template-columns:1fr; }
  .hero-visual { order:-1; max-width:250px; }
  .demo-inner, .door-inner, .contact-inner, .wayfind-inner { grid-template-columns:1fr; }
  .wf-features { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .steps-inner { grid-template-columns:1fr; }
  .process-stage { max-width:340px; }
  .examples-gallery { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .nav-burger { display:flex; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:10px; cursor:pointer; background:#fff; }
  .nav-burger span { width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }
  .site-nav { position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-md);
    padding:1rem clamp(1rem,4vw,2rem) 1.4rem; transform:translateY(-120%); transition:transform .25s ease; }
  .nav-toggle:checked ~ .site-nav { transform:translateY(0); }
  .site-nav ul { flex-direction:column; gap:0; }
  .site-nav ul li a { display:block; padding:.8rem 0; border-bottom:1px solid var(--border); }
  .nav-actions { margin-top:1rem; justify-content:space-between; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px){
  body { font-size:16px; }
  .grid-3, .grid-4, .plans, .field-row { grid-template-columns:1fr; }
  .examples-gallery { grid-template-columns:repeat(2,1fr); }
  .footer-inner { flex-direction:column; align-items:flex-start; }
  .cookie-bar { flex-direction:column; align-items:stretch; text-align:center; }
  .hero { border-bottom-left-radius:50% 26px; border-bottom-right-radius:50% 26px; }
}