/* candid-IA 2027 — charte commune (refonte v3, octobre 2026)
   Trois couleurs : violet (je demande), jaune (je joue), orange (je compare).
   Le bleu-blanc-rouge n'apparaît qu'en filet. Polices auto-hébergées. */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600 800;font-display:swap;src:url('/fonts/bricolage-grotesque.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/figtree.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400 700;font-display:swap;src:url('/fonts/figtree-italic.woff2') format('woff2');}
/* les règles des pages existantes appellent encore « Inter » et « Spectral » : on les redirige vers Figtree */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/figtree.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/figtree.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400 700;font-display:swap;src:url('/fonts/figtree-italic.woff2') format('woff2');}

:root{
  --encre:#14162E; --texte:#3A3D57; --discret:#545873; --fond:#F4F2F8; --carte:#FFFFFF; --bord:#DDD8EA; --ligne:#EEEBF5;
  --violet:#7A4DF5; --violet-fonce:#5A2FD0; --violet-nuit:#3B1F94; --violet-pale:#EFE9FF;
  --jaune:#FFC83D; --jaune-pale:#FFF3D1;
  --orange:#FF7A2F; --orange-fonce:#B34700; --orange-pale:#FFE9DC;
  --fr-bleu:#1E3A9E; --fr-rouge:#D7322A;
  --titre:'Bricolage Grotesque','Avenir Next','Segoe UI',system-ui,sans-serif;
  --corps:'Figtree','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
  /* anciennes variables des pages, remappées sur la nouvelle charte */
  --bleu:#5A2FD0; --bleu2:#3B1F94; --or:#B34700; --gris:#545873; --rouge:#D7322A; --rougeR:#D7322A; --ivoire:#F4F2F8;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;}
body{font-family:var(--corps) !important;background:var(--fond) !important;color:var(--encre);}
h1,h2,h3,.c-titre{font-family:var(--titre) !important;letter-spacing:-0.015em;}
a{color:var(--violet-fonce);}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:6px;}
.num{font-variant-numeric:tabular-nums;}
.c-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* texte justifié partout où il y a du texte courant (demande de Nash), avec césure française pour éviter les trous */
@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important;}}

/* filet tricolore, la seule apparition du bleu-blanc-rouge */
.c-filet{display:flex;height:6px;}
.c-filet span{flex:1;}
.c-filet span:nth-child(1){background:var(--fr-bleu);} .c-filet span:nth-child(2){background:#fff;} .c-filet span:nth-child(3){background:var(--fr-rouge);}

/* ---------- en-tête commun ---------- */
.c-top{position:sticky;top:0;z-index:50;background:rgba(244,242,248,.95);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--bord);}
.c-top-in{max-width:1200px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.c-logo{display:flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;color:var(--encre);font-family:var(--titre);font-weight:800;font-size:20px;letter-spacing:-0.02em;min-height:44px;}
.c-logo b{color:var(--violet-fonce);font-weight:800;}
.c-logo i{width:36px;height:36px;border-radius:10px;background:var(--encre);display:flex;flex-direction:column;overflow:hidden;font-style:normal;}
.c-logo i::before{content:"";height:6px;background:linear-gradient(to right,var(--fr-bleu) 0 33.33%,#fff 33.33% 66.66%,var(--fr-rouge) 66.66%);}
.c-logo i::after{content:"=";flex:1;display:flex;align-items:center;justify-content:center;color:var(--jaune);font-family:var(--titre);font-weight:800;font-size:16px;line-height:30px;text-align:center;}
.c-nav{display:flex;gap:4px;}
.c-nav a,.c-nav button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:22px;color:var(--texte);font:700 15px/1 var(--corps);text-decoration:none;border:0;background:none;cursor:pointer;}
.c-nav a:hover{background:#fff;color:var(--encre);}
.c-nav a[aria-current="page"]{background:#fff;color:var(--encre);}
.c-nav svg{width:22px;height:22px;flex-shrink:0;display:none;}
.c-nav .c-mob{display:none;}
.c-ask{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px;padding:0 18px;border-radius:22px;background:var(--violet);color:#fff !important;font:700 15px/1 var(--corps);text-decoration:none;border:0;cursor:pointer;}
.c-ask:hover{background:var(--violet-fonce);}
.c-ask svg{width:18px;height:18px;}

@media (max-width:860px){
  .c-top{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--fond);}
  .c-top-in{padding:8px 16px;}
  .c-nav{position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;gap:0;padding:4px 4px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--bord);}
  .c-nav a,.c-nav button{flex-direction:column;gap:3px;min-width:56px;min-height:52px;padding:0 4px;border-radius:12px;font-size:11px;font-weight:700;color:var(--discret);}
  .c-nav a:hover,.c-nav a[aria-current="page"]{background:none;color:var(--violet-fonce);}
  .c-nav svg{display:block;}
  .c-nav .c-desk{display:none;}
  .c-nav .c-mob{display:flex;}
  body{padding-bottom:76px;}
  .c-ask span.long{display:none;}
}

/* ---------- feuille « Une question ? » ---------- */
.c-sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:640px;height:min(88vh,820px);border-radius:28px 28px 0 0;background:#fff;color:var(--encre);box-shadow:0 -10px 40px rgba(20,22,46,.25);}
.c-sheet::backdrop{background:rgba(20,22,46,.55);}
@media (min-width:861px){.c-sheet{margin:auto;border-radius:28px;height:min(84vh,820px);}}
.c-sheet-in{display:flex;flex-direction:column;height:100%;}
.c-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px 20px;border-bottom:1px solid var(--ligne);}
.c-sheet-top h2{margin:0;font-size:22px;font-weight:800;display:flex;align-items:center;gap:10px;}
.c-sheet-top h2 i{width:34px;height:34px;border-radius:11px;background:var(--violet);display:flex;align-items:center;justify-content:center;}
.c-sheet-top h2 svg{width:20px;height:20px;color:#fff;}
.c-close{width:44px;height:44px;border-radius:22px;border:0;background:var(--fond);color:var(--encre);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.c-sheet iframe{flex:1;width:100%;border:0;}

/* ---------- boutons et blocs réutilisables ---------- */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:18px;font:700 17px/1.1 var(--corps);text-decoration:none;border:0;cursor:pointer;}
.c-btn.jaune{background:var(--jaune);color:var(--encre);}
.c-btn.orange{background:var(--orange);color:var(--encre);}
.c-btn.violet{background:var(--violet);color:#fff;}
.c-btn.contour{background:transparent;border:2px solid var(--encre);color:var(--encre);}
.c-btn.grand{min-height:64px;padding:0 28px;border-radius:22px;font:800 23px/1 var(--titre);justify-content:space-between;}
.c-btn svg{width:26px;height:26px;}
.c-btn:hover{filter:brightness(.96);}
.c-calc{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:22px;border:2px solid var(--jaune);color:var(--jaune);font-weight:700;text-decoration:none;}

/* ---------- pages existantes : rhabillage ---------- */
header.site{position:static !important;background:transparent !important;color:var(--encre) !important;border:0 !important;border-image:none !important;padding:28px 20px 6px !important;max-width:1200px;margin:0 auto;display:block !important;}
header.site h1{font-family:var(--titre) !important;font-weight:800 !important;font-size:clamp(30px,5vw,48px) !important;line-height:1.04 !important;letter-spacing:-0.025em !important;color:var(--encre) !important;}
header.site h1 span{opacity:1 !important;color:var(--discret);font-weight:600;}
header.site nav{display:none !important;}
.bande-tricolore{display:none;}
footer{background:transparent !important;color:var(--discret) !important;border:0 !important;border-image:none !important;border-top:1px solid var(--bord) !important;font-family:var(--corps) !important;}
footer a{color:var(--violet-fonce) !important;}
.carte,.card{border-radius:22px !important;border-color:var(--ligne) !important;}
.btn,.btn-sim{border-radius:14px !important;font-family:var(--corps) !important;}
h2.sec,h2.mesure,h2.chap{border-bottom-color:var(--ligne) !important;color:var(--encre) !important;}
header.c-top{border:0 !important;border-image:none !important;border-bottom:1px solid var(--bord) !important;}
/* téléphone : l'assistant reste à un seul toucher, en bulle au-dessus de la barre d'onglets */
@media (max-width:860px){
  .c-ask{display:flex;position:fixed;right:14px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:65;width:56px;height:56px;min-height:0;padding:0;border-radius:50%;justify-content:center;box-shadow:0 10px 24px -8px rgba(59,31,148,.6);}
  .c-ask > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .c-ask svg{width:26px;height:26px;}
  html.embed .c-ask{display:none;}
}


/* assistant : pas de grand vide à l'ouverture */
.fil:empty{min-height:0 !important;padding:16px 20px !important;}
.fil:empty::before{content:"Posez votre question ci-dessous, ou choisissez une idée de question. L'assistant répond uniquement avec des extraits du site, cités mot pour mot, avec leur source. Il ne calcule jamais : c'est le moteur qui calcule.";font-size:15px;line-height:1.5;color:var(--texte);}

/* ---------- menu en familles : Je joue · Je compare · Je demande · Candid-IA, c'est qui ? ---------- */
.c-nav{align-items:center;}
.c-nav .c-mob{display:none;}
.c-nav .c-mob-txt{display:none;}
.c-menu{position:relative;}
.c-menu summary{list-style:none;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 14px;border-radius:22px;color:var(--texte);font:700 15px/1 var(--corps);cursor:pointer;}
.c-menu summary::-webkit-details-marker{display:none;}
.c-menu summary:hover,.c-menu[open] summary,.c-menu summary[data-actif]{background:#fff;color:var(--encre);}
.c-menu .c-chev{display:block !important;width:16px;height:16px;transition:transform .15s;}
.c-menu[open] .c-chev{transform:rotate(180deg);}
.c-menu ul{position:absolute;top:calc(100% + 8px);left:0;z-index:70;min-width:280px;margin:0;padding:8px;list-style:none;background:#fff;border-radius:18px;box-shadow:0 18px 40px -12px rgba(20,22,46,.3);border:1px solid var(--ligne);}
.c-menu ul a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--encre);font-weight:700;font-size:15px;text-decoration:none;}
.c-menu ul a:hover{background:var(--fond);}
.c-joue ul a{border-left:4px solid var(--jaune);} .c-compare ul a{border-left:4px solid var(--orange);} .c-demande ul a{border-left:4px solid var(--violet);}
.c-menu ul li+li{margin-top:4px;}
@media (min-width:861px){.c-nav .c-menu summary svg:not(.c-chev),.c-nav > a.c-lien svg{display:none;}}
@media (max-width:860px){
  .c-nav .c-mob{display:flex;}
  .c-nav .c-desk-txt{display:none;} .c-nav .c-mob-txt{display:inline;}
  .c-menu{position:static;}
  .c-menu summary{flex-direction:column;gap:3px;min-width:56px;min-height:52px;padding:0 4px;border-radius:12px;font-size:11px;color:var(--discret);background:none !important;}
  .c-menu summary svg:not(.c-chev){display:block;width:22px;height:22px;}
  .c-menu .c-chev{display:none !important;}
  .c-menu[open] summary,.c-menu summary[data-actif]{color:var(--violet-fonce);}
  .c-menu ul{position:fixed;top:auto;left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));min-width:0;}
  .c-menu ul a{min-height:52px;font-size:16px;}
}

/* tout bloc dépliable montre une flèche vers le bas (qui se retourne une fois ouvert) */
.s-mots summary,.s-comment summary,.a-bio details summary{list-style:none;gap:10px;}
.s-mots summary::-webkit-details-marker,.s-comment summary::-webkit-details-marker{display:none;}
.s-mots summary::after,.s-comment summary::after,.a-bio details summary::after{content:"";flex-shrink:0;width:9px;height:9px;border-right:3px solid currentColor;border-bottom:3px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .15s;}
.s-mots[open] summary::after,.s-comment[open] summary::after,.a-bio details[open] summary::after{transform:translateY(2px) rotate(-135deg);}
.s-mots summary{justify-content:space-between;}
.s-mots summary::before{content:"Afficher les définitions";order:2;margin-left:auto;font:600 13px/1 var(--corps);color:var(--violet-fonce);}
.s-mots[open] summary::before{content:"Fermer";}
.c-nav .c-menu ul a{flex-direction:row;justify-content:flex-start;align-items:center;gap:0;min-width:0;padding:0 14px;border-radius:12px;color:var(--encre);font:700 15px/1.25 var(--corps);background:none;}
.c-nav .c-menu ul a:hover{background:var(--fond);color:var(--encre);}
@media (max-width:860px){.c-nav .c-menu ul a{min-height:52px;font-size:16px;}}
.s-mots summary::after{order:3;}
.s-mots summary::before{white-space:nowrap;}

/* ---------- texte justifié (paragraphes, listes de texte, définitions, citations) ---------- */
p, dd, blockquote, figcaption, .a-lead, .s-dyn, .s-quoi p, .s-lev p, .note,
main li, .wrap li, section li, article li, .panneau li {
  text-align: justify !important;
  -webkit-hyphens: auto; hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
/* exceptions : menus, boutons, étiquettes courtes et blocs centrés */
.c-menu li, .c-nav li, .a-stories li, .a-banc li, .a-pied nav, .c-btn, .a-w, .a-badge, .a-afficheur .k, .a-afficheur .n, .a-afficheur .s,
.a-pv-duo span, .a-pv .ex, .s-score *, .c-sheet-top *, .tab, summary { text-align: left !important; -webkit-hyphens: manual; hyphens: manual; }

/* ---------- cartes des candidats : visage et ancre, sans toucher au HTML des cartes (lu tel quel par les contrôles) ---------- */
.carte[data-ifrap]{scroll-margin-top:84px;}
.carte[data-ifrap]::before{content:"";flex-shrink:0;width:64px;height:64px;margin:0 0 12px 3px;border-radius:50%;background:var(--violet-pale) center/cover no-repeat;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange);}
.carte[data-ifrap="attal"]::before{background-image:url(/images/candidats/attal.jpg);}
.carte[data-ifrap="faure"]::before{background-image:url(/images/candidats/faure.jpg);}
.carte[data-ifrap="glucksmann"]::before{background-image:url(/images/candidats/glucksmann.jpg);}
.carte[data-ifrap="lepen"]::before{background-image:url(/images/candidats/lepen.jpg);}
.carte[data-ifrap="lisnard"]::before{background-image:url(/images/candidats/lisnard.jpg);}
.carte[data-ifrap="melenchon"]::before{background-image:url(/images/candidats/melenchon.jpg);}
.carte[data-ifrap="philippe"]::before{background-image:url(/images/candidats/philippe.jpg);}
.carte[data-ifrap="retailleau"]::before{background-image:url(/images/candidats/retailleau.jpg);}
.carte[data-ifrap="tondelier"]::before{background-image:url(/images/candidats/tondelier.jpg);}
.carte[data-ifrap="polony"]::before{background-image:url(/images/candidats/polony.jpg);}
.carte[data-ifrap="candid_ia"]::before{background-image:url(/images/candidats/candidia.jpg);box-shadow:0 0 0 3px #fff,0 0 0 6px var(--violet);}
.carte[data-ifrap]:target{grid-column:1 / -1;outline:3px solid var(--violet);outline-offset:3px;box-shadow:0 18px 40px -20px rgba(59,31,148,.45);}


/* ---------- critique design du 11/10 ---------- */
/* onglet actif : un trait en plus de la couleur */
@media (max-width:860px){
  .c-nav > a[aria-current="page"],.c-menu summary[data-actif]{position:relative;}
  .c-nav > a[aria-current="page"]::before,.c-menu summary[data-actif]::before{content:"";position:absolute;top:-4px;left:18%;right:18%;height:3px;border-radius:0 0 3px 3px;background:var(--violet);}
}
/* textes courts : pas de justification (posée par candid.js sur tout bloc de moins de 4 lignes) */
.c-court{text-align:left !important;-webkit-hyphens:manual !important;hyphens:manual !important;}
/* une seule famille de boutons sur tout le site */
.btn,.btn-sim,a.cta,a.retour,.barre-profil .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px !important;border-radius:14px !important;font:700 15px/1.2 var(--corps) !important;text-decoration:none;cursor:pointer;}
.btn,.btn-sim,a.cta,a.retour{background:var(--violet) !important;color:#fff !important;border:2px solid var(--violet) !important;}
.btn:hover,.btn-sim:hover,a.cta:hover,a.retour:hover{background:var(--violet-fonce) !important;border-color:var(--violet-fonce) !important;}
.btn.alt,.btn-sim.alt,.btn.or{background:#fff !important;color:var(--violet-fonce) !important;border:2px solid var(--violet) !important;}
.btn.alt:hover,.btn-sim.alt:hover,.btn.or:hover{background:var(--violet-pale) !important;}
.actions{display:flex;flex-wrap:wrap;gap:8px;}
/* cartes et tableaux des pages existantes, au même gabarit que les nouvelles */
.carte,.panneau,.intro,.methode,.beta,.chat,section.bloc{border-radius:22px !important;border-color:var(--ligne) !important;box-shadow:none !important;}
table{border-collapse:separate;border-spacing:0;border-radius:16px;overflow:hidden;}
th{font-family:var(--corps) !important;}
h2.sec,h2.mesure,h2.chap,h2.top{border-bottom:0 !important;padding-bottom:0 !important;font-weight:800 !important;font-size:clamp(24px,3.2vw,32px) !important;line-height:1.1 !important;}
/* liens de pied de page : zone tactile de 44 px */
.a-pied a,footer a{min-height:44px;display:inline-flex;align-items:center;}
.carte[data-ifrap="autres"]::before{width:240px;height:52px;border-radius:0;box-shadow:none;background:radial-gradient(circle at 26px 26px,transparent 21px,#fff 21px 23px,var(--orange) 23px 26px,transparent 26.5px),radial-gradient(circle at 88px 26px,transparent 21px,#fff 21px 23px,var(--orange) 23px 26px,transparent 26.5px),radial-gradient(circle at 150px 26px,transparent 21px,#fff 21px 23px,var(--orange) 23px 26px,transparent 26.5px),radial-gradient(circle at 212px 26px,transparent 21px,#fff 21px 23px,var(--orange) 23px 26px,transparent 26.5px),url(/images/candidats/dupontaignan.jpg) 5px 5px/42px 42px no-repeat,url(/images/candidats/roussel.jpg) 67px 5px/42px 42px no-repeat,url(/images/candidats/ruffin.jpg) 129px 5px/42px 42px no-repeat,url(/images/candidats/zemmour.jpg) 191px 5px/42px 42px no-repeat;-webkit-mask:radial-gradient(circle 26px at 26px 26px,#000 98%,transparent 100%),radial-gradient(circle 26px at 88px 26px,#000 98%,transparent 100%),radial-gradient(circle 26px at 150px 26px,#000 98%,transparent 100%),radial-gradient(circle 26px at 212px 26px,#000 98%,transparent 100%);mask:radial-gradient(circle 26px at 26px 26px,#000 98%,transparent 100%),radial-gradient(circle 26px at 88px 26px,#000 98%,transparent 100%),radial-gradient(circle 26px at 150px 26px,#000 98%,transparent 100%),radial-gradient(circle 26px at 212px 26px,#000 98%,transparent 100%);}

/* quiz : le bouton « Commencer le quiz » invite à jouer — gros, orange, bien visible (demande de l'éditeur, 11/10) */
button.btn[data-action="demarrer"]{display:flex !important;width:100%;max-width:440px;min-height:72px;margin:22px 0 10px;padding:0 30px !important;border-radius:24px !important;background:var(--orange) !important;border:0 !important;color:var(--encre) !important;font:800 clamp(22px,3.4vw,28px)/1 var(--titre) !important;letter-spacing:-0.01em;box-shadow:0 14px 30px -14px rgba(255,122,47,.9);transition:transform .15s,box-shadow .15s;animation:c-invite 2.4s ease-in-out 1s 3;}
button.btn[data-action="demarrer"]:hover{background:var(--orange) !important;transform:translateY(-3px) scale(1.02);box-shadow:0 20px 36px -14px rgba(255,122,47,1);}
@keyframes c-invite{0%,100%{transform:none;}50%{transform:scale(1.04);}}
button.btn[data-action="reprendre"],button.btn[data-action="resultats"]{margin-top:4px;}