:root{
  --ink:#000000;
  --ink-2:#1d1d1f;
  --paper:#ffffff;
  --soft:#f5f5f7;
  --soft-2:#fbfbfd;
  --muted:#6e6e73;
  --line:#d2d2d7;
  --accent:#0071e3;
  --accent-hover:#0077ed;
  --accent-soft:#e8f3ff;
  --max:1180px;
  --radius:24px;
  --shadow:0 1px 2px rgba(0,0,0,.03);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;color:var(--ink-2);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:3px}
img{max-width:100%;height:auto}
p{margin:.5rem 0 1rem}
.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.topbar{background:#000;color:#f5f5f7;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding:8px 0;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);border-bottom:1px solid rgba(0,0,0,.08);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:11px 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;min-width:245px;color:#000}
.brand img{width:44px;height:44px;object-fit:contain;display:block;flex:0 0 44px}
.brand strong{display:block;font-size:.98rem;letter-spacing:-.01em;color:#000}
.brand small{display:block;color:var(--muted);font-size:.78rem}
.navlinks{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.navlinks a{color:#1d1d1f;text-decoration:none;padding:8px 10px;border-radius:999px;font-size:.88rem}
.navlinks a:hover,.navlinks a[aria-current="page"]{background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;border-radius:999px;padding:12px 20px;font-weight:600;border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease;line-height:1.1;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:#000;color:#fff}.btn.primary:hover{background:#1d1d1f}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}.btn.accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.light{background:#fff;color:#000;border-color:rgba(0,0,0,.14)}
.mobile{display:none}
.hero{background:#000;color:#fff;padding:82px 0 68px;overflow:hidden}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.hero-copy{min-width:0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:700;color:#8abfff}
.hero h1{font-size:clamp(2.8rem,6vw,5.25rem);line-height:.98;letter-spacing:-.055em;margin:.45rem 0 1.15rem;max-width:960px;color:#fff;font-weight:700}
.hero p.lead{font-size:clamp(1.08rem,2vw,1.35rem);line-height:1.42;color:#a1a1a6;max-width:780px;letter-spacing:-.015em}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}
.proof{display:flex;gap:11px 26px;flex-wrap:wrap;margin-top:24px;color:#a1a1a6;font-size:.9rem}
.proof strong{color:#f5f5f7}
.hero-visual{margin:0;min-width:0}
.hero-visual img{width:100%;display:block;border-radius:28px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.34);object-fit:contain}
.hero-visual figcaption{font-size:.76rem;color:#86868b;margin-top:10px;text-align:center}
.section{padding:78px 0}
.section.soft{background:var(--soft)}
.section.dark{background:#000;color:#fff}
.section h2{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.04;letter-spacing:-.045em;margin:0 0 22px;color:#000;font-weight:700}
.section.dark h2,.cta h2{color:#fff}
.section h3{font-size:1.22rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 9px;color:#1d1d1f}
.intro{font-size:1.14rem;max-width:860px;color:#515154}
.grid{display:grid;gap:20px}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c2{grid-template-columns:repeat(2,1fr)}
.card,.human,.toc,.sourcebox{border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.card{padding:28px}.card.soft{background:var(--soft-2)}.card p:last-child{margin-bottom:0}.card a{font-weight:600;text-decoration:none}.card a:hover{text-decoration:underline}
.kicker{color:var(--accent);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}
.price{font-size:2.4rem;font-weight:700;letter-spacing:-.045em;line-height:1}
.check{list-style:none;padding:0;margin:13px 0}.check li{margin:8px 0;padding-left:1.5rem;position:relative}.check li:before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
.quote{font-size:1.08rem;font-style:normal;line-height:1.55}.quote cite{font-style:normal;color:var(--muted);font-size:.9rem}
.answer{border:0;padding:20px 22px;background:var(--accent-soft);border-radius:20px;margin:0 0 34px;color:#14385c}
.breadcrumbs{padding:15px 0;font-size:.84rem;color:var(--muted)}.breadcrumbs a{text-decoration:none;color:var(--muted)}
.toc{padding:20px 22px}.toc a{text-decoration:none}.toc ul{columns:2;margin:8px 0;padding-left:20px}
.faq details{border-top:1px solid var(--line);padding:18px 0}.faq summary{cursor:pointer;font-weight:650;font-size:1.02rem;color:#1d1d1f}.faq details p{color:#515154}
.sourcebox{font-size:.9rem;padding:19px 20px;background:#fbfbfd}.sourcebox a{word-break:break-word}
.cta{border-radius:32px;padding:44px;background:#000;color:#fff}.cta p{color:#a1a1a6;max-width:760px}
.footer{background:#000;color:#a1a1a6;padding:52px 0 24px}.footer-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:34px}.footer h3{color:#fff;font-size:1rem}.footer a{color:#d2d2d7;text-decoration:none}.footer a:hover{color:#fff}.footer-logo{display:block;width:58px;height:58px;object-fit:contain;margin:0 0 14px}.fine{border-top:1px solid #2c2c2e;margin-top:32px;padding-top:20px;font-size:.8rem;color:#6e6e73}
.badge{display:inline-block;border:1px solid var(--line);padding:5px 9px;border-radius:999px;font-size:.78rem;margin:2px 4px 2px 0}
.human{padding:28px}.muted{color:var(--muted)}.center{text-align:center}.split{display:grid;grid-template-columns:1.12fr .88fr;gap:42px;align-items:start}.notice{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px 18px}
.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:13px 10px;vertical-align:top}.table th{background:#fbfbfd;color:#1d1d1f}
.sticky-cta{display:none}
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}.photo-tile{margin:0;border-radius:24px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,.08)}.photo-tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.photo-tile figcaption{padding:12px 14px;font-size:.82rem;color:var(--muted)}
.feature-photo{margin:0}.feature-photo img{width:100%;display:block;border-radius:28px;border:1px solid rgba(0,0,0,.08);background:#fff;object-fit:contain}.feature-photo figcaption{font-size:.8rem;color:var(--muted);margin-top:9px;text-align:center}
.trustline{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.9rem;color:var(--muted)}.trustline img{width:38px;height:38px;object-fit:contain}
.spacer-top{margin-top:22px}
@media(max-width:980px){.navlinks{display:none}.mobile{display:inline-flex}.hero-grid,.split{grid-template-columns:1fr}.hero-grid{gap:34px}.hero{padding:64px 0 54px}.hero h1{font-size:clamp(2.7rem,10vw,4.6rem)}.hero-visual{max-width:720px}.grid.c3{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.wrap{width:min(var(--max),calc(100% - 28px))}.topbar .right{display:none}.brand{min-width:0}.brand span{display:none}.nav{padding:9px 0}.hero{padding:54px 0 42px}.hero h1{font-size:clamp(2.45rem,13vw,3.8rem)}.hero p.lead{font-size:1.06rem}.section{padding:58px 0}.section h2{font-size:clamp(2rem,10vw,2.8rem)}.grid.c3,.grid.c2,.footer-grid{grid-template-columns:1fr}.photo-strip{grid-template-columns:repeat(2,1fr)}.toc ul{columns:1}.cta{padding:30px 24px;border-radius:26px}.sticky-cta{position:fixed;display:flex;z-index:40;bottom:12px;left:12px;right:12px;gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(18px);padding:8px;border-radius:999px;box-shadow:0 8px 30px rgba(0,0,0,.16)}.sticky-cta .btn{flex:1;padding:12px 10px}.footer{padding-bottom:88px}}


/* ============================================================
   RÈGLE GLOBALE VALIDÉE
   Bloc centré dans la page + texte aligné à gauche
   Appliquée à TOUTES les pages et TOUS les composants.
   ============================================================ */
:root{
  --content-readable: 980px;
}

/* Conteneurs de page centrés */
.wrap,
main > .wrap,
section > .wrap,
.hero > .wrap,
.footer > .wrap,
.topbar > .wrap,
.header > .wrap {
  width: min(var(--max), calc(100% - 40px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Contenu éditorial : colonne centrée, sans être collée à gauche */
main .section > .wrap,
main .breadcrumbs {
  width: min(var(--content-readable), calc(100% - 40px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Le hero reste généreux comme Photo Identité mais centré dans la page */
main .hero > .wrap {
  width: min(var(--max), calc(100% - 40px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tout le texte est aligné à gauche à l'intérieur des blocs centrés */
main,
main section,
main .wrap,
main .hero-copy,
main .card,
main .faq,
main details,
main .cta,
main .intro,
main h1,
main h2,
main h3,
main h4,
main p,
main li,
main summary,
main blockquote,
main figcaption,
.footer,
.footer .wrap,
.footer-grid,
.footer-grid > div {
  text-align: left !important;
}

/* Paragraphes : largeur lisible mais bloc aligné sur la colonne */
main .section p,
main .section ul,
main .section ol,
main .section blockquote {
  max-width: 860px;
}

/* Grilles centrées à l'intérieur de la colonne */
main .grid,
main .photo-strip,
main .faq,
main .cta {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Boutons alignés avec le texte, pas centrés artificiellement */
main .actions,
main .cta .actions {
  justify-content: flex-start !important;
}

/* Responsive : mêmes marges régulières à gauche et à droite */
@media (max-width: 680px){
  .wrap,
  main > .wrap,
  section > .wrap,
  .hero > .wrap,
  .footer > .wrap,
  .topbar > .wrap,
  .header > .wrap,
  main .section > .wrap,
  main .breadcrumbs {
    width: calc(100% - 28px);
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================
   GABARIT UNIQUE = MISE EN PAGE DE LA PAGE D'ACCUEIL
   1240 px extérieur / 880 px lecture / bloc centré / texte gauche
   ============================================================ */
:root{
  --pf-page:1240px;
  --pf-reading:880px;
}

/* Tous les conteneurs principaux utilisent exactement la même largeur */
.wrap,
.header .wrap,
.topbar .wrap,
.footer .wrap,
main > .wrap,
main .hero > .wrap,
main .section > .wrap,
main .breadcrumbs{
  width:min(var(--pf-page), calc(100% - 56px)) !important;
  max-width:var(--pf-page) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
}

/* Aucune page intérieure ne doit recréer une colonne différente */
main .wrap .container,
main .section .container,
main .container{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Même point de départ visuel pour tout le texte */
main,
main section,
main .wrap,
main .hero-copy,
main .card,
main .faq,
main details,
main .cta,
main h1,
main h2,
main h3,
main h4,
main p,
main ul,
main ol,
main li,
main summary,
main blockquote,
main figcaption{
  text-align:left !important;
}

/* Même largeur de lecture que la homepage */
main .section > .wrap > h2,
main .section > .wrap > h3,
main .section > .wrap > p,
main .section > .wrap > ul,
main .section > .wrap > ol,
main .section > .wrap > blockquote,
main .section > .wrap > .intro,
main .section > .wrap > .faq{
  max-width:var(--pf-reading) !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Les éléments larges restent dans le même conteneur général */
main .grid,
main .photo-strip,
main .cards-grid,
main .steps-list,
main .related-grid,
main .cta{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Hero : même largeur et même départ que l'accueil */
main .hero .hero-copy{
  max-width:880px !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
main .hero h1,
main .hero .lead,
main .hero p{
  text-align:left !important;
}
main .actions,
main .hero .actions,
main .cta .actions{
  justify-content:flex-start !important;
}

/* FAQ : pas de centrage interne différent */
main .faq details,
main .faq-section details{
  width:100% !important;
  max-width:880px !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Mobile : mêmes marges gauche/droite partout */
@media(max-width:680px){
  .wrap,
  .header .wrap,
  .topbar .wrap,
  .footer .wrap,
  main > .wrap,
  main .hero > .wrap,
  main .section > .wrap,
  main .breadcrumbs{
    width:calc(100% - 40px) !important;
    max-width:none !important;
  }
}