/* ==========================================================================
   Politeia — feuille de style
   Charte : aplats bleu #1818A0, rouge #ED2A15 et beige #F4EFEA ; titres en
   gothique géométrique (Questrial, à la place de Century Gothic), texte en Lora.
   Règles : ni rouge sur bleu, ni bleu sur rouge ; petits textes jamais en rouge
   ni sur du rouge. Les graphiques de résultats s'affranchissent de la charte
   (couleurs des partis, fond clair) pour rester lisibles.
   ========================================================================== */

/* ---------- Polices (hébergées sur le site, rien n'est chargé ailleurs) ---------- */
@font-face{font-family:"Questrial";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/questrial-latin-400-normal.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:"Questrial";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/questrial-latin-ext-400-normal.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}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/lora-latin-400-normal.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:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/lora-latin-ext-400-normal.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}
@font-face{font-family:"Lora";font-style:normal;font-weight:700;font-display:swap;src:url("../polices/lora-latin-700-normal.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:"Lora";font-style:normal;font-weight:700;font-display:swap;src:url("../polices/lora-latin-ext-700-normal.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}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../polices/lora-latin-400-italic.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:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url("../polices/lora-latin-ext-400-italic.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}
/* Drapeau français de Twemoji (CC BY 4.0), réduit à ce seul drapeau : Windows n'affiche pas les émojis drapeaux. */
@font-face{font-family:"Drapeau";font-style:normal;font-weight:400;font-display:swap;src:url("../polices/drapeau-fr.woff2") format("woff2");unicode-range:U+1F1EB,U+1F1F7}

/* ---------- Jetons ---------- */
:root,:host{
  --rouge:#ED2A15;
  --bleu:#1818A0;
  --beige:#F4EFEA;
  --beige-clair:#FBF8F4;
  --beige-fonce:#E7DED4;
  --bleu-nuit:#10107A;
  --bleu-survol:#2626B4;
  --encre-douce:#3A3A8C;
  --brun:#4A3F35;
  --trait:rgba(24,24,160,.18);
  --trait-fort:rgba(24,24,160,.35);
  --trait-beige:rgba(244,239,234,.32);
  --f-titre:"Questrial","Century Gothic","URW Gothic","Avant Garde",Futura,sans-serif;
  --f-texte:"Lora",Georgia,"Times New Roman",serif;
  --f-math:"Latin Modern Math","STIX Two Math","Cambria Math",math,serif;
  --gout:max(16px,4vw);
  --barre:56px;
  --marge-haut:10px;
  /* Hauteur occupée par l'en-tête flottant : marge, barre, marge */
  --h-tot:calc(env(safe-area-inset-top,0px) + var(--marge-haut) * 2 + var(--barre));
  --focus:var(--bleu);
  --duree:.28s;
  --duree-entete:.45s;
  color-scheme:light;
}
@media (min-width:760px){:root,:host{--barre:60px;--marge-haut:14px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--h-tot) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}}
body{margin:0;padding-top:var(--h-tot);background:var(--beige);color:var(--bleu);font-family:var(--f-texte);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column}
body.menu-ouvert{overflow:hidden}
main{flex:1}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:400;line-height:1.12;margin:0;text-wrap:balance}
p{margin:0}
b,strong,th{font-weight:400}
/* Gras limité aux mots-clés demandés de la méthodologie (la charte exclut Lora en gras ailleurs) */
.puces-fleches strong{font-weight:700}
em,cite{font-style:italic}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gout)}
.etroit{max-width:820px}
.sur-bleu{background:var(--bleu);color:var(--beige);--focus:var(--beige)}
.sur-rouge{background:var(--rouge);color:var(--beige);--focus:var(--beige)}
.evitement{position:absolute;left:8px;top:-60px;z-index:100;background:var(--bleu);color:var(--beige);padding:.6em 1em;border-radius:999px;font-family:var(--f-titre);text-decoration:none}
.evitement:focus{top:8px}

/* ---------- Sélection de texte aux couleurs de Politeia ---------- */
::selection{background:var(--bleu);color:var(--beige)}
.sur-bleu ::selection,.sur-rouge ::selection,.confiance ::selection,.menu ::selection,.code-lien ::selection,.suspense ::selection,.entete ::selection{background:var(--beige);color:var(--bleu)}

/* ---------- Liens et survol ---------- */
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--trait-fort);transition:text-decoration-color var(--duree),text-decoration-thickness var(--duree),text-underline-offset var(--duree),color var(--duree)}
a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px;text-underline-offset:.24em}
.sur-bleu a,.sur-rouge a,.menu a{text-decoration-color:var(--trait-beige)}
.sur-bleu a:hover,.sur-rouge a:hover,.menu a:hover{text-decoration-color:currentColor}
a.nu{text-decoration:none}

/* ---------- Flèches de la palette secondaire ---------- */
.fl{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle;overflow:visible;transition:transform var(--duree)}
.fl.diag{transform:rotate(-135deg)}
.fl.droite{transform:rotate(-90deg)}

/* ---------- Boutons pilules ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-titre);font-size:1rem;line-height:1.1;padding:.75em 1.4em;min-height:44px;border-radius:999px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;transition:background-color var(--duree),color var(--duree),border-color var(--duree),transform var(--duree),box-shadow var(--duree);text-align:center}
.pill:hover{text-decoration:none;transform:translateY(-1px)}
.pill:active{transform:none}
.pill.beige{background:var(--beige);color:var(--bleu)}
.pill.beige:hover{background:var(--beige-clair);box-shadow:0 6px 18px -8px rgba(0,0,40,.55)}
.pill.bleu{background:var(--bleu);color:var(--beige)}
.pill.bleu:hover{background:var(--bleu-survol);box-shadow:0 6px 18px -10px rgba(24,24,160,.8)}
.pill.ligne{background:transparent;color:var(--bleu);border-color:var(--bleu)}
.pill.ligne:hover{background:var(--bleu);color:var(--beige)}
.pill.ligne-beige{background:transparent;color:var(--beige);border-color:var(--beige)}
.pill.ligne-beige:hover{background:var(--beige);color:var(--bleu)}
.pill.petit{font-size:.88rem;padding:.5em 1em;min-height:36px}
.pill[disabled],.pill[aria-disabled="true"]{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}
.pill.bleu[disabled]:hover{background:var(--bleu)}
.pill.ligne[aria-disabled="true"]:hover{background:transparent;color:var(--bleu)}
.rangee{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.titre-lien{font-size:clamp(1.5rem,4vw,1.9rem);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em}
.lien-fleche{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-titre)}
.lien-fleche .fl{font-size:.9em}

/* ---------- En-tête flottant ----------
   En haut de page, l'en-tête se fond dans la première section : ni fond ni
   bord, seuls le logo et le menu apparaissent. Dès le premier défilement, une
   barre aux bords arrondis se dévoile, en retrait des bords de l'écran de la
   même marge que le contenu, avec derrière elle un flou dégradé qui estompe le
   contenu qui passe dessous. Aucune ombre.
   Couleur de la barre : bleue sur les pages, rouge aux résultats et sur les
   fiches, bleue quand le menu est ouvert. Pendant le test, l'en-tête n'est pas
   flottant : il reste en haut de l'écran, intégré à la page. */
.entete{position:fixed;top:0;left:0;right:0;z-index:60;padding:calc(env(safe-area-inset-top,0px) + var(--marge-haut)) var(--gout) 0;pointer-events:none}
/* Calque sous l'en-tête (js/calque-entete.js) : opaque jusqu'au bas de la barre, il masque
   le contenu qui défile, puis s'efface sur 24 pixels, comme le haut de la scène du questionnaire.
   Les fonds des blocs y sont redessinés à leur place : seules les couleurs passent sous l'en-tête. */
.calque-entete{position:fixed;top:0;left:0;right:0;height:calc(var(--h-tot) - var(--marge-haut) + 24px);z-index:45;pointer-events:none;overflow:hidden;background:var(--beige);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 24px),transparent 100%)}
.calque-entete>div{position:absolute;box-sizing:border-box}
body.defile .calque-entete{opacity:1;visibility:visible;transition:opacity .3s ease}
body[data-vue="test"] .calque-entete{display:none}
.entete-barre{pointer-events:auto;position:relative;z-index:1;max-width:calc(1120px - 2 * var(--gout));height:var(--barre);margin-inline:auto;padding-inline:4px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border-radius:999px;
  background-color:rgba(24,24,160,0);color:var(--beige);--focus:var(--beige);box-shadow:inset 0 0 0 1px rgba(244,239,234,0);
  transition:background-color var(--duree-entete) ease,color var(--duree-entete) ease,box-shadow var(--duree-entete) ease}
body.defile .entete-barre{background-color:var(--bleu);box-shadow:inset 0 0 0 1px rgba(244,239,234,.16)}
body.defile[data-vue="resultats"] .entete-barre,body.defile[data-vue="candidat"] .entete-barre{background-color:var(--rouge);box-shadow:inset 0 0 0 1px rgba(244,239,234,.2)}
/* Sur fond beige (test, fiche candidat en haut de page) : logo rouge, menu bleu */
body[data-vue="test"] .entete-barre,body[data-vue="candidat"]:not(.defile) .entete-barre{color:var(--bleu);--focus:var(--bleu)}
body[data-vue="test"] .entete{position:absolute}
body[data-vue="test"] .entete-barre{background-color:rgba(24,24,160,0);box-shadow:none}
body.menu-ouvert .entete-barre,body.menu-ouvert[data-vue="test"] .entete-barre{background-color:var(--bleu);color:var(--beige);--focus:var(--beige);box-shadow:inset 0 0 0 1px rgba(244,239,234,.16)}
.burger{position:relative;width:48px;height:48px;background:none;border:0;cursor:pointer;padding:0;border-radius:50%;transition:background-color var(--duree)}
@media (hover:hover){.burger:hover{background:rgba(244,239,234,.12)}body[data-vue="test"]:not(.menu-ouvert) .burger:hover,body[data-vue="candidat"]:not(.defile):not(.menu-ouvert) .burger:hover{background:var(--trait)}}
.burger span:not(.sr){position:absolute;left:13px;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform var(--duree),opacity var(--duree),top var(--duree)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:23px}.burger span:nth-child(3){top:29px}
.burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.burger[aria-expanded="true"] span:nth-child(3){top:23px;transform:rotate(-45deg)}
.logo-lien{justify-self:center;display:block;padding:6px;line-height:0;text-decoration:none;border-radius:10px}
.logo{width:124px;height:auto;aspect-ratio:1000/304.17;fill:currentColor;display:block}
.entete .logo{width:112px;color:var(--beige);transition:color var(--duree-entete) ease}
body[data-vue="test"] .entete .logo,body[data-vue="candidat"]:not(.defile) .entete .logo{color:var(--rouge)}
body.menu-ouvert .entete .logo{color:var(--beige)}
@media (min-width:760px){.entete .logo{width:128px}}
/* Première section glissée sous l'en-tête, jusqu'en haut de l'écran */
.sous-entete{margin-top:calc(-1 * var(--h-tot));padding-top:calc(var(--h-tot) + var(--haut,32px))!important}

/* ---------- Menu : un panneau flottant, sous la barre, de la même largeur ---------- */
.menu{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + var(--marge-haut) + var(--barre) + 8px);z-index:55;padding-inline:var(--gout);pointer-events:none;visibility:hidden;opacity:0;transform:translateY(-10px) scale(.985);transform-origin:50% 0;transition:opacity var(--duree) ease,transform var(--duree) cubic-bezier(.2,.8,.2,1),visibility 0s linear var(--duree)}
.menu.ouvert{visibility:visible;opacity:1;transform:none;transition:opacity var(--duree) ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility 0s}
.menu-corps{pointer-events:auto;max-width:calc(1120px - 2 * var(--gout));margin-inline:auto;max-height:calc(100vh - var(--h-tot) - 24px);max-height:calc(100dvh - var(--h-tot) - 24px);overflow-y:auto;overscroll-behavior:contain;background:var(--bleu);color:var(--beige);--focus:var(--beige);border-radius:28px;box-shadow:inset 0 0 0 1px rgba(244,239,234,.16),0 30px 60px -28px rgba(5,5,50,.65);display:grid;gap:26px;padding:14px clamp(18px,3vw,30px) 24px}
@media (min-width:860px){.menu-corps{grid-template-columns:1.2fr .8fr;align-items:end;padding:22px 34px 30px}}
.menu-liens{list-style:none;margin:0;padding:0;display:grid}
.menu-liens li{border-bottom:1px solid var(--trait-beige);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.menu-liens li:last-child{border-bottom:0}
.menu.ouvert .menu-liens li{opacity:1;transform:none}
.menu.ouvert .menu-liens li:nth-child(2){transition-delay:.03s}.menu.ouvert .menu-liens li:nth-child(3){transition-delay:.06s}.menu.ouvert .menu-liens li:nth-child(4){transition-delay:.09s}.menu.ouvert .menu-liens li:nth-child(5){transition-delay:.12s}.menu.ouvert .menu-liens li:nth-child(6){transition-delay:.15s}.menu.ouvert .menu-liens li:nth-child(7){transition-delay:.18s}.menu.ouvert .menu-liens li:nth-child(8){transition-delay:.21s}
.menu-liens a{display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--f-titre);font-size:clamp(1.25rem,4.4vw,1.7rem);line-height:1.2;text-decoration:none;padding-block:.58em}
.menu-liens a .fl{font-size:.8em;opacity:0;transform:rotate(-135deg) translate(6px,-6px);transition:opacity var(--duree),transform var(--duree)}
.menu-liens a:hover .fl,.menu-liens a[aria-current="page"] .fl{opacity:1;transform:rotate(-135deg)}
.menu-liens a:hover span,.menu-liens a[aria-current="page"] span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.menu-cote{display:grid;gap:18px;justify-items:start;border-top:1px solid var(--trait-beige);padding-top:18px}
@media (min-width:860px){.menu-cote{border-top:0;padding-top:0}}
.menu-pied{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.95rem}
.menu .iso-menu{width:72px;height:auto;aspect-ratio:230.74/304.17;fill:var(--beige);opacity:.95}
.menu-voile{position:fixed;inset:0;z-index:50;background:rgba(10,10,60,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity var(--duree),visibility 0s linear var(--duree)}
.menu-voile.ouvert{opacity:1;visibility:visible;transition:opacity var(--duree),visibility 0s}

/* ---------- Accueil : héros ---------- */
.hero{--haut:clamp(24px,5vw,64px);position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(48px,8vw,104px)}
.hero-fond{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 55% at 88% 22%,rgba(52,52,196,.85) 0%,rgba(52,52,196,0) 70%),
    radial-gradient(70% 80% at -5% 105%,var(--bleu-nuit) 0%,rgba(16,16,122,0) 72%),
    repeating-linear-gradient(180deg,rgba(244,239,234,0) 0 47px,rgba(244,239,234,.045) 47px 48px),
    var(--bleu)}
.hero-filigrane{position:absolute;left:-7%;bottom:-34%;width:min(72vw,640px);height:auto;aspect-ratio:230.74/304.17;fill:var(--bleu-nuit);opacity:.55}
.hero-grille{display:grid;gap:clamp(32px,5vw,40px);align-items:center}
@media (min-width:900px){.hero-grille{grid-template-columns:1.1fr .9fr}}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.3rem);line-height:1.02}
.hero h1 .l1,.hero h1 .l2{display:block}
.hero h1 .l2{font-size:.56em;line-height:1.12;margin-top:.42em;max-width:16em}
.hero-texte{display:grid;gap:22px;justify-items:start}
.hero-sous{font-size:clamp(1.12rem,2.2vw,1.3rem);max-width:34ch}
/* Le nombre d'utilisateurs, mis en avant */
.hero-public{display:grid;gap:2px;margin-top:6px;padding-top:16px;border-top:1px solid var(--trait-beige);min-width:min(100%,300px)}
.hero-public strong{font-family:var(--f-titre);font-weight:400;font-size:clamp(3rem,10vw,4.6rem);line-height:.95;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hero-public span{font-family:var(--f-titre);font-size:clamp(1.05rem,2.6vw,1.25rem);opacity:.92}
.hero-public .pre{font-family:var(--f-texte);font-size:1.12rem;line-height:1.2;opacity:.92}
/* Carte : aperçu des positions sur trois axes */
.hero-carte{position:relative;justify-self:center;width:100%;max-width:440px;background:var(--beige);color:var(--bleu);--focus:var(--bleu);border-radius:22px;padding:22px 22px 20px;display:grid;gap:18px;box-shadow:14px 14px 0 0 var(--bleu-nuit)}
@media (min-width:900px){.hero-carte{justify-self:end;transform:rotate(1.5deg)}}
.hero-carte-tete{display:flex;align-items:center;gap:14px;border-bottom:1.5px solid var(--bleu);padding-bottom:14px}
.hero-iso{width:44px;height:auto;aspect-ratio:230.74/304.17;fill:var(--rouge);flex:none}
.hero-carte-tete p{font-family:var(--f-titre);font-size:1.3rem;line-height:1.15}
.hero-axes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hero-axes li{display:grid;gap:6px}
.ha-nom{font-family:var(--f-titre);font-size:.95rem}
.ha-piste{position:relative;height:18px;margin-inline:8px;background:linear-gradient(var(--trait-fort),var(--trait-fort)) center/100% 2px no-repeat}
.ha-piste::before{content:"";position:absolute;inset:4px 0;--g:linear-gradient(var(--trait-fort),var(--trait-fort));background:var(--g) 0 0/1.5px 100% no-repeat,var(--g) 16.667% 0/1.5px 100% no-repeat,var(--g) 33.333% 0/1.5px 100% no-repeat,var(--g) 50% 0/1.5px 100% no-repeat,var(--g) 66.667% 0/1.5px 100% no-repeat,var(--g) 83.333% 0/1.5px 100% no-repeat,var(--g) 100% 0/1.5px 100% no-repeat}
.ha-piste i{position:absolute;top:50%;left:var(--x);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--bleu);opacity:.3}
.ha-piste b{position:absolute;top:50%;left:var(--u);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 3px var(--beige);animation:haPlace 1.1s cubic-bezier(.22,1,.36,1) var(--d) both}
@keyframes haPlace{from{left:50%;transform:scale(.4);opacity:0}}
.ha-poles{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;font-style:italic;color:var(--encre-douce)}
.hero-faits{list-style:none;margin:0;padding:14px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--trait)}
.hero-faits li{display:grid;gap:2px}
.hero-faits strong{font-family:var(--f-titre);font-size:clamp(1.9rem,6vw,2.4rem);line-height:1;color:var(--rouge);font-variant-numeric:tabular-nums}
.hero-faits span{font-size:.9rem}
.hero-temps{font-style:italic;font-size:.95rem;color:var(--encre-douce)}

.presentation{padding-block:clamp(44px,7vw,92px) clamp(36px,6vw,72px)}
.presentation-grille{display:grid;gap:26px}
.presentation h2{font-size:clamp(1.7rem,4.5vw,2.4rem)}
.lead{font-size:clamp(1.15rem,2.3vw,1.4rem);line-height:1.55;max-width:46ch}
.cadenas{display:flex;gap:.6em;align-items:flex-start;font-style:italic;max-width:56ch}
.cadenas svg{width:1.1em;height:1.1em;flex:none;margin-top:.25em;fill:none;stroke:currentColor;stroke-width:2}
.duo{display:grid;gap:14px;margin-top:8px}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr}}
.bloc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:22px 24px;border-radius:4px;text-decoration:none;color:var(--beige);--focus:var(--bleu);overflow:hidden;transition:transform var(--duree),box-shadow var(--duree)}
.bloc:hover{transform:translateY(-2px);box-shadow:0 18px 32px -22px rgba(8,8,60,.7)}
.bloc.rouge{background:var(--rouge)}
.bloc.bleu{background:var(--bleu)}
.bloc h3{font-size:clamp(2rem,5.5vw,2.7rem);line-height:1.05}
.bloc .fl{position:absolute;top:20px;right:22px;font-size:58px;color:var(--beige)}
.bloc:hover .fl.diag{transform:rotate(-135deg) translate(-4px,4px)}
.bloc p{font-size:1rem;margin-top:.5em;max-width:32ch}

/* Ils parlent de nous : les logos sur une seule ligne, en bleu (rouge au survol).
   Si la ligne déborde, elle défile lentement ; le survol l'arrête. */
.section-medias{padding-block:clamp(36px,6vw,64px);text-align:center;border-top:1px solid var(--trait)}
.section-medias h2{font-size:clamp(1.4rem,3.6vw,1.8rem);margin-bottom:clamp(22px,4vw,34px)}
.medias-bande{position:relative;overflow:hidden;max-width:1060px;margin-inline:auto}
.logos-medias{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;width:max-content}
.logos-medias li{flex:none;margin-inline-end:clamp(30px,4.5vw,52px)}
.medias-bande:not(.defile) .logos-medias li:last-child{margin-inline-end:0}
.logos-medias a{display:inline-flex;align-items:center;min-height:56px;text-decoration:none}
.logo-media{height:var(--h,36px);width:auto;max-width:160px;object-fit:contain;filter:url(#mono-bleu)}
a:hover .logo-media,a:focus-visible .logo-media{filter:url(#mono-rouge)}
.medias-bande.defile{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.medias-bande.defile .logos-medias{margin:0;animation:mediasDefile var(--duree-defil,40s) linear infinite}
.medias-bande.defile:hover .logos-medias,.medias-bande.defile:focus-within .logos-medias{animation-play-state:paused}
@keyframes mediasDefile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.medias-bande.defile{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.medias-bande.defile .logos-medias{animation:none}}

/* Pourquoi faire confiance à Politeia ? */
.confiance{padding-block:clamp(48px,8vw,104px);background:linear-gradient(165deg,var(--bleu) 0%,var(--bleu) 55%,var(--bleu-nuit) 100%);color:var(--beige);--focus:var(--beige)}
.confiance h2{font-size:clamp(2rem,5.5vw,3.2rem);max-width:18ch}
.confiance-intro{font-size:1.12rem;max-width:56ch;margin-top:16px;opacity:.95}
.piliers{list-style:none;margin:clamp(28px,5vw,48px) 0 0;padding:0;display:grid;gap:14px}
@media (min-width:860px){.piliers{grid-template-columns:repeat(3,1fr);gap:18px}}
.pilier{position:relative;display:grid;gap:12px;align-content:start;padding:24px 22px 26px;border:1px solid var(--trait-beige);border-radius:20px;background:linear-gradient(180deg,rgba(244,239,234,.07),rgba(244,239,234,0))}
.pilier h3{display:flex;align-items:center;gap:.5em}
.pilier h3 .fl{font-size:.8em;flex:none}
.pilier h3{font-size:clamp(1.35rem,3vw,1.6rem)}
.pilier p{font-size:1rem;line-height:1.55}
.chiffres{list-style:none;margin:clamp(28px,5vw,44px) 0 0;padding:clamp(20px,3vw,28px) 0 0;display:grid;gap:18px;border-top:1px solid var(--trait-beige)}
@media (min-width:640px){.chiffres{grid-template-columns:repeat(3,1fr)}}
.chiffre{display:grid;gap:4px}
.chiffre strong{font-family:var(--f-titre);font-size:clamp(2.2rem,6vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums}
.chiffre span{font-size:.98rem;opacity:.92;max-width:26ch}
.chiffre strong span{font-size:inherit;opacity:1;max-width:none}
.chiffre strong .pre{font-family:var(--f-texte);font-size:1.05rem;opacity:.92;white-space:nowrap}
.confiance .rangee{margin-top:clamp(24px,4vw,36px)}

/* ---------- Pied de page ---------- */
body[data-vue="test"] .pied{display:none}
.pied{border-top:2px solid var(--bleu);padding-block:40px calc(28px + env(safe-area-inset-bottom,0px));background:var(--beige)}
.pied-grille{display:grid;gap:28px;align-items:end}
.pied .logo{width:150px;color:var(--rouge)}
.pied-slogan{font-style:italic;margin-top:10px}
@media (min-width:560px){.pied-slogan{white-space:nowrap}}
.drapeau{font-family:"Drapeau","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;font-weight:400}
.pied-liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.pied-credits{display:grid;gap:2px;font-size:.92rem;color:var(--encre-douce);max-width:62ch}
.pied .iso{width:118px;height:auto;aspect-ratio:230.74/304.17;fill:var(--bleu)}
.pied-gauche{display:grid;gap:18px}
@media (min-width:760px){.pied-grille{grid-template-columns:1fr auto}.pied .iso{width:150px}}
.reseaux{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.reseaux a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--trait-fort);color:var(--bleu);text-decoration:none;transition:background-color var(--duree),color var(--duree),border-color var(--duree)}
.reseaux a:hover{background:var(--bleu);border-color:var(--bleu);color:var(--beige)}
.ic{width:20px;height:20px;fill:currentColor;display:block}

/* ---------- Pages intérieures ---------- */
.page-tete{--haut:clamp(32px,6vw,64px);padding-block:clamp(32px,6vw,64px);background:var(--bleu)}
.page-tete .wrap{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.page-tete h1{font-size:clamp(2.4rem,8vw,4.2rem);line-height:1}
.page-tete .intro{font-size:1.15rem;margin-top:16px;max-width:52ch}
.iso-deco{width:clamp(64px,14vw,120px);height:auto;aspect-ratio:230.74/304.17;fill:var(--beige)}
.page-corps{padding-block:clamp(32px,6vw,64px) clamp(48px,8vw,96px)}
.page-corps>.wrap{display:grid;gap:52px}
.section{display:grid;gap:16px;scroll-margin-top:calc(var(--h-tot) + 20px)}
.section h2{font-size:clamp(1.6rem,4vw,2.1rem)}
.section h3{font-size:1.3rem;margin-top:12px}
.section p,.section li{max-width:68ch}
.section ul,.section ol{margin:0;padding-left:1.2em;display:grid;gap:8px}
.section.secondaire{padding-top:28px;border-top:1px solid var(--trait)}
.section.secondaire h2{font-size:1.4rem}
.puces-fleches{list-style:none;padding-left:0!important}
.puces-fleches li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.puces-fleches .fl{color:var(--rouge);font-size:15px;margin-top:.35em;transform:rotate(-90deg)}
.a-completer{display:inline-block;font-family:var(--f-titre);font-style:normal;font-size:.78rem;line-height:1;padding:.4em .75em;border-radius:999px;border:1.2px dashed currentColor;vertical-align:middle;margin-left:.3em;white-space:nowrap;background:none;color:inherit}
.note{font-size:.9rem;color:var(--encre-douce);font-style:italic}
.tableau-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1.5px solid var(--bleu)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.95rem}
.parametres{min-width:0}
th{font-family:var(--f-titre);text-align:left;padding:.65em .7em;border-bottom:1.5px solid var(--bleu);vertical-align:bottom}
td{padding:.6em .7em;border-bottom:1px solid var(--trait);vertical-align:top}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cartes{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.carte{background:var(--beige-clair);border:1px solid var(--trait);border-radius:16px;padding:18px;display:grid;gap:8px;align-content:start}
.carte h3{margin:0;font-size:1.25rem}
.carte-titre{font-family:var(--f-titre);font-size:1.35rem}
.cartes.createurs{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.createur{justify-items:start}
.portrait{width:120px;height:120px;border-radius:50%;object-fit:cover;display:block;background:var(--beige-fonce)}
@media (max-width:420px){.portrait{width:96px;height:96px}}
.copie{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.copie-valeur{font-family:var(--f-titre);font-size:clamp(1.15rem,4.5vw,1.6rem);user-select:all;word-break:break-all}
.aide{font-size:.95rem;font-style:italic;color:var(--encre-douce);min-height:1.5em}
.millesime{display:grid;gap:12px;border-radius:20px;padding:22px}
.millesime.archive{background:var(--beige-clair);border:1px solid var(--trait)}
.bandeau-archive{font-family:var(--f-titre);background:var(--bleu);color:var(--beige);padding:.6em 1em;border-radius:10px;font-size:.98rem}
.millesime .annee{font-family:var(--f-titre);font-size:3rem;line-height:1}
.liste-liens{list-style:none;margin:0;padding:0!important;display:grid!important;gap:0!important;border-top:1.5px solid var(--bleu)}
.liste-liens li{border-bottom:1px solid var(--trait);max-width:none!important}
.liste-liens a{display:grid;gap:4px;padding-block:16px;text-decoration:none}
.liste-liens .titre{font-family:var(--f-titre);font-size:1.3rem}
.liste-liens .desc{font-style:italic;color:var(--encre-douce)}
.liste-liens a:hover .titre{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em}
.liste-liens .fl{display:none}
@media (min-width:760px){.liste-liens a{grid-template-columns:260px 1fr auto;align-items:baseline;gap:20px}.liste-liens .fl{display:inline-block;transform:rotate(-135deg);font-size:18px}}

/* À propos */
.comite{list-style:none;padding:0!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px!important}
.comite li{background:var(--beige-clair);border:1px solid var(--trait);border-radius:14px;padding:12px 16px;display:grid;gap:2px;max-width:none!important;align-content:start}
.comite strong{font-family:var(--f-titre);font-size:1.12rem}
.comite span{font-size:.93rem;font-style:italic;color:var(--encre-douce);line-height:1.45}
.merci-grille{display:grid;gap:18px 28px}
@media (min-width:700px){.merci-grille{grid-template-columns:1fr 1fr}}
.merci-groupe{display:grid;gap:10px;align-content:start;border-top:1px solid var(--trait);padding-top:12px}
.merci-groupe h3{font-family:var(--f-texte);font-style:italic;font-size:1rem;margin:0;color:var(--encre-douce)}
.merci{list-style:none;padding:0!important;margin:0;display:flex!important;flex-wrap:wrap;gap:8px!important}
.merci li{font-family:var(--f-titre);background:var(--beige-clair);border:1px solid var(--trait);border-radius:999px;padding:.4em 1em;max-width:none!important}

/* Nous soutenir */
.arguments{list-style:none;padding:0!important;display:grid!important;gap:12px!important}
@media (min-width:700px){.arguments{grid-template-columns:1fr 1fr}}
.arguments li{display:grid;gap:4px;align-content:start;max-width:none!important;padding:16px 18px;border-radius:16px;background:var(--beige-clair);border:1px solid var(--trait)}
.arguments strong{font-family:var(--f-titre);font-size:1.25rem;line-height:1.2}
.arguments span{font-size:.98rem;color:var(--encre-douce)}
.lead-petit{font-size:1.15rem;line-height:1.55}
.don-carte{display:grid;gap:14px;padding:clamp(18px,3vw,26px);border-radius:20px;background:var(--bleu);color:var(--beige);--focus:var(--beige)}
.don-carte .pill.bleu{background:var(--beige);color:var(--bleu)}
.don-carte .pill.bleu:hover{background:var(--beige-clair)}
.don-carte .pill.ligne{color:var(--beige);border-color:var(--beige)}
.don-carte .pill.ligne[aria-disabled="true"]:hover{color:var(--beige)}

/* Nous contacter */
.mail-ligne{display:flex;align-items:center;gap:12px;font-family:var(--f-titre);font-size:clamp(1.2rem,4vw,1.5rem)}
.mail-ligne .ic{width:26px;height:26px;flex:none}
.liste-reseaux{list-style:none;padding:0!important;display:grid!important;gap:0!important;border-top:1.5px solid var(--bleu)}
.liste-reseaux li{border-bottom:1px solid var(--trait);max-width:none!important}
.liste-reseaux a{display:flex;align-items:center;gap:16px;padding-block:14px;text-decoration:none}
.liste-reseaux .ic{width:26px;height:26px;flex:none}
.liste-reseaux a>span{display:grid}
.liste-reseaux strong{font-family:var(--f-titre);font-size:1.2rem}
.liste-reseaux a>span>span{font-style:italic;color:var(--encre-douce);font-size:.95rem}
.liste-reseaux a:hover strong{text-decoration:underline;text-underline-offset:.2em}

/* Pour aller plus loin : lectures */
.livres{list-style:none;padding:0!important;display:grid!important;gap:20px!important}
.livre{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:start;max-width:none!important}
@media (min-width:600px){.livre{grid-template-columns:120px minmax(0,1fr)}}
.livre cite{font-family:var(--f-titre);font-style:normal;font-size:1.25rem;line-height:1.2;display:block;margin-bottom:4px}
.couverture{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px;box-shadow:0 10px 22px -14px rgba(8,8,60,.75)}
.couverture.typo{display:grid;grid-template-rows:auto 1fr auto;gap:6px;padding:12px 10px;background:var(--c);color:var(--beige);font-family:var(--f-titre);line-height:1.15;overflow:hidden}
.couv-auteur{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.couv-titre{font-size:clamp(.9rem,2.4vw,1.05rem);align-self:center;border-top:1px solid rgba(244,239,234,.5);border-bottom:1px solid rgba(244,239,234,.5);padding-block:8px}
.couv-editeur{font-family:var(--f-texte);font-style:italic;font-size:.68rem;opacity:.85}

/* Mentions légales : un intitulé, puis une information par ligne */
.adresse{font-style:normal;line-height:1.75}
.adresse strong{font-weight:700}
/* Confidentialité : tableau des données traitées */
.donnees{display:grid;border-top:1.5px solid var(--bleu)}
.donnee{display:grid;gap:10px;padding-block:18px;border-bottom:1px solid var(--trait)}
.donnee h3{font-size:1.2rem}
.donnee dl{margin:0;display:grid;gap:6px}
.donnee dl>div{display:grid;gap:2px 20px}
@media (min-width:640px){.donnee dl>div{grid-template-columns:9rem minmax(0,1fr)}}
.donnee dt{font-family:var(--f-titre);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce);padding-top:.25em}
.donnee dd{margin:0}

/* Méthodologie : la formule, d'un seul tenant (image SVG produite par MathJax, couleur du texte) */
.formule{background:var(--beige-clair);border:1px solid var(--trait);border-radius:18px;padding:clamp(18px,3.5vw,32px) clamp(12px,3vw,28px);margin:0;color:var(--bleu);min-width:0;max-width:100%}
.formule-image{font-size:clamp(.82rem,2.6vw,1.2rem);overflow-x:auto;-webkit-overflow-scrolling:touch}
.formule-image>svg{display:block;margin-inline:auto;max-width:100%;min-width:min(27rem,100%);height:auto;overflow:visible}
@media (max-width:560px){.formule-image>svg{max-width:none;min-width:27rem}}
.symboles-tableau td{vertical-align:baseline}
.symboles-tableau td.sym{font-size:1.1rem;white-space:nowrap}
.symboles-tableau td:last-child{font-family:var(--f-titre);white-space:nowrap}
.formule figcaption{font-size:.92rem;color:var(--encre-douce);font-style:italic;text-align:center;margin-top:18px}
.symboles{display:grid;gap:10px;margin:0;padding:0}
.symboles div{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:12px;align-items:baseline;border-bottom:1px solid var(--trait);padding-bottom:10px}
.symboles dt{font-family:"Lora",serif;font-style:italic;font-size:1.25rem;text-align:center}
.symboles var,.section var{font-family:"Lora",serif;font-style:italic}
.symboles dd{margin:0;max-width:62ch}
.parametres td:last-child{font-family:var(--f-titre)}
.symboles-tableau var{white-space:nowrap}
.bonus td:first-child{white-space:nowrap;font-family:var(--f-titre)}
.code-lien{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--bleu);color:var(--beige);--focus:var(--beige);border-radius:16px;padding:16px 18px}
.code-lien code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.95rem}
.depliant{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.depliant summary{cursor:pointer;font-family:var(--f-titre);font-size:1.05rem;padding-block:14px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.depliant summary::-webkit-details-marker{display:none}
.depliant summary::after{content:"+";font-size:1.4rem;line-height:1;transition:transform var(--duree)}
.depliant[open] summary::after{transform:rotate(45deg)}
.depliant>div,.depliant>p{margin-bottom:14px}

/* ---------- Test ---------- */
.chargement{padding-block:80px;text-align:center;font-style:italic;color:var(--encre-douce)}
/* Le test tient dans la hauteur de l'écran : progression en haut, boutons en bas,
   la question entre les deux. Seule la question défile quand elle dépasse ; la page
   ne bouge pas, si bien que la transition n'a qu'un seul mouvement. */
body[data-vue="test"]{min-height:0}
.test{--l:780px;height:calc(100vh - var(--h-tot));height:calc(100dvh - var(--h-tot));display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.test .wrap{max-width:var(--l)}
.progression{padding-block:10px 4px}
.progression .wrap{display:grid;gap:10px}
.progression-ligne{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.98rem}
.progression-ligne .num{font-family:var(--f-titre);font-variant-numeric:tabular-nums}
.progression-ligne .axe{font-style:italic;color:var(--encre-douce)}
.barre-prog{height:6px;border-radius:999px;background:var(--trait);overflow:hidden}
.barre-prog span{display:block;height:100%;background:var(--bleu);border-radius:999px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.scene{position:relative;overflow:hidden;min-height:0}
.scene::before,.scene::after{content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none}
.scene::before{top:0;height:18px;background:linear-gradient(180deg,var(--beige),rgba(244,239,234,0))}
.scene::after{bottom:0;height:26px;background:linear-gradient(0deg,var(--beige),rgba(244,239,234,0))}
.q-carte{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-block:24px 30px;min-width:0}
/* Les deux questions se suivent comme deux pages d'un même rouleau : l'ancienne
   monte et sort par le haut pendant que la nouvelle arrive du bas, collée à elle. */
.q-carte.sort-haut,.q-carte.sort-bas{pointer-events:none}
.q-carte.sort-haut{animation:qSortHaut .56s cubic-bezier(.65,0,.35,1) forwards}
.q-carte.entre-bas{animation:qEntreBas .56s cubic-bezier(.65,0,.35,1) both}
.q-carte.sort-bas{animation:qSortBas .56s cubic-bezier(.65,0,.35,1) forwards}
.q-carte.entre-haut{animation:qEntreHaut .56s cubic-bezier(.65,0,.35,1) both}
@keyframes qSortHaut{to{transform:translateY(-100%);opacity:.2}}
@keyframes qEntreBas{from{transform:translateY(100%)}}
@keyframes qSortBas{to{transform:translateY(100%);opacity:.2}}
@keyframes qEntreHaut{from{transform:translateY(-100%)}}
/* Écrans très bas (téléphone à l'horizontale) : retour à une page qui défile. */
@media (max-height:440px){
  .test{height:auto}
  .scene{overflow:visible}.scene::before,.scene::after{display:none}
  .q-carte{position:relative;inset:auto;overflow:visible}
  .q-carte.sort-haut,.q-carte.sort-bas{position:absolute;inset:0 0 auto}
  .actions{position:sticky;bottom:0;z-index:10}
}
.q-titre{font-size:clamp(1.9rem,5.5vw,2.7rem);outline:none}
.q-enonce{font-style:italic;font-size:clamp(1.2rem,3vw,1.45rem);line-height:1.45;margin-top:12px;max-width:40ch}
.q-aide{font-size:.92rem;color:var(--encre-douce);margin-top:14px}
.options{border:0;margin:22px 0 0;padding:0;display:grid;gap:10px;min-width:0}
.opt{position:relative;display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;padding:14px 16px;border:1.5px solid var(--trait);border-radius:18px;background:var(--beige-clair);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,transform .15s;line-height:1.5}
.opt:hover{border-color:var(--bleu);transform:translateX(2px)}
.opt .txt{color:var(--encre-douce)}
.opt em{color:var(--bleu)}
.opt .rond{width:22px;height:22px;border-radius:50%;border:2px solid var(--bleu);margin-top:.15em;background:var(--beige-clair)}
.opt.choisi{background:var(--bleu);border-color:var(--bleu);transform:none}
.opt.choisi .txt,.opt.choisi em{color:var(--beige)}
.opt.choisi .rond{border-color:var(--beige);background:radial-gradient(circle,var(--beige) 0 5px,var(--bleu) 5.6px)}
.opt:focus-within{outline:3px solid var(--bleu);outline-offset:2px}
.actions{padding-block:0 calc(12px + env(safe-area-inset-bottom,0px));background:var(--beige)}
.actions .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--trait);padding-top:12px}
.btn-retour{background:none;border:0;cursor:pointer;font-family:var(--f-titre);font-size:1rem;padding:.7em .2em;min-height:44px;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--trait-fort);transition:text-decoration-color var(--duree)}
.btn-retour:hover{text-decoration-color:currentColor}

/* ---------- Suspense avant les résultats ---------- */
.suspense{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 24px) var(--gout) calc(env(safe-area-inset-bottom,0px) + 24px);background:radial-gradient(80% 60% at 50% 0%,#2323ac 0%,var(--bleu) 45%,var(--bleu-nuit) 100%);color:var(--beige);--focus:var(--beige);animation:susEntre .35s ease both}
.suspense.fin{animation:susSort .7s cubic-bezier(.7,0,.3,1) forwards}
@keyframes susEntre{from{opacity:0}}
@keyframes susSort{to{clip-path:inset(0 0 100% 0)}}
.suspense-corps{width:min(560px,100%);display:grid;gap:22px;justify-items:center;text-align:center}
.suspense-iso{width:58px;height:auto;aspect-ratio:230.74/304.17;fill:var(--beige);animation:susPouls 1.2s ease-in-out infinite alternate}
@keyframes susPouls{from{transform:scale(.92);opacity:.8}to{transform:scale(1.04);opacity:1}}
.suspense-axes{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:9px}
.suspense-axes li{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:14px;align-items:center;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;transition-delay:var(--d)}
.suspense.en-cours .suspense-axes li{opacity:1;transform:none}
.suspense-axes .s-nom{font-family:var(--f-titre);font-size:.9rem;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-piste{position:relative;height:16px;margin-inline:9px;background:linear-gradient(var(--trait-beige),var(--trait-beige)) center/100% 2px no-repeat}
.s-piste i{position:absolute;top:50%;left:var(--x);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--beige);opacity:0;transition:opacity .4s ease;transition-delay:var(--dc)}
.suspense.candidats .s-piste i{opacity:.4}
.s-piste b{position:absolute;top:50%;left:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 3px var(--beige);opacity:0;transition:left .9s cubic-bezier(.22,1,.36,1),opacity .3s ease;transition-delay:calc(var(--d) + .15s)}
.suspense.en-cours .s-piste b{left:var(--u);opacity:1}
.suspense-texte{font-family:var(--f-titre);font-size:clamp(1.15rem,3.6vw,1.45rem);min-height:1.5em}
.suspense-texte span{display:inline-block;animation:susTexte .35s ease both}
@keyframes susTexte{from{opacity:0;transform:translateY(6px)}}
.suspense-passer{background:none;border:0;cursor:pointer;color:var(--beige);font-family:var(--f-titre);font-size:.92rem;text-decoration:underline;text-underline-offset:.2em;opacity:.8;min-height:44px;padding:0 .6em}
@media (max-width:480px){.suspense-axes li{grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:10px}.suspense-axes .s-nom{font-size:.8rem}}

/* ---------- Résultats ---------- */
.pct{font-family:var(--f-titre);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.pct .pc{font-size:.55em}
.visage{position:relative;display:grid;place-items:center;width:var(--t,64px);aspect-ratio:1;border-radius:50%;overflow:hidden;flex:none;background:var(--beige-fonce);color:var(--bleu);font-family:var(--f-titre);font-size:calc(var(--t,64px) * .36);box-shadow:0 0 0 3px var(--c,var(--bleu))}
.visage img{width:100%;height:100%;object-fit:cover}
/* Podium */
.podium{padding-block:clamp(24px,5vw,44px) clamp(36px,6vw,64px);text-align:center;overflow:hidden}
.podium h1{font-size:clamp(1.8rem,5.4vw,2.6rem)}
.podium-sous{font-style:italic;margin-top:8px;opacity:.92}
.pod-grille{list-style:none;margin:clamp(22px,4vw,34px) auto 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"deux un trois";gap:clamp(8px,2vw,18px);max-width:820px;align-items:end}
.pod{grid-area:var(--zone);display:grid;justify-items:center;gap:10px;min-width:0}
.pod-rang{font-family:var(--f-titre);font-size:.95rem;opacity:.9}
.pod .pct{font-size:clamp(2.2rem,9vw,4rem)}
.pod.premier .pct{font-size:clamp(2.8rem,12vw,5.4rem)}
.pod-carte{background:var(--beige);color:var(--bleu);border-radius:18px;padding:16px 8px 14px;display:grid;gap:10px;justify-items:center;width:100%;--focus:var(--bleu);min-width:0}
.pod.premier .pod-carte{padding-top:22px;padding-bottom:20px}
.pod .visage{--t:clamp(58px,15vw,96px)}
.pod.premier .visage{--t:clamp(72px,19vw,124px)}
.pod-nom{font-family:var(--f-titre);font-size:clamp(.95rem,2.8vw,1.2rem);line-height:1.2;overflow-wrap:anywhere}
.pod-parti{font-size:clamp(.78rem,2.2vw,.9rem);font-style:italic;color:var(--encre-douce);line-height:1.3}
.podium.anime .pod{opacity:0;transform:translateY(36px) scale(.96)}
.podium.anime.revele .pod{opacity:1;transform:none;transition:opacity .55s ease,transform .7s cubic-bezier(.22,1.2,.36,1)}
.podium.anime.revele .pod.troisieme{transition-delay:.1s}
.podium.anime.revele .pod.deuxieme{transition-delay:.55s}
.podium.anime.revele .pod.premier{transition-delay:1.05s}
.podium.anime h1{opacity:0;transform:translateY(10px)}
.podium.anime.revele h1{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (max-width:520px){.pod-carte .pill{padding-inline:.8em}.pod-parti{display:none}}
/* Classement complet */
.tci{padding-block:clamp(32px,5vw,48px) 20px}
.tci h2,.positions h2,.partage h2{text-align:center}
.tci-liste{list-style:none;margin:22px auto 0;padding:0;max-width:860px;border-top:1.5px solid var(--bleu)}
.res{display:grid;grid-template-columns:2.6rem 48px minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding-block:12px;border-bottom:1px solid var(--trait)}
.res-rang{font-family:var(--f-titre);font-variant-numeric:tabular-nums;color:var(--encre-douce);text-align:right;line-height:1.1}
/* Ex aequo : même rang, mention discrète sous le numéro */
.exa{font-family:var(--f-texte);font-style:italic;font-size:.8em;white-space:nowrap}
.res-rang .exa{display:block;font-size:.66rem;white-space:normal;margin-top:2px}
.res .visage{--t:48px;box-shadow:0 0 0 2.5px var(--c,var(--bleu))}
.res-qui{display:grid;gap:6px;min-width:0}
.res-nom{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;line-height:1.25}
.res-nom a{font-family:var(--f-titre);font-size:1.08rem}
.res-nom .parti{font-size:.86rem;font-style:italic;color:var(--encre-douce)}
.res-barre{height:6px;border-radius:999px;background:var(--trait);overflow:hidden}
.res-barre span{display:block;height:100%;width:var(--p);background:var(--bleu);border-radius:999px}
.res .pct{font-size:1.75rem;text-align:right;min-width:4.2ch}
@media (min-width:560px){.res .pct{font-size:2rem}}
.note-res{max-width:860px;margin:18px auto 0;font-style:italic;color:var(--encre-douce);font-size:.95rem}
/* Appel au don, discret mais visible */
.coup-pouce{padding-block:8px 8px}
.coup-pouce .wrap{max-width:860px}
.coup-pouce-carte{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:16px 18px;border-radius:18px;background:var(--beige-fonce)}
.coup-pouce-carte .iso-cp{width:30px;height:auto;aspect-ratio:230.74/304.17;fill:var(--rouge);flex:none}
.coup-pouce-carte p{flex:1 1 280px;font-size:1rem;line-height:1.5}
.coup-pouce-carte strong{font-weight:700}
/* Vos positions : un graphique par axe */
.positions{padding-block:clamp(36px,6vw,56px) 24px}
.positions-intro{text-align:center;max-width:60ch;margin:10px auto 0;color:var(--encre-douce)}
.filtres-bascule{display:flex;justify-content:center;margin-top:20px}
.filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:14px auto 0}
.puce-c{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:.35em .9em .35em .6em;border-radius:999px;border:1.5px solid var(--trait-fort);background:transparent;color:var(--bleu);font-family:var(--f-titre);font-size:.9rem;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.puce-c .fl{font-size:16px;color:var(--c);opacity:.45;transition:opacity .2s}
.puce-c[aria-pressed="true"]{background:var(--beige-clair);border-color:var(--bleu)}
.puce-c[aria-pressed="true"] .fl{opacity:1}
.puce-c:hover{border-color:var(--bleu)}
.puce-c .ini{font-size:.72rem;letter-spacing:.04em;color:var(--encre-douce)}
.graphe{list-style:none;margin:20px auto 0;padding:4px clamp(14px,3vw,26px);max-width:900px;background:var(--beige-clair);border:1px solid var(--trait);border-radius:22px}
.ligne-axe{display:grid;gap:6px;padding-block:16px 14px;border-bottom:1px solid var(--trait)}
.ligne-axe:last-child{border-bottom:0}
.la-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px}
.la-tete h3{font-size:1.12rem}
.la-tete h3 span{color:var(--encre-douce)}
.la-vous{font-size:.95rem}
.la-vous em{color:var(--bleu)}
.la-vous .pt{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rouge);margin-right:6px;vertical-align:.02em}
.piste{position:relative;height:calc(var(--h,1) * 36px + 44px);margin-inline:12px}
.piste-trait{position:absolute;left:-12px;right:-12px;bottom:22px;height:2px;background:var(--trait-fort)}
.grad{position:absolute;bottom:17px;left:var(--x);width:1.5px;height:12px;background:var(--trait-fort);transform:translateX(-50%)}
.grad.zero{height:16px;bottom:15px;background:var(--bleu);opacity:.5}
.m-c{position:absolute;left:var(--x);bottom:23px;transform:translateX(-50%);display:grid;justify-items:center;line-height:1;color:inherit;text-decoration:none;transition:opacity .25s ease}
.m-c:not(.actif){pointer-events:none}
.m-c.actif{cursor:pointer;padding:2px 3px 0;border-radius:6px}
.m-c.actif .fl{transition:transform .15s ease}
@media (hover:hover){.m-c.actif:hover .fl{transform:translateY(2px)}.m-c.actif:hover b{background:var(--bleu);color:var(--beige)}}
.m-c .point{display:block;width:8px;height:8px;margin-bottom:-4px;border-radius:50%;background:var(--bleu);opacity:.28}
.m-c .fl,.m-c b{display:none}
.m-c.actif{bottom:calc(33px + var(--r,0) * 36px);z-index:2}
.m-c.actif .point{display:none}
.m-c.actif .fl{display:block;font-size:19px;color:var(--c)}
.m-c.actif b{display:block;font-family:var(--f-titre);font-weight:400;font-size:.72rem;letter-spacing:.03em;color:var(--bleu);margin-bottom:1px;background:var(--beige-clair);padding:0 2px;border-radius:3px}
.m-c[data-bulle]:hover::after,.m-c[data-bulle]:focus-visible::after{content:attr(data-bulle);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--bleu);color:var(--beige);font-family:var(--f-titre);font-size:.82rem;padding:.35em .7em;border-radius:8px;pointer-events:none;z-index:5}
.m-c:focus-visible{outline-offset:2px}
.m-u{position:absolute;left:var(--u);bottom:15px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 3px var(--beige-clair);z-index:3}
.m-u span{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-family:var(--f-titre);font-size:.75rem;color:var(--bleu);white-space:nowrap}
.la-poles{display:flex;justify-content:space-between;gap:12px;font-size:.86rem;font-style:italic;color:var(--encre-douce);margin-top:6px}
.cle-graphe{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:14px auto 0;font-size:.88rem;color:var(--encre-douce)}
.cle-graphe span{display:inline-flex;align-items:center;gap:6px}
.cle-graphe .pt-u{width:12px;height:12px;border-radius:50%;background:var(--rouge)}
.cle-graphe .pt-c{width:8px;height:8px;border-radius:50%;background:var(--bleu);opacity:.3}
/* Votre priorité, sous les axes (résultats) et sur la fiche */
.visage.petit{--t:34px;box-shadow:0 0 0 2px var(--c,var(--bleu))}
.prio-res{max-width:900px;margin:28px auto 0;padding:clamp(18px,3vw,26px);background:var(--beige-clair);border:1px solid var(--trait);border-radius:22px;display:grid;gap:12px}
.prio-res h3{font-size:1.12rem}
.prio-choix{font-family:var(--f-titre);font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.25;color:var(--bleu)}
.prio-effet,.prio-note,.prio-siennes{color:var(--encre-douce);font-size:.95rem}
.prio-colonnes{display:grid;gap:14px 28px;margin-top:4px}
@media (min-width:640px){.prio-colonnes{grid-template-columns:1fr 1fr}}
.prio-groupe{display:grid;gap:8px;align-content:start;min-width:0}
.prio-groupe h4{font-family:var(--f-titre);font-weight:400;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding-bottom:6px;border-bottom:1.5px solid currentColor}
.prio-groupe.bonus h4{color:var(--bleu)}
.prio-groupe.malus h4{color:var(--rouge)}
.prio-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.prio-liste li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.prio-liste a{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--bleu);text-decoration:none;font-family:var(--f-titre)}
.prio-liste a:hover span{text-decoration:underline;text-underline-offset:.2em}
.prio-liste b,.prio-verdict b{font-family:var(--f-titre);font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.prio-liste .est-bonus,.prio-verdict.est-bonus b{color:var(--bleu)}
.prio-liste .est-malus,.prio-verdict.est-malus b{color:var(--rouge)}
.prio-aucun{font-size:.92rem;font-style:italic;color:var(--encre-douce)}
.prio-fiche{margin-top:clamp(26px,4vw,36px);padding-top:clamp(20px,3vw,28px);border-top:1.5px solid var(--bleu)}
.prio-verdict{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.prio-verdict b{font-size:clamp(1.6rem,4vw,2rem);line-height:1}
.prio-verdict:not(.est-bonus):not(.est-malus) b{color:var(--encre-douce)}
/* Arrivée par une flèche des graphiques : le bloc visé est brièvement mis en valeur */
.cible{animation:cible 1.6s ease-out}
@keyframes cible{from{background-color:var(--beige-fonce);box-shadow:0 0 0 12px var(--beige-fonce)}to{background-color:rgba(231,222,212,0);box-shadow:0 0 0 12px rgba(231,222,212,0)}}
@media (prefers-reduced-motion:reduce){.cible{animation:none}}
/* Partage */
.partage{padding-block:clamp(28px,5vw,44px) 40px}
.partage-grille{display:grid;gap:22px;margin-top:22px;align-items:start;max-width:860px;margin-inline:auto}
@media (min-width:760px){.partage-grille{grid-template-columns:240px 1fr}}
.apercu{margin:0;display:grid;gap:8px;justify-items:start}
.apercu img{width:min(240px,62vw);border-radius:14px;border:1px solid var(--trait)}
.apercu-attente{width:min(240px,62vw);aspect-ratio:9/16;border-radius:14px;background:var(--bleu);color:var(--beige);display:grid;place-items:center;font-family:var(--f-titre);font-size:.95rem;text-align:center;padding:16px}
.partage-actions{display:grid;gap:14px;align-content:start;min-width:0}
.panneau{display:grid;gap:12px;background:var(--beige-clair);border:1px solid var(--trait);border-radius:16px;padding:16px}
.suites{padding-block:8px 64px}
.suites .rangee{justify-content:center}
.vide{padding-block:clamp(40px,8vw,90px)}
.vide .wrap{display:grid;gap:20px;justify-items:start}
.vide h1{font-size:clamp(2.2rem,7vw,3.6rem)}

/* ---------- Fiche candidat ---------- */
.fiche-tete{padding-block:24px 30px}
.fiche-tete .wrap{display:grid;gap:22px}
.fiche-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center}
.fiche-id .visage{--t:clamp(92px,22vw,132px)}
.fiche-id h1{font-size:clamp(2rem,7vw,3.4rem);line-height:1.02}
.fiche-parti{font-style:italic;font-size:1.1rem;margin-top:8px}
.fiche-prox{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;border-top:1.5px solid var(--bleu);border-bottom:1px solid var(--trait);padding-block:10px}
.fiche-prox .pct{font-size:2.6rem}
.fiche-note{font-size:.92rem;color:var(--encre-douce)}
.fiche-note a{font-style:italic}
.fiche-axes{list-style:none;margin:0;padding:0;display:grid;border-top:1.5px solid var(--bleu)}
.fiche-axe{display:grid;gap:10px;padding-block:18px;border-bottom:1px solid var(--trait)}
@media (min-width:760px){.fiche-axe{grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}}
.fiche-axe h3{font-size:1.15rem;margin:0}
.fiche-axe .lib{font-style:italic}
.fiche-axe-corps{display:grid;gap:10px;min-width:0}
.barre{position:relative;height:36px;margin-inline:10px}
.barre-trait{position:absolute;left:-10px;right:-10px;top:25px;height:2px;background:var(--trait-fort);border-radius:2px}
.barre-grad{position:absolute;top:21px;width:1.5px;height:10px;background:var(--trait-fort);transform:translateX(-50%)}
.barre-c{position:absolute;top:0;transform:translateX(-50%);font-size:22px;line-height:0}
.barre-u{position:absolute;top:19px;width:14px;height:14px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 3px var(--beige);transform:translateX(-50%)}
.barre-poles{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;font-style:italic;color:var(--encre-douce)}
.cle{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem;color:var(--encre-douce)}
.cle span{display:inline-flex;align-items:center;gap:6px}
.cle .rouge-pt{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--rouge)}
/* Fondement de chaque position : une autre couleur pour le distinguer */
.fondement{display:grid;gap:3px;background:var(--beige-fonce);color:var(--brun);border-radius:12px;padding:10px 14px 11px;font-size:.95rem;line-height:1.5}
.fondement .etiq{font-family:var(--f-titre);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}

/* ---------- Politeia + : aperçu flouté des résultats à venir ---------- */
.plus{padding-block:8px 8px}
.plus .wrap{max-width:900px}
.plus-carte{position:relative;overflow:hidden;border-radius:24px;background:var(--beige-clair);border:1px solid var(--trait);isolation:isolate}
.plus-flou{display:grid;gap:16px;padding:clamp(18px,3vw,28px);filter:blur(4px);opacity:.9;transform:scale(1.02);user-select:none;pointer-events:none}
@media (min-width:700px){.plus-flou{grid-template-columns:1fr 1.2fr 1fr}}
.pf-bloc{background:var(--beige);border-radius:16px;padding:16px;display:grid;gap:12px;align-content:start}
.pf-titre{font-family:var(--f-titre);font-size:1.05rem}
.pf-boussole{position:relative;aspect-ratio:1;border-radius:10px;background:linear-gradient(var(--trait-fort),var(--trait-fort)) center/2px 100% no-repeat,linear-gradient(var(--trait-fort),var(--trait-fort)) center/100% 2px no-repeat,linear-gradient(135deg,rgba(237,42,21,.18),rgba(24,24,160,.18))}
.pf-boussole i{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bleu);opacity:.45}
.pf-boussole b{position:absolute;left:46%;top:38%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 4px var(--beige)}
.pf-barres{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pf-barres li{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:.92rem}
.pf-barres i{grid-column:1/-1;order:3;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--bleu) var(--p),var(--trait) var(--p))}
.pf-barres b{font-family:var(--f-titre);font-weight:400}
.pf-courbe{width:100%;height:auto}
.pf-courbe path{fill:none;stroke:var(--rouge);stroke-width:4;stroke-linecap:round}
.pf-legende{font-size:.85rem;color:var(--encre-douce)}
.plus-voile{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(55% 62% at 50% 50%,rgba(251,248,244,.94) 0%,rgba(251,248,244,.72) 55%,rgba(251,248,244,0) 100%)}
.plus-voile h2{display:grid;gap:12px;justify-items:center;font-size:clamp(1.2rem,3.2vw,1.55rem);max-width:30ch}
.plus-marque{display:inline-flex;align-items:flex-start;gap:4px;line-height:0}
.plus-marque .logo{width:clamp(130px,26vw,170px);color:var(--bleu)}
.plus-marque b{font-family:var(--f-titre);font-weight:400;font-size:clamp(2.2rem,6vw,2.9rem);line-height:.7;color:var(--rouge)}
.plus-cadenas{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-titre);font-size:.9rem;padding:.45em 1em;border-radius:999px;background:var(--bleu);color:var(--beige)}
.plus-cadenas .ic{width:13px;height:13px}

/* ---------- À propos : liens LinkedIn ---------- */
.createur .li-pill{justify-self:start;margin-top:2px}
.createur .li-pill .ic{width:15px;height:15px}
.merci li:has(a){padding:0}
.merci li a{display:inline-flex;align-items:center;gap:8px;padding:.4em 1em;text-decoration:none;border-radius:999px}
.merci li a .ic{width:14px;height:14px;opacity:.75}
.merci li a:hover{background:var(--bleu);color:var(--beige)}

/* ---------- Nous soutenir : bouton de la cagnotte ---------- */
.don-carte .pill .ic{width:20px;height:20px}

/* ---------- Notes de version ---------- */
.notes-version{gap:10px}
.notes-version h2{font-size:clamp(1.3rem,3.4vw,1.6rem);margin-top:22px;padding-top:18px;border-top:1px solid var(--trait)}
.notes-version h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.notes-version ul{list-style:none;padding:0!important}
.notes-version li{position:relative;padding-left:1.1em}
.notes-version li::before{content:"";position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--rouge)}
.notes-version p{color:var(--encre-douce)}
.pied-credits a{text-decoration-color:var(--trait-fort)}

/* ---------- Fiche candidat : détail du calcul ---------- */
.detail-calcul{margin-top:clamp(26px,4vw,36px);min-width:0}
.detail-corps,.detail-formule{min-width:0}
.detail-calcul summary{list-style:none;cursor:pointer;display:inline-block;border-radius:999px}
.detail-calcul summary::-webkit-details-marker{display:none}
.detail-calcul summary .pill::after{content:"";width:.5em;height:.5em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-.15em) rotate(45deg);transition:transform var(--duree)}
.detail-calcul[open] summary .pill::after{transform:translateY(.1em) rotate(-135deg)}
.detail-calcul summary:hover .pill{background:var(--bleu);color:var(--beige)}
.detail-calcul summary:focus-visible{outline:3px solid var(--bleu);outline-offset:3px}
.detail-corps{margin-top:16px;display:grid;gap:14px;background:var(--beige-clair);border:1px solid var(--trait);border-radius:20px;padding:clamp(16px,3vw,28px)}
.detail-corps h2{font-size:clamp(1.35rem,3.6vw,1.75rem)}
.detail-corps var{font-family:var(--f-texte);font-style:italic}
.detail-tableau{min-width:640px;font-size:.92rem}
.detail-tableau th[scope="row"]{font-family:var(--f-titre);border-bottom:1px solid var(--trait);vertical-align:top;white-space:nowrap}
.detail-tableau .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.detail-tableau td.num{font-family:var(--f-titre)}
.detail-tableau tfoot th,.detail-tableau tfoot td{border-bottom:0;border-top:1.5px solid var(--bleu)}
.detail-tableau tr.prio th,.detail-tableau tr.prio td{background:rgba(24,24,160,.05)}
.etiq-prio{display:inline-block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.15em .6em;border-radius:999px;background:var(--bleu);color:var(--beige);vertical-align:.15em;margin-left:4px}
.detail-formule{display:grid;gap:4px;padding:14px 16px;border-left:3px solid var(--bleu);background:var(--beige);border-radius:0 12px 12px 0;font-variant-numeric:tabular-nums;line-height:1.85;overflow-wrap:normal;overflow-x:auto}
@media (max-width:420px){.detail-formule{font-size:.88rem;padding-inline:12px}}
.detail-formule p+p{padding-left:1.6em}
.detail-formule .terme{white-space:nowrap}
.detail-formule .op{padding-inline:.1em}

/* ---------- Résultats : votre avis ---------- */
.avis{padding-block:clamp(36px,6vw,56px) 72px;border-top:1px solid var(--trait);margin-top:clamp(32px,5vw,48px)}
.avis .wrap{max-width:720px;display:grid;gap:14px}
.avis h2{text-align:center}
.avis-intro{text-align:center;font-style:italic;color:var(--encre-douce)}
.avis-form{display:grid;gap:22px;margin-top:6px}
.avis-form fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.avis-form legend{font-family:var(--f-titre);font-size:1.08rem;padding:0;margin-bottom:10px}
.avis-etoiles{display:flex}
.avis-etoile{display:grid;place-items:center;width:52px;height:52px;cursor:pointer;border-radius:12px}
.avis-etoile svg{width:40px;height:40px;fill:transparent;stroke:var(--trait-fort);stroke-width:1.4;stroke-linejoin:round;transition:fill .12s,stroke .12s,transform .12s}
.avis-etoile:hover svg{transform:scale(1.08)}
.avis-etoiles:has(input[value="1"]:checked) .avis-etoile:nth-child(-n+1) svg,.avis-etoiles:has(input[value="2"]:checked) .avis-etoile:nth-child(-n+2) svg,.avis-etoiles:has(input[value="3"]:checked) .avis-etoile:nth-child(-n+3) svg,.avis-etoiles:has(input[value="4"]:checked) .avis-etoile:nth-child(-n+4) svg,.avis-etoiles:has(input[value="5"]:checked) .avis-etoile:nth-child(-n+5) svg{fill:var(--rouge);stroke:var(--rouge)}
@media (hover:hover){.avis-etoiles:hover .avis-etoile svg,.avis-etoiles:hover:has(input:checked) .avis-etoile:nth-child(n) svg{fill:transparent;stroke:var(--trait-fort)}
.avis-etoiles:has(.avis-etoile:nth-child(1):hover) .avis-etoile:nth-child(-n+1) svg,.avis-etoiles:has(.avis-etoile:nth-child(2):hover) .avis-etoile:nth-child(-n+2) svg,.avis-etoiles:has(.avis-etoile:nth-child(3):hover) .avis-etoile:nth-child(-n+3) svg,.avis-etoiles:has(.avis-etoile:nth-child(4):hover) .avis-etoile:nth-child(-n+4) svg,.avis-etoiles:has(.avis-etoile:nth-child(5):hover) .avis-etoile:nth-child(-n+5) svg{fill:var(--rouge);stroke:var(--rouge)}}
.avis-etoile:has(input:focus-visible){outline:3px solid var(--bleu);outline-offset:0}
.avis-choix span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1.5px solid var(--trait-fort);border-radius:999px;background:var(--beige-clair);cursor:pointer;font-family:var(--f-titre);font-size:1.1rem;transition:background-color .15s,border-color .15s,color .15s}
.avis-choix-liste{display:flex;flex-wrap:wrap;gap:8px}
.avis-choix span{padding-inline:1.3em;font-size:1rem}
.avis-choix:hover span{border-color:var(--bleu)}
.avis-choix input:checked+span{background:var(--bleu);border-color:var(--bleu);color:var(--beige)}
.avis-choix input:focus-visible+span{outline:3px solid var(--bleu);outline-offset:2px}
.avis-echelle{display:flex;justify-content:space-between;width:260px;max-width:100%;font-size:.85rem;font-style:italic;color:var(--encre-douce)}
.avis-champ{display:grid;gap:8px}
.avis-champ>span{font-family:var(--f-titre);font-size:1.08rem}
.avis-champ em{font-family:var(--f-texte);font-size:.9rem;color:var(--encre-douce)}
.avis-champ textarea{font:inherit;color:var(--bleu);background:var(--beige-clair);border:1.5px solid var(--trait-fort);border-radius:16px;padding:12px 14px;resize:vertical;min-height:110px}
.avis-champ textarea:focus{outline:3px solid var(--bleu);outline-offset:1px;border-color:var(--bleu)}
.avis-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.avis-pied{display:grid;gap:12px;justify-items:start}
.avis-note-conf{font-size:.88rem;color:var(--encre-douce)}
.avis-merci{display:flex;gap:10px;align-items:center;justify-content:center;font-family:var(--f-titre);font-size:1.1rem;text-align:center;outline:none}
.avis-merci .fl{font-size:1.2em;color:var(--rouge);flex:none}