/* =============================================================================
   premium.css — socle commun du site ecd-digital.com (refonte « premium », oct. 2026)
   -----------------------------------------------------------------------------
   Chargée APRÈS le <style> propre à chaque page : à spécificité égale, ces règles
   gagnent. Le CSS d'origine reste en place en dessous (seule la police Poppins
   y a été remplacée par la variable --fd, définie ici).

   Direction : sombre cinématographique, typographie éditoriale (Inter serré +
   Instrument Serif en italique pour l'accent), filets fins plutôt qu'ombres
   lourdes, couleurs du logo (bleu, turquoise, or) gardées pour les accents.
   Aucun texte de lecture n'est posé sur de la 3D sans plaque derrière.
   ========================================================================== */

/* Polices auto-hébergées (dossier fonts/, licence SIL OFL 1.1, fichiers tirés de
   Google Fonts, sous-ensemble latin qui couvre le français, € et œ compris).
   Plus de requête vers Google : rien ne part chez un tiers, et la police
   d'Inter est préchargée dans le <head> de chaque page. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/inter-latin.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}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-italic-latin.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}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/instrument-serif-latin.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}
/* Police de secours calée sur les métriques d'Inter : si Inter arrive après le
   premier rendu, le texte ne saute presque plus (c'était la cause du décalage
   de mise en page mesuré par Lighthouse sur l'accueil). */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%}

:root{
  /* Fond et surfaces */
  --p-bg:#06080d;
  --p-bg-2:#0a0d14;
  --p-surface:rgba(255,255,255,.028);
  --p-surface-2:rgba(255,255,255,.05);
  --p-line:rgba(255,255,255,.085);
  --p-line-2:rgba(255,255,255,.16);
  /* Texte (contrastes mesurés sur #06080d : 17,7 / 11,2 / 6,8 pour 1, AA partout) */
  --p-text:#eef1f6;
  --p-text-2:#b9c2d0;
  --p-text-3:#8c97a9;
  /* Accents du logo */
  --p-ivory:#f4efe4;
  --p-gold:#d8b76e;
  --p-gold-2:#c9a24b;
  --p-teal:#3fd6b8;
  --p-sky:#8cc8ff;
  --p-ease:cubic-bezier(.2,.7,.2,1);
  /* Polices : un seul jeu pour tout le site */
  --fd:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fs:'Instrument Serif',Georgia,'Times New Roman',serif;

  /* Les variables des pages d'origine, réalignées sur la palette sombre.
     --navy ne sert plus de fond nulle part (les blocs qui l'utilisaient sont
     redéfinis plus bas) : il devient la couleur des titres. */
  --navy:var(--p-text);
  --ink:var(--p-text-2);
  --muted:var(--p-text-3);
  --blue:var(--p-sky);
  --cyan:var(--p-teal);
  --gold:var(--p-gold);
  --grad:linear-gradient(90deg,#c9a24b,#f1dca6 50%,#c9a24b);
  --card-sh:none;
  color-scheme:dark;
}

html{background:var(--p-bg);-webkit-text-size-adjust:100%}
body{
  background:var(--p-bg);
  color:var(--p-text-2);
  font-family:var(--fd);
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* Grain très léger sur toute la page : casse l'aplat numérique du noir.
   SVG en data: (autorisé par la CSP), 0 requête. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
::selection{background:rgba(216,183,110,.35);color:#fff}

h1,h2,h3,h4{font-family:var(--fd);color:var(--p-text);letter-spacing:-.025em;font-weight:600}
h1{letter-spacing:-.035em}
a{color:var(--p-sky)}
strong,b{color:var(--p-text);font-weight:600}
.wrap{max-width:1160px}

/* Accent éditorial : mot ou fin de titre en italique serif, or doux */
.p-serif,.hero h1 .hl,.head h1 em{
  font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em;
  background:linear-gradient(100deg,#f4efe4 0%,#d8b76e 55%,#b98f3e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-right:.06em;
}

/* Focus visible partout (clavier) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--p-gold);outline-offset:3px;border-radius:10px;
}

/* ---------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */
.nav{padding:18px 0}
.nav .wrap{max-width:1240px}
.nav.scrolled{
  background:rgba(6,8,13,.72);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--p-line);padding:11px 0;
}
.brand,.nav.scrolled .brand{color:var(--p-text);font-family:var(--fd);font-weight:700;letter-spacing:-.02em}
.brand-wm{display:inline-block;line-height:1}
.brand-wm span{display:block;color:var(--p-gold);font-weight:500;letter-spacing:.32em;font-size:9.5px}
.brand .brand-mark{color:#e9edf3}
.links{gap:0}
.links a,.nav.scrolled .links a{color:rgba(238,241,246,.72);font-size:14px;font-weight:500;padding:8px 11px;letter-spacing:-.005em;transition:color .2s}
.links a:hover,.nav.scrolled .links a:hover,.links a.active,.nav.scrolled .links a.active{color:#fff}
.links a::after{left:11px;right:11px;bottom:4px;height:1px;background:var(--p-gold)}
.links a.active::after{transform:scaleX(1)}
.links .cta-mini{
  background:var(--p-ivory);color:#0a0c10!important;font-weight:600;border-radius:100px;
  padding:8px 16px;margin-left:8px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 8px 24px -10px rgba(216,183,110,.6);
}
.links .cta-mini:hover{background:#fff}

/* ---------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */
.btn{font-family:var(--fd);font-weight:600;letter-spacing:-.01em;border-radius:100px;padding:14px 26px;font-size:15px}
.btn-primary{
  background:var(--p-ivory);color:#0a0c10;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 34px -14px rgba(216,183,110,.75);
}
.btn-primary:hover{background:#fff;color:#0a0c10;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 22px 44px -16px rgba(216,183,110,.9)}
.btn-primary::before{background:linear-gradient(120deg,transparent,rgba(216,183,110,.35),transparent)}
.btn-ghost,.hero .btn-ghost{
  background:rgba(255,255,255,.03);color:var(--p-text);border:1px solid var(--p-line-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.32);transform:translateY(-2px)}
.btn-pay{
  background:rgba(255,255,255,.03);color:var(--p-text);border:1px solid var(--p-line-2);border-radius:100px;
  font-family:var(--fd);font-weight:600;
}
.btn-pay:hover{background:rgba(216,183,110,.1);border-color:rgba(216,183,110,.55);color:#fff}
.btn-pay .lock{opacity:.8;color:var(--p-gold)}
.btn-soon{background:rgba(255,255,255,.04);color:var(--p-text-3);border:1px dashed var(--p-line-2)}

/* ---------------------------------------------------------------------------
   En-tête des pages intérieures (.head) — bandeau sombre + 3D légère (bg3d.js)
   ------------------------------------------------------------------------- */
.head{
  --bg3d-fog:#070a11;
  background:
    radial-gradient(900px 420px at 50% -10%,rgba(140,200,255,.10),transparent 70%),
    radial-gradient(700px 380px at 12% 30%,rgba(63,214,184,.07),transparent 70%),
    radial-gradient(700px 380px at 88% 40%,rgba(216,183,110,.07),transparent 70%),
    var(--p-bg);
  padding:168px 0 92px;border-bottom:1px solid var(--p-line);
}
.head::before{background:linear-gradient(180deg,transparent 60%,var(--p-bg));opacity:.9}
.head h1{font-family:var(--fd);font-weight:600;font-size:clamp(34px,5.6vw,64px);letter-spacing:-.04em;line-height:1.04;color:var(--p-text);text-wrap:balance}
.head p{color:var(--p-text-2);font-size:clamp(16px,1.5vw,19px);line-height:1.65;max-width:620px}
.head .kicker{font-family:var(--fd);font-weight:500;color:var(--p-gold);letter-spacing:.24em;font-size:11.5px}
.head .kicker::before,.sec-tag::before{content:"";display:inline-block;width:18px;height:1px;background:currentColor;opacity:.7;vertical-align:middle;margin-right:10px}
.head .meta{background:rgba(255,255,255,.04);border:1px solid var(--p-line-2);color:var(--p-text-2);font-family:var(--fd);font-weight:500}
.crumbs{color:var(--p-text-3)}
.crumbs a{color:var(--p-text-2)}
.promo{
  background:rgba(216,183,110,.1);color:#f1dca6;border:1px solid rgba(216,183,110,.45);
  font-family:var(--fd);font-weight:500;box-shadow:none;padding:10px 20px;font-size:14px;letter-spacing:.01em;
}
.head .cta{margin-top:28px}

/* ---------------------------------------------------------------------------
   Sections, titres, rythme
   ------------------------------------------------------------------------- */
section{padding:112px 0;position:relative}
.alt,section.alt{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008))}
section+section{border-top:1px solid var(--p-line)}
.sec-tag{font-family:var(--fd);font-weight:500;color:var(--p-gold);letter-spacing:.24em;font-size:11.5px;text-transform:uppercase}
.sec-tag::before{width:18px}
h2.title{font-family:var(--fd);font-weight:600;font-size:clamp(30px,4.4vw,52px);letter-spacing:-.04em;line-height:1.06;color:var(--p-text);text-wrap:balance}
h2.title::after{content:none}
.lead{color:var(--p-text-2);font-size:clamp(16.5px,1.4vw,19px);line-height:1.7;max-width:640px}
section p{color:var(--p-text-2)}
.tiny,.note-tiny{color:var(--p-text-3)}

/* ---------------------------------------------------------------------------
   Cartes (toutes familles) : surface fine, filet, reflet en haut au survol
   ------------------------------------------------------------------------- */
.card,.offer,.format,.guide,.why .item,.example,.post-card,.rel .r,.case,.step,.opt,.cond,.audit-box,.som,.note,.cta-box,.atrancher{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--p-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:22px;
  color:var(--p-text-2);
}
.card,.offer,.format,.guide,.why .item,.post-card,.rel .r,.case,.step{
  transition:transform .45s var(--p-ease),border-color .45s var(--p-ease),background .45s var(--p-ease),box-shadow .45s var(--p-ease);
  position:relative;
}
.card:hover,.offer:hover,.format:hover,.guide:hover,.why .item:hover,.post-card:hover,.rel .r:hover,.case:hover,.step:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.8);
}
/* Halo qui suit le pointeur (premium.js pose --mx/--my, sinon rien) */
.card::after,.offer::after,.format::after,.guide::after,.post-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(216,183,110,.10),transparent 45%);
}
.card:hover::after,.offer:hover::after,.format:hover::after,.guide:hover::after,.post-card:hover::after{opacity:1}
.card::before{height:1px;background:linear-gradient(90deg,transparent,rgba(216,183,110,.8),transparent)}
.card h3,.offer h3,.format h3,.guide h3,.why .item h3,.example h3,.step h3,.cond h3,.case .visual h3{color:var(--p-text);font-family:var(--fd);font-weight:600;letter-spacing:-.02em}
.card p,.step p,.why .item p,.guide p,.format p,.rel .r p,.post-card p{color:var(--p-text-2)}
.card .go,.case .visit,.rel .r .more,.post-card .more{color:var(--p-text);font-family:var(--fd);font-weight:600}
.card .go:hover,.case .visit:hover,.rel .r .more:hover,.post-card .more:hover{color:var(--p-gold)}
.card .pp{color:var(--p-gold);font-family:var(--fd);font-weight:600}
.card .pp[style*="var(--blue)"]{color:var(--p-text)!important;font-weight:600;letter-spacing:-.03em}

/* Icônes : tuile sombre, trait fin (les emojis ont été remplacés par des SVG) */
.card .ico,.guide .ico,.why .item .i{
  width:48px;height:48px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--p-line-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--p-gold);font-size:22px;display:flex;align-items:center;justify-content:center;
}
.card:hover .ico{transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 24px -6px rgba(216,183,110,.5)}
.ico svg,.i svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Offres / formules / guides : prix et listes */
.offer .prix,.format .prix,.guide .prix,.card .price,.cta-box .prix{
  font-family:var(--fd);font-weight:600;color:var(--p-text);letter-spacing:-.035em;
}
.offer .prix small,.format .prix small,.guide .prix small,.card .price small,.cta-box .prix small{font-family:var(--fd);color:var(--p-text-3);font-weight:400;letter-spacing:0}
.offer ul li,.format ul li,.case ul li,.split ul li,.post ul li,.post ol li,ul.checks li,.cond ul,.doc ul,.doc ol{color:var(--p-text-2)}
.offer ul li::before,.format ul li::before,.case ul li::before,.split ul li::before,.post ul li::before,ul.checks li::before{color:var(--p-teal)}
ul.checks li{border-bottom-color:var(--p-line)}
.offer .pour,.format .pour{background:rgba(216,183,110,.07);color:#e9d39c;border:1px solid rgba(216,183,110,.2);font-weight:500}
.offer.featured,.format.featured,.guide.featured{
  background:
    linear-gradient(180deg,#15140f,#0b0d12 70%) padding-box,
    linear-gradient(160deg,rgba(216,183,110,.85),rgba(216,183,110,.08) 45%,rgba(140,200,255,.35)) border-box;
  border:1px solid transparent;
  box-shadow:0 40px 80px -40px rgba(216,183,110,.35);
}
.ribbon{background:var(--p-gold);color:#0a0c10;font-family:var(--fd);font-weight:600;letter-spacing:.12em}
.cat .n,.step .num{
  background:transparent;color:var(--p-gold);border:1px solid rgba(216,183,110,.5);
  font-family:var(--fs);font-style:italic;font-weight:400;font-size:22px;box-shadow:none;
}
.cat h2{color:var(--p-text);font-family:var(--fd);font-weight:600;letter-spacing:-.03em}
.cat-intro{color:var(--p-text-2)}

/* Tableaux */
table{color:var(--p-text-2)}
th,td{border-bottom-color:var(--p-line)}
thead th{background:rgba(255,255,255,.04);color:var(--p-text);font-family:var(--fd);font-weight:600;letter-spacing:.02em}
tbody tr:hover{background:rgba(255,255,255,.025)}
td.p{color:var(--p-text);font-family:var(--fd);font-weight:600}
td .desc{color:var(--p-text-3)}
.opt{overflow:hidden}

/* Encadrés divers des pages */
.note,.som{background:rgba(140,200,255,.04);border-color:rgba(140,200,255,.16)}
.som ol,.som a{color:var(--p-text-2)}
.atrancher{background:rgba(216,183,110,.06);border-color:rgba(216,183,110,.25)}
.brouillon{background:rgba(216,183,110,.08);border:1px solid rgba(216,183,110,.4)}
.brouillon p{color:#e9d39c}.brouillon strong{color:#f4e2b5}
.warn{color:#f1dca6}
.also,.proof,.principle,.case .result,.example .bilan,.example .quote{color:var(--p-text-2)}
.proof,.principle,.case .result{border-left-color:var(--p-gold)!important;background:rgba(216,183,110,.05)}
.chip{background:rgba(255,255,255,.03);border:1px solid var(--p-line-2);color:var(--p-text);box-shadow:none;font-weight:500}
.chip:hover{border-color:rgba(216,183,110,.55);box-shadow:none}
.sign{border-top-color:var(--p-line)}

/* Réalisations */
.case .visual{background:radial-gradient(400px 260px at 30% 20%,rgba(140,200,255,.12),transparent 60%),radial-gradient(360px 260px at 85% 90%,rgba(216,183,110,.12),transparent 60%),#0b0f17;border-right:1px solid var(--p-line)}
.case .visual::before{opacity:.25}
.case .kind,.case .body h4{color:var(--p-gold);font-family:var(--fd);font-weight:500;letter-spacing:.2em}
.case .body p{color:var(--p-text-2)}
.case .url{color:var(--p-text-2)}
.case .stats span{background:rgba(255,255,255,.04);border-color:var(--p-line-2);color:var(--p-text-2)}

/* Blog : liste + article */
.post-card h2,.post-card h2 a,.rel .r h3,.rel .r h3 a{color:var(--p-text)}
.post-card h2 a:hover,.rel .r h3 a:hover{color:var(--p-gold)}
.post-card .infos,.post-card .foot{color:var(--p-text-3)}
.post{color:var(--p-text-2)}
.post .intro{color:var(--p-text);font-size:19px}
.post p,.post li{color:#c7cfdb}
.post h2{color:var(--p-text);letter-spacing:-.03em;font-weight:600}
.post h3{color:var(--p-text)}
.post strong{color:var(--p-text)}
.post a:not(.btn):not(.btn-pay){color:var(--p-gold);text-decoration:underline;text-decoration-color:rgba(216,183,110,.4);text-underline-offset:3px}
.post ol li::before{background:transparent;color:var(--p-gold);border:1px solid rgba(216,183,110,.5);font-family:var(--fd)}
.cta-box{
  background:linear-gradient(180deg,#15140f,#0b0d12 70%) padding-box,
    linear-gradient(160deg,rgba(216,183,110,.8),rgba(255,255,255,.06) 50%,rgba(140,200,255,.3)) border-box;
  border:1px solid transparent;box-shadow:none;
}
.cta-box h2{color:var(--p-text)}
.cta-box p{color:var(--p-text-2)}

/* Pages légales (.doc) */
.doc h2,.doc h3{color:var(--p-text)}
.doc h2{border-bottom-color:var(--p-line)}
.doc p,.doc li,.doc ul,.doc ol,.doc th,.doc td{color:var(--p-text-2)}
.doc th,.doc thead th,.doc tbody th{background:rgba(255,255,255,.04)}
.doc th,.doc td{border-color:var(--p-line)}
.doc code{background:rgba(255,255,255,.06);border-color:var(--p-line);color:#e9d39c}
.doc .maj{border-top-color:var(--p-line);color:var(--p-text-3)}
.doc a:not(.btn){color:var(--p-gold)}

/* Bandeau de chiffres (accueil) */
.strip{background:transparent;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.strip::after{display:none}
.strip b{font-family:var(--fd);font-weight:600;letter-spacing:-.035em;background:none;-webkit-text-fill-color:currentColor;color:var(--p-text)}
.strip span{color:var(--p-text-3)}

/* Audit (accueil) */
.audit{background:transparent}
.audit-box::before{height:1px;background:linear-gradient(90deg,transparent,rgba(216,183,110,.9),transparent)}
.audit h2{color:var(--p-text)}
.audit p{color:var(--p-text-2)}
.audit .a-tag{background:rgba(63,214,184,.1);color:#9df0dd;border:1px solid rgba(63,214,184,.4);box-shadow:none;font-family:var(--fd);font-weight:500}

/* ---------------------------------------------------------------------------
   Bloc final (contact) et pied de page
   ------------------------------------------------------------------------- */
.final{
  background:
    radial-gradient(700px 320px at 50% 0%,rgba(216,183,110,.10),transparent 70%),
    radial-gradient(600px 320px at 50% 100%,rgba(140,200,255,.07),transparent 70%),
    var(--p-bg-2);
  border-top:1px solid var(--p-line);
}
.final::before{opacity:0}
.final::after{opacity:.35}
.final h2{font-family:var(--fd);font-weight:600;letter-spacing:-.04em;font-size:clamp(32px,4.6vw,56px);color:var(--p-text)}
.final p{color:var(--p-text-2)}
.final .tel,.final .tel a{color:var(--p-text);font-family:var(--fd);font-weight:600}
.cf-field>span{font-family:var(--fd);font-weight:500;color:var(--p-text)}
.cf-field input,.cf-field textarea{background:rgba(255,255,255,.035);border:1px solid var(--p-line-2);border-radius:14px;color:var(--p-text)}
.cf-field input:focus,.cf-field textarea:focus{border-color:rgba(216,183,110,.7);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(216,183,110,.12)}
.cf-ok{background:rgba(63,214,184,.08);border-color:rgba(63,214,184,.4)}
.cf-ok strong{font-family:var(--fd)}
.cf-fallback a{color:var(--p-gold)}

footer.ft{background:#040509;color:var(--p-text-3);border-top:1px solid var(--p-line);position:relative;z-index:1}
footer.ft a{color:var(--p-text-2)}
footer.ft a:hover{color:#fff}
footer.ft nav a{color:var(--p-text-3)}
footer.ft .fbrand{font-family:var(--fd);font-weight:700;letter-spacing:-.02em}
footer.ft .fbrand span{color:var(--p-gold);letter-spacing:.32em}
footer.ft .legal{border-top-color:var(--p-line);color:#6f7889}
footer.ft strong{color:var(--p-text)}
footer.ft .foot,footer.ft .foot a{color:var(--p-text-3)}

/* Pages de remerciement (merci-*.html) : la carte centrale et son bouton */
.card>a.btn:not(.btn-ghost){background:var(--p-ivory);color:#0a0c10;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 34px -14px rgba(216,183,110,.75)}
.card>a.btn:not(.btn-ghost):hover{background:#fff}
.guide-name{color:var(--p-gold)}
.check{box-shadow:0 0 0 8px rgba(18,183,106,.1)}
.etapes b,.ref b,.note b{color:var(--p-text)}
.titre-suite{color:var(--p-text)}

/* Apparition au défilement : plus courte, plus douce */
[data-reveal]{transform:translateY(18px);transition:opacity .9s var(--p-ease),transform .9s var(--p-ease)}

/* Les éléments de page passent au-dessus du grain */
header,section,.strip,footer.ft,main{position:relative;z-index:1}
/* La barre de navigation reste fixe en haut (ne pas la mettre en relative ici). */
nav.nav{position:fixed;z-index:100}

/* ---------------------------------------------------------------------------
   Mobile d'abord : marges, tailles et espacements resserrés
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  body{font-size:16px}
  section{padding:76px 0}
  .head{padding:128px 0 64px}
  .head h1{font-size:clamp(32px,9.4vw,44px)}
  h2.title{font-size:clamp(28px,8.2vw,38px)}
  .card,.offer,.format,.guide,.why .item,.step{border-radius:18px}
  .btn{padding:14px 22px}
  .links .cta-mini{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .card,.offer,.format,.guide,.why .item,.post-card,.rel .r,.case,.step{transition:none}
  .card:hover,.offer:hover,.format:hover,.guide:hover,.why .item:hover,.post-card:hover,.rel .r:hover,.case:hover,.step:hover{transform:none}
}

/* ---------------------------------------------------------------------------
   Assistant (chatbot.js injecte son propre CSS après cette feuille : le
   préfixe html augmente la spécificité pour reprendre la main sur les couleurs
   sans toucher au script ni à son fonctionnement).
   ------------------------------------------------------------------------- */
html .ecb-launch{background:rgba(14,16,22,.92);color:var(--p-ivory);border:1px solid var(--p-line-2);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8),0 0 0 1px rgba(216,183,110,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
html .ecb-launch:hover{box-shadow:0 22px 48px -12px rgba(0,0,0,.85),0 0 0 1px rgba(216,183,110,.4)}
html .ecb-launch .ecb-dot{background:var(--p-gold);border-color:#0e1016}
html .ecb-panel{background:#0b0d12;border:1px solid var(--p-line-2);box-shadow:0 40px 90px rgba(0,0,0,.7)}
html .ecb-head{background:#0e1016;background-image:radial-gradient(400px 160px at 10% 0%,rgba(216,183,110,.14),transparent 70%);border-bottom:1px solid var(--p-line)}
html .ecb-head .ecb-av{background:rgba(255,255,255,.05);border:1px solid var(--p-line-2)}
html .ecb-head p{color:var(--p-text-3)}
html .ecb-body{background:#0b0d12}
html .ecb-bot{background:rgba(255,255,255,.045);color:var(--p-text-2);border:1px solid var(--p-line);box-shadow:none}
html .ecb-user{background:var(--p-ivory);color:#0a0c10}
html .ecb-msg a,html .ecb-msg .ecb-link{color:var(--p-gold)}
html .ecb-user a{color:#0a0c10}
html .ecb-chips{background:#0b0d12;border-top-color:var(--p-line)}
html .ecb-chip{background:rgba(255,255,255,.04);border-color:var(--p-line-2);color:var(--p-text)}
html .ecb-chip:hover{background:rgba(216,183,110,.08);border-color:rgba(216,183,110,.5)}
html .ecb-foot{background:#0b0d12;color:var(--p-text-3)}
html .ecb-foot a{color:var(--p-text-2)}
td .btn-pay{border-radius:12px;text-align:left}