/* ==========================================================================
   REMIX IA · v2 · 19.08.2026
   Squelette : site noir (structure calee sur le texte, hero 3D three.js).
   Langage visuel : aigocy transpose en sombre.
      - hero centre, badge en pilule, display 96px tracking -0.03em
      - titre en degrade metallique
      - boutons pilule a ombres empilees et liseres internes
      - cartes arrondies, liseré haut, hover qui souleve
      - rythme de section 120px, en-tete centre
      - reveal au scroll fadeUp / fadeRotateX (GSAP ScrollTrigger)
   La mise en page s'adapte au texte : aucune grille n'impose son compte.
   ========================================================================== */

/* ---------- Fonts (auto-hebergees) ---------- */
@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-Medium.woff2') format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Clash Display'; src:url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Medium.woff2') format('woff2');  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Bold.woff2') format('woff2');    font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');     font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/jetbrains-mono-v24-latin_latin-ext-700.woff2') format('woff2');     font-weight:700; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root {
  --bg:            #08090C;
  --bg-2:          #0B0D12;
  --surface:       #101319;
  --surface-hi:    #161A23;
  --border:        rgba(255,255,255,.08);
  --border-hi:     rgba(255,255,255,.15);

  --text:          #F4F3EF;
  --text-2:        #A8ADB8;
  --text-3:        #757B87;

  /* Deux bleus, parce qu'un seul ne peut pas faire les deux jobs :
     --brand est lisible en texte sur le noir (7:1), --brand-deep porte
     les aplats avec du texte blanc dessus (9,7:1).
     19.08 : --brand-deep passe de #1E5FE0 a #24467F, desature et assombri.
     Le bleu franc et sature est la couleur par defaut de tous les frameworks,
     c'est ce qui faisait passer le bouton pour un gabarit gratuit (constat RX).
     Les deux teintes qui suivent sont les bornes du degrade du bouton. */
  --brand:         #4D9BFF;
  --brand-deep:    #24467F;
  --btn-hi:        #2B4E96;
  --btn-lo:        #1C3468;
  --brand-hi:      #7FB6FF;
  --brand-soft:    rgba(77,155,255,.12);
  --brand-line:    rgba(77,155,255,.40);
  --on-brand:      #FFFFFF;

  --font-display: 'Clash Display','Satoshi','Helvetica Neue',Arial,sans-serif;
  --font-body:    'Satoshi','Helvetica Neue',Arial,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 99px;

  --pad-sec: 120px;
  --maxw: 1280px;
  --gutter: 32px;

  /* aigocy : ombre empilee des boutons, retournee pour le sombre */
  --btn-shadow:
    0 -3px 0 0 rgba(0,0,0,.55) inset,
    0 1px 0 0 rgba(255,255,255,.16) inset,
    0 2.77px 2.21px 0 rgba(0,0,0,.22),
    0 6.65px 5.32px 0 rgba(0,0,0,.24),
    0 12.52px 10.02px 0 rgba(0,0,0,.26),
    0 22.34px 17.87px 0 rgba(0,0,0,.28),
    0 41.78px 33.42px 0 rgba(0,0,0,.30);
}

@media (max-width:1199px){ :root { --pad-sec:96px; --gutter:24px; } }
@media (max-width:767px) { :root { --pad-sec:72px; --gutter:20px; } }

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; letter-spacing:-.03em; margin:0; }
p { margin:0; }
ul { margin:0; padding:0; list-style:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection { background:var(--brand-deep); color:var(--on-brand); }

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

.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand-deep); color:var(--on-brand); padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus { left:0; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

/* ---------- Echelle typo (aigocy : display 96 / -0.03em) ---------- */
/* Titre en trois temps courts : il peut encaisser la taille d'aigocy. */
.t-display { font-size:clamp(40px,6.4vw,88px); line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
.t-h2      { font-size:clamp(28px,3.4vw,46px); line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.t-h3      { font-size:clamp(20px,1.7vw,24px); line-height:1.25; letter-spacing:-.02em; }
.t-lead    { font-size:clamp(17px,1.35vw,20px); line-height:1.6; color:var(--text-2); }

/* degrade metallique : l'equivalent sombre de .text-gradient-1 */
.grad {
  background:linear-gradient(132deg,#FFFFFF 6%,#EDEFF3 46%,#AEB4C0 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hl { color:var(--brand); }

/* ---------- Badge pilule (aigocy .sub) ---------- */
.badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px 7px 12px;
  border:1px solid var(--border-hi);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2);
  white-space:nowrap;
}
.badge .dot {
  width:7px; height:7px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 4px var(--brand-soft);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Boutons pilule (aigocy .tf-btn / .tf-btn-2) ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-pill);
  font-weight:700; font-size:16px; line-height:1.4; letter-spacing:-.01em;
  background:radial-gradient(62% 62% at 28% -10%,rgba(255,255,255,.22),rgba(255,255,255,0)),linear-gradient(0deg,#1B1F27,#1B1F27);
  box-shadow:var(--btn-shadow);
  border:1px solid rgba(255,255,255,.07);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),background .28s ease,box-shadow .28s ease;
  will-change:transform;
}
.btn:hover { transform:translateY(-2px); background:radial-gradient(62% 62% at 50% -13%,rgba(255,255,255,.34),rgba(255,255,255,0)),linear-gradient(0deg,#23272F,#23272F); }
.btn .arw { transition:transform .28s cubic-bezier(.2,.7,.3,1); }
.btn:hover .arw { transform:translateX(4px); }

/* Piste B du 19.08 : le relief vient d'un liseré interne et d'une ombre portee,
   pas d'un voile blanc pose sur un aplat sature. Blanc sur ce degrade : 8,0:1
   en haut, 12,1:1 en bas. */
.btn--brand {
  color:var(--on-brand);
  background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo));
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px -14px rgba(0,0,0,.95);
}
.btn--brand:hover { background:linear-gradient(180deg,#33599F,#22407A); }

.btn--ghost {
  background:transparent; box-shadow:none;
  border:1px solid var(--border-hi); color:var(--text);
}
.btn--ghost:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.28); }

.link-arw {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand);
  border-bottom:1px solid var(--brand-line); padding-bottom:3px;
  transition:gap .25s ease,border-color .25s ease;
}
.link-arw:hover { gap:15px; border-color:var(--brand); }

/* ---------- Header ---------- */
.hdr {
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding:18px 0;
  transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck {
  padding:12px 0;
  background:rgba(8,9,12,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--border);
}
.hdr .container { display:flex; align-items:center; justify-content:space-between; gap:24px; }

.brand { display:flex; align-items:baseline; gap:10px; }
.brand-rx { font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-.04em; }
.brand-rx .pt { color:var(--brand); }
.brand-sub { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }

.nav { display:flex; align-items:center; gap:4px; }
.nav a {
  padding:9px 14px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:500; color:var(--text-2);
  transition:color .2s ease,background .2s ease;
}
.nav a:hover { color:var(--text); background:rgba(255,255,255,.06); }
.nav .nav-cta {
  margin-left:8px; color:var(--text);
  border:1px solid var(--border-hi);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
}
.nav .nav-cta:hover { border-color:var(--brand); color:var(--brand); }

.menu-btn {
  display:none; align-items:center; gap:9px;
  padding:9px 16px; border:1px solid var(--border-hi); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
@media (max-width:1099px){ .nav { display:none; } .menu-btn { display:inline-flex; } }

/* ---------- Menu plein ecran ---------- */
.menu {
  position:fixed; inset:0; z-index:120;
  background:var(--bg-2);
  padding:96px var(--gutter) 40px;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s ease,visibility .4s ease;
}
.menu.is-open { opacity:1; visibility:visible; }
.menu-close {
  position:absolute; top:24px; right:var(--gutter);
  padding:9px 16px; border:1px solid var(--border-hi); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.menu-list { max-width:var(--maxw); margin-inline:auto; width:100%; }
.menu-list li { border-bottom:1px solid var(--border); opacity:0; transform:translateY(18px); }
.menu.is-open .menu-list li { opacity:1; transform:none; transition:opacity .5s ease calc(.06s * var(--i)),transform .5s cubic-bezier(.2,.7,.3,1) calc(.06s * var(--i)); }
.menu-list a { display:flex; align-items:baseline; gap:20px; padding:16px 0; transition:color .2s ease,transform .3s cubic-bezier(.2,.7,.3,1); }
.menu-list a:hover { color:var(--brand); transform:translateX(12px); }
.menu-list .idx { font-family:var(--font-mono); font-size:12px; color:var(--text-3); }
.menu-list .lbl { font-family:var(--font-display); font-size:clamp(24px,3.6vw,40px); letter-spacing:-.03em; }
.menu-foot { max-width:var(--maxw); margin:40px auto 0; width:100%; display:flex; flex-wrap:wrap; gap:8px 28px; font-family:var(--font-mono); font-size:12px; color:var(--text-3); }

/* ---------- HERO (centre, aigocy) ---------- */
.hero {
  position:relative; isolation:isolate;
  min-height:100svh; display:flex; align-items:center;
  padding:120px 0 104px; overflow:hidden;
}
.hero-3d, .hero-poster { position:absolute; inset:0; z-index:-2; }
.hero-poster { background-size:cover; background-position:center; opacity:.5; }
.hero::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(78% 58% at 50% 8%,rgba(77,155,255,.16),transparent 62%),
    radial-gradient(100% 74% at 50% 100%,var(--bg) 34%,transparent);
  pointer-events:none;
}

.hero-inner { text-align:center; max-width:1120px; margin-inline:auto; }
.hero h1 { margin:0; }
.hero .t-lead { margin:22px auto 0; max-width:60ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; }

/* Section des prix, posee apres les huit situations : le visiteur s'est
   reconnu avant de voir un chiffre. Trois plans cote a cote, celui du milieu
   colore, chaque carte coupee en deux par un filet avec la liste de ce qui est
   compris en dessous. Structure d'apres la reference envoyee par RX le 19.08
   (David Markov, Pricing section dark mode) ; palette, typo et contenu sont
   ceux du site. Les trois cartes sont alignees en haut, sur le filet et en bas,
   exigence RX : hauteur fixe du bloc prix, bouton pousse en bas, cartes etirees. */
.price-band { padding-block:var(--pad-sec); text-align:center; }
.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;
}

.plans {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-items:stretch; text-align:left; max-width:1180px; margin-inline:auto;
}

.plan {
  display:flex; flex-direction:column; height:100%;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-hi),var(--surface));
  overflow:hidden;
  transition:border-color .4s ease,box-shadow .4s ease;
}
.plan:hover { border-color:var(--border-hi); }

/* La carte du milieu porte la couleur : c'est l'offre qui se
   vend, les deux autres sont l'avant et l'apres. */
.plan--hi {
  border-color:var(--brand-line);
  box-shadow:0 30px 70px -32px rgba(45,120,235,.9);
}
.plan--hi .plan-top {
  background:
    radial-gradient(120% 90% at 78% -20%,rgba(90,160,255,.42),transparent 62%),
    linear-gradient(180deg,#24467F,#1A3462);
  border-bottom-color:rgba(255,255,255,.14);
}
.plan--hi .plan-d { color:rgba(255,255,255,.80); }
.plan--hi .plan-p em { color:rgba(255,255,255,.62); }

.plan-top {
  padding:28px 26px 26px; border-bottom:1px solid var(--border);
  display:flex; flex-direction:column;
}
.plan-n {
  display:block; font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--text-2);
}
.plan--hi .plan-n { color:#FFFFFF; }
.plan-prix { min-height:104px; margin-top:18px; }
.plan-p {
  font-family:var(--font-display); font-size:20px; letter-spacing:-.02em;
  color:var(--text-2);
}
.plan-p strong { font-size:36px; font-weight:600; color:var(--text); letter-spacing:-.035em; }
.plan-p .is-free { color:var(--brand); }
.plan--hi .plan-p, .plan--hi .plan-p strong { color:#FFFFFF; }
.plan-p em { font-style:normal; font-size:14px; color:var(--text-3); margin-left:2px; }
.plan-p2 { font-family:var(--font-display); font-size:20px; letter-spacing:-.02em; color:var(--text-2); margin-top:2px; }
.plan-p2 strong { font-size:26px; font-weight:600; color:var(--text-2); letter-spacing:-.03em; }
.plan--hi .plan-p2, .plan--hi .plan-p2 strong { color:rgba(255,255,255,.9); }
.plan-p2 em { font-style:normal; font-size:14px; color:var(--text-3); margin-left:2px; }
.plan--hi .plan-p2 em { color:rgba(255,255,255,.62); }

.plan-d { font-size:14.5px; line-height:1.55; color:var(--text-2); margin-top:14px; min-height:70px; }

/* Le bouton est pousse en bas du haut de carte : les trois filets tombent
   alors au meme niveau, quelle que soit la longueur du texte au-dessus. */
.plan-cta { width:100%; margin-top:auto; padding-block:13px; padding-inline:20px; font-size:15px; }
.plan--hi .plan-cta {
  background:linear-gradient(180deg,#F7F6F2,#E4E2DB); color:#0A0C10;
  border-color:rgba(255,255,255,.5);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8);
}
.plan--hi .plan-cta:hover { background:linear-gradient(180deg,#FFFFFF,#F1EFE9); }

.plan-list { flex:1; padding:24px 26px 30px; }
.plan-lbl {
  display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px;
}
.plan-list li { display:flex; gap:11px; font-size:14px; line-height:1.5; color:var(--text-2); }
.plan-list li + li { margin-top:12px; }
.plan-list li > span:last-child { flex:1; }
.plan-list li strong { color:var(--text); font-weight:700; }
.ck { flex:none; width:17px; height:17px; margin-top:1px; color:var(--brand); }
.ck svg { width:100%; height:100%; display:block; }

.plan-foot {
  display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; justify-content:space-between;
  max-width:1180px; margin:44px auto 0; text-align:left;
}
.pf-def { font-size:14px; line-height:1.55; color:var(--text-3); max-width:62ch; }
.pf-def strong { color:var(--text-2); font-weight:700; }

@media (max-width:1099px){
  .plans { grid-template-columns:1fr; max-width:560px; }
  .plan-prix { min-height:0; }
  .plan-d { min-height:0; }
  .plan-foot { justify-content:flex-start; }
}

/* ---------- Sections ---------- */
.sec { padding-block:var(--pad-sec); position:relative; }
/* La section qui suit le hero n'a pas besoin de 120px : le hero a deja son fond perdu. */
.hero + .sec { padding-top:64px; }
.sec--alt { background:var(--bg-2); border-block:1px solid var(--border); }
.sec-head { text-align:center; max-width:52ch; margin:0 auto 60px; }
.sec-head .t-h2 { max-width:21ch; margin-inline:auto; }
.sec-head--wide .t-h2 { max-width:34ch; }
.sec-head .badge { margin-bottom:22px; }
.sec-head .t-lead { margin-top:18px; }
.sec-head--wide { max-width:62ch; }

/* ---------- Cartes ---------- */
.card {
  position:relative; isolation:isolate;
  padding:32px; border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--surface-hi),var(--surface));
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .4s ease,box-shadow .4s ease;
  overflow:hidden;
}
.card::before {
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.card::after {
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(70% 60% at 50% 0%,var(--brand-soft),transparent 70%);
  transition:opacity .4s ease;
}
.card:hover { transform:translateY(-5px); border-color:var(--border-hi); box-shadow:0 28px 60px -28px rgba(0,0,0,.85); }
.card:hover::after { opacity:1; }
.card .role, .card .num, .card .lbl {
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}
.card h3 { margin:14px 0 12px; font-size:23px; }
.card p { color:var(--text-2); font-size:16px; }
.card .price {
  display:block; margin-top:22px; padding-top:18px; border-top:1px solid var(--border);
  font-family:var(--font-mono); font-size:14px; font-weight:700;
}
.card .price em { font-style:normal; font-weight:400; color:var(--text-3); }
.card .price.is-free { color:var(--brand); }

/* 1.5 · quatre metiers : 3 cartes + 1 pleine largeur */
.metiers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.metier-me {
  margin-top:20px; padding:38px;
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:32px; align-items:center;
  border-radius:var(--r-lg); border:1px solid var(--brand-line);
  background:linear-gradient(126deg,rgba(77,155,255,.11),rgba(255,255,255,.02) 46%,transparent);
  position:relative; overflow:hidden;
}
.metier-me::before {
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);
}
.metier-me .role { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); }
.metier-me h3 { margin-top:12px; font-size:clamp(26px,2.6vw,36px); }
.metier-me p { color:var(--text-2); }

/* 1.6 · la frise : un trait qui traverse les trois etapes, parce que c'est
   l'enchainement qui compte, pas trois offres posees cote a cote.
   L'etape 03 est facultative : trait en pointilles, point creux, mention. */
.frise { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.frise::before {
  content:''; position:absolute; left:8%; right:41%; top:13px; height:1px;
  background:linear-gradient(90deg,var(--brand-line),var(--brand));
}
.frise::after {
  content:''; position:absolute; left:59%; right:8%; top:13px; height:1px;
  background:repeating-linear-gradient(90deg,var(--border-hi) 0 5px,transparent 5px 11px);
}
/* Colonne flex : le prix est poussé en bas, donc les trois prix restent
   alignés quelle que soit la longueur des descriptions. */
.etape { position:relative; text-align:center; display:flex; flex-direction:column; }
.etape .dot {
  position:relative; z-index:1; width:26px; height:26px; margin:0 auto 24px;
  border-radius:50%; display:grid; place-items:center;
  background:var(--bg-2); border:1px solid var(--brand);
  font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--brand);
  transition:background .3s ease,color .3s ease;
}
.etape:hover .dot { background:var(--brand); color:var(--on-brand); }
.etape h3 { font-size:22px; margin-bottom:10px; }
.etape p { font-size:15.5px; line-height:1.55; color:var(--text-2); max-width:36ch; margin-inline:auto; }
.etape p strong { color:var(--text); font-weight:700; }
.etape .prix { display:block; margin-top:auto; padding-top:18px; font-family:var(--font-mono); font-size:14px; font-weight:700; }
.etape .prix em { font-style:normal; font-weight:400; color:var(--text-3); }
.etape .prix--free { color:var(--brand); }

.etape--opt .dot { border-color:var(--border-hi); color:var(--text-3); }
.etape--opt:hover .dot { background:var(--surface-hi); color:var(--text-2); }

/* Les deux entrees de cote, sous la frise et en retrait : pas des etapes 04 et 05. */
.portes { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; margin-top:60px; border-top:1px solid var(--border); }
.porte { display:block; padding:30px 0 0; }
.porte .lbl { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }
.porte h4 { font-family:var(--font-display); font-weight:600; font-size:20px; letter-spacing:-.02em; margin:10px 0 8px; transition:color .25s ease; }
.porte:hover h4 { color:var(--brand); }
.porte p { font-size:15px; line-height:1.55; color:var(--text-2); }
.porte .prix { display:inline-block; margin-top:14px; font-family:var(--font-mono); font-size:13.5px; font-weight:700; }
.porte .prix em { font-style:normal; font-weight:400; color:var(--text-3); }
.porte .prix--free { color:var(--brand); }
.chain-foot { margin-top:44px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.chain-foot p { color:var(--text-2); }
.chain-foot a:not(.link-arw) { color:var(--brand); border-bottom:1px solid var(--brand-line); }

/* 1.7 · huit situations. Plus de cartes : huit boites d'affilee, c'etait huit
   fois le meme bruit visuel (constat RX du 19.08, piste B de apercu-situations).
   Deux colonnes de lignes, separees par un filet. Ce qui porte le regard est le
   texte, pas le contenant, et la section ne gagne pas en hauteur. */
.situations { display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
.sit {
  display:flex; gap:20px; align-items:flex-start;
  padding:26px 4px; border-top:1px solid var(--border);
}
/* Les deux premieres lignes n'ont pas de filet : il separe, il n'encadre pas. */
.situations .sit:nth-child(-n+2) { border-top:0; padding-top:4px; }
.sit-ico {
  flex:none; width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center;
  background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand);
  transition:background .35s ease,border-color .35s ease;
}
.sit-ico svg { width:23px; height:23px; }
.sit h3 { font-size:17px; line-height:1.28; transition:color .3s ease; }
.sit p { font-size:14.5px; line-height:1.55; color:var(--text-2); margin-top:7px; }
.sit:hover h3 { color:var(--brand-hi); }
.sit:hover .sit-ico { background:rgba(77,155,255,.22); border-color:var(--brand); }

/* ---------- Bandeau contact ---------- */
.cta-band { position:relative; isolation:isolate; padding-block:var(--pad-sec); overflow:hidden; text-align:center; }
.cta-band .bg-media { position:absolute; inset:0; z-index:-2; }
.cta-band video, .cta-band .bg-media img { width:100%; height:100%; object-fit:cover; opacity:.24; }
.cta-band::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(72% 62% at 50% 50%,rgba(8,9,12,.55),var(--bg) 82%);
}
.cta-band .t-lead { margin:20px auto 0; max-width:56ch; }
.cta-band .actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:center; margin-top:36px; }
.cta-band .meta { font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }

/* ---------- Footer ---------- */
.ftr { border-top:1px solid var(--border); background:var(--bg-2); padding:72px 0 32px; }
.ftr-grid { display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:48px; }
.ftr h4 { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); margin-bottom:18px; }
.ftr li + li { margin-top:11px; }
.ftr a { color:var(--text-2); font-size:15px; transition:color .2s ease; }
.ftr a:hover { color:var(--brand); }
.ftr-note { margin-top:18px; color:var(--text-3); font-size:14.5px; max-width:40ch; }
.ftr-bot { margin-top:48px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--text-3); }

/* ---------- Reveal (equivalent .effectFade d'aigocy) ---------- */
.fx-on .fx { opacity:0; will-change:transform,opacity; }
.fx-on .fx-up { transform:translateY(38px); }
.fx-on .fx-rx { transform:perspective(900px) rotateX(-32deg) translateY(30px); transform-origin:50% 100%; }
.is-in { opacity:1 !important; transform:none !important; }
.no-js .fx, .no-gsap .fx { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:899px){
  .metiers, .frise { grid-template-columns:1fr; }
  .situations { grid-template-columns:1fr; gap:0; }
  .situations .sit:nth-child(2) { border-top:1px solid var(--border); padding-top:26px; }
  .frise::before, .frise::after { display:none; }
  .etape { text-align:left; }
  .etape .dot { margin-inline:0; }
  .etape p { margin-inline:0; }
  .metier-me { grid-template-columns:1fr; padding:30px; }
  .portes { grid-template-columns:1fr; gap:0; }
  .ftr-grid { grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:599px){
  body { font-size:16px; }
  .hero { padding-top:120px; min-height:auto; }
  .ftr-grid { grid-template-columns:1fr; }
  .card { padding:24px; }
  .chain-foot { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .fx { opacity:1; transform:none; }
}