@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#F2F2F3;--muted:#A8A8AE;--bg:#000000;--white:#161616;--line:#2E2E2E;--accent:#2E2E2E;--dark:#0B0B0B;--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"DM Sans",sans-serif;background:#000000}a{text-decoration:none;color:inherit}button{font:inherit}
.nav{position:fixed;z-index:50;top:16px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 34px));height:64px;padding:0 14px 0 20px;display:flex;align-items:center;justify-content:space-between;background:rgba(16,16,16,.72);backdrop-filter:blur(18px);border:1px solid #2E2E2E;border-radius:999px;color:#F2F2F3;transition:.35s}
.nav.scrolled{background:rgba(10,10,10,.94);top:9px}.brand{font:600 20px Manrope;letter-spacing:-.06em;display:flex;gap:7px;align-items:center}.brand-mark{font-size:24px;font-weight:400}.dot{opacity:.5}.nav nav{display:flex;gap:34px;font-size:13px;color:#dce2e2}.nav nav a:hover{color:#F2F2F3}.nav-cta{background:#F2F2F3;color:#131315;color:#111;padding:12px 18px;border-radius:999px;font-size:12px}.nav-cta span{margin-left:10px}.menu-btn{display:none;background:none;border:0;color:white}.menu-btn i{display:block;width:22px;height:1px;background:white;margin:6px}
.hero{min-height:760px;padding:150px max(7vw,35px) 80px;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;background:radial-gradient(circle at 72% 45%,#1C1C1C 0,#141414 35%,#0B0B0B 70%,#000000 100%);color:#F2F2F3;position:relative}.hero:after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none}
.hero-copy{max-width:570px;position:relative;z-index:3}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:600;opacity:.65;margin:0 0 24px}.hero h1,h2{font:500 clamp(45px,5.2vw,78px)/.98 Manrope;letter-spacing:-.065em;margin:0}.hero h1 em,h2 em{font-style:normal;opacity:.47}.hero-text{font-size:15px;line-height:1.7;max-width:470px;color:#e1e6e6;margin:30px 0}.actions{display:flex;gap:10px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 20px;border-radius:999px;font-size:12px;transition:.25s;border:1px solid #2E2E2E}.btn:hover{transform:translateY(-2px)}.btn-light{background:#F2F2F3;color:#131315;color:#161b1c}.btn-ghost{border-color:#2E2E2E;color:#F2F2F3}.btn-outline{border-color:#2E2E2E}.btn-dark{background:#000000;color:white;border:1px solid #2E2E2E}.micro-stats{display:flex;gap:40px;margin-top:70px}.micro-stats div{display:grid;gap:5px}.micro-stats strong{font:500 18px Manrope}.micro-stats span{font-size:10px;opacity:.6}
.hero-visual{height:570px;position:relative;display:flex;align-items:center;justify-content:center}.halo{position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),transparent 64%);filter:blur(5px)}.face-placeholder{width:320px;height:440px;border-radius:47% 47% 44% 44%;position:relative;background:linear-gradient(135deg,#242424,#141414 52%,#000000);box-shadow:0 35px 80px rgba(0,0,0,.3);overflow:hidden}.face-placeholder:before{content:"";position:absolute;left:-12%;right:-12%;top:-20px;height:120px;background:linear-gradient(#1e1817,#47302b);border-radius:50%}.face-shape{position:absolute;inset:105px 42px 75px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 48%,rgba(0,0,0,.12));border-radius:48%}.eye{position:absolute;width:42px;height:14px;border-bottom:2px solid #2E2E2E;border-radius:50%;top:95px}.eye.left{left:35px}.eye.right{right:35px}.nose{position:absolute;width:22px;height:80px;left:calc(50% - 11px);top:125px;border-right:2px solid #2E2E2E;border-radius:50%}.mouth{position:absolute;width:56px;height:18px;left:calc(50% - 28px);top:225px;border-bottom:2px solid #2E2E2E;border-radius:50%}.scan-line{position:absolute;width:380px;height:1px;background:rgba(255,255,255,.55);box-shadow:0 0 16px rgba(255,255,255,.8);animation:scan 4s ease-in-out infinite}.floating{position:absolute;background:rgba(22,22,22,.82);backdrop-filter:blur(12px);border:1px solid #2E2E2E;border-radius:14px;padding:16px 18px;box-shadow:0 20px 45px rgba(0,0,0,.18);animation:float 4s ease-in-out infinite}.score-card{right:2%;top:21%;display:grid}.score-card span,.metric-card span{font-size:9px;letter-spacing:.13em;opacity:.6}.score-card strong{font:500 39px Manrope}.score-card small{opacity:.5}.metric-card{left:2%;bottom:19%;min-width:145px}.metric-card strong{display:block;font:500 25px Manrope;margin-top:6px}.metric-card b{display:block;width:100%;height:3px;background:linear-gradient(90deg,#F2F2F3 0 92%,rgba(255,255,255,.15) 92%);margin-top:9px}
.press{height:100px;background:#000000;display:flex;justify-content:space-around;align-items:center;color:#879092;font-size:9px;letter-spacing:.17em;border-bottom:1px solid #2E2E2E}
.section{padding:130px max(7vw,35px)}.section-tag{font-size:9px;letter-spacing:.22em;color:#7B7B7B;margin-bottom:65px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:end}.two-col>p,.two-col>div+p{font-size:15px;line-height:1.8;color:#727b7e;max-width:500px}.eyebrow.dark{color:#707a7d}.text-link{font-size:12px;border-bottom:1px solid #2E2E2E;padding-bottom:6px}.dashboard{margin:80px auto 0;max-width:1080px;border:1px solid #2E2E2E;border-radius:20px;background:#000000;box-shadow:0 35px 80px rgba(20,35,35,.08);overflow:hidden}.dash-top{height:58px;border-bottom:1px solid #2E2E2E;padding:0 25px;display:flex;align-items:center;justify-content:space-between;font-size:12px}.dash-top b{font-size:22px;margin-left:10px}.dash-body{display:grid;grid-template-columns:190px 1fr;min-height:430px}.dash-body aside{border-right:1px solid #2E2E2E;padding:25px}.dash-body aside div{font-size:11px;color:#899193;padding:13px;border-radius:8px}.dash-body aside .side-active{background:#000000;color:#131315;border:1px solid #2E2E2E}.dash-main{display:grid;grid-template-columns:42% 1fr;gap:50px;padding:50px}.portrait{border:1px solid #2E2E2E;background:#000000;border-radius:16px;position:relative;display:flex;align-items:center;justify-content:center;min-height:330px;border:1px solid #2E2E2E}.mini-face{width:155px;height:220px;background:linear-gradient(135deg,#242424,#0B0B0B);border-radius:48%;position:relative}.mini-face .eye{transform:scale(.55);top:65px}.mini-face .eye.left{left:13px}.mini-face .eye.right{right:13px}.mini-face .nose{transform:scale(.55);top:75px}.mini-face .mouth{transform:scale(.55);top:122px}.point{width:8px;height:8px;border:2px solid #2E2E2E;border-radius:50%;position:absolute;box-shadow:0 0 0 4px rgba(80,110,110,.25)}.p1{left:36%;top:33%}.p2{right:36%;top:33%}.p3{left:50%;top:50%}.p4{left:50%;bottom:31%}.metrics{display:flex;flex-direction:column;justify-content:center;gap:24px}.metric-row{display:grid;grid-template-columns:1fr 35px;gap:12px;align-items:center;font-size:11px}.metric-row strong{font-size:15px}.metric-row i{grid-column:1/-1;height:4px;background:#000000;border-radius:5px;overflow:hidden;border:1px solid #2E2E2E}.metric-row i b{height:100%;display:block;background:#F2F2F3;border-radius:5px}
.light{background:#000000}.center-head{text-align:center;max-width:800px;margin:0 auto 70px}.center-head h2{font-size:clamp(40px,5vw,68px)}.center-head>p:last-child{max-width:570px;margin:28px auto 0;color:#778082;line-height:1.8;font-size:14px}.cards{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.feature-card{background:#000000;border:1px solid #2E2E2E;border-radius:17px;padding:28px;min-height:310px;display:flex;flex-direction:column;transition:.3s}.feature-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(30,50,50,.08)}.feature-card small{color:#90999a}.card-icon{font-size:28px;margin:50px 0 25px}.feature-card h3{font:500 20px Manrope;margin:0 0 10px;letter-spacing:-.04em}.feature-card p{color:#81898b;font-size:12px;line-height:1.7}.feature-card span{font-size:10px;margin-top:auto}
.transformation{background:#000000;color:#F2F2F3}.transformation .section-tag{color:#839092}.transformation .two-col>p{color:#a9b1b2}.transformation .eyebrow{color:#b6c0c1}.compare{max-width:1080px;height:500px;margin:80px auto 0;display:grid;grid-template-columns:1fr 70px 1fr;border-radius:20px;overflow:hidden}.compare-panel{border:1px solid #2E2E2E;position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:28px;background:linear-gradient(145deg,#141414,#000000)}.compare-panel.after{border:1px solid #2E2E2E;background:linear-gradient(145deg,#161616,#000000)}.compare-panel>span{position:absolute;left:25px;top:25px;font-size:9px;letter-spacing:.18em;z-index:2}.compare-divider{display:flex;align-items:center;justify-content:center;background:#000000;border:1px solid #2E2E2E}.compare-divider b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#000000;color:#131315;border:1px solid #2E2E2E}.silhouette{margin-top:55px;width:230px;height:360px;border-radius:48% 48% 42% 42%;background:linear-gradient(135deg,#242424,#0B0B0B);box-shadow:0 30px 60px rgba(0,0,0,.25)}.silhouette.improved{width:235px;border-radius:47% 47% 39% 39%;filter:saturate(1.05);transform:scaleX(.97)}
.expert-grid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.expert{text-align:center}.expert-avatar{width:110px;height:110px;border-radius:50%;margin:0 auto 18px;background:linear-gradient(145deg,#2E2E2E,#161616);display:grid;place-items:center;color:#F2F2F3;font:600 16px Manrope}.expert strong,.expert span{display:block}.expert strong{font:500 12px Manrope}.expert span{font-size:9px;color:#8b9495;margin-top:5px}
.dark-section{background:#000000;color:#F2F2F3}.dark-section .section-tag{color:#869294}.dark-section .center-head>p:last-child{color:#aab2b3}.steps{max-width:1100px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#000000;border:1px solid #2E2E2E}.step{min-height:260px;background:#000000;padding:35px}.step b{font-size:10px;color:#8d999a}.step h3{font:500 28px Manrope;margin:70px 0 10px}.step p{color:#a5adae;font-size:12px;line-height:1.7;max-width:250px}
.price-grid{max-width:1100px;margin:70px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.price-card{border:1px solid #2E2E2E;border-radius:18px;padding:32px;min-height:450px;display:flex;flex-direction:column;justify-content:space-between;background:#000000}.price-card.featured{background:#000000;border-color:#2E2E2E;transform:translateY(-12px);border:1px solid #2E2E2E}.price-card small{font-size:9px;letter-spacing:.15em}.price-card h3{font:500 45px Manrope;margin:24px 0 8px;letter-spacing:-.06em}.price-card h3 span{font:400 10px DM Sans;color:#7e8788}.price-card p{font-size:12px;color:#A8A8AE;line-height:1.6}.price-card ul{list-style:none;padding:0;margin:30px 0}.price-card li{font-size:11px;padding:9px 0;border-bottom:1px solid #2E2E2E;color:#687274}
.faq .two-col{align-items:start}.accordion{border-top:1px solid #2E2E2E}.faq-item{border-bottom:1px solid #2E2E2E}.faq-item button{border:0;background:none;width:100%;padding:23px 0;text-align:left;display:flex;justify-content:space-between;font-size:13px;cursor:pointer}.faq-item button span{font-size:20px;transition:.25s}.faq-item.open button span{transform:rotate(45deg)}.faq-item>div{max-height:0;overflow:hidden;transition:max-height .35s}.faq-item p{color:#A8A8AE;font-size:12px;line-height:1.8;padding:0 35px 22px 0;margin:0}

.reveal{opacity:0;transform:translateY(35px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:none}.delay{transition-delay:.15s}@keyframes scan{0%,100%{transform:translateY(-150px);opacity:0}20%,80%{opacity:1}50%{transform:translateY(150px)}}@keyframes float{50%{transform:translateY(-8px)}}
@media(max-width:900px){.nav nav{display:none}.menu-btn{display:block}.nav.mobile-open nav{position:absolute;top:70px;left:0;right:0;display:flex;flex-direction:column;gap:0;background:#000000;border-radius:20px;padding:10px;border:1px solid #2E2E2E}.nav.mobile-open nav a{padding:16px}.hero{grid-template-columns:1fr;min-height:900px;padding-top:150px}.hero-visual{height:450px;margin-top:20px}.face-placeholder{width:260px;height:350px}.score-card{right:4%;top:10%}.metric-card{left:4%;bottom:12%}.cards{grid-template-columns:1fr 1fr}.dash-main{grid-template-columns:1fr}.portrait{border:1px solid #2E2E2E;min-height:250px;border:1px solid #2E2E2E}.expert-grid{grid-template-columns:repeat(3,1fr);gap:35px}.price-grid{grid-template-columns:1fr}.price-card.featured{transform:none;border:1px solid #2E2E2E}.two-col{grid-template-columns:1fr;gap:35px}.steps{grid-template-columns:1fr;border:1px solid #2E2E2E}.compare{height:390px;grid-template-columns:1fr 50px 1fr}.silhouette{width:150px;height:260px}}
@media(max-width:600px){.nav-cta{display:none}.hero{padding-left:25px;padding-right:25px}.hero h1{font-size:46px}.micro-stats{gap:18px}.press{overflow:hidden;gap:35px;justify-content:flex-start;padding:0 25px;white-space:nowrap}.section{padding:90px 25px}.section-tag{margin-bottom:45px}.cards{grid-template-columns:1fr}.dash-body{grid-template-columns:1fr}.dash-body aside{display:none}.dash-main{padding:25px;gap:25px}.expert-grid{grid-template-columns:1fr 1fr}.expert-avatar{width:90px;height:90px}.compare{grid-template-columns:1fr;height:320px}.compare-divider{width:45px;border:1px solid #2E2E2E}.silhouette{width:105px;height:220px}.center-head h2{font-size:43px}}


/* ====================================================================
   UNE SEULE LARGEUR POUR TOUTES LES SECTIONS
   Chaque section posait son retrait en `max(7vw, 35px)` : un pourcentage,
   donc un contenu qui s'écarte sans fin à mesure que l'écran grandit, et
   des débuts de ligne différents d'une section à l'autre.

   LE RETRAIT PLUTÔT QU'UNE LARGEUR. `max-width` aurait rétréci les bandes
   de fond avec leur contenu ; ici les bandes continuent d'aller d'un bord à
   l'autre, et seul ce qu'elles portent se cale sur la même verticale.

   Écrit après tout le reste pour l'emporter sur les retraits d'origine,
   y compris ceux des requêtes média — d'où la reprise du cas téléphone.
   ==================================================================== */
.hero, .section, .press{
  box-sizing:border-box;
  /* MÊME VERTICALE QUE L'EN-TÊTE DU SITE. Celui-ci cale son contenu dans
     1600 px avec 32 px de marge (.bpTopHeader-inner) ; le pied de page fait
     de même (.bpFooter-inner). On reproduit le calcul plutôt que la valeur :
     le retrait vaut la marge tant que l'écran est étroit, puis absorbe le
     surplus dès qu'il dépasse 1600 px. */
  padding-inline:max(32px, calc((100% - 1600px) / 2 + 32px));
}
@media (max-width:719.98px){
  /* 24 px sous 720 px : la valeur du pied de page, plus respirable que les
     16 px de la barre mobile, qui n'est qu'un bandeau. */
  .hero, .section, .press{ padding-inline:24px; }
}

/* L'en-tête du site est en position fixe : sans réserve en haut, la première
   ligne du hero passerait dessous. */
.hero{ padding-top:56px; }
@media (max-width:900px){ .hero{ padding-top:40px; } }

/* ====================================================================
   LES QUATRE NOUVELLES SECTIONS
   --------------------------------------------------------------------
   REPEINTES, PAS RECOPIÉES. Le CSS fourni était clair : `background:#fff`
   sur les quatre sections, gris pâles, texte noir. Posé tel quel il aurait
   rouvert quatre bandes blanches au milieu d'une page dont le noir a été
   demandé six fois. Chaque couleur est donc retraduite dans la palette du
   dashboard : fond #000, cadres #2E2E2E, encre #F2F2F3, second plan
   #A8A8AE / #7B7B7B. La structure, elle, est intacte.

   PAS DE `padding-inline` ICI : le retrait commun plus haut cale déjà ces
   sections sur la même verticale que les autres. En redéclarer un ici les
   en décrocherait — c'est exactement ce qu'on venait de corriger.
   ==================================================================== */

.section-pill{
  display:inline-block;
  font-size:9px;
  letter-spacing:.22em;
  color:#7B7B7B;
  border:1px solid #2E2E2E;
  border-radius:999px;
  padding:7px 14px;
  margin-bottom:26px;
}

/* ── 1. Suivi des mesures ─────────────────────────────────────────── */
.progress-section{ padding-block:130px; background:#000; }
.progress-header{ max-width:760px; margin:0 0 70px; }
.progress-header h2{ font:500 clamp(38px,4.4vw,60px)/1.02 Manrope; letter-spacing:-.055em; }
.progress-header h2 span{ color:#7B7B7B; }
.progress-header p{ margin:26px 0 0; max-width:540px; font-size:14px; line-height:1.8; color:#A8A8AE; }

.progress-dashboard{
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr;
  gap:14px;
  align-items:start;
}
.progress-column{ display:flex; flex-direction:column; gap:14px; }

.bio-card{
  background:#000;
  border:1px solid #2E2E2E;
  border-radius:16px;
  padding:22px;
}
.bio-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bio-top strong{ font:500 13px Manrope; letter-spacing:-.02em; color:#F2F2F3; }
.bio-top span{
  font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px;
  color:#A8A8AE; background:#161616; border:1px solid #2E2E2E;
}
.bio-top span.ideal{     color:#6EE7A0; background:#1D3022; border-color:#1D3022; }
.bio-top span.improving{ color:#6EE7A0; background:#1D3022; border-color:#1D3022; }
.bio-top span.warning{   color:#FBBF24; background:#241C0A; border-color:#241C0A; }

.bio-number{
  font:500 46px/1 Manrope; letter-spacing:-.05em;
  color:#F2F2F3; margin:22px 0 18px;
}
.bio-number.age small{ font-size:12px; letter-spacing:.14em; color:#7B7B7B; margin-left:6px; }

.scale-line{ height:3px; border-radius:999px; background:#1F1F1F; overflow:hidden; }
.scale-progress{ height:100%; background:#F2F2F3; border-radius:999px; }
.scale-labels{
  display:flex; justify-content:space-between; margin-top:10px;
  font-size:8px; letter-spacing:.16em; color:#7B7B7B;
}

/* Colonne centrale : le visage et la courbe */
.progress-center{ display:flex; flex-direction:column; gap:14px; }

.face-analysis{
  background:#000; border:1px solid #2E2E2E; border-radius:16px;
  padding:22px; position:relative; min-height:300px;
  display:flex; flex-direction:column;
}
.face-title{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#7B7B7B; }
.face-visual{
  flex:1; margin:18px 0 0; border-radius:12px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#1C1C1C,#0B0B0B 60%,#000);
}
.face-glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.16),transparent 62%);
}
.face-score{
  position:absolute; right:22px; bottom:22px;
  background:#000; border:1px solid #2E2E2E; border-radius:12px;
  padding:10px 14px; display:flex; align-items:baseline; gap:5px;
}
.face-score strong{ font:500 22px Manrope; letter-spacing:-.04em; color:#F2F2F3; }
.face-score small{ font-size:8px; letter-spacing:.16em; color:#7B7B7B; }

.progress-chart{
  background:#000; border:1px solid #2E2E2E; border-radius:16px; padding:22px;
}
.chart-legend{ display:flex; gap:22px; font-size:10px; color:#A8A8AE; }
.chart-legend span{ display:flex; align-items:center; gap:7px; }
.chart-legend i{ width:14px; height:2px; border-radius:999px; display:inline-block; }
.legend-one{ background:#F2F2F3; }
.legend-two{ background:#2E2E2E; }

.chart{ position:relative; margin-top:20px; padding-left:34px; }
.chart-y{
  position:absolute; left:0; top:0; bottom:0;
  display:flex; flex-direction:column; justify-content:space-between;
  font-size:8px; color:#7B7B7B;
}
.chart svg{ width:100%; height:190px; display:block; overflow:visible; }
.chart-main-line{ stroke:#1F1F1F; stroke-width:1; }
.chart-line-one{ fill:none; stroke:#F2F2F3; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart-line-two{ fill:none; stroke:#2E2E2E; stroke-width:2; stroke-dasharray:5 5; }
.chart-point{ fill:#000; stroke:#F2F2F3; stroke-width:2; }
.chart-value{
  position:absolute; right:0; top:6px;
  font:500 30px Manrope; letter-spacing:-.05em; color:#F2F2F3;
}

/* ── 2. Les évaluations ───────────────────────────────────────────── */
.assessment-section{ padding-block:130px; background:#000; }
.assessment-header{ text-align:center; max-width:720px; margin:0 auto 70px; }
.qoves-symbol{ font-size:26px; color:#7B7B7B; margin-bottom:24px; }
.assessment-header h2{ font:500 clamp(36px,4.2vw,56px)/1.05 Manrope; letter-spacing:-.055em; }
.assessment-header h2 span{ color:#7B7B7B; }
.assessment-header p{ margin:24px 0 0; font-size:14px; color:#A8A8AE; }
.assessment-meta{
  display:flex; justify-content:center; gap:34px; margin-top:30px;
  font-size:9px; letter-spacing:.18em; color:#7B7B7B;
}
.assessment-meta div{ display:flex; align-items:center; gap:8px; }
.assessment-meta b{ font-size:12px; color:#A8A8AE; }

.assessment-list{ max-width:1180px; margin:0 auto; border-top:1px solid #2E2E2E; }
.assessment-row{
  display:grid;
  grid-template-columns:44px 56px 1fr auto 40px;
  align-items:center; gap:20px;
  padding:18px 4px;
  border-bottom:1px solid #2E2E2E;
}
.assessment-number{ font-size:10px; letter-spacing:.14em; color:#7B7B7B; }
.assessment-image{
  width:56px; height:56px; border-radius:10px; overflow:hidden;
  background:linear-gradient(145deg,#1C1C1C,#000);
  border:1px solid #2E2E2E; display:grid; place-items:center;
}
.assessment-icon{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.28),transparent 65%);
}
.assessment-name{ font:500 17px Manrope; letter-spacing:-.03em; color:#F2F2F3; }
.assessment-count{ font-size:11px; color:#7B7B7B; }
.assessment-plus{
  width:34px; height:34px; border-radius:50%;
  background:none; border:1px solid #2E2E2E; color:#A8A8AE;
  font-size:16px; line-height:1; cursor:pointer; transition:.25s;
}
.assessment-plus:hover{ background:#161616; color:#F2F2F3; }

/* ── 3. Ce qui vous distingue ─────────────────────────────────────── */
.discover-section{ padding-block:130px; background:#000; }
.discover-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; margin-bottom:60px;
}
.discover-header h2{ font:500 clamp(36px,4.2vw,58px)/1.03 Manrope; letter-spacing:-.055em; }
.discover-header h2 span{ color:#7B7B7B; }
.discover-header p{ margin:24px 0 0; font-size:14px; color:#A8A8AE; max-width:480px; }
.discover-button{
  flex:0 0 auto;
  border:1px solid #2E2E2E; border-radius:999px;
  padding:14px 24px; font-size:12px; color:#F2F2F3; transition:.25s;
}
.discover-button:hover{ background:#161616; }

.discover-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.discover-card{
  background:#000; border:1px solid #2E2E2E; border-radius:18px;
  padding:28px; display:flex; flex-direction:column;
}
.discover-index{
  width:28px; height:28px; border-radius:50%;
  border:1px solid #2E2E2E; display:grid; place-items:center;
  font-size:11px; color:#7B7B7B; margin-bottom:22px;
}
.discover-card h3{ font:500 21px/1.25 Manrope; letter-spacing:-.035em; margin:0; color:#F2F2F3; }
.discover-card p{ margin:14px 0 26px; font-size:13px; line-height:1.75; color:#A8A8AE; }

.feature-visual{
  margin-top:auto; position:relative; height:290px;
  border-radius:14px; overflow:hidden; border:1px solid #2E2E2E;
  background:linear-gradient(160deg,#1C1C1C,#0B0B0B 55%,#000);
}
.eye-image, .portrait-person, .profile-person{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.14),transparent 60%);
}
.visual-panel{
  position:absolute; left:14px; right:14px;
  background:rgba(0,0,0,.82); backdrop-filter:blur(10px);
  border:1px solid #2E2E2E; border-radius:11px;
  padding:11px 14px; font-size:11px; color:#A8A8AE;
}
.visual-panel.top{ top:14px; }
.visual-panel.bottom{ bottom:14px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.visual-panel small{ font-size:8px; letter-spacing:.16em; color:#7B7B7B; }
.visual-panel strong{ font:500 15px Manrope; letter-spacing:-.03em; color:#F2F2F3; }

.feature-tags{ position:absolute; inset:auto 14px 64px; display:flex; flex-wrap:wrap; gap:6px; }
.feature-tags span{
  font-size:9px; letter-spacing:.06em; color:#A8A8AE;
  background:rgba(0,0,0,.7); border:1px solid #2E2E2E;
  border-radius:999px; padding:5px 10px;
}
.projection{
  position:absolute; top:14px; right:14px;
  background:rgba(0,0,0,.82); border:1px solid #2E2E2E; border-radius:11px;
  padding:11px 14px; display:flex; align-items:baseline; gap:4px;
}
.projection small{ font-size:8px; letter-spacing:.16em; color:#7B7B7B; margin-right:6px; }
.projection strong{ font:500 18px Manrope; letter-spacing:-.04em; color:#F2F2F3; }
.projection span{ font-size:10px; color:#7B7B7B; }

/* ── 4. La technologie ────────────────────────────────────────────── */
.technology-section{ padding-block:130px; background:#000; }
.technology-header{ max-width:760px; margin:0 0 70px; }
.technology-header h2{ font:500 clamp(38px,4.4vw,60px)/1.02 Manrope; letter-spacing:-.055em; }
.technology-header h2 span{ color:#7B7B7B; }
.technology-header p{ margin:26px 0 0; max-width:560px; font-size:14px; line-height:1.8; color:#A8A8AE; }

.technology-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.technology-card{
  background:#000; border:1px solid #2E2E2E; border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column;
}
.tech-content{ padding:26px 28px 30px; }
.tech-content h3{ font:500 22px Manrope; letter-spacing:-.035em; margin:0; color:#F2F2F3; }
.tech-content p{ margin:13px 0 0; font-size:13px; line-height:1.75; color:#A8A8AE; }

.tech-image, .tech-globe, .science-network, .review-dashboard{
  height:280px; position:relative; overflow:hidden;
  border-bottom:1px solid #2E2E2E;
  background:linear-gradient(160deg,#1C1C1C,#0B0B0B 55%,#000);
}
.tech-man{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.15),transparent 60%);
}
.globe-lines{
  position:absolute; left:50%; top:50%; width:200px; height:200px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid #2E2E2E;
  background:
    repeating-linear-gradient(to bottom,transparent 0 19px,#1F1F1F 19px 20px),
    radial-gradient(circle at 42% 36%,rgba(255,255,255,.12),transparent 62%);
}
.globe-lines::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid #1F1F1F; transform:scaleX(.45);
}

.science-network{ display:grid; place-items:center; }
.network-center{
  width:64px; height:64px; border-radius:50%;
  border:1px solid #2E2E2E; background:#000;
  display:grid; place-items:center; color:#A8A8AE; font-size:18px;
}
.science-network .node{
  position:absolute; font-size:9px; letter-spacing:.06em; color:#A8A8AE;
  background:#000; border:1px solid #2E2E2E; border-radius:999px; padding:5px 11px;
}
.node-1{ top:34px;  left:36px; }
.node-2{ top:26px;  right:34px; }
.node-3{ top:50%;   left:20px;  transform:translateY(-50%); }
.node-4{ top:50%;   right:20px; transform:translateY(-50%); }
.node-5{ bottom:34px; left:44px; }
.node-6{ bottom:26px; right:38px; }

.review-dashboard{ padding:30px; }
.review-title{ font:500 14px Manrope; letter-spacing:-.02em; color:#F2F2F3; }
.review-bars{ display:flex; flex-direction:column; gap:11px; margin-top:24px; max-width:70%; }
.review-bars span{ height:8px; border-radius:999px; background:#1F1F1F; display:block; }
.review-bars span:nth-child(1){ width:82%; background:#2E2E2E; }
.review-bars span:nth-child(2){ width:64%; }
.review-bars span:nth-child(3){ width:73%; background:#2E2E2E; }
.review-bars span:nth-child(4){ width:48%; }
.review-circle{
  position:absolute; right:30px; bottom:30px;
  width:52px; height:52px; border-radius:50%;
  border:1px solid #2E2E2E; background:#000;
  display:grid; place-items:center; color:#6EE7A0; font-size:19px;
}

/* ── Adaptations petits écrans ────────────────────────────────────── */
@media(max-width:1000px){
  .progress-dashboard{ grid-template-columns:1fr; }
  .progress-center{ order:-1; }
  .discover-grid{ grid-template-columns:1fr; }
  .technology-grid{ grid-template-columns:1fr; }
  .discover-header{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px){
  .progress-section, .assessment-section,
  .discover-section, .technology-section{ padding-block:90px; }
  .assessment-row{ grid-template-columns:34px 44px 1fr 34px; gap:14px; }
  .assessment-image{ width:44px; height:44px; }
  .assessment-count{ display:none; }
  .assessment-meta{ flex-direction:column; gap:12px; align-items:center; }
  .feature-visual{ height:240px; }
}

/* Apparition : course plus longue et décélération plus marquée que la
   règle d'origine plus haut, qu'elle remplace par sa position en fin de
   feuille (même spécificité, c'est la dernière écrite qui gagne). */
.reveal{
  opacity:0;
  transform:translateY(45px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.visible{ opacity:1; transform:translateY(0); }

/* ====================================================================
   LE HERO — VERSION CENTRÉE
   --------------------------------------------------------------------
   Une seule colonne : le titre, la promesse, l'action, puis l'aperçu du
   produit rogné en bas. L'ancienne version en deux colonnes est écrasée
   par les règles qui suivent, écrites après elle dans la feuille.
   ==================================================================== */
.hero{
  display:block;
  min-height:0;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:#000;
  /* PAS DE RÉSERVE POUR LE BANDEAU ICI : l'inclusion pose déjà un
     `bpHeaderSpacer` de sa hauteur juste avant le contenu. En rajouter une
     doublait l'espace au-dessus du titre. */
  padding-top:56px;
  padding-bottom:0;
}
.hero:after{ content:none; }


.hero-centre{ position:relative; z-index:2; max-width:900px; margin:0 auto; }


.hero h1{
  font:500 clamp(38px,5.4vw,74px)/1.06 Manrope;
  letter-spacing:-.045em;
  margin:0;
  text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:#7B7B7B; opacity:1; }

.hero .hero-text{
  max-width:600px; margin:26px auto 0;
  font-size:16px; line-height:1.65; color:#A8A8AE;
}

.hero-actions{
  display:flex; align-items:center; justify-content:center;
  gap:26px; margin:38px 0 0; flex-wrap:wrap;
}
.hero-actions .btn-light{ padding:16px 26px; font-size:14px; }
.hero-offre{ text-align:left; }
.hero-offre strong{ display:block; font:500 15px/1.3 Manrope; color:#F2F2F3; letter-spacing:-.02em; }
.hero-offre span{ display:block; margin-top:5px; font-size:13px; color:#7B7B7B; }

.hero-note{ margin:30px 0 0; font-size:13px; color:#5E5E5E; }

/* ---- L'aperçu du produit ---- */
.hero-apercu{
  position:relative; z-index:2;
  max-width:1280px; margin:80px auto 0;
  /* Rogné en bas : la coupure fait comprendre qu'il y a une suite. */
  max-height:440px; overflow:hidden;
  mask-image:linear-gradient(#000 72%, transparent);
  -webkit-mask-image:linear-gradient(#000 72%, transparent);
}
.apercu-cadre{
  display:grid; grid-template-columns:230px 1fr;
  text-align:left;
  border:1px solid #2E2E2E; border-bottom:0;
  border-radius:14px 14px 0 0;
  background:#0B0B0B;
  overflow:hidden;
  font-size:12px;
}
.apercu-cote{ padding:16px 14px; border-right:1px solid #1F1F1F; background:#080808; }
.apercu-marque{ display:flex; align-items:center; gap:9px; color:#F2F2F3; font-size:12.5px; }
.apercu-marque i{
  width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
  background:#F2F2F3; color:#000; font:600 11px Manrope; font-style:normal;
}
.apercu-recherche{
  display:flex; justify-content:space-between; align-items:center;
  margin:16px 0 14px; padding:8px 10px;
  border:1px solid #1F1F1F; border-radius:8px; color:#7B7B7B;
}
.apercu-recherche em{ font-style:normal; font-size:10px; }
.apercu-nav, .apercu-clients{ display:flex; flex-direction:column; gap:2px; }
.apercu-nav a, .apercu-clients a{
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:8px; color:#A8A8AE;
}
.apercu-nav a b{ margin-left:auto; font-weight:400; color:#7B7B7B; }
.apercu-nav a.est-ici{ background:#1C1C1C; color:#F2F2F3; }
.apercu-clients a.est-terne{ color:#5E5E5E; }
.apercu-titre{ margin:18px 0 8px; padding-left:10px; font-size:10.5px; letter-spacing:.1em; color:#5E5E5E; }
.pastille{ width:15px; height:15px; border-radius:5px; display:inline-block; flex:0 0 auto; }
.pastille.p1{ background:#B45309; } .pastille.p2{ background:#3B82F6; }
.pastille.p3{ background:#059669; } .pastille.p4{ background:#7C3AED; }
.pastille.plus{ background:none; border:1px dashed #2E2E2E; color:#5E5E5E; font-size:10px; text-align:center; line-height:13px; }

.apercu-corps{ padding:18px 20px 0; }
.apercu-entete{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.apercu-entete small{ font-size:11px; color:#7B7B7B; }
.apercu-entete h3{ margin:6px 0 0; font:500 18px Manrope; letter-spacing:-.03em; color:#F2F2F3; }
.apercu-bouton{ border:1px solid #2E2E2E; border-radius:8px; padding:8px 12px; color:#F2F2F3; background:#161616; white-space:nowrap; }
.apercu-puces{ display:flex; gap:8px; margin:14px 0 16px; flex-wrap:wrap; }
.apercu-puces span{ border:1px solid #1F1F1F; border-radius:8px; padding:7px 11px; color:#A8A8AE; }

.apercu-chiffres{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid #1F1F1F; border-radius:10px; }
.apercu-chiffres > div{ padding:12px 14px; border-left:1px solid #1F1F1F; }
.apercu-chiffres > div:first-child{ border-left:0; }
.apercu-chiffres small{ display:block; color:#7B7B7B; font-size:11px; }
.apercu-chiffres strong{ display:inline-block; margin-top:6px; font:500 20px Manrope; letter-spacing:-.04em; color:#F2F2F3; }
.apercu-chiffres i{ font-style:normal; margin-left:7px; font-size:10px; color:#7B7B7B; }
.apercu-chiffres i.marque-vert{ color:#6EE7A0; background:#1D3022; border-radius:999px; padding:3px 7px; }

.apercu-duo{ display:grid; grid-template-columns:1.35fr 1fr; gap:12px; margin-top:12px; }
.apercu-carte{ border:1px solid #1F1F1F; border-radius:10px; padding:13px 14px; }
.apercu-carteTete{ display:flex; justify-content:space-between; color:#F2F2F3; margin-bottom:10px; }
.apercu-carteTete em{ font-style:normal; color:#5E5E5E; }
.apercu-carte small{ display:block; color:#7B7B7B; font-size:11px; margin:8px 0 4px; }
.apercu-carte p{ margin:0; color:#A8A8AE; }
.apercu-carte ul{ list-style:none; margin:6px 0 0; padding:0; }
.apercu-carte li{ display:flex; align-items:center; gap:9px; padding:7px 0; border-top:1px solid #141414; color:#E6E6E8; }
.apercu-carte li:first-child{ border-top:0; }
.etiq{ margin-left:auto; font-weight:400; font-size:10px; border-radius:999px; padding:4px 8px; background:#161616; color:#A8A8AE; }
.etiq.vert{ background:#12291C; color:#6EE7A0; } .etiq.bleu{ background:#101A2C; color:#7AA2FF; }
.etiq.ambre{ background:#241C0A; color:#FBBF24; }
.apercu-agenda li{ align-items:flex-start; justify-content:space-between; }
.apercu-agenda span{ display:flex; flex-direction:column; gap:3px; }
.apercu-agenda small{ margin:0; }
.apercu-agenda time{ color:#7B7B7B; font-size:11px; white-space:nowrap; }

@media (max-width:900px){
  .hero-apercu{ max-height:300px; }
  .apercu-cadre{ grid-template-columns:1fr; }
  .apercu-cote{ display:none; }
  .apercu-chiffres{ grid-template-columns:repeat(2,1fr); }
  .apercu-chiffres > div:nth-child(3){ border-left:0; }
  .apercu-duo{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; gap:18px; }
  .hero-offre{ text-align:center; }
}

/* ====================================================================
   LA SOUDURE ENTRE L'EN-TÊTE ET LA PAGE
   Le bandeau du site est en position fixe et opaque ; il lui manquait
   seulement un trait de séparation. Le `padding-top` du hero réserve
   exactement sa hauteur, donc aucune bande claire ne subsiste entre les
   deux — ce qu'on voyait était le fond blanc rétabli par la feuille du
   site, corrigé en fin de page.
   ==================================================================== */
html body #bpTopHeader{ border-bottom:1px solid #2E2E2E !important; }
html body #proMobileTopBar{ border-bottom:1px solid #2E2E2E !important; }

/* ====================================================================
   PLUS AUCUN DÉGRADÉ, ET DES BOUTONS À 4 px
   --------------------------------------------------------------------
   Écrit en fin de feuille plutôt qu'en corrigeant les vingt-cinq
   déclarations d'origine : la liste des dégradés est ici, d'un seul
   tenant, et on voit du même coup par quoi chacun a été remplacé. Le
   jour où l'un revient, c'est ici qu'on le rattrape.
   ==================================================================== */

/* ---- 1. Le hero : noir plein, sans trame ni lueur ---- */
.hero{ background:#000000; }
.hero:after{ display:none; }
.halo{ display:none; }
/* La coupure de l'aperçu devient nette : le fondu était lui aussi un
   dégradé, appliqué en masque. */
.hero-apercu{ mask-image:none; -webkit-mask-image:none; }

/* ---- 2. Les aplats qui remplacent les dégradés de fond ---- */
.face-placeholder,
.mini-face,
.silhouette,
.compare-panel,
.face-visual,
.assessment-image,
.feature-visual,
.tech-image, .tech-globe, .science-network, .review-dashboard{
  background:#0B0B0B;
}
.compare-panel.after{ background:#111111; }
.face-placeholder:before{ background:#1C1C1C; }
.face-shape{ background:none; }
.expert-avatar{ background:#1C1C1C; }
.metric-card b{ background:#F2F2F3; }
.globe-lines{ background:#161616; }

/* ---- 3. Les lueurs deviennent des formes pleines ----
   Ces calques donnaient un visage par un halo radial. Sans dégradé, on
   garde l'idée avec un ovale plein et centré : la même silhouette, en
   aplat. */
.face-glow,
.eye-image, .portrait-person, .profile-person,
.tech-man{
  background:#161616;
  inset:auto; left:50%; top:50%;
  width:min(46%, 160px); aspect-ratio:3/4; height:auto;
  transform:translate(-50%, -50%);
  border-radius:50% 50% 46% 46%;
}
.assessment-icon{ background:#2E2E2E; }

/* ---- 4. Les boutons : coin à 4 px ----
   Un seul rayon pour tout ce sur quoi on clique, pastilles d'état
   exclues — celles-ci ne sont pas des boutons et gardent leur forme. */
.btn,
.discover-button,
.assessment-plus,
.apercu-bouton,
.apercu-puces span,
.faq-item button,
.text-link{
  border-radius:4px;
}
/* Le « + » des évaluations était un rond : à 4 px il lui faut une boîte
   carrée, sinon le coin arrondi tombe au milieu de nulle part. */
.assessment-plus{ width:34px; height:34px; }

/* ====================================================================
   TITRES PLUS PETITS
   --------------------------------------------------------------------
   Réduction d'environ un quart, sur les trois bornes de chaque `clamp`
   à la fois : la valeur mini gouverne le téléphone, la valeur vw la
   pente, la maxi le grand écran. Ne baisser que la maxi aurait laissé
   les titres inchangés sur mobile — c'est là qu'ils pesaient le plus.
   ==================================================================== */
.hero h1{ font-size:clamp(30px, 4.1vw, 55px); }
h2{ font-size:clamp(27px, 3.3vw, 46px); }
.center-head h2{ font-size:clamp(27px, 3.2vw, 44px); }
.progress-header h2,
.technology-header h2{ font-size:clamp(26px, 3.1vw, 42px); }
.assessment-header h2,
.discover-header h2{ font-size:clamp(25px, 2.9vw, 40px); }

.step h3{ font-size:22px; }
.tech-content h3{ font-size:18px; }
.discover-card h3{ font-size:17px; }
.feature-card h3,
.price-card h3{ font-size:16px; }
.assessment-name{ font-size:15px; }
.apercu-entete h3{ font-size:16px; }

@media (max-width:600px){
  .step h3{ font-size:20px; }
  .tech-content h3{ font-size:17px; }
}

/* ====================================================================
   LA TRAME : RAILS, FILETS, ENCARTS QUI SE TOUCHENT
   --------------------------------------------------------------------
   Le principe est celui des maquettes : la page n'est pas une suite de
   cartes posées sur un fond, c'est une grille dessinée. Deux rails en
   pointillés marquent la colonne de contenu sur toute la hauteur, des
   filets pleins séparent les sections, et les encarts partagent leurs
   bordures au lieu d'être espacés.

   UNE SEULE VARIABLE COMMANDE TOUT : --marge, le retrait déjà utilisé
   pour aligner le contenu sur l'en-tête. Rails, filets et grilles s'y
   accrochent, donc rien ne peut se décaler d'un côté sans l'autre.
   ==================================================================== */
:root{ --marge:max(32px, calc((100% - 1600px) / 2 + 32px)); --trait:#1F1F1F; }
@media (max-width:719.98px){ :root{ --marge:24px; } }

.rails{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.rails::before,
.rails::after{
  content:""; position:absolute; top:0; bottom:0;
  border-left:1px dashed var(--trait);
}
.rails::before{ left:var(--marge); }
.rails::after{ right:var(--marge); }

/* ---- Filets entre sections ----
   En pseudo-élément et non en `border-top` : la bordure d'une section
   irait d'un bord à l'autre de l'écran, alors que le filet doit s'arrêter
   aux rails. */
main section{ position:relative; }
main section + section::before,
.press::before{
  content:""; position:absolute; top:0;
  left:var(--marge); right:var(--marge);
  border-top:1px solid var(--trait);
}
.press{ border-bottom:0; }
.press::before{ display:none; }

/* ---- Plus aucun arrondi sur les encarts ---- */
.feature-card, .price-card, .discover-card, .technology-card,
.bio-card, .face-analysis, .progress-chart, .apercu-cadre,
.assessment-image, .feature-visual, .tech-image, .tech-globe,
.science-network, .review-dashboard, .compare, .compare-panel,
.step, .apercu-carte, .apercu-chiffres, .visual-panel, .projection,
.face-score, .apercu-recherche, .hero-apercu{
  border-radius:0;
}

/* ---- Les grilles : bordures partagées, sans espacement ----
   `gap:0` puis une bordure à gauche de chaque cellule sauf la première :
   deux cellules voisines n'ont ainsi qu'un seul trait entre elles, et non
   deux collés qui feraient 2 px. */
.cards, .price-grid, .discover-grid, .technology-grid, .expert-grid,
.progress-dashboard{
  gap:0;
  border:1px solid var(--trait);
  border-radius:0;
}
.cards > *, .price-grid > *, .discover-grid > *, .expert-grid > *,
.progress-dashboard > *{
  border:0;
  border-left:1px solid var(--trait);
  border-radius:0;
}
.cards > :first-child, .price-grid > :first-child,
.discover-grid > :first-child, .expert-grid > :first-child,
.progress-dashboard > :first-child{ border-left:0; }

/* La grille technologie fait deux colonnes sur deux rangées : il lui faut
   aussi le trait horizontal du milieu. */
.technology-grid > *{ border:0; border-radius:0; }
.technology-grid > :nth-child(even){ border-left:1px solid var(--trait); }
.technology-grid > :nth-child(n+3){ border-top:1px solid var(--trait); }

/* Les colonnes de mesures : cartes empilées qui se touchent. */
.progress-column, .progress-center{ gap:0; }
.progress-column > * + *, .progress-center > * + *{
  border-top:1px solid var(--trait);
}
.bio-card, .face-analysis, .progress-chart{ border:0; }
.progress-column, .progress-center{ padding:0; }

/* Les étapes utilisaient un fond visible à travers un `gap` de 1 px ;
   on passe au même trait que partout ailleurs. */
.steps{ gap:0; border:1px solid var(--trait); background:#000; }
.step{ border:0; border-left:1px solid var(--trait); }
.steps > :first-child{ border-left:0; }

/* Le comparatif : deux panneaux qui partagent leur trait central. */
.compare{ border:1px solid var(--trait); }
.compare-panel{ border:0; }
.compare-panel.after{ border-left:1px solid var(--trait); }

/* La liste d'évaluations est déjà réglée ; on la cale sur la même encre. */
.assessment-list{ border-top-color:var(--trait); }
.assessment-row{ border-bottom-color:var(--trait); }

/* Sur téléphone, les grilles passent à une colonne : le trait qui les
   séparait doit devenir horizontal, sinon les cellules se retrouvent
   collées sans rien entre elles. */
@media (max-width:1000px){
  .discover-grid > * + *, .technology-grid > * + *{
    border-left:0;
    border-top:1px solid var(--trait);
  }
  .technology-grid > :nth-child(even){ border-left:0; }
  .progress-dashboard > * + *{
    border-left:0;
    border-top:1px solid var(--trait);
  }
}
@media (max-width:900px){
  .steps > * + *{ border-left:0; border-top:1px solid var(--trait); }
  .cards > * + *{ border-left:0; border-top:1px solid var(--trait); }
}
@media (max-width:600px){
  .price-grid > * + *{ border-left:0; border-top:1px solid var(--trait); }
  .expert-grid > * + *{ border-left:0; border-top:1px solid var(--trait); }
}

/* ====================================================================
   TOUT ENTRE LES DEUX RAILS
   --------------------------------------------------------------------
   Chaque grille portait sa propre `max-width` héritée du gabarit — 1180,
   1100, 1080, 1050 px — et flottait donc au milieu de la colonne, avec
   du vide de part et d'autre. Les rails rendaient ce vide visible.
   Elles s'étendent maintenant d'un rail à l'autre ; c'est le retrait de
   la section qui fixe la largeur, une bonne fois.
   ==================================================================== */
.cards, .price-grid, .steps, .compare, .expert-grid,
.assessment-list, .hero-apercu, .dashboard{
  max-width:none;
  width:100%;
  margin-left:0;
  margin-right:0;
}
.hero-apercu{ margin-top:80px; }
.price-grid{ margin-top:70px; }
.steps, .expert-grid, .cards{ margin-top:0; }
.compare{ margin:80px 0 0; }

/* Les blocs de texte gardent une largeur de lecture : une ligne qui court
   sur 1600 px ne se lit plus. Ils restent calés à gauche, contre le rail. */
.center-head{ margin-left:0; margin-right:0; text-align:left; max-width:760px; }
.center-head > p:last-child{ margin-left:0; margin-right:0; }
.assessment-header{ margin-left:0; margin-right:0; text-align:left; max-width:760px; }
.assessment-meta{ justify-content:flex-start; }

/* ====================================================================
   LES BOUTONS DES MAQUETTES
   Fond gris #333333 relevé au compte-gouttes sur la capture, texte blanc,
   pas de bordure. Le bouton principal reste blanc sur noir : c'est le
   contraste qui le désigne comme principal, pas sa forme.
   ==================================================================== */
.btn, .discover-button, .apercu-bouton, .apercu-puces span, .assessment-plus{
  background:#333333;
  color:#FFFFFF;
  border:0;
  border-radius:4px;
  font-size:14px;
  font-weight:500;
  padding:11px 18px;
  transition:background .18s ease;
}
.btn:hover, .discover-button:hover, .assessment-plus:hover{ background:#3F3F3F; }

.btn-light, .btn-dark{
  background:#FFFFFF;
  color:#0B0B0B;
}
.btn-light:hover, .btn-dark:hover{ background:#E8E8E8; }

.assessment-plus{ width:34px; height:34px; padding:0; font-size:15px; }
.apercu-puces span{ font-size:12px; padding:7px 11px; }
.apercu-bouton{ font-size:12px; padding:8px 12px; background:#333333; color:#FFF; }
.hero-actions .btn-light{ padding:14px 24px; font-size:14px; }

/* ---- Pastilles et étiquettes : mêmes coins que les boutons ----
   Sur les captures, les marqueurs d'état (« Today », « Competitor »,
   « Succeeded ») sont des rectangles à coin doux, pas des gélules. Des
   capsules au milieu d'une grille à angles droits sonnaient faux. */
.section-pill, .etiq, .bio-top span, .node, .apercu-chiffres i.marque-vert,
.assessment-meta div, .pastille, .apercu-marque i, .review-circle,
.discover-index, .network-center, .apercu-recherche, .qoves-symbol{
  border-radius:4px;
}
.review-circle, .network-center, .discover-index{ border-radius:4px; }
.expert-avatar{ border-radius:4px; }
.assessment-icon{ border-radius:4px; }
.face-glow, .eye-image, .portrait-person, .profile-person, .tech-man{ border-radius:4px; }
.globe-lines, .globe-lines::after{ border-radius:4px; }

/* ---- Tous les boutons en gris ----
   Plus de bouton blanc : le principal se distingue par sa place, pas par
   son fond. */
.btn, .btn-light, .btn-dark, .btn-ghost, .btn-outline,
.discover-button, .apercu-bouton{
  background:#333333;
  color:#FFFFFF;
  border:0;
}
.btn:hover, .btn-light:hover, .btn-dark:hover,
.discover-button:hover, .apercu-bouton:hover{ background:#3F3F3F; }

/* ---- Les titres arrivent par la gauche ----
   Ils ne sont pas relâchés après leur apparition, contrairement aux
   autres blocs : l'effet doit se rejouer, donc l'observateur continue de
   les suivre. */
.titre-anim{
  opacity:0;
  transform:translateX(-46px);
  transition:opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1);
}
.titre-anim.est-visible{ opacity:1; transform:translateX(0); }
@media (prefers-reduced-motion:reduce){
  .titre-anim{ opacity:1; transform:none; transition:none; }
}

/* ---- Les deux derniers noirs sur noir ----
   Un <button> n'hérite pas de la couleur du texte : le navigateur lui
   impose `color:buttontext`, c'est-à-dire noir. Les questions de la FAQ
   étaient donc invisibles, sans qu'aucune règle du site soit en cause. */
button{ color:inherit; }
.faq-item button{ color:#F2F2F3; }
.dash-body aside .side-active, .side-active{ color:#F2F2F3; }

/* ---- Boutons plus fins ---- */
.btn, .btn-light, .btn-dark, .btn-ghost, .btn-outline, .discover-button{
  padding:8px 18px;
  line-height:1.35;
}
.hero-actions .btn-light{ padding:10px 22px; }
.apercu-bouton{ padding:6px 11px; }
.apercu-puces span{ padding:5px 10px; }
.assessment-plus{ width:30px; height:30px; }

/* ---- Les titres sortent de l'ombre ----
   Remplace le glissement latéral : le titre monte du flou vers le net,
   sans bouger de place. `filter` et `opacity` s'animent tous deux sur le
   compositeur, donc sans à-coup, et rien ne se décale autour.
   L'observateur bascule dans les deux sens : le titre repart dans l'ombre
   quand on remonte. */
.titre-anim{
  opacity:0;
  transform:scale(.985);
  filter:blur(14px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),
             filter .85s cubic-bezier(.2,.8,.2,1),
             transform .85s cubic-bezier(.2,.8,.2,1);
}
.titre-anim.est-visible{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}
@media (prefers-reduced-motion:reduce){
  .titre-anim{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ====================================================================
   LES TITRES SE DÉCOUVRENT DE GAUCHE À DROITE
   --------------------------------------------------------------------
   Remplace le flou : le texte n'apparaît plus d'un bloc, il se dévoile
   par la gauche, comme une main qui découvre une ligne.

   UN MASQUE QUI GLISSE, PAS UNE OPACITÉ. Animer `opacity` aurait fait
   apparaître toute la ligne en même temps — c'est justement ce qu'on ne
   veut pas. Ici le masque est un dégradé opaque→transparent, deux fois
   et demie plus large que le titre : on le fait coulisser, et la limite
   entre visible et invisible traverse le texte de gauche à droite. Le
   dégradé est étalé sur 30 % de sa largeur, donc la limite est douce —
   chaque mot se fond au lieu d'être coupé net.

   Position 100 % : la partie opaque est encore hors du titre, à gauche,
   donc rien ne se voit. Position 0 % : elle le recouvre entièrement.
   ==================================================================== */
.titre-anim{
  opacity:1;
  transform:none;
  filter:none;

  -webkit-mask-image:linear-gradient(to right, #000 40%, transparent 70%);
          mask-image:linear-gradient(to right, #000 40%, transparent 70%);
  -webkit-mask-size:250% 100%;
          mask-size:250% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;
          mask-position:100% 0;

  transition:-webkit-mask-position 1.05s cubic-bezier(.22,.75,.24,1),
                     mask-position 1.05s cubic-bezier(.22,.75,.24,1);
}
.titre-anim.est-visible{
  -webkit-mask-position:0 0;
          mask-position:0 0;
}
@media (prefers-reduced-motion:reduce){
  .titre-anim{
    -webkit-mask-image:none; mask-image:none;
    transition:none;
  }
}

/* ====================================================================
   DU SOUFFLE ENTRE LE TEXTE ET LES RAILS
   --------------------------------------------------------------------
   Le retrait des sections posait le contenu exactement sur la ligne : les
   titres, les intitulés et les colonnes de texte la touchaient.

   CE QUI EST DÉCALÉ, ET CE QUI NE L'EST PAS. Seuls les blocs de texte
   rentrent ; les grilles gardent leur cadre pile sur les rails, comme sur
   vos captures — c'est ce qui fait tenir la trame. À l'intérieur des
   cellules, c'est leur propre marge qui écarte le texte du trait.
   ==================================================================== */
:root{ --souffle:28px; }
@media (max-width:719.98px){ :root{ --souffle:16px; } }

main .section-tag,
main .two-col,
main .center-head,
main .progress-header,
main .assessment-header,
main .discover-header,
main .technology-header,
main .hero-centre{
  padding-left:var(--souffle);
  padding-right:var(--souffle);
  box-sizing:border-box;
}

/* Le comparatif et les experts portent du texte à même la cellule. */
.expert{ padding-left:14px; padding-right:14px; box-sizing:border-box; }
.compare-panel{ padding-left:var(--souffle); padding-right:var(--souffle); box-sizing:border-box; }

/* Les lignes d'évaluation : le numéro et le bouton étaient au ras. */
.assessment-row{ padding-left:var(--souffle); padding-right:var(--souffle); }

/* La FAQ : la colonne de droite butait sur le rail. */
.faq .two-col > *:last-child{ padding-right:0; }

/* Le pied de page cale son contenu dans les mêmes 1600 px que les rails,
   donc il les touchait aussi. */
html body .bpFooter-inner{
  padding-left:calc(32px + var(--souffle));
  padding-right:calc(32px + var(--souffle));
}
@media (max-width:719.98px){
  html body .bpFooter-inner{
    padding-left:calc(24px + var(--souffle));
    padding-right:calc(24px + var(--souffle));
  }
}

/* Sur téléphone, le pied de page a sa propre requête média plus étroite,
   écrite après cette feuille : elle repassait à 16 px et le texte
   traversait le rail de 8 px. D'où le `!important` — ici il ne sert pas à
   forcer une préférence, il départage deux règles de même poids dont
   l'ordre ne joue pas en notre faveur. */
@media (max-width:719.98px){
  html body .bpFooter-inner{
    padding-left:calc(24px + var(--souffle)) !important;
    padding-right:calc(24px + var(--souffle)) !important;
  }
}
/* La bande de logos défile en une ligne : sans retrait, le premier mot
   commençait sur le rail. */
.press{ padding-left:calc(var(--marge) + var(--souffle)); }

/* ====================================================================
   LE PLAN PERSONNALISÉ
   --------------------------------------------------------------------
   Deux colonnes : le discours à gauche, dans les rails ; la maquette du
   rapport à droite, qui sort du rail et va mourir au bord de l'écran.

   COMMENT ELLE SORT : la section garde son retrait, et c'est la colonne
   de droite qui le rattrape avec une marge négative de la même valeur.
   Élargir la section aurait décalé le texte et cassé l'alignement de
   toute la page ; ici, seul le bloc qui doit déborder déborde.

   `overflow:hidden` sur la section, sinon ce débordement ajouterait une
   barre de défilement horizontale à la page entière.
   ==================================================================== */
.plan-section{
  padding-block:120px;
  overflow:hidden;
  background:#000;
}
.plan-grille{
  display:grid;
  grid-template-columns:minmax(0, 43%) minmax(0, 1fr);
  gap:60px;
  align-items:center;
}
.plan-texte{ padding-left:var(--souffle); padding-right:var(--souffle); box-sizing:border-box; }
.plan-texte h2{
  font:500 clamp(26px,3.1vw,42px)/1.08 Manrope;
  letter-spacing:-.045em;
  margin:0;
}
.plan-texte h2 em{ font-style:normal; color:#7B7B7B; }
.plan-texte > p{
  margin:24px 0 0;
  max-width:470px;
  font-size:15px;
  line-height:1.65;
  color:#A8A8AE;
}

/* La liste d'étapes, séparée du discours par un filet — comme sur la
   référence, où elle occupe la moitié basse de la colonne. */
.plan-liste{
  list-style:none;
  margin:54px 0 0;
  padding:40px 0 0;
  border-top:1px solid var(--trait);
}
.plan-liste li{
  display:flex;
  gap:26px;
  align-items:baseline;
  padding:11px 0;
  font-size:15px;
  color:#E6E6E8;
}
.plan-rang{ color:#7B7B7B; font-size:12px; flex:0 0 auto; }

/* ---- La maquette du rapport ---- */
.plan-apercu{
  margin-right:calc(-1 * max(32px, (100vw - 1600px) / 2 + 32px));
  min-width:0;
}
.rapport{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) 190px;
  border:1px solid var(--trait);
  border-right:0;
  background:#0B0B0B;
  /* Plus haut que large : on n'en montre que le haut, la suite est
     coupée par le bas comme sur la référence. */
  height:560px;
  overflow:hidden;
  font-size:11px;
  color:#A8A8AE;
}

.rapport-pages{ border-right:1px solid var(--trait); padding:10px; display:flex; flex-direction:column; gap:10px; }
.rapport-page{ border:1px solid #161616; background:#000; padding:8px; height:110px; overflow:hidden; }
.rapport-page.est-active{ border-color:var(--trait); }
.page-lignes{ display:flex; flex-direction:column; gap:6px; }
.page-lignes span{ display:block; height:3px; background:#1A1A1A; }
.page-lignes span:nth-child(3n){ width:70%; }
.page-lignes span:nth-child(4n){ width:85%; }

.rapport-corps{ padding:16px 18px; border-right:1px solid var(--trait); min-width:0; }
.rapport-tete{ display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.14em; color:#5E5E5E; }
.rapport-marque{ width:14px; height:14px; border:1px solid #2E2E2E; display:inline-block; }
.rapport-titre{
  margin:14px 0 16px;
  font:500 24px Manrope;
  letter-spacing:-.04em;
  color:#F2F2F3;
}
.rapport-titre em{ font-style:normal; color:#7B7B7B; }

.rapport-avantApres{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rapport-avantApres figure{ margin:0; position:relative; }
.etiq-photo{
  position:absolute; top:8px; left:8px; z-index:2;
  background:#000; border:1px solid #2E2E2E; color:#A8A8AE;
  font-size:8px; letter-spacing:.14em; padding:3px 6px;
}
.rapport-portrait{ height:180px; background:#161616; border:1px solid #1F1F1F; }

.rapport-potentiel{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px; }
.rapport-potentiel h4{ margin:0; font:500 13px Manrope; letter-spacing:-.02em; color:#F2F2F3; }
.rapport-potentiel > div > p{ margin:8px 0 10px; font-size:10.5px; line-height:1.5; color:#7B7B7B; }
.rapport-traits{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:4px 14px;
  font-size:10.5px;
}
.rapport-traits li::before{ content:"· "; color:#5E5E5E; }

.rapport-radar{ display:flex; flex-direction:column; align-items:center; }
.radar-titre{ font-size:8px; letter-spacing:.14em; color:#5E5E5E; }
.rapport-radar svg{ width:100%; max-width:230px; height:auto; }
.radar-cadre{ fill:none; stroke:#1F1F1F; stroke-width:1; }
.radar-cadre.faible{ stroke:#161616; }
.radar-forme{ fill:rgba(255,255,255,.10); stroke:#A8A8AE; stroke-width:1; }
.radar-axe{ stroke:#161616; stroke-width:1; }
.radar-legende{ display:flex; gap:14px; font-size:7.5px; letter-spacing:.1em; color:#5E5E5E; }
.radar-legende i{ width:7px; height:7px; border:1px solid #2E2E2E; display:inline-block; margin-right:4px; }
.radar-legende i.plein{ background:#2E2E2E; }

.rapport-verdict{ margin:16px 0 12px; font-size:11.5px; color:#A8A8AE; }
.rapport-verdict b{ font-weight:400; color:#F2F2F3; }
.rapport-ages{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.rapport-ages > div{ border:1px solid var(--trait); padding:10px 12px; }
.rapport-ages small{ display:block; font-size:9px; color:#7B7B7B; }
.rapport-ages strong{ font:500 22px Manrope; letter-spacing:-.04em; color:#F2F2F3; }

.rapport-profil{ padding:16px; }
.rapport-profil h4{ margin:0; font:500 13px Manrope; letter-spacing:-.02em; color:#F2F2F3; }
.profil-avatar{ width:40px; height:40px; background:#161616; border:1px solid #1F1F1F; margin:12px 0 14px; }
.rapport-profil ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:9px; letter-spacing:.12em; color:#7B7B7B; }
.profil-resume{ margin-top:18px; padding-top:14px; border-top:1px solid var(--trait); }
.profil-resume p{ margin:8px 0 0; font-size:10.5px; line-height:1.55; color:#7B7B7B; }

@media (max-width:1100px){
  .plan-grille{ grid-template-columns:1fr; gap:44px; }
  .rapport{ height:420px; grid-template-columns:70px minmax(0,1fr) 150px; }
  .rapport-portrait{ height:130px; }
}
@media (max-width:719.98px){
  .plan-apercu{ margin-right:-24px; }
}
@media (max-width:700px){
  .plan-section{ padding-block:80px; }
  .rapport{ grid-template-columns:minmax(0,1fr) 140px; height:380px; }
  .rapport-pages{ display:none; }
  .plan-liste{ margin-top:34px; padding-top:28px; }
}

/* ====================================================================
   LES PAGES INTÉRIEURES — TARIFS, BLOG, ARTICLE
   --------------------------------------------------------------------
   Elles reprennent la trame de l'accueil : rails, filets entre sections,
   encarts sans arrondi qui partagent leurs bordures. Rien de nouveau côté
   couleurs — tout vient des mêmes variables.
   ==================================================================== */

/* ---- L'en-tête de page, commun aux trois ---- */
.page-tete{ padding-block:90px 70px; }
.page-tete__int{
  max-width:760px;
  padding-left:var(--souffle);
  padding-right:var(--souffle);
  box-sizing:border-box;
}
.page-tete h2,
.section > .page-tete__int h2{
  font:500 clamp(27px,3.3vw,46px)/1.05 Manrope;
  letter-spacing:-.045em;
  margin:0;
}
.page-tete__int h2 em{ font-style:normal; color:#7B7B7B; }
.page-tete__int > p{
  margin:24px 0 0;
  font-size:15px;
  line-height:1.7;
  color:#A8A8AE;
}

/* ---- Tarifs : le comparatif ---- */
.compare-table{
  margin-top:50px;
  border-top:1px solid var(--trait);
}
.compare-ligne{
  display:grid;
  grid-template-columns:2fr repeat(3, 1fr);
  align-items:center;
  gap:16px;
  padding:16px var(--souffle);
  border-bottom:1px solid var(--trait);
  font-size:13px;
  color:#E6E6E8;
}
.compare-ligne > span + span{ text-align:center; }
.compare-ligne--tete{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7B7B7B;
}
.compare-ligne .est-absent{ color:#5E5E5E; }

/* ---- Blog ---- */
.blog-cats{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:34px;
  padding-left:var(--souffle);
  padding-right:var(--souffle);
}
.blog-cats a{
  border:1px solid var(--trait);
  border-radius:4px;
  padding:8px 14px;
  font-size:12px;
  color:#A8A8AE;
  transition:.2s;
}
.blog-cats a:hover{ background:#161616; color:#F2F2F3; }
.blog-cats a.est-active{ background:#333333; border-color:#333333; color:#FFFFFF; }

/* Les billets partagent leurs bordures, comme les autres grilles. */
.billets{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--trait);
}
.billet{ border-left:1px solid var(--trait); }
.billets > :nth-child(3n+1){ border-left:0; }
.billets > :nth-child(n+4){ border-top:1px solid var(--trait); }
.billet-lien{ display:block; padding:24px; height:100%; box-sizing:border-box; transition:background .2s ease; }
.billet-lien:hover{ background:#0B0B0B; }
.billet-visuel{
  height:150px;
  background:#0B0B0B;
  border:1px solid #1F1F1F;
  position:relative;
  margin-bottom:20px;
}
.billet-cat{
  position:absolute; top:10px; left:10px;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  background:#000; border:1px solid var(--trait); color:#A8A8AE;
  padding:4px 8px;
}
.billet h3{
  margin:0;
  font:500 17px/1.35 Manrope;
  letter-spacing:-.03em;
  color:#F2F2F3;
}
.billet p{ margin:11px 0 20px; font-size:13px; line-height:1.65; color:#A8A8AE; }
.billet-pied{
  display:flex; justify-content:space-between;
  font-size:11px; color:#7B7B7B;
  padding-top:14px; border-top:1px solid #161616;
}

/* ---- Article ---- */
.article{ padding-block:70px 110px; }
.article-grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) 260px;
  gap:70px;
  align-items:start;
}
.article-corps{
  padding-left:var(--souffle);
  padding-right:var(--souffle);
  max-width:720px;
  box-sizing:border-box;
}
.fil{ display:flex; gap:9px; font-size:11px; color:#7B7B7B; margin-bottom:26px; }
.fil a{ color:#A8A8AE; }
.article h1{
  font:500 clamp(28px,3.6vw,48px)/1.06 Manrope;
  letter-spacing:-.045em;
  margin:0;
  color:#F2F2F3;
}
.article h1 em{ font-style:normal; color:#7B7B7B; }
.article-meta{
  display:flex; flex-wrap:wrap; gap:20px;
  margin-top:22px; padding-bottom:26px;
  border-bottom:1px solid var(--trait);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7B7B7B;
}
.article-chapo{ margin:30px 0 0; font-size:16.5px; line-height:1.7; color:#E6E6E8; }
.article-visuel{ height:300px; background:#0B0B0B; border:1px solid var(--trait); margin:34px 0 10px; }
.article-corps h2{
  margin:46px 0 0;
  font:500 24px Manrope;
  letter-spacing:-.035em;
  color:#F2F2F3;
}
.article-corps h3{ margin:30px 0 0; font:500 17px Manrope; letter-spacing:-.025em; color:#F2F2F3; }
.article-corps p{ margin:16px 0 0; font-size:15px; line-height:1.8; color:#A8A8AE; }
.article-corps ul{ margin:18px 0 0; padding-left:20px; }
.article-corps li{ margin:9px 0; font-size:15px; line-height:1.75; color:#A8A8AE; }
.article-corps li strong{ color:#F2F2F3; font-weight:500; }

.encadre{
  margin:34px 0 0;
  padding:20px 22px;
  border:1px solid var(--trait);
  border-left:3px solid #333333;
}
.encadre strong{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#7B7B7B; }
.encadre p{ margin:10px 0 0; }

.article-cta{
  margin:56px 0 0;
  padding:26px;
  border:1px solid var(--trait);
  display:flex; align-items:center; justify-content:space-between; gap:26px;
}
.article-cta strong{ font:500 17px Manrope; letter-spacing:-.03em; color:#F2F2F3; }
.article-cta p{ margin:8px 0 0; max-width:420px; }
.article-cta .btn{ flex:0 0 auto; }

/* Le sommaire suit la lecture : il reste visible tant que l'article défile. */
.article-cote{ position:sticky; top:110px; padding-right:var(--souffle); }
.sommaire{ border:1px solid var(--trait); padding:20px; }
.sommaire h4{ margin:0 0 14px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#7B7B7B; }
.sommaire ol{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:11px; }
.sommaire a{ font-size:13px; line-height:1.4; color:#A8A8AE; }
.sommaire a:hover{ color:#F2F2F3; }

@media (max-width:1000px){
  .billets{ grid-template-columns:repeat(2, 1fr); }
  .billets > :nth-child(3n+1){ border-left:1px solid var(--trait); }
  .billets > :nth-child(2n+1){ border-left:0; }
  .billets > :nth-child(n+3){ border-top:1px solid var(--trait); }
  .article-grille{ grid-template-columns:1fr; gap:44px; }
  .article-cote{ position:static; padding-left:var(--souffle); }
}
@media (max-width:720px){
  .billets{ grid-template-columns:1fr; }
  .billets > *{ border-left:0 !important; }
  .billets > * + *{ border-top:1px solid var(--trait); }
  .compare-ligne{ grid-template-columns:1.4fr repeat(3, 1fr); font-size:12px; gap:8px; }
  .article-cta{ flex-direction:column; align-items:flex-start; }
  .page-tete{ padding-block:60px 46px; }
}

/* ---- Deux respirations à reprendre ----
   La section qui suit un en-tête de page cumulait les deux marges : celle
   du bas de l'en-tête et les 130 px du haut de section. */
.page-tete + .section{ padding-top:0; }

/* L'article : la colonne de texte occupe l'espace disponible jusqu'à une
   largeur de lecture, et le sommaire se cale contre le rail de droite —
   sinon un large vide s'installait entre les deux. */
.article-grille{ justify-content:space-between; grid-template-columns:minmax(0, 820px) 260px; }
.article-corps{ max-width:820px; }

/* Les grilles qui suivent un bloc à deux colonnes ont besoin de la même
   respiration que celles qui suivent un en-tête centré — ce dernier porte
   sa marge basse, le `.two-col` non. Sans ça, les cartes touchent le bas
   du titre. */
.two-col + .cards,
.two-col + .steps,
.two-col + .plan-liste,
.two-col + .compare{ margin-top:64px; }
.section-tag + .two-col{ margin-top:0; }

/* ====================================================================
   LES BLOCS DE PRÉSENTATION — TEXTE À GAUCHE, MAQUETTE À DROITE
   --------------------------------------------------------------------
   Repris des captures fournies : une colonne étroite qui annonce, une
   large qui montre, un trait vertical en pointillés entre les deux, et
   un filet plein entre chaque bloc.

   LES MAQUETTES SONT DESSINÉES EN HTML, PAS IMPORTÉES EN IMAGE. Une
   capture se périme au premier changement de produit, pèse lourd et se
   lit mal sur un écran dense ; ici le texte reste du texte, la maquette
   suit la charte toute seule, et rien à recadrer pour le téléphone.
   ==================================================================== */
.pres{ border-top:1px solid var(--trait); }
.pres:first-of-type{ border-top:0; }
.pres__grille{
  display:grid;
  grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  align-items:start;
}
.pres__dire{
  padding:52px var(--souffle) 52px var(--souffle);
  border-right:1px dashed var(--trait);
  min-height:100%;
  box-sizing:border-box;
}
.pres__dire h3{
  margin:0;
  font:500 20px/1.3 Manrope;
  letter-spacing:-.03em;
  color:#F2F2F3;
}
.pres__dire p{ margin:12px 0 22px; font-size:14.5px; line-height:1.65; color:#A8A8AE; }
.pres__lien{
  display:inline-block;
  background:#333333; color:#FFFFFF;
  border-radius:4px; padding:9px 16px; font-size:14px;
}
.pres__lien:hover{ background:#3F3F46; }
.pres__montrer{ padding:40px var(--souffle); min-width:0; overflow:hidden; }

/* ---- Vocabulaire commun aux maquettes ---- */
.mk{ border:1px solid var(--trait); background:#000; }
.mk__tete{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-bottom:1px solid var(--trait);
  font-size:12.5px; color:#F2F2F3;
}
.mk__chiffres{ display:flex; flex-wrap:wrap; gap:26px; padding:16px; }
.mk__chiffre small{ display:block; font-size:11px; color:#7B7B7B; }
.mk__chiffre strong{ font:500 20px Manrope; letter-spacing:-.03em; color:#F2F2F3; }
.mk__chiffre em{ font-style:normal; font-size:11.5px; color:#6EE7A0; margin-left:6px; }
.mk__corps{ padding:16px; }
.mk__ligne{
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-top:1px solid #141414; font-size:13px; color:#E6E6E8;
}
.mk__ligne:first-child{ border-top:0; }
.mk__etiq{
  margin-left:auto; font-size:11px; border-radius:4px; padding:4px 9px;
  background:#161616; color:#A8A8AE;
}
.mk__etiq.vert{ background:#12291C; color:#6EE7A0; }
.mk__pastille{ width:14px; height:14px; border-radius:4px; flex:0 0 auto; background:#2E2E2E; }

/* Le graphique : un tracé SVG, sans bibliothèque ni dégradé. */
.mk__graphe{ padding:8px 16px 16px; }
.mk__graphe svg{ width:100%; height:190px; display:block; overflow:visible; }
.mk__axe{ stroke:#1F1F1F; stroke-width:1; }
.mk__courbe{ fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mk__legende{ display:flex; flex-wrap:wrap; gap:18px; padding:0 16px 14px; font-size:11.5px; color:#A8A8AE; }
.mk__legende i{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:7px; }

@media (max-width:1000px){
  .pres__grille{ grid-template-columns:1fr; }
  .pres__dire{ border-right:0; border-bottom:1px dashed var(--trait); padding-bottom:34px; }
  .pres__montrer{ padding-top:30px; }
}

/* ---- Une fenêtre de navigateur, pour montrer un site ----
   Trois pastilles et une barre d'adresse suffisent à dire « ceci est une
   page web » ; inutile de dessiner le navigateur en entier. */
.nav-fenetre{ border:1px solid var(--trait); background:#000; overflow:hidden; }
.nav-fenetre__barre{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--trait);
}
.nav-fenetre__points{ display:flex; gap:6px; }
.nav-fenetre__points i{ width:9px; height:9px; border-radius:50%; background:#2E2E2E; display:block; }
.nav-fenetre__url{
  flex:1; background:#0B0B0B; border:1px solid #1F1F1F; border-radius:4px;
  padding:5px 10px; font-size:11.5px; color:#7B7B7B;
}
.nav-fenetre__vue{ padding:0; }

/* La page montrée dans la fenêtre. */
.site-apercu__hero{
  padding:26px 22px; border-bottom:1px solid var(--trait);
  display:flex; align-items:center; gap:16px;
}
.site-apercu__photo{ width:58px; height:58px; background:#161616; border:1px solid #1F1F1F; flex:0 0 auto; }
.site-apercu__nom{ display:block; font:500 19px Manrope; letter-spacing:-.03em; color:#F2F2F3; }
.site-apercu__ville{ display:block; font-size:12.5px; color:#7B7B7B; margin-top:3px; }
.site-apercu__cta{
  margin-left:auto; background:#333333; color:#FFF;
  border-radius:4px; padding:9px 15px; font-size:13px; white-space:nowrap;
}
.site-apercu__bandeau{
  display:flex; gap:8px; flex-wrap:wrap; padding:14px 22px;
  border-bottom:1px solid var(--trait);
}
.site-apercu__bandeau span{
  border:1px solid var(--trait); border-radius:4px;
  padding:5px 10px; font-size:11.5px; color:#A8A8AE;
}

/* ---- La jauge, reprise de la capture ----
   Un arc en SVG avec `stroke-dasharray` : la part remplie se calcule à
   partir de la valeur, donc changer le chiffre suffit. */
.jauge{ display:flex; flex-direction:column; align-items:center; padding:22px 16px 8px; }
.jauge svg{ width:210px; height:118px; display:block; }
.jauge__fond{ fill:none; stroke:#1F1F1F; stroke-width:14; stroke-linecap:round; }
.jauge__part{ fill:none; stroke:#6EE7A0; stroke-width:14; stroke-linecap:round; }
.jauge__val{ margin-top:-72px; font:500 32px Manrope; letter-spacing:-.04em; color:#6EE7A0; }
/* Sous l'arc, pas dedans : un libellé un peu long mordait ses extrémités. */
.jauge__cible{ margin-top:44px; margin-bottom:18px; font-size:11.5px; color:#7B7B7B; }
.jauge__cible b{ background:#161616; border-radius:4px; padding:3px 8px; color:#A8A8AE; font-weight:400; margin-left:6px; }

/* ---- Une ligne de contrôle, dépliable en apparence ---- */
.mk__detail{ padding:12px 16px; border-top:1px solid #141414; background:#0B0B0B; }
.mk__detail small{ display:block; font-size:11.5px; color:#7B7B7B; }
.mk__detail strong{ font-size:13px; font-weight:500; color:#F2F2F3; }
.mk__note{ font-size:11.5px; color:#6EE7A0; background:#12291C; border-radius:4px; padding:4px 9px; display:inline-block; margin-top:8px; }

/* ====================================================================
   CE QUE LA PAGE « REFONTE » A DEMANDÉ AU VOCABULAIRE COMMUN
   --------------------------------------------------------------------
   Les maquettes n'avaient jamais eu à dire que quelque chose allait
   mal : `mk` ne connaissait qu'une couleur d'accent, le vert, et la
   jauge était verte en dur. Or une refonte commence par l'audit du site
   existant — peindre un 38 sur 100 en vert dirait le contraire du
   chiffre affiché.

   Les deux nuances d'alerte sont construites comme le vert (fond teinté
   sombre, encre claire de la même famille) : elles se posent donc sur
   les mêmes éléments sans rien réécrire, et les pages déjà en ligne ne
   bougent pas d'un pixel.
   ==================================================================== */
.mk__etiq.alerte{ background:#2A1315; color:#F0A0A0; }
.mk__etiq.tiede{  background:#2A2412; color:#E6C169; }
.mk__chiffre em.alerte{ color:#F0A0A0; }
.mk__chiffre em.neutre{ color:#7B7B7B; }
.jauge__part.alerte{ stroke:#E0705E; }
.jauge__val.alerte{  color:#E0705E; }

/* Une ligne de redirection : ancienne adresse, flèche, nouvelle adresse.
   `mk__etiq` pousse son étiquette à droite avec `margin-left:auto` — deux
   étiquettes sur la même ligne se seraient donc collées l'une à l'autre
   au bout. Les adresses ont leur propre classe, qui ne pousse rien. */
.mk__url{
  font-size:12px; color:#A8A8AE;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.mk__url.ancienne{ color:#6E6E72; text-decoration:line-through; }
.mk__fleche{ color:#4A4A4E; flex:0 0 auto; }

/* ---- Avant / après : deux fenêtres qui se touchent ----
   Bord partagé et angles droits, comme les cartes du reste du site : la
   séparation entre les deux états tient dans un seul trait. */
.duo-vue{ display:grid; grid-template-columns:1fr 1fr; }
.duo-vue__part{ min-width:0; display:flex; flex-direction:column; }
/* Les deux fenetres partagent un bord : leurs bas doivent tomber au meme
   endroit, sans quoi le trait commun s'arrete dans le vide. Le site
   « avant » ayant moins de contenu, c'est sa fenetre qui s'etire — et le
   creux qu'elle garde en bas dit deja quelque chose. */
.duo-vue__part .nav-fenetre{ flex:1; display:flex; flex-direction:column; }
.duo-vue__part .nav-fenetre__vue{ flex:1; display:flex; flex-direction:column; }
.duo-vue__part .site-apercu__pied{ margin-top:auto; }
.duo-vue__part + .duo-vue__part .nav-fenetre{ border-left:0; }
.duo-vue__etiq{
  display:flex; align-items:baseline; gap:10px; margin:0 0 12px;
  font-size:10px; letter-spacing:.2em; color:#5E5E5E;
}
.duo-vue__etiq b{ font:400 12.5px/1 Manrope; letter-spacing:0; color:#A8A8AE; }

/* La page montrée dans la fenêtre : des barres à la place du texte.
   Un faux texte lisible se lirait — et détournerait l'œil de ce que la
   maquette veut montrer, qui est la structure. */
.site-apercu__bloc{ padding:18px 22px; display:grid; gap:9px; }
.site-apercu__barre{ height:9px; background:#161616; }
.site-apercu__barre.courte{ width:54%; }
.site-apercu__barre.claire{ background:#242424; }
.site-apercu__pied{
  padding:11px 22px; border-top:1px solid var(--trait);
  font-size:11.5px; color:#7B7B7B;
}
.site-apercu__pied.alerte{ color:#F0A0A0; }

@media (max-width:860px){
  .duo-vue{ grid-template-columns:1fr; }
  .duo-vue__part + .duo-vue__part{ margin-top:26px; }
  .duo-vue__part + .duo-vue__part .nav-fenetre{ border-left:1px solid var(--trait); }
}

/* ====================================================================
   LE VOCABULAIRE DES PAGES « SOLUTIONS »
   --------------------------------------------------------------------
   Six pages, six sujets, et autant de maquettes qui ne montrent pas la
   même chose : une semaine d'agenda, un suivi en colonnes, un document
   signé, un message. Ce qui suit n'ajoute que ce que `mk`, la fenêtre de
   navigateur et la jauge ne savaient pas faire — le reste est repris.
   ==================================================================== */

/* ---- Des barres à la place du texte ----
   Un faux texte lisible se lirait, et détournerait l'œil de ce que la
   maquette veut montrer. Servent au document comme au message. */
.barres{ display:grid; gap:8px; }
.barres i{ display:block; height:8px; background:#161616; }
.barres i.courte{ width:54%; }
.barres i.claire{ background:#242424; }

/* ---- La semaine, telle que l'agenda la montre ----
   Sept colonnes ne tiennent pas sur un téléphone sans devenir illisibles :
   la grille garde sa largeur minimale et défile dans son cadre, plutôt que
   de se comprimer jusqu'à ce que les intitulés se chevauchent. */
.sem-cadre{ overflow-x:auto; }
.sem{ display:grid; grid-template-columns:44px repeat(6, minmax(64px, 1fr)); min-width:500px; }
.sem__tete{
  padding:10px 6px; font-size:11px; color:#7B7B7B; text-align:center;
  border-left:1px solid var(--trait); border-bottom:1px solid var(--trait);
}
.sem__tete:first-child{ border-left:0; }
.sem__heure{
  padding:9px 8px 0 0; font-size:10.5px; color:#5E5E5E; text-align:right;
  border-top:1px solid #141414;
}
.sem__case{ min-height:42px; padding:3px; border-left:1px solid var(--trait); border-top:1px solid #141414; }
.sem__seance{
  height:100%; border-radius:4px; padding:5px 6px;
  font-size:10.5px; line-height:1.2; color:#0B0B0B; background:#6EE7A0;
  overflow:hidden;
}
.sem__seance.collectif{ background:#7AA2FF; }
/* Un créneau libre reste une case vide dessinée : le montrer plein aurait
   dit le contraire de ce que la page promet. */
.sem__seance.libre{ background:transparent; border:1px dashed var(--trait); color:#5E5E5E; }

/* ---- Le suivi en colonnes ---- */
.pipe{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.pipe__col{ border-left:1px solid var(--trait); min-width:0; padding-bottom:12px; }
.pipe__col:first-child{ border-left:0; }
.pipe__tete{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:11px 14px; border-bottom:1px solid var(--trait);
  font-size:11.5px; color:#7B7B7B;
}
.pipe__tete b{ font-weight:500; color:#F2F2F3; }
.pipe__fiche{ margin:10px 12px 0; border:1px solid var(--trait); border-radius:6px; padding:10px 12px; }
.pipe__fiche strong{ display:block; font-size:12.5px; font-weight:500; color:#F2F2F3; }
.pipe__fiche span{ display:block; margin-top:3px; font-size:11px; color:#7B7B7B; }

/* ---- Une feuille de document, avec sa ligne de signature ----
   Le paraphe est un tracé SVG et non une police manuscrite : une police
   absente du poste se serait remplacée par du texte droit, qui n'aurait
   plus rien dit. */
.doc{ background:#0B0B0B; border:1px solid var(--trait); padding:22px 24px; }
.doc__tete{ font:500 14.5px Manrope; letter-spacing:-.02em; color:#F2F2F3; }
.doc__sous{ margin-top:4px; font-size:11.5px; color:#7B7B7B; }
.doc .barres{ margin:18px 0 20px; }
.doc__signature{ border-top:1px dashed var(--trait); padding-top:15px; display:flex; align-items:center; gap:14px; }
.doc__paraphe svg{ width:106px; height:36px; display:block; }
.doc__paraphe path{ fill:none; stroke:#F2F2F3; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.doc__qui small{ display:block; font-size:11px; color:#7B7B7B; }
.doc__qui strong{ display:block; font-size:12.5px; font-weight:500; color:#F2F2F3; }

/* ---- Un message, tel qu'il arrive ---- */
.mail{ border:1px solid var(--trait); background:#0B0B0B; }
.mail__tete{ padding:13px 16px; border-bottom:1px solid var(--trait); }
.mail__objet{ font:500 13.5px Manrope; letter-spacing:-.02em; color:#F2F2F3; }
.mail__de{ margin-top:3px; font-size:11.5px; color:#7B7B7B; }
.mail__corps{ padding:16px; }
.mail__bouton{
  display:inline-block; margin-top:14px; background:#333333; color:#FFF;
  border-radius:4px; padding:8px 14px; font-size:12px;
}

/* ---- Une barre de proportion, posée dans une ligne ---- */
.mk__barre{ flex:0 0 88px; height:5px; border-radius:999px; background:#1F1F1F; overflow:hidden; }
.mk__barre b{ display:block; height:100%; border-radius:999px; background:#F2F2F3; }
.mk__barre b.vert{ background:#6EE7A0; }

@media (max-width:700px){
  .pipe{ grid-template-columns:1fr; }
  .pipe__col{ border-left:0; border-top:1px solid var(--trait); }
  .pipe__col:first-child{ border-top:0; }
}