/* ── tokens.css ── */
/* tokens.css — SEULE source de variables du projet. Rien ailleurs ne pose de
   :root, aucune couleur ni espacement littéral hors de ce fichier. */

:root{
  /* Couleurs — CONSERVÉES à l'identique de la mono-page, ne se rediscutent pas */
  --light:#ffffff; --light-alt:#f6f5fc; --light-line:#e7e4f6;
  --ink:#0a2540; --ink-soft:#334155; --muted:#6b7280;
  --accent:#6c5ce7; --accent-deep:#5646d6; --accent-soft:#efedff;
  --grad-c:#6c5ce7; --grad-g:#ff6fa5; --grad-p:#ffb648;
  --success:#0a8a5f; --success-bright:#35c48d;
  --dot:rgba(108,92,231,.10);

  /* Typo — Big Shoulders CIBLÉE (eyebrows, prix, chiffres, boutons, nav,
     H1 courts) pour la parenté avec les maquettes clients (templates/*.html) ;
     Inter partout ailleurs (titres éditoriaux, corps) — la police déjà
     établie de tillap.com, gardée pour la lecture longue plutôt que Karla.
     Abandon de Fraunces et de la police mono dédiée : les usages numériques
     (compte à rebours, montants) passent en Big Shoulders tabular-nums
     (cf. .num, typo.css) plutôt qu'en troisième famille. */
  --font-display:'Big Shoulders','Impact',sans-serif;
  --font-title:'Inter',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* Échelle typo — fluide, une seule, pas de clamp() improvisé dans les blocs */
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-md:1rem;
  --fs-lg:1.125rem;
  --fs-xl:clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  --fs-2xl:clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
  --fs-3xl:clamp(2.1rem, 1.6rem + 2.6vw, 3.25rem);
  --fs-display:clamp(2.6rem, 1.9rem + 3.6vw, 4.5rem);

  /* Espacement — base 4, une seule échelle, aucune valeur hors échelle */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:3rem;    --sp-8:4rem;
  --sp-9:6rem;    --sp-10:8rem;
  --sp-sec:clamp(var(--sp-8), 6vw, var(--sp-9));  /* respiration verticale d'une section */

  /* Conteneurs — repris tels quels */
  --wrap-max:1140px;
  --wrap-wide-max:1240px;
  --wrap-narrow-max:840px;

  /* Formes, ombres — CONSERVÉES à l'identique */
  --radius:14px; --radius-lg:20px; --radius-xl:26px; --pill:999px;
  --shadow-sm:0 2px 8px -4px rgba(10,37,64,.10);
  --shadow-card:0 14px 34px -20px rgba(10,37,64,.24);
  --shadow-pop:0 30px 70px -34px rgba(10,37,64,.34);

  /* Sections futuristes (v3.1) — déclinaisons de la palette, rien de nouveau
     hors charte : encre profonde pour les moments de contraste, lueurs
     d'accent pour les orbes et les filets dégradés. */
  --ink-deep:#071c33;            /* fond des sections sombres (dérivé de --ink) */
  --ink-line:rgba(255,255,255,.09);  /* filet sur fond sombre */
  --grad-sig:linear-gradient(96deg,var(--grad-c),var(--grad-g) 52%,var(--grad-p));
  --glow-a:rgba(108,92,231,.32);     /* orbe violet */
  --glow-b:rgba(255,111,165,.22);    /* orbe rose */
  --glow-c:rgba(255,182,72,.20);     /* orbe ambré */

  /* Mouvement — CONSERVÉ à l'identique */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur-1:200ms; --dur-2:400ms; --dur-3:700ms;
  --stagger:70ms;

  /* Chrome — CONSERVÉ à l'identique (header 55 px, non négociable) */
  --header-h:55px;
}

/* ── base.css ── */
/* base.css — polices auto-hébergées, reset, éléments HTML nus.
   Sous-ensemble latin uniquement (U+0000-00FF + Œ/œ) : couvre tous les
   accents du français, inutile d'embarquer le cyrillique ou le vietnamien
   d'un CDN qu'on vient justement de quitter. */

@font-face{
  font-family:'Big Shoulders';font-style:normal;font-weight:700;font-display:swap;
  src:url('/p11/assets/fonts/big-shoulders-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Inter est une police variable : un seul fichier couvre tout l'axe de
   graisse (100-900) — d'où la déclaration `font-weight:400 700` en plage
   plutôt que deux @font-face séparés comme pour Big Shoulders (instance
   statique unique). */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/p11/assets/fonts/inter-variable.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{font-family:var(--font-body);background:var(--light);color:var(--muted);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}

/* Signature typographique : tout <em> est un dégradé tricolore. Le padding
   vertical étend la zone de fond SANS toucher à la mise en page (sur un
   inline, il n'influe pas sur la hauteur de ligne) — sans lui, les
   descendantes des lettres italiques (g, j, q, y…) sortent de la boîte de
   fond et deviennent invisibles, le texte étant transparent. */
em{
  font-style:italic;
  background:linear-gradient(96deg, var(--grad-c), var(--grad-g) 52%, var(--grad-p));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:.08em 0 .16em;
}
strong{color:var(--ink);font-weight:700}

::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Le lien d'évitement est un .sr-only qui redevient visible au focus clavier
   (première tabulation de la page) — seul moyen de sauter le header sans souris. */
.sr-focus:focus{position:fixed;top:var(--sp-2);left:var(--sp-2);width:auto;height:auto;
  padding:var(--sp-2) var(--sp-4);margin:0;overflow:visible;clip:auto;z-index:200;
  background:var(--ink);color:#fff;border-radius:var(--radius);font-weight:700}

[hidden]{display:none !important}

/* -- Sections sombres « agence » : encre profonde + lueurs de la charte ------
   Un moment de contraste par page, jamais deux d'affilée (rythme, CONTRAT).
   Les textes y sont re-teintés localement — le corps reste --muted sur clair. */
.sec-dark{background:var(--ink-deep);color:#b9c4d4;position:relative;overflow:hidden;isolation:isolate}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark .display{color:#fff}
.sec-dark .lede{color:#b9c4d4}
.sec-dark strong{color:#fff}
.sec-dark .eyebrow{color:#b7aefc}

/* Orbes de lueur — purement décoratifs, flous, derrière le contenu. */
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1}
.orb-a{background:var(--glow-a)}
.orb-b{background:var(--glow-b)}
.orb-c{background:var(--glow-c)}

/* Filet dégradé — signature de séparation fine (titres, cartes, pied). */
.hairline{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--grad-g) 60%,transparent)}

/* -- Keyframes partagés — transform/opacity UNIQUEMENT (règle DA) ---------- */
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float-y-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes orb-drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,6%) scale(1.08)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ── typo.css ── */
/* typo.css — échelle typographique et discipline Big Shoulders.
   Big Shoulders (--font-display) est une condensée capitale, dessinée pour
   l'uppercase : elle est CONFINÉE aux libellés courts — .display, .eyebrow,
   .num (ici), .btn (parts.css), les badges à chiffre isolé (ex. .step-num)
   et la navigation (.head-nav a, .mnav nav a, chrome.css — décision
   explicite : les libellés de nav sont aussi courts qu'un bouton, jamais un
   titre éditorial long, jamais un paragraphe.
   check.js compte les usages de --font-display et échoue au-delà du seuil :
   c'est ce qui empêche la condensée de déborder sur une page beauté ou
   libéral aux titres plus longs que ceux du BTP. */

h1, h2, h3{color:var(--ink);line-height:1.15;letter-spacing:-.01em}
h1{font-family:var(--font-title);font-weight:700;font-size:var(--fs-3xl)}
h2{font-family:var(--font-title);font-weight:700;font-size:var(--fs-2xl)}
h3{font-family:var(--font-title);font-weight:700;font-size:var(--fs-xl)}

.lede{font-family:var(--font-body);font-size:var(--fs-lg);line-height:1.6;max-width:56ch;color:var(--muted)}

/* Utilitaires de taille — orthogonaux à la police, à combiner librement. */
.fs-xs{font-size:var(--fs-xs)} .fs-sm{font-size:var(--fs-sm)} .fs-md{font-size:var(--fs-md)}
.fs-lg{font-size:var(--fs-lg)} .fs-xl{font-size:var(--fs-xl)} .fs-2xl{font-size:var(--fs-2xl)}
.fs-3xl{font-size:var(--fs-3xl)} .fs-display{font-size:var(--fs-display)}

/* .display : le registre « affiche » — H1 de hero, chiffres clés, moments où
   le condensé capitale sert le propos plutôt que de gêner la lecture. */
.display{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.98;color:var(--ink)}

.eyebrow{display:inline-block;font-family:var(--font-display);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* Montants, compte à rebours : chiffres alignés, jamais de police mono dédiée. */
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700}

/* ── layout.css ── */
/* layout.css — conteneurs, section, ET LES SEULS BREAKPOINTS DU PROJET.
   Mobile-first réel : le style de base sert le mobile, on AJOUTE aux grands
   écrans via min-width, on ne retire jamais. Remplace les 6 paliers ad hoc en
   max-width (1080/900/760/640/600/400) de la mono-page.

     sm  600px   la phablette large / petite tablette
     md  900px   tablette et petit portable : passage à 2-3 colonnes
     lg  1200px  grand écran : respiration maximale

   Un 4e palier exige une justification écrite ici, pas juste dans un bloc. */

.wrap{max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--sp-4)}
.wrap-wide{max-width:var(--wrap-wide-max);margin-inline:auto;padding-inline:var(--sp-4)}
.wrap-narrow{max-width:var(--wrap-narrow-max);margin-inline:auto;padding-inline:var(--sp-4)}

.sec{padding-block:var(--sp-sec);position:relative}
.sec-alt{background:var(--light-alt)}
.sec-head{max-width:42rem;margin-bottom:var(--sp-7)}
.sec-head-center{margin-inline:auto;text-align:center}
.sec-head-center .lede{margin-inline:auto}

@media (min-width:600px){
  .wrap, .wrap-wide, .wrap-narrow{padding-inline:var(--sp-6)}
}

@media (min-width:900px){
  .wrap, .wrap-wide, .wrap-narrow{padding-inline:var(--sp-7)}
}

/* ── chrome.css ── */
/* chrome.css — topbar, header (55 px, conservé), nav mobile, pied de page,
   fil d'Ariane. État actif via aria-current="page", posé au rendu. */

/* -- topbar : offre de lancement -- */
.topbar{display:block;background:linear-gradient(96deg,#4a3ac4,var(--accent) 55%,#8b7cf0);color:#fff;position:relative;z-index:60;text-decoration:none;transition:filter var(--dur-1) var(--ease)}
.topbar:hover{filter:brightness(1.09)}
.topbar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px var(--sp-5);padding:var(--sp-2) var(--sp-4);text-align:center}
.tb-msg{font-size:var(--fs-sm)}
.tb-msg s{position:relative;display:inline-block;text-decoration:none}
.tb-msg s::before{content:"";position:absolute;left:-4%;top:50%;width:108%;height:1.5px;background:currentColor;opacity:.55;transform:rotate(-12deg)}
.tb-price{color:#fff;font-weight:700;font-size:1.05em}
.tb-deadline{white-space:nowrap}
.tb-chip{background:rgba(255,255,255,.2);border-radius:var(--pill);padding:.25em .95em;font-size:.72rem;white-space:nowrap}
.tb-chip b{font-weight:700;font-variant-numeric:tabular-nums}
.tb-cta{font-size:.8rem;font-weight:700;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}

/* -- header : 55 px, sticky, verre dépoli -- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--light-line)}
.head-in{display:flex;align-items:center;gap:var(--sp-7);height:var(--header-h)}
.site-head .brand{flex:none;line-height:0}
.site-head .brand svg{height:45px;width:auto;display:block}
.brand .logo-mark{fill:var(--ink)}
.brand .logo-dot,.brand .logo-com{fill:var(--accent)}

.head-nav{display:none}
.head-nav a{font-family:var(--font-display);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-decoration:none;padding:.6em .9em;border-radius:var(--pill);transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.head-nav a:hover{color:var(--ink);background:rgba(10,37,64,.05)}
.head-nav a[aria-current="page"]{color:var(--accent-deep);background:var(--accent-soft)}

.head-tools{display:flex;align-items:center;gap:var(--sp-4);flex:none;margin-left:auto}
/* Icône toujours visible (mobile compris, comme tillap.com actuel) — seul le
   libellé « Mon compte » se cache sous la bascule vers la nav complète. */
.head-account{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:700;color:var(--muted);text-decoration:none;padding:.6em .4em;border-radius:var(--pill)}
.head-account:hover{color:var(--ink)}
.head-account span{display:none}

.head-cta{height:45px;padding-inline:1.3em}
.head-cta .pulse{width:7px;height:7px;border-radius:50%;background:#fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

.head-progress{position:absolute;left:0;right:0;bottom:-1px;height:2.5px;transform-origin:0 50%;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,#9d8bff);transform:scaleX(0);pointer-events:none}

/* -- burger (mobile) -- */
.burger{display:grid;width:42px;height:42px;padding:0;background:#fff;border:1.5px solid var(--light-line);border-radius:var(--pill);box-shadow:var(--shadow-sm);cursor:pointer;place-items:center;flex:none;position:relative;z-index:1}
.burger-ic{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round}
.burger-ic path{transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease);transform-origin:12px 12px}
.burger.is-open .bi-a{transform:translateY(5px) rotate(45deg)}
.burger.is-open .bi-b{opacity:0}
.burger.is-open .bi-c{transform:translateY(-5px) rotate(-45deg)}

/* -- nav mobile (panneau plein écran) -- */
.mnav{position:fixed;top:0;left:0;bottom:0;width:90vw;max-width:360px;z-index:40;background:var(--ink);display:flex;flex-direction:column;padding:calc(var(--header-h) + var(--sp-8)) var(--sp-5) var(--sp-6);transform:translateX(-100%);visibility:hidden;transition:transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3);overflow-y:auto}
.mnav.open{transform:translateX(0);visibility:visible;transition:transform var(--dur-3) var(--ease),visibility 0s}
.mnav nav{display:flex;flex-direction:column;gap:var(--sp-1)}
.mnav nav a{font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;color:#fff;text-decoration:none;padding:.65em 0;border-bottom:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;align-items:center}
.mnav nav a[aria-current="page"]{color:#c9c2ff}
.mnav nav a .ic{color:#9d8bff}
.mnav .btn{margin-top:auto}

@media (min-width:900px){
  .head-nav{display:flex;gap:2px;margin-right:auto}
  .head-account span{display:block}
  .burger,.mnav{display:none}
}

/* -- mega footer : encre profonde, bandeau de conversion, 4 colonnes ------- */
.ft{background:var(--ink-deep);color:#8fa1b8;padding-block:var(--sp-8) var(--sp-6);position:relative;overflow:hidden}
.ft::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--grad-g) 60%,var(--grad-p) 80%,transparent)}

/* Bandeau de conversion — carte verre sur lueurs, absente des pages d'action. */
.ft-cta{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-5);background:rgba(255,255,255,.04);border:1px solid var(--ink-line);border-radius:var(--radius-xl);padding:var(--sp-6);margin-bottom:var(--sp-8)}
.ft-cta .orb-a{width:340px;height:340px;top:-190px;right:-70px}
.ft-cta .orb-b{width:260px;height:260px;bottom:-180px;left:6%}
.ft-cta-kicker{font-family:var(--font-display);font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#b7aefc;margin-bottom:var(--sp-2)}
.ft-cta-titre{font-family:var(--font-title);font-weight:700;font-size:var(--fs-2xl);line-height:1.18;letter-spacing:-.01em;color:#fff;max-width:24ch}
.ft-cta-btns{display:flex;gap:var(--sp-3);flex-wrap:wrap;flex:none}

.ft .brand svg{height:44px;width:auto;display:block}
.ft .brand .logo-mark{fill:#fff}
.ft-brand p{margin-top:var(--sp-3);font-size:var(--fs-sm);max-width:34ch;line-height:1.6}
.ft-contact{list-style:none;margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.ft-contact li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);min-height:34px}
.ft-contact .ic{color:#9d8bff}
.ft-contact a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-decoration:none}
.ft-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-grid{display:grid;gap:var(--sp-7)}
.ft-col b{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7789a0;margin-bottom:var(--sp-3)}
.ft-col nav{display:flex;flex-direction:column;gap:2px}
.ft-col nav a{font-size:var(--fs-sm);color:#b9c4d4;text-decoration:none;padding:.4em 0;min-height:32px;display:flex;align-items:center;transition:color var(--dur-1) var(--ease)}
.ft-col nav a:hover{color:#fff}
.ft-bottom{margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--ink-line);font-size:.75rem;display:flex;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}

@media (min-width:600px){
  .ft-cta{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--sp-7)}
  .ft-grid{grid-template-columns:1.5fr 1fr 1fr}
}
@media (min-width:900px){
  .ft-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}
}

/* -- fil d'Ariane, en pied de page au-dessus des colonnes (façon Apple) -- */
.fil{margin-bottom:var(--sp-6);padding-bottom:var(--sp-5);border-bottom:1px solid var(--ink-line)}
.fil-l{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.35em;font-size:var(--fs-xs)}
.fil-l li{display:flex;align-items:center;gap:.35em}
.fil-l li + li::before{content:"/";color:#3d5275;font-weight:700}
.fil-l a{color:#8fa1b8;text-decoration:none}
.fil-l a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.fil-l [aria-current="page"]{color:#c7d2e2;font-weight:700}

/* ── parts.css ── */
/* parts.css — bouton, chip, icônes, reveal au scroll.
   Aucun déplacement au survol nulle part — brightness() uniquement (DA). */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-display);font-weight:700;font-size:.9375rem;
  text-transform:uppercase;letter-spacing:.02em;line-height:1;
  padding:1.05em 1.6em;border-radius:var(--pill);
  text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:filter var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.btn .ic{width:1em;height:1em}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 14px 34px -14px rgba(108,92,231,.55)}
.btn-ghost{background:var(--light);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--light-line)}
.btn-white{background:#fff;color:var(--accent-deep)}
.btn-lg{font-size:1.05rem;padding:1.15em 1.8em}
.btn-block{width:100%}

.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-body);font-size:var(--fs-sm);font-weight:700;
  color:var(--ink-soft);background:var(--light);border:1px solid var(--light-line);
  padding:.55em 1em;border-radius:var(--pill);text-decoration:none;
}
.chip .ic{color:var(--success)}

/* Icônes — cf. src/engine/icons.js. Taille relative au texte porteur. */
.ic{width:1.1em;height:1.1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.15em}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Reveal au scroll — piloté par src/scripts/core/20-reveal.js (.rv + data-d en ms) */
.rv{opacity:0;transform:translateY(24px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.rv.in{opacity:1;transform:none}

/* -- Carte à bord dégradé — le motif « premium » du site --------------------
   La bordure est un fond dégradé qui dépasse de 1 px sous un fond plein :
   pas de border-image (angles rognés), pas de déplacement au survol. */
.gcard{position:relative;border-radius:var(--radius-lg);background:linear-gradient(var(--light),var(--light)) padding-box,linear-gradient(135deg,rgba(108,92,231,.55),rgba(255,111,165,.35) 50%,rgba(255,182,72,.4)) border-box;border:1px solid transparent;box-shadow:var(--shadow-sm);transition:filter var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.gcard:hover{box-shadow:var(--shadow-card)}
.sec-dark .gcard{background:linear-gradient(rgba(255,255,255,.045),rgba(255,255,255,.045)) padding-box,linear-gradient(135deg,rgba(140,124,255,.5),rgba(255,111,165,.28) 50%,rgba(255,182,72,.3)) border-box;box-shadow:none}

/* -- Verre dépoli — cartes flottantes des scènes de hero -------------------- */
.glass{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-card);border-radius:var(--radius)}

/* -- Pastille de catégorie — plus discret qu'un bouton, plus fort qu'un lien */
.tag-pill{display:inline-flex;align-items:center;gap:.45em;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);border-radius:var(--pill);padding:.5em 1em}
.sec-dark .tag-pill{color:#c9c2ff;background:rgba(108,92,231,.16)}

/* -- Marquee — défilement CSS pur (transform), pausé au survol et sans JS ---
   Le contenu est DOUBLÉ dans le HTML (aria-hidden sur la copie) : l'animation
   translateX(-50%) boucle sans couture. No-op sous reduced-motion (base.css
   neutralise déjà toutes les animations). */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:var(--sp-7);width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
}

/* ── blocks/bandeau-cta.css ── */
/* stub bandeau-cta */

/* ── blocks/faq-liste.css ── */
/* faq-liste.css — accordéon <details>. Repris de main.css:586-593, adapté au
   natif (le chevron tourne sur [open], plus de classe .open posée par JS). */

.fq-list{border-top:1px solid var(--light-line)}
.fq-item{border-bottom:1px solid var(--light-line)}
.fq-q{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) 4px;font-family:var(--font-body);font-size:1.03rem;font-weight:700;
  color:var(--ink);cursor:pointer;min-height:44px;list-style:none;
  transition:color var(--dur-1) var(--ease);
}
.fq-q::-webkit-details-marker{display:none}
.fq-q:hover{color:var(--accent-deep)}
.fq-q .ic{color:var(--muted);transform:rotate(90deg);transition:transform var(--dur-2) var(--ease)}
.fq-item[open] .fq-q .ic{transform:rotate(-90deg)}
.fq-a p{padding:2px 4px 22px;font-size:.9375rem;line-height:1.68;color:var(--muted);max-width:64ch}