/* ═══════════════════════════════════════════════════════════════════
Assurance permis étranger — habillage commun aux 45 pages
Palette bleue de la page anglaise, structure du brief v2.
⚠ AUCUN préfixe de wrapper (.atp, .pe…) : le brief signale que c'est
le piège n°1 — seule une page portait le wrapper sur le site 1, et
tout le CSS préfixé cassait ailleurs. Ici tout est en classes
autonomes, valables sur n'importe quelle page.
═══════════════════════════════════════════════════════════════════ */
:root{
--pe-ink:#141B2E; --pe-mut:#5E6B85; --pe-bg:#F7F9FC; --pe-panel:#fff;
--pe-blue:#3B6FE0; --pe-blue2:#2856C0; --pe-soft:#ECF1FD; --pe-pale:#F3F7FE;
--pe-green:#2FA24A; --pe-green2:#24853B; --pe-greensoft:#E8F6EC;
--pe-line:#E3E9F2; --pe-wa:#25D366; --pe-r:14px;
--pe-font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--pe-titre:'Sora','Plus Jakarta Sans',sans-serif;
}
/* ─────────── 1. TOPBAR — même texte sur toutes les pages ─────────── */
.pe-topbar{background:var(--pe-ink);color:#C7D6F2;font-family:var(--pe-font);
font-size:12.5px;line-height:1.5;padding:8px 0}
.pe-topbar .pe-in{max-width:1120px;margin:0 auto;padding:0 20px;
display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center}
.pe-topbar b{color:#fff;font-weight:700}
.pe-topbar .pe-sep{width:3px;height:3px;border-radius:50%;background:#5C7099;flex:none}
@media(max-width:760px){
.pe-topbar{font-size:11.5px;padding:7px 0}
.pe-topbar .pe-court{display:none}
}
/* ─────────── 2. HEADER ─────────── */
.pe-hd{position:sticky;top:0;z-index:60;background:rgba(247,249,252,.94);
backdrop-filter:blur(12px);border-bottom:1px solid var(--pe-line);font-family:var(--pe-font)}
.pe-hd-row{display:flex;align-items:center;justify-content:space-between;gap:16px;
max-width:1120px;margin:0 auto;padding:12px 24px;position:relative}
.pe-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto;min-width:0}
.pe-brand svg{width:48px;height:48px;flex:none}
.pe-brand-t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pe-brand-t b{font-family:var(--pe-titre);font-weight:700;font-size:1.16rem;color:var(--pe-ink);white-space:nowrap}
.pe-brand-t span{font-size:.76rem;color:var(--pe-blue2);font-weight:600;white-space:nowrap}
.pe-nav{display:flex;gap:20px;font-size:.87rem;font-weight:600;
flex:1 1 auto;justify-content:center;min-width:0}
.pe-nav a{color:var(--pe-mut);text-decoration:none;white-space:nowrap}
.pe-nav a:hover{color:var(--pe-ink)}
.pe-act{display:flex;align-items:center;gap:10px;flex:none}
/* le bouton d'action */
.pe-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:11px 18px;border-radius:12px;font-weight:700;font-size:.88rem;
text-decoration:none;border:1.5px solid transparent;white-space:nowrap;
transition:transform .15s,box-shadow .15s,background .15s;font-family:var(--pe-font);cursor:pointer}
.pe-btn:hover{transform:translateY(-1px)}
.pe-btn-blue{background:var(--pe-blue);color:#fff;box-shadow:0 6px 16px rgba(59,111,224,.24)}
.pe-btn-blue:hover{box-shadow:0 12px 26px rgba(59,111,224,.36);color:#fff}
.pe-btn-green{background:var(--pe-green);color:#fff;box-shadow:0 6px 16px rgba(47,162,74,.24)}
.pe-btn-green:hover{box-shadow:0 12px 26px rgba(47,162,74,.36);color:#fff}
.pe-btn-out{background:#fff;color:var(--pe-ink);border-color:var(--pe-line)}
.pe-btn-out:hover{border-color:var(--pe-blue);color:var(--pe-ink)}
/* le sélecteur de langue : drapeau seul, sans libellé — comme assutemporaire */
.pe-lang{display:inline-flex;align-items:center;justify-content:center;line-height:0;
border:1.5px solid rgba(0,0,0,.12);border-radius:9px;padding:7px 10px;background:#fff;
text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pe-lang:hover{border-color:var(--pe-blue);box-shadow:0 2px 8px rgba(59,111,224,.18)}
/* le burger */
.pe-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
width:44px;height:44px;border:1px solid var(--pe-line);border-radius:12px;background:#fff;
cursor:pointer;padding:0 10px;flex:none}
.pe-burger span{display:block;height:2.5px;width:100%;background:var(--pe-ink);border-radius:2px;
transition:transform .25s ease,opacity .2s ease}
.pe-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.pe-burger.open span:nth-child(2){opacity:0}
.pe-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(min-width:901px) and (max-width:1240px){.pe-nav{gap:12px;font-size:.79rem}
.pe-brand-t b{font-size:1rem}.pe-brand svg{width:42px;height:42px}
.pe-btn{padding:10px 14px;font-size:.82rem}}
@media(max-width:900px){
.pe-hd-row{padding:10px 14px;gap:10px;flex-wrap:nowrap}
.pe-burger{display:flex;order:3}
.pe-act{order:2;gap:8px}
/* le bouton du header s'efface : la barre fixe du bas porte l'action */
.pe-act .pe-btn{display:none}
.pe-brand svg{width:40px;height:40px}
.pe-brand-t b{font-size:.98rem}
.pe-brand-t span{font-size:.7rem}
.pe-nav{position:absolute;top:100%;left:0;right:0;display:block;background:#fff;
border-bottom:1px solid var(--pe-line);box-shadow:0 18px 34px rgba(20,27,46,.10);
padding:6px 0;max-height:0;overflow:hidden;visibility:hidden;
transition:max-height .28s ease,visibility .28s}
.pe-nav.open{max-height:74vh;overflow:auto;visibility:visible}
.pe-nav a{display:block;padding:14px 20px;font-size:1rem;color:var(--pe-ink);
border-bottom:1px solid #F2F5FA}
.pe-nav a:last-child{border-bottom:0}
}
@media(max-width:400px){
.pe-brand-t b{font-size:.9rem}.pe-brand-t span{font-size:.65rem}
.pe-hd-row{padding:9px 10px;gap:7px}
.pe-lang{padding:6px 8px}
.pe-burger{width:40px;height:40px;padding:0 9px}
.pe-brand svg{width:34px;height:34px}
}
/* sous 360 px, le nom de marque doit pouvoir se couper */
@media(max-width:359px){
.pe-hd-row{padding:8px 8px;gap:5px}
.pe-burger{width:38px;height:38px;padding:0 8px}
.pe-lang{padding:5px 7px}
.pe-lang svg{width:18px;height:12px}
.pe-brand-t b{white-space:normal;line-height:1.1;font-size:.84rem}
.pe-brand-t span{display:none}
.pe-bulle{width:48px;height:48px;right:12px}
.pe-bulle svg{width:25px;height:25px}
}
/* ─────────── 3. PROOFBAR ─────────── */
.pe-proof{background:var(--pe-pale);border-bottom:1px solid var(--pe-line);font-family:var(--pe-font)}
.pe-proof ul{max-width:1120px;margin:0 auto;padding:11px 20px;list-style:none;
display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.pe-proof li{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--pe-ink)}
.pe-proof li i{color:var(--pe-green);font-style:normal;font-weight:800}
@media(max-width:560px){.pe-proof li{font-size:12.5px}.pe-proof ul{gap:6px 16px;padding:9px 14px}}
/* ─────────── 4. BANDEAU DE DRAPEAUX ─────────── */
.pe-flags{padding:20px 0;background:var(--pe-panel);border-top:1px solid var(--pe-line);
border-bottom:1px solid var(--pe-line);overflow:hidden;font-family:var(--pe-font)}
.pe-flags-lbl{text-align:center;font-size:.74rem;color:var(--pe-mut);margin:0 0 14px;
font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.pe-mq{overflow:hidden;width:100%;max-width:100vw;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pe-mq-track{display:flex;gap:16px;width:max-content;animation:pemq 90s linear infinite}
.pe-mq-track:hover{animation-play-state:paused}
.pe-mq img{width:52px;height:35px;border-radius:4px;box-shadow:0 1px 4px rgba(20,27,46,.14);flex:none}
@keyframes pemq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pe-mq-track{animation:none}}
@media(max-width:720px){.pe-mq img{width:40px;height:27px}.pe-mq-track{animation-duration:70s}}
/* ─────────── 5. FOOTER ─────────── */
.pe-ft{background:var(--pe-ink);color:#AFC2DF;margin-top:52px;font-family:var(--pe-font);
font-size:14px;line-height:1.65}
.pe-ft *{box-sizing:border-box}
.pe-ft a{color:#AFC2DF;text-decoration:none}
.pe-ft a:hover{color:#fff}
.pe-ft-in{max-width:1120px;margin:0 auto;padding:0 20px}
/* bandeau de réassurance */
.pe-ft-rea{background:#1B2440;border-bottom:1px solid #2A3550}
.pe-ft-rea ul{max-width:1120px;margin:0 auto;padding:15px 20px;list-style:none;
display:flex;flex-wrap:wrap;gap:9px 28px;justify-content:center}
.pe-ft-rea li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#fff}
.pe-ft-rea li i{color:#4ED37A;font-style:normal;font-weight:800}
.pe-ft-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding:38px 0 30px}
.pe-ft h5{color:#fff;font-family:var(--pe-titre);font-size:13px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;margin:0 0 13px}
.pe-ft-grid a{display:block;padding:4px 0;font-size:13.6px}
.pe-ft-brand{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.pe-ft-brand b{display:block;font-family:var(--pe-titre);color:#fff;font-size:1.04rem}
.pe-ft-brand small{display:block;font-size:.72rem;color:#7C93B8}
.pe-ft-brand svg{flex:none}
.pe-ft-co{margin:12px 0;font-size:13.4px}
.pe-ft-co div{margin-bottom:6px;display:flex;gap:7px;align-items:baseline}
.pe-ft-co b{color:#fff;font-weight:600;white-space:nowrap;flex:none}
.pe-ft-wa{display:inline-flex;align-items:center;gap:8px;background:var(--pe-wa);
color:#fff!important;font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:11px;margin-top:6px}
.pe-ft-wa:hover{background:#1FB855;color:#fff!important}
.pe-ft-orias{font-size:12.2px;color:#7C93B8;margin:12px 0 0;line-height:1.6}
/* cluster de liens internes */
.pe-ft-clu{border-top:1px solid #2A3550;padding:20px 0}
.pe-ft-clu p{margin:0 0 9px;font-size:12.5px;color:#7C93B8;line-height:2}
.pe-ft-clu b{color:#C7D6F2}
.pe-ft-clu a{display:inline;font-size:12.5px}
.pe-ft-clu .s{color:#3A4763;padding:0 4px}
.pe-ft-bot{border-top:1px solid #2A3550;padding:16px 0 24px;display:flex;flex-wrap:wrap;
gap:8px 20px;justify-content:space-between;font-size:12.2px;color:#7C93B8}
.pe-ft-bot nav{display:flex;flex-wrap:wrap;gap:6px 14px}
@media(max-width:900px){.pe-ft-grid{grid-template-columns:1fr 1fr;gap:26px}
.pe-ft-grid>div:first-child{grid-column:1/-1}}
@media(max-width:560px){.pe-ft-grid{grid-template-columns:1fr;gap:24px}
.pe-ft-rea li{font-size:12.5px}.pe-ft{margin-bottom:78px}}
/* ─────────── 6. BARRE MOBILE FIXE — 3 boutons ─────────── */
.pe-mbar{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:none;gap:7px;
background:#fff;border-top:1px solid var(--pe-line);
padding:9px 9px calc(9px + env(safe-area-inset-bottom));
box-shadow:0 -4px 18px rgba(20,27,46,.11);font-family:var(--pe-font);
max-width:100vw;overflow:hidden}
.pe-mbar a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:3px;padding:9px 4px;border-radius:12px;text-decoration:none;
font-size:11.5px;font-weight:700;line-height:1.15;text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pe-mbar svg{width:19px;height:19px;display:block;flex:none}
.pe-mbar .m1{background:var(--pe-blue);color:#fff}
.pe-mbar .m2{background:var(--pe-soft);color:var(--pe-blue2)}
.pe-mbar .m3{background:var(--pe-wa);color:#fff}
@media(max-width:900px){.pe-mbar{display:flex}body{padding-bottom:80px}}
/* ─────────── 7. BULLE WHATSAPP + MODALE ─────────── */
.pe-bulle{position:fixed;right:16px;bottom:96px;z-index:8500;width:56px;height:56px;
border-radius:50%;background:var(--pe-wa);display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 22px rgba(37,211,102,.42);border:0;cursor:pointer;padding:0}
.pe-bulle svg{width:30px;height:30px;fill:#fff}
.pe-bulle-lbl{position:fixed;right:80px;bottom:110px;z-index:8500;background:#fff;
border:1px solid var(--pe-line);border-radius:999px;padding:7px 13px;font-size:12.5px;
font-weight:700;color:var(--pe-ink);box-shadow:0 4px 14px rgba(20,27,46,.13);
font-family:var(--pe-font);pointer-events:none}
@media(min-width:901px){.pe-bulle{bottom:24px}.pe-bulle-lbl{bottom:38px}}
@media(max-width:560px){.pe-bulle-lbl{display:none}}
.pe-modal{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;
background:rgba(14,22,40,.58);padding:16px;font-family:var(--pe-font)}
.pe-modal.open{display:flex}
.pe-modal-card{background:#fff;border-radius:20px;max-width:520px;width:100%;
max-height:90vh;overflow:auto;padding:26px 26px 22px;position:relative;
box-shadow:0 30px 80px rgba(14,22,40,.36)}
.pe-modal-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;
border:1px solid var(--pe-line);background:#fff;font-size:20px;line-height:1;color:var(--pe-mut);cursor:pointer}
.pe-modal-x:hover{background:var(--pe-bg);color:var(--pe-ink)}
.pe-badge{display:inline-flex;align-items:center;gap:6px;background:var(--pe-greensoft);
color:var(--pe-green2);font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
padding:5px 11px;border-radius:999px;margin-bottom:12px}
.pe-modal h3{font-family:var(--pe-titre);font-size:1.42rem;line-height:1.25;margin:0 0 8px;color:var(--pe-ink)}
.pe-modal h3 span{color:var(--pe-blue)}
.pe-modal .pe-sub{margin:0 0 18px;color:var(--pe-mut);font-size:.94rem;line-height:1.6}
.pe-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.pe-row>div{min-width:0}
/* plus d'étiquette au-dessus des champs : l'indication est dans la case,
l'intitulé survit en aria-label pour les lecteurs d'écran */
.pe-modal .pe-row label,.pe-walb .pe-row label{display:none}
.pe-modal select:invalid,.pe-walb select:invalid{color:#96A3B8}
.pe-modal input,.pe-modal select,.pe-walb input,.pe-walb select{
width:100%;min-height:48px;font-size:15px;font-family:var(--pe-font);color:var(--pe-ink);
border:1.5px solid var(--pe-line);border-radius:11px;padding:0 13px;background:#fff;
transition:border-color .15s,box-shadow .15s}
.pe-modal select,.pe-walb select{appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.pe-modal input:focus,.pe-modal select:focus,.pe-walb input:focus,.pe-walb select:focus{
outline:none;border-color:var(--pe-blue);box-shadow:0 0 0 3px rgba(59,111,224,.16)}
.pe-modal input::placeholder,.pe-walb input::placeholder{color:#96A3B8}
/* ── l'assistante guidée (12/09) ─────────────────────────────────
En bas à GAUCHE : la bulle WhatsApp occupe la droite. Sous la
modale (9500) pour que le formulaire passe toujours devant. */
/* le panneau : la conversation façon WhatsApp du site 1 */
.pe-as{position:fixed;right:16px;bottom:160px;z-index:8950;width:min(340px,calc(100vw - 32px));
background:#ece5dd;border-radius:18px;overflow:hidden;font-family:var(--pe-font);
box-shadow:0 30px 70px -24px rgba(14,22,40,.5);display:flex;flex-direction:column;
max-height:min(580px,calc(100vh - 150px))}
.pe-as[hidden]{display:none} /* display:flex écraserait l'attribut hidden */
.pe-as-h{background:#075e54;color:#fff;padding:12px 14px;display:flex;align-items:center;gap:11px}
.pe-as-hv{position:relative;width:42px;height:42px;flex:none;display:flex;
align-items:center;justify-content:center;border-radius:50%;background:#fff}
.pe-as-hv img{width:42px;height:42px;border-radius:50%;display:block}
.pe-as-pt{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;
border-radius:50%;background:#35D06A;border:2px solid #075e54;font-style:normal}
.pe-as-h b{display:block;font-size:14.5px;line-height:1.25}
.pe-as-st{font-size:11.5px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:6px}
.pe-as-x{margin-left:auto;background:transparent;border:0;color:#fff;font-size:24px;
line-height:1;cursor:pointer;opacity:.85}
.pe-as-m{padding:14px 12px;flex:1 1 auto;min-height:110px;max-height:320px;overflow-y:auto;
background-image:radial-gradient(rgba(0,0,0,.045) 1px,transparent 1px);background-size:18px 18px;
display:flex;flex-direction:column;gap:9px}
.pe-as-msg{align-self:flex-start;max-width:86%;background:#fff;color:var(--pe-ink);
border-radius:12px;border-top-left-radius:3px;padding:9px 12px;font-size:13.8px;
line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.pe-as-moi{align-self:flex-end;max-width:82%;background:#d9fdd3;color:#0b2e13;
border-radius:12px;border-top-right-radius:3px;padding:8px 12px;font-size:13.4px;
line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.pe-as-f{background:#f0f0f0;padding:10px 11px;display:flex;flex-direction:column;gap:8px;
flex:0 1 auto;overflow-y:auto}
.pe-as-qr{display:flex;flex-wrap:wrap;gap:7px}
.pe-as-qr button{font-family:inherit;font-size:12.8px;font-weight:700;color:#075e54;
background:#fff;border:1.5px solid #cfe9d9;border-radius:999px;padding:8px 12px;
cursor:pointer;text-align:left;transition:background .14s}
.pe-as-qr button:hover{background:#e7f8ee}
.pe-as-qr button.pe-as-act{color:#fff;background:#2bab63;border-color:#2bab63}
.pe-as-qr button.pe-as-act:hover{background:#229a54}
.pe-as-ask{display:flex;gap:7px}
.pe-as-ask input{flex:1;min-width:0}
.pe-as-ask button{flex:none;width:42px;border:0;border-radius:10px;background:#2bab63;
color:#fff;font-size:16px;cursor:pointer}
.pe-as-ask button:hover{background:#229a54}
.pe-as-f input{width:100%;font-family:inherit;font-size:14px;border:1px solid #d8d8d8;
border-radius:10px;padding:10px 12px;background:#fff}
.pe-as-f input:focus{outline:none;border-color:#2bab63;box-shadow:0 0 0 3px rgba(43,171,99,.16)}
.pe-as-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pe-as-send{width:100%;font-family:inherit;font-weight:800;font-size:14.5px;color:#fff;
background:#2bab63;border:0;border-radius:12px;padding:12px;cursor:pointer;
display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.pe-as-send:hover{background:#229a54}
.pe-as-consent{font-size:10.5px;color:#667;line-height:1.4;display:block}
.pe-as-consent input{width:auto!important;display:inline!important;margin-right:6px;padding:0!important}
.pe-as-n{padding:7px 12px 9px;font-size:10.6px;line-height:1.4;color:#667;
background:#f0f0f0;border-top:1px solid #e2e2e2}
@media(min-width:901px){
.pe-as{bottom:92px} /* la bulle est à bottom:24 */
}
@media(max-width:560px){
.pe-as{position:fixed;left:10px;right:10px;bottom:160px;width:auto;
max-height:calc(100vh - 190px)} /* la bulle mobile est à bottom:96 */
.pe-as-m{max-height:40vh}
}
/* ── l'encart de préqualification (lien ?cas=…&j=…) ── */
.pe-ctx{background:var(--pe-pale);border:1px solid var(--pe-line);
border-left:3px solid var(--pe-blue);border-radius:10px;
padding:11px 14px;margin:0 0 13px;font-family:var(--pe-font)}
.pe-ctx-tag{display:inline-block;background:var(--pe-soft);color:var(--pe-blue2);
font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
padding:2px 8px;border-radius:999px;margin-bottom:6px}
.pe-ctx b{display:block;font-size:14.5px;color:var(--pe-ink);font-weight:800;
line-height:1.32;margin-bottom:3px}
.pe-ctx .pe-ctx-m{display:block;font-size:12.8px;color:var(--pe-mut);line-height:1.5}
/* ── date de départ + nb de jours : le modèle du site 1 (30/08) ──
Étiquettes VISIBLES au-dessus des deux champs (ce sont les seules du
formulaire : un datetime-local n'a pas de placeholder), les deux
côte à côte MÊME SUR MOBILE, la date plus large que la durée. */
.pe-row.pe-quand{grid-template-columns:1.6fr 1fr}
.pe-lab span{display:block;font-size:12.3px;font-weight:700;color:var(--pe-mut);
margin:0 0 5px;line-height:1.3}
.pe-modal input[type=datetime-local],.pe-walb input[type=datetime-local]{
font-variant-numeric:tabular-nums;letter-spacing:.2px;
color-scheme:light;-webkit-appearance:none;appearance:none}
.pe-modal input[type=datetime-local]::-webkit-calendar-picker-indicator,
.pe-walb input[type=datetime-local]::-webkit-calendar-picker-indicator{
opacity:.72;cursor:pointer}
@media(max-width:480px){
.pe-row.pe-quand{grid-template-columns:1.55fr 1fr;gap:9px}
}
/* le bouton respire : il ne doit pas coller aux cases à cocher, sinon
le pouce touche « J'accepte » en visant « Envoyer » */
.pe-send{width:100%;min-height:54px;font-size:1rem;margin-top:20px}
@media(max-width:480px){.pe-send{margin-top:24px}}
.pe-tel{text-align:center;margin:13px 0 6px;font-size:.9rem;color:var(--pe-mut)}
.pe-tel a{color:var(--pe-ink);font-weight:700;text-decoration:none}
.pe-note{font-size:15px;font-weight:700;color:#12233d;text-align:center;margin:0;line-height:1.45}
.pe-k{display:flex;gap:9px;align-items:flex-start;font-size:.82rem;color:var(--pe-mut);
font-weight:400;margin:11px 0 0;line-height:1.5}
.pe-k input{width:18px;height:18px;min-height:0;flex:none;margin-top:1px;accent-color:var(--pe-blue)}
.pe-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
@media(max-width:480px){.pe-row{grid-template-columns:1fr}.pe-modal-card{padding:22px 18px 18px}
.pe-modal h3{font-size:1.22rem}}
/* ─────────── 8. BLOC « On le fait pour vous » avant le footer ─────────── */
.pe-walb{background:var(--pe-pale);border-top:1px solid var(--pe-line);padding:44px 0;font-family:var(--pe-font)}
.pe-walb-in{max-width:640px;margin:0 auto;padding:0 20px}
.pe-walb-card{background:#fff;border:1px solid var(--pe-line);border-radius:20px;
padding:28px 26px;box-shadow:0 12px 34px rgba(20,27,46,.07)}
.pe-walb h3{font-family:var(--pe-titre);font-size:1.36rem;line-height:1.28;margin:0 0 8px;color:var(--pe-ink)}
.pe-walb h3 span{color:var(--pe-blue)}
.pe-walb .pe-sub{margin:0 0 18px;color:var(--pe-mut);font-size:.94rem;line-height:1.6}
@media(max-width:560px){.pe-walb{padding:32px 0}.pe-walb-card{padding:22px 18px}}
/* ─────────── 9. garde-fous de largeur ───────────
Ces règles ne changent aucun design : elles empêchent seulement
qu'un élément trop large pousse la page et crée un défilement
horizontal. Constaté sur 42 pages avant correction. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll table{min-width:520px}
.pe-ft-clu p{overflow-wrap:anywhere}
.pe-ft-clu a{white-space:normal}
img,svg,video,iframe{max-width:100%}
@media(max-width:900px){
.stickybar,.mbar:not(.pe-mbar),.mobile-bar,.wa-float{display:none!important}
.wrap,.container,main,section{max-width:100%}
pre,code{overflow-x:auto;max-width:100%}
}
/* ═══════════════════════════════════════════════════════════════════
16. TARIFICATEUR — le tunnel repris d'assutemporaire.fr, en bleu.
Le principe, c'est celui du site 1 et c'est le seul qui capte :
le visiteur voit d'ABORD un mini-formulaire court avec son tarif
qui s'anime, il laisse ses coordonnées, LE LEAD PART, et seulement
ensuite le tarificateur JL Assure apparaît. Avant, l'iframe se
chargeait tout de suite : celui qui l'abandonnait était perdu.
L'iframe elle-même n'est ni déplacée ni modifiée (brief §0.2).
═══════════════════════════════════════════════════════════════════ */
/* La section est large pour laisser respirer le tarificateur ; le
mini-formulaire, lui, reste étroit — on lit mieux une colonne courte. */
.pe-tz{max-width:960px;margin:0 auto;padding:0 20px;font-family:var(--pe-font)}
.pe-tz-form-wrap{max-width:720px;margin:0 auto}
.pe-tz-card{background:#fff;border:1px solid var(--pe-line);border-radius:22px;
padding:22px;box-shadow:0 24px 60px -30px rgba(20,27,46,.34)}
.pe-tz-assur{display:block;background:linear-gradient(90deg,var(--pe-blue),var(--pe-blue2));
color:#fff;font-size:12.5px;font-weight:800;text-align:center;padding:8px 10px;
border-radius:9px;margin-bottom:12px;letter-spacing:.2px}
.pe-tz-head{text-align:center;margin-bottom:16px}
.pe-tz-step{display:inline-block;background:var(--pe-soft);color:var(--pe-blue);
font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px;
text-transform:uppercase;letter-spacing:.4px}
.pe-tz-title{margin:8px 0 5px;font-family:var(--pe-titre);font-size:20px;
font-weight:700;color:var(--pe-ink)}
.pe-tz-title span{color:var(--pe-blue)}
.pe-tz-sub{margin:0;font-size:12.5px;color:var(--pe-mut)}
.pe-tz-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:10px}
.pe-tz-fld{width:100%;box-sizing:border-box;border:1px solid var(--pe-line);
border-radius:10px;padding:12px 13px;font-size:14px;font-family:inherit;
background:#fff;color:var(--pe-ink);min-height:48px}
.pe-tz-fld::placeholder{color:#96A3B8}
.pe-tz-fld:focus{outline:none;border-color:var(--pe-blue);box-shadow:0 0 0 3px var(--pe-soft)}
.pe-tz-form>.pe-tz-fld{margin-bottom:10px}
.pe-tz-sim{display:flex;align-items:center;gap:6px;
background:linear-gradient(135deg,#fff,var(--pe-pale));border:1px solid var(--pe-line);
border-radius:14px;padding:12px 10px;margin:4px 0 8px}
.pe-tz-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
text-align:center;min-width:0}
.pe-tz-cell-sel{flex:1.5}
.pe-tz-lab{font-size:10px;font-weight:700;color:var(--pe-mut);
text-transform:uppercase;letter-spacing:.3px}
.pe-tz-sel{width:100%;box-sizing:border-box;border:1px solid var(--pe-line);
border-radius:9px;padding:8px 6px;font-size:14px;font-family:inherit;
background:#fff;color:var(--pe-ink)}
.pe-tz-sel:focus{outline:none;border-color:var(--pe-blue);box-shadow:0 0 0 3px var(--pe-soft)}
.pe-tz-price{font-size:24px;font-weight:800;color:var(--pe-blue);line-height:1;white-space:nowrap}
.pe-tz-pd{font-size:16px;font-weight:800;color:var(--pe-ink);white-space:nowrap}
.pe-tz-sep{width:1px;align-self:stretch;background:var(--pe-line);margin:3px 0}
.pe-tz-note{margin:0 0 12px;font-size:11px;color:var(--pe-mut);text-align:center}
.pe-tz-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important}
.pe-tz-consent{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;
color:var(--pe-mut);margin-bottom:8px;cursor:pointer;line-height:1.5}
.pe-tz-consent input{margin-top:2px;flex:none;width:18px;height:18px;accent-color:var(--pe-blue)}
/* même règle que la modale : le bouton ne colle pas aux cases à cocher */
.pe-tz-btn{display:block;width:100%;border:0;background:var(--pe-blue);color:#fff;
font-weight:800;font-size:15.5px;font-family:inherit;padding:15px;border-radius:13px;
cursor:pointer;box-shadow:0 10px 24px -10px rgba(59,111,224,.62);margin-top:20px;
min-height:54px;transition:background .15s}
.pe-tz-btn:hover{background:var(--pe-blue2)}
.pe-tz-trust{text-align:center;font-size:11px;color:var(--pe-mut);margin:12px 0 0;line-height:1.7}
/* ── l'écrin du tarificateur : caché tant que le lead n'est pas parti ── */
.pe-tzf{margin:14px auto 0;padding:22px;max-width:920px}
.pe-tzf[hidden]{display:none}
.pe-tzf-head{text-align:center;margin-bottom:12px}
.pe-tzf-head p{margin:6px 0 0;font-size:13px;color:var(--pe-mut)}
/* Le tarificateur est une page tierce : on ne peut ni la restyler ni
mesurer sa hauteur (origine différente). On lui donne donc la place
qu'il demande — 1150 px, la valeur qui tourne en production sur
assutemporaire.fr — pour qu'il n'affiche pas son propre ascenseur. */
.pe-tzf-wrap{position:relative;min-height:1150px;overflow:hidden;border-radius:12px}
.pe-tzf-wrap iframe{display:block;width:100%;height:1150px;min-height:1150px;
border:0;border-radius:12px;background:#fff}
.pe-tzf-load{position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:10px;color:var(--pe-mut);font-size:14px}
.pe-tzf-spin{width:30px;height:30px;border:3px solid var(--pe-soft);
border-top-color:var(--pe-blue);border-radius:50%;animation:peTzSpin .8s linear infinite}
@keyframes peTzSpin{to{transform:rotate(360deg)}}
.pe-tzf-fallback{text-align:center;font-size:12px;color:var(--pe-mut);margin:10px 0 0}
.pe-tzf-fallback a{color:var(--pe-blue)}
@media(prefers-reduced-motion:reduce){.pe-tzf-spin{animation:none}}
@media(max-width:560px){
.pe-tz-card{padding:18px 15px;border-radius:18px}
.pe-tz-row{grid-template-columns:minmax(0,1fr)}
.pe-tz-price{font-size:21px}.pe-tz-pd{font-size:15px}
.pe-tzf{padding:14px 0}
.pe-tz-btn{margin-top:24px}
}
/* ═══════════════════════════════════════════════════════════════════
17. « À LIRE AUSSI » — maillage contextuel.
Trois liens qui répondent à la question SUIVANTE du lecteur, pas
trois liens décoratifs. Placé avant le bloc de conversion : celui
qui n'est pas prêt à demander un devis continue à lire au lieu de
quitter le site.
═══════════════════════════════════════════════════════════════════ */
.pe-aussi{max-width:760px;margin:0 auto;padding:34px 20px 0;font-family:var(--pe-font)}
.pe-aussi h2{font-family:var(--pe-titre);font-size:1.05rem;font-weight:700;
color:var(--pe-mut);margin:0 0 14px;text-transform:uppercase;letter-spacing:.07em}
.pe-aussi ul{list-style:none;padding:0;margin:0;display:grid;gap:1px;
border:1px solid var(--pe-line);border-radius:12px;overflow:hidden;background:var(--pe-line)}
.pe-aussi li{background:#fff}
.pe-aussi a{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:15px 18px;text-decoration:none;color:var(--pe-ink);font-weight:600;
font-size:.95rem;line-height:1.4;transition:background .13s,color .13s}
.pe-aussi a::after{content:"→";color:var(--pe-blue);font-weight:700;flex:none}
.pe-aussi a:hover{background:var(--pe-pale);color:var(--pe-blue2)}
@media(max-width:560px){
.pe-aussi{padding:26px 14px 0}
.pe-aussi a{padding:14px 15px;font-size:.9rem}
}
/* ═══════════════════════════════════════════════════════════════════
18. TUNNEL — sélecteur de situation + les 3 étapes.
Repris d'assutemporaire.fr, passé en bleu. Le sélecteur n'est pas un
ornement : c'est une étape de qualification. Le visiteur se reconnaît
dans une des quatre cartes, lit trois lignes qui parlent de lui, et
clique sur le bouton qui correspond à SA situation.
═══════════════════════════════════════════════════════════════════ */
.pe-fn-sec{padding:38px 0 6px;font-family:var(--pe-font)}
.pe-fn-in{max-width:860px;margin:0 auto;padding:0 20px}
.pe-fn{background:#fff;border:1px solid var(--pe-line);border-radius:18px;padding:24px;
box-shadow:0 22px 50px -34px rgba(20,27,46,.45)}
.pe-fn-q{font-family:var(--pe-titre);font-weight:700;font-size:1.18rem;
color:var(--pe-ink);margin-bottom:15px;line-height:1.3}
.pe-fn-cards{display:flex;flex-wrap:wrap;gap:10px}
.pe-fn-card{flex:1 1 auto;min-width:172px;text-align:left;cursor:pointer;
background:var(--pe-bg);border:1.5px solid var(--pe-line);border-radius:12px;
padding:13px 15px;font-family:var(--pe-font);font-size:.9rem;font-weight:600;
color:var(--pe-mut);line-height:1.4;transition:border-color .15s,background .15s,color .15s}
.pe-fn-card:hover{border-color:var(--pe-blue);color:var(--pe-ink)}
.pe-fn-card.is-on{border-color:var(--pe-blue);background:var(--pe-soft);color:var(--pe-blue2)}
.pe-fn-panel{margin-top:18px;padding-top:18px;border-top:1px dashed var(--pe-line)}
.pe-fn-panel[hidden]{display:none}
.pe-fn-panel p{margin:0 0 16px;color:var(--pe-mut);font-size:.97rem;line-height:1.65}
.pe-fn-cta{display:flex;flex-wrap:wrap;gap:10px}
.pe-fn-h2{font-family:var(--pe-titre);font-size:1.3rem;font-weight:700;color:var(--pe-ink);
margin:34px 0 14px;text-align:center}
.pe-fn-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pe-fn-s{background:#fff;border:1px solid var(--pe-line);border-radius:14px;padding:18px}
.pe-fn-n{width:31px;height:31px;border-radius:50%;background:var(--pe-blue);color:#fff;
font-weight:800;font-size:.92rem;display:flex;align-items:center;justify-content:center}
.pe-fn-s h3{margin:11px 0 5px;font-family:var(--pe-titre);font-size:1rem;
font-weight:700;color:var(--pe-ink);line-height:1.3}
.pe-fn-s p{font-size:.88rem;color:var(--pe-mut);margin:0;line-height:1.55}
@media(max-width:720px){
.pe-fn-steps{grid-template-columns:1fr}
.pe-fn{padding:19px 16px;border-radius:15px}
.pe-fn-in{padding:0 14px}
.pe-fn-card{min-width:100%}
.pe-fn-cta .pe-btn{flex:1 1 auto;justify-content:center}
}
/* ═══ 19. Le formulaire manuel des sept pays ═════════════════════════
Pas de tarificateur ici : le formulaire EST le produit de la page.
Il doit donc respirer plus que les mini-formulaires du reste du site. */
.pe-dev{background:#f2f6fc;border-top:1px solid #dbe6f5;border-bottom:1px solid #dbe6f5;
padding:34px 0;margin:30px 0}
.pe-dev-in{max-width:720px;margin:0 auto;padding:0 18px}
.pe-dev-in h2{margin:0 0 8px;font-size:23px;color:#0b2d5c}
.pe-dev-sous{margin:0 0 20px;font-size:14.6px;line-height:1.6;color:#3b4a5f}
#peDevF{display:flex;flex-direction:column;gap:11px}
.pe-dev-g{display:grid;grid-template-columns:1fr 1fr;gap:11px}
#peDevF input:not([type=checkbox]),#peDevF select{width:100%;padding:12px 13px;border:1px solid #c6d4e6;
border-radius:10px;font:inherit;font-size:15px;background:#fff;color:#12233d;
-webkit-appearance:none;appearance:none}
#peDevF select{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7c93' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 13px center;background-size:12px;
padding-right:34px}
#peDevF input:focus,#peDevF select:focus{outline:2px solid #1a5fd0;outline-offset:1px;
border-color:#1a5fd0}
.pe-dev-ck{display:flex;align-items:flex-start;gap:9px;font-size:13.6px;line-height:1.5;
color:#3b4a5f;margin-top:3px}
#peDevF .pe-dev-ck input[type=checkbox]{margin-top:2px;flex:0 0 auto;width:16px;height:16px;
min-width:16px;-webkit-appearance:checkbox;appearance:checkbox}
.pe-dev-ck>span{flex:1 1 auto;min-width:0}
.pe-dev-go{margin-top:14px;justify-content:center;font-size:16px;padding:14px 20px}
.pe-dev-note{margin:13px 0 0;font-size:13px;line-height:1.55;color:#5b6b80}
/* Même carte deux colonnes que le bloc WhatsApp et que le site 1. */
.pe-dev-in{max-width:1060px}
.pe-dev-card{display:grid;grid-template-columns:1.02fr 1fr;gap:28px;align-items:center;
background:linear-gradient(135deg,#f8fbff,#e9f1fe);border:1px solid #d7e4fa;
border-radius:20px;padding:28px 30px;box-shadow:0 24px 50px -34px rgba(11,87,201,.55)}
.pe-dev-pitch{min-width:0}
.pe-dev-pitch .pe-badge{margin-bottom:11px}
.pe-dev-preuves{list-style:none;padding:0;margin:0;display:grid;gap:7px;
font-size:14.2px;line-height:1.5;color:#3b4a5f}
.pe-dev-preuves li{display:flex;gap:8px;align-items:flex-start}
.pe-dev-preuves i{font-style:normal;color:#24853b;font-weight:700;flex:none}
.pe-dev-panel{background:#fff;border:1px solid #dee8f8;border-radius:16px;
padding:20px 18px 18px;box-shadow:0 10px 30px rgba(20,27,46,.06);min-width:0}
.pe-dev-sous{margin-bottom:14px}
/* Cette page est enfermée dans un `main.wrap` de 820 px : la colonne du
formulaire n'y dépasse jamais 340 px, où deux champs côte à côte
coupent les intitulés (« Téléphone (Wh… »). Un champ par ligne. */
.pe-dev-g{grid-template-columns:1fr}
.pe-dev-note{font-size:15px;font-weight:700;color:#12233d;line-height:1.5}
@media(max-width:900px){
.pe-dev-card{grid-template-columns:1fr;gap:18px;padding:22px 18px;align-items:stretch}
.pe-dev-preuves{display:none}
}
@media(max-width:560px){
.pe-dev-card{padding:18px 14px}
.pe-dev-panel{padding:16px 14px 14px}
}
.pe-dev-ok{background:#fff;border:1px solid #cfe0f4;border-radius:14px;padding:22px}
.pe-dev-ok h3{margin:0 0 7px;font-size:19px;color:#0b2d5c}
.pe-dev-ok p{margin:0 0 15px;font-size:14.6px;line-height:1.6;color:#3b4a5f}
@media (max-width:640px){
.pe-dev-g{grid-template-columns:1fr}
.pe-dev-in h2{font-size:20px}
}
/* ═══ 20. L'aiguillage vers le traitement manuel ═════════════════════
Posé AVANT le bloc de conversion sur les pages où quelqu'un qui
cherche ces sept pays risque d'atterrir et de se perdre. */
.pe-aiguille{max-width:760px;margin:26px auto;padding:15px 17px;background:#fff8e8;
border:1px solid #f0dcb0;border-left:4px solid #e0a72e;border-radius:11px}
.pe-aiguille p{margin:0;font-size:14.6px;line-height:1.62;color:#4a3d21}
.pe-aiguille a{color:#0b57c9;font-weight:600}
/* ═══ 21. La barre multilingue ═══════════════════════════════════════
Injectée en JS, jamais dans le HTML servi. */
.pe-langbar{position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;
align-items:center;gap:12px;padding:11px 14px;background:#0b2d5c;color:#fff;
font-size:14.5px;line-height:1.4;box-shadow:0 -3px 14px rgba(0,0,0,.18)}
.pe-langbar.rtl{flex-direction:row-reverse}
.pe-langbar span{flex:1 1 auto}
.pe-langbar a{flex:0 0 auto;background:#25d366;color:#06301a;text-decoration:none;
font-weight:700;padding:9px 14px;border-radius:9px;white-space:nowrap}
.pe-langbar-x{flex:0 0 auto;background:none;border:0;color:#a8c2e6;font-size:22px;
line-height:1;padding:2px 6px;cursor:pointer}
.pe-langbar-x:hover{color:#fff}
@media (max-width:560px){
.pe-langbar{flex-wrap:wrap;font-size:13.6px;padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.pe-langbar span{flex:1 1 100%}
.pe-langbar a{flex:1 1 auto;text-align:center}
}
/* le décalage de la barre mobile est calculé en JS : la hauteur change
selon la langue (deux lignes en roumain, une seule en chinois). */
/* ═══ 22. Le bloc « vous gardez vos plaques » ════════════════════════
Placé en tête de la page des sept pays parce que c'est LA question
que Réda reçoit le plus. La réponse doit arriver avant le formulaire. */
.pe-plaq{background:#eef4fd;border:1px solid #cfe0f6;border-radius:15px;
padding:23px 25px;margin:26px auto;max-width:760px}
.pe-plaq h2{margin:0 0 11px;font-size:21px;line-height:1.28;color:#0b2d5c}
.pe-plaq p{margin:0 0 11px;font-size:15.6px;line-height:1.68;color:#2c3d55}
.pe-plaq p:last-child{margin-bottom:0}
.pe-plaq strong{color:#0b2d5c}
/* ═══ 23. Le sélecteur de langues du tunnel ══════════════════════════ */
.tl-langs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
max-width:760px;margin:0 auto;padding:13px 18px 0}
.tl-globe{font-size:15px;opacity:.6;margin-inline-end:3px}
.tl-l{display:inline-block;padding:5px 11px;border:1px solid #d4e0ef;border-radius:999px;
font-size:13.4px;text-decoration:none;color:#31465f;background:#fff;line-height:1.35}
.tl-l:hover{border-color:#0b57c9;color:#0b57c9}
.tl-on{background:#0b2d5c;border-color:#0b2d5c;color:#fff;font-weight:600}
/* ═══ 24. Le formulaire retravaillé du 29/08 ═════════════════════════
PIÈGE MESURÉ SUR LE SITE 1 : la règle générale des champs impose un
min-height et une largeur à TOUS les input. Les cases à cocher et les
boutons radio héritaient d'une largeur écrasée à 0 px : présents dans
le HTML, invisibles et incliquables. D'où ces règles ciblées. */
.pe-walb-card input[type=radio],.pe-walb-card input[type=checkbox],
.pe-modal-card input[type=radio],.pe-modal-card input[type=checkbox]{
width:18px!important;min-width:18px!important;height:18px!important;
min-height:18px!important;padding:0!important;margin:0;flex:0 0 auto;
-webkit-appearance:auto!important;appearance:auto!important;accent-color:#0b57c9}
.pe-dem-t{margin:0 0 7px;font-size:13.4px;font-weight:600;color:#0b2d5c}
.pe-dem{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 11px}
.pe-dem label{display:flex;align-items:center;gap:8px;padding:10px 12px;
border:1px solid #c6d4e6;border-radius:10px;background:#fff;cursor:pointer;
font-size:14px;line-height:1.3;color:#22354e}
.pe-dem label:has(input:checked){border-color:#0b57c9;background:#eef4fd;font-weight:600}
.pe-cgz{margin:0 0 11px}
.pe-cgz select{width:100%;padding:12px 13px;border:1px solid #c6d4e6;border-radius:10px;
font:inherit;font-size:15px;background:#fff;color:#12233d}
.pe-cgz optgroup{font-weight:700;color:#0b2d5c}
/* le champ manquant se signale, au lieu de laisser le client dans le noir */
.pe-manque{border-color:#c0392b!important;outline:2px solid rgba(192,57,43,.25)}
.pe-k-manque span{color:#c0392b;font-weight:600}
@media (max-width:560px){ .pe-dem{grid-template-columns:1fr} }
/* ═══ 25. Le modèle repris du site 1 (30/08) ═════════════════════════
Trois écarts constatés sur la capture de Réda, tous corrigés ici. */
/* 1. Les cartes de choix : PLEINE LARGEUR, empilées, avec un vrai bouton
radio visible à gauche. En deux colonnes, les libellés longs se
coupent et le point de sélection disparaît. */
.pe-dem{grid-template-columns:1fr;gap:9px}
.pe-dem label{padding:14px 16px;font-size:15px;gap:11px;border-width:1.5px;
transition:border-color .12s,background .12s}
.pe-dem label:has(input:checked){border-color:#0b57c9;background:#eef4fd;
box-shadow:0 0 0 1px #0b57c9 inset}
/* 2. Le bouton de rappel, sous celui de WhatsApp. En contour : il est
disponible, il ne concurrence pas le premier choix. */
.pe-rappel{display:block;width:100%;margin-top:9px;background:#fff;
color:#0b57c9;border:1.5px solid #c6d4e6;border-radius:12px;
padding:13px 18px;font-size:15.4px;font-weight:600;cursor:pointer;
text-align:center;line-height:1.35;font-family:inherit}
.pe-rappel:hover:not(:disabled){border-color:#0b57c9;background:#f4f8fe}
.pe-rappel:disabled{opacity:.55;cursor:default;border-color:#cfe0d5;
background:#f0f7f3;color:#2b6547}
.pe-rap-ok{margin:11px 0 0;padding:11px 14px;background:#eef6f1;
border:1px solid #c9e2d5;border-radius:10px;font-size:14.4px;
line-height:1.55;color:#1d4633;text-align:center}
/* ═══ 26. Le bloc WhatsApp repris de assutemporaire.fr (30/08) ═══════
Sur le site 1 la carte est en deux colonnes : l'argumentaire à
gauche, le formulaire à droite, le tout dans une carte teintée.
Le site 2 empilait tout sur 640 px : 900 px de haut, bouton sous la
ligne de flottaison, aucun argumentaire. Même modèle ici, palette
bleue au lieu du rose. */
.pe-walb{background:var(--pe-pale);border-top:1px solid var(--pe-line);
padding:40px 0;font-family:var(--pe-font)}
.pe-walb-in{max-width:1060px;margin:0 auto;padding:0 20px}
.pe-walb-card{display:grid;grid-template-columns:1.02fr 1fr;gap:28px;align-items:center;
background:linear-gradient(135deg,#f6faff,#e9f1fe);
border:1px solid #d7e4fa;border-radius:20px;padding:28px 30px;
box-shadow:0 24px 50px -34px rgba(59,111,224,.55)}
.pe-walb-pitch{min-width:0}
.pe-walb-h{font-family:var(--pe-titre);font-size:1.62rem;line-height:1.2;
margin:12px 0 8px;color:var(--pe-ink);font-weight:800}
.pe-walb-h span{color:var(--pe-blue)}
.pe-walb-p{font-size:.95rem;color:var(--pe-mut);line-height:1.62;margin:0 0 14px}
.pe-walb-p b{color:var(--pe-ink);font-weight:700}
.pe-walb-tr{list-style:none;padding:0;margin:0;font-size:.88rem;
color:var(--pe-mut);line-height:1.5;display:grid;gap:7px}
.pe-walb-tr li{display:flex;gap:8px;align-items:flex-start}
.pe-walb-tr i{font-style:normal;color:var(--pe-green2);font-weight:800;flex:none}
/* Le formulaire garde un fond blanc : sur la carte teintée, les champs
blancs seuls flottaient sans structure. */
.pe-walb-form{background:#fff;border:1px solid #dee8f8;border-radius:16px;
padding:20px 18px 18px;box-shadow:0 10px 30px rgba(20,27,46,.06);min-width:0}
.pe-walb-form .pe-send{margin-top:16px;min-height:50px}
.pe-walb-form .pe-tel{margin:11px 0 5px}
/* Deux colonnes pour le choix de la demande, comme sur le site 1 :
« Assurance » et « Carte grise » tiennent largement sur une ligne. */
@media(min-width:520px){.pe-walb-form .pe-dem{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
.pe-walb-card{grid-template-columns:1fr;gap:18px;padding:22px 18px;align-items:stretch}
.pe-walb-h{font-size:1.42rem;margin-top:10px}
.pe-walb-tr{display:none} /* la preuve est déjà dans le pied de page */
}
@media(max-width:560px){
.pe-walb{padding:30px 0}
.pe-walb-in{padding:0 14px}
.pe-walb-card{padding:18px 14px}
.pe-walb-form{padding:16px 14px 14px}
.pe-walb-h{font-size:1.3rem}
}
/* ─────────── 12. TUNNEL DE VENTE BALCIA (pages lot6) ───────────
Le conteneur