@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#17203f;background:#fff;
 font-size:17px;line-height:1.74;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
.w{max-width:1180px;margin:0 auto;padding:0 26px}
a{color:#1b98e0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.018em;line-height:1.26}
p{margin:0 0 17px}
.sur{background:linear-gradient(transparent 58%,#ffd166 58%);padding:0 3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* bandeau */
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);
 backdrop-filter:blur(9px);border-bottom:1px solid #e2e7ef}
header .w{display:flex;align-items:center;gap:26px;height:74px}
.logo{font-weight:700;font-size:22px;letter-spacing:-.03em;color:#17203f;
 text-decoration:none;flex:0 0 auto}
.logo b{color:#1b98e0}
.logo span{display:block;font-size:10.6px;font-weight:500;color:#5a6478;
 letter-spacing:.04em;margin-top:-4px}
header nav{display:flex;gap:22px;font-size:15.2px;font-weight:500;flex:1}
header nav>div{position:relative}
header nav>div>a{color:#17203f;text-decoration:none;padding:26px 0;display:block;
 border-bottom:2px solid transparent}
header nav>div:hover>a{color:#1b98e0}
header nav ul{display:none;position:absolute;top:70px;left:-16px;background:#fff;
 border:1px solid #e2e7ef;border-radius:16px;box-shadow:0 6px 26px rgba(23,32,63,.12);
 padding:10px 0;margin:0;list-style:none;min-width:290px}
header nav>div:hover ul{display:block}
header nav ul a{display:block;padding:9px 22px;color:#17203f;text-decoration:none;
 font-size:15px;font-weight:400}
header nav ul a:hover{background:#dcf0fb;color:#1b98e0}
.btn{display:inline-flex;align-items:center;gap:9px;background:#1b98e0;color:#fff;
 font-weight:600;font-size:15.5px;padding:12px 22px;border-radius:14px;
 border:0;cursor:pointer;font-family:inherit;text-decoration:none;
 box-shadow:0 3px 12px rgba(27,152,224,.28)}
.btn.xl{font-size:17px;padding:16px 30px}
.btn.o{background:#fff;color:#1b98e0;border:1.5px solid #1b98e0;box-shadow:none}
/* le bouton d'eligibilite : le dore du bloc « a savoir », pour sortir du
   tout-bleu. Encre foncee dessus, le contraste est franc. */
.btn.or{background:#ffd166;color:#4a3608;
 box-shadow:0 3px 14px rgba(255,209,102,.42);font-weight:700}
.btn.or:hover{background:#ffda85}
/* Ayoub, 6 septembre : « je veux qu'il soit entre le bloc du redacteur et le
   texte de presentation, et plutot vers la droite. » */
/* Ayoub, 6 septembre : « maintenant qu'on a le bouton verifier mon
   eligibilite, le titre peut prendre les deux tiers de l'ecran et le bouton
   le tiers restant. Ca equilibre et ca evite le vide en bas. » */
.hero .elig{margin:0;display:flex;justify-content:flex-end;
 align-self:center}
.hero .elig .btn{font-size:16.5px;padding:15px 26px;text-align:left;
 display:block;transition:transform .16s ease,box-shadow .16s ease}
/* Ayoub : « rajoute une petite fleche apres, tout a droite sur la derniere
   ligne ; et au survol, pas un changement de couleur — qu'on voie que ca
   bouge. » La fleche est un pseudo-element : elle suit la fin du texte. */
.hero .elig .btn:after{content:'→';float:right;margin-left:14px;
 font-size:17px;line-height:inherit;transition:transform .16s ease}
.hero .elig .btn:hover{transform:scale(1.045);
 box-shadow:0 10px 26px rgba(0,0,0,.24)}
.hero .elig .btn:hover:after{transform:translateX(4px)}
/* les onglets des deux autres branches, a droite du menu */
.onglets{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
.onglets .og{font-size:14px;font-weight:600;text-decoration:none;
 padding:7px 15px;border-radius:20px;border:1px solid #e2e7ef;
 color:#5a6478;background:#fff;white-space:nowrap;
 transition:border-color .15s ease,color .15s ease}
.onglets .og.credit:hover{border-color:#e8944a;color:#e8944a}
.onglets .og.placement:hover{border-color:#3f9e74;color:#3f9e74}
.onglets .og.rachat:hover{border-color:#1b98e0;color:#1b98e0}
.onglets .og .ct{display:none}

.burger{display:none;background:none;border:0;font-size:26px;color:#17203f;
 cursor:pointer;padding:4px 8px}

/* heros d'article */
.hero{position:relative;overflow:hidden;padding:0;color:#fff}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .voile{position:absolute;inset:0;
 background:linear-gradient(105deg,rgba(23,32,63,.93) 0%,rgba(23,32,63,.78) 46%,
 rgba(27,152,224,.55) 100%)}
.hero .w{position:relative;z-index:2;padding-top:60px;padding-bottom:62px;
 display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
 column-gap:40px;align-items:center}
/* Ayoub, 7 septembre : « mets le titre sur toute la largeur, puis partage
   2/3 - 1/3 entre la petite phrase et le bouton jaune ». Le H1 et le fil
   d'Ariane occupent donc la ligne entiere ; la ligne suivante seulement est
   partagee. */
.hero .fil,.hero h1{grid-column:1/-1}
.hero .tx{min-width:0}
.hero .fil{font-size:13.6px;opacity:.88;margin-bottom:18px}
.hero .fil a{color:#fff;text-decoration:none}
.hero .fil span{opacity:.5;margin:0 9px}
.hero h1{font-size:43px;font-weight:700;letter-spacing:-.028em;max-width:none;
 margin-bottom:18px}
.hero .chapeau{font-size:19px;opacity:.93;max-width:none;margin:0;
 align-self:center}
/* Ayoub, 6 septembre : « la signature de l'auteur, enleve-la du background,
   mets-la sur fond blanc. » Elle sort donc du heros et se pose juste en
   dessous, sur le blanc, avant la reponse courte. */
.sign{display:flex;align-items:center;gap:13px;font-size:14.4px;
 color:#5a6478;line-height:1.5;flex-wrap:wrap;
 max-width:1180px;margin:0 auto;padding:22px 26px 0}
.sign .rond{width:44px;height:44px;border-radius:50%;background:#dcf0fb;
 color:#1b98e0;display:flex;align-items:center;justify-content:center;
 font-weight:700;font-size:15px;flex:0 0 auto}
.sign b{color:#17203f;font-weight:600}
.sign .date{color:#8b95a0}

/* corps */
/* Deux colonnes, quatre zones. En face du formulaire : la reassurance.
   En face du corps : le sommaire, qui suit la lecture, puis l'appel a
   l'action. Sur telephone, tout s'empile dans l'ordre utile :
   reponse courte, formulaire, reassurance, sommaire, corps. */
/* Ayoub, 6 septembre : « le sommaire sous le bloc de reassurance a droite,
   pour ne pas laisser un espace blanc. Tu as votre demande en 4 etapes, en
   dessous le sommaire, ca scrolle jusqu'au formulaire et un peu plus. Et une
   fois qu'on a passe le simulateur, on n'a plus que comparer les offres, et
   en dessous le sommaire. »
   D'ou UNE SEULE colonne de droite, collante, qui court du haut de la page au
   bas de l'article : [reassurance | comparateur] + sommaire. Le bloc du haut
   est remplace par le comparateur des que le formulaire est passe (voir
   RAIL, en bas de ce fichier). */
.page{display:grid;grid-template-columns:1fr 330px;gap:0 44px;
 grid-template-areas:"haut rail" "corps rail";
 align-items:start;
 max-width:1180px;margin:0 auto;padding:38px 26px 70px}
.haut{grid-area:haut;min-width:0;max-width:76ch}
article{grid-area:corps;min-width:0;max-width:76ch}
.rail{grid-area:rail;position:sticky;top:96px;align-self:start;
 max-height:calc(100vh - 118px);overflow:auto;
 scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>.som2{margin-top:22px}

/* les etapes de reassurance, en face du formulaire */
/* Ayoub, 6 septembre : « les 4 etapes, fais-moi quelque chose d'un peu plus
   gros, et ecarte un peu l'espace entre chacune des quatre lignes — je
   trouve qu'il est trop petit. » */
.reassur{background:#fff;border:1px solid #e2e7ef;
 border-radius:20px;padding:28px 26px 26px;box-shadow:0 2px 14px rgba(23,32,63,.07)}
/* Ayoub : « il est beaucoup trop complet, il y a trop de texte. Juste les
   etapes. Ne mets pas le detail en bas, ce n'est pas la peine. » */
/* Ayoub : « le titre en jaune, un peu comme le bouton d'en haut. » */
.reassur h3{font-size:20.5px;margin-bottom:24px;display:inline;
 background:linear-gradient(transparent 62%,#ffd166 62%);
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
 padding:0 4px;line-height:1.75}
.reassur h3+ol{margin-top:26px}
.reassur ol{margin:0;padding:0;list-style:none;counter-reset:r}
.reassur li{counter-increment:r;position:relative;padding:4px 0 28px 54px;
 font-size:16.4px;line-height:1.45;color:#17203f;font-weight:500}
.reassur li:before{content:counter(r);position:absolute;left:0;top:0;
 width:37px;height:37px;border-radius:50%;background:#dcf0fb;color:#1b98e0;
 font-weight:700;font-size:16.5px;display:flex;align-items:center;
 justify-content:center}
.reassur li:after{content:'';position:absolute;left:18px;top:40px;bottom:2px;
 width:1px;background:#dbe6ef}
.reassur li:last-child{padding-bottom:0}
.reassur li:last-child:after{display:none}

/* le sommaire de droite, qui suit la lecture */
.som2{background:#eef1f6;border-radius:20px;
 padding:18px 22px 16px;margin:0 0 16px}
.som2 h4{font-size:12.4px;letter-spacing:.07em;text-transform:uppercase;
 color:#5a6478;margin-bottom:10px}
.som2 ol{margin:0;padding:0;list-style:none;counter-reset:s;
 font-size:14.6px;line-height:1.45}
.som2 li{counter-increment:s;margin:0}
.som2 a{display:flex;gap:10px;padding:7px 0;color:#5a6478;
 text-decoration:none;border-left:2px solid transparent;padding-left:12px;
 margin-left:-14px}
.som2 a:before{content:counter(s);flex:0 0 auto;color:#a7b2c2;
 font-variant-numeric:tabular-nums}
.som2 a:hover{color:#1b98e0}
.som2 a.on{color:#17203f;font-weight:600;border-left-color:#1b98e0}
.som2 a.on:before{color:#1b98e0}

/* reponse courte */
/* Ayoub, 7 septembre : « enleve le border bleu et le background bleu du bloc
   reponse courte ». Il ne reste qu'un filet gris a gauche : la reponse se
   detache par sa position en tete d'article, pas par un aplat de couleur. */
.pz{border:0;border-left:3px solid #e2e7ef;border-radius:0;
 padding:2px 0 2px 22px;margin:0 0 26px;background:transparent}
.pz .lab{font-size:11.8px;font-weight:700;letter-spacing:.12em;
 text-transform:uppercase;color:#1b98e0;display:block;margin-bottom:8px}
/* Ayoub, 6 septembre : « le titre de la reponse courte, reduis-le, il prend
   beaucoup de place, c'est cense rester discret. J'aurais aime que tu me le
   mettes juste en gras, a la meme taille que le contenu. Et resserre
   legerement les sauts de ligne. » */
.pz h2{font-size:16.4px;font-weight:700;margin-bottom:8px;line-height:1.4}
.pz p{line-height:1.5;font-size:16.4px;margin:0 0 10px}
.pz p:last-child{margin:0}
/* pas de gras DANS la reponse : le titre est le seul element en gras */
.pz p b,.pz p strong{font-weight:400}
/* la remontee vers la mere, seule occurrence de la page */
.pz .remonte{margin:12px 0 0;font-size:14.6px;color:#5a6478}
.pz .remonte a{color:#1b98e0;text-decoration:none;border-bottom:1px solid #dcf0fb}
.pz .remonte a:hover{border-bottom-color:#1b98e0}
/* les soeurs, en ancres redigees avant les cartes */
.soeurs ul.anc{list-style:none;margin:0 0 24px;padding:0;
 border-left:3px solid #dcf0fb}
.soeurs ul.anc li{font-size:16px;line-height:1.62;color:#5a6478;
 padding:0 0 10px 18px}
.soeurs ul.anc li:last-child{padding-bottom:0}
.soeurs ul.anc a{color:#1b98e0;text-decoration:none;font-weight:600;
 border-bottom:1px solid #dcf0fb}
.soeurs ul.anc a:hover{border-bottom-color:#1b98e0}

/* formulaire */
/* Ayoub, 6 septembre : « le cadre de demarrez par verifier votre
   eligibilite, je l'aurais fait en jaune, comme le jaune du surlignage. » */
/* Ayoub, 6 septembre : « je t'avais demande le BORDER en jaune, pas le fond.
   Deux ou trois pixels pour le mettre en evidence, mais le fond reste
   blanc. » */
.formulaire{border:3px solid #ffd166;border-radius:20px;
 padding:24px 26px 20px;margin:0 0 30px;box-shadow:0 2px 14px rgba(23,32,63,.07);
 background:#fff;scroll-margin-top:96px}
/* Ayoub, 7 septembre : « souligne le titre du formulaire comme "Votre
   demande en 4 etapes" ». Meme surlignage jaune que .reassur h3. */
.formulaire h2{font-size:23px;margin-bottom:6px;display:inline;
 background:linear-gradient(transparent 62%,#ffd166 62%);
 -webkit-box-decoration-break:clone;box-decoration-break:clone;
 padding:0 4px;line-height:1.75}
.formulaire h2+.sous{margin-top:16px}
.formulaire .sous{color:#5a6478;font-size:15.4px;margin-bottom:16px}
.formulaire .legal{font-size:12.6px;color:#5a6478;margin:14px 0 0;
 line-height:1.5}

/* auteur */
.auteur{display:flex;gap:15px;align-items:flex-start;padding:16px 0 20px;
 border-top:1px solid #e2e7ef;border-bottom:1px solid #e2e7ef;
 margin:0 0 28px;font-size:14.6px;color:#5a6478;line-height:1.6}
.auteur .rond{width:52px;height:52px;border-radius:50%;background:#dcf0fb;color:#1b98e0;
 display:flex;align-items:center;justify-content:center;font-weight:700;
 font-size:17px;flex:0 0 auto}
.auteur b{color:#17203f}

/* sommaire */
.som{background:#eef1f6;border-radius:20px;padding:16px 26px 20px;
 margin:0 0 34px}
.som h2{font-size:17px;color:#1b98e0;margin-bottom:6px}
.som ol{margin:0;padding-left:20px;font-size:15.4px;line-height:1.55}
.som ol li{padding:6px 0;border-bottom:1px solid #e3e8f0}
.som ol li:last-child{border:0}
.som a{color:#17203f;text-decoration:none}
.som a:hover{color:#1b98e0}

/* titres du corps */
article h2{font-size:27px;margin:44px 0 14px;scroll-margin-top:96px}
article h2:before{content:'';display:block;width:52px;height:4px;background:#1b98e0;
 border-radius:3px;margin-bottom:15px}
.pz h2:before,.som h2:before,.src h2:before,.soeurs h2:before,
.formulaire h2:before,.silo h2:before,.faq h2:before{display:none}
article h3{font-size:21.5px;margin:32px 0 10px;color:#17203f}
article ul,article ol{margin:0 0 17px;padding-left:22px}
article li{margin:6px 0}

/* composants */
.co{border-radius:20px;padding:22px 26px;margin:26px 0;font-size:16.2px}
/* Ayoub, 6 septembre : « les titres de tes blocs, essaie d'agrandir un petit
   peu, que ça soit bien visible, quitte à les mettre en couleur. » */
/* Ayoub, 6 septembre : « utilise des icones pour les blocs vigilance, bon a
   savoir et tout ca — vigilance un triangle, a savoir une bulle ou un i. Et
   grandis legerement la taille de ce petit titre. » */
.co .lab{font-size:16.6px;font-weight:700;letter-spacing:-.01em;
 text-transform:none;display:flex;align-items:center;gap:9px;
 margin-bottom:12px;line-height:1.3}
.co .lab:before{flex:0 0 auto;width:25px;height:25px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;font-size:14px;
 font-weight:700;line-height:1}
.asavoir .lab:before{content:'i';background:#f6e2b0;color:#7a5a10;
 font-family:Georgia,serif;font-style:italic;font-size:15px}
.vigilance .lab:before{content:'!';background:#f7c9c2;color:#8d2c19;
 border-radius:0;clip-path:polygon(50% 4%,100% 96%,0 96%);
 align-items:flex-end;padding-bottom:2px;font-size:13px}
.verdict .lab:before{content:'✓';background:rgba(255,255,255,.16);
 color:#fff;font-size:13px}
.parcours .lab:before{content:'→';background:#dcf0fb;color:#1b98e0;font-size:14px}
.grille .lab:before{content:'≡';background:#dcf0fb;color:#1b98e0;font-size:15px}
.chiffre .lab:before{content:'#';background:#dcf0fb;color:#1b98e0;font-size:14px}
.co p:last-child,.co ul:last-child,.co ol:last-child{margin-bottom:0}
.chiffre{background:#dcf0fb;border:1px solid #bfe2f6}
.chiffre .lab{color:#1b98e0}
.chiffre .gros{font-size:38px;font-weight:700;letter-spacing:-.035em;
 line-height:1.1;color:#1b98e0;display:block;margin:2px 0 6px}
.verdict{background:#17203f;color:#fff}
.verdict .lab{color:#8fb9d8;font-size:14px;letter-spacing:.09em}
.verdict a{color:#7fc7f0}
.asavoir{background:#fff8e8;border:1px solid #f3e2b6}
.asavoir .lab{color:#8a6212}
.vigilance{background:#fbe9e5;border:1px solid #f0cdc4}
.vigilance .lab{color:#c25340}
.grille{border:1px solid #e2e7ef;padding:0;overflow:hidden}
.grille .lab{padding:18px 24px 6px;color:#1b98e0}
.tab{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15.4px;min-width:460px}
th{text-align:left;background:#eef1f6;padding:12px 20px;font-size:12.4px;
 letter-spacing:.05em;text-transform:uppercase;color:#5a6478;font-weight:600}
td{padding:13px 20px;border-top:1px solid #eef1f6;vertical-align:top}
.oui{color:#3f9e74;font-weight:600} .non{color:#c25340;font-weight:600}
.parcours{border:1px solid #e2e7ef}
.parcours .lab{color:#1b98e0;padding:0}
.parcours ol{margin:0;padding-left:0;list-style:none;counter-reset:e}
.parcours ol li{counter-increment:e;padding:11px 0 11px 44px;position:relative;
 border-top:1px solid #eef1f6;margin:0}
.parcours ol li:first-child{border:0}
.parcours ol li:before{content:counter(e);position:absolute;left:0;top:11px;
 width:28px;height:28px;border-radius:50%;background:#dcf0fb;color:#1b98e0;
 font-weight:700;font-size:14px;display:flex;align-items:center;
 justify-content:center}

/* appel a l'action intercale — fond bleu, bouton blanc, bouton a droite */
.cta{background:linear-gradient(155deg,#1f9ee6,#1275b0);
 border-radius:20px;padding:24px 28px;margin:40px 0;
 display:flex;align-items:center;gap:26px;justify-content:space-between;
 box-shadow:0 6px 24px rgba(27,152,224,.26);flex-wrap:wrap;color:#fff}
.cta .t{flex:1;min-width:240px}
.cta b{display:block;font-size:20px;color:#fff;font-weight:600;
 margin-bottom:5px;line-height:1.3}
.cta span{font-size:15.2px;color:rgba(255,255,255,.88);line-height:1.5}
.cta .btn{background:#fff;color:#1b98e0;box-shadow:0 2px 10px rgba(0,0,0,.12);
 flex:0 0 auto;font-size:16px;padding:14px 26px}
.cta .btn:hover{background:#f2f9fe}
/* jamais deux blocs colles : un composant suivi d'un appel a l'action
   respire, sinon on lit deux cadres empiles */
.co + .cta{margin-top:46px}
.cta + .co,.cta + h2{margin-top:46px}

/* faq, sources, soeurs, silo */
.faq{margin:44px 0 0}
.faq h2{font-size:27px;margin-bottom:16px}
.faq details{border:1px solid #e2e7ef;border-radius:14px;
 padding:16px 22px;margin-bottom:10px}
.faq summary{font-weight:600;font-size:17.2px;cursor:pointer;list-style:none;
 display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:#1b98e0;font-size:23px;line-height:1;
 font-weight:400}
.faq details[open] summary::after{content:'\2013'}
.faq p{margin:12px 0 0;font-size:16px;color:#5a6478}
.src{background:#eef1f6;border-radius:20px;padding:22px 26px;
 margin:40px 0 0}
.src h2{font-size:18px;margin:0 0 10px}
.src ul{margin:0;padding-left:20px;font-size:15.2px;color:#5a6478}
.src li{margin:7px 0}
.src a{color:#1b98e0;text-decoration:underline;text-underline-offset:2px}
/* Ayoub, 6 septembre : « on ne s'est pas compris. Je voulais que le fond
   reste blanc ; ce que je voulais sur fond jaune, c'etait les cases, les
   differents liens que tu proposes. » */
.soeurs,.silo{margin:44px 0 0}
.soeurs h2,.silo h2{font-size:24px;margin-bottom:6px}
.soeurs .intro,.silo .intro{color:#5a6478;font-size:15.4px;
 margin:0 0 16px}
.soeurs .g,.silo .g{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.soeurs .ca,.silo .ca{border:1px solid #f3e2b6;border-radius:14px;
 padding:15px 18px;text-decoration:none;display:block;background:#fff8e8}
.soeurs .ca:hover,.silo .ca:hover{border-color:#1b98e0;box-shadow:0 2px 14px rgba(23,32,63,.07)}
.soeurs .ca b,.silo .ca b{display:block;font-size:16.2px;
 font-weight:600;line-height:1.3}
.soeurs .ca b a,.silo .ca b a{color:#17203f;text-decoration:none}
.soeurs .ca b a:hover,.silo .ca b a:hover{color:#1b98e0}
.soeurs .ca span,.silo .ca span{color:#5a6478;font-size:14.2px}

/* carte laterale */
.pub{background:linear-gradient(160deg,#dcf0fb,#eaf6fd);border:1px solid #c9e6f8;
 border-radius:20px;padding:24px;text-align:center}
.pub h3{font-size:21px;line-height:1.25}
.pub p{font-size:14.4px;color:#5a6478;margin:8px 0 16px}
.pub .btn{width:100%;justify-content:center}
.pub .fin{font-size:12.2px;color:#5a6478;margin:12px 0 0}
.enc{background:#fff;border:1px solid #e2e7ef;
 border-radius:20px;padding:18px 20px;margin-top:16px}
.enc h4{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
 color:#5a6478;margin-bottom:8px}
.enc a{display:block;padding:7px 0;font-size:14.8px;color:#17203f;
 text-decoration:none;border-top:1px solid #f1f4f8;line-height:1.4}
.enc a:first-of-type{border:0} .enc a:hover{color:#1b98e0}

/* pages de service : heros sobre, une seule colonne, pas de formulaire */
.hero.sobre{background:#17203f;padding:0}
.hero.sobre .w{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px}
.hero.sobre h1{font-size:38px}
.page.service{grid-template-columns:1fr;grid-template-areas:"corps"}
.page.service article{max-width:82ch}
.page.service h2{font-size:25px;margin:40px 0 12px}
.page.service h2 a{color:inherit;text-decoration:none}
.page.service h2 a:hover{color:#1b98e0}
.page.service ul{margin:0 0 8px;padding-left:22px}
.page.service li{margin:8px 0}
.page.service .maj{margin-top:38px;padding-top:16px;
 border-top:1px solid #e2e7ef;font-size:14px;color:#5a6478}
/* le formulaire de la page contact — a ne pas confondre avec le simulateur */
.fcontact{border:1px solid #e2e7ef;border-radius:20px;
 padding:24px 26px;margin:24px 0;background:#eef1f6}
.fcontact h2{margin:0 0 14px;font-size:20px}
.fcontact h2:before{display:none}
.fcontact .deux{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fcontact .champ{display:block;margin:0 0 14px}
.fcontact .champ span{display:block;font-size:14.4px;font-weight:600;
 margin-bottom:5px}
.fcontact input,.fcontact select,.fcontact textarea{width:100%;
 font-family:inherit;font-size:15.6px;padding:11px 13px;border-radius:11px;
 border:1px solid #e2e7ef;background:#fff;color:#17203f}
.fcontact textarea{resize:vertical}
.fcontact .legal{font-size:13px;color:#5a6478;margin:14px 0 0;
 line-height:1.55}

/* pied de page */
footer{background:#17203f;color:#c3cbdb;padding:44px 0 22px;font-size:14.5px;
 margin-top:20px}
footer a{color:#c3cbdb;text-decoration:none}
footer a:hover{color:#fff}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
footer h4{color:#fff;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
 margin-bottom:10px}
footer li{list-style:none;margin:6px 0}
footer ul{padding:0;margin:0}
footer .bas{font-size:13px;color:#93a0b8;border-top:1px solid #2a3555;
 margin-top:30px;padding-top:18px;line-height:1.7}

@media(max-width:960px){
 /* Ayoub, 6 septembre : « sur mobile je ne veux pas du tout de sommaire. On a
    la reponse courte, le formulaire, la reassurance, et on enleve le sommaire.
    Ensuite le corps. » La carte comparateur descend en fin de page : elle
    serait sinon collee a la reassurance, deux cadres l'un sur l'autre. */
 .page{grid-template-columns:1fr;padding-top:28px;
  grid-template-areas:"haut" "reas" "corps" "som";gap:0}
 /* la colonne de droite se dissout : ses trois blocs reprennent chacun leur
    place dans l'empilement, dans l'ordre utile au telephone. */
 .rail{display:contents}
 .reas{grid-area:reas;position:static;margin:0 0 24px}
 .pub{grid-area:som;margin:26px 0 0}
 .som2{display:none}
 header .w{gap:10px;height:66px}
 .onglets{margin-left:auto;gap:6px}
 .onglets .og{padding:5px 10px;font-size:12.4px;border-radius:16px}
 .onglets .og .lg{display:none} .onglets .og .ct{display:inline}
 .logo{font-size:19px} .logo span{font-size:9.4px}
 .fcontact .deux{grid-template-columns:1fr}
 .hero.sobre h1{font-size:27px}
 .hero .w{grid-template-columns:1fr;column-gap:0}
 .hero .elig{margin:22px 0 0;justify-content:stretch}
 .hero .elig .btn{width:100%;justify-content:center}
 .hero h1{font-size:29px} .hero .w{padding-top:44px;padding-bottom:46px}
 .cta{flex-direction:column;align-items:stretch} .cta .btn{width:100%;
  justify-content:center}
 .soeurs .g,.silo .g,footer .cols{grid-template-columns:1fr}
 header nav{display:none} .burger{display:block}
 header .w{gap:12px}
 header>.w>.btn{display:none}
 .logo span{display:none}
 header nav.ouvert{display:block;position:absolute;top:74px;left:0;right:0;
  background:#fff;border-bottom:1px solid #e2e7ef;padding:8px 26px 18px}
 header nav.ouvert>div>a{padding:12px 0} header nav.ouvert ul{display:block;position:static;
  border:0;box-shadow:none;padding:0 0 8px 14px;min-width:0}
}