/* ====== Refonte d'octobre 2026 : retours de la réunion ======
   Chargée après style.css. Héros bleus, en-tête deux boutons, méga-menus,
   pied bleu nuit, composants des pages refaites. */
:root{
  --nuit-2:#0A1540;
  --halo-rouge:rgba(217,38,41,.30);
  --halo-bleu:rgba(38,157,217,.26);
  --carte:#fff;
  --ombre-douce:0 1px 2px rgba(16,32,86,.05),0 18px 44px -26px rgba(16,32,86,.32);
  --rayon:20px;
  --max:1320px;
}
.wrap{max-width:calc(var(--max) + 2 * clamp(16px,4vw,64px));margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:.6rem 1rem;z-index:100;font-weight:700}
.skip:focus{left:1rem;top:1rem}
.progress{display:none}
h2{max-width:none}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;text-transform:uppercase;color:var(--corail);margin-bottom:.9rem}
.kicker::before{content:"";background:currentColor}
.hero-bleu .kicker{color:#FF8A8C}
.section-head{display:grid;gap:.9rem}
.section-head.centre{text-align:center;margin-inline:auto;justify-items:center}

/* ---------- Boutons ---------- */
.btn{white-space:nowrap}
.btn-line{background:#fff;color:var(--nuit);border-color:var(--line)}
.btn-line:hover{border-color:var(--nuit)}
.btn-sm{padding:.65rem 1.1rem;font-size:.92rem}
.btn-big{padding:1.1rem 1.8rem;font-size:1.08rem}
.btn svg{flex:none}
.btn-shine{animation:invite 3.8s ease-in-out 1.2s infinite}
@keyframes invite{0%,86%,100%{box-shadow:0 12px 26px -12px rgba(217,38,41,.7)}93%{box-shadow:0 12px 26px -12px rgba(217,38,41,.7),0 0 0 8px rgba(217,38,41,.16)}}
.lien-fleche{display:inline-flex;align-items:center;gap:.4rem;font-weight:800}

/* ---------- En-tête ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 10px 30px -22px rgba(16,32,86,.45)}
.nav-in{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(.8rem,2vw,2.5rem);height:80px;padding-inline:clamp(16px,3vw,56px);max-width:1760px;margin-inline:auto}
.nav .logo{flex:none}
.nav .logo img,.site-foot .logo img{max-width:none;flex:none;border-radius:50%}
.nav .logo img{width:52px;height:52px}
.menu-wrap{display:flex;justify-content:center;height:100%}
.menu{display:flex;align-items:stretch;justify-content:space-evenly;gap:clamp(0rem,.6vw,1rem);width:100%;max-width:1120px;list-style:none;margin:0;padding:0;height:100%;font-weight:700;color:var(--ink-2)}
.menu>li{position:static;display:flex;align-items:center}
.menu>li>a{display:flex;align-items:center;gap:.4rem;padding:.6rem .85rem;border-radius:999px;text-decoration:none;color:inherit;font-size:clamp(.95rem,.25vw + .85rem,1.06rem);white-space:nowrap;transition:background .2s,color .2s}
.menu>li:hover>a,.menu>li:focus-within>a{background:var(--sable);color:var(--ink)}
.menu>li>a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--corail);border-radius:0}
.nav-cta{display:flex;gap:.6rem;align-items:center}
.nav-cta .btn{padding:.7rem 1.15rem;font-size:.95rem}
.burger{display:none;width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--nuit);transition:transform .3s,opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Méga-menus */
.mega{position:absolute;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;background:#fff;border:1px solid var(--line);z-index:60;width:min(980px,94vw);display:grid}
.mega::before{content:"";position:absolute;left:0;right:0}
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.menu .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .25s,margin .25s}
.has-mega:hover .chev{transform:rotate(225deg);margin-top:3px}
.mg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem}
.mg-grid a{display:grid;grid-template-columns:44px 1fr;gap:.85rem;align-items:center;padding:.8rem .9rem;text-decoration:none;color:var(--ink)}
.mg-grid a:hover{background:var(--creme)}
.mg-ico{width:44px;height:44px;display:grid;place-items:center;background:var(--ciel);color:var(--primary)}
.mg-grid a:hover .mg-ico{background:var(--corail);color:#fff}
.mg-grid b{display:block;font-family:var(--font-display);font-size:1.02rem;letter-spacing:-.01em}
.mg-grid small{display:block;color:var(--ink-3);font-weight:500;font-size:.85rem;line-height:1.35}
.mg-video{display:grid;gap:.35rem;text-decoration:none;color:var(--ink);background:var(--nuit);padding:.8rem;color:#fff}
.mg-video b{font-family:var(--font-display);font-size:1.05rem}
.mg-video small{color:rgba(255,255,255,.72);font-weight:500}
.mg-thumb{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/9;display:block}
.mg-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mg-video:hover .mg-thumb img{transform:scale(1.05)}
.mg-play{position:absolute;inset:0;display:grid;color:#fff;background:rgba(16,32,86,.25)}
.date-pill{display:inline-flex;align-items:center;white-space:nowrap;font-size:.76rem;font-weight:800;letter-spacing:.01em;padding:.28rem .7rem;background:var(--corail-2);color:#B81F22;font-family:var(--font-body)}
/* Menu des élections (21/10) : la pastille des législatives, « 2029 au plus tard, 2027 si dissolution », passe à la ligne au lieu de déborder de sa carte ou du menu mobile */
.mg-cartes .date-pill,.mobile-menu .date-pill{white-space:normal;text-align:center;max-width:100%;line-height:1.25}
.mg-cartes li{display:flex}.mg-cartes li>a{flex:1;align-content:start}   /* cartes de même hauteur quand la pastille passe sur deux lignes */
.mobile-menu details div a .date-pill{text-align:right;max-width:55%}
.mg-all{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;background:var(--creme);text-decoration:none;color:var(--ink);font-weight:800}
.mg-all span{flex:1}
.mg-all:hover{background:var(--sable)}

/* Menu mobile */
.mobile-menu{display:none;max-height:calc(100vh - 80px);overflow:auto;background:#fff;border-top:1px solid var(--line);padding:.6rem clamp(16px,4vw,40px) 1.4rem}
.mobile-menu:not([hidden]){display:block}
.mobile-menu>a,.mobile-menu summary{display:flex;justify-content:space-between;align-items:center;padding:.95rem 0;font-weight:800;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line);font-size:1.08rem;cursor:pointer}
.mobile-menu details{border:0;padding:0}
.mobile-menu details summary::after{content:"+";color:var(--corail)}
.mobile-menu details[open] summary::after{content:"−"}
.mobile-menu details div{display:grid;padding:.3rem 0 .6rem .8rem}
.mobile-menu details div a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;text-decoration:none;font-weight:600;color:var(--ink-2)}
.mm-cta{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.2rem}
.mm-cta .btn{justify-content:center}

@media (max-width:1279px){
  .menu-wrap{display:none}
  .burger{display:flex}
  .nav-in{grid-template-columns:auto 1fr auto auto}
  .nav-cta{grid-column:3}
}
@media (max-width:760px){
  .nav-cta .btn-line{display:none}
  .nav-in{height:70px}
  .nav .logo img{width:46px;height:46px}
}
@media (max-width:520px){.nav-cta .btn{padding:.6rem .9rem;font-size:.88rem}}
@media (max-width:359px){.nav-cta{display:none}}

/* ---------- Héros bleus (toutes les pages intérieures) ---------- */
.hero-bleu{position:relative;overflow:hidden;color:#fff;background:
  radial-gradient(900px 520px at 88% -8%,var(--halo-rouge),transparent 62%),
  radial-gradient(760px 480px at -6% 112%,var(--halo-bleu),transparent 60%),
  linear-gradient(180deg,var(--nuit) 0%,var(--nuit-2) 100%)}
.hero-bleu::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 75%);-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 75%);pointer-events:none}
.hero-bleu>.wrap{position:relative;z-index:1}
.hb-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.hb-grid.solo{grid-template-columns:minmax(0,1fr)}
.hero-bleu h1{color:#fff}
.hero-bleu h1 em{font-style:normal}
.hero-bleu .lead{color:rgba(255,255,255,.82);margin-top:1.3rem}
.hero-bleu .crumbs{color:rgba(255,255,255,.62);margin-bottom:1.4rem}
.hero-bleu .crumbs a{color:rgba(255,255,255,.85)}
.hero-bleu .hero-actions{margin-top:2rem}
.hero-bleu .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.hero-bleu .btn-ghost:hover{border-color:#fff}
.hb-dates{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}
.hb-date{display:grid;gap:.1rem;padding:.75rem 1rem;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);min-width:150px}
.hb-date b{font-family:var(--font-display);font-size:1.08rem}
.hb-date span{font-size:.85rem;color:rgba(255,255,255,.72)}
.hb-visuel{overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.14);background:#fff}
.hb-visuel img{display:block;width:100%;height:auto}

/* ---------- Accueil : héros vidéo ---------- */
.hero-v{position:relative;overflow:hidden;color:#fff;background:var(--nuit);min-height:min(86vh,820px);display:grid;align-items:center}
.hero-v .fond{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover}
.hero-v::before{content:"";position:absolute;inset:0;z-index:1}
.hero-v .wrap{position:relative;z-index:2;width:100%}
.hv-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:center;padding-block:clamp(3rem,6vw,5rem)}
.hero-v h1{color:#fff}
.hero-v .lead{color:rgba(255,255,255,.85);margin-top:1.4rem}
.hero-v .hero-actions{margin-top:2.2rem}

/* Téléphone : boucle muette, bouton lecture */
.tel{position:relative;justify-self:center;width:clamp(230px,22vw,300px);background:#0B0F1E;box-shadow:0 50px 90px -40px rgba(0,0,0,.75),0 0 0 1.5px rgba(255,255,255,.18) inset;border:0;cursor:pointer;font:inherit;color:#fff}
.tel::before{content:"";position:absolute;top:18px;left:50%;transform:translateX(-50%);width:30%;height:22px;border-radius:999px;background:#0B0F1E;z-index:3}
.tel-ecran{position:relative;display:block;width:100%;overflow:hidden;background:var(--nuit)}
.tel-ecran video,.tel-ecran img{width:100%;height:100%;display:block}
.tel-play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;align-content:center;gap:.8rem;background:linear-gradient(180deg,rgba(10,21,64,0) 30%,rgba(10,21,64,.55));transition:background .3s}
.tel-play i{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--corail);box-shadow:0 20px 40px -14px rgba(0,0,0,.6);transition:transform .3s;font-style:normal}
.tel-play i svg{margin-left:5px}
.tel-play b{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.tel:hover .tel-play i{transform:scale(1.08)}
.tel:focus-visible{outline:3px solid #fff;outline-offset:6px}
.tel-onde{position:absolute;inset:-14px;border:2px solid rgba(255,255,255,.18);animation:onde 3.2s ease-out infinite;pointer-events:none}
@keyframes onde{0%{transform:scale(.97);opacity:.9}100%{transform:scale(1.07);opacity:0}}

/* Fenêtre vidéo */
.video-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(6,12,38,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:clamp(12px,3vw,40px)}
.video-modal[hidden]{display:none}
.vm-box{position:relative;display:grid;gap:.8rem;justify-items:center}
.vm-box video{display:block;max-height:min(82vh,1280px);max-width:min(94vw,1280px);border-radius:18px;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.vm-box.vertical video{aspect-ratio:9/16;height:min(82vh,1100px);width:auto}
.vm-close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--nuit);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);z-index:2}
.vm-more{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-weight:700;text-decoration:none;opacity:.85}
.vm-more:hover{opacity:1}
.vm-box:not(.vertical) .vm-more{display:none}

/* ---------- Simple, sûr, souverain ---------- */
.sss{padding-block:clamp(4rem,9vw,8rem);background:#fff}
.sss-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem)}
.sss-item{display:grid;gap:1rem;align-content:start;text-align:center;justify-items:center}
.sss-trait{background:var(--corail)}
.sss-item h3{font-size:1.3rem}
.sss-item p{color:var(--ink-2)}

/* ---------- Structures : candidat / parti sur une ligne ---------- */
.struct-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem)}
.struct{display:grid;grid-template-rows:auto 1fr auto;gap:1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:var(--ombre-douce)}
.el-liste{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.el-liste a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .2rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700}
.el-liste a:hover{color:var(--corail)}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.coches li{display:grid;grid-template-columns:24px 1fr;gap:.7rem;align-items:start;color:var(--ink-2)}
.coches li::before{content:"";width:24px;height:24px;border-radius:50%;background:var(--vert-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8F6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat;margin-top:.1rem}
.coches b{color:var(--ink)}

/* ---------- Garanties : bande claire ---------- */
.garanties{background:linear-gradient(180deg,#F6F8FC,#fff);border-block:1px solid var(--line);padding-block:clamp(4rem,8vw,7rem)}
.gar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.gar{display:grid;gap:.9rem;align-content:start;padding:clamp(1.4rem,2.6vw,2rem);border-radius:var(--rayon);background:#fff;border:1px solid var(--line);box-shadow:var(--ombre-douce)}
.gar-ico{width:52px;height:52px;display:grid;place-items:center}
.gar h3{font-size:1.32rem;line-height:1.2}
.gar p{color:var(--ink-2)}

/* ---------- Pilotez : proportions rééquilibrées ---------- */
.pilot{grid-template-columns:minmax(300px,5fr) minmax(0,7fr);gap:clamp(1.5rem,3vw,3rem);align-items:center}
.pilot .app{min-height:0}

/* ---------- Tarifs (accueil et page Tarifs) ---------- */
.prix-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(1rem,2vw,1.6rem);align-items:stretch}
.offre{position:relative;gap:1.1rem;align-content:start;border-radius:var(--rayon);padding:clamp(1.6rem,3vw,2.6rem);background:#fff;border:1px solid var(--line);box-shadow:var(--ombre-douce)}
.offre.forte{border:2px solid var(--corail);box-shadow:0 30px 60px -36px rgba(217,38,41,.35)}
.offre .nom{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--corail)}
.montant{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:800;line-height:1}
.montant small{font-family:var(--font-body);font-size:1rem;font-weight:700;letter-spacing:0;opacity:.75}
.offre p{color:var(--ink-2)}
.offre .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.scrutins{display:flex;flex-wrap:wrap;gap:.45rem}
.scrutins span{font-size:.85rem;font-weight:700;padding:.35rem .75rem;background:var(--ciel);color:var(--primary)}
.groupe2{margin-top:clamp(1rem,2vw,1.6rem);display:grid;grid-template-columns:5fr 7fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;border-radius:var(--rayon);padding:clamp(1.6rem,3vw,2.6rem);background:linear-gradient(120deg,#FFF5F5,#F3F7FD);border:1px solid var(--line)}
.groupe2 p{color:var(--ink-2);margin-top:.7rem}
.groupe2 .sim{background:#fff;border-radius:18px;padding:clamp(1.2rem,2.4vw,2rem);box-shadow:var(--ombre-douce)}
.groupe2 .sim label{font-weight:800;font-size:1.05rem;display:block}
.groupe2 .sim label span{color:var(--corail);font-size:1.5rem}
.groupe2 input[type=range]{width:100%;margin:1rem 0 1.2rem;accent-color:var(--corail);height:28px}
.groupe2 .out{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.groupe2 .out>div{background:var(--creme);padding:.8rem .9rem;display:grid;gap:.15rem}
.groupe2 .out small{font-weight:700;font-size:.8rem}
.groupe2 .out b{font-size:1.45rem;font-variant-numeric:tabular-nums}
.groupe2 .out .hi{background:var(--nuit);color:#fff}.groupe2 .out .hi small{color:rgba(255,255,255,.7)}
.groupe2 .paliers{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.groupe2 .paliers span{font-size:.85rem;font-weight:700;padding:.35rem .75rem;background:#fff;border:1px solid var(--line)}
.plans4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.plan4{display:grid;gap:.7rem;align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);padding:1.5rem;box-shadow:var(--ombre-douce)}
.plan4.hi{border:2px solid var(--corail)}
.plan4 .nom{font-family:var(--font-display);font-weight:800;font-size:1.3rem}
.plan4 .seuil{color:var(--ink-3);font-weight:700;font-size:.92rem}
.plan4 .px{font-weight:800;font-size:2.4rem;line-height:1}
.plan4 .px small{font-family:var(--font-body);font-size:.9rem;font-weight:700;color:var(--ink-3);letter-spacing:0}
.plan4 .note{color:var(--ink-3);font-size:.88rem}
.plan4{position:relative}
.plan4 .badge{position:absolute;top:-12px;left:1.5rem;font-size:.75rem;font-weight:800;padding:.25rem .65rem;border-radius:999px;background:var(--corail);color:#fff}
.bascule{display:inline-flex;gap:.3rem;padding:.3rem;background:var(--sable);margin-bottom:1.4rem}
.bascule button{border:0;background:none;font:inherit;font-weight:800;padding:.6rem 1.1rem;cursor:pointer;color:var(--ink-2)}
.bascule button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 14px -6px rgba(16,32,86,.35)}
.tarifs-lien{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

/* Ce qui est inclus : liste lisible, coches alignées */
.inclus{border-radius:var(--rayon);border:1px solid var(--line);overflow:hidden;background:#fff;box-shadow:var(--ombre-douce)}
.inclus-ligne{display:grid;grid-template-columns:minmax(0,1fr) 140px 140px;align-items:center;border-top:1px solid var(--line)}
.inclus-ligne:first-child{border-top:0;background:var(--creme);font-weight:800;color:var(--ink)}
.inclus-ligne>*{padding:.95rem 1.2rem}
.inclus-ligne>:not(:first-child){text-align:center;justify-self:stretch;display:grid;place-items:center}
.inclus-ligne span{color:var(--ink-2)}
.oui,.non{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.oui{background:var(--vert-2);color:var(--vert)}
.non{background:var(--sable);color:var(--ink-3)}
.inclus.large .inclus-ligne{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr)}
.inclus.large .inclus-ligne>:not(:first-child){text-align:left;place-items:center start}
.inclus.large .inclus-ligne small{font-size:.92rem;color:var(--ink-2);font-weight:500}
.inclus.regles .inclus-ligne{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.inclus.regles .inclus-ligne>:nth-child(2){color:var(--ink-2)}
@media (max-width:860px){.inclus.regles .inclus-ligne>*{padding-block:.5rem}.inclus.regles .inclus-ligne{padding-block:.5rem}}
.etapes4.trois{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.etapes4.trois{grid-template-columns:minmax(0,1fr)}.inclus.large .inclus-ligne{grid-template-columns:minmax(0,1fr)}.inclus.large .inclus-ligne:first-child{display:none}.inclus.large .inclus-ligne>:nth-child(2)::before{content:"Parti : ";font-weight:800}.inclus.large .inclus-ligne>:nth-child(3)::before{content:"Candidat : ";font-weight:800}}
.inclus small{display:block;font-size:.78rem;color:var(--ink-3);font-weight:600}

/* ---------- Fonctionnalités : récit en captures ---------- */
.ancres{position:sticky;top:80px;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ancres .wrap{display:flex;gap:.4rem;overflow-x:auto;padding-block:.7rem;scrollbar-width:none}
.ancres .wrap::-webkit-scrollbar{display:none}
.ancres a{flex:none;padding:.5rem 1rem;text-decoration:none;font-weight:700;color:var(--ink-2);font-size:.95rem;border:1px solid var(--line);background:#fff}
.ancres a:hover,.ancres a.active{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.recit:nth-of-type(even){background:var(--creme)}
.recit-tete{margin-bottom:clamp(2rem,4vw,3rem)}
.recit-tete .lead{margin-top:1rem}
.recit-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.recit-grid.inverse{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.recit-grid.inverse .recit-texte{order:2}
.recit-texte{display:grid;gap:1.4rem}
.point{display:grid;gap:.3rem}
.point h3{font-size:1.2rem}
.point p{color:var(--ink-2)}
.ecran{overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 50px 90px -50px rgba(16,32,86,.5)}
.ecran img{display:block;width:100%;height:auto}
.ecran .chrome{font-size:.75rem}
.duo-ecrans{display:grid;gap:1.2rem}
.mail-maquette{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 40px 80px -50px rgba(16,32,86,.5);overflow:hidden;max-width:560px;justify-self:center;width:100%}

/* Comment ça marche, épinglé au défilement */
.how-scroll{height:340vh;position:relative}
.how-scroll .how-screen img{display:block;width:100%;height:auto;border-radius:10px}
@media (max-width:899px){.how-scroll{height:auto}}

/* Vitrine : un titre, une phrase, une grande capture (pages Partis) */
.vitrine{overflow:hidden}
.vitrine-tete{text-align:center;margin:0 auto clamp(2rem,4vw,3rem);display:grid;justify-items:center;gap:.4rem}
.vitrine-tete .lead{margin-top:.6rem}
.vitrine-ecran{max-width:1080px;margin-inline:auto}
.js .vitrine-ecran.reveal{transform:translateY(60px) scale(.96)}
.js .vitrine-ecran.reveal.in{transform:none}
.vitrine-lien{text-align:center;margin-top:1.6rem}

/* Vidéo 16:9 */
.video169{position:relative;overflow:hidden;background:#000;box-shadow:0 50px 100px -50px rgba(0,0,0,.7);aspect-ratio:16/9;border:1px solid rgba(255,255,255,.14)}
.video169 video{width:100%;height:100%;display:block;object-fit:cover}
.video169 .v-play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:.9rem;padding:clamp(1rem,2.4vw,1.6rem);border:0;background:linear-gradient(180deg,rgba(10,21,64,0) 45%,rgba(10,21,64,.7));color:#fff;font:inherit;cursor:pointer;text-align:left}
.video169 .v-play i{width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--corail);font-style:normal;box-shadow:0 16px 40px -14px rgba(0,0,0,.6);transition:transform .3s}
.video169 .v-play i svg{margin-left:4px;width:26px;height:26px}
.video169 .v-play b{font-family:var(--font-display);font-size:1.1rem}
.video169 .v-play:hover i{transform:scale(1.08)}
.video169.joue .v-play{display:none}

/* Étapes (Partis) */
.etapes4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:e}
.etape4{position:relative;display:grid;gap:.5rem;align-content:start;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);padding:1.5rem 1.4rem;box-shadow:var(--ombre-douce)}
.etape4::before{counter-increment:e;content:counter(e);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--corail);color:#fff;font-weight:800;font-family:var(--font-display);margin-bottom:.4rem}
.etape4 h3{font-size:1.2rem}
.etape4 p{color:var(--ink-2);font-size:.97rem}

/* Offre unique d'une élection */
.offre-el{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,3vw,3rem);align-items:center}
.offre-el .offre{max-width:none}

/* 577 circonscriptions */
.cent577{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,4vw,4rem);align-items:center}
.points577{display:grid;grid-template-columns:repeat(29,1fr);gap:clamp(3px,.45vw,6px)}
.points577 i{aspect-ratio:1;border-radius:50%;background:#DCE3EC;transition:background .4s}
.points577 i.on{background:var(--corail)}
.points577 i.on2{background:var(--nuit)}

/* Frise des élections */
.frise{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;position:relative}
.frise li a{display:grid;gap:1.4rem;align-items:center;padding:1.3rem 1.6rem;border:1px solid var(--line);border-radius:var(--rayon);background:#fff;text-decoration:none;color:var(--ink);box-shadow:var(--ombre-douce);transition:transform .25s,border-color .25s}
.frise li a:hover{transform:translateX(6px);border-color:var(--corail)}
.frise .date-pill{justify-self:start;font-size:.85rem}
.frise b{font-family:var(--font-display);font-size:1.45rem;letter-spacing:-.02em}
.frise span:not(.date-pill){color:var(--ink-2)}
.frise em{font-style:normal;font-weight:800;color:var(--primary);white-space:nowrap}
.frise .plus-tard a{background:var(--creme);box-shadow:none}
.frise .plus-tard .date-pill{background:var(--sable)}
@media (max-width:900px){.frise li a{gap:.4rem}.frise em{justify-self:start}}

/* FAQ : accordéons fermés, plus grands */
.faq2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.faq2 h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.faq2 .faq-intro{position:sticky;top:110px;display:grid;gap:1rem}
.faq2 .faq-intro p{color:var(--ink-2)}
.faq2 details{border:1px solid var(--line);padding:0;margin-bottom:.7rem;background:#fff;transition:box-shadow .25s}
.faq2 details[open]{box-shadow:var(--ombre-douce)}
.faq2 summary{padding:1.15rem 1.3rem;font-size:1.08rem;align-items:center}
.faq2 summary::after{flex:none;width:30px;height:30px;display:grid;place-items:center;background:var(--corail-2);font-size:1.2rem}
.faq2 details p{padding:0 1.3rem 1.2rem;margin:0}
.faq2 details p+p{padding-top:.2rem}
.faq2.solo{display:block}
details[open] summary::after{content:"\2212"}

/* Actualités : visuels plus hauts, au 16:9 */
.posts .post .ph{aspect-ratio:16/9;height:auto !important}
.newsletter{scroll-margin-top:110px;background:#F6F8FC;border:1px solid var(--line);padding:clamp(2rem,4vw,3.4rem)}
#newsletter{scroll-margin-top:90px}

/* Page À propos, Contact */
.chiffres-ap{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.chiffres-ap.quatre{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.chiffres-ap.quatre{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.chiffres-ap.quatre{grid-template-columns:minmax(0,1fr)}}
.carte-ap{background:#fff;border:1px solid var(--line);border-radius:var(--rayon);padding:1.6rem;box-shadow:var(--ombre-douce);display:grid;gap:.6rem;align-content:start}
.carte-ap h3{font-size:1.25rem}
.carte-ap p{color:var(--ink-2)}
.carte-ap .gar-ico{margin-bottom:.3rem}

/* ---------- Bandeau final et pied ---------- */
.fc-in{display:grid;grid-template-columns:minmax(0,7fr) auto;gap:2rem;align-items:center;padding:clamp(2rem,5vw,4rem);background:radial-gradient(600px 300px at 100% 0%,rgba(217,38,41,.10),transparent 60%),radial-gradient(600px 300px at 0% 100%,rgba(38,157,217,.12),transparent 60%),#F6F8FC;border:1px solid var(--line)}
.final-cta p{color:var(--ink-2);margin-top:.9rem;font-size:1.1rem}
.fc-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end}
.fc-actions .btn-light{border-color:var(--line)}
.site-foot{background:#fff;color:var(--ink-2);border-top:1px solid var(--line)}
.site-foot .fgrid{grid-template-columns:minmax(220px,1.6fr) repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.site-foot a{color:var(--ink-2)}
.site-foot a:hover{color:var(--corail)}
.site-foot .f-brand{display:grid;gap:1.1rem;align-content:start}
.f-el small{margin-left:.5rem;font-size:.78rem;color:var(--ink-3)}
.site-foot .btn.f-news{justify-self:start;color:#fff}
.site-foot .legal{border-top:1px solid var(--line);padding-top:1.6rem;color:var(--ink-3)}
.site-foot .legal span:last-child{display:flex;flex-wrap:wrap;gap:1.2rem}

/* ---------- Accueil : pastilles autour du téléphone ---------- */
.tel-scene{position:relative;justify-self:center;display:grid;place-items:center;padding:1.5rem 0}

/* ---------- Accueil : un seul outil, des onglets ---------- */
.og{border:1px solid var(--line);background:#fff;box-shadow:var(--ombre-douce);overflow:hidden}
.og-tabs{display:flex;gap:.3rem;overflow-x:auto;padding:.6rem;background:var(--creme);border-bottom:1px solid var(--line);scrollbar-width:none}
.og-tabs::-webkit-scrollbar{display:none}
.og-tabs button{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem 1rem;border:0;background:transparent;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.og-tabs button span{width:40px;height:40px;display:grid;place-items:center;background:#fff;color:var(--primary);box-shadow:0 6px 16px -10px rgba(16,32,86,.4)}
.og-tabs button:hover{background:#fff;color:var(--ink)}
.og-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 10px 26px -18px rgba(16,32,86,.5)}
.og-tabs button[aria-selected="true"] span{background:var(--corail);color:#fff}
.og-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,3.4vw,3.4rem);align-items:center;padding:clamp(1.4rem,3.4vw,3rem)}
.og-panel[hidden]{display:none}
.og-panel:not([hidden]){animation:viewIn .5s cubic-bezier(.2,.8,.2,1)}
.og-texte{display:grid;gap:1rem;align-content:start}
.og-texte p{color:var(--ink-2)}
.centre-lien{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.8rem}
@media (max-width:900px){.og-panel{grid-template-columns:minmax(0,1fr)}.og-tabs button{flex:0 0 auto}}

/* ---------- Accueil : grille de cartes ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.textes{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.6rem}
.textes li{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:center;padding:.8rem .9rem;background:#fff;border:1px solid var(--line)}
.textes li::before{content:"";grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--vert-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F8F6B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/15px no-repeat}
.textes b{font-family:var(--font-display);font-size:1rem}
.textes span{color:var(--ink-3);font-size:.88rem}

@media (max-width:1000px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.bento{grid-template-columns:minmax(0,1fr)}}

/* ---------- Tablette et mobile ---------- */
@media (max-width:1100px){
  .hv-grid,.hb-grid,.recit-grid,.recit-grid.inverse,.offre-el,.cent577,.faq2,.groupe2,.prix-grid{grid-template-columns:minmax(0,1fr)}
  .recit-grid.inverse .recit-texte{order:0}
  .faq2 .faq-intro{position:static}
  .plans4{grid-template-columns:repeat(2,1fr)}
  .etapes4{grid-template-columns:repeat(2,1fr)}
  .site-foot .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot .f-brand{grid-column:1/-1}
  .pilot{grid-template-columns:minmax(0,1fr)}
  .mega-fx{grid-template-columns:1fr}
  .hero-v{min-height:0}
  .tel{margin-top:1rem}
}
@media (max-width:860px){
  .sss-grid,.gar-grid,.struct-grid,.chiffres-ap{grid-template-columns:minmax(0,1fr)}
  .sss-grid{gap:3rem}
  .fc-in{grid-template-columns:minmax(0,1fr)}
  .fc-actions{justify-content:flex-start}
  .inclus-ligne{grid-template-columns:minmax(0,1fr) 84px 84px}
  .inclus-ligne>*{padding:.85rem .8rem}
  .duo-ecrans{grid-template-columns:minmax(0,1fr)}
  .ancres{top:70px}
}
@media (max-width:600px){
  .plans4,.etapes4{grid-template-columns:minmax(0,1fr)}
  .groupe2 .out{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .groupe2 .out>div:last-child{grid-column:1/-1}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
  .hb-date{min-width:0;flex:1 1 40%}
  .vm-close{top:-8px;right:-4px}
}
@media (prefers-reduced-motion:reduce){
  .btn-shine,.tel-onde{animation:none}
}

/* ====== Patte graphique : moins « générique » (inspirée du site Greenworking) ======
   Titres en capitales condensées dont un mot porte le dégradé du logo, angles
   resserrés, liens soulignés, pastilles plates. */
:root{
  --font-titre:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --font-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --rayon:10px;
  --ombre-douce:0 1px 2px rgba(16,32,86,.05),0 10px 26px -18px rgba(16,32,86,.28);
}
body{font-family:var(--font-body);font-size:16.5px}
main h1,main h2,.final-cta h2,.sss-mot{font-family:var(--font-titre);font-weight:700;text-transform:uppercase;letter-spacing:.004em;line-height:1.02}
.offre h3,.groupe2 h3,.og-texte h3,.struct h3{font-family:var(--font-titre);text-transform:uppercase;font-weight:700;letter-spacing:.004em;line-height:1.05}
.montant,.plan4 .px,.groupe2 .out b,.groupe2 .sim label span{font-family:var(--font-titre);letter-spacing:0}
/* Les textes longs gardent la casse normale */
main .prose h2,main .prose h3,main .lg-text h2,main .lg-text h3,main .lg-brief h2,main .lg-related h2,main .art-grid h2,main .art-grid h3{font-family:var(--font-display);text-transform:none;letter-spacing:-.015em;line-height:1.25}
main .art-title{font-family:var(--font-titre);text-transform:uppercase;letter-spacing:.004em}
/* Le mot en dégradé, aux couleurs du logo (plus clair sur fond bleu nuit) */
main h1 em,main h2 em,.final-cta h2 em{font-style:normal;background:linear-gradient(100deg,#1D4FA6 0%,#6B2F7A 55%,#D92629 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.04em}
.hero-v h1 em,.hero-bleu h1 em{background:linear-gradient(100deg,#8FB8FF 0%,#C99BE6 50%,#FF7F82 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Titre de l'accueil découpé mot à mot (app.js) : le dégradé va sur chaque mot, sinon il disparaît */
.hero-copy h1 em{background:none;color:inherit}
.hero-copy h1 em .w{background:linear-gradient(100deg,#8FB8FF 0%,#C99BE6 50%,#FF7F82 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
/* Simple, sûr, souverain : le dégradé du logo */
.sss-mot{background:linear-gradient(100deg,#1D4FA6 0%,#6B2F7A 55%,#D92629 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.sss-trait{width:42px;height:4px;border-radius:0}
/* Pastilles d'icônes : plates */
.gar-ico{background:var(--ciel);color:var(--nuit);border-radius:10px}
.mg-ico{border-radius:10px}
/* Angles resserrés */
.btn{border-radius:8px}
.nav-cta .btn,.mm-cta .btn{border-radius:8px}
.bascule,.bascule button{border-radius:8px}
.date-pill,.scrutins span,.groupe2 .paliers span,.ancres a{border-radius:6px}
.og{border-radius:14px}.og-tabs button{border-radius:10px}.og-tabs button span{border-radius:8px}
.fc-in,.newsletter{border-radius:14px}
.mg-video,.mg-grid a,.mg-all{border-radius:10px}
.video169,.ecran,.hb-visuel{border-radius:10px}
.faq2 details{border-radius:10px}
.faq2 summary::after{border-radius:6px}
.groupe2 .out>div{border-radius:8px}
.textes li{border-radius:8px}
/* Étiquette : un filet vertical */
.kicker{font-size:.76rem;letter-spacing:.12em}
.kicker::before{width:3px;height:14px;border-radius:0}
/* Liens soulignés d'un filet rouge */
.lien-fleche{text-decoration:underline;text-decoration-color:var(--corail);text-decoration-thickness:2px;text-underline-offset:6px;color:var(--ink)}
.lien-fleche:hover{color:var(--corail)}

/* Cercles décoratifs, comme sur Greenworking */
.hero-bleu::before{content:"";position:absolute;width:560px;height:560px;border-radius:50%;border:2px solid rgba(255,255,255,.09);right:-180px;bottom:-300px;pointer-events:none}
.fond-creme{position:relative;overflow:hidden}
.fond-creme{background:#F4F7FB}

/* Téléphone de l'accueil : l'écran prend exactement le format de la vidéo (9:16), rien n'est rogné */
.tel{aspect-ratio:auto;padding:10px;border-radius:40px}
.tel::before{display:none}
.tel-ecran{aspect-ratio:9/16;height:auto;border-radius:30px}
.tel-ecran video,.tel-ecran img{object-fit:contain;background:#0A1540}
.tel-onde{border-radius:50px}

/* Méga-menu Élections : une frise, un bloc date par scrutin */
.mg-titre{margin:.1rem .4rem .7rem;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mega .mg-frise{position:relative}
.mega .mg-frise::before{content:"";position:absolute;left:calc(.6rem + 35px);top:22px;bottom:22px;width:2px;background:var(--line)}
.mega .mg-frise a{display:grid;grid-template-columns:72px minmax(0,1fr) 20px;align-items:center;gap:1rem;border-radius:10px}
.mega .mg-frise a:hover{background:var(--creme)}

/* Photos des bandeaux bleus : en fondu à droite, le texte reste sur le bleu nuit */
.hero-bleu .hb-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9);
  animation:lent-zoom 28s ease-in-out infinite alternate;transform-origin:70% 50%;z-index:0}
@keyframes lent-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-bleu.avec-photo{background:linear-gradient(180deg,var(--nuit) 0%,var(--nuit-2) 100%)}
@media (max-width:860px){.hero-bleu .hb-photo{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4),#000);mask-image:linear-gradient(180deg,rgba(0,0,0,.4),#000)}}
@media (prefers-reduced-motion:reduce){.hero-bleu .hb-photo{animation:none}}

/* ====== Animations ======
   Sobres et variées : cascade pour les grilles, glissés latéraux pour les récits,
   tracés pour les frises, chiffres qui défilent. Rien quand l'utilisateur limite les animations. */
.js [data-cascade]>*{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .3s;transition-delay:calc(var(--i,0) * 85ms)}
.js [data-cascade].vu>*{opacity:1;transform:none}
.js [data-anim]{opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js [data-anim="gauche"]{transform:translateX(-42px)}
.js [data-anim="droite"]{transform:translateX(42px)}
.js [data-anim="zoom"]{transform:scale(.94)}
.js [data-anim="monte"]{transform:translateY(34px)}
.js [data-anim].vu{opacity:1;transform:none}
/* Étiquettes : le filet se dessine */
.js .kicker::before{transform:scaleY(0);transform-origin:bottom;transition:transform .5s .15s cubic-bezier(.2,.7,.2,1)}
.js .kicker.vu::before{transform:scaleY(1)}
/* Titres des bandeaux bleus : mot à mot */
.hero-bleu h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);animation:wordIn .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero-bleu h1.mots em{background:none;color:inherit}
.hero-bleu h1.mots em .w{background:linear-gradient(100deg,#8FB8FF 0%,#C99BE6 50%,#FF7F82 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.js .hero-bleu .lead,.js .hero-bleu .hero-actions,.js .hero-bleu .crumbs{opacity:0;transform:translateY(14px);animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) forwards}
.js .hero-bleu .crumbs{animation-delay:.05s}
/* Survols : les cartes se soulèvent, les captures respirent */
.gar,.struct,.plan4,.etape4,.carte-ap,.offre,.og{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.gar:hover,.struct:hover,.plan4:hover,.etape4:hover,.carte-ap:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(16,32,86,.05),0 26px 50px -28px rgba(16,32,86,.45)}
.ecran img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ecran:hover img{transform:scale(1.02)}
.gar-ico{transition:transform .4s cubic-bezier(.3,1.4,.5,1),background .3s,color .3s}
.gar:hover .gar-ico{transform:rotate(-6deg) scale(1.08)}
/* En-tête qui s'affine au défilement */
.nav-in{transition:height .3s}
.nav.scrolled .nav-in{height:66px}
.nav .logo img{transition:width .3s,height .3s}
.nav.scrolled .logo img{width:44px;height:44px}
/* Méga-menu Élections : la frise se trace, les dates arrivent l'une après l'autre */
.mega .mg-frise::before{transform:scaleY(0);transform-origin:top;transition:transform .6s .1s cubic-bezier(.2,.7,.2,1)}
.has-mega:hover .mg-frise::before,.has-mega:focus-within .mg-frise::before,.has-mega.open .mg-frise::before{transform:scaleY(1)}
.mega .mg-frise li,.mega .mg-grid li{opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s;transition-delay:calc(var(--i,0) * 55ms)}
.has-mega:hover .mg-frise li,.has-mega:focus-within .mg-frise li,.has-mega.open .mg-frise li,.has-mega:hover .mg-grid li,.has-mega:focus-within .mg-grid li,.has-mega.open .mg-grid li{opacity:1;transform:none}
/* Page Élections : la frise se trace */
.frise{padding-left:1.4rem}
.frise::before{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--corail),var(--nuit));transform:scaleY(0);transform-origin:top;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.frise.vu::before{transform:scaleY(1)}
/* Glissière du tarif de groupe : le montant rebondit */
.groupe2 .out b.bond{animation:bond .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes bond{0%{transform:scale(.9)}100%{transform:none}}
.groupe2 .out b{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .js [data-cascade]>*,.js [data-anim]{opacity:1;transform:none;transition:none}
  .js .kicker::before{transform:none}
  .hero-bleu h1 .w,.js .hero-bleu .lead,.js .hero-bleu .hero-actions,.js .hero-bleu .crumbs{opacity:1;transform:none;filter:none;animation:none}
  .mega .mg-frise li,.mega .mg-grid li{opacity:1;transform:none}
  .mega .mg-frise::before,.frise::before{transform:none}
}

/* À propos : logo CONCILIUM ; accueil : mention des utilisateurs */
.logo-concilium{display:block;width:min(260px,70%);height:auto;margin:0 0 1.4rem}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ====== Retouches du 15 octobre (soir) ====== */
/* Héros de l'accueil : la foule se devine, moins de flou, voile plus léger */
.hero-v .fond{filter:blur(2.5px) saturate(.95);transform:scale(1.02)}
.hero-v::before{background:linear-gradient(90deg,rgba(10,21,64,.9) 0%,rgba(16,32,86,.68) 48%,rgba(16,32,86,.32) 100%),radial-gradient(700px 420px at 92% 0%,rgba(217,38,41,.22),transparent 60%)}
/* Apparition des titres plus rapide */
.hero-copy h1 .w,.hero-bleu h1 .w{animation-duration:.55s;filter:blur(3px)}
.hero-copy .lead{animation-delay:.3s}.hero-copy .hero-actions{animation-delay:.4s}
.js .hero-bleu .lead{animation-delay:.25s}.js .hero-bleu .hero-actions{animation-delay:.35s}
/* Titres moins gros */
main h1{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.offre h3,.groupe2 h3,.og-texte h3,.struct h3{font-size:clamp(1.5rem,2.1vw,1.85rem)}
.lead{font-size:1.08rem}
.hero-v .lead{font-size:clamp(1.02rem,1.1vw,1.15rem)}
.hero-bleu .lead{font-size:1.06rem}
.section-head{margin-bottom:2rem}
section{padding-block:clamp(2.6rem,5vw,4.2rem)}
.recit,.vitrine{padding-block:clamp(3rem,6vw,5.2rem)}
.hero-bleu{padding-block:clamp(2.6rem,5.5vw,4.6rem) clamp(2.6rem,5vw,4.2rem)}
/* Téléphone de l'accueil : plus discret sur mobile */
@media (max-width:760px){
  .hero-v{min-height:0}
  .hv-grid{gap:1.4rem;padding-block:2.4rem 2.6rem}
  .tel-scene{padding:0}
  .tel{width:min(190px,52vw);padding:7px;border-radius:30px}
  .tel-ecran{border-radius:23px}
  .tel-play i{width:58px;height:58px}
  .tel-play i svg{width:24px;height:24px}
  .tel-play b{font-size:.9rem}
  .tel-onde{display:none}
}

/* Cartes « Pour qui » : une photo en tête */
.struct{overflow:hidden}
.faq2 details ul.frais{margin:.2rem 1.3rem 1rem;padding-left:1.1rem;color:var(--ink-2);display:grid;gap:.35rem}
.faq2 details ul.frais b{color:var(--ink)}

/* Réassurance en tête du pied de page */
.reassurance{list-style:none;margin:0 0 2.6rem;padding:0 0 2.2rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;border-bottom:1px solid var(--line)}
.reassurance li{display:flex;gap:.8rem;align-items:center}
.reassurance li>svg{flex:none;border-radius:10px;background:var(--ciel);color:var(--nuit)}
.reassurance b{display:block;color:var(--ink)}
.reassurance span{font-size:.85rem;color:var(--ink-2);line-height:1.35}
@media (max-width:900px){.reassurance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.reassurance{grid-template-columns:minmax(0,1fr)}}
/* Témoignage */
.temoignage{position:relative;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 2rem;align-items:start;padding:clamp(1.8rem,4vw,3rem);border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--ombre-douce)}
.tm-guillemet{grid-row:span 2;color:var(--corail);opacity:.9}
.temoignage blockquote{margin:0}
.temoignage blockquote p{font-family:var(--font-display);font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.5;color:var(--ink);font-weight:500;letter-spacing:-.01em}
.temoignage figcaption{display:flex;margin-top:1.2rem}
.tm-photo{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--nuit);color:#fff;font-weight:800;font-size:.95rem;flex:none}
.temoignage figcaption b{display:block;color:var(--ink)}
.temoignage figcaption span:last-child{color:var(--ink-3);font-size:.92rem}
@media (max-width:640px){.temoignage{grid-template-columns:minmax(0,1fr)}.tm-guillemet{grid-row:auto;width:40px;height:40px}}

/* ====== Textes sur toute la largeur (retour de Thomas) ====== */
.lead,.section-head .lead,.recit-tete .lead,.vitrine-tete .lead{max-width:none}
.section-head,.recit-tete{max-width:none}
.hero-bleu .lead{max-width:72ch}
.hero-v .lead{max-width:none}
.vitrine-tete{max-width:62rem}
.sss-item p,.site-foot .f-brand p{max-width:none}
.prose{max-width:80ch}
.recit-texte .point p,.og-texte p,.gar p,.carte-ap p{max-width:none}
.groupe2 p{max-width:none}
.final-cta p{max-width:none}

/* ====== Méga-menus : sous leur entrée, plus aérés ====== */
.menu>li.has-mega{position:relative}
.mega{left:-.6rem;transform:translateY(10px);top:calc(100% - 6px);padding:1.5rem;gap:1.2rem;border-radius:16px;box-shadow:0 30px 70px -30px rgba(16,32,86,.45),0 2px 6px rgba(16,32,86,.06)}
.menu>li.has-mega:not(.mega-large):hover .mega,.menu>li.has-mega:not(.mega-large):focus-within .mega,.menu>li.has-mega:not(.mega-large).open .mega{transform:translateY(0)}
.mega::after{content:"";position:absolute;top:-7px;left:2.2rem;width:14px;height:14px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.mega::before{top:-22px;height:22px}
.mega-fx{width:min(920px,calc(100vw - 2rem));grid-template-columns:minmax(0,1fr) 270px;gap:1.6rem}
.mg-col{display:grid;gap:.6rem;align-content:start}
.mega .mg-titre{margin:0 0 .3rem .2rem}
.mega .mg-grid{gap:.5rem .8rem}
.mega .mg-grid a{grid-template-columns:42px 1fr;gap:1rem;padding:.85rem .9rem;border:1px solid transparent}
.mega .mg-grid a:hover{background:var(--creme);border-color:var(--line)}
.mega .mg-grid b{margin-bottom:.15rem}
.mega .mg-video{align-self:start;padding:.9rem;gap:.5rem}
.mega-fx .mg-ec{grid-column:1/-1;margin-top:.2rem}
.mega-el{width:min(560px,calc(100vw - 2rem));padding:1.4rem}
.mega .mg-frise{gap:.25rem}
.mega .mg-frise a{padding:.7rem .7rem}
@media (max-width:1400px){.mega-fx{width:min(860px,calc(100vw - 2rem))}}

/* Photos des bandeaux plus présentes */
.hero-bleu .hb-photo{opacity:.78;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 30%,#000 62%);mask-image:linear-gradient(90deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.55) 30%,#000 62%)}
.hero-bleu.avec-photo::after{background-image:linear-gradient(90deg,rgba(10,21,64,.55) 0%,rgba(10,21,64,.2) 55%,rgba(10,21,64,0) 100%);background-size:100% 100%;background-repeat:no-repeat;-webkit-mask-image:none;mask-image:none}
@media (max-width:860px){.hero-bleu .hb-photo{opacity:.45}}

/* ====== Photos rondes dans les pages, à la manière de Greenworking ====== */
.rond{position:relative;margin:2rem 0 0;width:min(260px,62vw);aspect-ratio:1;flex:none}
.rond img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.rond::before{content:"";position:absolute;inset:-11px;border-radius:50%;border:2px solid var(--corail);opacity:.55}
.rond::after{content:"";position:absolute;z-index:2;width:16px;height:16px;border-radius:50%;background:var(--corail);top:9%;right:6%;box-shadow:0 0 0 4px #fff}
.rond.bleu::before{border-color:var(--nuit);opacity:.35}
.rond.bleu::after{background:var(--nuit)}
.rond.grand{width:min(340px,72vw)}
.rond.moyen{width:min(220px,56vw);margin:0 auto 1.6rem}
.rond.petit{width:min(170px,44vw);margin:0}
.rond.carte{position:absolute;top:1.2rem;right:1.2rem;width:96px;margin:0}
.rond.carte::before{inset:-6px}
.rond.carte::after{width:11px;height:11px;box-shadow:0 0 0 3px #fff}
.struct{position:relative;padding-top:clamp(1.5rem,3vw,2.4rem)}
.js .rond{opacity:0;transform:scale(.9);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .rond.vu{opacity:1;transform:none}
.rond:hover img{transform:scale(1.03)}
.rond img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Photo ronde et liste (page Partis) */
.liste-icones{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.4rem}
.liste-icones li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:1rem;align-items:start}
.liste-icones h3{font-size:1.15rem;margin-bottom:.25rem}
.liste-icones p{color:var(--ink-2)}
/* Newsletter : le texte à gauche, le formulaire à droite (la troisième colonne d'une ancienne photo ronde laissait un tiers vide) */
.newsletter{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.faq2 .faq-intro .rond{width:min(220px,56vw)}
@media (max-width:900px){
  .newsletter{grid-template-columns:minmax(0,1fr)}
  .faq2 .faq-intro .rond{display:none}
  .rond.carte{width:76px;top:1rem;right:1rem}
}
@media (prefers-reduced-motion:reduce){.js .rond{opacity:1;transform:none}}

/* Captures recadrées : un seul bloc, lisible, qui s'efface vers le bas */
.vitrine-ecran:has(img[src*="images/details/"]){max-width:900px}
.how-screen img[src*="images/details/"]{max-width:100%}

/* ====== Méga-menu Élections : cinq cartes avec les symboles de la vidéo ====== */
.menu>li.has-mega.mega-large{position:static}
.mega.mega-el{left:50%;transform:translate(-50%,10px);width:min(1080px,calc(100vw - 2rem));padding:1.6rem 1.6rem 1.3rem}
.has-mega.mega-large:hover .mega-el,.has-mega.mega-large:focus-within .mega-el,.has-mega.mega-large.open .mega-el{transform:translate(-50%,0)}
.mega.mega-el::after{left:var(--fleche,50%);margin-left:-7px}
.mg-cartes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}
.mg-cartes a{display:grid;justify-items:center;gap:.55rem;padding:1.2rem .8rem 1.1rem;border-radius:12px;border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
.mg-cartes a:hover{transform:translateY(-3px);border-color:var(--nuit);box-shadow:0 18px 36px -24px rgba(16,32,86,.5)}
.mg-cartes .symbole{width:76px;height:76px;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.mg-cartes a:hover .symbole{transform:scale(1.08)}
.mg-cartes b{font-family:var(--font-display);font-size:1.02rem}
.mega .mg-cartes li{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;transition-delay:calc(var(--i,0) * 60ms)}
.has-mega:hover .mg-cartes li,.has-mega:focus-within .mg-cartes li,.has-mega.open .mg-cartes li{opacity:1;transform:none}
.mega-el .mg-all{margin-top:1rem}
@media (prefers-reduced-motion:reduce){.mega .mg-cartes li{opacity:1;transform:none}}
/* Frise de la page Élections : le symbole de chaque scrutin */
.frise li a{grid-template-columns:64px 150px 200px minmax(0,1fr) auto}
.frise .symbole{width:56px;height:56px}
@media (max-width:900px){.frise li a{grid-template-columns:56px minmax(0,1fr)}.frise li a>*:not(.symbole){grid-column:2}.frise .symbole{grid-row:span 4}}

/* ====== Articles : même style que le reste du site ====== */
.art-hero2{padding-block:clamp(2.4rem,5vw,4rem)}
.art-head2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.art-meta2{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;margin-bottom:1rem;color:rgba(255,255,255,.75);font-size:.88rem;font-weight:600}
.art-meta2 .catpill{background:rgba(255,255,255,.12);color:#fff;border-radius:6px;padding:.25rem .6rem;font-size:.78rem;font-weight:700}
main h1.art-title{font-family:var(--font-display);text-transform:none;letter-spacing:-.02em;line-height:1.15;color:#fff}
.art-hero2 .lead{margin-top:1rem}
.art-visuel{border-radius:12px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);background:rgba(255,255,255,.08)}
.art-visuel img{width:100%;height:100%;object-fit:cover;display:block}
.art-section{padding-top:clamp(2.4rem,5vw,3.6rem)}
.art-grid2{display:grid;grid-template-columns:minmax(0,8fr) minmax(260px,4fr);gap:clamp(2rem,4vw,3.6rem);align-items:start}
.art-texte{font-size:1.06rem;line-height:1.75;color:var(--ink-2);max-width:74ch}
.art-texte>*:first-child{margin-top:0}
.art-texte p{margin:0 0 1.1rem}
.art-texte h2{font-family:var(--font-display);text-transform:none;font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink);margin:2.4rem 0 .8rem}
.art-texte h3{font-size:1.2rem;color:var(--ink);margin:1.8rem 0 .6rem}
.art-texte ul,.art-texte ol{padding-left:1.3rem;margin:0 0 1.2rem}
.art-texte li{margin-bottom:.45rem}
.art-texte a{color:var(--primary);font-weight:600;text-decoration:underline;text-decoration-color:rgba(217,38,41,.5);text-underline-offset:3px}
.art-texte img{max-width:100%;height:auto;border-radius:10px;margin:1.2rem 0}
.art-texte blockquote{margin:1.6rem 0;padding:1rem 1.4rem;border-left:4px solid var(--corail);background:#F6F8FC;border-radius:0 10px 10px 0;color:var(--ink)}
.art-texte table{width:100%;margin:1.2rem 0;font-size:.95rem}
.art-texte strong{color:var(--ink)}
.art-cote{display:grid;gap:1rem;position:sticky;top:100px}
.art-bloc{display:grid;gap:.6rem;padding:1.2rem 1.3rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.art-bloc>b{font-family:var(--font-display);font-size:.95rem;color:var(--ink)}
.art-bloc .rel{display:grid;gap:.15rem;padding:.6rem 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.35}
.art-bloc .rel:hover{color:var(--corail)}
.art-bloc .rel small{color:var(--ink-3);font-weight:500;font-size:.8rem}
.art-cats{display:flex;flex-wrap:wrap;gap:.4rem}
.art-cats a{background:var(--ciel);color:var(--primary);padding:.25rem .65rem;border-radius:6px;font-size:.8rem;font-weight:700;text-decoration:none}
.art-cta{background:#F6F8FC}
.art-cta span{color:var(--ink-2);font-size:.92rem}
.art-cta .btn{justify-self:start}
@media (max-width:960px){.art-head2,.art-grid2{grid-template-columns:minmax(0,1fr)}.art-cote{position:static}}
a.carte-ap{text-decoration:none;color:inherit}
a.carte-ap:hover h3{color:var(--corail)}

.lien-cookies{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lien-cookies:hover{color:var(--corail)}

/* Partage des articles */
.partage{display:grid;gap:.6rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.art-texte .partage{margin-top:2.4rem}
.partage>b{font-family:var(--font-display);font-size:.95rem;color:var(--ink)}
.partage-liste{display:flex;flex-wrap:wrap;gap:.4rem}
.partage-btn{display:inline-flex;align-items:center;padding:.45rem .75rem;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);text-decoration:none;cursor:pointer}
.partage-btn:hover{border-color:var(--nuit);background:var(--nuit);color:#fff}
.art-texte .partage-btn{text-decoration:none;color:var(--ink)}
.art-texte .partage-btn:hover{color:#fff}

/* Les images portent leurs dimensions réelles : la hauteur suit la largeur */
img{height:auto}

/* Mentions RGPD sous les formulaires */
.rgpd{font-size:.8rem;line-height:1.5;color:var(--ink-3);margin-top:.6rem;flex-basis:100%}
.rgpd a{color:var(--primary);font-weight:700}

/* Bouton pause des vidéos de l'accueil (accessibilité) */
.pause-videos{position:absolute;z-index:3;right:clamp(16px,3vw,48px);bottom:1rem;padding:.45rem .8rem;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:rgba(10,21,64,.55);color:#fff;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.pause-videos:hover,.pause-videos:focus-visible{background:rgba(10,21,64,.85)}

/* Titres : pas d'équilibrage des lignes, ils remplissent la largeur avant de passer à la ligne */
h1,h2,h3,h4,.display,main h1,main h2,main h3{text-wrap:wrap}
.hero-bleu h1,.hero-v h1,.lg-hero h1{max-width:none}

/* Pied de page : typographie resserrée (retour du 15/10) */
.site-foot{font-size:.875rem;padding-block:clamp(2.5rem,5vw,3.5rem) 1.6rem}
.site-foot h4{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}
.site-foot ul{gap:.15rem}
.site-foot .fgrid a,.site-foot .f-brand p{font-size:.875rem;line-height:1.55}
.site-foot .logo img{width:52px;height:52px}
.site-foot .btn.f-news{font-size:.85rem;padding:.6rem 1rem}
.reassurance{margin-bottom:2.2rem;padding-bottom:1.8rem}
.reassurance li>svg{width:38px;height:38px;padding:8px}
.reassurance b{font-size:.85rem}
.reassurance li span{font-size:.78rem}
.site-foot .legal,.site-foot .legal a,.site-foot .lien-cookies{font-size:.78rem}

/* ====== Mise en page des pages : trous, captures, symboles, mobile (passe du 15 octobre) ====== */
/* Rythme vertical : le bandeau final et le témoignage suivent l'écart des autres sections */
.final-cta{padding-block:clamp(2.6rem,5vw,4.2rem)}
.temoignage-sec{padding-top:clamp(2.6rem,5vw,4.2rem)}
/* Vidéo des Fonctionnalités : la légende se cale sur le bouton lecture, en bas à gauche, sans chevaucher le titre de l'affiche */
.video169 .v-play b{align-self:flex-end;display:flex;align-items:center;min-height:64px}
/* Offres : le bouton se cale en bas de la carte, à la même hauteur dans une rangée */
.offre{display:flex;flex-direction:column}
.offre>.actions{margin-top:auto}

/* Symboles en points (scrutins, partis) */
.scrutins-sym{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.scrutins-sym li{display:grid;justify-items:center;align-content:start;gap:.4rem;padding:.75rem .3rem .65rem;border-radius:10px;background:#F6F8FC;border:1px solid var(--line);text-align:center}
.scrutins-sym img{width:52px;height:52px}
.scrutins-sym span{font-size:.74rem;font-weight:700;line-height:1.2;color:var(--ink-2)}
.scrutins-sym.bande{grid-template-columns:repeat(8,minmax(0,1fr));gap:.8rem;margin-top:clamp(2rem,4vw,3rem)}
.scrutins-sym.bande li{background:#fff;box-shadow:var(--ombre-douce)}
.scrutins-sym.bande img{width:58px;height:58px}
.scrutins-sym.bande span{font-size:.85rem}
@media (max-width:1100px){.scrutins-sym.bande{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.scrutins-sym{flex-wrap:wrap}.scrutins-sym li{flex:1 1 92px}.scrutins-sym.bande li{flex-basis:130px}}
.plan4 .plan-sym{display:block;width:100%;height:118px;padding:12px;object-fit:contain;border-radius:8px;background:#F6F8FC;margin-bottom:.3rem}
.groupe2.bandeau{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1.2rem,3vw,2.6rem)}
.bandeau-sym{width:clamp(76px,8vw,108px);height:auto}
.groupe2 .bandeau-ico{width:72px;height:72px;border-radius:12px;background:#fff;box-shadow:var(--ombre-douce)}
.groupe2 .bandeau-ico svg{width:30px;height:30px}
@media (max-width:860px){.groupe2.bandeau{grid-template-columns:auto minmax(0,1fr);align-items:start}.groupe2.bandeau>div:last-child{grid-column:1/-1}}
@media (max-width:480px){.groupe2.bandeau{grid-template-columns:minmax(0,1fr)}.bandeau-sym{width:72px}}
/* Tarif de groupe : un point par candidat, allumé par la glissière (app.js) */
.sim-points{display:grid;grid-template-columns:repeat(58,minmax(0,1fr));gap:2px;margin:.1rem 0 1.3rem}
.sim-points i{aspect-ratio:1;border-radius:50%;background:#DCE3EC;transition:background .2s}
.sim-points i.on{background:var(--corail)}
@media (max-width:600px){.sim-points{grid-template-columns:repeat(29,minmax(0,1fr))}}
/* Tableaux : un picto Iconsax par ligne */
.avec-ico{display:flex!important;align-items:center;gap:.85rem}
.avec-ico>svg{flex:none;width:38px;height:38px;padding:9px;border-radius:9px;background:var(--ciel);color:var(--nuit)}
.avec-ico small{display:block}
.inclus-ligne>.avec-ico{padding-block:.75rem}

/* À propos : le texte d'un côté, le logo CONCILIUM et trois points de l'autre */
.qui-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem)}
.qui-texte{display:grid;gap:1rem;align-content:start}
.qui-texte .kicker{margin-bottom:0}
.qui-texte p{color:var(--ink-2)}
.qui-texte .btn{margin-top:.4rem}
.qui-visuel{display:grid;gap:1rem}
.qui-points{display:grid;gap:.8rem}
.qui-points .carte-ap{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.1rem;padding:1.1rem 1.3rem}
.qui-points .carte-ap .gar-ico{margin:0}
.qui-points .carte-ap p{font-size:.97rem}
.qui-points .carte-ap strong{color:var(--ink)}
@media (max-width:1100px){.qui-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.qui-points .carte-ap{grid-template-columns:minmax(0,1fr);gap:.6rem}}
/* Actualités : la ligne catégorie et date a la même hauteur sur toutes les cartes, les titres s'alignent */
.posts .post small{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;min-height:1.6rem}
.posts .post small .catpill{margin:0;border-radius:6px}
/* Législatives : la grille des 577 points reste compacte sur téléphone */
@media (max-width:600px){.points577{grid-template-columns:repeat(29,1fr);gap:2px}}
/* Téléphone : les boutons longs passent à la ligne au lieu de sortir de l'écran */
@media (max-width:600px){
  main .btn{white-space:normal;text-align:center;max-width:100%}
  .fc-actions .btn{flex:1 1 100%;justify-content:center}
}
/* Avant leur apparition, les blocs glissés de côté (data-anim gauche/droite) dépassaient de l'écran et créaient un défilement horizontal :
   on coupe tout dépassement horizontal, et sur tablette et téléphone ils montent au lieu de glisser */
body{overflow-x:clip}
@media (max-width:1100px){.js [data-anim="gauche"],.js [data-anim="droite"]{transform:translateY(28px)}}
/* Deux captures côte à côte : l'une sous l'autre sur téléphone, sinon elles deviennent illisibles */
@media (max-width:700px){.recit .duo-ecrans{grid-template-columns:minmax(0,1fr)}}
/* Téléphone : symboles des scrutins en liste sur deux colonnes, formules plus courtes, tableau « Inclus » plus large pour le texte */
@media (max-width:600px){
  .scrutins-sym,.scrutins-sym.bande{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .scrutins-sym li,.scrutins-sym.bande li{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:.55rem;padding:.5rem .6rem;text-align:left}
  .scrutins-sym img,.scrutins-sym.bande img{width:34px;height:34px}
  .scrutins-sym span,.scrutins-sym.bande span{font-size:.8rem}
  .plan4 .plan-sym{height:86px;padding:8px}
  .inclus:not(.large) .inclus-ligne{grid-template-columns:minmax(0,1fr) 66px 58px}
  .inclus:not(.large) .inclus-ligne>*{padding:.7rem .45rem}
  .inclus:not(.large) .inclus-ligne>:first-child{padding-left:.8rem}
  .inclus-ligne:first-child>*{font-size:.85rem}
  .avec-ico{gap:.6rem}
  .avec-ico>svg{width:32px;height:32px;padding:7px}
}
/* Cartes des principes (À propos) : écart de carte, pas l'écart des grands mots de l'accueil */
@media (max-width:860px){.sss-grid:has(>.carte-ap){gap:1rem}}
/* Sécurité, sur téléphone : la colonne « Ce que fait Dons2Campagne » n'est pas une colonne « Parti » (la règle générale des tableaux larges l'étiquetait ainsi) */
@media (max-width:860px){.inclus.regles .inclus-ligne>:nth-child(2)::before{content:none}}
/* Filtres des actualités : angles resserrés comme le reste du site ; sur téléphone, une seule ligne qui défile */
.tabs .tab{border-radius:8px}
@media (max-width:600px){.tabs.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * clamp(16px,4vw,64px));padding-inline:clamp(16px,4vw,64px)}.tabs.filters::-webkit-scrollbar{display:none}.tabs.filters .tab{flex:none}}
/* En-tête entre 1280 et 1440 px : le bouton « Créer son compte » sortait de l'écran (jusqu'à 1390 px de large) ; menu resserré */
@media (min-width:1280px) and (max-width:1439px){
  .nav-in{gap:1rem;padding-inline:clamp(16px,2vw,32px)}
  .menu{gap:0}
  .menu>li>a{padding:.55rem .6rem;font-size:.96rem}
  .nav-cta{gap:.5rem}
  .nav-cta .btn{padding:.65rem .95rem;font-size:.92rem}
}
@media (min-width:1280px) and (max-width:1359px){.menu>li>a{padding:.5rem .42rem;font-size:.92rem}.nav-cta .btn{padding:.6rem .8rem}}
/* Méga-menu Fonctionnalités : le bouton lecture de la vignette se cale en bas à gauche, sans masquer le titre de l'affiche */
.mg-play{place-items:end start;padding:.55rem}
.mg-play svg{width:32px;height:32px}
/* Tailles de titres plafonnées (test UX du 15/10 : rien de plus gros que nécessaire) */
.sss-mot{font-size:clamp(2rem,3.4vw,3rem)}
.hero-v h1{font-size:clamp(2.2rem,3.9vw,3.2rem)}
.hero-bleu h1{font-size:clamp(2rem,3.6vw,3rem)}
main h2,.section-head h2,.recit-tete h2,.vitrine-tete h2,.final-cta h2{font-size:clamp(1.7rem,2.6vw,2.3rem)}
main .faq2 h2,main .two h2,main .side h2{font-size:clamp(1.6rem,2.2vw,2.1rem)}
.montant{font-size:clamp(2.2rem,3.6vw,3rem)}
main h1.art-title{font-size:clamp(1.6rem,calc(1.2rem + 1.6vw),2.4rem)}
main .prose h3{font-size:clamp(1.2rem,1.5vw,1.4rem)}
/* Contact, sur téléphone : l'adresse e-mail du bandeau ne sort plus de sa carte */
.hb-date b{overflow-wrap:anywhere}
@media (max-width:480px){.hb-dates .hb-date[href^="mailto:"],.hb-dates .hb-date[href^="tel:"]{flex:1 1 100%}}
/* Cibles tactiles d'au moins 44 px sur téléphone et tablette */
@media (max-width:760px),(pointer:coarse){
  .site-foot .fgrid a,.site-foot .legal a,.site-foot .lien-cookies,.crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .hero-bleu .crumbs{margin-top:-.7rem;margin-bottom:.6rem}
  .lien-fleche{min-height:44px}
  .toc a{display:flex;align-items:center;min-height:44px}
  .tabs .tab,.partage-btn,.pause-videos{min-height:44px}
}
/* Pied de page sur téléphone : les listes de liens sur deux colonnes, pour que les cibles de 44 px ne l'allongent pas démesurément */
@media (max-width:600px){.site-foot .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem}.site-foot .f-brand{grid-column:1/-1}}
/* Contrastes : au moins 4,5 pour 1 sur les petits textes gris et les pastilles */
.frise .plus-tard .date-pill{color:#475569}
.catpill{color:#B81F22}
.groupe2 .out small{color:#475569}
.chrome,.ecran .chrome{color:#475569}
/* ====== Fin de la passe du 15 octobre ====== */

/* Captures de l'outil : toutes en 16/9 (1600 x 900), affichées en entier, sans fondu (retour du 15/10) */
.ecran img[src*="images/details/"],.hb-visuel img[src*="images/details/"],.how-screen img[src*="images/details/"]{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;max-height:none;margin:0;-webkit-mask-image:none;mask-image:none}
.duo-ecrans{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}

/* Accueil : refonte du 15/10 (orientation, garanties, tarifs courts, articles, bouton fixe sur téléphone) */
.hv-kicker{margin:0 0 1rem;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hv-prix{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1.3rem;color:rgba(255,255,255,.82);font-size:.95rem}
.hv-prix b{color:#fff}
.hv-prix span+span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5);margin:0 1.4rem .15rem -.7rem;vertical-align:middle}
.orient{padding-block:clamp(2.2rem,4vw,3.2rem) .6rem}
.orient-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.orient-carte{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.2rem;align-items:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(1.3rem,2.4vw,1.8rem);box-shadow:0 24px 50px -36px rgba(16,32,86,.35);transition:border-color .25s,transform .25s,box-shadow .25s}
.orient-carte:hover{border-color:var(--nuit);transform:translateY(-2px);box-shadow:0 30px 60px -36px rgba(16,32,86,.5)}
.orient-ico{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;background:var(--nuit);color:#fff}
.orient-corps h3{font-size:clamp(1.4rem,2.2vw,1.75rem);margin:0}
.orient-lien{color:inherit;text-decoration:none}
.orient-lien::after{content:"";position:absolute;inset:0;border-radius:14px;z-index:1}
.orient-lien:focus-visible{outline:none}
.orient-carte:has(.orient-lien:focus-visible){outline:3px solid var(--corail);outline-offset:3px}
.orient-corps>p{color:var(--ink-2);margin:.35rem 0 1rem}
.orient-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.orient-chips a{position:relative;z-index:2;display:inline-block;padding:.38rem .8rem;border-radius:999px;background:var(--ciel);color:var(--nuit);font-size:.85rem;font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.orient-chips a:hover,.orient-chips a:focus-visible{background:var(--nuit);color:#fff}
.orient-fleche{align-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--creme);color:var(--nuit);transition:background .25s,color .25s,transform .25s}
.orient-carte:hover .orient-fleche{background:var(--corail);color:#fff;transform:translateX(3px)}
@media (max-width:900px){.orient-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.orient-carte{grid-template-columns:auto minmax(0,1fr)}.orient-fleche{display:none}.orient-ico{width:46px;height:46px}}
.garanties-sec{padding-block:clamp(3.5rem,7vw,6rem)}
.textes-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.textes-corps .lead{margin:.8rem 0 1.4rem}
.garanties-sec .rond{justify-self:center;margin:0;width:min(360px,72vw)}
.garanties4{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:clamp(1.8rem,3vw,2.4rem) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.garanties4 li{display:flex;gap:.9rem;align-items:flex-start}
.garanties4 li>svg{flex:none;width:44px;height:44px;padding:11px;border-radius:10px;background:var(--ciel);color:var(--nuit)}
.garanties4 h3{font-family:var(--font-display);font-size:1.02rem;text-transform:none;letter-spacing:-.01em;line-height:1.3;margin:0}
.garanties4 p{color:var(--ink-2);font-size:.9rem;margin:.25rem 0 0}
@media (max-width:1000px){.garanties4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.textes-grid{grid-template-columns:minmax(0,1fr)}.garanties-sec .rond{order:-1;width:min(220px,56vw)}}
@media (max-width:560px){.garanties4{grid-template-columns:minmax(0,1fr)}}
.tarifs-courts{padding-block:clamp(3rem,6vw,5rem)}
.tarifs-courts .offre p{color:var(--ink-2);margin:.2rem 0 0}
.tarifs-groupe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1rem;margin-top:1.8rem;color:var(--ink-2);text-align:center}
.posts.derniers{margin-top:.4rem}
.cta-mobile{display:none}
@media (max-width:760px){
  .cta-mobile:not([hidden]){display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70}
  .cta-mobile .btn{display:flex;justify-content:center;width:100%;box-shadow:0 14px 30px -10px rgba(16,32,86,.55)}
}
@media (max-width:760px){
  body.cta-bas .nav-cta .btn-primary{opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
  .hv-prix{flex-direction:column;gap:.2rem}
  .hv-prix span+span::before{display:none}
}
/* Méga-menus au clavier : pas d'ouverture au simple focus, fermeture forcée par Échap */
.menu>li.has-mega:focus-within:not(.open):not(:hover) .mega{opacity:0;visibility:hidden}
.menu>li.has-mega.ferme .mega{opacity:0;visibility:hidden}
/* Formulaire de contact : erreurs champ par champ, champ visible sous l'en-tête collant */
.form [aria-invalid=true]{border-color:var(--corail)!important;box-shadow:0 0 0 3px rgba(217,38,41,.12)}
.form input,.form select,.form textarea{scroll-margin-top:110px}
.champ-err{display:block;margin-top:.35rem;color:#B42318;font-size:.85rem;font-weight:600}
.champ-err[hidden]{display:none}
.f.check .champ-err{flex-basis:100%}
.envoi-note{color:var(--ink-2);font-size:.92rem;margin:0}
.envoi-note a{font-weight:700}
.copier-mail{margin-left:.4rem;padding:.3rem .7rem;min-height:36px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--nuit);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.copier-mail:hover{border-color:var(--nuit)}
.envoi-note[hidden]{display:none}
.groupe2 .paliers b{color:var(--corail);margin-right:.3rem;font-weight:800}
/* Captures agrandies sur téléphone */
@media (max-width:760px){
  .ecran img[role=button],.hb-visuel img[role=button],.how-screen img[role=button]{cursor:zoom-in}
  .ecran:has(img[role=button]),.hb-visuel:has(img[role=button]){position:relative}
  .ecran:has(img[role=button])::after,.hb-visuel:has(img[role=button])::after{content:"Toucher pour agrandir";position:absolute;right:8px;bottom:8px;padding:.25rem .55rem;border-radius:6px;background:rgba(11,15,30,.78);color:#fff;font-size:.72rem;font-weight:700;pointer-events:none}
}
.zoom-cap{position:fixed;inset:0;z-index:200;background:rgba(11,15,30,.94);display:grid;grid-template-rows:auto 1fr auto;padding:12px 0 calc(12px + env(safe-area-inset-bottom))}
.zoom-cap[hidden]{display:none}
.zc-fermer{justify-self:end;margin-right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--nuit);font-size:1.6rem;line-height:1;cursor:pointer}
.zc-defile{overflow:auto;align-self:center;-webkit-overflow-scrolling:touch;padding:0 12px}
.zc-defile img{display:block;width:240vw;max-width:none;height:auto;border-radius:8px}
.zc-aide{color:rgba(255,255,255,.8);text-align:center;font-size:.85rem;margin:.6rem 0 0}
/* Photos : intégration en deux colonnes (retour du 15/10) : la photo fait face à son texte, centrée verticalement */
.photo-duo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.photo-duo.inverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.photo-duo>.rond{justify-self:center;margin:0;width:min(340px,72vw)}
.photo-duo .section-head,.photo-duo .recit-tete{margin-bottom:0}
.photo-duo .section-head+.etapes4{margin-top:clamp(1.4rem,3vw,2rem)}
.photo-duo .etapes4.trois{grid-template-columns:minmax(0,1fr);gap:.8rem}
@media (max-width:900px){.photo-duo,.photo-duo.inverse{grid-template-columns:minmax(0,1fr)}.photo-duo>.rond{order:-1;width:min(220px,56vw)}}
.hb-grid.hb-rond{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.hb-rond>.rond.hero{margin:0;width:clamp(220px,24vw,320px)}
.hero-bleu .rond.hero::before{border-color:rgba(255,255,255,.45);opacity:1}
.hero-bleu .rond.hero::after{box-shadow:0 0 0 4px var(--nuit)}
@media (max-width:900px){.hb-rond>.rond.hero{display:none}}
.hero-bleu .hb-grid.hb-rond>figure.rond.hero{display:block;padding:0;align-self:center;aspect-ratio:1/1}
.hero-bleu .hb-grid.hb-rond>figure.rond.hero img{width:100%;height:100%}

/* Retours du 16/10 : alternance des fonds, carrousel des modules, boutons à picto, FAQ, pied de page */
.fond-teinte{background:#F4F7FB}
#outil.fond-teinte,.temoignage-sec.fond-teinte,section.fond-teinte:not(.orient){padding-block:clamp(3.5rem,7vw,6rem)}
.orient.fond-teinte{padding-block:clamp(2.2rem,4vw,3.2rem)}
.fond-teinte .og{background:#fff}
.og-scene{position:relative}
.og-fleche{position:absolute;top:50%;z-index:3;width:46px;height:46px;margin-top:-23px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--nuit);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -12px rgba(16,32,86,.45);transition:background .2s,color .2s,border-color .2s}
.og-fleche:hover,.og-fleche:focus-visible{background:var(--nuit);color:#fff;border-color:var(--nuit)}
.og-points{display:flex;justify-content:center;gap:.25rem;padding:1rem 0 1.2rem}
.og-points button{width:28px;height:28px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.og-points button::before{content:"";width:9px;height:9px;border-radius:50%;background:#C9D3E1;transition:width .25s,background .25s}
.og-points button[aria-current]::before{width:26px;border-radius:5px;background:var(--corail)}
@media (max-width:760px){.og-fleche{width:38px;height:38px}}
.btn-ico{display:inline-flex;align-items:center;gap:.55rem}
.btn-ico svg{flex:none}
.moyens-paiement{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem!important}
.moyens-paiement span{font-size:.72rem;font-weight:800;letter-spacing:.02em;padding:.2rem .5rem;border-radius:5px;border:1px solid var(--line);background:#fff;color:var(--nuit)}
.temoignage-sec .temoignage{margin:0}
.temoignage figcaption{align-items:center;gap:1.1rem}
.temoignage .tm-photo{width:88px;height:88px;font-size:1.5rem;flex:none}
.temoignage .tm-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.faq2 details summary::after,.faq2 details[open] summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background-color:var(--corail-2);background-image:linear-gradient(var(--corail),var(--corail)),linear-gradient(var(--corail),var(--corail));background-size:12px 2px,2px 12px;background-position:center;background-repeat:no-repeat;align-self:center}
.faq2 details[open] summary::after{background-size:12px 2px,0 0}
.f-linkedin{display:inline-flex;align-items:center;gap:.55rem;justify-self:start;padding:.55rem .95rem .55rem .7rem;min-height:44px;border-radius:8px;background:#0A66C2;color:#fff!important;font-weight:700;font-size:.85rem;text-decoration:none}
.f-linkedin:hover{background:#004182}
.f-linkedin svg{flex:none}
.site-foot .legal a[href*="concilium"]{text-decoration:underline;text-underline-offset:3px}
@media (min-width:761px){.og-scene .og-panel{padding-inline:clamp(4.4rem,6vw,5.2rem)}}
.og-prec{left:14px}.og-suiv{right:14px}
@media (max-width:760px){.og-prec{left:4px}.og-suiv{right:4px}.og-fleche{top:auto;bottom:-52px;margin-top:0}.og-points{padding-inline:48px}}
/* Législatives : l'hémicycle de l'Assemblée nationale à la place de la grille de points */
/* Bloc 577 circonscriptions (Présidentielle) : photo de l'Assemblée nationale en rectangle arrondi (retour de Thomas du 15/10) */
.photo-577{margin:0;background:#fff}
.photo-577 img{aspect-ratio:16/9;object-fit:cover}
.photo-577 figcaption{padding:.7rem 1rem;color:var(--ink-3);font-size:.9rem;font-weight:600;text-align:center}
/* Fonctionnalités : un picto par point, étapes en carrousel, photo de la sécurité plus petite */
.point{grid-template-columns:44px minmax(0,1fr);column-gap:1rem;row-gap:.25rem;align-items:start}
.point>.point-ico{grid-row:span 2;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:var(--ciel);color:var(--nuit)}
.point>h3,.point>p{grid-column:2}
.photo-duo.rond-moyen>.rond{width:min(240px,60vw)}
.photo-duo.inverse.rond-moyen{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.og-etapes .og-tabs button{gap:.6rem}
.et-num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--nuit);color:#fff;font-weight:800;font-size:.85rem;flex:none}
.og-etapes [aria-selected=true] .et-num{background:var(--corail)}
.et-quand{display:inline-block;margin-bottom:.6rem;padding:.25rem .6rem;border-radius:6px;background:var(--corail-2);color:#B81F22;font-size:.78rem;font-weight:800}
.centre-lien{text-align:center}
.et-quand{justify-self:start;width:max-content}
.photo-duo+.gar-grid{margin-top:clamp(2rem,4vw,3rem)}
.recit-grid.et-aussi{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}@media (max-width:900px){.recit-grid.et-aussi{grid-template-columns:minmax(0,1fr)}}
.groupe2 .out .hi b,.sim .out .hi b{color:#fff}
/* À propos : symboles cliquables, logo CONCILIUM sous le titre */
.scrutins-sym.bande a{display:grid;justify-items:center;gap:.4rem;text-decoration:none;color:var(--ink);padding:.5rem;border-radius:10px;transition:background .2s,transform .2s}
.scrutins-sym.bande a:hover,.scrutins-sym.bande a:focus-visible{background:var(--creme);transform:translateY(-2px)}
.qui-logo{width:min(220px,60%);height:auto;margin:.2rem 0 .4rem}
.qui-grid{align-items:start}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
/* Fonctionnalités : logos des moyens de paiement */
.logos-paiement{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.35rem!important}
.logos-paiement img{border-radius:6px}
.logos-paiement span{display:inline-grid;place-items:center;padding:0 .6rem;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:.78rem;font-weight:800;color:var(--nuit)}
.logos-paiement img{width:62px;height:40px;padding:0;border:0;background:none;object-fit:contain}
.logos-paiement span{height:30px}
.js .rond.hero{opacity:1;transform:none;transition:none}
/* Photos rectangulaires dans le contenu (à propos) */
.photo-rect{margin:1.6rem 0 0;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(16,32,86,.45)}
.photo-rect img{display:block;width:100%;height:auto}

/* Cocon sémantique : encadré « Pour aller plus loin » en fin d'article, lien vers les tarifs, bloc « Nos guides » des pages mères */
.art-plus{display:grid;gap:.5rem;margin:2.2rem 0 0;padding:1.2rem 1.4rem;border:1px solid var(--line);border-left:4px solid var(--nuit);border-radius:12px;background:#F6F8FC}
.art-plus>b{font-family:var(--font-display);font-size:1rem;color:var(--ink)}
.art-texte .art-plus p{margin:0}
.art-plus-liens{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.art-cta .lien-fleche{justify-self:start;font-size:.9rem}
.cocon-guides .centre-lien{margin-top:2rem}
/* Animations de l'outil (boucles vidéo à la place des captures fixes) */
.ecran.anim{position:relative}
.ecran.anim video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#F4F7FB}
.anim-pause{position:absolute;right:10px;bottom:10px;z-index:2;min-height:32px;padding:.3rem .7rem;border-radius:6px;border:0;background:rgba(11,15,30,.72);color:#fff;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;opacity:.85}
.anim-pause:hover,.anim-pause:focus-visible{opacity:1}
.recit-texte.deux-colonnes{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.4rem}@media (max-width:760px){.recit-texte.deux-colonnes{grid-template-columns:minmax(0,1fr)}}
/* Retours du 16/10 (nuit) : ancres sous l'en-tête collant, cartes « point » sans étirement, logos de paiement en pastilles identiques */
section[id],.prose [id]{scroll-margin-top:100px}
.ancres~section[id]{scroll-margin-top:150px}
@media (max-width:760px){.ancres~section[id]{scroll-margin-top:130px}}
.point{align-content:start}
.logos-paiement .lp{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:58px;padding:0 .7rem;border:1px solid var(--line);border-radius:6px;background:#fff;font-size:.78rem;font-weight:800;color:var(--nuit)}
.logos-paiement .lp img{width:auto;height:16px;padding:0;border:0;background:none;object-fit:contain}
/* Accueil, garanties : photo rectangulaire à angles arrondis au lieu du rond */
.photo-garanties{margin:0;justify-self:center;width:100%;max-width:420px}
.photo-garanties img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:900px){.photo-garanties{order:-1;max-width:none}.photo-garanties img{aspect-ratio:16/10;object-position:center 35%}}
/* Sécurité : héros sans visuel, tableau des règles sur toute la largeur, photo sous l'intro de la FAQ */
.hero-bleu .hb-seul{max-width:880px}
.regles-pleine .inclus.regles{width:100%}
.photo-faq{margin-top:1.6rem;max-width:420px}
.photo-faq img{aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.photo-faq{max-width:none}.photo-faq img{aspect-ratio:16/9}}
/* Événements : deux tiers pour les étapes, un tiers pour la photo, à hauteur égale */
.duo-23{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3.5rem);align-items:stretch}
.duo-23>.photo-rect{margin:0;height:100%}
.duo-23>.photo-rect img{height:100%;object-fit:cover;object-position:center 72%}
@media (max-width:900px){.duo-23{grid-template-columns:minmax(0,1fr)}.duo-23>.photo-rect{min-height:0;height:auto}.duo-23>.photo-rect img{aspect-ratio:4/3;height:auto}}
.recit-texte>h2{margin:.2rem 0 .6rem}
/* À propos : titre « Pourquoi » sur toute la largeur, photo à gauche à la hauteur du texte, symboles centrés */
.pourquoi-tete{max-width:none}
.pourquoi-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.8rem,4vw,4rem);align-items:stretch}
.pourquoi-grid>.photo-rect{margin:0;position:relative;min-height:320px}
.pourquoi-grid>.photo-rect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.pourquoi-grid>.prose>:first-child{margin-top:0}
.pourquoi-grid>.prose>:last-child{margin-bottom:0}
@media (max-width:900px){.pourquoi-grid{grid-template-columns:minmax(0,1fr)}.pourquoi-grid>.photo-rect{min-height:0}.pourquoi-grid>.photo-rect img{position:static;aspect-ratio:16/10;height:auto}}
.scrutins-sym.bande{display:flex;flex-wrap:wrap;justify-content:center}
.scrutins-sym.bande li{flex:0 1 150px;padding:0;display:block}
.scrutins-sym.bande li a{display:grid;justify-items:center;align-content:start;gap:.4rem;height:100%;padding:1rem .5rem .9rem;text-decoration:none;color:inherit;border-radius:10px}
.scrutins-sym.bande li a:hover span{color:var(--nuit)}
/* Contact : carte LinkedIn (le plan statique est retiré, retours de Thomas du 16/10) */
.carte-linkedin .btn{margin-top:.2rem}
.contact-side{position:static}
.duo-23 .etapes4.trois{grid-template-columns:minmax(0,1fr)}
.duo-23>.photo-rect{min-height:0}
/* Événements : l'animation de billetterie en grand, sous le tableau billet et don */
.anim-large{max-width:980px;margin:2.4rem auto 0}
/* Accueil : invitation à la démo, à la place du témoignage tant qu'il n'est pas fourni */
.demo-bandeau{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--rayon);box-shadow:var(--ombre-douce);padding:clamp(1.6rem,4vw,3rem)}
.demo-bandeau h2{margin:.2rem 0 .7rem}
.demo-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:flex-end}
@media (max-width:860px){.demo-bandeau{grid-template-columns:minmax(0,1fr)}.demo-actions{justify-content:flex-start}}
.cat-intro{max-width:none;margin:0 0 2rem;color:var(--ink-2);font-size:1.05rem;line-height:1.65}
/* ====== Audit design du 16/10 (nuit) ====== */
/* Héros à photo ronde, sur tablette et téléphone : une seule colonne, la photo en petit sous le texte.
   La règle à deux colonnes (.hb-grid.hb-rond) et le display:block de la photo l'emportaient sur le passage en une colonne :
   à 390 px, le texte tenait dans 106 px et les pastilles de dates se chevauchaient. */
@media (max-width:900px){
  .hb-grid.hb-rond{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .hero-bleu .hb-grid.hb-rond>figure.rond.hero{justify-self:center;width:min(200px,52vw)}
}
/* Alternance des fonds, blanc puis teinté d'une section à l'autre : un seul teinté pour toutes les bandes
   (le gris bleuté #F1F5F9 des récits et le #F4F7FB des sections teintées se côtoyaient) */
:root{--teinte:#F4F7FB}
.fond-teinte,.fond-creme,.recit:nth-of-type(even){background-color:var(--teinte)}
/* Une section .wrap teintée : le fond déborde sur toute la largeur de l'écran au-delà de 1450 px */
main>section.wrap.fond-teinte{background-color:var(--teinte);border-image:linear-gradient(var(--teinte),var(--teinte)) fill 0//0 100vmax}
/* Pages d'élection : le tarif de groupe des législatives prolonge la bande de l'offre ;
   avec un intermède (présidentielle, régionales), l'offre se teinte et l'intermède passe en blanc, pour que l'alternance tombe juste
   jusqu'aux guides (blancs) et à la FAQ (teintée) */
main>#offre+#groupe{padding-top:0}
/* Une section qui en prolonge une autre (sans marge haute) garde la marge de son premier bloc à l'intérieur :
   sinon la marge traverse la section et laisse un liseré blanc entre deux bandes teintées (Événements) */
main>section[style*="padding-top:0"],main>#offre+#groupe{display:flow-root}
main>#offre:has(+section.fond-creme){background-color:var(--teinte);border-image:linear-gradient(var(--teinte),var(--teinte)) fill 0//0 100vmax}
main>#offre+section.fond-creme{background-color:#fff}
/* Actualités (page écrite par _build.py) : la bande de la newsletter se teinte, la carte passe en blanc */
main>#newsletter{background-color:var(--teinte);border-image:linear-gradient(var(--teinte),var(--teinte)) fill 0//0 100vmax}
#newsletter .newsletter,.fond-teinte .newsletter{background:#fff}
/* Rythme vertical : le même écart pour toutes les bandes de contenu (67, 80, 83, 96 et 128 px se mélangeaient à 1440 px) */
main>section:not(.hero-bleu,.hero-v,.orient,.final-cta,.art-section){padding-block:clamp(3.5rem,7vw,6rem)}
/* Angles : 10 px partout (des cartes, encadrés et vignettes étaient à 14, 16, 18 ou 20 px) */
.post .ph,.groupe2 .sim,.callout,.form-card,.hb-date,.og,.fc-in,.newsletter,.orient-carte,.orient-lien::after,.temoignage,.demo-bandeau,
.mega,.mg-cartes a,.photo-rect,.art-visuel,.art-bloc,.partage,.art-plus,.orient-ico,.groupe2 .bandeau-ico{border-radius:10px}
:root .lg-toc,:root .lg-brief,:root .lg-dl,:root .lg-table-wrap,:root .lg-contact,:root .lg-card{border-radius:10px}
.newsletter input{border-radius:8px}
/* Photos du contenu : rectangles arrondis, jamais en rond (retour du 16/10) ; seule la photo du héros bleu reste ronde.
   Sur Fonctionnalités, la photo de la sécurité restait ronde et, à 390 px, débordait de 47 px à gauche sur le titre. */
.photo-duo>.rond,.photo-duo.rond-moyen>.rond{width:100%;max-width:440px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(16,32,86,.45)}
.photo-duo>.rond img{border-radius:0}
.photo-duo>.rond::before,.photo-duo>.rond::after{content:none}
@media (max-width:900px){
  .photo-duo.inverse.rond-moyen{grid-template-columns:minmax(0,1fr)}
  .photo-duo>.rond,.photo-duo.rond-moyen>.rond{max-width:none;aspect-ratio:16/9}
}
/* Cartes d'articles : les titres s'alignent d'une carte à l'autre (les rangées de la carte ne s'étirent plus),
   et le dégradé de secours ne déborde plus en liseré rouge autour des photos */
.posts .post{align-content:start}
.post .ph.has-img{background:var(--sable)}
@media (max-width:900px){.posts{row-gap:2.2rem}}
/* Héros : les pastilles de chiffres tiennent sur une ligne (sur Tarifs, la troisième passait seule à la ligne) */
@media (min-width:901px){.hb-dates{flex-wrap:nowrap}.hb-dates .hb-date{flex:0 1 auto;min-width:0}}
/* À propos, sur téléphone : les symboles des scrutins sur deux colonnes, le dernier sur toute la largeur s'il est seul */
@media (max-width:600px){.scrutins-sym.bande li{flex:1 1 calc(50% - .4rem)}}
/* Mouvements qui durent plus de 5 s sans moyen de les arrêter (WCAG 2.2.2, signalé par l'audit UX) : le reflet des boutons
   ne passe qu'une fois, l'onde du téléphone trois fois et s'arrête avec le bouton « Mettre les animations en pause »,
   et les photos des cartes d'articles ne zooment plus en boucle (22 s, sur presque toutes les pages) mais au survol */
.btn-shine{animation-iteration-count:1}
.tel-onde{animation-iteration-count:3}
.hero-v:has(.pause-videos[aria-pressed="true"]) .tel-onde{animation-play-state:paused}
.post .ph img{animation:none;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.post:hover .ph img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.post:hover .ph img{transform:none}}
/* À propos, bloc CONCILIUM (retour du 16/10) : texte sur la moitié de la largeur, cartes réparties sur toute la hauteur du texte */
.qui-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.qui-visuel,.qui-points{height:100%}
.qui-points{grid-auto-rows:1fr}
@media (max-width:1100px){.qui-grid{grid-template-columns:minmax(0,1fr)}.qui-points{grid-auto-rows:auto}}
/* retours 16/10, P2 : visuels de Thomas en rectangle arrondi dans le héros (Départementales, Contact), adresse dans le héros de Contact, sénatoriales sur Tarifs */
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-rect{margin:0;align-self:center;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-rect picture{display:block}
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-rect img{display:block;width:100%;height:auto;object-fit:cover}
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-portrait{width:clamp(240px,23vw,320px)}
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-portrait img{aspect-ratio:2/3;object-position:center 45%}
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-carte{width:clamp(280px,29vw,420px)}
.hero-bleu .hb-grid.hb-rond>figure.hb-photo-carte img{aspect-ratio:960/936}
@media (max-width:900px){
  .hero-bleu .hb-grid.hb-rond>figure.hb-photo-portrait{justify-self:stretch;width:100%}
  .hero-bleu .hb-grid.hb-rond>figure.hb-photo-portrait img{aspect-ratio:4/3}   /* téléphone : recadrage paysage déjà fait dans le fichier (budget du bandeau) */
  .hero-bleu .hb-grid.hb-rond>figure.hb-photo-carte{justify-self:center;width:min(100%,420px)}
}
.hb-date.hb-adresse{font-style:normal;color:#fff}
.tarif-senat{margin-top:1rem;color:var(--ink-2)}
.tarif-senat .lien-fleche{display:inline-block;margin-top:.3rem}
/* retours 16/10, P1 : pictogramme « Se connecter », espacements, ratios des blocs texte et visuel, carrousel des témoignages */
.btn-connexion{gap:.45rem}
.btn-connexion .ix,.f-connexion .ix{width:16px;height:16px;flex:none}
.f-connexion{display:inline-flex;align-items:center;gap:.4rem}
/* menu mobile : les deux boutons centrés, le pictogramme collé au texte (une règle plus loin les passait en bloc) */
.mm-cta .btn{display:flex;justify-content:center;align-items:center}
/* Grilles d'articles : environ le double d'espace sous les titres, entre deux rangées de cartes */
.posts,.posts.derniers{row-gap:2.8rem}
@media (max-width:900px){.posts{row-gap:2.8rem}}
/* Glossaire : les notions plus espacées */
#notions .recit-texte{row-gap:2.8rem}
/* Texte large (60 %) face à un visuel réduit (40 %) : Fonctionnalités (collecte, e-mails, dépôt), Sécurité (vos données) */
@media (min-width:1101px){
  .recit-grid.texte-large{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}
  .recit-grid.inverse.texte-large{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}
}
/* Fonctionnalités, bloc Sécurité : le visuel fourni par Thomas, en rectangle arrondi */
.photo-duo>.photo-securite{margin:0;justify-self:center;width:100%;max-width:440px;aspect-ratio:3/2}
.photo-duo>.photo-securite img{height:100%;object-fit:cover}
@media (max-width:900px){.photo-duo>.photo-securite{order:-1;max-width:none}}
/* À propos, section « Pourquoi » : les symboles des scrutins sur toute la largeur du conteneur */
@media (min-width:1000px){.scrutins-sym.bande{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.scrutins-sym.bande li{flex:none}}
/* Carrousel des témoignages (accueil, À propos) : défilement au doigt (scroll-snap), flèches, points, clavier ; jamais automatique */
.tmc{position:relative;max-width:900px;margin-inline:auto}
.tmc-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;position:relative;outline:none;overscroll-behavior-x:contain;gap:1.5rem}
.tmc-piste::-webkit-scrollbar{display:none}
.tmc-diapo{flex:0 0 100%;scroll-snap-align:center;margin:0;box-sizing:border-box;padding:clamp(1.6rem,4vw,2.8rem);border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--ombre-douce);display:grid;gap:1rem;align-content:start}
.tmc-etoiles{display:flex;gap:.2rem;margin:0;color:#C98500}
.tmc-diapo blockquote{margin:0}
.tmc-diapo blockquote p{font-family:var(--font-display);font-size:clamp(1.08rem,1.6vw,1.35rem);line-height:1.55;color:var(--ink);font-weight:500;max-width:none}
.tmc-diapo figcaption{display:flex;align-items:center;gap:1rem;margin-top:.4rem}
.tmc-diapo figcaption b{display:block;color:var(--ink)}
.tmc-diapo figcaption span:last-child{color:var(--ink-3);font-size:.92rem}
.tmc-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem}
.tmc-fleche{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--nuit);display:grid;place-items:center;cursor:pointer;transition:border-color .2s,background .2s}
.tmc-fleche:hover{border-color:var(--nuit)}
.tmc-points{display:flex;gap:.25rem}
.tmc-points button{width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center}
.tmc-points button::before{content:"";width:10px;height:10px;border-radius:50%;background:#C5CCDB;transition:background .2s,transform .2s}
.tmc-points button[aria-current="true"]::before{background:var(--nuit);transform:scale(1.25)}
.tmc-fleche:focus-visible,.tmc-points button:focus-visible{outline:3px solid var(--nuit);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tmc-piste{scroll-behavior:auto}}
/* retours 16/10, P2 : tags des articles en pastille cernée du bleu de la charte (Actualités, rubriques, « Nos guides ») */
.catpill,.posts .post small .catpill{display:inline-block;background:#fff;color:var(--nuit);border:1px solid var(--nuit);border-radius:999px;padding:.18rem .65rem;font-size:.75rem;font-weight:600;line-height:1.35;margin:0 .45rem 0 0}
.art-meta2 .catpill{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);border-radius:999px}

/* retours 16/10 après-midi : À propos, textes justifiés et logo CONCILIUM dans le titre */
.page-a-propos main p:not(.crumbs):not(.kicker):not(.centre-lien){text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.titre-logo{display:flex;flex-wrap:wrap;align-items:center;column-gap:.35em}
.titre-logo img{height:1.55em;width:auto;display:inline-block;transform:translateY(.04em)}
/* Événements, bloc « Côté organisateur » : padding bas réduit (retour de Thomas du 16/10) */
.recit.recit-bas-court{padding-bottom:clamp(1.6rem,3vw,2.4rem)}

/* 16/10 soir : portrait de la page auteur affiché en portrait (il était recadré en paysage, tête et menton coupés) */
.photo-rect.photo-portrait{align-self:start;width:100%;max-width:420px;justify-self:center}
.photo-rect.photo-portrait img{aspect-ratio:auto 1147/1485;width:100%;height:auto;object-fit:fill;max-height:none}
/* 16/10 soir : logo de l'en-tête un peu plus grand (demande de Thomas) */
.nav .logo img{width:60px;height:60px}
.nav.scrolled .logo img{width:50px;height:50px}
@media (max-width:760px){.nav .logo img{width:52px;height:52px}.nav.scrolled .logo img{width:48px;height:48px}}
/* 16/10 soir : Tarifs, bloc « Inclus » : moins de vide au-dessus, titre et photo alignés en haut, de l'air avant le tableau */
#inclus{padding-top:clamp(2.4rem,4vw,3.4rem)}
#inclus .photo-duo{align-items:start;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
#inclus .photo-duo .photo-rect{margin-top:0}

/* 16/10 soir : vidéo du hero de Fonctionnalités, contour blanc et ombre légère sur le fond bleu ; elle s'ouvre dans la fenêtre vidéo */
.hero-bleu .video169{border:4px solid #fff;border-radius:14px;box-shadow:0 22px 50px -22px rgba(0,0,0,.55)}
.video169 .v-affiche{width:100%;height:100%;display:block;object-fit:cover}
/* 16/10 soir : hero de l'accueil moins haut, et les deux cartes « Je suis candidat / Je représente un parti » mordent légèrement dessus */
.hero-v{min-height:min(70vh,660px)}
.hv-grid{padding-block:clamp(2rem,4vw,3.2rem) clamp(4rem,7vw,5.6rem)}
.hero-v{padding-block:0}
.orient,.orient.fond-teinte{position:relative;z-index:3;padding-top:0}
.orient-grid{margin-top:clamp(-3.4rem,-4vw,-2rem)}
.orient-carte{box-shadow:0 26px 50px -30px rgba(16,32,86,.45)}
@media (max-width:760px){.hv-grid{padding-block:2rem 3.6rem}.orient-grid{margin-top:-1.8rem}}

/* 16/10 soir, retour de Thomas : les deux cartes d'orientation se superposent au hero, sans fond bleu clair dessous, avec un relief en plusieurs couches */
.orient.orient-flottant{background:transparent;padding-top:0;padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.orient-flottant .orient-grid{margin-top:clamp(-6rem,-7vw,-3.4rem)}
.orient-flottant .orient-carte{border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(16,32,86,.06),0 10px 24px -6px rgba(16,32,86,.18),0 34px 70px -26px rgba(16,32,86,.45)}
.orient-flottant .orient-carte:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 4px 8px rgba(16,32,86,.08),0 16px 34px -8px rgba(16,32,86,.22),0 44px 90px -30px rgba(16,32,86,.5)}
.hv-grid{padding-bottom:clamp(6rem,10vw,8.4rem)}
@media (max-width:760px){.orient-flottant .orient-grid{margin-top:-2.6rem}.hv-grid{padding-bottom:4.4rem}}

/* audit mobile du 16/10 au soir */
/* Rien ici ne s'applique au-dessus de 900 px : l'affichage sur ordinateur est inchangé. */
@media (max-width:900px){
  /* Zones tactiles d'au moins 44 x 44 px pour les liens et boutons isolés */
  .site-foot .fgrid a,.site-foot .legal a,.partage-btn{min-width:44px;justify-content:center}
  .site-foot .fgrid a{justify-content:flex-start}
  .anim-pause{min-height:44px;min-width:44px}
  .ancres a{min-height:44px;display:inline-flex;align-items:center}
  .art-cats a,.art-sources a,main td small a,.lien-isole a{display:inline-flex;align-items:center;min-height:44px}
  body .lg-text .lg-contact a,body .lg-dl dd a{display:inline-flex;align-items:center;min-height:44px}
  .groupe2 input[type=range]{height:44px}
  .form .check input[type=checkbox]{width:20px;height:20px;margin-top:13px;flex:none}
  .form .check label{padding-block:11px}
  .og-points button{width:44px;height:44px}
  /* Pastilles de l'accueil : zone tactile agrandie sans changer leur dessin */
  .orient-chips a::before{content:"";position:absolute;inset:-5px 0}
  /* Corps de texte d'au moins 14 px */
  .reassurance span,.reassurance li span,.site-foot .legal,.site-foot .legal a,.site-foot .lien-cookies,.rgpd,.hb-date span,
  .groupe2 .paliers span,.partage-btn,.posts .post small,.pause-videos,main td small,.point p small{font-size:.875rem}
  body .lg-contact .lg-sub,body .lg-chip{font-size:.875rem}
  /* Tableau dans un article (comparatif GiveXpert) : il défile dans sa colonne au lieu de déborder de 11 px */
  .art-texte table{display:block;overflow-x:auto;max-width:100%}
  /* Tarifs, en-tête du bloc « Inclus » : « Candidat » tient dans sa colonne */
  .inclus:not(.large) .inclus-ligne:first-child>:not(:first-child){padding-inline:.15rem}
}
@media (max-width:760px){
  /* Flèches des modules : 44 px, alignées sur la rangée de points */
  .og-fleche{width:44px;height:44px;bottom:-60px}
  /* sur téléphone, 7 points de 44 px ne tiennent pas entre les flèches : 32 px de large, les flèches de 44 px font le même office */
  .og-points{padding-inline:52px;gap:0}
  .og-points button{height:44px;width:32px}
}
/* Tarifs, élections couvertes : à deux par rangée, « Départementales » sortait de sa carte ; le picto passe au-dessus du nom */
@media (max-width:440px){
  .scrutins-sym:not(.bande) li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
}
/* fin de l'audit mobile du 16/10 au soir */

/* 17/10, décision de Thomas : sur téléphone, le carrousel des modules se parcourt aux flèches et au doigt, sans les points */
@media (max-width:760px){.og-points{display:none}}
/* 19/10 : sur téléphone tenu droit, la vidéo verticale 9:16 remplit l'écran sans déborder */
@media (max-width:760px) and (orientation:portrait){
  .vm-box.vertical video{height:auto;width:min(100%,calc(78vh * 9 / 16));max-height:78vh}
}
/* 19/10 : « Je représente un parti ou un micro-parti » sur une seule ligne sur ordinateur ; les deux titres restent assortis */
.orient-corps h3{font-size:clamp(1.25rem,1.55vw,1.45rem)}

/* 19/10 : bouton pause des animations de l'accueil réduit à un picto rond, en haut à droite du héros (il était caché par les cartes) */
.hero-v .pause-videos{top:1rem;bottom:auto;width:44px;height:44px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:0}
/* 20/10 : tableaux des pages légales, une adresse e-mail ou un mot long passe à la ligne au lieu d'élargir le tableau sur téléphone */
.lg-table td,.lg-table th{overflow-wrap:anywhere;min-width:0}

/* 21/10 : « Textes de référence », une seule ligne discrète sous la FAQ (Tarifs, Partis, Sécurité, pages élections).
   Corps réduit (14 px, le plancher du texte courant), gris #4A5568 sur le fond teinté #F4F7FB : contraste 7:1 (4,5:1 exigé au build). */
.textes-ref{margin:1.6rem 0 0;font-size:14px;line-height:1.5;color:#4A5568;background:none;border:0;padding:0}
.textes-ref a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.textes-ref a:hover,.textes-ref a:focus-visible{color:var(--nuit)}

/* Bandeau cookies compact (21/10/2026) : une barre basse, pas une carte. Le détail du choix est replié derrière « Personnaliser ».
   Refuser et accepter : même classe, même taille, même couleur, côte à côte, refus en premier (CNIL). Aucune animation d'entrée.
   Plus haut que l'écran (zoom 400 %, paysage) : le texte défile, les boutons restent visibles. La page réserve la place du bandeau (--ck-h, posé par d2c.js). */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;flex-direction:column;max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px);background:#fff;color:var(--ink-2);border-top:1px solid var(--ink-3);box-shadow:0 -14px 34px -20px rgba(16,32,86,.5);padding:.65rem max(.75rem,calc((100% - 1240px)/2)) calc(.65rem + env(safe-area-inset-bottom));font-size:.9rem;line-height:1.45}
.cookies[hidden]{display:none}
body.ck-ouvert{padding-bottom:var(--ck-h,0px)}
#contenu:focus{outline:none}
.ck-corps{min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ck-texte{margin:0}
.ck-titre{font-family:var(--font-display);font-weight:800;color:var(--ink)}
.cookies a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ck-choix{display:grid;gap:.45rem;margin-top:.5rem;padding-top:.55rem;border-top:1px solid var(--line)}
.ck-choix[hidden]{display:none}
.ck-ligne{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;cursor:pointer}
.ck-ligne input{margin:.2rem 0 0;width:18px;height:18px;accent-color:var(--nuit)}
.ck-ligne b{display:block;color:var(--ink)}
.ck-note{margin:0;font-size:.85rem}
.ck-actions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:.4rem .5rem;margin-top:.55rem}
.ck-actions .btn{justify-content:center;min-height:44px;padding:.4rem .9rem;font-size:.92rem}
.ck-actions .ck-perso{grid-column:1/-1;justify-self:center;min-height:44px;padding:0 .8rem;border:0;background:none;font:inherit;font-size:.92rem;font-weight:700;color:var(--nuit);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.cookies:has(.ck-choix:not([hidden])) .ck-actions .ck-perso{border:2px solid var(--nuit);border-radius:8px;text-decoration:none;padding:0 .9rem}
@media (min-width:350px) and (max-width:759px){
  .ck-actions{grid-template-columns:1fr 1fr auto}
  .ck-actions .btn{padding-inline:.5rem;font-size:.88rem}
  .ck-actions .ck-perso{grid-column:auto;padding:0 .3rem;font-size:.88rem}
  .cookies:has(.ck-choix:not([hidden])) .ck-actions{grid-template-columns:1fr 1fr}
  .cookies:has(.ck-choix:not([hidden])) .ck-actions .ck-perso{grid-column:1/-1}
}
@media (min-width:760px){
  .cookies{flex-direction:row;align-items:center;gap:.5rem 1.5rem}
  .ck-corps{flex:1 1 auto;max-height:calc(100vh - 1.3rem - 8px);max-height:calc(100dvh - 1.3rem - 8px - env(safe-area-inset-bottom))}
  .ck-actions{display:flex;align-items:center;gap:.5rem;margin-top:0}
  .ck-actions .btn{min-width:8.5rem;padding-inline:.9rem;font-size:.92rem}
  .ck-actions .ck-perso{padding:0 .6rem;font-size:.92rem}
}
@media (min-width:900px){
  .ck-choix{grid-template-columns:1fr 1fr;column-gap:1.5rem}
  .ck-choix .ck-note{grid-column:1/-1}
}
@media (max-height:480px){
  .cookies{padding-block:.4rem calc(.4rem + env(safe-area-inset-bottom));font-size:.84rem;line-height:1.35}
  .ck-actions{margin-top:.35rem}
  .ck-choix{margin-top:.35rem;padding-top:.35rem}
}