:root{
  --bg:#0A1420;
  --surface:#101C2B;
  --surface-2:#16243A;
  --border:rgba(203,213,225,.10);
  --border-strong:rgba(203,213,225,.18);
  --text:#F8FAFC;
  --muted:#94A3B8;
  --accent:#06B6D4;
  --accent-bright:#22D3EE;
  --accent-ink:#06222E;
  --navy:#1E3850;
  --radius:20px;
  --font-display:'Montserrat',sans-serif;
  --font-body:'Montserrat',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.02em;font-weight:700}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.container{width:min(1200px,92vw);margin-inline:auto}

/* ---------- utilities ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.section{padding:clamp(3.2rem,6.5vw,6rem) 0}
.section-head{max-width:720px;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.section-head h2{font-size:clamp(2rem,4.4vw,3.4rem);margin:.9rem 0 1rem}
.section-head p{color:var(--muted);font-size:1.06rem;max-width:560px}
.accent{color:var(--accent-bright)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;
  border:1px solid transparent;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
  cursor:pointer;white-space:nowrap;
}
.btn svg{width:18px;height:18px;transition:transform .2s ease}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(6,182,212,.35)}
.btn-ghost{border-color:var(--border-strong);color:var(--text);background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(10,20,32,.8);backdrop-filter:blur(16px);border-color:var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{display:inline-flex;align-items:center}
.logo svg{height:44px;width:auto}
.nav-links{display:flex;gap:2.2rem;list-style:none}
.nav-links a{font-size:.95rem;color:var(--muted);transition:color .2s ease;padding:.5rem 0}
.nav-links a:hover{color:var(--text)}
.nav .btn{padding:.7rem 1.35rem;font-size:.9rem}
.nav-contact{display:none}
.burger{display:none;background:none;border:0;padding:.6rem;color:var(--text)}
.burger svg{width:26px;height:26px}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
  padding-top:110px;padding-bottom:2rem;
  overflow:hidden;
}
.hero-glow{
  position:absolute;pointer-events:none;border-radius:50%;filter:blur(120px);opacity:.5;
}
.hero-glow.g1{width:640px;height:640px;background:radial-gradient(circle,rgba(6,182,212,.26),transparent 65%);top:-180px;right:-140px}
.hero-glow.g2{width:560px;height:560px;background:radial-gradient(circle,rgba(30,64,120,.5),transparent 65%);bottom:-200px;left:-160px}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 75%);
}
.hero .container{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(2rem,4vw,4rem);
}
.hero-visual{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:420px;
}
.hero-visual::before{
  content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,212,.22),transparent 65%);
  filter:blur(60px);pointer-events:none;
}
.hero-visual canvas{position:relative;width:100%!important;height:100%!important;display:block}
.logo3d-fallback{width:min(320px,70%);position:relative;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
.hero h1{
  font-size:clamp(2.2rem,4.2vw,3.6rem);
  font-weight:800;
  margin:1.4rem 0 1.6rem;
}
.hero h1 .nw{white-space:nowrap}
.hero h1 .amp-row{display:flex;align-items:center;gap:1.4rem;margin:.1em 0}
.hero h1 .amp{
  font-style:italic;font-size:1.18em;line-height:1;padding-right:.08em;
  background:linear-gradient(135deg,var(--accent-bright),var(--accent) 55%,#1E6FA8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(6,182,212,.35));
}
.hero h1 .amp-row::after{
  content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(6,182,212,.55),transparent 85%);
}
.hero h1 .shine{
  background:linear-gradient(90deg,#22D3EE 0%,#7DEBFA 25%,#06B6D4 55%,#22D3EE 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s linear infinite;
}
@keyframes shine{to{background-position:-200% 0}}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .word{display:inline-block}
.hero-sub{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:52ch;margin-bottom:2rem}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.4rem}
/* Les deux boutons secondaires forment un bloc : quand la colonne est trop
   étroite pour les trois, c'est la paire qui descend d'un bloc, jamais un
   bouton isolé sous les deux autres. */
.hero-ctas-secondaires{display:flex;gap:1rem;flex-wrap:wrap}
/* Trois chiffres plutôt que cinq pastilles qualitatives : un visiteur retient
   un nombre, pas une liste d'adjectifs. Volontairement SANS compteur animé.
   Un compteur qui part de zéro affiche « 0 » tant que l'observateur n'a pas
   déclenché, et c'est le hero : il est vu avant tout défilement. */
.hero-stats{display:flex;gap:2.8rem;flex-wrap:wrap;max-width:580px}
.hero-stat b{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.05;letter-spacing:-.02em;
  color:var(--accent-bright);
}
.hero-stat span{
  display:block;margin-top:.3rem;max-width:16ch;
  font-size:.84rem;line-height:1.35;color:var(--muted);
}

/* marquee */
.marquee{
  border-block:1px solid var(--border);
  padding:1.1rem 0;overflow:hidden;position:relative;z-index:2;
  background:rgba(255,255,255,.015);
}
.marquee-track{display:flex;gap:3.5rem;width:max-content;animation:marquee 28s linear infinite}
.marquee-item{
  display:flex;align-items:center;gap:3.5rem;
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  color:var(--muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;
}
.marquee-item svg{width:14px;height:14px;color:var(--accent);flex:none}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- bento services ---------- */
.bento{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(12,1fr);
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2rem;
  position:relative;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.card:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.card .icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.28);
  margin-bottom:1.4rem;
}
.card .icon svg{width:22px;height:22px;color:var(--accent-bright)}
.card h3{font-size:1.3rem;margin-bottom:.6rem}
.card p{color:var(--muted);font-size:.97rem}
.card .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.tag{
  font-size:.76rem;font-weight:500;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:.28rem .75rem;
}
.b-6{grid-column:span 6}
.b-4{grid-column:span 4}
.b-8{grid-column:span 8}
.b-12{grid-column:span 12}
.card.row{display:flex;align-items:center;gap:1.5rem}
.card.row .icon{margin-bottom:0}
.card.row h3{margin-bottom:.35rem}
.card.feature{
  background:linear-gradient(135deg,rgba(6,182,212,.14),rgba(30,56,80,.45)),var(--surface);
}
.card.feature::after{
  content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(6,182,212,.22),transparent 70%);pointer-events:none;
}

/* ---------- offres ---------- */
.offers{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;align-items:stretch}
.offer{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem 1.7rem 1.7rem;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.offer:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.offer.featured{border-color:rgba(6,182,212,.55);background:linear-gradient(160deg,rgba(6,182,212,.10),rgba(30,56,80,.35)),var(--surface)}
.offer.featured:hover{border-color:var(--accent)}
.o-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:.32rem .85rem;white-space:nowrap;
}
.o-tag{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:.8rem}
.offer h3{font-size:1.18rem;margin-bottom:.35rem}
.o-sub{color:var(--muted);font-size:.9rem;margin-bottom:1.1rem}
/* Pour qui et Livraison : les deux questions posées avant même le prix.
   Séparées de la liste par un filet, elles se lisent d'un coup d'œil quand
   on compare les quatre cartes de gauche à droite. */
.o-meta{
  display:flex;flex-direction:column;gap:.5rem;
  margin-bottom:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--border);
}
.o-meta div{display:flex;gap:.55rem;align-items:flex-start;font-size:.83rem;color:var(--muted);line-height:1.4}
.o-meta b{color:#CBD5E1;font-weight:600}
.o-meta svg{width:14px;height:14px;flex:none;margin-top:2px;color:var(--muted)}
.o-list{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.4rem}
.o-list li{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;color:#CBD5E1;line-height:1.4}
.o-list svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:3px}
.o-opts{margin:0 0 1.4rem;font-size:.82rem;color:var(--muted);line-height:1.55}
.o-opts b{
  display:block;margin-bottom:.35rem;color:#CBD5E1;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.o-foot{margin-top:auto}
/* Un seul appel à l'action pour les quatre offres, sur toute leur largeur. */
.offres-cta{
  margin-top:1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  border:1px solid rgba(6,182,212,.3);border-radius:var(--radius);
  background:linear-gradient(100deg,rgba(6,182,212,.10),rgba(30,56,80,.28)),var(--surface);
  padding:clamp(1.3rem,3vw,1.9rem) clamp(1.4rem,3vw,2.2rem);
}
.offres-cta h3{font-size:clamp(1.1rem,2vw,1.35rem);margin-bottom:.35rem}
.offres-cta p{color:var(--muted);font-size:.92rem;max-width:60ch}
.offres-cta .btn{flex:none}
/* Le prix est le premier chiffre que l'œil doit accrocher dans la carte :
   il passe donc en taille display, au-dessus du bouton. */
.o-price em{
  display:block;font-style:normal;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.o-price strong{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.6rem;line-height:1.15;color:#fff;letter-spacing:-.01em;
}
.o-price span{display:block;margin-top:.2rem;font-size:.76rem;color:var(--muted)}

/* ---------- hébergement ----------
   Deux cartes face à face, sans sélecteur. Le site comparé en pose un
   « Autonome / Managé » au-dessus de deux cartes de toute façon visibles :
   l'interaction n'apporte alors aucune information, elle ajoute un clic. */
.heb{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin-top:1.4rem}
.heb-carte{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.8rem 1.6rem;
  transition:transform .25s ease,border-color .25s ease;
}
.heb-carte:hover{transform:translateY(-4px);border-color:var(--border-strong)}
.heb-carte.mise-en-avant{
  border-color:rgba(6,182,212,.5);
  background:linear-gradient(160deg,rgba(6,182,212,.10),rgba(30,56,80,.32)),var(--surface);
}
.heb-carte.mise-en-avant:hover{border-color:var(--accent)}
.heb-tete{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.1rem}
.heb-icone{
  flex:none;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.28);
}
.heb-icone svg{width:20px;height:20px;color:var(--accent-bright)}
.heb-tete h3{font-size:1.08rem;margin-bottom:.2rem}
.heb-tete p{color:var(--muted);font-size:.86rem}
.heb-prix{
  font-family:var(--font-display);font-weight:800;font-size:1.45rem;color:#fff;
  line-height:1.2;margin-bottom:.25rem;
}
.heb-prix span{display:block;font-family:var(--font-body);font-weight:500;font-size:.8rem;color:var(--muted);margin-top:.25rem}
.heb-liste{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-top:1.2rem}
.heb-liste li{display:flex;gap:.55rem;align-items:flex-start;font-size:.88rem;color:#CBD5E1;line-height:1.4}
.heb-liste svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:3px}
.heb-note{
  display:flex;gap:.6rem;align-items:flex-start;
  margin-top:1.2rem;font-size:.86rem;color:var(--muted);line-height:1.5;
}
.heb-note svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:3px}
.heb-note b{color:#CBD5E1;font-weight:600}

/* ---------- visibilité 360 (SEO + GEO) ---------- */
.vis-band{
  border-radius:calc(var(--radius) + 8px);border:1px solid var(--border-strong);
  background:
    radial-gradient(ellipse 55% 90% at 12% 0%,rgba(6,182,212,.14),transparent 60%),
    radial-gradient(ellipse 50% 80% at 90% 100%,rgba(30,64,120,.4),transparent 60%),
    var(--surface);
  padding:clamp(2.2rem,5vw,3.6rem);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;
}
.vis-band h3{font-size:clamp(1.5rem,2.8vw,2.1rem);margin:.8rem 0 .9rem}
.vis-band>div>p{color:var(--muted);font-size:.98rem;max-width:46ch}
.vis-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.vis-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-size:.85rem;font-weight:600;color:#CBD5E1;
  border:1px solid var(--border-strong);border-radius:999px;padding:.55rem 1rem;
  background:rgba(255,255,255,.03);
}
.vis-chip svg{width:14px;height:14px;color:var(--accent);flex:none}
.vis-group{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);width:100%;margin-bottom:.1rem}
.vis-group:not(:first-child){margin-top:.7rem}

/* ---------- process (timeline) ---------- */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.tl-step{
  position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.9rem 1.7rem;
  transition:transform .25s ease,border-color .25s ease;
}
.tl-step:hover{transform:translateY(-5px);border-color:rgba(6,182,212,.4)}
.tl-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem}
.tl-num{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--accent-bright);
  background:rgba(6,182,212,.10);border:1px solid rgba(6,182,212,.35);
  box-shadow:0 0 24px rgba(6,182,212,.15);
}
.tl-head::after{
  content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(6,182,212,.5),rgba(6,182,212,.05));
}
.tl-step h3{font-size:1.14rem;margin-bottom:.5rem}
.tl-step p{color:var(--muted);font-size:.92rem;margin-bottom:1.2rem}
.tl-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tl-deliv{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;color:var(--accent-bright);
  border:1px solid rgba(6,182,212,.3);border-radius:999px;padding:.4rem .85rem;
  background:rgba(6,182,212,.07);
}
.tl-deliv svg{width:13px;height:13px;flex:none}
/* La durée est en gris et non en cyan : elle informe, le livrable rassure.
   Deux pastilles cyan côte à côte se seraient annulées visuellement. */
.tl-time{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.8rem;font-weight:600;color:#CBD5E1;
  border:1px solid var(--border-strong);border-radius:999px;padding:.4rem .85rem;
  background:rgba(255,255,255,.03);
}
.tl-time svg{width:13px;height:13px;flex:none;color:var(--muted)}

/* ---------- work ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.work-card{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  display:block;
}
.work-card:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.work-visual{
  aspect-ratio:16/10.5;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  padding:2.4rem 2.4rem 0;
}
.wv-1{background:linear-gradient(140deg,#0b3340,#0d2230 45%,#0A1420)}
.wv-2{background:linear-gradient(140deg,#12294d,#101c33 50%,#0A1420)}
.wv-3{background:linear-gradient(140deg,#0e3a3a,#0d2229 50%,#0A1420)}
.wv-4{background:linear-gradient(140deg,#1E3850,#14212f 50%,#0A1420)}
.mock-bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.work-visual.photo{padding:0}
.work-visual.photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.work-card:hover .work-visual.photo img{transform:scale(1.04)}
.work-card.wide{grid-column:1/-1}
/* La capture est en position absolue : elle ne donne aucune hauteur a son
   parent. La carte pleine largeur exige donc un rapport explicite, sans quoi
   elle s'effondre. Plus panoramique que les cartes de demi-largeur, et
   ramenee au rapport commun sous 760px (voir la requete media). */
.work-card.wide .work-visual{aspect-ratio:16/6.5}
.wv-fdg{background:linear-gradient(140deg,#3d2a14,#241a10 50%,#0A1420)}
.work-info{padding:1.5rem 1.7rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.work-info h3{font-size:1.18rem;margin-bottom:.25rem}
.work-info p{color:var(--muted);font-size:.88rem}
.work-info .arrow{
  flex:none;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease;
}
.work-card:hover .arrow{background:var(--accent);border-color:var(--accent);transform:rotate(-45deg)}
.work-card:hover .arrow svg{color:var(--accent-ink)}
.work-info .arrow svg{width:18px;height:18px;color:var(--text);transition:color .25s ease}

/* ---------- pourquoi nous ---------- */
/* ---------- comparatif ----------
   Lu par paires « avant → avec nous » plutôt qu'en deux colonnes
   indépendantes : la flèche raconte un passage, pas un match. La colonne
   de gauche est en gris ardoise, jamais en rouge, et le texte n'est pas
   barré : on décrit une situation courante, on ne se moque de personne. */
.cmp{display:grid;grid-template-columns:1fr 46px 1fr;gap:.7rem .9rem;align-items:stretch}
.cmp-h{
  display:flex;align-items:center;padding:0 .3rem .1rem;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.cmp-h.bad{color:#94A3B8}
.cmp-h.good{color:var(--accent-bright)}
.cmp-cell{
  display:flex;gap:.7rem;align-items:flex-start;
  border:1px solid var(--border);border-radius:14px;padding:.9rem 1.1rem;
  font-size:.92rem;line-height:1.45;
  transition:border-color .25s ease;
}
.cmp-cell svg{width:16px;height:16px;flex:none;margin-top:3px}
.cmp-cell.bad{background:rgba(148,163,184,.045);color:#94A3B8}
.cmp-cell.bad svg{color:#64748B}
.cmp-cell.good{background:var(--surface);border-color:rgba(6,182,212,.26);color:#E2E8F0}
.cmp-cell.good svg{color:var(--accent)}
.cmp-cell.good:hover{border-color:rgba(6,182,212,.55)}
.cmp-arrow{display:flex;align-items:center;justify-content:center;color:#475569}
.cmp-arrow svg{width:20px;height:20px}
.cmp-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center;margin-top:clamp(2rem,4vw,3rem);
}
.cmp-foot h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:.7rem;line-height:1.25}
.cmp-foot p{color:var(--muted);margin-bottom:1.4rem}
.term{
  background:#0D1826;border:1px solid rgba(203,213,225,.14);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.term-body{padding:1.3rem 1.5rem;font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:.86rem;line-height:1.8;color:#CBD5E1;overflow-x:auto}
.term-body .cmd{color:var(--accent-bright)}
.term-body .dim{color:#64748B}
.term-body .out{color:#E2E8F0;font-weight:600}

/* ---------- prise de rendez-vous ----------
   Deux emplacements pour un seul mécanisme : la section en bas de page, et
   la pastille flottante. Même balisage, pilotés par le même code, d'où les
   attributs `data-rdv-*` plutôt que des identifiants uniques.

   Tout reste `hidden` tant que RDV_API n'est pas renseignée ET que le
   service ne répond pas : le site ne promet jamais un rendez-vous qu'il ne
   sait pas prendre. */

/* Étapes numérotées : le visiteur voit où il en est, et surtout combien il
   lui reste. Un mur de 14 créneaux sans repère décourage. */
.rdv-etape{margin-bottom:1.6rem}
.rdv-etape:last-child{margin-bottom:0}
.rdv-num{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.rdv-num i{
  flex:none;width:24px;height:24px;border-radius:50%;font-style:normal;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,182,212,.12);border:1px solid rgba(6,182,212,.35);
  color:var(--accent-bright);font-size:.76rem;font-weight:800;
}
.rdv-etape[data-fait="oui"] .rdv-num i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* Défilement horizontal des jours. min-width:0 est indispensable sur les
   parents : sans lui, la largeur intrinsèque de la bande impose sa loi à la
   grille et écrase la colonne voisine. Défaut constaté en production le
   29/07/2026, la colonne de gauche tombait à 145 px. */
.rdv-jours{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.4rem;min-width:0;scrollbar-width:thin}
.rdv-jour{
  flex:none;min-width:68px;text-align:center;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;
  padding:.55rem .5rem;color:#94A3B8;font-size:.74rem;line-height:1.3;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.rdv-jour b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:#E2E8F0}
.rdv-jour:hover{border-color:rgba(6,182,212,.45)}
.rdv-jour[aria-selected="true"]{background:rgba(6,182,212,.14);border-color:var(--accent);color:#fff}
.rdv-jour[aria-selected="true"] b{color:#fff}

/* Créneaux groupés par demi-journée : « 14 créneaux » se lit mal, « 6 le
   matin, 8 l'après-midi » se choisit. */
.rdv-demi{margin-bottom:1rem}
.rdv-demi:last-child{margin-bottom:0}
.rdv-demi-titre{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748B;margin-bottom:.55rem}
.rdv-creneaux{display:flex;flex-wrap:wrap;gap:.45rem}
.rdv-creneau{
  cursor:pointer;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:999px;padding:.5rem .95rem;color:#E2E8F0;font-size:.86rem;font-weight:600;
  transition:border-color .2s ease,background .2s ease;
}
.rdv-creneau:hover{border-color:rgba(6,182,212,.5)}
.rdv-creneau[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.rdv-vide{color:var(--muted);font-size:.88rem}
.rdv-erreur{color:#FCA5A5;font-size:.86rem;margin-top:.2rem}

.rdv-form{display:flex;flex-direction:column;gap:.9rem}
.rdv-quand{
  display:flex;align-items:center;gap:.5rem;
  font-size:.88rem;color:var(--accent-bright);font-weight:600;
  background:rgba(6,182,212,.08);border:1px solid rgba(6,182,212,.24);
  border-radius:12px;padding:.6rem .9rem;
}
.rdv-ok{text-align:center;padding:.6rem 0}
.rdv-ok .rdv-coche{
  width:46px;height:46px;border-radius:50%;margin:0 auto .9rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(6,182,212,.14);border:1px solid var(--accent);
}
.rdv-ok .rdv-coche svg{width:22px;height:22px;color:var(--accent-bright)}
.rdv-ok h4{font-size:1.15rem;margin-bottom:.5rem}
.rdv-ok p{color:var(--muted);font-size:.9rem;margin-bottom:1.1rem}
.rdv-liens{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}

/* ---------- la section en bas de page ----------
   Reprend le dégradé qui identifiait l'ancien bloc de contact : la mise en
   page change, l'identité visuelle de la section reste. */
.rdv-section{
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--border-strong);
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%,rgba(6,182,212,.16),transparent 60%),
    radial-gradient(ellipse 50% 80% at 10% 100%,rgba(30,64,120,.4),transparent 60%),
    var(--surface);
  padding:clamp(2.2rem,5vw,4rem) clamp(1.2rem,4vw,3rem);
  overflow:hidden;position:relative;text-align:center;
}
.rdv-section>*{max-width:760px;margin-inline:auto}
.rdv-section h2{font-size:clamp(1.9rem,3.8vw,3rem);margin:.9rem 0 .9rem}
.rdv-section>p{color:var(--muted);max-width:52ch;margin:0 auto 1.4rem}
.rdv-atouts{
  display:flex;flex-wrap:wrap;gap:.5rem .7rem;justify-content:center;margin-bottom:2.4rem;
}
.rdv-atout{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;color:#CBD5E1;
  border:1px solid var(--border-strong);border-radius:999px;padding:.45rem .9rem;
  background:rgba(255,255,255,.03);
}
.rdv-atout svg{width:14px;height:14px;color:var(--accent);flex:none}
.rdv-panneau{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2.2rem);text-align:left;min-width:0;
}
.rdv-pied{margin-top:1.6rem;font-size:.9rem;color:var(--muted)}
.rdv-bascule{
  background:none;border:none;padding:0;cursor:pointer;font:inherit;
  color:var(--accent-bright);font-weight:600;text-decoration:underline;
}
/* Le formulaire écrit reste disponible, replié derrière un lien. */
.rdv-formulaire-ecrit{max-width:560px;margin:1.6rem auto 0;text-align:left}

/* ---------- la pastille flottante ----------
   Volontairement petite et fermée par défaut. Le site compare, redsentinel.fr,
   ouvre la sienne d'office et elle masque une colonne de son propre tableau
   comparatif ainsi que le detail de son offre la plus chere : un widget qui
   cache ce qu'il est censé vendre travaille contre lui-même. */
.rdv-flottant{
  position:fixed;right:clamp(.8rem,2vw,1.6rem);bottom:clamp(.8rem,2vw,1.6rem);
  z-index:400;display:flex;flex-direction:column;align-items:flex-end;
  transition:opacity .25s ease,transform .25s ease;
}
.rdv-flottant[hidden]{display:none}
/* Escamoté quand la section de rendez-vous est à l'écran : proposer deux fois
   la même chose au même moment ne convainc pas davantage, ça encombre. */
.rdv-flottant.efface{opacity:0;transform:translateY(12px);pointer-events:none}
.rdv-pastille{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);border:none;
  border-radius:999px;padding:.75rem 1.15rem;
  font-family:var(--font-display);font-weight:700;font-size:.92rem;
  box-shadow:0 12px 34px rgba(6,182,212,.32);
  transition:transform .2s ease,box-shadow .2s ease;
}
.rdv-pastille:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(6,182,212,.42)}
.rdv-pastille svg{width:17px;height:17px;flex:none}
/* Indispensable : `display` pose sur une classe l'emporte sur l'attribut
   `hidden`, et la pastille restait affichee au-dessus de la carte ouverte. */
.rdv-pastille[hidden]{display:none}
.rdv-carte{
  width:min(360px,calc(100vw - 2rem));max-height:min(560px,calc(100vh - 6rem));
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid rgba(6,182,212,.32);border-radius:18px;
  padding:1.2rem;box-shadow:0 26px 70px rgba(0,0,0,.6);
}
.rdv-carte-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.rdv-carte-tete h3{font-size:1.02rem;line-height:1.3}
.rdv-carte-tete p{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.rdv-actions{display:flex;gap:.3rem;flex:none}
.rdv-icone{
  width:28px;height:28px;border-radius:8px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:#94A3B8;
  transition:color .2s ease,border-color .2s ease;
}
.rdv-icone:hover{color:#fff;border-color:var(--border-strong)}
.rdv-icone svg{width:14px;height:14px}
.rdv-carte .rdv-etape{margin-bottom:1.1rem}
.rdv-carte .rdv-jour{min-width:60px;padding:.45rem .4rem;font-size:.7rem}
.rdv-carte .rdv-jour b{font-size:.95rem}
.rdv-carte .rdv-creneau{padding:.42rem .8rem;font-size:.82rem}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin-inline:auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.5rem .25rem;cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary .plus{
  flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;transition:transform .3s ease,background .3s ease;
}
.faq-item summary .plus svg{width:15px;height:15px}
.faq-item[open] summary .plus{transform:rotate(45deg);background:rgba(6,182,212,.15)}
.faq-item .answer{padding:0 .25rem 1.6rem;color:var(--muted);max-width:60ch}

/* ---------- CTA / contact ---------- */
.form{display:flex;flex-direction:column;gap:1rem}
.field label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.4rem;color:#CBD5E1}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border-strong);
  border-radius:12px;padding:.85rem 1rem;color:var(--text);
  font-family:var(--font-body);font-size:.95rem;
  transition:border-color .2s ease,background .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:rgba(6,182,212,.07);
}
.field textarea{resize:vertical;min-height:110px}
.field select option{background:var(--surface-2);color:var(--text)}
.form .btn{justify-content:center;margin-top:.4rem}
.form-note{font-size:.8rem;color:var(--muted);text-align:center}

/* ---------- footer ---------- */
footer{position:relative;border-top:1px solid var(--border);padding:2.2rem 0 1.6rem;overflow:hidden}
footer::before{
  content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(6,182,212,.10),transparent 65%);
}
.foot-links-row{
  position:relative;display:flex;justify-content:center;flex-wrap:wrap;
  gap:.6rem 2.2rem;margin-bottom:1.4rem;
}
.foot-links-row a{color:var(--muted);font-size:.88rem;transition:color .2s ease}
.foot-links-row a:hover{color:var(--accent-bright)}
.foot-mega{
  position:relative;display:block;text-align:center;user-select:none;
  font-family:var(--font-display);font-weight:800;line-height:1;
  font-size:clamp(2.6rem,9.5vw,7.5rem);letter-spacing:-.04em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(148,163,184,.25);
  margin:0 0 1.6rem;
}
.foot-mega .dot{color:var(--accent);-webkit-text-stroke:0}
.foot-bottom{position:relative;display:flex;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border);padding-top:1.4rem}
.foot-bottom a{color:#CBD5E1;transition:color .2s ease}
.foot-bottom a:hover{color:var(--accent-bright)}

/* ---------- reveal anim base ---------- */
.reveal{opacity:0;transform:translateY(28px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .container{grid-template-columns:1fr}
  .hero-visual{display:none}
  .b-6,.b-4,.b-8{grid-column:span 6}
  .b-12{grid-column:span 12}
  .tl{grid-template-columns:1fr}
  .tl-head::after{display:none}
  .cmp-foot{grid-template-columns:1fr}
  /* Les paires du comparatif s'empilent : la flèche pivote d'un quart de
     tour pour continuer à désigner la ligne du dessous, et la marge sépare
     les paires entre elles, sans quoi on ne sait plus quoi va avec quoi. */
  .cmp{grid-template-columns:1fr;gap:.45rem}
  .cmp-h{display:none}
  .cmp-arrow{transform:rotate(90deg);padding:.1rem 0}
  .cmp-cell.good{margin-bottom:1.1rem}
  .offers{grid-template-columns:repeat(2,1fr)}
  .vis-band{grid-template-columns:1fr}
  .rdv-flottant{right:.7rem;bottom:.7rem}
}
@media (max-width:760px){
  .nav-links{
    position:fixed;inset:76px 0 auto 0;
    background:rgba(10,20,32,.97);backdrop-filter:blur(20px);
    flex-direction:column;gap:0;padding:1rem 4vw 1.6rem;
    border-bottom:1px solid var(--border);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:.9rem 0;font-size:1.05rem}
  .burger{display:block}
  .nav .btn{display:none}
  .nav-contact{display:block}
  .b-6,.b-4,.b-8{grid-column:span 12}
  .work-grid{grid-template-columns:1fr}
  .work-card.wide .work-visual{aspect-ratio:16/10.5}
  .offers{grid-template-columns:1fr}
  .heb{grid-template-columns:1fr}
  .offres-cta{flex-direction:column;align-items:flex-start}
  .offres-cta .btn{width:100%;justify-content:center}
  .card.row{flex-direction:column;align-items:flex-start}
  .hero-stats{gap:1.5rem 2rem}
  .hero-stat span{max-width:13ch}
}

.reveal{opacity:1!important;transform:none!important}h1{font-size:clamp(32px,5vw,60px)}.booking-header{padding:30px 5%;display:flex;align-items:center;justify-content:space-between}.booking-header a{color:#22d3ee}.rdv-flottant{display:none!important}
@font-face{font-family:Montserrat;src:url(motion/montserrat-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Montserrat;src:url(motion/montserrat-800.woff2) format("woff2");font-weight:800;font-display:swap}