/* ============================================================
   WEB COOL — Premium templates marketplace (dark · blue→violet)
   ============================================================ */

:root {
  --bg: #05090C;
  --bg-elev: #0B1117;
  --bg-card: #0C141B;
  --ink: #E9F2F5;
  --muted: #7E929C;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --acc: #A98BFF;          /* light periwinkle violet (solid accent) */
  --acc-2: #E892FF;        /* light pink-violet */
  --acc-3: #6CB8FF;        /* light blue */
  --acc-rgb: 169, 139, 255;
  --ink-on-acc: #1E1240;   /* dark text for use on the light gradient */

  --grad: linear-gradient(115deg, #6CB8FF 0%, #A98BFF 50%, #E892FF 100%);
  --glow: 0 0 50px rgba(169, 139, 255, 0.32);
  --radius: 20px;
  --radius-sm: 12px;
  --maxw: 1240px;
  --nav-h: 91px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Focus clavier visible et homogène (accessibilité) */
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
/* on neutralise l'outline uniquement quand le focus vient de la souris/tactile */
:focus:not(:focus-visible) { outline: none; }

/* Lien d'évitement */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  background: var(--grad); color: var(--ink-on-acc); font-weight: 600; font-size: 0.92rem;
  padding: 11px 20px; border-radius: 999px; box-shadow: var(--glow);
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: none; outline: 2px solid #fff; outline-offset: 2px; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  /* « clip » et non « hidden » : hidden fait du body un conteneur de défilement,
     ce qui annule scroll-margin-top et casse les renvois vers les sources. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo__text {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  line-height: 1.06;
  letter-spacing: -0.03em;
  /* Équilibre les lignes des titres : évite un mot (ex. « e-commerce ») seul en bas de ligne. */
  text-wrap: balance;
  color: var(--ink);
  font-weight: 600;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
sup { font-size: 0.5em; vertical-align: super; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }

.gradient-text {
  background: var(--grad); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 6s ease infinite;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ===== Scroll progress ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad); z-index: 200; box-shadow: 0 0 12px rgba(var(--acc-rgb),0.6);
}

/* ===== Grain overlay ===== */
.grain {
  position: fixed; inset: -50%; z-index: 150; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-4%); } 60% { transform: translate(-3%,-2%); } 80% { transform: translate(4%,3%); }
}

/* ===== Decorative background ===== */
.bg-decor { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.4; }
.orb--1 { width: 620px; height: 620px; background: radial-gradient(circle, var(--acc), transparent 68%); top: -240px; right: -180px; animation: float 24s var(--ease) infinite; }
.orb--2 { width: 520px; height: 520px; background: radial-gradient(circle, var(--acc-2), transparent 68%); bottom: -220px; left: -160px; animation: float 28s var(--ease) infinite reverse; }
.grid-lines {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  background-image:
    radial-gradient(circle, rgba(108,184,255,0.9) 1.6px, transparent 2px),
    radial-gradient(circle, rgba(169,139,255,0.85) 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(232,146,255,0.8) 1.8px, transparent 2.2px),
    radial-gradient(circle, rgba(169,139,255,0.7) 1.2px, transparent 1.6px),
    radial-gradient(circle, rgba(108,184,255,0.75) 1.5px, transparent 1.9px),
    radial-gradient(circle, rgba(232,146,255,0.7) 1.3px, transparent 1.7px),
    radial-gradient(circle, rgba(169,139,255,0.8) 1.7px, transparent 2.1px),
    radial-gradient(circle, rgba(108,184,255,0.65) 1.3px, transparent 1.7px),
    radial-gradient(circle, rgba(232,146,255,0.7) 1.5px, transparent 1.9px),
    radial-gradient(circle, rgba(169,139,255,0.65) 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(108,184,255,0.8) 1.6px, transparent 2px),
    radial-gradient(circle, rgba(232,146,255,0.6) 1.2px, transparent 1.6px);
  background-position:
    9% 20%, 21% 64%, 16% 86%, 34% 28%, 46% 74%, 59% 19%,
    66% 56%, 73% 88%, 81% 33%, 88% 67%, 93% 11%, 41% 47%;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: 0.85; } 50% { opacity: 0.45; } }
@keyframes float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,50px) scale(1.12); } }

/* ===== Buttons ===== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), color .3s, background .3s, border-color .3s;
}
.btn--lg { padding: 13px 28px; font-size: 0.95rem; }
.btn--sm { padding: 10px 20px; font-size: 0.88rem; }
.btn--block { width: 100%; }
.btn--primary { color: var(--ink-on-acc); background: var(--grad); background-size: 160% 160%; box-shadow: var(--glow); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 50px -12px rgba(var(--acc-rgb),0.55), 0 0 70px rgba(var(--acc-rgb),0.35); }
.btn--ghost { color: var(--ink); background: rgba(255,255,255,0.02); border-color: var(--line-strong); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--acc); color: var(--acc); }
.btn:active { transform: translateY(-1px) scale(0.99); }

.badge {
  position: relative; display: inline-block; line-height: 1.4;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px; max-width: 100%; text-align: center;
  padding: 11px 22px; border-radius: 999px; border: 1.5px solid transparent;
  background: linear-gradient(rgba(10,14,20,0.92), rgba(10,14,20,0.92)) padding-box,
              var(--grad) border-box;
  background-size: 100% 100%, 200% 200%;
  box-shadow: 0 12px 38px -10px rgba(var(--acc-rgb),0.55), inset 0 0 18px rgba(var(--acc-rgb),0.08);
  animation: badgeGlow 6s ease infinite, neonFlicker 4.8s linear infinite;
}
@keyframes badgeGlow { 0%,100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
/* Néon défaillant : s'allume / s'éteint par à-coups pour attirer le regard */
@keyframes neonFlicker {
  0%, 18%, 20%, 53%, 55%, 79%, 100% {
    color: #fff;
    text-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 12px rgba(var(--acc-rgb),0.95),
                 0 0 24px rgba(var(--acc-rgb),0.75), 0 0 42px rgba(var(--acc-rgb),0.5);
    box-shadow: 0 12px 38px -10px rgba(var(--acc-rgb),0.55), inset 0 0 18px rgba(var(--acc-rgb),0.1),
                0 0 26px rgba(var(--acc-rgb),0.5);
  }
  19%, 54%, 80%, 83% {
    color: #5d6678;
    text-shadow: none;
    box-shadow: 0 12px 38px -10px rgba(var(--acc-rgb),0.15), inset 0 0 18px rgba(var(--acc-rgb),0.03);
  }
  81%, 82% {
    color: #fff;
    text-shadow: 0 0 4px rgba(255,255,255,0.9), 0 0 12px rgba(var(--acc-rgb),0.95), 0 0 24px rgba(var(--acc-rgb),0.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge { animation: badgeGlow 6s ease infinite; color: #fff; text-shadow: 0 0 12px rgba(var(--acc-rgb),0.7); }
}
.badge__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 14px var(--acc), 0 0 5px var(--acc); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

.eyebrow {
  display: inline-block; font-family: 'Space Grotesk', sans-serif; font-weight: 500;
  font-size: 0.85rem; letter-spacing: 0.05em; color: var(--acc); margin-bottom: 18px;
}

/* ===== Navbar ===== */
.nav { position: sticky; top: 0; z-index: 100; padding: 18px 0; transition: padding .35s var(--ease), background .35s, border-color .35s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(5,9,12,0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom-color: var(--line); padding: 12px 0; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; }
.logo__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); box-shadow: var(--glow); position: relative; }
.logo__mark::after { content: ""; position: absolute; inset: 8px; border-radius: 4px; background: var(--bg); }
.logo__text { font-size: 1.3rem; }
.logo__accent { color: var(--acc); }
.logo__tm { color: var(--muted); }
.nav__links { display: flex; gap: 34px; }
.nav__links a { font-weight: 500; font-size: 0.96rem; color: var(--muted); position: relative; transition: color .25s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1.5px; background: var(--acc); transition: width .3s var(--ease); }
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

/* Menu déroulant « Nos réalisations » → 2 choix en cascade */
.nav__drop-wrap { position: relative; display: inline-flex; align-items: center; }
.nav__drop-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav__chev { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.nav__drop-wrap:hover .nav__chev,
.nav__drop-wrap:focus-within .nav__chev { transform: rotate(180deg); }
.nav__drop {
  position: absolute; top: 100%; left: 50%; min-width: 230px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.7), var(--glow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 60;
}
/* pont invisible : garde le survol entre le lien et le menu */
.nav__drop::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.nav__drop-wrap:hover .nav__drop,
.nav__drop-wrap:focus-within .nav__drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(12px);
}
.nav__drop a {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px; color: var(--muted);
  font-size: 0.92rem; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s, color .25s;
}
.nav__drop a::after { display: none; }
.nav__drop a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex-shrink: 0;
}
.nav__drop a:hover { background: rgba(var(--acc-rgb), 0.12); color: var(--ink); }
/* apparition décalée = effet escalier */
.nav__drop-wrap:hover .nav__drop a,
.nav__drop-wrap:focus-within .nav__drop a { opacity: 1; transform: none; }
.nav__drop-wrap:hover .nav__drop a:nth-child(1) { transition-delay: .05s; }
.nav__drop-wrap:hover .nav__drop a:nth-child(2) { transition-delay: .12s; }

/* Sous-liens du menu mobile — style raffiné (fil connecteur + chips icône) */
.nav__mobile-subs { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; padding-left: 18px; }
/* fil vertical connecteur (façon arborescence) */
.nav__mobile-subs::before {
  content: ""; position: absolute; left: 4px; top: 2px; bottom: 26px; width: 1.5px;
  background: linear-gradient(var(--acc), rgba(var(--acc-rgb), 0.15));
  border-radius: 2px;
}
.nav__mobile-sub {
  position: relative; display: flex !important; align-items: center; gap: 12px;
  padding: 12px 14px !important; border: none !important; border-radius: 13px;
  background: rgba(255, 255, 255, 0.035); color: var(--ink) !important;
  font-size: 0.95rem; font-weight: 500;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
/* petite branche horizontale reliant le fil à chaque item */
.nav__mobile-sub::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 12px; height: 1.5px;
  background: rgba(var(--acc-rgb), 0.5); border-radius: 2px;
}
.nav__mobile-sub:hover, .nav__mobile-sub:active { background: rgba(var(--acc-rgb), 0.12); }
.nav__mobile-sub-ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px; color: var(--acc);
  background: rgba(var(--acc-rgb), 0.12); border: 1px solid rgba(var(--acc-rgb), 0.22);
}
.nav__mobile-sub-ico svg { width: 18px; height: 18px; }
.nav__mobile-sub-txt { flex: 1; }
.nav__mobile-sub-arrow { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; transition: transform .25s var(--ease), color .25s; }
.nav__mobile-sub:hover .nav__mobile-sub-arrow,
.nav__mobile-sub:active .nav__mobile-sub-arrow { transform: translateX(3px); color: var(--acc); }

.nav__burger { display: none; flex-direction: column; gap: 5px; background: rgba(255,255,255,0.04); border: 1px solid var(--line-strong); border-radius: 11px; cursor: pointer; padding: 11px 10px; }
.nav__burger span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; transition: .3s var(--ease); }
.nav__burger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.nav__mobile { display: none; flex-direction: column; gap: 4px; padding: 0 28px; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .45s var(--ease), padding .45s, visibility .45s; }
.nav__mobile.open { max-height: 640px; padding: 14px 28px 24px; visibility: visible; }
.nav__mobile a { padding: 14px 0; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); }
.nav__mobile .btn { margin-top: 16px; color: var(--ink-on-acc); align-self: flex-start; padding: 10px 24px; font-size: 0.9rem; }

/* ===== Sections ===== */
.section { padding: 110px 0; }
/* Ancrage propre sous la barre de navigation fixe */
section[id], main[id] { scroll-margin-top: 88px; }
.section__head { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.section__title { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 18px; }
.section__lead { color: var(--muted); font-size: 1.08rem; max-width: 580px; }
.section__head .section__lead { margin-inline: auto; }
.section__lead a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; transition: color .25s; }
.section__lead a:hover { color: var(--acc-2); }

/* ===== Hero ===== */
.hero { position: relative; min-height: calc(90vh - var(--nav-h)); min-height: calc(90dvh - var(--nav-h)); display: flex; align-items: stretch; padding: 24px 0 10px; margin-bottom: 0.3cm; overflow: hidden; }
/* halo doux en bas du hero : évite la zone trop sombre et adoucit la transition */
.hero::after {
  content: ""; position: absolute; left: 50%; bottom: -60px; transform: translateX(-50%);
  width: min(1000px, 130%); height: 420px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--acc-rgb), 0.16), rgba(232, 146, 255, 0.09) 42%, transparent 72%);
  filter: blur(40px);
}
.hero__glow {
  position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; max-width: 130vw; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, rgba(99,102,241,0.18), rgba(168,85,247,0.16), rgba(59,130,246,0.18), rgba(99,102,241,0.18));
  filter: blur(90px); opacity: 0.8; animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; width: 100%;
  animation: heroIntroIn 0.7s var(--ease) 0.1s both; }
@keyframes heroIntroIn { from { opacity: 0; } to { opacity: 1; } }
/* badge en haut, boutons en bas → le h1 se centre verticalement */
.hero__inner .badge { margin-bottom: auto; }
.hero__inner .hero__actions { margin-top: auto; }
@keyframes heroSubIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero__title { font-size: clamp(3rem, 8.4vw, 6.6rem); font-weight: 700; margin: 18px 0; letter-spacing: -0.04em; }
/* sequential entrance after the code intro: right → left → right */
.hero__title .htw { display: block; opacity: 0; will-change: transform, filter; }
/* Lancé esthétique du titre, ligne par ligne, avec une pause entre chaque */
.hero__title .htw:nth-child(1) { animation: htwLaunch 0.9s var(--ease) 0.45s both; }
.hero__title .htw:nth-child(2) { animation: htwLaunch 0.9s var(--ease) 1.05s both; }
.hero__title .htw:nth-child(3) { animation: htwLaunch 0.9s var(--ease) 1.65s both; }
@keyframes htwLaunch {
  0%   { opacity: 0; transform: translateY(0.7em) scale(0.95); filter: blur(10px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 1.8cm; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero__actions.is-in { opacity: 1; transform: none; }
/* .btn impose display:inline-flex, qui écraserait l'attribut [hidden] natif :
   cette règle garantit qu'un bouton marqué hidden disparaît réellement. */
.btn[hidden] { display: none !important; }

/* ===== Hero — deux lignes de code tapées en direct (savoir-faire dev) ===== */
.hero__codeline {
  display: inline-block; max-width: min(100%, 600px); margin: 0 auto; padding: 0;
  font-family: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(0.74rem, 2.4vw, 1.02rem); line-height: 1.5; letter-spacing: 0.01em;
  white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; color: var(--ink);
  background: none; border: none; border-radius: 0; box-shadow: none; min-height: 1.5em;
}
.hero__codeline code { font: inherit; color: inherit; }
/* ligne de code sous les boutons, descendue */
.hero__codeline--bottom {
  margin-top: 1.8cm; margin-bottom: 0;
  opacity: 0; animation: heroIntroIn .6s var(--ease) 2.8s both;
}
.code-caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: text-bottom; background: var(--acc); margin-left: 1px; box-shadow: 0 0 8px var(--acc); animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }
/* syntax colors — blue→violet identity only (+ neutral greys) */
.t-key { color: #B388FF; }   /* violet  */
.t-fn  { color: #6CB8FF; }   /* blue    */
.t-str { color: #C9B8FF; }   /* lavender */
.t-num { color: #8FB4FF; }   /* light blue */
.t-op  { color: #A98BFF; }   /* violet  */
.t-com { color: #5C6B7A; font-style: italic; }  /* grey */
.t-punc{ color: #8893A2; }   /* grey    */
.t-id  { color: #C5CEDA; }   /* light grey */



/* ===== Filters ===== */
/* Onglet principal : segmented control (créations en ligne vs templates) */
.seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  width: min(560px, 100%); margin: 0 auto 40px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
}
.seg__indicator {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); z-index: 0;
  border-radius: 999px; background: var(--grad); box-shadow: var(--glow);
  transition: transform .45s var(--ease);
}
.seg[data-active="template"] .seg__indicator { transform: translateX(100%); }
.seg__btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; color: var(--ink);
  background: none; border: none; border-radius: 999px; padding: 14px 18px; cursor: pointer;
  transition: color .35s var(--ease), opacity .35s var(--ease); white-space: nowrap;
}
/* l'onglet inactif reste bien lisible (les deux thématiques visibles) */
.seg__btn:not(.is-active) { color: var(--ink); opacity: 0.78; }
.seg__btn:not(.is-active):hover { opacity: 1; }
.seg__btn.is-active { color: var(--ink-on-acc); opacity: 1; }
/* fin séparateur entre les deux thématiques */
.seg__btn:first-of-type::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 22px; background: var(--line-strong);
  transition: opacity .35s var(--ease);
}
.seg[data-active] .seg__btn:first-of-type::after { opacity: 1; }
.seg__count {
  font-size: 0.76rem; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: var(--ink); transition: background .35s, color .35s;
}
.seg__btn.is-active .seg__count { background: rgba(255,255,255,0.28); color: var(--ink-on-acc); }

/* ===== Products grid ===== */
.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product {
  display: flex; flex-direction: column; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; position: relative;
  transition: opacity .35s var(--ease), transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.product::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .4s, opacity .4s; opacity: 0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--acc-rgb),0.12), transparent 60%);
}
.product:hover { transform: translateY(-8px); border-color: rgba(var(--acc-rgb),0.5); box-shadow: 0 30px 70px -30px rgba(var(--acc-rgb),0.45), var(--glow); }
.product:hover::after { opacity: 1; }
.product.is-hidden { opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; }
.product--featured { border-color: rgba(var(--acc-rgb),0.4); }

/* Preview thumbnail */
.product__preview {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--line); display: block;
}
.preview--a { background: linear-gradient(140deg, #16213e, #0a0f1d); }
.preview--d { background: linear-gradient(140deg, #1e1a3c, #0d0b1a); }
.preview--e { background: linear-gradient(140deg, #15203e, #0a0e1c); }
/* Real screenshot previews */
.product__preview--shot { background: #0a0f1d; cursor: zoom-in; }
.product__preview--shot::before { display: none; }
.product__preview--shot::after {
  content: "⤢ Agrandir"; position: absolute; z-index: 2; right: 14px; bottom: 14px;
  font-size: 0.72rem; font-weight: 600; color: var(--ink);
  background: rgba(5,9,12,0.6); border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.product:hover .product__preview--shot::after,
.product__preview--shot:focus-visible::after { opacity: 1; transform: none; }
.product__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  transition: transform .6s var(--ease);
}
.product:hover .product__shot { transform: scale(1.04); }
.product__preview::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 30% 20%, rgba(var(--acc-rgb),0.18), transparent 60%),
              radial-gradient(70% 60% at 80% 90%, rgba(168,85,247,0.16), transparent 60%);
}
.product__cat {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: 0.72rem; font-weight: 600; color: var(--acc);
  background: rgba(5,9,12,0.6); border: 1px solid rgba(var(--acc-rgb),0.3);
  padding: 5px 12px; border-radius: 999px; backdrop-filter: blur(8px);
}
.product__flag {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  font-size: 0.72rem; font-weight: 600; color: var(--ink-on-acc); background: var(--grad);
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--glow);
}
/* mock browser window */
.preview__window { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 1; }
.product__cat ~ .preview__window { top: 46px; }
.preview__window i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.preview__bars { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 9px; z-index: 1; }
.preview__bars span { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.1); }
.preview__bars span:nth-child(1) { width: 70%; background: rgba(var(--acc-rgb),0.5); }
.preview__bars span:nth-child(2) { width: 90%; }
.preview__bars span:nth-child(3) { width: 50%; }
.preview__grid { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; z-index: 1; }
.preview__grid span { height: 30px; border-radius: 7px; background: rgba(255,255,255,0.1); }
.preview__grid span:first-child { background: rgba(var(--acc-rgb),0.45); }

/* Product body */
.product__body { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 24px; flex: 1; }
.product__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.product__head h3 { font-size: 1.3rem; }
.product__price { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.1rem; color: var(--acc); white-space: nowrap; }
/* statut : seul le cercle passe en blanc, le texte garde sa couleur */
.product__price .status-dot { color: #fff; }
.product__body p { color: var(--muted); font-size: 0.94rem; flex: 1; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); margin-top: 4px; }

/* Rating */
.rating { display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; color: var(--muted); }
.rating__stars { position: relative; font-size: 0.9rem; letter-spacing: 1px; color: rgba(255,255,255,0.15); }
.rating__stars::before {
  content: "★★★★★"; position: absolute; top: 0; left: 0; width: var(--rate, 100%); overflow: hidden;
  color: var(--acc); white-space: nowrap;
}
.rating b { color: var(--ink); font-weight: 600; }
.rating em { font-style: normal; color: var(--muted); }

.products__empty { text-align: center; color: var(--muted); padding: 40px 0; }
.pricing__note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 36px; }

/* ===== Cards (contact) ===== */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px; }

/* ===== Contact ===== */
.contact__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.contact__perks { margin-top: 30px; display: flex; flex-direction: column; gap: 14px; }
.contact__perks li { position: relative; padding-left: 26px; color: var(--ink); font-weight: 500; }
.contact__perks li::before { content: "✓"; position: absolute; left: 0; color: var(--acc); font-weight: 700; }

/* ===== Live recap panel ===== */
.recap { margin-top: 30px; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.recap__label { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--acc); margin-bottom: 14px; }
.recap__list { display: flex; flex-direction: column; }
.recap__item { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.recap__item:last-child { border-bottom: none; }
.recap__k { position: relative; color: var(--muted); font-size: 0.9rem; flex-shrink: 0; transition: color .3s, padding .3s; }
.recap__v { color: #56666f; font-size: 0.9rem; font-weight: 500; text-align: right; transition: color .3s; }
.recap__item.is-filled .recap__k { color: var(--ink); padding-left: 20px; }
.recap__item.is-filled .recap__k::before { content: "✓"; position: absolute; left: 0; color: var(--acc); font-weight: 700; }
.recap__item.is-filled .recap__v { color: var(--ink); animation: recapPop .4s var(--ease); }
@keyframes recapPop { 0% { transform: translateY(-3px); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.recap__progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 20px; }
.recap__progress span { display: block; height: 100%; width: 0; background: var(--grad); border-radius: 999px; box-shadow: 0 0 12px rgba(var(--acc-rgb),0.5); transition: width .5s var(--ease); }
.recap__hint { display: block; margin-top: 11px; font-size: 0.82rem; color: var(--muted); }
.recap__hint b { color: var(--ink); }

/* Same premium "featured tarif" treatment on the two contact cards */
.recap, #quoteForm {
  border-color: rgba(var(--acc-rgb),0.4);
  background: linear-gradient(180deg, rgba(var(--acc-rgb),0.08), var(--bg-elev) 44%);
  box-shadow: 0 40px 90px -40px rgba(var(--acc-rgb),0.3);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.recap:hover, #quoteForm:hover {
  border-color: var(--acc);
  box-shadow: 0 48px 100px -40px rgba(var(--acc-rgb),0.45), var(--glow);
}
.contact__form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 0.98rem; color: var(--ink);
  padding: 14px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255,255,255,0.03);
  transition: border-color .25s, box-shadow .25s; resize: vertical;
}
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E929C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field select option { background: var(--bg-elev); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.15); }
.field input::placeholder, .field textarea::placeholder { color: #56666f; }
.form__status { font-size: 0.92rem; font-weight: 500; min-height: 20px; text-align: center; }
.form__status.success { color: var(--acc); }
.form__status.error { color: #ffffff; text-shadow: 0 0 12px rgba(255,255,255,0.5); }

/* ===== Pricing grid ===== */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; position: relative; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.price-card:hover { transform: translateY(-6px); border-color: rgba(var(--acc-rgb),0.5); box-shadow: 0 30px 70px -30px rgba(var(--acc-rgb),0.45), var(--glow); }
.price-card--featured {
  border-color: rgba(var(--acc-rgb),0.4);
  background: linear-gradient(180deg, rgba(var(--acc-rgb),0.08), var(--bg-elev) 42%);
  box-shadow: 0 40px 90px -40px rgba(var(--acc-rgb),0.32);
}
.price-card--featured:hover { border-color: var(--acc); }
.price-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; font-weight: 600; color: var(--ink-on-acc); white-space: nowrap;
  background: var(--grad); padding: 6px 18px; border-radius: 999px; box-shadow: var(--glow);
}
.price-card__name { font-size: 1.35rem; margin-bottom: 6px; }
.price-card__tag { color: var(--muted); font-size: 0.95rem; min-height: 46px; }
.price-card__amount { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
.price-card__from { color: var(--muted); font-size: 0.92rem; }
.price-card__amount strong { font-family: 'Space Grotesk', sans-serif; font-size: 2.6rem; font-weight: 600; color: var(--ink); }
.price-card__list { display: flex; flex-direction: column; gap: 12px; margin: 22px 0 28px; flex: 1; padding-top: 22px; border-top: 1px solid var(--line); }
.price-card__list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 0.95rem; }
.price-card__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--acc); font-weight: 700; }

/* ===== Multi-step wizard ===== */
.wizard { display: flex; flex-direction: column; gap: 14px; padding: 24px 28px; }
.wizard .field { gap: 6px; }
.wizard__head { display: flex; flex-direction: column; gap: 8px; }
.wizard__steps { display: flex; justify-content: space-between; gap: 8px; }
.wstep { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 500; color: var(--muted); transition: color .3s; }
.wstep b {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  font-size: 0.76rem; font-weight: 600; background: rgba(255,255,255,0.05);
  border: 1px solid var(--line); color: var(--muted); transition: background .3s, color .3s, border-color .3s, box-shadow .3s;
}
.wstep.is-active { color: var(--ink); }
.wstep.is-active b { background: var(--grad); color: var(--ink-on-acc); border-color: transparent; box-shadow: var(--glow); }
.wstep.is-done b { background: rgba(var(--acc-rgb),0.18); color: var(--acc); border-color: rgba(var(--acc-rgb),0.4); }
.wizard__bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.wizard__bar span { display: block; height: 100%; width: 33.33%; border-radius: 999px; background: var(--grad); transition: width .5s var(--ease); }

.wpanel { display: none; flex-direction: column; gap: 10px; }
.wpanel.is-current { display: flex; animation: wpanelIn .45s var(--ease); }
@keyframes wpanelIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

.wizard__q { font-size: 1.05rem; font-weight: 600; margin-top: 4px; }
/* extra space above a question that follows a field (ex. "Quelles fonctionnalités") */
.wpanel .field + .wizard__q { margin-top: 16px; }
.wizard__q small { font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-left: 6px; }

.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* asymmetric bento layout: first two tiles wide on top, four below */
.opt-grid--feat { grid-template-columns: repeat(4, 1fr); }
.opt-grid--feat .opt:nth-child(1), .opt-grid--feat .opt:nth-child(2) { grid-column: span 2; }
.opt {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left;
  padding: 18px; border-radius: 16px; cursor: pointer; min-height: 96px;
  font-family: inherit; font-size: 0.95rem; font-weight: 600; color: var(--ink);
  background: var(--bg-card); border: 1px solid var(--line);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s;
}
.opt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(120% 80% at 50% 0%, rgba(var(--acc-rgb),0.14), transparent 60%);
}
.opt:hover { transform: translateY(-4px); border-color: rgba(var(--acc-rgb),0.4); box-shadow: 0 22px 50px -30px rgba(var(--acc-rgb),0.45); }
.opt:hover::after { opacity: 1; }
.opt__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.3rem; line-height: 1;
  background: rgba(var(--acc-rgb),0.1); border: 1px solid rgba(var(--acc-rgb),0.22); transition: background .35s, transform .35s var(--ease);
}
.opt:hover .opt__ico { transform: translateY(-2px); }
.opt.is-selected {
  border-color: var(--acc);
  background: linear-gradient(155deg, rgba(var(--acc-rgb),0.14), var(--bg-card) 60%);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.14), 0 20px 46px -28px rgba(var(--acc-rgb),0.5);
}
.opt.is-selected .opt__ico { background: rgba(var(--acc-rgb),0.22); }
/* budget & timeline cards: compact, centred (no icon) */
.opt-grid:not(.opt-grid--feat) .opt { min-height: 56px; align-items: center; justify-content: center; text-align: center; font-weight: 500; }
/* Choix « prise de contact » : 2 cartes égales avec icône */
.opt-grid--pair { grid-template-columns: 1fr 1fr; }
.opt-grid.opt-grid--pair .opt { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; min-height: 60px; padding: 12px 16px; gap: 14px; font-weight: 600; }
.opt-grid--pair .opt--wide { grid-column: 1 / -1; }
.opt__ico svg { width: 22px; height: 22px; }
.opt-grid--pair .opt__ico { width: 38px; height: 38px; border-radius: 11px; }
.opt-grid--pair .opt__ico svg { width: 20px; height: 20px; }
/* Ligne de réassurance sous le CTA du formulaire de devis */
.form-trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 12px 0 0; padding: 0; }
.form-trust li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.form-trust li::before { content: "✓"; color: var(--ok); font-weight: 700; font-size: 0.85rem; }
/* Créneau de rendez-vous */
.rdv-fields { margin-top: 16px; animation: heroSubIn .4s var(--ease) both; }
.rdv-hint { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }

/* ===== Sélecteur de rendez-vous moderne (calendrier + créneaux) ===== */
.rdvpick__wrap { position: relative; }
.rdvpick__trigger {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--ink); font: inherit; font-size: 0.98rem;
  transition: border-color .25s, box-shadow .25s;
}
.rdvpick__trigger:hover { border-color: var(--acc); }
.rdvpick__trigger.is-open { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.18); }
.rdvpick__cal-ico { width: 20px; height: 20px; color: var(--acc); flex: none; }
.rdvpick__trigger span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdvpick__trigger span.is-placeholder { color: var(--muted); }
.rdvpick__chev { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .3s var(--ease); }
.rdvpick__trigger.is-open .rdvpick__chev { transform: rotate(180deg); }

.rdvpick {
  position: relative; margin-top: 10px; width: min(340px, 100%);
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 16px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6); padding: 16px;
  animation: rdvPop .25s var(--ease) both;
}
@keyframes rdvPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rdvpick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rdvpick__month { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.98rem; color: var(--ink); text-transform: capitalize; }
.rdvpick__nav {
  width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
  transition: border-color .25s, color .25s, background .25s;
}
.rdvpick__nav:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
.rdvpick__nav:disabled { opacity: 0.3; cursor: not-allowed; }
.rdvpick__nav svg { width: 18px; height: 18px; }
.rdvpick__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.rdvpick__dow span { text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 0; }
.rdvpick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.rdvpick__day {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer; font-size: 0.9rem;
  border: 1px solid transparent; border-radius: 9px; color: var(--ink); background: transparent;
  transition: background .2s, color .2s, border-color .2s;
}
.rdvpick__day:hover:not(:disabled):not(.is-selected) { background: rgba(var(--acc-rgb),0.14); }
.rdvpick__day.is-today { border-color: var(--line-strong); }
.rdvpick__day.is-selected { background: var(--grad); color: var(--ink-on-acc); font-weight: 600; border-color: transparent; }
.rdvpick__day:disabled, .rdvpick__day.is-empty { color: var(--muted); opacity: 0.3; cursor: default; pointer-events: none; }
.rdvpick__times { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rdvpick__times-label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px; }
.rdvpick__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 138px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: rgba(var(--acc-rgb),0.55) transparent; }
.rdvpick__slots::-webkit-scrollbar { width: 8px; }
.rdvpick__slots::-webkit-scrollbar-track { background: transparent; margin: 2px 0; }
.rdvpick__slots::-webkit-scrollbar-thumb { background: linear-gradient(var(--acc), var(--acc-2)); border-radius: 999px; border: 2px solid var(--bg-elev); }
.rdvpick__slots::-webkit-scrollbar-thumb:hover { background: var(--acc); }
.rdvpick__slot {
  cursor: pointer; padding: 8px 4px; text-align: center; font-size: 0.85rem; font-weight: 500;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.rdvpick__slot:hover:not(.is-selected) { border-color: var(--acc); color: var(--acc); }
.rdvpick__slot.is-selected { background: var(--grad); color: var(--ink-on-acc); border-color: transparent; font-weight: 600; }

/* ===== Menu déroulant maison (type de projet) ===== */
.mselect { position: relative; }
.mselect__native { display: none; }
.mselect__trigger {
  width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 14px 16px; color: var(--ink); font: inherit; font-size: 0.98rem;
  transition: border-color .25s, box-shadow .25s;
}
.mselect__trigger:hover { border-color: var(--acc); }
.mselect__trigger.is-open { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.18); }
.mselect__value { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mselect__value.is-placeholder { color: var(--muted); }
.mselect__chev { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform .3s var(--ease); }
.mselect__trigger.is-open .mselect__chev { transform: rotate(180deg); color: var(--acc); }
.field.has-error .mselect__trigger { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 0 16px rgba(255,255,255,0.35); }
.mselect__menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 6px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,0.6);
  max-height: 300px; overflow-y: auto;
  animation: rdvPop .22s var(--ease) both;
  scrollbar-width: thin; scrollbar-color: rgba(var(--acc-rgb),0.55) transparent;
}
.mselect__menu::-webkit-scrollbar { width: 8px; }
.mselect__menu::-webkit-scrollbar-track { background: transparent; margin: 2px 0; }
.mselect__menu::-webkit-scrollbar-thumb { background: linear-gradient(var(--acc), var(--acc-2)); border-radius: 999px; border: 2px solid var(--bg-elev); }
.mselect__opt {
  padding: 12px 14px; border-radius: 10px; cursor: pointer; color: var(--ink); font-size: 0.96rem;
  border: 1px solid transparent; transition: background .18s, color .18s, border-color .18s; outline: none;
}
.mselect__opt:hover, .mselect__opt:focus-visible { background: rgba(var(--acc-rgb),0.14); color: var(--acc); }
.mselect__opt.is-selected { background: var(--grad); color: var(--ink-on-acc); font-weight: 600; }

.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.86rem; font-weight: 500; color: var(--muted);
  background: rgba(255,255,255,0.025); border: 1px solid var(--line); transition: color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.chip:hover { color: var(--ink); border-color: var(--line-strong); }
.chip.is-selected { color: var(--ink-on-acc); background: var(--grad); border-color: transparent; box-shadow: var(--glow); }

.wizard__nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; margin-top: 16px; padding-top: 16px; padding-bottom: 0; border-top: 1px solid var(--line); }
.wizard__nav .btn { min-width: 132px; }
/* Le CTA principal ne se laisse jamais rétrécir/rogner ; il grandit pour occuper la place. */
.wizard__nav .btn--primary { flex: 1 1 auto; flex-shrink: 0; }

/* validation errors */
.opt-grid.has-error, .chip-grid.has-error { outline: 1.5px solid #ffffff; outline-offset: 8px; border-radius: 16px; box-shadow: 0 0 18px rgba(255,255,255,0.45); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 0 16px rgba(255,255,255,0.35); }
/* Rendez-vous demandé sans date : le sélecteur maison échappe à la validation du navigateur */
.has-error .rdvpick__trigger { border-color: #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.22), 0 0 16px rgba(255,255,255,0.35); }
@media (max-width: 560px) {
  .opt-grid, .opt-grid--feat { grid-template-columns: 1fr 1fr; }
  .opt-grid--pair { grid-template-columns: 1fr; }
  .opt-grid--feat .opt:nth-child(1), .opt-grid--feat .opt:nth-child(2) { grid-column: auto; }
  .wstep { font-size: 0; gap: 0; }
  .wstep b { font-size: 0.76rem; }
  /* Boutons empilés pleine largeur : plus aucun risque de libellé rogné (CTA au-dessus). */
  .wizard__nav { flex-direction: column-reverse; gap: 10px; }
  .wizard__nav .btn { width: 100%; min-width: 0; }
}

/* ===== Thank-you overlay ===== */
.thanks {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.thanks.is-open { opacity: 1; visibility: visible; }
.thanks__backdrop { position: absolute; inset: 0; background: rgba(3,5,8,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.thanks__card {
  position: relative; z-index: 1; width: min(480px, 100%); text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 46px 38px; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.85), var(--glow);
  transform: translateY(24px) scale(0.96); transition: transform .55s var(--ease);
}
.thanks.is-open .thanks__card { transform: none; }
.thanks__check {
  width: 88px; height: 88px; margin: 0 auto 24px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(var(--acc-rgb),0.12); border: 1px solid rgba(var(--acc-rgb),0.3);
}
.thanks__check svg { width: 54px; height: 54px; }
.thanks__check-circle { stroke: var(--acc); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; }
.thanks__check-mark { stroke: var(--acc); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44; stroke-dashoffset: 44; }
.thanks.is-open .thanks__check-circle { animation: thxCircle .6s var(--ease) .15s forwards; }
.thanks.is-open .thanks__check-mark { animation: thxMark .35s var(--ease) .7s forwards; }
@keyframes thxCircle { to { stroke-dashoffset: 0; } }
@keyframes thxMark { to { stroke-dashoffset: 0; } }
.thanks__title { font-size: clamp(1.6rem, 4vw, 2rem); margin-bottom: 12px; }
.thanks__text { color: var(--muted); margin-bottom: 30px; }
.thanks__text strong { color: var(--ink); }

/* ===== Skills (Nos compétences) ===== */
.skills { position: relative; overflow: hidden; }
.skills__decor {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 40% at 12% 8%, rgba(232,146,255,0.10), transparent 60%),
    radial-gradient(46% 42% at 88% 92%, rgba(108,184,255,0.10), transparent 60%);
}
.skills .container { position: relative; z-index: 1; }

.skills__grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px; align-items: stretch; margin-top: 16px;
}
.skills__amp {
  align-self: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.skill-pillar {
  position: relative; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px 32px; overflow: hidden;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.skill-pillar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.skill-pillar--design::before { background: linear-gradient(90deg, var(--acc-2), var(--acc)); }
.skill-pillar--dev::before { background: linear-gradient(90deg, var(--acc-3), var(--acc)); }
.skill-pillar:hover { transform: translateY(-6px); border-color: rgba(var(--acc-rgb),0.5); box-shadow: 0 40px 90px -45px rgba(var(--acc-rgb),0.5); }

.skill-pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.skill-pillar__num { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--muted); letter-spacing: 0.12em; }
.skill-pillar__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.skill-pillar__ico svg { width: 26px; height: 26px; }
.skill-pillar--design .skill-pillar__ico { background: rgba(232,146,255,0.12); border: 1px solid rgba(232,146,255,0.3); color: var(--acc-2); }
.skill-pillar--dev .skill-pillar__ico { background: rgba(108,184,255,0.12); border: 1px solid rgba(108,184,255,0.3); color: var(--acc-3); }
.skill-pillar__title { font-size: 1.5rem; margin-bottom: 8px; }
.skill-pillar__intro { color: var(--muted); margin-bottom: 24px; font-size: 0.95rem; }

.skill-list { display: flex; flex-direction: column; gap: 16px; }
.skill-item { display: flex; gap: 14px; align-items: flex-start; }
.skill-item__ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s;
}
.skill-item__ico svg { width: 19px; height: 19px; }
.skill-pillar--design .skill-item__ico { color: var(--acc-2); }
.skill-pillar--dev .skill-item__ico { color: var(--acc-3); }
.skill-item:hover .skill-item__ico { border-color: currentColor; transform: translateY(-2px) scale(1.05); background: rgba(255,255,255,0.06); }
.skill-item h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; font-weight: 600; margin-bottom: 3px; }
.skill-item p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* Signature : storytelling + mobile */
.manifesto {
  position: relative; max-width: 760px; margin: 64px auto 0; padding: 40px 38px; text-align: center;
  background: linear-gradient(180deg, rgba(var(--acc-rgb), 0.07), var(--bg-card) 64%);
  border: 1px solid rgba(var(--acc-rgb), 0.22); border-radius: var(--radius);
}
.manifesto__eyebrow { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.05em; color: var(--acc); margin-bottom: 14px; }
.manifesto__title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 18px; }
.manifesto__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.7; max-width: 620px; margin: 0 auto; }
.manifesto__lead + .manifesto__lead { margin-top: 14px; }
.manifesto__lead strong { color: var(--ink); }

/* Stack technos */
.stack { margin-top: 44px; text-align: center; }
.stack__label { font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--acc); margin-bottom: 18px; }
/* Ruban défilant continu (droite → gauche), boucle sans couture */
.marquee {
  position: relative; display: flex; width: 100%; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.marquee__group {
  display: flex; align-items: center; flex-shrink: 0; min-width: max-content;
  animation: marquee-scroll 46s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__group { animation-play-state: paused; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.marquee__item {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; white-space: nowrap; cursor: default;
  font-size: clamp(1.05rem, 2.4vw, 1.55rem); letter-spacing: -0.01em;
  color: var(--muted); padding: 0 26px; transition: color .35s var(--ease), transform .35s var(--ease);
}
.marquee__item:hover { color: var(--ink); transform: translateY(-2px); }
.marquee__sep {
  font-size: 0.6em; line-height: 1; opacity: 0.85;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .marquee__group { animation: none; }
  .marquee { overflow-x: auto; }
  .marquee::-webkit-scrollbar { display: none; }
}

/* CTA bas de section */
.skills__cta { margin-top: 46px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.skills__cta p { color: var(--ink); font-size: 1.12rem; font-family: 'Space Grotesk', sans-serif; }

@media (max-width: 900px) {
  .skills__grid { grid-template-columns: 1fr; gap: 18px; }
  .skills__amp { padding: 2px 0; }
}

/* ===== Contact direct (tél + WhatsApp) ===== */
.contact__direct { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.contact__method {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact__method:hover { border-color: rgba(var(--acc-rgb),0.6); transform: translateY(-3px); box-shadow: 0 20px 50px -28px rgba(var(--acc-rgb),0.5); }
.contact__method-ico {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(var(--acc-rgb),0.12); border: 1px solid rgba(var(--acc-rgb),0.3); color: var(--acc);
}
.contact__method-ico svg { width: 22px; height: 22px; }
.contact__method-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.contact__method-txt small { color: var(--muted); font-size: 0.78rem; }
.contact__method-txt strong { color: var(--ink); font-size: 1.02rem; font-family: 'Space Grotesk', sans-serif; }
.contact__method--wa .contact__method-ico { background: rgba(37,211,102,0.14); border-color: rgba(37,211,102,0.4); color: #25d366; }
.contact__method--wa:hover { border-color: rgba(37,211,102,0.6); box-shadow: 0 20px 50px -28px rgba(37,211,102,0.5); }
@media (max-width: 480px) { .contact__direct { grid-template-columns: 1fr; } }

/* Footer NAP */
.footer__contact { margin-top: 12px; font-size: 0.95rem; }
.footer__contact a { color: var(--ink); font-weight: 600; font-family: 'Space Grotesk', sans-serif; transition: color .3s; }
.footer__contact a:hover { color: var(--acc); }
.footer__area { color: var(--muted); font-size: 0.86rem; }

/* ===== Bouton flottant appel ===== */
.fab-call {
  position: fixed; right: 20px; bottom: 20px; z-index: 350;
  display: inline-flex; align-items: center; gap: 0; overflow: hidden;
  height: 56px; padding: 0; width: 56px; border-radius: 999px;
  background: var(--grad); color: var(--ink-on-acc); box-shadow: 0 14px 36px -10px rgba(var(--acc-rgb),0.6), var(--glow);
  transition: width .4s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.fab-call svg { width: 24px; height: 24px; flex-shrink: 0; margin: 0 16px; }
.fab-call__label { white-space: nowrap; font-weight: 600; font-size: 0.95rem; padding-right: 20px; opacity: 0; transition: opacity .3s var(--ease); }
.fab-call:hover { width: 192px; transform: translateY(-2px); }
.fab-call:hover .fab-call__label { opacity: 1; }
.fab-call.is-open { width: 210px; }
.fab-call.is-open .fab-call__label { opacity: 1; }
@media (max-width: 600px) { .fab-call { width: 56px !important; } .fab-call__label { display: none; } }
@media print { .fab-call { display: none; } }

/* ===== Navbar : actions (compte + panier) ===== */
.nav__actions { display: flex; align-items: center; gap: 18px; }
/* Bouton « Se connecter » — pilule sobre façon Linear */
.nav__login {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong);
  color: var(--ink); font: inherit; font-weight: 500; font-size: 0.92rem; white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s, transform .25s var(--ease);
}
.nav__login:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(var(--acc-rgb), 0.55); transform: translateY(-1px); }
.nav__login:active { transform: translateY(0); }
/* ===== Modale connexion / compte ===== */
.auth { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s; }
.auth.is-open { opacity: 1; visibility: visible; }
.auth__backdrop { position: absolute; inset: 0; background: rgba(3,5,8,0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.auth__card {
  position: relative; z-index: 1; width: min(430px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 30px 30px; box-shadow: 0 40px 120px -30px rgba(0,0,0,0.85), var(--glow);
  transform: translateY(20px) scale(0.97); transition: transform .5s var(--ease);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.auth__card::-webkit-scrollbar { width: 7px; }
.auth__card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 999px; }
.auth__card::-webkit-scrollbar-track { background: transparent; }
.auth.is-open .auth__card { transform: none; }
.auth__close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  transition: border-color .3s, color .3s; flex-shrink: 0;
}
.auth__close:hover { border-color: var(--acc); color: var(--acc); }
.auth__brand { display: inline-flex; align-items: center; gap: 10px; }
.auth__brand .logo__text { font-size: 1.2rem; }
.auth__title { font-size: 1.28rem; margin: 10px 0 14px; }
.auth__tabs { display: flex; gap: 6px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 16px; }
.auth__tab { flex: 1; padding: 9px; border: none; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 0.92rem; border-radius: 999px; cursor: pointer; transition: color .3s, background .3s; }
.auth__tab.is-active { color: var(--ink-on-acc); background: var(--grad); }
.auth__form { display: none; flex-direction: column; gap: 13px; }
.auth__form.is-current { display: flex; }
/* Champs compacts, spécifiques à la modale (n'affecte pas le formulaire de devis) */
.auth__form .field { gap: 5px; }
.auth__form .field input { padding: 11px 14px; font-size: 0.95rem; }
/* Préserve la place du bouton œil (pw-toggle.js) sur les champs mot de passe */
.auth__form .pw-wrap > input { padding-right: 44px; }
.field__hint { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--muted); line-height: 1.4; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.86rem; margin-top: -4px; }
.auth__check { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.auth__check input { width: 16px; height: 16px; accent-color: var(--acc); }
.auth__check--terms { align-items: flex-start; gap: 10px; font-size: 0.82rem; line-height: 1.45; text-align: left; }
.auth__check--terms input { margin-top: 2px; flex: 0 0 auto; }
.auth__check--terms a { color: var(--acc); }
/* Explication remplaçant les champs mot de passe à l'inscription */
.auth__hint { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); text-align: left; }
/* Messages de la modale (erreur / succès) */
.auth__error, .auth__ok { border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; line-height: 1.45; margin: 0; }
.auth__error { background: rgba(255,138,138,0.12); border: 1px solid rgba(255,138,138,0.4); color: #ffb4b4; }
.auth__ok { background: rgba(94,233,181,0.10); border: 1px solid rgba(94,233,181,0.38); color: var(--ok); text-align: center; }
.auth__link { color: var(--acc); }
.auth__link:hover { text-decoration: underline; }
.auth__account { display: none; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.auth__account.is-current { display: flex; }
.auth__avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--ink-on-acc); font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.6rem; margin-bottom: 8px; text-transform: uppercase; }
.auth__welcome { font-size: 1.1rem; }
.auth__welcome-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; }
.auth__account .btn { margin-top: 4px; }
.auth__legal { color: var(--muted); font-size: 0.78rem; text-align: center; margin-top: 18px; line-height: 1.5; }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); z-index: 600;
  display: inline-flex; align-items: center; gap: 10px; max-width: 90vw;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 13px 22px; color: var(--ink); font-weight: 500; font-size: 0.92rem;
  box-shadow: 0 20px 50px -18px rgba(0,0,0,0.7), var(--glow);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast__ico { color: var(--acc); display: inline-flex; }
.toast__ico svg { width: 18px; height: 18px; }

/* ===== Lightbox (aperçu réalisations) ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__backdrop {
  position: absolute; inset: 0; cursor: zoom-out;
  background: rgba(3,5,8,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.lightbox__figure {
  position: relative; z-index: 1; margin: 0;
  max-width: min(1100px, 92vw); display: flex; flex-direction: column; gap: 14px;
  transform: translateY(18px) scale(0.97); transition: transform .45s var(--ease);
}
.lightbox.is-open .lightbox__figure { transform: none; }
.lightbox__img {
  display: block; max-width: 100%; max-height: 80vh; object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,0.85), var(--glow); background: #0a0f1d;
}
.lightbox__cap { text-align: center; color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.lightbox__close {
  position: absolute; top: -16px; right: -16px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; font-size: 1rem; color: var(--ink);
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.7); transition: border-color .3s, color .3s, transform .3s;
}
.lightbox__close:hover { border-color: var(--acc); color: var(--acc); transform: scale(1.08); }

/* ===== Footer ===== */
.footer {
  position: relative; z-index: 1; padding-top: 88px; border-top: 1px solid var(--line);
  background:
    radial-gradient(120% 95% at 12% 115%, rgba(169,139,255,0.12), transparent 55%),
    radial-gradient(110% 90% at 92% -10%, rgba(232,146,255,0.09), transparent 55%),
    var(--bg);
}
.footer__cta { display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; padding: 24px 0 88px; }
.footer__big { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 600; flex: 1 1 300px; }

/* Colonnes du footer (sous le trait) */
.footer__main {
  display: grid; grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1fr; gap: 40px;
  padding: 48px 0 44px; border-top: 1px solid var(--line);
}
.footer__col-more { color: var(--acc) !important; font-weight: 600; margin-top: 4px; }
.footer__brand { max-width: 320px; }
.footer__tagline { color: var(--muted); margin-top: 16px; font-size: 0.95rem; line-height: 1.6; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.footer__col > a { color: var(--muted); font-weight: 500; font-size: 0.95rem; width: fit-content; transition: color .25s, transform .25s; }
.footer__col > a:hover { color: var(--acc); transform: translateX(3px); }
.footer__social { display: flex; gap: 12px; }
.footer__social a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--ink); transition: transform .3s var(--ease), border-color .3s, color .3s, box-shadow .3s; }
.footer__social a:hover { transform: translateY(-4px); color: var(--acc); border-color: var(--acc); box-shadow: var(--glow); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.86rem; }

/* ===== Process (après la demande) — timeline verticale ===== */
.process__list { list-style: none; max-width: 760px; margin: 8px auto 0; padding: 0; position: relative; }
/* fil vertical connecteur */
.process__list::before {
  content: ""; position: absolute; left: 23px; top: 12px; bottom: 28px; width: 2px;
  background: linear-gradient(var(--acc), rgba(var(--acc-rgb), 0.12));
  border-radius: 2px;
}
.process__step { position: relative; display: flex; align-items: flex-start; gap: 22px; padding: 12px 0; }
.process__num {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--ink-on-acc); background: var(--grad); box-shadow: var(--glow);
}
.process__body { padding-top: 5px; }
.process__title { font-size: 1.12rem; margin-bottom: 4px; }
.process__title small { font-weight: 400; font-size: 0.82rem; color: var(--muted); }
.process__body p { color: var(--muted); font-size: 0.96rem; line-height: 1.6; }
.process__body strong { color: var(--ink); }
/* étape finale mise en valeur */
.process__step--final .process__num { font-size: 1.3rem; box-shadow: 0 0 0 4px rgba(var(--acc-rgb), 0.16), var(--glow); }
.process__step--final .process__title { color: var(--ink); }

/* ===== Reveal animation ===== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE — laptops · tablets · phones
   ============================================================ */

/* ---- Laptops / small desktops (≤ 1180px) ---- */
@media (max-width: 1180px) {
  .container { max-width: 100%; }
  .section { padding: 96px 0; }
  .products { gap: 20px; }
}

/* ---- Tablets landscape / small laptops (≤ 980px) ---- */
@media (max-width: 980px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Tablets (≤ 920px): collapse nav to burger ---- */
@media (max-width: 920px) {
  :root { --nav-h: 71px; }
  .nav__links, .nav__cta { display: none; }
  /* Header mobile épuré : logo + burger. La connexion reste accessible dans le menu. */
  .nav__actions { display: none; }
  .nav__inner { min-width: 0; }
  .logo { min-width: 0; }
  .nav__burger { display: flex; margin-left: auto; flex-shrink: 0; }
  .nav__mobile { display: flex; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .section { padding: 84px 0; }
  .hero { padding: 24px 0; }
}

/* ---- Large phones / small tablets (≤ 720px) ---- */
@media (max-width: 720px) {
  .seg { width: 100%; }
  .seg__btn { padding: 13px 8px; font-size: 0.9rem; gap: 6px; }
  .seg__count { font-size: 0.72rem; padding: 3px 7px; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

/* ---- Phones (≤ 640px) ---- */
@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .section { padding: 72px 0; }
  .products { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* hero mobile : même logique que desktop (-150px) → laisse entrevoir « Nos réalisations » sous le pli */
  .hero { min-height: calc(82svh - var(--nav-h)); padding: 28px 0 20px; }
  .badge { font-size: 0.62rem; letter-spacing: 0.05em; padding: 8px 16px; margin-bottom: 16px; white-space: normal; line-height: 1.4; max-width: 300px; overflow-wrap: anywhere; }
  /* Contenu du hero centré verticalement en mobile (au lieu d'être tassé en bas). */
  .hero__inner { justify-content: center; }
  .hero__inner .badge { margin-bottom: 34px; }
  .hero__inner .hero__actions { margin-top: 46px; }
  .hero__codeline { font-size: 0.72rem; padding: 8px 12px; }
  .hero__title { font-size: clamp(1.9rem, 7.8vw, 3rem); margin: 30px 0 34px; line-height: 1.12; }
  /* boutons côte à côte, largeur égale, taille réduite pour tenir sur une ligne */
  .hero__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: auto; max-width: 100%; margin-inline: auto; margin-top: 0.9cm; }
  .hero__codeline--bottom { margin-top: 0.9cm; }
  .hero__actions .btn { flex: 0 0 auto; white-space: nowrap; padding: 12px 26px; font-size: 0.92rem; }
  .field-row { grid-template-columns: 1fr; }
  .card { padding: 26px 22px; }
  .manifesto { padding: 30px 22px; margin-top: 48px; }
  .manifesto__lead { font-size: 1rem; }
  .process__step { gap: 16px; }
  .process__num { width: 42px; height: 42px; font-size: 0.95rem; }
  .process__list::before { left: 20px; }
  .process__title { font-size: 1.05rem; }
  .footer__cta { flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 72px; }
  .footer__main { gap: 30px 20px; }
  .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* ---- Small phones (≤ 400px) ---- */
@media (max-width: 400px) {
  .container { padding-inline: 16px; }
  .hero__title { font-size: clamp(1.65rem, 7.6vw, 2.2rem); }
  .badge { font-size: 0.72rem; letter-spacing: 0.03em; padding: 9px 13px; }
  .hero__actions { gap: 8px; }
  .hero__actions .btn { padding: 11px 22px; font-size: 0.88rem; }
  .product__head h3 { font-size: 1.2rem; }
  .product__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .product__foot .btn { width: 100%; }
  .footer__social { width: 100%; }
  /* Modale espace client compacte */
  .auth { padding: 14px; }
  .auth__card { padding: 26px 20px; max-height: 94vh; }
  .auth__title { font-size: 1.25rem; }
  .auth__tab { font-size: 0.84rem; padding: 9px 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__title .htw { opacity: 1; transform: none; }
  .thanks__check-circle, .thanks__check-mark { stroke-dashoffset: 0; }
}

/* ============================================================
   FAQ (référencement local)
   ============================================================ */
.faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq__group {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc);
  display: flex; align-items: center; gap: 12px; margin: 26px 0 2px;
}
.faq__group:first-child { margin-top: 0; }
.faq__group::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--grad); flex: none; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev);
  overflow: hidden; transition: border-color .25s, box-shadow .25s;
}
.faq__item[open] { border-color: rgba(var(--acc-rgb),0.5); box-shadow: 0 18px 46px -30px rgba(var(--acc-rgb),0.55); }
.faq__q {
  cursor: pointer; list-style: none; padding: 20px 22px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  text-wrap: balance;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; font-size: 1.6rem; line-height: 1; color: var(--acc); transition: transform .25s; flex: none; }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__q:hover { color: var(--acc); }
.faq__a { padding: 0 22px 22px; color: var(--muted); line-height: 1.72; font-size: 1rem; }
.faq__a p { margin: 0; }
.faq__a strong { color: var(--ink); font-weight: 600; }
.faq__map { margin-top: 18px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
.faq__map iframe { display: block; width: 100%; height: 320px; border: 0; }

/* ============================================================
   PAGES JURIDIQUES (mentions légales · CGV · confidentialité)
   ============================================================ */
.legal-nav {
  position: sticky; top: 0; z-index: 100; background: rgba(10,15,29,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.legal-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.legal {
  position: relative; z-index: 1;
  padding: 60px 0 90px;
}
.legal .container { max-width: 860px; }
.legal__back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; margin-bottom: 26px; transition: color .25s; }
.legal__back:hover { color: var(--acc); }
.legal__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; }
.legal__updated { color: var(--muted); margin-top: 12px; font-size: 0.9rem; }
.legal__intro { color: var(--muted); margin-top: 18px; line-height: 1.7; }
.legal__content { margin-top: 12px; }
.legal__content h2 {
  font-size: 1.3rem; margin: 46px 0 14px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal__content h2:first-of-type { border-top: none; padding-top: 0; }
.legal__content h3 { font-size: 1.05rem; margin: 26px 0 10px; color: var(--ink); }
.legal__content p { color: var(--muted); line-height: 1.75; margin-bottom: 12px; }
.legal__content ul { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.legal__content li { position: relative; padding-left: 22px; color: var(--muted); line-height: 1.7; }
.legal__content li::before { content: "—"; position: absolute; left: 0; color: var(--acc); }
.legal__content a { color: var(--acc); }
.legal__content a:hover { text-decoration: underline; }
.legal__content strong { color: var(--ink); }
/* Champ à compléter — bien visible */
.fill {
  display: inline-block; color: var(--acc); background: rgba(var(--acc-rgb),0.12);
  border: 1px dashed rgba(var(--acc-rgb),0.55); border-radius: 6px;
  padding: 0 8px; font-weight: 600; font-size: 0.92em;
}
.legal-footer {
  border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: 0.88rem;
}
.legal-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.legal-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.legal-footer__links a { color: var(--muted); transition: color .25s; }
.legal-footer__links a:hover { color: var(--acc); }
@media (max-width: 600px) {
  .legal-nav .btn { padding: 9px 14px; font-size: 0.82rem; }
  .legal { padding: 40px 0 70px; }
}

/* ============================================================
   JOURNAL — hub + articles (blog SEO)
   ============================================================ */
.journal { position: relative; z-index: 1; padding: 48px 0 96px; }
.journal .container { max-width: 1120px; }

/* Lien retour — pastille élégante */
.journal .article__back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 34px;
  padding: 9px 18px; border-radius: 999px; background: var(--bg-elev);
  border: 1px solid var(--line-strong); color: var(--ink); font-weight: 500; font-size: 0.9rem;
  transition: border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.journal .article__back:hover { border-color: var(--acc); color: var(--acc); transform: translateX(-3px); box-shadow: 0 6px 20px -12px rgba(var(--acc-rgb),0.6); }

/* En-tête éditorial centré et premium */
.journal__head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.journal__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 8px 17px; border-radius: 999px;
  border: 1px solid rgba(var(--acc-rgb),0.38); background: rgba(var(--acc-rgb),0.08);
  font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc);
}
.journal__eyebrow::before { content: "✦"; font-size: 0.82rem; line-height: 1; }
.journal__title { font-size: clamp(2.2rem, 5.6vw, 3.6rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.02em; }
.journal__lead { color: var(--muted); margin: 20px auto 0; font-size: 1.08rem; line-height: 1.75; max-width: 660px; }

/* Chips thématiques (page d'accueil du Journal) */
.journal__topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.journal__topic {
  font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--muted);
  transition: color .25s, border-color .25s, transform .25s, background .25s;
}
.journal__topic:hover { color: var(--ink-on-acc); background: var(--grad); border-color: transparent; transform: translateY(-2px); box-shadow: var(--glow); }

/* Barre de filtres par thème */
.journal__filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0 auto 46px; max-width: 960px; }
.journal__filter button {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.86rem; font-weight: 500;
  padding: 9px 15px 9px 17px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--muted);
  transition: color .22s, border-color .22s, background .22s, transform .2s, box-shadow .22s;
}
.journal__filter button:hover {
  color: var(--ink); border-color: rgba(var(--acc-rgb),0.55);
  transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(var(--acc-rgb),0.85);
}
.journal__filter button .n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 20px; padding: 0 6px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1;
  background: rgba(var(--acc-rgb),0.14); color: var(--acc);
  transition: background .22s, color .22s;
}
.journal__filter button:hover .n { background: rgba(var(--acc-rgb),0.22); }
.journal__filter button.is-active {
  color: var(--ink-on-acc); background: var(--grad); border-color: transparent;
  box-shadow: var(--glow); transform: translateY(-1px);
}
.journal__filter button.is-active .n { background: rgba(255,255,255,0.24); color: #fff; }
.journal__empty { text-align: center; color: var(--muted); padding: 46px 0; font-size: 1.02rem; }
/* vignettes uniformes dans la grille filtrée */
#journalFiltered .jcard__thumb { height: 190px; }

.journal__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.jcard {
  display: flex; flex-direction: column; background: var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 30px 26px;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; position: relative; overflow: hidden;
}
.jcard::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--acc-rgb),0.10), transparent 60%);
}
.jcard:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 26px 60px -30px rgba(var(--acc-rgb),0.5); }
.jcard:hover::before { opacity: 1; }
.jcard--feature { grid-column: 1 / -1; }
.jcard__tag {
  align-self: flex-start; font-family: 'Space Grotesk', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-acc); background: var(--grad);
  padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; position: relative; z-index: 1;
}
.jcard__title { font-size: 1.34rem; font-weight: 600; line-height: 1.25; position: relative; z-index: 1; }
.jcard--feature .jcard__title { font-size: clamp(1.5rem, 3.2vw, 2rem); }
/* Miniature d'image sur la carte de lecture */
.jcard__thumb { position: relative; z-index: 1; width: 100%; height: 190px; object-fit: cover; object-position: center; border-radius: var(--radius-sm); border: 1px solid var(--line); margin-bottom: 20px; }
/* variante : cadrage sur le monument (dôme de la Grave, ~28 % de la hauteur) */
.jcard__thumb--top { object-position: center 28%; }
/* variante : image affichée en entier (contain), fond noir qui se fond avec l'image */
.jcard__thumb--contain { object-fit: cover; object-position: center; }
/* variante : fusée qui remplit la carte, cadrée du nez jusqu'aux ailerons (peu de bas) */
.jcard__thumb--rocket { object-fit: cover; height: 240px; object-position: center 25%; }
/* variante SERP : cadrage sur l'écran Google du portable */
.jcard__thumb--serp { object-position: center 38%; }
/* rehausse discrète des photos un peu plates (contraste, couleurs, netteté perçue) */
.img-enhance { filter: contrast(1.06) saturate(1.12) brightness(1.02); }
/* variante Google Business : image entière (dézoomée), fond blanc assorti */
.jcard__thumb--gbp { object-fit: cover; object-position: center; }
/* variante « cœur SEO+UX » : remplit la vignette sans bandes, hauteur ajustée au ratio pour ne quasi rien rogner */
.jcard__thumb--heart { object-fit: cover; object-position: center; height: 300px; }
/* variante « femme » (Google Ads) : cadrage sur le visage, situé en haut de l'image */
.jcard__thumb--woman { object-position: center 20%; }
/* variante « téléphone » (réseaux sociaux) : cadrage centré sur le groupe d'icônes */
.jcard__thumb--phone { object-position: center 63%; }
/* variante « micro » (content marketing) : léger dézoom + cadrage sur le micro (haut) */
.jcard__thumb--mic { height: 280px; object-position: center 32%; }
/* variante « carnet » (copywriting) : remplit la vignette, cadré sur le titre */
.jcard__thumb--words { object-fit: cover; object-position: center 20%; }
/* variante « château de cartes » : remplit la vignette, cadré au centre */
.jcard__thumb--cards { object-fit: cover; object-position: center; }
/* variante « enceinte vocale » : remplit la vignette, cadré au centre */
.jcard__thumb--speaker { object-fit: cover; object-position: center; }
/* variante « SEO ranking » : remonte le cadrage pour révéler le mot SEO en haut */
.jcard__thumb--seo { object-position: center 25%; }
/* variante « page Google » : cadrage haut pour montrer le logo Google */
.jcard__thumb--gpage { object-position: center 22%; }
/* variante « caddie / achat en ligne » : image entière (dézoom) en pleine largeur, sans bande ni recadrage */
.jcard__thumb--cart { height: auto; object-fit: cover; }
#journalFiltered .jcard__thumb--cart { height: auto; }
/* variante « consentement / cookies » : cadrage haut pour montrer la coche rouge */
.jcard__thumb--consent { object-position: center 25%; }
/* image affichée en entier : pleine largeur, hauteur naturelle, sans bande ni recadrage */
.jcard__thumb--full { height: auto; }
#journalFiltered .jcard__thumb--full { height: auto; }
/* variante « cubes de contact » (landing page) : cadrage bas pour montrer les cubes/icônes */
.jcard__thumb--contact { object-position: center 82%; }
/* variante « laptop landing page » : cadrage sur l'écran du PC */
.jcard__thumb--laptop { object-position: center 62%; }
/* variante « main robotique » (IA, image verticale) : vignette plus haute (~4 cm) + cadrage bas pour montrer la main */
.jcard__thumb--robot { object-position: center 48%; height: 341px; }
#journalFiltered .jcard__thumb--robot { height: 341px; }
/* variante « chatbot » : cadrage sur la conversation à l'écran */
.jcard__thumb--chat { object-position: center 28%; }
/* variante « OK optimisation image » : cadrage sur le visage et le geste OK */
.jcard__thumb--okimg { object-position: center 22%; }
/* variante « croissance » : cadrage bas pour montrer les marches et flèches ascendantes */
.jcard__thumb--growth { object-position: center 62%; }
/* variante « smartphone » (mobile-first) : vignette un peu plus haute + centrée pour voir tout le téléphone (haut et bas) */
.jcard__thumb--smartphone { object-position: center; height: 275px; }
#journalFiltered .jcard__thumb--smartphone { height: 275px; }
/* Vignette « placeholder » (carte sans photo) — dégradé de marque + icône */
.jcard__ph {
  position: relative; z-index: 1; width: 100%; height: 190px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); margin-bottom: 20px; display: grid; place-items: center;
  font-size: 2.6rem; line-height: 1;
  background: linear-gradient(135deg, rgba(108,184,255,0.18), rgba(169,139,255,0.16) 50%, rgba(232,146,255,0.18));
}

/* ----- Pagination du journal ----- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 48px; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.95rem;
  border: 1px solid var(--line); color: var(--muted); background: var(--bg-elev); transition: color .25s, border-color .25s, transform .25s;
}
.pagination a:hover { color: var(--ink); border-color: var(--acc); transform: translateY(-2px); }
.pagination .pagination__current { color: var(--ink-on-acc); background: var(--grad); border-color: transparent; box-shadow: var(--glow); }
.pagination__prev, .pagination__next { color: var(--acc) !important; }
.jcard--feature .jcard__thumb { height: 300px; }
.jcard--feature .jcard__ph { height: 300px; font-size: 3.4rem; }
/* Carte vedette « split » : image à gauche, texte à droite */
.jcard--split { flex-direction: row; align-items: center; gap: 34px; }
.jcard--split .jcard__thumb { width: 46%; flex: none; height: 330px; margin-bottom: 0; }
.jcard--split .jcard__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
@media (max-width: 720px) {
  .jcard--split { flex-direction: column; align-items: stretch; gap: 0; }
  .jcard--split .jcard__thumb { width: 100%; height: 240px; margin-bottom: 20px; }
}
.jcard__excerpt { color: var(--muted); margin-top: 12px; line-height: 1.65; font-size: 0.96rem; position: relative; z-index: 1; }
.jcard__meta { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 22px; color: var(--muted); font-size: 0.82rem; position: relative; z-index: 1; }
.jcard__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); }
.jcard__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--acc); font-weight: 600; font-size: 0.94rem; position: relative; z-index: 1; transition: gap .25s; }
.jcard:hover .jcard__link { gap: 12px; }
.jcard__cover { position: absolute; inset: 0; }
.jcard__cover a { position: absolute; inset: 0; z-index: 2; }

/* ----- Article (page) ----- */
.article { position: relative; z-index: 1; padding: 44px 0 92px; }
.article .container { max-width: 760px; }
.article__back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; margin-bottom: 30px; transition: color .25s; }
.article__back:hover { color: var(--acc); }
.article__tag {
  display: inline-flex; font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acc); border: 1px solid rgba(var(--acc-rgb),0.4);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.article__title { font-size: clamp(2rem, 5.2vw, 3.1rem); font-weight: 600; line-height: 1.12; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; color: var(--muted); font-size: 0.9rem; }
.article__meta .jcard__dot { background: var(--muted); }
.article__lead { color: var(--ink); opacity: 0.9; margin-top: 28px; font-size: 1.16rem; line-height: 1.7; font-weight: 500; }
/* Image d'illustration d'article */
.article__figure { margin: 30px 0 4px; }
.article__figure img { width: 100%; height: auto; display: block; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7); }
.article__figure figcaption { margin-top: 12px; text-align: center; color: var(--muted); font-size: 0.86rem; }
/* figure « icône » : illustration carrée/petite, centrée et de taille raisonnable */
.article__figure--icon { max-width: 340px; margin-left: auto; margin-right: auto; }
.article__figure--icon img { background: #fff; }
.article__body { margin-top: 20px; }
.article__body h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.55rem; font-weight: 600; margin: 44px 0 4px; line-height: 1.2; }
.article__body h3 { font-size: 1.14rem; font-weight: 600; margin: 30px 0 8px; color: var(--ink); }
.article__body p { color: var(--muted); line-height: 1.8; margin-top: 14px; font-size: 1.02rem; }
.article__body ul, .article__body ol { margin: 16px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.article__body li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.7; }
.article__body ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.article__body ol { counter-reset: step; }
.article__body ol li { padding-left: 40px; }
.article__body ol li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--ink-on-acc); background: var(--grad); }
.article__body strong { color: var(--ink); }
.article__body a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
/* Les boutons dans les articles doivent rester identiques à ceux de l'accueil
   (on neutralise le style des liens éditoriaux qui les rendait illisibles) */
.article__body a.btn { text-decoration: none; }
.article__body a.btn--primary { color: var(--ink-on-acc); }
.article__body a.btn--ghost { color: var(--ink); }
.article__body a.btn--ghost:hover { color: var(--acc); }
.article__body blockquote {
  margin: 30px 0; padding: 22px 26px; background: linear-gradient(155deg, rgba(var(--acc-rgb),0.1), var(--bg-card) 70%);
  border: 1px solid rgba(var(--acc-rgb),0.24); border-left: 3px solid var(--acc); border-radius: var(--radius-sm);
  color: var(--ink); font-size: 1.06rem; line-height: 1.7; font-style: italic;
}
.article__body blockquote p { color: var(--ink); margin: 0; }
.callout {
  margin: 30px 0; padding: 24px 26px; background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.callout__label { font-family: 'Space Grotesk', sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }
.callout p { margin-top: 8px; }
.keytable { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 0.94rem; }
.keytable th, .keytable td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--muted); }
.keytable th { color: var(--ink); font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; }
.keytable tr:hover td { background: rgba(var(--acc-rgb),0.05); }
.keytable strong { color: var(--ink); }
/* ----- FAQ (accordéon accessible, sans JS) ----- */
.faq { margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .3s; }
.faq__item[open] { border-color: rgba(var(--acc-rgb),0.4); }
.faq__q {
  list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-family: 'Space Grotesk', sans-serif;
  font-weight: 600; font-size: 1.02rem; color: var(--ink); text-wrap: balance;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid;
  place-items: center; font-size: 1.2rem; color: var(--acc); background: rgba(var(--acc-rgb),0.12);
  transition: transform .3s var(--ease), background .3s, color .3s;
}
.faq__item[open] .faq__q::after { content: "−"; transform: rotate(180deg); background: var(--grad); color: var(--ink-on-acc); }
.faq__a { padding: 0 22px 20px; color: var(--muted); line-height: 1.75; }
.faq__a a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
.article__cta {
  margin-top: 56px; padding: 40px 36px; text-align: center; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(var(--acc-rgb),0.14), var(--bg-card) 66%); border: 1px solid var(--line-strong);
}
.article__cta h2 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 600; }
.article__cta p { color: var(--muted); margin: 12px auto 24px; max-width: 460px; line-height: 1.65; }
.article__cta-note { margin-top: 24px; margin-bottom: 0; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.02em; line-height: 1.6; }
.article__cta-note b { color: var(--ink); font-weight: 600; }
.article__nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--line); }
.article__nav a { flex: 1 1 240px; display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .3s, transform .3s; }
.article__nav a:hover { border-color: var(--acc); transform: translateY(-3px); }
/* Carte de navigation « conversion » (dernière étape de l'entonnoir → devis) */
.article__nav a.article__nav--convert { background: linear-gradient(155deg, rgba(var(--acc-rgb),0.16), var(--bg-card) 68%); border-color: rgba(var(--acc-rgb),0.4); }
.article__nav a.article__nav--convert strong { color: var(--acc); }
.article__nav span { color: var(--muted); font-size: 0.78rem; }
.article__nav strong { color: var(--ink); font-weight: 600; font-size: 0.98rem; }

/* sécurité : aucune cellule ne doit déborder, sans jamais couper un mot en pleine lettre */
.keytable th, .keytable td { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

/* ---- Grands écrans : confort de lecture ---- */
@media (min-width: 1440px) {
  .journal .container { max-width: 1200px; }
}

/* ---- Tablettes (≤ 900px) ---- */
@media (max-width: 900px) {
  .article { padding: 44px 0 80px; }
  .journal { padding: 48px 0 84px; }
  .journal__head { margin-bottom: 40px; }
}

/* ---- Petites tablettes / grands téléphones (≤ 760px) ---- */
@media (max-width: 760px) {
  .journal__grid { grid-template-columns: 1fr; }
  .article__body ol li { padding-left: 38px; }
  .article__nav a { flex: 1 1 100%; }
}

/* ---- Téléphones (≤ 640px) ---- */
@media (max-width: 640px) {
  .article { padding: 32px 0 64px; }
  .article__title { font-size: clamp(1.65rem, 7.2vw, 2.3rem); }
  .article__lead { font-size: 1.05rem; }
  .article__body h2 { font-size: 1.3rem; margin-top: 36px; }
  .article__body h3 { font-size: 1.08rem; }
  .article__body p, .article__body li { font-size: 0.97rem; }
  .article__cta { padding: 30px 22px; margin-top: 44px; }
  .callout { padding: 20px 18px; }
  .journal__title { font-size: clamp(1.75rem, 8.4vw, 2.6rem); }
  .journal__lead { font-size: 1rem; }
  .jcard { padding: 24px 22px; }
  .jcard__title { font-size: 1.22rem; }
  .jcard--feature .jcard__title { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .keytable { font-size: 0.86rem; }
  .keytable th, .keytable td { padding: 10px 11px; }
  .faq__q { font-size: 0.96rem; padding: 15px 16px; gap: 12px; }
  .faq__q::after { width: 24px; height: 24px; }
  .faq__a { padding: 0 16px 16px; }
  .legal-nav__inner { height: 60px; gap: 10px; }
}

/* ---- Petits téléphones (≤ 400px) ---- */
@media (max-width: 400px) {
  .article__tag { font-size: 0.68rem; padding: 5px 12px; }
  .article__body ol li { padding-left: 34px; }
  .keytable { font-size: 0.8rem; }
  .keytable th, .keytable td { padding: 8px 8px; }
  .legal-nav .btn { padding: 8px 12px; font-size: 0.78rem; }
  .article__cta h2 { font-size: 1.25rem; }
}

/* ============================================================
   Gestion des cookies (bandeau + préférences)
   ============================================================ */
body.cookie-lock { overflow: hidden; }

.cookie-banner {
  position: fixed; z-index: 1000; left: 50%; bottom: 20px; transform: translate(-50%, 160%);
  width: min(680px, calc(100vw - 32px));
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.75);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 16px;
  opacity: 0; visibility: hidden; transition: transform .45s var(--ease), opacity .45s var(--ease), visibility .45s;
}
.cookie-banner.is-visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.cookie-banner__title { font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.cookie-banner__txt { color: var(--muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.cookie-banner__txt a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-banner__actions .btn { padding: 11px 18px; font-size: 0.9rem; }

.cookie-modal { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 20px; }
.cookie-modal[hidden] { display: none; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(3,6,14,0.72); backdrop-filter: blur(4px); }
.cookie-modal__card {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 20px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8); padding: 30px 30px 26px;
  animation: rdvPop .3s var(--ease) both;
}
.cookie-modal__close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px; color: var(--muted);
  cursor: pointer; font-size: 1rem; transition: color .2s, border-color .2s;
}
.cookie-modal__close:hover { color: var(--acc); border-color: var(--acc); }
.cookie-modal__title { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cookie-modal__lead { color: var(--muted); font-size: 0.9rem; line-height: 1.6; margin: 0 0 22px; }
.cookie-modal__lead a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.cookie-cats { display: flex; flex-direction: column; gap: 14px; }
.cookie-cat { background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.cookie-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.cookie-cat__name { font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.cookie-cat__note { color: var(--muted); font-weight: 400; font-size: 0.82rem; }

/* Mots à ne jamais couper au trait d'union (ex. « e-commerce ») */
.nowrap { white-space: nowrap; }

/* ===== Dissuasion de copie des images =====
   Empêche le glisser-déposer et le menu tactile long-press.
   Le texte reste sélectionnable (indispensable : téléphone, e-mail, devis). */
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

/* ===== Cartes de prestations (page pilier) ===== */
/* Tuiles alignées sur la colonne de lecture : 2 rangées de 4. */
.pcard-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin: 30px 0 10px; padding: 0; list-style: none;
}
.pcard {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 8px; overflow: hidden; text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px 12px 18px; text-decoration: none; color: inherit;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
/* voile lumineux au survol, comme les cartes du Journal */
.pcard::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(var(--acc-rgb),0.10), transparent 60%);
  transition: opacity .4s;
}
.pcard:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: 0 26px 60px -30px rgba(var(--acc-rgb),0.5); }
.pcard:hover::before { opacity: 1; }
.pcard:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.pcard__ico {
  position: relative; z-index: 1; width: 40px; height: 40px; flex: none;
  display: grid; place-items: center; border-radius: 11px; margin-bottom: 2px;
  background: rgba(var(--acc-rgb),0.12); border: 1px solid rgba(var(--acc-rgb),0.22);
  color: var(--acc); transition: background .4s, color .4s, transform .4s var(--ease);
}
.pcard:hover .pcard__ico { background: var(--grad); color: var(--ink-on-acc); transform: translateY(-2px); }
.pcard__ico svg { width: 20px; height: 20px; }

/* Surtout PAS de display:flex ici : un titre contenant une balise interne
   (ex. <span class="nowrap">e-commerce</span>) verrait ses fragments traités
   comme des éléments flex distincts, placés côte à côte sans retour à la ligne. */
.pcard__title {
  position: relative; z-index: 1; margin: 0; flex: 1;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.88rem;
  color: var(--ink); line-height: 1.3; text-wrap: balance;
  overflow-wrap: break-word;
}
/* Accroche courte : indispensable, une phrase serait illisible à cette largeur */
.pcard__txt {
  position: relative; z-index: 1; margin: 0;
  color: var(--muted); font-size: 0.74rem; line-height: 1.4; letter-spacing: 0.01em;
}
/* La flèche remplace le libellé « En savoir plus », trop long pour une tuile */
.pcard__link {
  position: relative; z-index: 1; margin-top: 2px;
  font-size: 0.95rem; color: var(--acc); line-height: 1;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.pcard:hover .pcard__link, .pcard:focus-visible .pcard__link { opacity: 1; transform: translateY(0); }
/* neutralise le style de lien hérité du corps d'article */
.article__body .pcard, .article__body .pcard:hover { text-decoration: none; }

/* 4 colonnes → 3 → 2 → 1 selon la largeur d'écran */
@media (max-width: 1100px) { .pcard-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .pcard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pcard-grid { grid-template-columns: 1fr; } }

/* ===== Bloc « Sources » des articles (E-E-A-T : fiabilité et transparence) ===== */
.sources {
  margin: 40px 0 0; padding: 22px 24px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--acc); border-radius: var(--radius-sm);
}
.sources__title {
  display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 14px;
}
.sources ol { margin: 0; padding-left: 20px; }
.sources li { color: var(--muted); font-size: 0.88rem; line-height: 1.7; margin-bottom: 8px; }
.sources li:last-child { margin-bottom: 0; }
/* Renvois de sources : dégager la hauteur de l'en-tête sticky, sinon la ligne visée se cale dessous.
   Le bloc étant en bas de page, le navigateur ne peut pas toujours la remonter : le surlignage
   ci-dessous est donc ce qui désigne réellement la source au lecteur. */
.sources li[id] { scroll-margin-top: 88px; border-radius: 4px; transition: background .35s var(--ease), color .35s, box-shadow .35s; }
.sources li:target {
  color: var(--ink);
  background: rgba(169, 139, 255, 0.16);
  box-shadow: 0 0 0 7px rgba(169, 139, 255, 0.16);
}
/* Les exposants de renvoi : visibles comme des liens, et confortables à viser au doigt */
.article__body sup a { color: var(--acc); text-decoration: none; padding: 0 2px; font-weight: 600; }
.article__body sup a:hover, .article__body sup a:focus-visible { text-decoration: underline; }
.sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sources a:hover { color: var(--acc); }
.sources__note { margin: 14px 0 0; font-size: 0.8rem; color: var(--muted); font-style: normal; }
.cookie-cat__desc { color: var(--muted); font-size: 0.85rem; line-height: 1.55; margin: 10px 0 0; }
.cookie-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.cookie-modal__actions .btn { padding: 11px 18px; font-size: 0.9rem; }

/* Interrupteur (toggle) */
.cookie-switch { position: relative; flex: none; width: 46px; height: 26px; }
.cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch__slider {
  position: absolute; inset: 0; border-radius: 999px; background: var(--bg-elev); border: 1px solid var(--line-strong);
  transition: background .25s, border-color .25s;
}
.cookie-switch__slider::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--muted); transition: transform .25s, background .25s;
}
.cookie-switch input:checked + .cookie-switch__slider { background: var(--grad); border-color: transparent; }
.cookie-switch input:checked + .cookie-switch__slider::after { transform: translateX(20px); background: #fff; }
.cookie-switch input:disabled { cursor: not-allowed; }
.cookie-switch input:disabled + .cookie-switch__slider { opacity: 0.7; }
.cookie-switch input:focus-visible + .cookie-switch__slider { box-shadow: 0 0 0 3px rgba(var(--acc-rgb),0.3); }

/* Placeholder de carte bloquée */
.cookie-embed {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
  min-height: 220px; padding: 28px; background: var(--bg-card);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); font-size: 0.9rem; line-height: 1.55;
}
.cookie-embed p { margin: 0; max-width: 420px; }

/* Lien "Gérer les cookies" */
.cookie-reopen {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s;
}
.cookie-reopen:hover { color: var(--acc); }
.cookie-reopen--float {
  position: fixed; z-index: 999; left: 16px; bottom: 16px;
  background: var(--bg-elev); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 9px 16px; text-decoration: none; box-shadow: 0 14px 34px -20px rgba(0,0,0,0.7);
}

@media (max-width: 560px) {
  .cookie-banner { bottom: 0; left: 0; transform: translateY(120%); width: 100vw; border-radius: 18px 18px 0 0; }
  .cookie-banner.is-visible { transform: translateY(0); }
  .cookie-banner__actions .btn { flex: 1 1 auto; }
}

/* ===== Devis : création de compte optionnelle ===== */
.acct-optin {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 5px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
}
.acct-optin input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--acc);
  cursor: pointer;
}
.acct-optin small { color: var(--muted); }
.wizard__hint {
  color: var(--muted);
  font-size: 0.95rem;
  margin: -4px 0 18px;
}

/* Consentement / opt-in en erreur */
.acct-optin.has-error {
  border-color: #ff6b6b;
  background: rgba(255, 107, 107, 0.06);
}