:root{--nuit:#0a1b27;--nuit2:#14374e;--bleu:#0170c8;--bleu-vif:#028dfa;--ciel:#65c3ff;--pale:#eef3f7;--filet:#d6dfe5;--blanc:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font:400 16px/1.65 Inter,Arial,sans-serif;color:var(--nuit);background:var(--blanc);-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:var(--bleu);text-underline-offset:3px}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:"Schibsted Grotesk",Arial,sans-serif;font-weight:700;color:inherit;margin:0}
h1{font-size:clamp(36px,5vw,60px);line-height:1.05;letter-spacing:-.035em}
h2{font-size:clamp(28px,3vw,38px);line-height:1.12;letter-spacing:-.025em}
h3{font-size:22px;line-height:1.2;letter-spacing:-.015em;margin:0 0 10px}
h4{font-size:17px;line-height:1.3;letter-spacing:-.005em;margin:0 0 6px}
.section+.section{margin-top:44px}

/* Haut de page */
.entete{position:sticky;top:0;z-index:10;background:var(--nuit);color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.entete-in{max-width:1240px;margin:auto;padding:12px 24px;display:flex;align-items:center;gap:24px}
.logo img{width:186px;height:auto}
.menu{display:flex;gap:20px;margin:0 auto;font-size:14px}
.menu a,.menu-mobile a{color:#fff;text-decoration:none}
.menu a:hover{text-decoration:underline}
.tel{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.4);border-radius:6px;color:#fff;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.tel svg{width:17px;height:17px}
.menu-mobile{display:none;position:relative}
.menu-mobile summary{list-style:none;cursor:pointer;font-size:14px;font-weight:600}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile nav{position:absolute;right:0;top:36px;width:240px;background:var(--nuit);border:1px solid var(--nuit2);padding:8px 16px}
.menu-mobile nav a{display:block;padding:10px 0;border-bottom:1px solid var(--nuit2)}
.menu-mobile nav a:last-child{border:0}

.heros{color:#fff;background:var(--nuit)}
.heros-in{max-width:1240px;margin:auto;padding:88px 24px}
.heros a{color:#fff}
.heros h1{margin-bottom:22px}
.atouts{list-style:none;display:flex;flex-wrap:wrap;gap:12px 24px;margin:24px 0 0;padding:0;font-size:14px;font-weight:600}
.atouts li{display:flex;align-items:center;gap:8px}
.atouts svg{width:18px;height:18px;padding:2px;background:var(--bleu-vif);border-radius:3px;color:#fff;flex:none}

.photo{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--pale);border:1px solid var(--filet);color:var(--nuit);font-size:14px;font-weight:600}
.sombre .photo{background:var(--nuit2);border-color:var(--nuit2);color:#fff}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}

.lignes{list-style:none;margin:18px 0;padding:0;border-top:1px solid var(--filet)}
.lignes li{display:grid;grid-template-columns:minmax(150px,1fr) 2.2fr;gap:6px 24px;padding:14px 0;border-bottom:1px solid var(--filet)}
.lignes li>span:only-child{grid-column:1/-1}
.lignes strong{font-weight:600}
.blocs{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 36px;margin-top:20px}
.bloc p:last-child{margin-bottom:0}
.blocs.n3{grid-template-columns:repeat(3,1fr)}
.etapes{list-style:none;counter-reset:e;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px}
.etapes li{counter-increment:e}
.etapes li::before{content:"Étape " counter(e,decimal-leading-zero);display:block;font-size:13px;font-weight:600;margin-bottom:10px}
.etapes p:last-child{margin-bottom:0}

.faq details{border-bottom:1px solid var(--filet);padding:16px 0}
.faq details:first-child{border-top:1px solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq h3{font-size:18px;margin:0}
.faq details p{margin:12px 0 0}

.appel{background:var(--bleu);color:#fff}
.appel-in{max-width:1240px;margin:auto;padding:44px 24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 40px}
.appel-titre{font:700 clamp(23px,2.4vw,30px)/1.15 "Schibsted Grotesk",Arial,sans-serif;letter-spacing:-.02em;margin:0}
.appel-liens{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0;font-weight:600}
.appel a{color:#fff}

.pied{background:var(--nuit);color:#fff;font-size:14px}
.pied-in{max-width:1240px;margin:auto;padding:52px 24px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:36px}
.pied nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;align-content:start}
.pied a{color:#fff;text-decoration:none}
.pied a:hover{text-decoration:underline}
.pied-contact>a:first-child{font:700 21px "Schibsted Grotesk",Arial,sans-serif}
.pied-contact p{margin:6px 0}

/* Version A */
.a .deux{display:grid;grid-template-columns:1.3fr .9fr;gap:64px;align-items:center}
.formulaire{background:rgba(10,27,39,.72);border:1px solid rgba(255,255,255,.28);padding:26px;display:grid;gap:14px}
.formulaire-titre{font:700 24px/1.15 "Schibsted Grotesk",Arial,sans-serif;letter-spacing:-.02em;margin:0}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formulaire label{display:grid;gap:3px;font-size:14px}
.formulaire input,.formulaire textarea{width:100%;border:0;border-bottom:1px solid #fff;background:transparent;color:#fff;padding:6px 0;font:inherit;border-radius:0}
.formulaire button{border:0;background:var(--bleu);color:#fff;padding:14px;font:600 15px Inter,Arial,sans-serif;border-radius:4px;cursor:pointer}
.a .groupe{border-top:1px solid var(--filet)}
.a .groupe:first-of-type{border:0}
.a .groupe-in{max-width:1240px;margin:auto;padding:72px 24px;display:grid;grid-template-columns:4fr 8fr;gap:56px}
.a .groupe-titre h2{position:sticky;top:96px}
.a .groupe-texte{max-width:760px}
.a .sombre{background:var(--nuit);color:#fff;border:0}
.a .sombre a{color:#fff}
.a .etapes{grid-template-columns:repeat(2,1fr);margin-top:0}
.a .sombre+.groupe{border:0}

/* Version B */
.b .centre{text-align:center;max-width:920px;padding:96px 24px}
.b .centre .atouts{justify-content:center}
.heros-liens{display:flex;flex-direction:column;align-items:center;gap:14px;margin:28px 0 0}
.bouton{background:var(--bleu);padding:16px 36px;text-decoration:none;font-weight:600;border-radius:4px}
.bande-in{max-width:1180px;margin:auto;padding:80px 24px}
.bande-in.etroit{max-width:820px}
.bande-in.etroit h2{margin-bottom:26px}
.b .clair{background:#fff}
.b .pale{background:var(--pale)}
.b .pale .photo{background:#fff}
.b .pale .lignes,.b .pale .lignes li,.b .pale .faq details{border-color:#c9d5dd}
.b .sombre{background:var(--nuit);color:#fff}
.b .sombre a{color:#fff}
.bande-tete{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:44px}
.bande-tete h2{margin-bottom:18px}
.bande-tete.inverse>div{order:2}
.bande-tete.seule{grid-template-columns:1fr;margin-bottom:0}
.bande-tete.seule h2{max-width:720px;margin:0}
.b .bande .section{max-width:880px}
.b .bande .section .blocs{width:100%}
.b .bande .section:has(.blocs),.b .bande .section:has(.galerie){max-width:none}

/* Version C */
.c .court{padding:64px 24px}
.c .court h1{max-width:900px;margin:0}
.lecture{max-width:1160px;margin:auto;padding:52px 24px 80px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
.lecture-texte{max-width:760px}
.lecture-texte section{margin-top:64px;padding-top:44px;border-top:1px solid var(--filet)}
.lecture-texte h2{margin-bottom:22px}
.ouverture{margin-bottom:26px}
.photo.large{aspect-ratio:16/9}
.c .etapes{grid-template-columns:repeat(2,1fr)}
.encart{position:sticky;top:90px}
.encart-in{background:var(--nuit);color:#fff;padding:26px}
.encart a{color:#fff;font-weight:600}
.encart-titre{font:700 22px/1.2 "Schibsted Grotesk",Arial,sans-serif;letter-spacing:-.015em}
.tel-grand{display:block;font:700 25px "Schibsted Grotesk",Arial,sans-serif!important;text-decoration:none;margin-bottom:12px;letter-spacing:-.01em}

/* Article */
.article-tete{background:var(--pale);border-bottom:1px solid var(--filet)}
.article-tete-in{max-width:880px;margin:auto;padding:52px 24px 44px}
.article-tete h1{font-size:clamp(34px,4.4vw,52px);margin-bottom:20px}
.fil{font-size:14px;margin-bottom:22px}
.fil a{color:var(--nuit)}
.article{max-width:1180px;margin:auto;padding:56px 24px 80px;display:grid;grid-template-columns:280px minmax(0,740px);gap:64px;justify-content:center;align-items:start}
.article-cote{position:sticky;top:90px}
.sommaire summary{font:700 18px "Schibsted Grotesk",Arial,sans-serif;cursor:pointer;margin-bottom:10px}
.sommaire ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet);font-size:14px;line-height:1.4}
.sommaire li{border-bottom:1px solid var(--filet)}
.sommaire a{display:block;padding:11px 0;color:var(--nuit);text-decoration:none}
.sommaire a:hover{text-decoration:underline}
.article-texte section+section{margin-top:60px;padding-top:44px;border-top:1px solid var(--filet)}
.article-texte h2{margin-bottom:22px}

/* Plan des modèles */
.plan main{max-width:720px;margin:auto;padding:64px 24px}
.plan h1{font-size:36px;margin-bottom:14px}
.plan-liste{list-style:none;padding:0;margin:30px 0;border-top:1px solid var(--filet)}
.plan-liste li{padding:18px 0;border-bottom:1px solid var(--filet);display:grid;gap:4px}
.plan-liste a{font:700 21px "Schibsted Grotesk",Arial,sans-serif}

@media (max-width:1180px){.menu{display:none}.menu-mobile{display:block}.tel{margin-left:auto}}
@media (max-width:900px){
.a .deux,.a .groupe-in,.bande-tete,.lecture,.article,.pied-in{grid-template-columns:minmax(0,1fr)}
.a .deux,.a .groupe-in,.bande-tete{gap:28px}
.a .groupe-titre h2,.encart,.article-cote{position:static}
.lecture,.article{gap:36px}
.bande-tete.inverse>div{order:0}
.encart{order:-1;display:none}
.etapes,.a .etapes,.c .etapes,.blocs.n3{grid-template-columns:repeat(2,1fr)}
.heros{background:var(--nuit)}
}
@media (max-width:620px){
.entete-in{padding:10px 16px;gap:12px}
.logo img{width:140px}
.tel{padding:8px 10px;font-size:13px}
.tel svg{display:none}
.heros-in,.b .centre,.c .court{padding:48px 16px}
.a .groupe-in,.bande-in,.lecture,.article,.article-tete-in,.appel-in,.pied-in{padding-left:16px;padding-right:16px}
.a .groupe-in,.bande-in{padding-top:52px;padding-bottom:52px}
.blocs,.blocs.n3,.etapes,.a .etapes,.c .etapes,.champs{grid-template-columns:minmax(0,1fr)}
.galerie{grid-template-columns:repeat(2,1fr)}
.lignes li{grid-template-columns:minmax(0,1fr)}
.pied nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Ajustements après contrôle visuel */
.blocs+p,.etapes+p,.lignes+p{margin-top:22px}
.b .bande .section{max-width:none}
.b .bande .section>p,.b .bande .section>h3{max-width:760px}
.b .bande .section>.lignes{max-width:880px}
.etapes li::before{content:none}
