/* ============================================================ Archivo (SIL Open Font License 1.1), heberge sur ce domaine. Fonte variable : poids 100-900 et CHASSE 62-125 %. C'est cet axe de largeur qui porte la hierarchie, a la maniere d'Aiglon au Palais. Le latin etendu n'est telecharge que si la page contient ses caracteres. ============================================================ */ @font-face{ font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url("archivo-latin.258a93fe.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url("archivo-latin-ext.837705d4.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ /* Fond blanc, toujours (demande Benoit du 05/09/2026) : le mode sombre automatique est neutralise par data-theme="light" pose sur dans build_site.py ; color-scheme garde les controles natifs clairs. */ color-scheme:light; --paper:#FFFFFF; --card:#FFFFFF; --card-2:#F2F5FE; --ink:#10162F; --ink-2:#3B4468; --ink-3:#767F9B; --rule:#D6DCEC; --rule-soft:#E9EDF9; --ui:#B21D0A; --ui-soft:#FAE9E6; --masthead:#1D274A; --nuit-2:#1D274A; --creme:#FCF7F0; --chrome:#F2F5FE; --chrome-ink:#10162F; --tri-bleu:#000091; --tri-blanc:#EDEDF7; --tri-rouge:#E1000F; --cl-bleu:#000091; --cl-blanc:#FFFFFF; --cl-blanc-bord:#B9B9D6; --cl-rouge:#E1000F; --cl-rouge-pale:#FCE5E6; --bleu:#000091; --bleu-clair:#6A6AF4; --bleu-pale:#E3E3FD; --ok:#000091; --warn:#6A6AF4; --r:5px; --p-lepen:#3E6E9E; --p-philippe:#1F8C8C; --p-attal:#8B4DA8; --p-retailleau:#4B5FC4; --p-bertrand:#78859F; --p-melenchon:#C0392B; --p-glucksmann:#BC5480; --p-tondelier:#3B9159; /* testes dans les sondages sans figurer parmi les huit : la courbe a besoin d'une couleur stable pour chacun */ --p-zemmour:#7A5C2E; --p-roussel:#99283E; --p-dupontaignan:#5E7350; --p-arthaud:#B65C32; --p-faure:#C77B8E; --p-bardella:#2F5578; --p-wauquiez:#3D4FA1; --p-villepin:#6D5FA8; --p-mikolajczak:#2C8C7E; --p-lalanne:#7B6A9E; --p-egger:#5F8F6E; --p-philippot:#33507A; --p-asselineau:#2F5A9E; --p-cazeneuve:#5E6FA6; --p-ruffin:#C44E3E; --p-royal:#B34D7D; --p-massard:#3C7F8C; --p-guedj:#C2536A; --p-brun:#A04A8A; --p-bouamrane:#B05070; --p-labib:#8E2F5C; --p-kazib:#A83248; /* ajoutes au comparatif le 04/09/2026 */ --p-branco:#8A6A2E; --p-lisnard:#1F6E8C; --p-batho:#3F7A34; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#0A0E1C; --card:#141C33; --card-2:#1B2440; --ink:#EDEFF5; --ink-2:#A6AEC8; --ink-3:#737B96; --rule:#28314F; --rule-soft:#1F2841; --ui:#FF6B52; --ui-soft:#2E1A17; --masthead:#131C33; --nuit-2:#28315C; --creme:#221B12; --chrome:#161C2E; --chrome-ink:#EDEFF5; --chrome:#161C2E; --chrome-ink:#EDEFF5; --tri-bleu:#3A3AD4; --tri-blanc:#FFFFFF; --tri-rouge:#F5333F; --cl-bleu:#6A6AF4; --cl-blanc:#F2F2FA; --cl-blanc-bord:#F2F2FA; --cl-rouge:#F5333F; --cl-rouge-pale:#3A151A; --tri-bleu:#3A3AD4; --tri-blanc:#FFFFFF; --tri-rouge:#F5333F; --cl-bleu:#6A6AF4; --cl-blanc:#F2F2FA; --cl-blanc-bord:#F2F2FA; --cl-rouge:#F5333F; --cl-rouge-pale:#3A151A; --bleu:#8585F6; --bleu-clair:#5B5BC4; --bleu-pale:#1E2447; --ok:#8585F6; --warn:#7B7BD8; --r:5px; --p-lepen:#6FA0CE; --p-philippe:#3FB5B5; --p-attal:#C58BDE; --p-retailleau:#8290E4; --p-bertrand:#9AA6BE; --p-melenchon:#E2685A; --p-glucksmann:#DE83A8; --p-tondelier:#5CBB7C; --p-zemmour:#C7A05C; --p-roussel:#E06A80; --p-dupontaignan:#93B183; --p-arthaud:#E39A6E; --p-faure:#E5A2B4; --p-bardella:#6E93BC; --p-wauquiez:#8290DE; --p-villepin:#A497DB; --p-mikolajczak:#74D3C5; --p-lalanne:#C8C0D6; --p-egger:#B1CBBA; --p-philippot:#7697C6; --p-asselineau:#82A4DA; --p-cazeneuve:#BAC1D9; --p-ruffin:#E5B2AB; --p-royal:#DEB1C6; --p-massard:#8AC2CD; --p-guedj:#E7BBC4; --p-brun:#D5A4C8; --p-bouamrane:#DCB2C0; --p-labib:#D379A4; --p-kazib:#DD8C9B; --p-branco:#D3B071; --p-lisnard:#77BBD4; --p-batho:#8FCB80; --p-branco:#D3B071; --p-lisnard:#77BBD4; --p-batho:#8FCB80; } } :root[data-theme="dark"]{ --paper:#0A0E1C; --card:#141C33; --card-2:#1B2440; --ink:#EDEFF5; --ink-2:#A6AEC8; --ink-3:#737B96; --rule:#28314F; --rule-soft:#1F2841; --ui:#FF6B52; --ui-soft:#2E1A17; --masthead:#131C33; --nuit-2:#28315C; --creme:#221B12; --bleu:#8585F6; --bleu-clair:#5B5BC4; --bleu-pale:#1E2447; --ok:#8585F6; --warn:#7B7BD8; --r:5px; --p-lepen:#6FA0CE; --p-philippe:#3FB5B5; --p-attal:#C58BDE; --p-retailleau:#8290E4; --p-bertrand:#9AA6BE; --p-melenchon:#E2685A; --p-glucksmann:#DE83A8; --p-tondelier:#5CBB7C; --p-zemmour:#C7A05C; --p-roussel:#E06A80; --p-dupontaignan:#93B183; --p-arthaud:#E39A6E; --p-faure:#E5A2B4; --p-bardella:#6E93BC; --p-wauquiez:#8290DE; --p-villepin:#A497DB; --p-mikolajczak:#74D3C5; --p-lalanne:#C8C0D6; --p-egger:#B1CBBA; --p-philippot:#7697C6; --p-asselineau:#82A4DA; --p-cazeneuve:#BAC1D9; --p-ruffin:#E5B2AB; --p-royal:#DEB1C6; --p-massard:#8AC2CD; --p-guedj:#E7BBC4; --p-brun:#D5A4C8; --p-bouamrane:#DCB2C0; --p-labib:#D379A4; --p-kazib:#DD8C9B; } *{box-sizing:border-box} body{ margin:0;background:var(--paper);color:var(--ink); font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif; font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; } .wrap{max-width:940px;margin:0 auto;padding:0 22px 100px} /* ---------------- tricolore ---------------- */ .tricolore{display:flex;height:4px;border-radius:99px;overflow:hidden;width:96px} .tricolore i{flex:1} .tricolore i:nth-child(1){background:#0B3B8C} .tricolore i:nth-child(2){background:#F4F5F7} .tricolore i:nth-child(3){background:#C8102E} :root[data-theme="dark"] .tricolore i:nth-child(2){background:#E9ECEA} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tricolore i:nth-child(2){background:#E9ECEA}} .tricolore.pleine{width:100%;height:3px;border-radius:0} /* ---------------- ouverture ---------------- */ .bandeau{ position:relative;border-radius:var(--r);overflow:hidden;margin:0 0 30px; aspect-ratio:1500/638;background:var(--card-2); } .bandeau img{display:block;width:100%;height:100%;object-fit:cover} .bandeau figcaption{ position:absolute;left:0;right:0;bottom:0;padding:26px 20px 12px; background:linear-gradient(to top,rgba(8,10,12,.82),rgba(8,10,12,0)); color:#EDEFF2;font-size:12.5px;line-height:1.4; } .bandeau figcaption b{font-weight:700;font-size:14px;display:block;margin-bottom:2px} .bandeau figcaption span{opacity:.72} .hero{padding:52px 0 30px} .kicker{ display:inline-block;font-size:12px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--ui);background:var(--ui-soft); padding:5px 11px;border-radius:99px;margin:0 0 22px; } h1{ font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700; font-size:clamp(40px,8vw,74px);line-height:1.02;letter-spacing:-.025em; margin:0 0 20px;text-wrap:balance; } .chapo{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%;font-size:20px;line-height:1.5;color:var(--ink-2);max-width:56ch;margin:0 0 30px} .chapo strong{color:var(--ink);font-weight:700} .regles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px; margin:0 0 8px;padding:0;list-style:none; } .regle{ background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:15px 17px; } .regle b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px} .regle span{font-size:14.5px;color:var(--ink-2);line-height:1.45} /* ---------------- barre d'outils ---------------- */ .tools{ position:sticky;top:0;z-index:20;background:var(--paper); border-bottom:1px solid var(--rule);margin-top:34px;padding:12px 0 11px; } .tools-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .modes{display:inline-flex;background:var(--rule-soft);border-radius:99px;padding:3px;gap:2px} .mode{ border:0;background:transparent;color:var(--ink-2);font-family:inherit;font-size:14px; font-weight:600;padding:6px 15px;border-radius:99px;cursor:pointer; } .mode[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.10)} .mode:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .hint{font-size:13.5px;color:var(--ink-3);margin-left:auto} .people{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none} .person{ display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule); background:var(--card);color:var(--ink);border-radius:99px;padding:6px 14px 6px 10px; font-size:14px;font-weight:600;font-family:inherit;cursor:pointer; transition:opacity .15s,border-color .15s,background .15s; } .person .pip{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none} .person[aria-pressed="false"]{opacity:.38;background:transparent} .person[aria-pressed="false"] .pip{background:var(--ink-3)} .person:hover{border-color:var(--ink-3)} .person:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .person .party{font-weight:400;font-size:12.5px;color:var(--ink-3)} /* ---------------- sujets ---------------- */ .sujet{padding:46px 0 0;scroll-margin-top:118px} .sujet-head{display:flex;align-items:flex-start;gap:16px} .num{ font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;font-size:15px; color:#fff;background:var(--ui);border-radius:var(--r); width:34px;height:34px;display:grid;place-items:center;flex:none;margin-top:7px; font-variant-numeric:tabular-nums; }.sujet h2, .sujet h1{ font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700; font-size:clamp(28px,5vw,40px);line-height:1.05;letter-spacing:-.02em;margin:0 0 6px; } .sujet .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%;font-size:17.5px;color:var(--ink-2);margin:0} .pourvous{ display:flex;gap:11px;align-items:flex-start; background:var(--card-2);border:1px solid var(--rule-soft);border-radius:var(--r); padding:13px 16px;margin:18px 0 4px;font-size:15.5px;color:var(--ink-2); } .pourvous b{color:var(--ink);font-weight:700;white-space:nowrap} .cards{display:flex;flex-direction:column;gap:10px;margin-top:18px} .card{ background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:16px 18px; } .card.vide{background:transparent;border-style:dashed} .card-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px} .card-top .pip{width:11px;height:11px;border-radius:50%;background:var(--c);flex:none} .card-top .qui{font-weight:700;font-size:15.5px} .card-top .parti{font-size:13px;color:var(--ink-3)} .badge{ margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;border-radius:99px;padding:3px 10px;white-space:nowrap; } .badge.chiffre{color:#fff;background:var(--cl-bleu)} .badge.annonce{color:#10162F;background:var(--cl-blanc);box-shadow:inset 0 0 0 1px var(--cl-blanc-bord)} .badge.rien{color:#fff;background:var(--cl-rouge)} .resume{font-size:17.5px;line-height:1.5;margin:0;font-weight:600} .card.vide .resume{font-weight:400;color:var(--ink-3);font-size:16px} .plus{ margin-top:11px;border:0;background:transparent;padding:0;cursor:pointer; font-family:inherit;font-size:14px;font-weight:600;color:var(--ui); display:inline-flex;align-items:center;gap:6px; } .plus:focus-visible{outline:2px solid var(--ui);outline-offset:3px} .plus .arrow{transition:transform .18s} .plus[aria-expanded="true"] .arrow{transform:rotate(90deg)} .detail{margin:12px 0 0;padding:13px 0 0;border-top:1px solid var(--rule-soft)} .detail ul{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:7px} .detail li{font-size:15.5px;color:var(--ink-2);line-height:1.5} .detail li::marker{color:var(--ink-3)} .detail[hidden]{display:none} /* jargon */ .jargon{ border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:help; border-bottom:2px dotted var(--ui);position:relative; } .jargon:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .jargon::after{ content:attr(data-def);position:absolute;left:0;top:calc(100% + 9px);z-index:30; width:max(240px,min(320px,70vw));background:var(--ink);color:var(--paper); font-size:14px;font-weight:400;line-height:1.4;letter-spacing:0; padding:10px 13px;border-radius:var(--r);text-transform:none; opacity:0;visibility:hidden;transition:opacity .14s;pointer-events:none; box-shadow:0 8px 24px -10px rgba(0,0,0,.5); } .jargon:hover::after,.jargon:focus::after{opacity:1;visibility:visible} .card-actions{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin-top:12px} .ecrire{ border:1px solid var(--rule);background:var(--card-2);color:var(--ink); font-family:inherit;font-size:14px;font-weight:600;padding:6px 14px; border-radius:99px;cursor:pointer;transition:border-color .15s,background .15s; } .ecrire:hover{border-color:var(--ui);color:var(--ui)} .ecrire:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .card-actions .plus{margin-top:0} /* composeur */ .voile{ position:fixed;inset:0;z-index:50;background:rgba(10,12,14,.55); display:grid;place-items:center;padding:20px; } .voile[hidden]{display:none} .boite{ background:var(--card);border-radius:var(--r);width:min(560px,100%); max-height:88vh;overflow-y:auto;padding:26px 26px 22px; box-shadow:0 24px 60px -20px rgba(0,0,0,.55); }.boite h2, .boite h1{ font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700;font-size:25px; letter-spacing:-.02em;margin:0 0 5px;display:flex;align-items:center;gap:9px; }.boite h2 .pip, .boite h1 .pip{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none} .boite .sur{font-size:15px;color:var(--ink-2);margin:0 0 18px} .boite label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3);margin:0 0 7px} .boite textarea{ width:100%;min-height:130px;resize:vertical;font-family:inherit;font-size:16px; line-height:1.5;color:var(--ink);background:var(--card-2); border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px; } .boite textarea:focus{outline:2px solid var(--ui);outline-offset:1px;border-color:var(--ui)} .compte{font-size:13px;color:var(--ink-3);margin:6px 0 0;text-align:right} .avert{ font-size:14px;color:var(--ink-2);background:var(--ui-soft);border-radius:var(--r); padding:12px 14px;margin:16px 0 0;line-height:1.45; } .actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .btn{ font-family:inherit;font-size:15px;font-weight:700;border-radius:99px; padding:10px 20px;cursor:pointer;border:1px solid transparent;text-decoration:none; display:inline-flex;align-items:center;justify-content:center; } .btn.primaire{background:var(--ui);color:#fff;border-color:var(--ui)} .btn.primaire:hover{filter:brightness(1.08)} .btn.second{background:transparent;color:var(--ink);border-color:var(--rule)} .btn.second:hover{border-color:var(--ink-3)} .btn.ferme{margin-left:auto;background:transparent;color:var(--ink-3);border-color:transparent} .btn:focus-visible{outline:2px solid var(--ui);outline-offset:2px} /* filtre des sujets */ .filtres{margin-top:9px} .filtres-titre{ font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-3);margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .mini{ border:0;background:transparent;font-family:inherit;font-size:12.5px;font-weight:700; color:var(--ui);cursor:pointer;padding:0;text-transform:none;letter-spacing:0; } .mini:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none} .tag{white-space:nowrap} .tag{ border:1px solid var(--rule);background:var(--card);color:var(--ink); border-radius:var(--r);padding:4px 11px;font-family:inherit;font-size:13.5px;font-weight:600; cursor:pointer;transition:opacity .15s,border-color .15s; } .tag[aria-pressed="false"]{opacity:.36;background:transparent} .tag:hover{border-color:var(--ink-3)} .tag:focus-visible{outline:2px solid var(--ui);outline-offset:2px} /* tableau croisé */ .tablewrap{overflow-x:auto;margin-top:22px;border:1px solid var(--rule);border-radius:var(--r);background:var(--card)} table.croise{border-collapse:collapse;width:100%;min-width:720px;font-size:14px} table.croise th,table.croise td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--rule-soft)} table.croise thead th{ position:sticky;top:0;background:var(--card);z-index:2; font-size:12.5px;font-weight:700;line-height:1.25;vertical-align:bottom; border-bottom:2px solid var(--rule); } table.croise thead th .pip{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c);margin-right:5px} table.croise tbody th{ font-weight:700;font-size:14px;white-space:nowrap;background:var(--card); position:sticky;left:0;z-index:1;border-right:1px solid var(--rule-soft); } table.croise tbody tr:hover td{background:var(--card-2)} .cell{ display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;border-radius:99px;padding:3px 9px;white-space:nowrap;cursor:default; } .cell.chiffre{color:#fff;background:var(--cl-bleu)} .cell.annonce{color:var(--ink);background:var(--cl-blanc);box-shadow:inset 0 0 0 1px var(--cl-blanc-bord)} .cell.rien{color:#fff;background:var(--cl-rouge)} table.croise tfoot td,table.croise tfoot th{ border-top:2px solid var(--rule);border-bottom:0;font-weight:700;font-size:13px; color:var(--ink-2);font-variant-numeric:tabular-nums; } .legende{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0 0;font-size:13.5px;color:var(--ink-2)} .legende span{display:inline-flex;align-items:center;gap:6px} /* sondages */ .sondages{padding:56px 0 0}.sondages h2, .sondages h1{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700; font-size:clamp(26px,4.5vw,38px);margin:0 0 6px;letter-spacing:-.02em} .sondages .quoi{font-size:17px;color:var(--ink-2);margin:0 0 6px;max-width:64ch} .instituts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px} .institut{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:17px 19px} .institut h3{font-size:15px;font-weight:700;margin:0 0 2px} .institut .ech{font-size:12.5px;color:var(--ink-3);margin:0 0 14px} .barres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} /* max-content : la colonne des noms prend la largeur du plus long, identique d'une ligne a l'autre. Une largeur fixe coupait « Jean-Luc Mélenchon ». */ .barres li{display:grid;grid-template-columns:32px max-content minmax(56px,1fr) 46px; align-items:center;gap:10px;font-size:14px} .so-visage{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 16%; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);flex:none} .so-vide{background:repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 4px,transparent 4px 8px)} .so-qui{display:flex;flex-direction:column;gap:2px;min-width:0} .so-qui b{font-weight:650;line-height:1.15;white-space:nowrap;font-size:13.5px} .so-logo{display:flex;align-items:center;height:14px} /* les logos de partis sont des marques sombres : sur le bandeau bleu nuit, il faut les passer en blanc pour qu'ils restent lisibles */ .so-logo img{height:14px;width:auto;max-width:86px;object-fit:contain;object-position:left center; filter:brightness(0) invert(1);opacity:.66} .so-parti{display:block;font-size:10.5px;color:rgba(255,255,255,.5);letter-spacing:.03em; line-height:1.2;text-transform:uppercase;white-space:nowrap} .so-logo + .so-parti{display:none} .barres .track{background:var(--rule-soft);border-radius:3px;overflow:hidden;height:9px} .barres .bar{display:block;height:9px;border-radius:3px;background:var(--c);min-width:3px} .barres .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px} .duels{display:flex;flex-direction:column;gap:10px;margin-top:14px} .duel{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:14px 17px} .duel-noms{display:flex;justify-content:space-between;font-size:14.5px;font-weight:700;margin-bottom:7px;gap:12px} .duel-noms span{display:inline-flex;align-items:center;gap:6px} .duel-noms .pip{width:9px;height:9px;border-radius:50%;background:var(--c)} .duel-barre{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--rule-soft)} .duel-barre i{display:block;height:12px} .duel-chiffres{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2); margin-top:5px;font-variant-numeric:tabular-nums} .prudence{ font-size:14.5px;color:var(--ink-2);background:var(--ui-soft);border-radius:var(--r); padding:13px 16px;margin-top:18px;line-height:1.45; } .prudence b{color:var(--ink)} /* comparatif a portraits */ .comparatif{margin-top:18px;border:1px solid var(--rule);border-radius:var(--r); overflow:hidden;background:var(--card)} .ligne{display:grid;grid-template-columns:250px 1fr;border-bottom:1px solid var(--rule-soft)} .ligne:last-child{border-bottom:0} .ligne.vide .idee .resume{color:var(--ink-3);font-weight:400;font-size:16px} .qui-col{ display:flex;gap:11px;align-items:flex-start;padding:16px 16px 16px 18px; border-right:1px solid var(--rule-soft);background:var(--card-2); } .portrait{ width:44px;height:44px;border-radius:var(--r);object-fit:cover;flex:none; background:var(--rule-soft);box-shadow:inset 0 0 0 1px rgba(16,22,47,.10); } .qui-col .bloc{min-width:0} .qui-col .nom{font-weight:700;font-size:15.5px;line-height:1.25;display:block} .qui-col .parti{font-size:12.5px;color:var(--ink-3);line-height:1.3;display:block;margin-top:2px} .qui-col .drapeau{display:block;width:34px;height:3px;margin-top:8px;border-radius:99px;background:var(--c)} .idee{padding:16px 18px} .idee .haut{display:flex;justify-content:flex-end;margin-bottom:6px} /* logos de partis */ .logo{display:block;margin-top:6px;height:22px} .logo img{height:22px;width:auto;max-width:140px;display:block; background:#fff;border-radius:3px;padding:2px 4px;box-shadow:0 0 0 1px rgba(16,22,47,.08)} .logo.texte{ display:inline-block;height:auto;font-size:11px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-2);background:var(--rule-soft); border-radius:3px;padding:3px 7px;margin-top:6px; } /* portraits dans les tableaux */ .portrait-s{width:36px;height:36px;border-radius:var(--r);object-fit:cover;object-position:center top;flex:none; background:var(--rule-soft);box-shadow:inset 0 0 0 1px rgba(16,22,47,.10)} .portrait-xs{width:26px;height:26px;border-radius:3px;object-fit:cover;object-position:center top;flex:none; background:var(--rule-soft)} .tete{display:flex;gap:10px;align-items:center;text-align:left} .tete .bloc{min-width:0} .tete .nom{display:block;font-size:14px;font-weight:700;line-height:1.2} .tete .logo{margin-top:4px;height:18px} .tete .logo img{height:18px;max-width:104px} .mini-tete{flex-direction:column;gap:5px;align-items:center;text-align:center} /* tableau de duel */ .duel-table{min-width:640px;table-layout:fixed} .duel-table thead th:first-child{width:150px} .duel-table td,.duel-table tbody th{vertical-align:top;padding:13px 13px} .duel-table .sujet-nom{font-size:14px;line-height:1.3;display:block} .duel-table .badge{margin-left:0;margin-bottom:7px;display:inline-block} .duel-table .prop{margin:0;font-size:15px;line-height:1.45;font-weight:600} .duel-table td.vide .prop{font-weight:400;color:var(--ink-3);font-size:14.5px} .duel-table tbody tr:hover td{background:var(--card-2)} /* annuaire des autres candidats */ .annuaire{padding:56px 0 0}.annuaire h2, .annuaire h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em} .annuaire .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%;font-size:17.5px;color:var(--ink-2); margin:0 0 22px;max-width:66ch} .bloc-titre{ font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ui);margin:26px 0 11px;display:flex;align-items:center;gap:10px; } .bloc-titre::after{content:"";flex:1;height:1px;background:var(--rule)} .gens{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:10px; margin:0;padding:0;list-style:none} .gens li{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px} .gens .n{font-weight:700;font-size:15.5px;display:block} .gens .pa{font-size:12.5px;color:var(--ink-3);display:block;margin:1px 0 7px} .gens .no{font-size:14px;color:var(--ink-2);line-height:1.45;margin:0} /* crédits images */ .credits{font-size:13px;color:var(--ink-3);line-height:1.6;margin:8px 0 0} .credits b{color:var(--ink-2);font-weight:600} /* bandeau institutionnel, repris de la barre haute d'elysee.fr */ .masthead{background:var(--chrome);color:var(--chrome-ink)} .masthead-in{ max-width:940px;margin:0 auto;padding:10px 22px; display:flex;align-items:center;gap:11px;flex-wrap:wrap; } .mh-mark{display:flex;width:26px;height:17px;border-radius:2px;overflow:hidden;flex:none} .mh-mark i{flex:1} .mh-mark i:nth-child(1){background:#0B3B8C} .mh-mark i:nth-child(2){background:var(--chrome)} .mh-mark i:nth-child(3){background:#C8102E} .mh-titre{ font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2); display:inline-flex;align-items:baseline;gap:6px; } .mh-titre b{font-weight:700;color:var(--chrome-ink);font-variant-numeric:tabular-nums} .mh-date{ margin-left:auto;font-size:12.5px;color:var(--ink-3);letter-spacing:0; white-space:nowrap;display:inline-flex;align-items:center;gap:9px; } .mh-date::before{content:"";width:1px;height:16px;background:var(--rule)} /* La devise du site. Elle dit en une ligne la promesse de la page : on ne souffle pas un vote, on donne de quoi choisir. Elle figure en tete et en pied de chacune des pages. Pas d'italique : seule la graisse normale d'Archivo est chargee, le navigateur fabriquerait une fausse oblique. */ .mh-devise{ margin:0;font-size:12.5px;line-height:1.35;color:var(--ink-2); letter-spacing:0;padding-left:11px; border-left:1px solid var(--rule); } /* la meme devise en fin de page, cette fois signee du mini-drapeau des surtitres : elle ferme la page comme elle l'ouvre */ .devise-pied{ margin:30px 0 0;font-size:16.5px;font-weight:600;line-height:1.4; color:var(--ink);letter-spacing:-.005em;max-width:44ch; } .devise-pied::before{ content:"";display:block;width:26px;height:4px;border-radius:1px;margin-bottom:11px; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } /* surtitre rouge au-dessus des grands titres, comme les rubriques d'elysee.fr */ .surtitre{ font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ui);margin:0 0 9px;display:flex;align-items:center;gap:11px; } .surtitre::after{content:"";flex:1;height:1px;background:var(--rule)} /* vignettes : la grille à images d'elysee.fr */ .vignettes{padding:52px 0 0}.vignettes h2, .vignettes h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em} .vignettes .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%;font-size:17.5px;color:var(--ink-2); margin:0 0 22px;max-width:66ch} .grille-v{display:grid;grid-template-columns:repeat(auto-fill,minmax(276px,1fr));gap:14px; margin:0;padding:0;list-style:none} .vign{ background:var(--card);border:1px solid var(--rule);border-radius:var(--r); overflow:hidden;display:flex;flex-direction:column; } .vign-img{position:relative;width:64px;height:64px;flex:none;border-radius:var(--r); overflow:hidden;background:var(--rule-soft)} .vign-img img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block} .vign-img .bandelette{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c)} .vign-haut{display:flex;gap:13px;align-items:center;margin-bottom:4px} .vign-haut .bloc{min-width:0} .vign-corps{padding:16px 17px 17px;display:flex;flex-direction:column;gap:9px;flex:1} .vign-nom{font-size:17px;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0} .vign .logo{margin-top:0} .vign-res{font-size:15px;line-height:1.5;color:var(--ink-2);margin:0;flex:1} .vign-pied{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; border-top:1px solid var(--rule-soft);padding-top:11px;margin-top:2px; font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums; } .vign-pied b{color:var(--cl-bleu);font-weight:700} .vign-pied .sep{color:var(--rule)} .vign-voir{ margin-left:auto;border:0;background:transparent;padding:0;cursor:pointer; font-family:inherit;font-size:13.5px;font-weight:700;color:var(--ui); } .vign-voir:focus-visible{outline:2px solid var(--ui);outline-offset:3px} @media (max-width:720px){ .masthead-in{padding:9px 15px;gap:10px} .mh-titre{font-size:11px;letter-spacing:.1em} .mh-date{width:100%;margin-left:0;font-size:11px} /* la devise passe a la ligne : le liseré de separation n'a plus de sens */ .mh-devise{width:100%;padding-left:0;border-left:0;font-size:12px} } /* silhouette du palais, en tete de page */ .mh-marque{ display:inline-flex;align-items:center;gap:10px;text-decoration:none; color:var(--chrome-ink);border-radius:3px;padding:2px 4px 2px 2px;margin-left:-2px; } .mh-marque:hover .mh-picto{color:var(--ui);opacity:1} .mh-marque:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .mh-picto{height:23px;width:23px;flex:none;color:var(--chrome-ink);opacity:.85; transition:opacity .15s,color .15s;vector-effect:non-scaling-stroke} /* décompte */ .decompte{ background:var(--masthead);color:#fff;border-radius:var(--r); padding:11px 17px 12px;margin:0 0 18px; display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px; } .dec-label{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 10px} .dec-tour{ font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:var(--ui);border-radius:3px;padding:2px 8px; } .dec-quand{font-size:13.5px;color:rgba(255,255,255,.72)} /* les quatre nombres en ligne, pas en colonne : les jours se lisent de loin, le reste tient a cote sans reclamer de la hauteur */ .dec-chiffres{display:flex;flex-wrap:wrap;gap:2px 13px;margin:0;padding:0;list-style:none; align-items:baseline} .dec-chiffres li{display:flex;flex-direction:row;align-items:baseline;gap:3px;min-width:0;flex:none} .dec-chiffres b{ font-size:19px;font-weight:700;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .dec-chiffres li:first-child b{font-size:26px} .dec-chiffres span{ font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:rgba(255,255,255,.55); } .dec-note{flex-basis:100%;margin:0;font-size:12.5px;color:rgba(255,255,255,.62); line-height:1.4} .mh-date b{color:var(--ui);font-weight:700;font-variant-numeric:tabular-nums} @media (max-width:720px){ .decompte{padding:10px 14px 11px;gap:3px 12px} .dec-chiffres{gap:2px 8px} .dec-chiffres li:first-child b{font-size:23px} /* a 225 jours, la seconde ne vaut pas une deuxieme ligne sur un telephone */ .dec-chiffres li:nth-child(4){display:none} } /* ============ hero pleine largeur ============ */ /* Le motif d'elysee.fr : image pleine largeur, et le titre dans un pavé bleu nuit plein qui remonte sur l'image. Pas de dégradé, pas de flou. */ .hero-full{position:relative;background:var(--paper)} /* La photo prend toute la largeur : rien n'est perdu lateralement, et les bandes bleu nuit qui restaient sur les cotes ont disparu. Le seul rognage possible est vertical. La photo fait 2,41 de rapport : elle tient entiere sur la plupart des ecrans. Quand une coupe s'impose, le cadrage a 64 % conserve la facade et sacrifie le haut du ciel, qui ne dit rien. */ .hero-image{position:relative;width:100%;background:var(--masthead);overflow:hidden} .hero-fond{display:block;width:100%;height:auto;max-height:76vh; object-fit:cover;object-position:50% 64%} .hero-voile{display:none} .hero-in{max-width:940px;margin:0 auto;padding:0 22px} .hero-pave{ background:var(--masthead);color:#fff; margin-top:-108px;position:relative;z-index:2; padding:30px 34px 32px;max-width:760px; border-left:5px solid var(--ui); } /* Le cartouche de la date sur le pave : un bleu clair pris dans la palette, assez presence pour se detacher, assez sourd pour ne pas voler la vedette au titre. */ .hero-pave .kicker{ background:rgba(198,214,247,.15);color:#C9D8F5;margin-bottom:16px; box-shadow:inset 0 0 0 1px rgba(198,214,247,.30); } .hero-pave h1{color:#fff;font-size:clamp(34px,6.4vw,60px);margin-bottom:0} .hero-pave .chev{color:var(--ui);font-weight:400;margin-left:.12em} /* la devise sous le titre : meme bleu clair que le cartouche de la date, assez presente pour se lire d'un coup d'oeil, assez sourde pour rester au second plan derriere le titre */ .hero-devise{ margin:18px 0 0;font-size:clamp(15px,2.1vw,18px);line-height:1.4; font-weight:600;color:#C9D8F5;letter-spacing:-.005em; } .hero-suite{padding:30px 0 44px} .hero-credit{margin:14px 0 0;font-size:12px;color:var(--ink-3)} .hero-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px} @media (max-width:720px){ .hero-fond{max-height:54vh} .hero-pave{margin-top:-72px;padding:22px 20px 24px} .hero-suite{padding:24px 0 34px} } /* ============ le constat chiffré ============ */ .constat{padding:52px 0 0}.constat h2, .constat h1{font-size:clamp(28px,5vw,44px);font-weight:700;letter-spacing:-.025em; margin:0 0 10px;line-height:1.05;text-wrap:balance} .constat .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%;font-size:18px;color:var(--ink-2); margin:0 0 24px;max-width:64ch} .compteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r); overflow:hidden;margin:0 0 26px;padding:0;list-style:none} .compteurs li{background:var(--card);padding:17px 19px} .compteurs .n{display:block;font-size:38px;font-weight:700;line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .compteurs .l{display:block;font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.35} .compteurs .chiffre .n{color:var(--bleu)} .compteurs .annonce .n{color:var(--bleu-clair)} .compteurs .rien .n{color:var(--ui)} .matrice{display:flex;flex-direction:column;gap:3px} .mat-ligne{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:center} .mat-nom{font-size:13.5px;color:var(--ink-2);text-align:right;line-height:1.2} .mat-cases{display:flex;gap:3px} .mat-case{ flex:1;height:22px;border-radius:2px;transition:transform .12s; background:var(--cl-rouge);box-shadow:none; } .mat-case.chiffre{background:var(--cl-bleu)} .mat-case.annonce{background:var(--cl-blanc);box-shadow:inset 0 0 0 1px var(--cl-blanc-bord)} .mat-case:hover{transform:scaleY(1.35)} /* matrice transposee (30 candidats) : le nom en tete de ligne, le sujet en tete de colonne */ .mat-ligne .mat-nom.mat-qui{flex:none;flex-direction:row;justify-content:flex-end;gap:7px; padding:0 8px 0 0;border-bottom:0;border-right:3px solid var(--c);min-height:0;text-align:right} .mat-ligne .mat-nom.mat-qui .mat-tete-nom{display:inline;font-size:12.5px;letter-spacing:0; text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .mat-suj{flex:1;min-width:0;display:flex;justify-content:center;align-items:flex-end; padding-bottom:5px;color:var(--tc,var(--ink-2));border-bottom:2px solid var(--tc,var(--rule)); text-decoration:none;position:relative} .mat-suj svg{width:17px;height:17px;fill:none;stroke:var(--tc,var(--ink-2));stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .mat-suj:hover svg,.mat-suj:focus-visible svg{stroke:var(--ui)} .mat-suj:focus-visible{outline:2px solid var(--ui);outline-offset:2px} @media (max-width:720px){ .mat-suj svg{width:13px;height:13px} .mat-ligne .mat-nom.mat-qui .mat-tete-nom{font-size:11px} } @media (max-width:420px){ .mat-ligne .mat-nom.mat-qui .mat-tete-nom{display:inline;font-size:10px} } @media (max-width:720px){ .mat-ligne{grid-template-columns:118px 1fr;gap:8px} .mat-nom{font-size:11.5px} .mat-case{height:18px} } /* ============ rythme : alternance de fonds ============ */ .bande{background:var(--card-2);border-block:1px solid var(--rule-soft);margin-top:56px;padding-block:8px 46px} .bande > *{max-width:940px;margin-inline:auto;padding-inline:22px} .bande-sombre{ background:var(--masthead);color:#fff;margin-top:56px; background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px); background-size:16px 16px; padding-block:8px 46px; } .bande-sombre > *{max-width:940px;margin-inline:auto;padding-inline:22px}.bande-sombre h2, .bande-sombre h1{color:#fff} .bande-sombre .quoi{color:rgba(255,255,255,.70)} .bande-sombre .surtitre{color:#fff} .bande-sombre .surtitre::after{background:rgba(255,255,255,.22)} .bande-sombre .institut{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)} .bande-sombre .institut h3{color:#fff} .bande-sombre .institut .ech{color:rgba(255,255,255,.52)} .bande-sombre .barres li{color:rgba(255,255,255,.88)} .bande-sombre .barres .track{background:rgba(255,255,255,.13)} .bande-sombre .prudence{background:rgba(255,255,255,.07);color:rgba(255,255,255,.78)} .bande-sombre .prudence b{color:#fff} .bande-sombre .badge.chiffre{color:#fff;background:var(--cl-bleu)} .bande-sombre .badge.annonce{color:#10162F;background:var(--cl-blanc)} /* ============ questions fréquentes ============ */ .faq{padding:52px 0 0}.faq h2, .faq h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 20px;letter-spacing:-.02em} .faq dl{margin:0;display:flex;flex-direction:column;gap:2px} .faq dt{ font-size:17.5px;font-weight:700;line-height:1.35;padding:16px 0 0; border-top:1px solid var(--rule); } .faq dd{margin:7px 0 16px;font-size:16px;color:var(--ink-2);line-height:1.55;max-width:72ch} .faq dd b{color:var(--ink)} /* ============ le tricolore, élément structurant ============ */ /* Un seul gradient, réutilisé partout. Le blanc est un jeton : sur fond clair il est légèrement teinté, sinon la bande du milieu disparaît. */ .tricolore{ display:block;height:5px;border-radius:0;width:96px;overflow:visible; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } .tricolore i{display:none} .tricolore.pleine{width:100%;height:4px} /* sous la barre du haut, sur toute la largeur */ .tri-bandeau{ height:5px;width:100%; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } /* au pied de la photo du hero */ .hero-image::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:6px; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } /* le pavé du titre : liseré tricolore vertical au lieu du rouge seul */ .hero-pave{ border-left:0; background-image:linear-gradient(180deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); background-size:6px 100%; background-repeat:no-repeat; background-position:left top; padding-left:40px; } /* mini-drapeau devant chaque surtitre de section */ .surtitre::before{ content:"";width:22px;height:4px;flex:none;border-radius:1px; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } /* le décompte : filet tricolore en haut */ .decompte{border-left:0;border-top:5px solid transparent; border-image:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%) 1} /* les bandes de section : filet tricolore en tête */ .bande,.bande-sombre{position:relative} .bande::before,.bande-sombre::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } /* les trois compteurs du constat : bleu, blanc, rouge */ .compteurs li{position:relative} .compteurs li::before{content:"";position:absolute;top:0;left:0;right:0;height:4px} .compteurs .chiffre::before{background:var(--tri-bleu)} .compteurs .annonce::before{background:var(--tri-blanc);box-shadow:inset 0 -1px 0 var(--rule)} .compteurs .rien::before{background:var(--tri-rouge)} .compteurs .annonce .n{color:var(--ink-2)} .compteurs .rien .n{color:var(--tri-rouge)} /* ============ fiche candidat ============ */ .retour{ border:1px solid var(--rule);background:var(--card);color:var(--ink); font-family:inherit;font-size:14.5px;font-weight:600;padding:8px 16px; border-radius:var(--r);cursor:pointer;margin:24px 0 22px; } .retour:hover{border-color:var(--ui);color:var(--ui)} .retour:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .fiche{padding:0 0 30px} .fi-tete{display:flex;gap:20px;align-items:center;padding-bottom:22px; border-bottom:4px solid var(--c)} .fi-portrait{width:84px;height:84px;border-radius:var(--r);object-fit:cover;object-position:center top;flex:none; background:var(--rule-soft)}.fi-id h2, .fi-id h1{font-size:clamp(28px,5vw,42px);font-weight:700;letter-spacing:-.025em;margin:0 0 8px} .fi-id .logo{margin-top:0} .fi-bloc{padding:26px 0 0;border-bottom:1px solid var(--rule-soft)} .fi-bloc:last-of-type{border-bottom:0} .fi-bloc h3{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase; color:var(--ui);margin:0 0 14px} .fi-chiffre{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 12px} .fi-chiffre b{font-size:clamp(38px,8vw,58px);font-weight:700;line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--c)} .fi-chiffre span{font-size:15px;color:var(--ink-2)} .fi-note{font-size:14.5px;color:var(--ink-2);line-height:1.5;margin:12px 0 22px;max-width:74ch} .fi-note b{color:var(--ink)} .fi-vide{font-size:16px;color:var(--ink-3);font-style:italic;margin:0 0 22px} .fi-mesures{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px; counter-reset:m} .fi-mesures li{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:baseline; padding-bottom:12px;border-bottom:1px solid var(--rule-soft)} .fi-mesures li:last-child{border-bottom:0} .fi-sujet{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--ink-3);line-height:1.3} .fi-mesure{font-size:17px;font-weight:600;line-height:1.45} .fi-balance{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:4px} .fi-col{border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;background:var(--card)} .fi-col h4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; margin:0 0 12px;padding-bottom:9px;border-bottom:3px solid} .fi-col.pour h4{color:var(--cl-bleu);border-color:var(--cl-bleu)} .fi-col.contre h4{color:var(--cl-rouge);border-color:var(--cl-rouge)} .fi-col ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px} .fi-col li{font-size:15px;line-height:1.45;color:var(--ink-2)} .fi-manques{display:flex;flex-wrap:wrap;gap:6px;margin:0} .fi-manque{font-size:13.5px;font-weight:600;color:var(--cl-rouge); background:var(--cl-rouge-pale);border-radius:var(--r);padding:5px 11px} .fi-compteurs{margin-bottom:22px} .fi-ecrire{text-decoration:none} @media (max-width:720px){ .fi-tete{gap:14px} .fi-portrait{width:78px;height:78px} .fi-mesures li{grid-template-columns:1fr;gap:4px} .fi-balance{grid-template-columns:1fr} } /* en-tête de la matrice : à qui appartient chaque colonne */ .mat-entete{margin-bottom:7px;align-items:end} .mat-entete .mat-cases{gap:3px} .mat-qui{ flex:1;min-width:0;border:0;background:transparent;padding:0 0 6px;cursor:pointer; font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:4px; border-bottom:3px solid var(--c); } .mat-qui:hover .mat-tete-nom{color:var(--ui)} .mat-qui:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .mat-tete-photo{width:26px;height:26px;border-radius:3px;object-fit:cover;object-position:center top; background:var(--rule-soft);display:block} .mat-tete-nom{ font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-2); line-height:1.1;text-align:center;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;max-width:100%; } @media (max-width:720px){ .mat-tete-photo{width:22px;height:22px} .mat-tete-nom{font-size:9px} } /* raccourcis de la barre d'outils */ .raccourci{ font-size:13.5px;font-weight:600;color:var(--ui);text-decoration:none; border:1px solid var(--rule);border-radius:99px;padding:6px 14px; background:var(--card);white-space:nowrap; } .raccourci:hover{border-color:var(--ui)} .raccourci:focus-visible{outline:2px solid var(--ui);outline-offset:2px} /* le choix des deux candidats, hors du tiroir */ .duel-choix{display:block;margin:13px 0 0} .duel-choix[hidden]{display:none} .duel-choix label{ font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3); } .duel-choix select{ font-family:inherit;font-size:15px;font-weight:600;color:var(--ink); background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:8px 12px;max-width:230px;cursor:pointer; } .duel-choix select:focus-visible{outline:2px solid var(--ui);outline-offset:1px} .duel-vs{font-size:14px;font-weight:700;color:var(--ui);text-transform:uppercase;letter-spacing:.08em} @media (max-width:720px){.duel-choix select{max-width:100%;flex:1}} /* panneau de filtres, replié par défaut : la barre collante reste courte */ .panneau{padding:13px 0 2px;border-top:1px solid var(--rule-soft);margin-top:11px} .panneau[hidden]{display:none} .filtre-btn{cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px} .filtre-btn .fl{transition:transform .18s;font-size:11px} .filtre-btn[aria-expanded="true"]{background:var(--ui);color:#fff;border-color:var(--ui)} .filtre-btn[aria-expanded="true"] .fl{transform:rotate(180deg)} /* sondages : les deux tours */ .sond-tour{ font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; margin:26px 0 14px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.16); } .duel2{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); border-radius:var(--r);padding:14px 17px} .d2-noms{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;margin-bottom:10px} .d2-g, .d2-d{display:flex;align-items:center;gap:9px;min-width:0} .d2-d{flex-direction:row-reverse;text-align:right} .d2-visage{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 16%; flex:none;border:1.5px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08)} .d2-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .d2-d .d2-txt{align-items:flex-end} .d2-txt b{font-weight:650;font-size:14px;line-height:1.15;white-space:nowrap} .d2-logo{display:flex;align-items:center;height:15px} .d2-d .d2-logo{justify-content:flex-end} /* les logos sont des marques sombres : sur fond bleu nuit il faut les eclaircir */ .d2-logo img{height:15px;width:auto;max-width:88px;object-fit:contain; filter:brightness(0) invert(1);opacity:.72} .d2-logo.texte{font-size:11px;color:rgba(255,255,255,.55);height:auto;white-space:nowrap} .d2-noms em{font-style:normal;font-weight:700;font-size:19px;font-variant-numeric:tabular-nums; letter-spacing:-.02em;flex:none} .d2-barre{display:flex;height:14px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.13)} .d2-barre i{display:block;height:14px} .d2-src{margin:8px 0 0;font-size:12.5px;color:rgba(255,255,255,.52)} .d2-note{margin:4px 0 0;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.45} /* ============ les primaires de la gauche ============ */ .primaires{padding:56px 0 0}.primaires h2, .primaires h1{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700; font-size:clamp(26px,4.5vw,38px);margin:0 0 6px;letter-spacing:-.02em} .primaires .quoi{font-size:17px;color:var(--ink-2);margin:0 0 22px;max-width:70ch} .pr-carte{background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:22px 24px;margin:0 0 18px} .pr-carte header{display:flex;justify-content:space-between;align-items:flex-start; gap:14px;flex-wrap:wrap;margin-bottom:2px} .pr-carte h3{font-size:21px;font-weight:700;margin:0;letter-spacing:-.01em} .pr-sous{margin:2px 0 0;font-size:14px;color:var(--ink-2)} .pr-etat{flex:none;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--bleu);background:var(--bleu-pale);border-radius:99px;padding:7px 13px;white-space:nowrap} .pr-etat.gagne{color:#fff;background:var(--cl-bleu)} .pr-partis{margin:8px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.03em;text-transform:uppercase} .pr-attente{margin:16px 0 4px;padding:13px 16px;background:var(--rule-soft);border-radius:var(--r); font-size:14.5px;color:var(--ink-2)} .pr-attente b{color:var(--ink)} .pr-gagnant{display:flex;align-items:center;gap:16px;margin:16px 0 4px;padding:16px 18px; background:var(--bleu-pale);border-radius:var(--r)} .pr-visage-g{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 16%;flex:none} .pr-gagnant span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3)} .pr-gagnant b{display:block;font-size:22px;letter-spacing:-.01em} .pr-gagnant a{font-size:13px} .pr-h{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin:22px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--rule-soft)} .pr-cal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .pr-ev{display:grid;grid-template-columns:150px 1fr;gap:14px;font-size:14.5px} .pr-ev.passe{opacity:.55} .pr-date{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13.5px;padding-top:1px} .pr-ev h4{margin:0;font-size:15px;font-weight:700} .pr-ev p{margin:3px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.5} .pr-ev .ev-src{font-size:12px} .pr-cands{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px} .pr-cands li{display:grid;grid-template-columns:44px 1fr;grid-auto-rows:min-content; column-gap:11px;align-items:center;background:var(--card-2);border:1px solid var(--rule-soft); border-radius:var(--r);padding:11px 13px} .pr-visage{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 16%; grid-row:1 / span 3;background:var(--rule-soft)} .pr-vide{display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink-3)} .pr-cands b{font-size:14px;line-height:1.2} .pr-cands span{font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em} .pr-cands em{font-style:normal;font-size:11.5px;color:var(--ink-2);margin-top:2px} .pr-retraits{margin:10px 0 0;font-size:12.5px;color:var(--ink-3);font-style:italic} .pr-rien{margin:0;font-size:14px;color:var(--ink-2);background:var(--rule-soft); border-radius:var(--r);padding:11px 14px} .pr-res{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14.5px} .pr-vote{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:78ch} .pr-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-3);font-style:italic} /* Les pages « candidat x sujet » (propose--.html) : une position, son detail, sa source, et le chemin vers les autres. Voir pages_candidat_sujet.py */ .cs-main{max-width:760px;margin:0 auto;padding:26px 0 0} .cs-fil{margin:0 0 14px;font-size:12.5px;color:var(--ink-3)} .cs-fil a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)} .cs-titre{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif; font-size:clamp(24px,4vw,33px);line-height:1.15;font-weight:800; letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);text-wrap:balance} .cs-qui{margin:0 0 20px;display:flex;flex-wrap:wrap;align-items:center;gap:9px; font-size:14px;color:var(--ink-3);padding-bottom:16px; border-bottom:1px solid var(--rule)} .cs-qui a{font-weight:700;font-size:15px;color:var(--ink);text-decoration:none; border-bottom:2px solid var(--cl-bleu)} .cs-etat{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; border-radius:99px;padding:3px 9px} .cs-etat-chiffre{color:#fff;background:var(--cl-bleu)} .cs-etat-annonce{color:var(--ink-2);background:var(--rule-soft)} .cs-resume{margin:0 0 8px;font-size:19px;line-height:1.5;color:var(--ink); font-weight:500;text-wrap:pretty} .cs-h3{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-size:12.5px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); margin:30px 0 10px} .cs-mesures{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .cs-mesures li{position:relative;padding:11px 14px 11px 34px;background:var(--card-2); border:1px solid var(--rule-soft);border-radius:var(--r);font-size:15px;line-height:1.5} .cs-mesures li::before{content:"";position:absolute;left:15px;top:18px;width:7px;height:7px; border-radius:50%;background:var(--cl-bleu)} .cs-src{margin:0;font-size:14px;padding:12px 14px;background:var(--card-2); border:1px solid var(--rule-soft);border-radius:var(--r)} .cs-src a{color:var(--ink);font-weight:600;text-decoration:none; border-bottom:1px solid var(--cl-bleu)} .cs-src span{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)} .cs-note{margin:10px 0 0;font-size:13px;color:var(--ink-3);line-height:1.5} .cs-note a{color:var(--ink-2)} .cs-quoi{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .cs-vous{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .cs-autres{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px; background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:var(--r); overflow:hidden} .cs-autres li{background:var(--card);padding:10px 14px} .cs-autres a{display:block;font-weight:700;font-size:14.5px;color:var(--ink); text-decoration:none} .cs-autres a:hover{color:var(--cl-bleu)} .cs-autres span{display:block;margin-top:2px;font-size:13px;color:var(--ink-3); line-height:1.45} .cs-liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px} .cs-liens a{display:inline-block;font-size:13.5px;font-weight:600;color:var(--ink-2); text-decoration:none;padding:5px 11px;background:var(--card-2); border:1px solid var(--rule-soft);border-radius:99px} .cs-liens a:hover{color:var(--cl-bleu);border-color:var(--cl-bleu)} .cs-main abbr{text-decoration:none;border-bottom:1px dotted var(--ink-3);cursor:help} /* Le chemin vers les pages candidat x sujet, pose sur les fiches candidat et les pages sujet. Discret : c'est une aide a la navigation, pas le contenu. */ .cs-vers{margin:22px 0 0;padding:16px 18px;background:var(--card-2); border:1px solid var(--rule-soft);border-radius:var(--r)} .cs-vers-t{margin:0 0 9px;font-size:11.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3)} .cs-vers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px} .cs-vers a{display:inline-block;font-size:13.5px;font-weight:600;color:var(--ink-2); text-decoration:none;padding:5px 11px;background:var(--card); border:1px solid var(--rule);border-radius:99px} .cs-vers a:hover{color:var(--cl-bleu);border-color:var(--cl-bleu)} .cs-vers p{margin:9px 0 0;font-size:12.5px;color:var(--ink-3)} @media (max-width:560px){ .cs-main{padding-top:18px} .cs-resume{font-size:17px} } /* Le journal des primaires : fil « Ce qui a change », pastille « Nouveau » sur une vignette de candidat, alerte d'accueil. Voir _primaires_journal.py */ .pj-fil{margin:0 0 26px} .pj-titre{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-size:12.5px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); margin:0 0 10px} .pj-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pj-item{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:11px 14px; background:var(--card-2);border:1px solid var(--rule-soft);border-radius:var(--r)} .pj-item.neuf{border-color:var(--cl-bleu);background:var(--card)} .pj-item .pj-date{font-weight:700;font-variant-numeric:tabular-nums;font-size:13.5px; color:var(--ink-2);padding-top:1px} .pj-tete{margin:0 0 3px;display:flex;flex-wrap:wrap;align-items:center;gap:7px} .pj-type{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-2);background:var(--rule-soft);border-radius:99px;padding:2px 8px} .pj-quelle{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em} .pj-neuf{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#fff;background:var(--cl-bleu);border-radius:99px;padding:2px 8px} .pj-texte{margin:0;font-size:14.5px;line-height:1.5} .pj-fil .ev-src{margin:3px 0 0;font-size:12px} .pj-vieux{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);font-style:italic} .pr-cands em .pj-neuf{font-style:normal;color:#fff;background:var(--cl-bleu); text-transform:uppercase;letter-spacing:.08em;font-size:10px;padding:1px 7px; border-radius:99px;margin-right:5px} /* « Le dernier sondage » en tete d'accueil : window.SONDAGES.derniers[0], la ligne du haut de la table. Voir _sondage_accueil.py */ .dsond{margin:0 0 26px;padding:0;border:1px solid var(--rule); border-left:4px solid var(--cl-bleu);border-radius:var(--r); background:var(--card);overflow:hidden} .ds-label{margin:0;padding:13px 18px 0;font-size:11.5px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;color:var(--cl-bleu)} .ds-qui-quand{margin:3px 0 0;padding:0 18px;font-size:14px;color:var(--ink-3)} .ds-qui-quand b{color:var(--ink);font-weight:700} .ds-liste{list-style:none;margin:11px 0 0;padding:0} .ds-item{display:grid; grid-template-columns:34px minmax(96px,1.05fr) minmax(0,1.5fr) 64px; gap:11px;align-items:center;padding:7px 18px; border-top:1px solid var(--rule-soft)} .ds-visage{width:34px;height:34px;border-radius:var(--r);object-fit:cover; border:1px solid var(--rule);background:var(--card-2); box-shadow:inset 0 0 0 2px var(--c,var(--ink-3))} .ds-nom{display:block;font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif; font-size:14.5px;font-weight:700;line-height:1.2;color:var(--ink)} .ds-parti{display:block;margin-top:1px;font-size:11.5px;line-height:1.25; color:var(--ink-3)} .ds-track{height:9px;border-radius:99px;background:var(--card-2); border:1px solid var(--rule-soft);overflow:hidden} .ds-bar{display:block;height:100%;background:var(--c,var(--ink-3)); border-radius:99px} .ds-n{text-align:right;font-size:15px;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.15} .ds-evo{display:block;font-style:normal;font-weight:600;font-size:10.5px; line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums} .ds-evo.hausse{color:#15803D} .ds-evo.baisse{color:#B91C1C} .ds-evo.stable{color:var(--ink-3)} .ds-note{margin:0;padding:11px 18px 0;font-size:12.5px;line-height:1.5; color:var(--ink-3);border-top:1px solid var(--rule-soft)} .ds-lien{margin:0;padding:9px 18px 14px;font-size:13.5px} .ds-lien a{color:var(--ink);font-weight:700;text-decoration:none; border-bottom:2px solid var(--cl-bleu)} @media (max-width:560px){ .ds-item{grid-template-columns:26px minmax(74px,1fr) minmax(0,1.15fr) 50px; gap:8px;padding:7px 14px} .ds-visage{width:26px;height:26px} .ds-nom{font-size:13px} .ds-parti{display:none} .ds-n{font-size:13.5px} .ds-label,.ds-qui-quand,.ds-note{padding-left:14px;padding-right:14px} .ds-lien{padding:9px 14px 13px} } /* Les nouvelles de l'accueil (config/actualites.json -> window.NEWS) : un fait de campagne acquis, avec le portrait du candidat. Voir _news_accueil.py */ .nw{margin:0 0 26px;padding:0;border:1px solid var(--rule);border-left:4px solid var(--cl-rouge); border-radius:var(--r);background:var(--card);overflow:hidden} .nw-label{margin:0;padding:11px 18px 0;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--cl-rouge)} .nw-liste{list-style:none;margin:0;padding:0} .nw-item{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:13px 18px 16px; align-items:start} .nw-item + .nw-item{border-top:1px solid var(--rule-soft)} .nw-visage{width:84px;height:84px;border-radius:var(--r);object-fit:cover; border:1px solid var(--rule);background:var(--card-2)} .nw-titre{margin:0 0 5px;font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif; font-size:19px;line-height:1.25;font-weight:700;color:var(--ink)} .nw-texte{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .nw-pied{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)} .nw-pied .nw-date{font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums} .nw-pied a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)} .nw-pied a:hover{border-bottom-color:var(--cl-rouge)} @media (max-width:560px){ .nw-item{grid-template-columns:60px 1fr;gap:12px;padding:12px 14px 14px} .nw-visage{width:60px;height:60px} .nw-titre{font-size:17px} .nw-label{padding:10px 14px 0} } .pj-alerte{margin:0 0 26px;padding:15px 18px;background:var(--card); border:1px solid var(--cl-bleu);border-left-width:4px;border-radius:var(--r)} .pj-a-label{margin:0 0 7px;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--cl-bleu)} .pj-a-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .pj-a-liste li{font-size:14.5px;line-height:1.5} .pj-a-liste .pj-date{font-weight:700;color:var(--ink-2)} .pj-a-liste a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)} .pj-a-lien{margin:9px 0 0;font-size:13.5px} .pj-a-lien a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--cl-bleu)} @media (max-width:560px){ .pj-item{grid-template-columns:1fr;gap:2px} } @media (max-width:560px){ .pr-carte{padding:16px} .pr-ev{grid-template-columns:1fr;gap:2px} .pr-cands{grid-template-columns:1fr} } /* en-tete de carte institut : logo officiel sur pastille blanche, puis panel et methode en petit italique */ .sond-periode{font-weight:600;letter-spacing:.02em;text-transform:none; color:rgba(255,255,255,.55);white-space:nowrap} .inst-tete{display:flex;align-items:center;gap:10px;margin:0 0 3px} .inst-logo{background:#fff;border-radius:4px;padding:4px 8px;display:inline-flex; align-items:center;flex:none} .inst-logo img{height:20px;max-width:120px;width:auto;object-fit:contain;display:block} .inst-methode{font-style:italic;font-size:11.5px;color:rgba(255,255,255,.5); margin:-8px 0 14px;line-height:1.4} /* evolution par rapport au sondage precedent du meme institut */ .barres .n .evo{display:block;font-style:normal;font-weight:600;font-size:10.5px; line-height:1.25;white-space:nowrap;font-variant-numeric:tabular-nums} .evo.hausse{color:#7FD6A4} .evo.baisse{color:#FFA08F} .evo.stable{color:rgba(255,255,255,.42)} .evo-note{margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.62);line-height:1.5;max-width:72ch} .evo-note b{color:rgba(255,255,255,.85)} /* la courbe : un point par sondage, une ligne par candidat */ .courbe-carte{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); border-radius:var(--r);padding:16px 14px 12px} #courbe{display:block;width:100%;height:auto} #courbe .grille line{stroke:rgba(255,255,255,.10);stroke-width:1} #courbe .grille text{fill:rgba(255,255,255,.45);font-size:11px} #courbe .axe-x text{fill:rgba(255,255,255,.5);font-size:11px} #courbe .axe-x line{stroke:rgba(255,255,255,.18);stroke-width:1} #courbe .cl path{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round} #courbe .cl circle{stroke:var(--masthead);stroke-width:1.25} #courbe .cl text{font-size:12px;font-weight:700} #courbe .cl text tspan.v{font-weight:400;opacity:.8} #courbe .cl{transition:opacity .15s ease} #courbe.focus .cl{opacity:.16} #courbe.focus .cl.actif{opacity:1} #courbe .cl.off{display:none} .courbe-leg{list-style:none;display:flex;flex-wrap:wrap;gap:6px 8px;margin:12px 0 0;padding:0} .courbe-leg button{display:inline-flex;align-items:center;gap:7px;cursor:pointer; font:600 12.5px/1 inherit;font-family:inherit;color:rgba(255,255,255,.85); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); border-radius:99px;padding:7px 12px} .courbe-leg button .pt{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none} .courbe-leg button[aria-pressed="false"]{opacity:.38} .courbe-leg button[aria-pressed="false"] .pt{background:rgba(255,255,255,.3)} .courbe-note{margin:12px 2px 0;font-size:12.5px;color:rgba(255,255,255,.55);line-height:1.5} /* mots-clés d'une proposition */ .mots-cles{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 0} .mc{ font-size:12px;font-weight:600;color:var(--ink-2);background:var(--rule-soft); border-radius:3px;padding:3px 8px;white-space:nowrap; } /* sujet phare */ .vign-phare{display:flex;flex-direction:column;gap:1px;margin:0;padding-left:16px; position:relative} .vign-phare::before{content:"";position:absolute;left:0;top:5px;width:8px;height:8px; border-radius:2px;background:var(--c)} .vign-phare span{font-size:10.5px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3)} .vign-phare b{font-size:14.5px;font-weight:700} .fi-phare{font-size:clamp(22px,4vw,30px);font-weight:700;letter-spacing:-.02em; margin:0 0 6px;color:var(--c)} /* présence médiatique */ .presence{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:13px;color:var(--ink-3)} .presence b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums} .pr-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:6px} .pr-case{border:1px solid var(--rule);border-radius:var(--r);padding:15px 17px;background:var(--card)} .pr-n{display:block;font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em; font-variant-numeric:tabular-nums;color:var(--c)} .pr-l{display:block;font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.4} .pr-l i{color:var(--ink-3);font-style:normal;font-size:12.5px} @media (max-width:720px){.pr-grille{grid-template-columns:1fr}} /* ============================================================ Telephone. Trois principes : - aucune colonne fixe : tout repasse en pleine largeur ; - toute cible tactile fait au moins 44 px de haut ; - la matrice reste lisible en reduisant le libelle, pas les cases. ============================================================ */ @media (max-width:560px){ /* le comparatif : le candidat passe au-dessus de sa proposition */ .ligne{grid-template-columns:1fr} .qui-col{ flex-direction:row;align-items:center;gap:10px; padding:12px 14px;border-right:0;border-bottom:1px solid var(--rule-soft); } .qui-col .bloc{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .qui-col .drapeau{display:none} .qui-col .logo{margin-top:0;height:17px} .qui-col .logo img{height:17px;max-width:96px} .idee{padding:14px} .resume{font-size:16.5px} /* confort tactile */ .mode,.raccourci,.person,.tag,.plus,.ecrire,.retour,.vign-voir,.mini{ min-height:44px;display:inline-flex;align-items:center; } .mode,.raccourci{padding-inline:16px} .card-actions{gap:10px 14px} /* la matrice : libellé plus court, cases plus hautes */ .mat-ligne{grid-template-columns:96px 1fr;gap:7px} .mat-nom{font-size:11px;line-height:1.15} .mat-case{height:26px} .mat-qui{min-height:52px;padding-bottom:5px} .mat-tete-photo{width:22px;height:22px} .mat-tete-nom{font-size:8.5px;letter-spacing:-.01em} /* le hero */ .hero-fond{max-height:44vh} .hero-pave{margin-top:-56px;padding:18px 16px 20px} .hero-in{padding-inline:15px} h1{font-size:clamp(29px,8vw,38px)} .chapo{font-size:17px} /* le décompte */ .dec-chiffres{gap:8px 14px} .dec-chiffres li{min-width:0;flex:1} .dec-chiffres b{font-size:clamp(24px,7vw,32px)} .dec-chiffres span{font-size:9.5px;letter-spacing:.08em} /* la vignette */ .vign-img{width:54px;height:54px} .vign-nom{font-size:16px} .vign-res{font-size:14.5px} /* la fiche */ .fi-tete{flex-direction:row;gap:12px} .fi-portrait{width:66px;height:66px} .fi-chiffre b{font-size:38px} .fi-manque{font-size:12.5px} /* les sondages */ .instituts{grid-template-columns:1fr} .fil-grid{grid-template-columns:1fr} .duel2{padding:12px 14px} .d2-noms{flex-direction:column;gap:5px;align-items:flex-start} .d2-noms .d2-d{flex-direction:row-reverse} /* divers */ .masthead-in{gap:8px;padding:8px 15px} .mh-titre{font-size:13.5px;gap:5px} .mh-picto{height:19px;width:19px} /* flex : l'espace ecrit dans le source est mange comme blanc de bord. A gap:0, on lisait « J-229avant le premier tour ». */ .mh-date{gap:6px} .mh-date::before{display:none} .faq dt{font-size:16.5px} .faq dd{font-size:15.5px}.constat h2, .vignettes h2, .annuaire h2, .sondages h2, .faq h2, .fil h2, .constat h1, .vignettes h1, .annuaire h1, .sondages h1, .faq h1, .fil h1{ font-size:clamp(23px,6.5vw,30px); } .panneau{max-height:52vh;overflow-y:auto} .barres li{grid-template-columns:28px max-content minmax(44px,1fr) 42px;gap:8px} .so-visage{width:28px;height:28px} .so-qui b{font-size:12.5px} .so-logo img{height:12px;max-width:70px} .d2-visage{width:34px;height:34px} .d2-noms em{font-size:17px} .d2-logo img{height:13px;max-width:70px} } /* très petits écrans : la matrice devient illisible à 8 colonnes */ @media (max-width:380px){ .mat-ligne{grid-template-columns:84px 1fr;gap:5px} .mat-cases{gap:2px} .mat-tete-nom{display:none} /* sous 380 px, la barre passe sous la ligne : le nom garde toute la largeur et n'est plus coupe, le pourcentage reste sur une seule ligne */ .barres li{grid-template-columns:26px minmax(0,1fr) auto;gap:8px 9px} .so-visage{width:26px;height:26px} .so-qui{align-items:flex-start;text-align:left} .so-qui b{white-space:normal;overflow-wrap:anywhere;font-size:13px} .so-logo{display:none} .so-logo + .so-parti{display:block} .so-parti{font-size:10px;white-space:normal} .barres .n{white-space:nowrap;font-size:13px} .barres .track{grid-column:1 / -1;order:9;margin-top:1px} .d2-noms em{font-size:15px} } /* Enfants de grille : sans min-width:0, une cellule refuse de descendre sous la largeur de son contenu et fait deborder toute la grille. Mesure a 390 px : .instituts 452>302, .matrice 428>346, .fil-grid 364>346. */ .instituts > *, .fil-grid > *, .pr-grille > *, .fi-balance > *, .compteurs > *, .grille-v > *, .gens > *{min-width:0} /* Huit vignettes d'abord, les vingt-deux autres au clic. La classe n'est posee que par JavaScript : sans lui, et pour un moteur, les trente restent visibles. */ .grille-v.replie > li:nth-child(n+9){display:none} .v-plus{display:none;margin:18px auto 0;padding:12px 22px;font:inherit; font-size:15px;font-weight:700;color:var(--ui);background:var(--card); border:1px solid var(--rule);border-radius:var(--r);cursor:pointer} .v-plus:hover{border-color:var(--ui)} .v-plus:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .grille-v.replie + .v-plus{display:block} .barres .so-qui, .volume li > span:first-child{min-width:0} .mat-cases{min-width:0} .mat-qui{min-width:0;overflow:hidden} .mat-nom{min-width:0;overflow-wrap:anywhere} .institut, .fil-col, .duel2{min-width:0;overflow-wrap:anywhere} .d2-noms span{min-width:0} /* ============ test à l'aveugle ============ */ /* ============ calculette d'impot ============ */ .calc{margin:26px 0 0;border:1px solid var(--rule);border-radius:6px;overflow:hidden; background:var(--carte)} .calc-onglets{display:flex;border-bottom:1px solid var(--rule);background:var(--fond-2)} .calc-ong{flex:1;min-height:46px;padding:12px 14px;border:0;background:none;cursor:pointer; font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:-.005em; border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .calc-ong:hover{color:var(--ink-1)} .calc-ong.actif{color:var(--ui);border-bottom-color:var(--ui);background:var(--carte)} .calc-ong:focus-visible{outline:2px solid var(--ui);outline-offset:-3px} .calc-vue{padding:20px 18px} .calc-vue .pf-form{margin:0 0 18px} .calc-vide{margin:0;color:var(--ink-3);font-size:15px;line-height:1.5} /* le socle : ce que vous payez aujourd'hui */ .calc-socle{border:1px solid var(--rule);border-radius:5px;padding:14px 15px; background:var(--fond-2);margin:0 0 18px} .calc-socle h4{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3)} .calc-detail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .calc-detail li{display:flex;justify-content:space-between;gap:12px;font-size:14.5px; color:var(--ink-2)} .calc-detail li b{font-variant-numeric:tabular-nums;color:var(--ink-1);font-weight:600} .calc-detail li.total{border-top:1px solid var(--rule);padding-top:7px;margin-top:2px; font-weight:700;color:var(--ink-1);font-size:16px} /* une ligne par candidat */ .calc-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .calc-l{display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:start; border:1px solid var(--rule);border-left:3px solid var(--c,var(--rule)); border-radius:5px;padding:12px 13px} .calc-l.muet{border-left-color:var(--rule);background:var(--fond-2)} .calc-l .portrait{width:34px;height:34px;border-radius:50%;object-fit:cover; object-position:50% 16%;background:var(--rule-soft)} .calc-corps{min-width:0} .calc-nom{font-weight:650;font-size:14.5px;line-height:1.2} .calc-parti{display:block;font-size:11px;color:var(--ink-3);text-transform:uppercase; letter-spacing:.03em;margin-top:1px} .calc-mesure{margin:6px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-1)} .calc-hypo{margin:5px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3)} .calc-chiffre{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .calc-montant{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em; line-height:1.1} .calc-ecart{display:block;font-size:12.5px;font-weight:600;margin-top:3px} .calc-ecart.baisse{color:var(--vert)} .calc-ecart.hausse{color:var(--rouge)} .calc-ecart.egal{color:var(--ink-3);font-weight:500} .calc-rien{font-size:13px;color:var(--ink-3);font-style:italic;font-weight:500} .calc-avert{margin:18px 0 0;padding:12px 14px;border-left:3px solid var(--rule); font-size:13px;line-height:1.55;color:var(--ink-3)} .calc-avert b{color:var(--ink-2);font-weight:650} @media (max-width:560px){ .calc-vue{padding:16px 13px} .calc-ong{font-size:13px;padding:11px 8px} .calc-l{grid-template-columns:30px 1fr;gap:9px} .calc-l .portrait{width:30px;height:30px} .calc-chiffre{grid-column:1 / -1;text-align:left;margin-top:6px; border-top:1px solid var(--rule-soft);padding-top:7px} .calc-montant{font-size:17px} .calc-ecart{display:inline;margin-left:8px} }/* ============================================================ L'axe de largeur, comme au Palais. Aiglon se decline en cinq chasses et l'Elysee s'en sert pour hierarchiser plutot que d'empiler les familles. Archivo permet la meme chose : ici les titres s'elargissent, les surtitres s'ecartent, les chiffres se resserrent. ============================================================ */ h1, h2, h3, .mh-titre, .calc-montant, .d2-noms em, h1{ font-stretch:112%; }h1, h2, h1{ font-stretch:118%; } /* les surtitres et etiquettes : chasse large, capitales, interlettrage ouvert */ .surtitre,.kicker,.calc-socle h4,.so-parti,.calc-parti,.premier-tour{ font-stretch:112%; } /* les chiffres alignes se resserrent : plus de donnees a largeur egale, et des colonnes qui tombent droit */ .barres .n,.calc-detail li b,.mat-cases,.institut,.compteurs b{ font-stretch:94%; font-variant-numeric:tabular-nums; } /* ============ le duel ============ */ .duel-slots{display:flex;align-items:stretch;gap:12px;margin:0 0 14px} .duel-slot{ flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left; border:2px solid var(--rule);border-radius:9px;padding:11px 13px;cursor:pointer; background:var(--card);font:inherit;color:inherit;min-height:66px; transition:border-color .15s,background .15s; } .duel-slot:hover{border-color:var(--ui)} .duel-slot:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .duel-slot[aria-expanded="true"]{border-color:var(--ui);border-style:dashed; background:var(--ui-soft)} .duel-slot .portrait{width:48px;height:48px;border-radius:50%;object-fit:cover; object-position:50% 16%;flex:none;border:2px solid var(--c,var(--rule)); background:var(--rule-soft)} .ds-bloc{display:flex;flex-direction:column;gap:3px;min-width:0} .ds-role{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);font-stretch:112%} .ds-nom{font-weight:650;font-size:15px;line-height:1.15;font-stretch:106%} .ds-logo{display:flex;align-items:center;height:15px} .ds-logo img{height:15px;width:auto;max-width:86px;object-fit:contain} .ds-logo.texte{font-size:11px;color:var(--ink-3);height:auto;text-transform:uppercase; letter-spacing:.03em} .duel-vs{display:flex;align-items:center;font-size:12px;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:none; font-stretch:112%} .duel-picker{border:1px solid var(--rule);border-radius:9px;padding:13px; background:var(--card-2);margin:0 0 14px} .duel-picker-t{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);font-stretch:112%} .duel-grille{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px} .duel-grille button{ width:100%;display:flex;align-items:center;gap:9px;border:1px solid var(--rule); border-radius:7px;padding:8px 9px;background:var(--card);cursor:pointer; font:inherit;color:inherit;text-align:left;min-height:44px; transition:border-color .15s; } .duel-grille button:hover{border-color:var(--ui)} .duel-grille button[disabled]{opacity:.42;cursor:not-allowed} .duel-grille img,.duel-grille .vide{width:30px;height:30px;border-radius:50%; object-fit:cover;object-position:50% 16%;flex:none;background:var(--rule-soft)} .duel-grille span{font-size:13px;font-weight:600;line-height:1.15;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* la synthese : comparabilite, pas concordance */ .duel-synthese{border:1px solid var(--rule);border-left:4px solid var(--cmp); border-radius:8px;padding:15px 17px;margin:0 0 16px;background:var(--card)} .duel-badge{display:inline-flex;align-items:center;gap:8px;border-radius:99px; padding:5px 13px;font-size:12.5px;font-weight:700;letter-spacing:.02em; background:var(--cmp-fond);color:var(--cmp);border:1px solid var(--cmp-bord)} .duel-badge b{font-variant-numeric:tabular-nums;font-stretch:106%} .duel-synthese p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)} .duel-compte{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;padding:0; list-style:none} .duel-compte li{font-size:13px;color:var(--ink-2);display:flex;align-items:baseline;gap:7px} .duel-compte b{font-size:17px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums; font-stretch:106%} /* cinq crans, du vert au rouge, comme un feu */ .cmp-0{--cmp:#15803D;--cmp-fond:#DCFCE7;--cmp-bord:#BBF7D0} .cmp-1{--cmp:#4D7C0F;--cmp-fond:#F1FBE2;--cmp-bord:#D9F99D} .cmp-2{--cmp:#475569;--cmp-fond:#EEF1F7;--cmp-bord:#D8DEEA} .cmp-3{--cmp:#A03A55;--cmp-fond:#FBECF0;--cmp-bord:#F2CFD9} .cmp-4{--cmp:#B91C1C;--cmp-fond:#FEE6E6;--cmp-bord:#FECACA} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cmp-0{--cmp:#6EE7A8;--cmp-fond:#0F2A1C;--cmp-bord:#1C4433} :root:not([data-theme="light"]) .cmp-1{--cmp:#A9DE5B;--cmp-fond:#1E2A10;--cmp-bord:#35461C} :root:not([data-theme="light"]) .cmp-2{--cmp:#A9B6CC;--cmp-fond:#1A2030;--cmp-bord:#2C3548} :root:not([data-theme="light"]) .cmp-3{--cmp:#E58AA4;--cmp-fond:#2A151C;--cmp-bord:#43222C} :root:not([data-theme="light"]) .cmp-4{--cmp:#F87171;--cmp-fond:#2E1315;--cmp-bord:#4A1F22} } :root[data-theme="dark"] .cmp-0{--cmp:#6EE7A8;--cmp-fond:#0F2A1C;--cmp-bord:#1C4433} :root[data-theme="dark"] .cmp-1{--cmp:#A9DE5B;--cmp-fond:#1E2A10;--cmp-bord:#35461C} :root[data-theme="dark"] .cmp-2{--cmp:#A9B6CC;--cmp-fond:#1A2030;--cmp-bord:#2C3548} :root[data-theme="dark"] .cmp-3{--cmp:#E58AA4;--cmp-fond:#2A151C;--cmp-bord:#43222C} :root[data-theme="dark"] .cmp-4{--cmp:#F87171;--cmp-fond:#2E1315;--cmp-bord:#4A1F22} } /* sujet par sujet : deux colonnes face a face */ .duel-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px} .duel-sujet{border:1px solid var(--rule);border-radius:8px;overflow:hidden; background:var(--card)} .duel-sujet.creux{background:var(--card-2)} .dsj-tete{display:flex;align-items:baseline;gap:10px;padding:10px 14px; border-bottom:1px solid var(--rule);background:var(--card-2)} .duel-sujet.creux .dsj-tete{background:transparent} .dsj-num{font-size:11px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums} .dsj-titre{font-weight:650;font-size:15px;font-stretch:106%} .dsj-etat{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--cmp);font-stretch:110%} .dsj-cols{display:grid;grid-template-columns:1fr 1fr} .dsj-col{padding:13px 14px;min-width:0} .dsj-col + .dsj-col{border-left:1px solid var(--rule)} .dsj-col.muet{background:var(--card-2)} .dsj-qui{display:flex;align-items:center;gap:7px;margin:0 0 7px} .dsj-qui img,.dsj-qui .vide{width:22px;height:22px;border-radius:50%;object-fit:cover; object-position:50% 16%;flex:none;background:var(--rule-soft)} .dsj-qui b{font-size:12.5px;font-weight:650} .dsj-prop{margin:0;font-size:14.5px;line-height:1.5} .dsj-rien{margin:0;font-size:14px;line-height:1.5;color:var(--ink-3)} @media (max-width:720px){ .duel-slots{flex-direction:column;gap:8px} .duel-vs{justify-content:center;padding:2px 0} .dsj-cols{grid-template-columns:1fr} .dsj-col + .dsj-col{border-left:0;border-top:1px solid var(--rule)} } /* ============================================================ Mobile : ce que l'audit a releve a 375 et 320 px. La structure tenait deja ; ce qui suit corrige les cibles tactiles, la lisibilite des petits caracteres et le plancher typographique. ============================================================ */ @media (max-width:720px){ /* Cibles autonomes : 44 px, la taille d'un doigt. Les liens du fil d'actualite faisaient 17 px de haut. */ .actu li, .fil-col li{margin:0} .actu li a, .fil-col li a{ display:flex;align-items:center;min-height:44px;padding:9px 0; line-height:1.35; } .actu li + li, .fil-col li + li{border-top:1px solid var(--rule-soft)} .mh-marque{min-height:40px;padding-block:7px} /* Liens de source dans le texte : on ne peut pas les gonfler sans defaire l'interligne. On elargit la zone sensible par en-dessous et par-dessus, sans deplacer une seule ligne. */ .prop a, .fi-note a, .quoi a, .hero-credit a, .src a{ position:relative; } .prop a::after, .fi-note a::after, .quoi a::after, .hero-credit a::after, .src a::after{ content:"";position:absolute;left:0;right:0;top:-11px;bottom:-11px; } /* Plancher typographique : rien sous 12 px. */ .surtitre,.kicker,.mh-date,.dec-tour,.hero-credit,.so-parti,.calc-parti, .mat-nom,.ds-role,.fi-note,.calc-hypo,.calc-avert{font-size:12px} .logo.texte,.so-logo.texte{font-size:12px} /* La barre collante mange deux fois de la hauteur sur un petit ecran : on resserre le bandeau, qui ne porte qu'un titre et un decompte. */ .masthead-in{min-height:0;padding-block:8px} } @media (max-width:380px){ /* A cette largeur, chaque pixel vertical compte. */ .actu li a, .fil-col li a{min-height:44px;padding:10px 0} } /* ============ l'annuaire des autres candidats ============ */ /* Deux colonnes, pas trois : a 272 px de fiche, la notice tombait a 192 px, soit 27 signes par ligne. On vise plutot 45 a 50. */ .gens{list-style:none;margin:0 0 26px;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:12px} .an-fiche{display:flex;gap:13px;align-items:flex-start;padding:14px; border:1px solid var(--rule);border-radius:8px;background:var(--card)} .an-photo,.an-mono{width:52px;height:52px;border-radius:50%;flex:none} .an-photo{object-fit:cover;object-position:50% 16%;background:var(--rule-soft); border:1px solid var(--rule)} .an-mono{display:flex;align-items:center;justify-content:center; background:var(--masthead);color:#fff;font-size:17px;font-weight:700; letter-spacing:.02em;font-stretch:108%} .an-corps{min-width:0} .an-nom{display:block;font-weight:650;font-size:15.5px;line-height:1.2; font-stretch:106%} .an-parti{display:block;font-size:11px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3);margin-top:3px;font-stretch:110%} .an-note{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)} @media (max-width:560px){ .gens{grid-template-columns:1fr} .an-photo,.an-mono{width:46px;height:46px} .an-mono{font-size:15px} } /* ============================================================ Mobile : echelle typographique resserree. Les tailles venaient du dessin desktop, simplement reduites par clamp ; sur un ecran de 375 px elles restaient trop grosses, chaque paragraphe occupait un ecran entier. On redescend d'environ un cran partout. ============================================================ */ @media (max-width:720px){ body{font-size:15.5px} h1{font-size:clamp(25px,6.6vw,32px)} .hero-pave h1{font-size:clamp(27px,7.4vw,36px)}.constat h2, .vignettes h2, .annuaire h2, .sondages h2, .faq h2, .fil h2, .test h2, .recherche h2, .angles h2, .profil h2, .falc h2, .constat h1, .vignettes h1, .annuaire h1, .sondages h1, .faq h1, .fil h1, .test h1, .recherche h1, .angles h1, .profil h1, .falc h1{ font-size:clamp(21px,5.4vw,26px); } h3{font-size:16px} .chapo{font-size:16.5px;line-height:1.5} .quoi{font-size:15.5px;line-height:1.5} .sujet .quoi,.constat .quoi,.vignettes .quoi,.annuaire .quoi{font-size:15px} .prop,.dsj-prop,.calc-mesure,.an-note,.vg-resume{font-size:14.5px} .t-prop{font-size:17px} .dec-chiffres b{font-size:clamp(22px,6.2vw,28px)} .dec-chiffres span{font-size:10px} .regle b{font-size:15px} .regle span{font-size:14px} } /* ============ retour en haut ============ */ .haut-page{ position:fixed;right:14px;bottom:16px;z-index:60; width:46px;height:46px;border-radius:50%; border:1px solid var(--rule);background:var(--card);color:var(--ink-2); cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 3px 14px rgba(16,22,47,.18); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .18s,transform .18s,color .15s,border-color .15s; } .haut-page.visible{opacity:1;transform:none;pointer-events:auto} .haut-page:hover{color:var(--ui);border-color:var(--ui)} .haut-page:focus-visible{outline:2px solid var(--ui);outline-offset:3px} .haut-page svg{width:19px;height:19px} @media (prefers-reduced-motion:reduce){ .haut-page{transition:opacity .18s} } @media (max-width:560px){ .haut-page{right:11px;bottom:12px;width:44px;height:44px} } /* ============ mentions légales ============ */ .legal{padding:52px 0 0}.legal h2, .legal h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px; letter-spacing:-.02em} .legal h3{font-size:17px;font-weight:700;margin:30px 0 10px;letter-spacing:-.01em} .lg-blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px;margin:22px 0 0} .lg-bloc{border:1px solid var(--rule);border-radius:8px;padding:16px 18px; background:var(--card)} .lg-bloc h3:first-child{margin-top:0} .lg-bloc dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 16px; font-size:14.5px} .lg-bloc dt{color:var(--ink-3);font-size:12.5px;font-weight:600; text-transform:uppercase;letter-spacing:.04em;align-self:baseline; font-stretch:110%} .lg-bloc dd{margin:0;color:var(--ink)} .lg-texte{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ink-2); max-width:66ch} .lg-texte strong{color:var(--ink)} @media (max-width:560px){ .lg-bloc dl{grid-template-columns:1fr;gap:2px 0} .lg-bloc dd{margin-bottom:8px} } /* ============ galerie des candidats ============ */ .galerie{padding:52px 0 0} .gal-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 18px} .gal-f{border:1px solid var(--rule);background:var(--card);color:var(--ink-2); border-radius:99px;padding:8px 15px;font:inherit;font-size:13.5px; font-weight:600;cursor:pointer;min-height:40px;transition:.15s} .gal-f:hover{border-color:var(--ui);color:var(--ink)} .gal-f.actif{background:var(--masthead);border-color:var(--masthead);color:#fff} .gal-f:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .gal-grille{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px} /* La carte, c'est la case : la bordure doit etre portee par le
  • , sinon les liens de reseaux, qui sont freres du bouton, flottent hors du cadre. */ .gal-case{ margin:0;display:flex;flex-direction:column;align-items:center; border:1px solid var(--rule);border-radius:10px;background:var(--card); padding:16px 10px 12px;transition:border-color .15s,box-shadow .15s,transform .15s; } .gal-case:hover{border-color:var(--c,var(--ui)); box-shadow:0 3px 14px rgba(16,22,47,.10);transform:translateY(-2px)} .gal-case:has(button[aria-pressed="true"]){border-color:var(--c,var(--ui)); box-shadow:inset 0 0 0 1px var(--c,var(--ui))} .gal-case button{ width:100%;flex:1;display:flex;flex-direction:column;align-items:center; justify-content:flex-start;gap:9px;border:0;background:none;padding:0; cursor:pointer;font:inherit;color:inherit; } .gal-case button:focus-visible{outline:2px solid var(--ui);outline-offset:3px; border-radius:6px} .gal-photo,.gal-mono{width:70px;height:70px;border-radius:50%;flex:none} .gal-photo{object-fit:cover;object-position:50% 16%;background:var(--rule-soft); border:2px solid var(--c,var(--rule))} .gal-mono{display:flex;align-items:center;justify-content:center; background:var(--masthead);color:#fff;font-size:22px;font-weight:700; font-stretch:108%} .gal-logo{display:flex;align-items:center;justify-content:center;height:17px} /* Comme sur la page des primaires : ces logos sont dessines pour du papier blanc, plusieurs sont en traits sombres et disparaissent sur le theme sombre. La plaque blanche les rend fideles sur les deux fonds. */ .gal-logo img{max-height:17px;max-width:88px;width:auto;object-fit:contain; background:#fff;border-radius:4px;padding:2px 5px} .gal-logo.texte{font-size:10px;color:var(--ink-3);text-transform:uppercase; letter-spacing:.04em;text-align:center;line-height:1.2;height:auto} .gal-nom{font-size:13px;font-weight:650;text-align:center;line-height:1.25} /* le panneau de detail */ .gal-detail:empty{display:none} .gal-detail{margin:18px 0 0;border:1px solid var(--rule); border-left:4px solid var(--c,var(--ui));border-radius:9px; padding:20px 22px;background:var(--card)} .gd-tete{display:flex;align-items:center;gap:15px;margin:0 0 14px} .gd-tete img,.gd-tete .gal-mono{width:64px;height:64px;border-radius:50%; object-fit:cover;object-position:50% 16%;flex:none;border:2px solid var(--c,var(--rule))} .gd-nom{font-size:21px;font-weight:700;line-height:1.15;font-stretch:106%} .gd-parti{display:block;font-size:12px;font-weight:600;letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3);margin-top:3px;font-stretch:110%} .gd-texte{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ink-2); max-width:70ch} .gd-chiffres{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 14px; padding:0;list-style:none} .gd-chiffres li{font-size:13.5px;color:var(--ink-2)} .gd-chiffres b{display:block;font-size:22px;font-weight:700;color:var(--ink); line-height:1.1;font-variant-numeric:tabular-nums;font-stretch:106%} .gd-liens{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 0} .gd-liens a{display:inline-flex;align-items:center;min-height:42px; padding:9px 16px;border-radius:99px;font-size:14px;font-weight:600; text-decoration:none;border:1px solid var(--rule);color:var(--ink-2)} .gd-liens a.majeur{background:var(--masthead);border-color:var(--masthead);color:#fff} .gd-liens a:hover{border-color:var(--ui);color:var(--ui)} .gd-liens a.majeur:hover{color:#fff;opacity:.9} .gd-sans{margin:0;font-size:14px;color:var(--ink-3);line-height:1.55} @media (max-width:560px){ /* Deux colonnes, pas trois. A trois, la carte tombait a 109 px : les trois icones de reseaux n'y tenaient qu'a 24 px, tres en dessous de ce qu'un doigt vise. A deux, la carte fait 175 px et les icones passent a 40. */ .gal-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .gal-case{padding:16px 10px 10px} .gal-photo,.gal-mono{width:74px;height:74px} .gal-mono{font-size:23px} .gal-nom{font-size:13.5px} .gal-case .res{gap:7px;margin-top:11px} .gal-case .res a{width:36px;height:36px} .gal-case .res svg{width:15px;height:15px} .gal-detail{padding:16px 15px} .gd-tete img,.gd-tete .gal-mono{width:52px;height:52px} .gd-nom{font-size:18px} .gd-res a{padding:10px 14px} } @media (max-width:340px){ /* sur les plus petits ecrans, une seule colonne plutot que des cartes ecrasees */ .gal-grille{grid-template-columns:1fr} } /* ============ comptes officiels ============ */ .res{display:flex;gap:7px;justify-content:center;align-items:center} .res a{ display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:50%;color:var(--ink-3); border:1px solid var(--rule);transition:color .15s,border-color .15s; } .res a:hover{color:var(--ui);border-color:var(--ui)} .res a:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .res svg{width:13px;height:13px;fill:currentColor} .gal-case .res{margin-top:10px;padding-top:9px;width:100%; border-top:1px solid var(--rule-soft)} /* dans le panneau de detail : plus grandes, avec leur nom */ .gd-res{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 0} .gd-res a{display:inline-flex;align-items:center;gap:8px;min-height:42px; padding:9px 15px;border-radius:99px;border:1px solid var(--rule); color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600} .gd-res a:hover{border-color:var(--ui);color:var(--ui)} .gd-res svg{width:15px;height:15px;fill:currentColor} .gd-res-vide{margin:14px 0 0;font-size:13.5px;color:var(--ink-3)} @media (max-width:560px){ .res a{width:24px;height:24px} .res svg{width:12px;height:12px} } /* ============================================================ Cibles tactiles de la page « Suivre ». Les fleches de navigation de la carte faisaient 26 x 30 px et les filtres du calendrier 36 px de haut : sous le seuil de ce qu'un doigt vise sans se tromper de voisin. On les remonte sans toucher au dessin. ============================================================ */ @media (max-width:720px){ .carte-nav button{min-width:42px;min-height:42px; display:inline-flex;align-items:center;justify-content:center} .ag-filtres button{min-height:42px;padding-block:9px} .ag-filtres li{margin:0} /* le calendrier tele/radio : une carte par ligne, toutes a la meme largeur, et un peu moins d'air pour que deux passages tiennent a l'ecran */ .tele-bloc{padding:14px 14px 12px;margin:18px 0 4px} .tele-item{width:100%} .tele-liste{gap:8px} .tele-carte{padding:11px 12px;gap:11px} .tele-jour{margin:12px 0 7px} .tele-jour.tele-passe{margin-top:16px;padding-top:12px} .ev-chaine{width:54px;height:38px} /* le lien « revoir / reecouter » des fiches : une vraie cible tactile */ .ev-regarder a{display:inline-flex;align-items:center;min-height:42px} } /* ============ couleurs de marque des reseaux ============ */ /* Ces logos se reconnaissent a leur couleur avant leur forme : les rendre monochromes revenait a afficher trois glyphes gris interchangeables. */ .res a svg, .gd-res a svg{fill:currentColor} .res .r-x svg, .gd-res .r-x svg{fill:#0F1419} .res .r-linkedin svg, .gd-res .r-linkedin svg{fill:#0A66C2} .res .r-instagram svg, .gd-res .r-instagram svg{fill:url(#ig-degrade)} /* En theme sombre, le noir de X disparait dans le fond : il passe au blanc. */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .res .r-x svg, :root:not([data-theme="light"]) .gd-res .r-x svg{fill:#E9EDF5} :root:not([data-theme="light"]) .res .r-linkedin svg, :root:not([data-theme="light"]) .gd-res .r-linkedin svg{fill:#4DA3F0} } :root[data-theme="dark"] .res .r-x svg, :root[data-theme="dark"] .gd-res .r-x svg{fill:#E9EDF5} :root[data-theme="dark"] .res .r-linkedin svg, :root[data-theme="dark"] .gd-res .r-linkedin svg{fill:#4DA3F0} /* Au survol, c'est la couleur de la marque qui vient sur la bordure, pas le rouge du site : la pastille appartient a la marque, pas a nous. */ .res .r-x:hover, .gd-res .r-x:hover{border-color:#0F1419} .res .r-linkedin:hover, .gd-res .r-linkedin:hover{border-color:#0A66C2} .res .r-instagram:hover, .gd-res .r-instagram:hover{border-color:#B900B4} .res a:hover, .gd-res a:hover{color:inherit} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .res .r-x:hover{border-color:#E9EDF5} } :root[data-theme="dark"] .res .r-x:hover{border-color:#E9EDF5} /* le lien vers le site du candidat porte le logo de son parti */ .res .r-site, .gd-res .r-site{padding:0} .res .r-site img{max-width:19px;max-height:15px;width:auto;object-fit:contain; background:#fff;border-radius:3px;padding:1px 2px} .gd-res .r-site img{max-width:26px;max-height:17px;width:auto;object-fit:contain; background:#fff;border-radius:3px;padding:1px 3px} .res .r-site:hover, .gd-res .r-site:hover{border-color:var(--ui)} .r-site .r-globe{width:14px;height:14px;fill:var(--ink-3)} /* ============ angles morts enrichis ============ */ .ang-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .ang{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start; border:1px solid var(--rule);border-left:4px solid var(--ink-3); border-radius:9px;padding:15px 17px;background:var(--card)} .ang.total{border-left-color:var(--ui)} .ang-ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center; justify-content:center;flex:none; /* la teinte du sujet est posee en variable au rendu ; le fond et le filet en derivent par transparence, l'ensemble tient donc sur les deux themes */ background:color-mix(in srgb, var(--tc,#8A8FA3) 22%, transparent); border:1px solid color-mix(in srgb, var(--tc,#8A8FA3) 46%, transparent)} .ang-ic svg{width:21px;height:21px;fill:none;stroke:var(--tc,var(--ink-2)); stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ang-corps{min-width:0} .ang-titre{font-weight:700;font-size:16.5px;line-height:1.2;font-stretch:106%} .ang-enjeu{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)} .ang-muets{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3)} .ang-muets b{color:var(--ink-2);font-weight:600} .ang-mesures{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 0} .ang-tag{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--rule); border-radius:99px;padding:4px 11px;font-size:12.5px;color:var(--ink-2); background:var(--card-2)} .ang-tag b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums; font-stretch:106%} .ang-tag i{font-style:normal;font-size:11.5px} .ang-tag i.hausse{color:var(--rouge,#B91C1C)} .ang-tag i.baisse{color:var(--vert,#15803D)} .ang-tag.absent{color:var(--ink-3);background:transparent} .ang-n{font-size:24px;font-weight:700;color:var(--ink);line-height:1; font-variant-numeric:tabular-nums;font-stretch:106%;white-space:nowrap; text-align:right} .ang-n i{font-style:normal;font-size:13px;color:var(--ink-3);font-weight:600} .ang-src{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-3); border-left:3px solid var(--rule);padding-left:12px} @media (max-width:560px){ .ang{grid-template-columns:auto 1fr;gap:11px;padding:13px 14px} .ang-n{grid-column:2;justify-self:start;text-align:left;font-size:20px;margin-top:2px} .ang-ic{width:34px;height:34px} .ang-titre{font-size:15.5px} } /* ============ les dix-huit sujets ============ */ .tous-sujets{padding:52px 0 0} .ts-liste{list-style:none;margin:18px 0 0;padding:0;display:flex; flex-direction:column;gap:10px} .ts{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center; border:1px solid var(--rule);border-radius:9px;padding:13px 16px;background:var(--card)} .ts-corps{min-width:0} .ts-prio{display:flex;flex-direction:column;align-items:flex-end;text-align:right; flex:none;min-width:118px} .ts-prio b{font-size:23px;font-weight:700;line-height:1;color:var(--ink); font-variant-numeric:tabular-nums;font-stretch:106%} .ts-prio span{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.3} .ts-prio.absent b{color:var(--ink-3);font-weight:600} @media (max-width:560px){ .ts{grid-template-columns:auto 1fr;gap:11px;padding:12px 13px} .ts-prio{grid-column:2;align-items:flex-start;text-align:left;margin-top:6px; flex-direction:row;align-items:baseline;gap:8px} .ts-prio b{font-size:19px} } .ts-sous{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-2);margin:26px 0 0;display:flex;align-items:center;gap:11px} .ts-sous::after{content:"";flex:1;height:1px;background:var(--rule)} .ts-sous:first-child{margin-top:4px} .ts-quoi{margin:7px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3);max-width:62ch} /* ---- les partis : logo quand il est libre, sigle sinon ---- */ .pr-partis{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0} .pa{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule); border-radius:99px;padding:5px 12px 5px 8px;background:var(--card-2); font-size:12.5px;font-weight:600;color:var(--ink-2);line-height:1.2} /* Les logos de parti sont dessines pour du papier blanc : plusieurs sont en traits sombres et disparaissent sur le theme sombre. Une plaque blanche les rend fideles sur les deux fonds, sans les recolorer. */ .pa img{width:auto;height:16px;max-width:34px;object-fit:contain;display:block; background:#fff;border-radius:4px;padding:2px 4px} .pa-sigle{display:inline-flex;align-items:center;justify-content:center; min-width:22px;height:16px;padding:0 5px;border-radius:4px; background:var(--ink-2);color:var(--card);font-size:10px;font-weight:700; letter-spacing:.03em} .pa.pa-nom{padding:5px 12px} .pr-cands .pa-mini{height:14px;width:auto;max-width:28px;object-fit:contain; display:inline-block;vertical-align:-3px;margin-right:6px; background:#fff;border-radius:3px;padding:2px 3px} @media (max-width:560px){ .pa{padding:4px 10px 4px 7px;font-size:12px} .pa img{height:14px;max-width:28px} } /* ============ le duel, deuxieme passe ============ */ .duel-slot .ds-changer{margin-left:auto;flex:none;display:flex;align-items:center; gap:5px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ui);font-stretch:110%} .duel-slot .ds-changer i{font-style:normal;font-size:9px;transition:transform .15s} .duel-slot[aria-expanded="true"] .ds-changer i{transform:rotate(180deg)} .ds-compte{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums; line-height:1.3} /* Le badge de comparabilite disparaissait au cran du milieu : depuis _couleurs.py il est ardoise, et son fond se confondait avec la carte. La couleur du cran passe dans une pastille, les mots reprennent l'encre normale - le titre du bloc reste lisible quel que soit le cran. */ .duel-badge{color:var(--ink);border-color:var(--cmp)} .duel-badge::before{content:"";width:9px;height:9px;border-radius:50%;flex:none; background:var(--cmp)} .duel-badge b{color:var(--ink)} /* la barre de synthese : les trois etats, a l'echelle */ .dsy-tete{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} .dsy-barre{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:13px 0 0; background:var(--rule-soft)} .dsy-barre i{display:block;min-width:0} .dsy-barre i.b-deux{background:var(--d-deux)} .dsy-barre i.b-un{background:var(--d-un)} .dsy-barre i.b-aucun{background:var(--d-aucun)} .duel-compte li::before{content:"";width:11px;height:11px;border-radius:3px;flex:none; background:var(--pastille,var(--rule));align-self:center} .duel-compte li.c-deux{--pastille:var(--d-deux)} .duel-compte li.c-un{--pastille:var(--d-un)} .duel-compte li.c-aucun{--pastille:var(--d-aucun)} .duel-compte li span{color:var(--ink-3);font-variant-numeric:tabular-nums} /* Les trois teintes reprennent, une a une, les crans du badge de comparabilite apres le passage de _couleurs.py : vert, ardoise, rouge. Pas d'ambre ni d'orange - c'est une regle de charte, et le cran du milieu doit rester neutre : un seul qui repond n'est ni bon ni mauvais. */ :root{--d-deux:#15803D;--d-un:#475569;--d-aucun:#B91C1C} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --d-deux:#6EE7A8;--d-un:#A9B6CC;--d-aucun:#F87171}} :root[data-theme="dark"]{--d-deux:#6EE7A8;--d-un:#A9B6CC;--d-aucun:#F87171} /* le filtre en quatre crans */ .duel-vues{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 15px} .duel-vues button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--rule); border-radius:99px;padding:7px 13px;background:var(--card);cursor:pointer;font:inherit; color:var(--ink-2);font-size:13px;font-weight:600;min-height:38px; transition:border-color .15s,background .15s,color .15s} .duel-vues button:hover:not([disabled]){border-color:var(--ui)} .duel-vues button b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)} .duel-vues button[aria-pressed="true"]{background:var(--ui-soft);border-color:var(--ui); color:var(--ink)} .duel-vues button[disabled]{opacity:.4;cursor:not-allowed} .duel-vues .dv-pip{width:9px;height:9px;border-radius:50%;flex:none; background:var(--pastille,var(--rule))} .duel-vues .v-deux{--pastille:var(--d-deux)} .duel-vues .v-un{--pastille:var(--d-un)} .duel-vues .v-aucun{--pastille:var(--d-aucun)} /* le sujet : entete plus lisible, colonnes aux couleurs des partis */ .dsj-tete{flex-wrap:wrap;row-gap:5px} .dsj-titre{flex:1 1 auto;min-width:0} .dsj-etat{display:inline-flex;align-items:center;gap:6px;flex:none} .dsj-etat .dsj-pip{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .dsj-lien{font-size:12.5px;font-weight:600;white-space:nowrap;flex:none; color:var(--ui);text-decoration:none} .dsj-lien:hover{text-decoration:underline} .dsj-col{border-top:3px solid var(--c,var(--rule))} .dsj-col.muet{border-top-color:var(--rule)} .dsj-qui{flex-wrap:wrap} .dsj-qui .badge{margin-left:auto} .dsj-col .src-mesure{margin:9px 0 0;font-size:12px} .dsj-col .chiffrage{margin:9px 0 0} .dsj-col .plus{margin:10px 0 0} .dsj-col .detail{margin:9px 0 0} .duel-rien{border:1px dashed var(--rule);border-radius:8px;padding:22px 18px;text-align:center; color:var(--ink-3);font-size:14.5px;background:var(--card-2)} @media (max-width:720px){ .dsj-col + .dsj-col{border-top:3px solid var(--c,var(--rule))} .dsj-tete{flex-wrap:wrap;gap:6px 10px} .dsj-lien{width:100%} } /* ============ le test : choix du format, arret en route ============ */ .t-formats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px} .t-formats .btn{flex:1 1 220px;display:flex;flex-direction:column;align-items:flex-start; gap:4px;text-align:left;line-height:1.25} .t-formats .btn span{font-size:12.5px;font-weight:500;opacity:.82;letter-spacing:0; text-transform:none} .t-arret{margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px} .t-arret button{border:1px solid var(--rule);border-radius:99px;padding:7px 14px; background:var(--card);color:var(--ui);font:inherit;font-size:13px;font-weight:650; cursor:pointer;min-height:38px} .t-arret button:hover{border-color:var(--ui)} .t-arret span{font-size:12.5px;color:var(--ink-3)} /* ============ le test : departage et choix final ============ */ .t-dep{color:var(--ui);font-weight:800;letter-spacing:.08em} .t-egalite{border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px; background:var(--card)} .te-phrase{margin:8px 0 16px;font-size:15px;line-height:1.55;color:var(--ink-2)} .te-choix{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .te-choix button{display:flex;align-items:center;gap:12px;border:1px solid var(--rule); border-radius:10px;padding:11px 15px 11px 11px;background:var(--card-2);cursor:pointer; font:inherit;color:inherit;text-align:left;min-height:66px; transition:border-color .15s,background .15s} .te-choix button:hover{border-color:var(--ui);background:var(--ui-soft)} .te-visage{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 16%; flex:none;background:var(--rule-soft)} .te-choix span{display:flex;flex-direction:column;gap:2px;min-width:0} .te-choix b{font-size:15px;font-weight:650;line-height:1.15} .te-choix em{font-style:normal;font-size:12px;color:var(--ink-3)} .test,.recherche,.angles{padding:52px 0 0}.test h2, .recherche h2, .angles h2, .test h1, .recherche h1, .angles h1{font-size:clamp(26px,4.5vw,38px);font-weight:700; margin:0 0 6px;letter-spacing:-.02em} .test .quoi,.recherche .quoi,.angles .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%; font-size:17.5px;color:var(--ink-2);margin:0 0 22px;max-width:66ch} .t-progres{height:5px;background:var(--rule-soft);border-radius:99px;overflow:hidden;margin-bottom:18px} .t-progres span{display:block;height:5px;background:var(--ui);transition:width .25s} .t-compteur{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3);margin:0 0 12px} .t-compteur span{color:var(--ui)} .t-prop{ margin:0 0 20px;padding:24px 26px;background:var(--card);border:1px solid var(--rule); border-left:5px solid var(--ui);border-radius:var(--r); font-size:clamp(19px,3.4vw,25px);font-weight:600;line-height:1.4; } .t-boutons{display:flex;flex-wrap:wrap;gap:9px} .t-boutons button{ flex:1;min-width:130px;min-height:52px;font-family:inherit;font-size:16px;font-weight:700; border-radius:var(--r);cursor:pointer;border:1px solid var(--rule);background:var(--card); color:var(--ink); } .t-boutons .t-oui:hover{border-color:var(--cl-bleu);color:var(--cl-bleu)} .t-boutons .t-non:hover{border-color:var(--cl-rouge);color:var(--cl-rouge)} .t-boutons .t-neutre:hover{border-color:var(--ink-3)} .t-boutons button:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .t-resultats h3,.t-themes h3{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ui);margin:0 0 14px} /* resultat du test, theme par theme : une carte par theme sur lequel le lecteur a pris position, le ou les candidats dont il est le plus proche */ .t-themes{margin:0 0 30px} .tt-liste{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .tt-carte{background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px;min-width:0} .tt-theme{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);line-height:1.3} .tt-corps{display:flex;align-items:center;gap:12px;min-width:0} .tt-visages{display:flex;flex:none} .tt-visage,.tt-plus{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center top; background:var(--rule-soft);display:block;border:2px solid var(--card);flex:none} .tt-visages .tt-visage + .tt-visage,.tt-visages .tt-plus{margin-left:-12px} .tt-plus{color:var(--ink-2);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center} .tt-texte{display:flex;flex-direction:column;gap:2px;min-width:0} .tt-nom{font-size:15.5px;font-weight:700;line-height:1.25} .tt-det{font-size:12.5px;color:var(--ink-3);line-height:1.4} .tt-vide .tt-visage{filter:grayscale(1);opacity:.55} .tt-vide .tt-nom{color:var(--ink-3)} @media (max-width:560px){ .tt-liste{grid-template-columns:1fr} .tt-visage,.tt-plus{width:38px;height:38px} .tt-nom{font-size:14.5px} } .t-resultats .barres li{grid-template-columns:150px 1fr 48px} .t-detail{margin:0 0 20px;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px; background:var(--rule-soft);border:1px solid var(--rule-soft);border-radius:var(--r);overflow:hidden} .t-detail li{display:grid;grid-template-columns:170px 1fr 108px;gap:12px;align-items:baseline; background:var(--card);padding:12px 15px;font-size:14.5px} .t-qui{font-weight:700;font-size:14px} .t-txt{color:var(--ink-2);line-height:1.45} .t-camps{display:block;margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--ink-3)} .t-rep{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;text-align:right} .t-l1 .t-rep{color:var(--cl-bleu)} .t-l-1 .t-rep{color:var(--cl-rouge)} .t-l0 .t-rep{color:var(--ink-3)} /* ============ pages sujet ============ Le lien vers la page dediee dans le comparatif, et le maillage vers les autres sujets en pied de chaque page sujet. */ .lien-sujet{margin:-8px 0 16px;font-size:14.5px;font-weight:600} .fs-autres{margin-top:34px} .fs-autres ul{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px} .fs-autres a{display:block;padding:11px 14px;background:var(--card); border:1px solid var(--rule);border-radius:var(--r); font-weight:600;font-size:14.5px;color:var(--ink)} .fs-autres a:hover{border-color:var(--ui)} /* ============ prises de contact avec les candidats ============ Le courrier envoye aux candidats promet que l'egalite de traitement sera indiquee publiquement. Cette page est cette promesse : on y liste ce qui a ete fait, canal par canal, y compris ce qui a echoue. */ .ct-liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px} .ct-item{background:var(--card);border:1px solid var(--rule); border-radius:var(--r);padding:14px 16px} .ct-tete{display:flex;flex-wrap:wrap;align-items:baseline; gap:8px 12px;margin-bottom:9px} .ct-nom{font-weight:700;font-size:16px} .ct-nom a{color:var(--ink)} .ct-parti{font-size:13.5px;color:var(--ink-3)} .ct-reponse{margin-left:auto;font-size:13px;font-weight:600} .ct-canaux{list-style:none;margin:0;padding:0;display:grid;gap:6px} .ct-canal{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px; line-height:1.45} .ct-etat{flex:none;font-size:12px;font-weight:700;letter-spacing:.02em; text-transform:uppercase;padding:2px 8px;border-radius:999px; border:1px solid var(--rule)} .ct-etat.envoye{color:#1d6b3f;border-color:#1d6b3f} .ct-etat.attente_validation,.ct-etat.bloque{color:#8a5a00;border-color:#8a5a00} .ct-etat.impossible{color:var(--ui);border-color:var(--ui)} .ct-detail{flex:1 1 240px;min-width:0;color:var(--ink-3)} /* Ce qu'un parti a repondu, quand la reponse n'est pas un programme : on cite ce qu'il dit sans le transformer en « programme transmis ». */ .ct-repdetail{margin:0 0 9px;font-size:14px;line-height:1.5;color:var(--ink-2)} .ct-repdetail a{color:var(--ink-2);text-decoration:underline} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ct-etat.envoye{color:#7fd6a2;border-color:#7fd6a2} :root:not([data-theme="light"]) .ct-etat.attente_validation, :root:not([data-theme="light"]) .ct-etat.bloque{color:#e8b45c;border-color:#e8b45c} } [data-theme="dark"] .ct-etat.envoye{color:#7fd6a2;border-color:#7fd6a2} [data-theme="dark"] .ct-etat.attente_validation, [data-theme="dark"] .ct-etat.bloque{color:#e8b45c;border-color:#e8b45c} @media (max-width:520px){ .ct-reponse{margin-left:0;flex-basis:100%} } /* ============ lecture facile ============ Les cartes n'avaient aucun style : les noms debordaient et le parti se collait au nom. Tout le bloc est ecrit ici, avec les memes constantes que le reste du site (card, rule, ink). */ .falc{padding:52px 0 0}.falc h2, .falc h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em} .falc .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%; font-size:17.5px;color:var(--ink-2);margin:0 0 22px;max-width:66ch} #falc-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px} #falc-liste.fa-un{grid-template-columns:minmax(0,640px)} .fa-carte[hidden]{display:none} /* choisir un seul candidat plutot que faire defiler les trente cartes */ .fa-choix{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px} .fa-choix label{font-size:15px;font-weight:600;color:var(--ink-2)} .fa-choix select{font-family:inherit;font-size:15.5px;min-height:44px;padding:0 12px; border:1px solid var(--rule);border-radius:var(--r);background:var(--card);color:var(--ink); max-width:100%} .fa-choix select:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .fa-choix .fa-tous{font-family:inherit;font-size:14px;min-height:44px;padding:0 14px;border-radius:99px; border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer} .fa-choix .fa-tous:hover{border-color:var(--ui);color:var(--ui)} .fa-carte{ background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--c); border-radius:var(--r);padding:18px 18px 16px;min-width:0; display:flex;flex-direction:column;gap:14px; } .fa-tete{display:flex;gap:12px;align-items:center;min-width:0} .fa-tete .bloc{flex:1;min-width:0} .fa-tete .nom{display:block;font-weight:700;font-size:17px;line-height:1.25} .fa-tete .parti{display:block;font-size:13px;color:var(--ink-3);line-height:1.3;margin-top:2px} .fa-ecouter{ flex:none;font-family:inherit;font-size:13.5px;font-weight:700;min-height:40px; padding:0 14px;border-radius:99px;border:1px solid var(--rule); background:var(--card-2);color:var(--ink);cursor:pointer;white-space:nowrap; } .fa-ecouter:hover{border-color:var(--c)} .fa-ecouter[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)} .fa-ecouter:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .fa-sous{ font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--ink-3);margin:0 0 -6px; } .fa-parcours{background:var(--card-2);border-radius:var(--r);padding:12px 14px} .fa-parcours p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .fa-parcours p+p{margin-top:5px} .fa-texte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .fa-texte li{min-width:0} .fa-texte p{margin:0;font-size:15.5px;line-height:1.6} .fa-theme{ display:inline-flex;align-items:center;gap:6px;vertical-align:middle; font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:#fff;background:var(--tc,var(--ink-3));border-radius:99px; padding:3px 10px 3px 7px;margin-bottom:6px; } .fa-theme .fa-ico{font-size:13px;line-height:1} .fa-plus{margin-top:auto;align-self:flex-start;font-weight:700;font-size:14.5px} @media (max-width:720px){ .fa-tete{flex-wrap:wrap} .fa-tete .bloc{flex:1 1 120px} .fa-ecouter{margin-left:56px} .fa-tete .portrait+.bloc+.fa-ecouter{margin-left:0} } /* ============ recherche ============ */ .rech-barre{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap} #rech{ flex:1;min-width:220px;font-family:inherit;font-size:17px;color:var(--ink); background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:13px 16px; } #rech:focus{outline:2px solid var(--ui);outline-offset:1px;border-color:var(--ui)} .rech-compte{font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap} /* ============ angles morts ============ */ .ang-liste{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:9px} .ang{display:flex;gap:15px;align-items:center;background:var(--card); border:1px solid var(--rule);border-radius:var(--r);padding:14px 17px} .ang.total{border-color:var(--cl-rouge)} .ang-n{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums; color:var(--ink-2);flex:none;min-width:56px} .ang.total .ang-n{color:var(--cl-rouge)} .ang-n i{font-style:normal;font-size:14px;color:var(--ink-3)} .ang-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .ang-txt b{font-size:16px;font-weight:700} .ang-txt span{font-size:14px;color:var(--ink-2);line-height:1.4} @media (max-width:560px){ .t-detail li{grid-template-columns:1fr;gap:4px} .t-rep{text-align:left} .t-resultats .barres li{grid-template-columns:112px 1fr 44px} .t-prop{padding:18px 17px} .t-boutons button{min-width:0;font-size:15px} } /* classement du test : le visage, le nom, la jauge, le score */ .t-classement{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:7px} .t-classement li{ display:grid;grid-template-columns:26px 44px 1fr 130px 52px;gap:12px;align-items:center; background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:9px 14px; } .t-classement li.premier{border-color:var(--ui)} .t-rang{font-size:14px;font-weight:700;color:var(--ink-3);text-align:center; font-variant-numeric:tabular-nums} .t-classement li.premier .t-rang{color:var(--ui)} .t-visage{width:44px;height:44px;border-radius:var(--r);object-fit:cover; object-position:center top;background:var(--rule-soft);display:block} .t-nom{display:flex;flex-direction:column;gap:1px;min-width:0} .t-nom b{font-size:15.5px;font-weight:700;line-height:1.2} .t-nom span{font-size:12.5px;color:var(--ink-3)} .t-jauge{height:9px;border-radius:3px;background:var(--rule-soft);overflow:hidden} .t-jauge span{display:block;height:9px;border-radius:3px;background:var(--c)} .t-pct{font-size:17px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums} .t-mini{width:22px;height:22px;border-radius:3px;object-fit:cover;object-position:center top; background:var(--rule-soft);flex:none} .t-qui{display:flex;align-items:center;gap:8px} @media (max-width:560px){ .t-classement li{grid-template-columns:22px 36px 1fr 56px;gap:9px;padding:8px 11px} .t-jauge{display:none} .t-visage{width:36px;height:36px} .t-nom b{font-size:14.5px} .t-nom span{font-size:11.5px} .t-pct{font-size:15px} } /* ============ carte « Mon vote » ============ */ .mon-vote{ background:var(--masthead);color:#fff;border-radius:var(--r); padding:30px 28px 28px;margin:0 0 26px;text-align:center; position:relative;overflow:hidden; } .mon-vote::before{ content:"";position:absolute;top:0;left:0;right:0;height:5px; background:linear-gradient(90deg, var(--tri-bleu) 0 33.34%, var(--tri-blanc) 33.34% 66.67%, var(--tri-rouge) 66.67% 100%); } .mv-label{ font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.52);margin:0 0 18px; } .mv-visages{display:flex;justify-content:center;gap:12px;margin-bottom:16px} .mv-tete{ width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center top; background:rgba(255,255,255,.10);box-shadow:0 0 0 3px rgba(255,255,255,.16); } .mv-nom{ font-size:clamp(26px,5vw,38px);font-weight:700;letter-spacing:-.025em; line-height:1.1;margin:0 0 4px; } .mv-parti{font-size:14.5px;color:rgba(255,255,255,.58);margin:0 0 16px} .mv-phrase{ font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.80); margin:0 auto;max-width:52ch; } .mv-phrase b{color:#fff;font-weight:700} .mv-lien{margin-top:20px;text-decoration:none} .mon-vote.vide{padding:24px 26px} .mon-vote.vide .mv-phrase{margin-bottom:0} /* ============ « ce sujet compte double » ============ */ .t-poids{ margin-top:12px;width:100%;min-height:46px;font-family:inherit;font-size:14.5px; font-weight:600;color:var(--ink-2);background:transparent;cursor:pointer; border:1px dashed var(--rule);border-radius:var(--r); } .t-poids:hover{border-color:var(--ui);color:var(--ui)} .t-poids[aria-pressed="true"]{ background:var(--ui);border-style:solid;border-color:var(--ui);color:#fff; } .t-poids:focus-visible{outline:2px solid var(--ui);outline-offset:2px} @media (max-width:560px){ .mon-vote{padding:24px 18px 22px} .mv-tete{width:76px;height:76px} .mv-phrase{font-size:15.5px} } /* source d'une mesure */ .src-mesure{margin:9px 0 0;font-size:12.5px;line-height:1.45} .src-mesure a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)} .src-mesure a:hover{color:var(--ui);border-color:var(--ui)} .src-mesure span{color:var(--ink-3)} .fi-mesure .src-mesure{margin-top:6px;font-weight:400} /* coût annoncé et niveau de décision */ .chiffrage{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 0} .ch-cout{ font-size:13px;font-weight:700;color:var(--ink);background:var(--rule-soft); border-radius:var(--r);padding:4px 10px; } .ch-obst{ font-size:11.5px;font-weight:700;letter-spacing:.03em;border-radius:var(--r); padding:4px 10px;cursor:help;white-space:nowrap; } .ch-obst.loi,.ch-obst.budget,.ch-obst.social{color:var(--ink-2);background:transparent; box-shadow:inset 0 0 0 1px var(--rule)} .ch-obst.consti,.ch-obst.europe{color:var(--cl-rouge);background:var(--cl-rouge-pale); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cl-rouge) 35%,transparent)} .ch-obst.refer{color:var(--ui);background:var(--ui-soft)} .ch-note{flex-basis:100%;font-size:12.5px;color:var(--ink-3);line-height:1.4;margin-top:2px} /* bilan aux responsabilités */ .bi-role{font-size:15px;color:var(--ink-2);margin:0 0 14px;font-style:italic} .bi-liste{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:10px} .bi-liste li{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start; padding-bottom:10px;border-bottom:1px solid var(--rule-soft)} .bi-liste li:last-child{border-bottom:0} .bi-etiq{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; border-radius:var(--r);padding:4px 9px;text-align:center;white-space:nowrap} .bi-cohérent .bi-etiq{color:var(--cl-bleu);background:var(--bleu-pale)} .bi-nuance .bi-etiq{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)} .bi-fait .bi-etiq{color:var(--ink-3);background:var(--rule-soft)} .bi-txt{font-size:15.5px;line-height:1.5} .bi-txt em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-3);margin-top:4px} @media (max-width:560px){ .bi-liste li{grid-template-columns:1fr;gap:6px} .bi-etiq{justify-self:start} } /* ============ profil personnel ============ */ .profil{padding:52px 0 0}.profil h2, .profil h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em} .profil .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%;font-size:17.5px;color:var(--ink-2); margin:0 0 22px;max-width:66ch} .pf-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px; margin-bottom:26px} .pf-large{grid-column:1/-1} .pf-champ{display:flex;flex-direction:column;gap:6px} .pf-champ label{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-3)} .pf-champ input,.pf-champ select{ font-family:inherit;font-size:16.5px;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px;min-height:48px; } .pf-champ input:focus,.pf-champ select:focus{outline:2px solid var(--ui);outline-offset:1px; border-color:var(--ui)} .pf-compte{font-size:14.5px;font-weight:600;color:var(--ink-2);margin:0 0 16px} .pf-groupe{background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:16px 18px;margin-bottom:12px} .pf-tete{display:flex;align-items:center;gap:11px;padding-bottom:12px; border-bottom:1px solid var(--rule-soft);margin-bottom:12px} .pf-tete .bloc{display:flex;flex-direction:column;gap:1px} .pf-tete .nom{font-weight:700;font-size:15.5px} .pf-tete .parti{font-size:12.5px;color:var(--ink-3)} .pf-effets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .pf-effets li{display:flex;flex-direction:column;gap:3px} .pf-sujet{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3)} .pf-effets b{font-size:17px;font-weight:700;line-height:1.35} .pf-det{font-size:15px;color:var(--ink-2);line-height:1.45} .pf-hyp{font-size:12.5px;color:var(--ink-3);line-height:1.4;font-style:italic} /* actualité injectée */ .actu{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule)} .actu-label{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-3);margin:0 0 8px} .actu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .actu li{font-size:14.5px;line-height:1.45} .actu a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)} .actu a:hover{color:var(--ui);border-color:var(--ui)} .actu .src{color:var(--ink-3);font-size:12.5px} /* fil de veille */ .fil{padding:56px 0 0}.fil h2, .fil h1{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-weight:700; font-size:clamp(26px,4.5vw,36px);margin:0 0 6px;letter-spacing:-.02em} .fil .quoi{font-size:17px;color:var(--ink-2);margin:0 0 18px;max-width:62ch} .fil-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fil-col{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:17px 19px} .fil-col h3{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3); margin:0 0 13px;font-weight:700} .fil-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .fil-col li{font-size:15px;line-height:1.4} .fil-col a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)} .fil-col a:hover{color:var(--ui);border-color:var(--ui)} .fil-col .meta{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px} .fil-col .none{font-size:15px;color:var(--ink-3);font-style:italic;margin:0} .volume{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none} .volume li{display:grid;grid-template-columns:135px 1fr 30px;align-items:center;gap:9px;font-size:14px} .volume .track{background:var(--rule-soft);border-radius:3px;overflow:hidden;height:8px} .volume .bar{display:block;height:8px;border-radius:3px;background:var(--c);min-width:3px} .volume .n{text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:13px} /* fin */ .fin{margin-top:62px;padding-top:26px;border-top:1px solid var(--rule)} .fin h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3); margin:0 0 12px;font-weight:700} .fin h3+h3{margin-top:30px} .fin p{font-size:15.5px;color:var(--ink-2);max-width:74ch;margin:0 0 12px} .fin p strong{color:var(--ink);font-weight:700} .srclist{columns:2;column-gap:34px;padding:0;margin:6px 0 0;list-style:none} .srclist li{font-size:14px;margin:0 0 6px;break-inside:avoid} .srclist a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--rule)} .srclist a:hover{color:var(--ui);border-color:var(--ui)} .hidden{display:none !important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .legende .cell{font-style:normal} @media (max-width:720px){ /* echelle mobile resserree : voir le bloc typographique plus haut */ .instituts{grid-template-columns:1fr} .bandeau figcaption{padding:22px 14px 10px;font-size:11.5px} .wrap{padding:0 15px 80px} .hero{padding:44px 0 24px} .sujet-head{gap:12px} .num{width:32px;height:32px;font-size:13px} .fil-grid{grid-template-columns:1fr} .srclist{columns:1} .volume li{grid-template-columns:112px 1fr 28px} .hint{margin-left:0;width:100%} .jargon::after{left:auto;right:0} } /* ============ bandeau d'actualité (généré par report.py) ============ */ .bandeau-actu{background:var(--masthead);color:#fff;overflow:hidden; border-bottom:1px solid rgba(255,255,255,.1)} .bandeau-in{display:flex;align-items:stretch} .bandeau-label{flex:none;display:flex;align-items:center;gap:8px;padding:9px 14px; font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; background:rgba(255,255,255,.08);position:relative;z-index:2;white-space:nowrap} .bandeau-label .bd-point{width:7px;height:7px;border-radius:50%;background:#E1000F; animation:bd-pulse 2.2s infinite} @keyframes bd-pulse{0%,100%{opacity:1}50%{opacity:.3}} .bandeau-defile{flex:1;display:flex;overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 26px,#000 calc(100% - 26px),transparent)} .bandeau-piste{display:flex;flex:none;align-items:center;gap:38px;padding:0 19px; animation:bd-defile var(--bd-duree,70s) linear infinite;will-change:transform} .bandeau-actu:hover .bandeau-piste,.bandeau-actu:focus-within .bandeau-piste{animation-play-state:paused} @keyframes bd-defile{from{transform:translateX(0)}to{transform:translateX(-100%)}} .bd-item{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap; color:#fff;text-decoration:none;font-size:13.5px;padding:8px 0} .bd-item:hover{text-decoration:underline;text-underline-offset:3px} .bd-item b{color:var(--c,#fff);font-weight:800;filter:brightness(1.5) saturate(.7)} .bd-src{font-size:12px;color:rgba(255,255,255,.55)} @media (max-width:560px){.bandeau-label span{display:none}.bandeau-label{padding:9px 11px}} @media (prefers-reduced-motion:reduce){ .bandeau-defile{overflow-x:auto;-webkit-overflow-scrolling:touch;mask-image:none;-webkit-mask-image:none} .bandeau-piste[aria-hidden]{display:none} } /* ============ calendrier des candidats ============ */ .agenda{margin-top:56px} /* passages tele / radio : logo de la chaine + heure, calendrier jour par jour */ .tele-bloc{margin:24px 0 6px;padding:16px 18px 14px;border:1px solid var(--ui);border-radius:12px} .tele-bloc h3{margin:0 0 12px;font-size:17px} .tele-jour{margin:14px 0 8px;font-size:13px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--ink-3)} .tele-jour:first-child{margin-top:0} .tele-jour.tele-passe{margin-top:20px;padding-top:14px;border-top:1px dashed var(--ui)} /* replays replies : un resume cliquable, la liste ne s'ouvre qu'a la demande */ .tele-details summary.tele-passe{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px; margin-bottom:0;min-height:44px} .tele-details summary.tele-passe::-webkit-details-marker{display:none} .tele-details summary.tele-passe::before{content:"";width:7px;height:7px;border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-left:2px} .tele-details[open] summary.tele-passe::before{transform:rotate(45deg)} .tele-details summary.tele-passe:hover{color:var(--ui)} .tele-details summary.tele-passe:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .tele-nb{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);font-size:12.5px; border:1px solid var(--rule);border-radius:99px;padding:1px 9px} .tele-details .tele-liste{margin-top:10px} .tele-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .tele-item{display:flex;min-width:min(250px,100%)} .tele-carte{display:flex;align-items:center;gap:12px;border:1px solid var(--ui);border-radius:10px; padding:10px 14px;flex:1;cursor:pointer;color:inherit;text-decoration:none} .tele-carte:hover,.tele-carte:focus-visible{border-color:var(--ink-3)} .tele-corps{display:flex;flex-direction:column;gap:2px;font-size:14px;min-width:0} .tele-corps b{font-size:14.5px} .tele-titre{color:var(--ink-3);font-size:13px} .tele-lien{margin-top:3px;font-size:13px;font-weight:700;color:var(--ui)} a.tele-carte:hover .tele-lien{text-decoration:underline} .tele-rien{margin:0;color:var(--ink-3);font-size:14.5px} .ev-regarder{margin:8px 0 0;font-size:14px} .ev-regarder a{font-weight:700;color:var(--ui);text-decoration:none} .ev-regarder a:hover{text-decoration:underline} .ev-chaine{flex:none;display:inline-flex;align-items:center;justify-content:center; width:60px;height:42px;background:#fff;border:1px solid var(--ui);border-radius:8px;padding:5px} .ev-chaine img{max-width:100%;max-height:100%;object-fit:contain} .ev-ligne1 .ev-chaine{width:44px;height:29px;padding:3px;border-radius:6px} .ag-filtres{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 6px;padding:0} .ag-filtres button{ border:1px solid var(--rule);background:var(--card);color:var(--ink-2); border-radius:999px;padding:6px 13px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .ag-filtres button:hover{border-color:var(--ui);color:var(--ink)} .ag-filtres button[aria-pressed="true"]{background:var(--masthead);color:#fff;border-color:var(--masthead)} .ag-mois{margin:26px 0 4px;font-size:14px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-2)} .ag-liste{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px} .ev{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:start; background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px} .ev-date{text-align:center;padding-top:2px} .ev-date b{display:block;font-size:22px;line-height:1;font-weight:800} .ev-date span{display:block;font-size:12px;color:var(--ink-2);margin-top:3px} .ev-corps{min-width:0} .ev-ligne1{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:4px} .ev-qui{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700} .ev-qui .pip{width:9px;height:9px;border-radius:50%;background:var(--c,var(--ink-3));flex:none} .ev-type{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--ink-2);border:1px solid var(--rule);border-radius:999px;padding:2px 9px} .ev-type.a-confirmer{color:#8a5a00;border-color:#d9b36a} :root[data-theme="dark"] .ev-type.a-confirmer{color:#e3b96a;border-color:#7a6234} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev-type.a-confirmer{color:#e3b96a;border-color:#7a6234}} .ev h3{margin:0 0 2px;font-size:16.5px;line-height:1.35} .ev-lieu{font-size:14px;color:var(--ink-2)} .ev-detail{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink)} .ev-src{margin:7px 0 0;font-size:12.5px;color:var(--ink-2)} .ev-src a{color:inherit} .ev.passe{opacity:.72} .ag-rien{margin:22px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.55} /* la carte de France des deplacements */ .carte-bloc{margin:22px 0 10px;background:var(--card);border:1px solid var(--rule); border-radius:var(--r);padding:16px 18px} .carte-tete{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center; justify-content:space-between;margin-bottom:6px} .carte-tete h3{margin:0;font-size:16.5px} .carte-nav{display:flex;align-items:center;gap:7px} .carte-nav button{border:1px solid var(--rule);background:var(--card);color:var(--ink); border-radius:999px;font:inherit;cursor:pointer} .carte-nav button:hover{border-color:var(--ui)} .carte-nav button:disabled{opacity:.35;cursor:default} .carte-nav button:disabled:hover{border-color:var(--rule)} #carte-prec,#carte-suiv{width:30px;height:30px;font-size:17px;line-height:1;padding:0} #carte-jour{font-size:14px;font-weight:700;min-width:168px;text-align:center} #carte-jour .auj{color:var(--ui);font-weight:800} #carte-tout{padding:5px 12px;font-size:13px;font-weight:600;color:var(--ink-2)} #carte-tout[aria-pressed="true"]{background:var(--masthead);color:#fff;border-color:var(--masthead)} #carte-fr{display:block;width:100%;max-width:620px;margin:0 auto;height:auto} .carte-fond{fill:var(--card-2);stroke:var(--rule);stroke-width:.35} .pin-nom{font-size:2.7px;font-weight:700;fill:var(--ink);text-anchor:middle; paint-order:stroke;stroke:var(--card);stroke-width:.75px;stroke-linejoin:round} .pin-ville{font-size:2.2px;fill:var(--ink-2);text-anchor:middle; paint-order:stroke;stroke:var(--card);stroke-width:.7px;stroke-linejoin:round} .pin{cursor:pointer} .pin:hover > circle,.pin:focus-visible > circle{stroke-width:1.6} .pin:focus-visible{outline:none} .ev-cible{border-color:var(--ui);box-shadow:0 0 0 3px var(--ui-soft)} .carte-vide{margin:6px 0 0;font-size:14px;color:var(--ink-2);text-align:center} .carte-note{margin:10px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5} /* poser sa question aux candidats */ .qcands{margin-top:56px} .qc-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px; list-style:none;margin:18px 0 0;padding:0} .qc-carte{display:flex;align-items:center;gap:12px;background:var(--card); border:1px solid var(--rule);border-radius:var(--r);padding:13px 15px} .qc-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none; border:2px solid var(--c,var(--rule))} .qc-bloc{min-width:0;flex:1} .qc-nom{display:block;font-size:15px;font-weight:700;line-height:1.25} .qc-parti{display:block;font-size:12.5px;color:var(--ink-2);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .qc-btn{border:1px solid var(--rule);background:transparent;color:var(--ui); border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700; cursor:pointer;flex:none} .qc-btn:hover{border-color:var(--ui)} @media (max-width:560px){ .carte-bloc{padding:12px 12px} #carte-jour{min-width:132px;font-size:13px} } @media (max-width:560px){ .ev{grid-template-columns:52px 1fr;padding:12px 13px} .ev-date b{font-size:19px} } @media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}} /* ============ lisibilite sur telephone ============ Rien de fonctionnel sous 12,5 px sur un ecran de moins de 560 px. Les capitales espacees montent un peu plus haut : leur interlettrage coute de la lisibilite. Ce bloc vient apres les autres regles mobiles, qui descendaient certaines de ces classes plus bas ; a specificite egale, la derniere gagne. */ @media (max-width:560px){ .surtitre{font-size:12.5px;letter-spacing:.13em} /* le parti sous chaque vignette de candidat : 10 px, quinze fois */ .gal-logo.texte{font-size:12.5px;letter-spacing:.02em} .gal-logo{height:23px} .gal-logo img{max-height:23px;padding:3px 6px} /* les sondages : parti et methode de l'institut */ .so-parti, .so-logo + .so-parti{font-size:12.5px;letter-spacing:.02em} .inst-methode{font-size:12.5px} /* les propositions : mots-clefs et obstacle constitutionnel */ .mc{font-size:12.5px;padding:4px 9px} .ch-obst{font-size:12.5px;padding:5px 10px;white-space:normal} /* les primaires : etat du scrutin et pastilles de parti */ .pr-etat{font-size:12.5px;letter-spacing:.03em} .pa{font-size:13px;padding:5px 12px 5px 8px} .pa-sigle{font-size:11px;min-width:24px;height:17px} .pa img{height:18px;max-width:38px} .pr-cands .pa-mini{height:16px;max-width:32px} /* les angles morts : variation et compteurs */ .ang-tag{font-size:13px} .ang-tag i{font-size:12.5px} .ang-src, .fi-note, .ts-quoi{font-size:13px;line-height:1.6} .fi-note a, .ang-src a{font-size:inherit} /* la legende du chiffre de droite, dans les dix-huit sujets */ .ts-prio span{font-size:12.5px} /* l'etiquette de rubrique du fil d'actualite, et la source du bandeau */ .actu-label{font-size:12.5px} .bd-src{font-size:12px} } /* ============ améliorer le site : la boîte à signalements ============ */ .amel{padding:52px 0 0}.amel h2, .amel h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em} .amel .quoi{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%; font-size:17.5px;color:var(--ink-2);margin:0 0 22px;max-width:66ch} .amel-quoi{list-style:none;margin:0 0 26px;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px} .amel-quoi li{background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:14px 16px;display:flex;flex-direction:column;gap:4px} .amel-quoi b{font-size:15.5px;line-height:1.3} .amel-quoi span{font-size:14.5px;color:var(--ink-2);line-height:1.45} .amel-piege{display:none} .amel-form textarea{ width:100%;min-height:150px;resize:vertical;font-family:inherit;font-size:16.5px; line-height:1.5;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:var(--r);padding:12px 14px; } .amel-form textarea:focus{outline:2px solid var(--ui);outline-offset:1px;border-color:var(--ui)} .amel-compte{font-size:13px;color:var(--ink-3);margin:6px 0 0;text-align:right} .amel-envoi{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .amel-etat{font-size:14.5px;color:var(--ink-2);line-height:1.4} .amel-merci{background:var(--ui-soft);border-radius:var(--r);padding:18px 20px;margin:0 0 8px} .amel-merci b{display:block;font-size:19px;margin-bottom:6px} .amel-merci p{font-size:15.5px;color:var(--ink-2);line-height:1.5;margin:0;max-width:64ch} .amel-vie{font-size:13.5px;color:var(--ink-3);line-height:1.55;margin:20px 0 0;max-width:72ch} .amel-journal{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule)} .amel-journal h3{font-size:19px;font-weight:700;margin:0 0 10px} .amel-vide{font-size:15px;color:var(--ink-2);line-height:1.5;margin:0;max-width:66ch} .amel-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .amel-liste li{display:flex;flex-direction:column;gap:3px;padding-bottom:12px; border-bottom:1px solid var(--rule-soft)} .amel-liste time{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-3)} .amel-liste span{font-size:15.5px;line-height:1.5} /* ====== les trois façons de lire les programmes : la barre qui les relie ====== */ /* Onglets soulignés, comme le menu principal, et non pastilles comme les modes d'affichage juste en dessous : ce sont trois PAGES, pas trois états d'une page. Deux pastilles empilées se lisaient comme un seul jeu de boutons, et « Le comparatif » y côtoyait le mode « Comparatif ». */ .troislec{display:flex;flex-wrap:wrap;gap:0 18px;align-items:baseline;margin:24px 0 0} .troislec-onglets{display:flex;flex-wrap:wrap} .troislec-onglets a{font-size:14.5px;font-weight:600;color:var(--ink-2);text-decoration:none; padding:6px 2px 9px;margin-right:18px;border-bottom:2px solid transparent;white-space:nowrap} .troislec-onglets a:hover{color:var(--ink)} .troislec-onglets a[aria-current="page"]{color:var(--ui);border-bottom-color:var(--ui)} .troislec-onglets a:focus-visible{outline:2px solid var(--ui);outline-offset:2px} .troislec-quoi{font-size:13.5px;color:var(--ink-3);line-height:1.4;padding-bottom:9px; margin-left:auto;max-width:44ch} @media (max-width:560px){ .troislec-onglets a{margin-right:12px;font-size:13.5px} .troislec-quoi{margin-left:0;padding-top:6px} } /* ==================== espace presse ==================== */ .pr{padding:52px 0 0}.pr h2, .pr h1{font-size:clamp(26px,4.5vw,38px);font-weight:700;margin:0 0 6px;letter-spacing:-.02em} .pr .pr-chapo{font-family:"Archivo","Segoe UI",Helvetica,Arial,sans-serif;font-stretch:104%; font-size:17.5px;color:var(--ink-2);margin:0 0 26px;max-width:66ch} .pr h3{font-size:20px;font-weight:700;margin:34px 0 8px} .pr p{max-width:68ch} .pr-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r); overflow:hidden;margin:18px 0 10px} .pr-kpi div{background:var(--card);padding:15px 16px} .pr-kpi .v{font-size:27px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .pr-kpi .v.creux{color:var(--accent)} .pr-kpi .l{font-size:13.5px;color:var(--ink-2);line-height:1.35} .pr-tab{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0} .pr-tab th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-2);font-weight:600;padding:8px 10px;border-bottom:2px solid var(--ink)} .pr-tab td{padding:9px 10px;border-bottom:1px solid var(--rule)} .pr-tab td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .pr-tab td.n.creux{color:var(--accent);font-weight:700} .pr-wrap{overflow-x:auto} .pr-liens{list-style:none;padding:0;margin:14px 0;display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px} .pr-liens li{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px} .pr-liens b{display:block;font-size:15.5px} .pr-liens span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px} .pr-note{background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:16px 18px;margin:18px 0;font-size:15px} .pr-note b{font-weight:700} .pr ol.pr-methode{margin:10px 0 0;padding-left:20px} .pr ol.pr-methode li{margin:9px 0;max-width:68ch} .pr-vide{color:var(--ink-2);font-size:15px;max-width:68ch} /* ============ navigation du site multi-pages ============ */ /* Onze onglets dans 375 px : sans indice, on ne devine pas qu'il y en a six de plus. Un fondu au bord droit le dit, et le calage magnetique evite de s'arreter au milieu d'un mot. */ .menu{background:var(--card);border-bottom:1px solid var(--rule); position:sticky;top:0;z-index:30;isolation:isolate} .menu::after{ content:"";position:absolute;top:0;right:0;bottom:1px;width:38px; background:linear-gradient(to right,transparent,var(--card)); pointer-events:none;opacity:0;transition:opacity .2s; } .menu.deborde::after{opacity:1} .menu-in{max-width:1040px;margin:0 auto;padding:0 22px;display:flex;gap:0; overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .menu-in::-webkit-scrollbar{display:none} .menu a{scroll-snap-align:start} .menu a{ flex:none;padding:15px 12px;font-size:14px;font-weight:600;color:var(--ink-2); text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap; } .menu a:hover{color:var(--ink)} .menu a.ici{color:var(--ui);border-bottom-color:var(--ui)} .menu a:focus-visible{outline:2px solid var(--ui);outline-offset:-2px} .tools{top:53px} .suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px; margin:44px 0 0;padding:26px 0 0;border-top:1px solid var(--rule);list-style:none} .suite li{margin:0} .suite a{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r); padding:16px 18px;text-decoration:none;color:var(--ink)} .suite a:hover{border-color:var(--ui)} .suite b{display:block;font-size:16px;font-weight:700;margin-bottom:3px} .suite span{font-size:14px;color:var(--ink-2);line-height:1.4} @media (max-width:560px){.menu a{padding:13px 11px;font-size:13.5px}.tools{top:49px}}