/* Observatoire électoral du Millénaire, maquette « carte ».
   Complément de _charte-maquettes.css, propre à maquette-1c-entree-carte.
   Reprend les jetons --marine/--marine2/--rouge/--fond/--trait/--gris et les
   polices déclarées dans la charte. Le seul accent chaud reste --rouge,
   réservé au modélisé. La couleur qu'apportent les drapeaux et les silhouettes
   de pays sur les cartes du calendrier est une donnée réelle, pas une palette
   ajoutée : chaque drapeau est le drapeau réel du pays, chaque silhouette est
   la même géométrie que la carte, recadrée sur un seul pays.
   ============================================================
   Deuxième passage, après un premier jugé trop terne et trop timide. Deux
   changements de fond : la carte occupe tout l'écran d'entrée et bouge d'elle
   même au lieu d'attendre le défilement, et le calendrier reprend la grammaire
   d'un carrousel de vignettes à l'image, pas d'un tiroir de fiches en texte.
   ============================================================ */

html{scroll-behavior:smooth}

/* ============================================================
   1. L'entrée, plein cadre : le globe vu depuis l'espace, sur un fond
   d'espace (étoiles en dégradés CSS, aucune image importée).
   ============================================================ */
.hero-carte{position:relative;height:100vh;min-height:640px;overflow:hidden;background:#050810;isolation:isolate}
.hero-carte:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 24% 68%,#dfe4ec,transparent),
    radial-gradient(1.8px 1.8px at 38% 8%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 52% 44%,#c9d1e0,transparent),
    radial-gradient(1.4px 1.4px at 66% 82%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 78% 24%,#dfe4ec,transparent),
    radial-gradient(1.6px 1.6px at 88% 58%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 6% 84%,#c9d1e0,transparent),
    radial-gradient(1.3px 1.3px at 95% 92%,#fff,transparent),
    radial-gradient(1.1px 1.1px at 46% 92%,#dfe4ec,transparent);
  background-repeat:repeat;background-size:520px 520px}

/* Le globe : un cercle SVG dont le contenu (sphère, pays, limbe) est
   redessiné en JavaScript à chaque image, projection orthographique
   maison (aucune librairie chargée). Collé au bord droit, assez grand pour
   occuper tout l'espace entre le titre et le bord de l'écran. */
.hero-globe{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);
  width:min(calc(100vw - 720px),78vh,900px);height:min(calc(100vw - 720px),78vh,900px);
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.6))}
.hero-globe svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.hero-globe.tire svg{cursor:grabbing}
/* La sphère : bleu profond, la mer, sur laquelle les pays sont dessinés.
   Les pays réservent le rouge au seul modélisé (déjà l'usage sur tout le
   site) et prennent une palette hors bleu, franche plutôt que terreuse,
   pour rester lisibles sur la mer sans faire carte d'atlas scolaire. */
.globe-limbe{fill:#0f3f60;stroke:rgba(255,255,255,.25);stroke-width:1.4}
.globe-pays{fill:#48536b;stroke:rgba(255,255,255,.12);stroke-width:.6;transition:fill .15s}
.globe-pays.n-recense{fill:#2fae7a}
.globe-pays.n-suivi{fill:#e8b64a}
.globe-pays.n-modelise{fill:var(--rouge)}
.globe-pays.on{stroke:#fff;stroke-width:1.3}

@media(max-width:900px){
  .hero-globe{position:relative;right:auto;top:auto;transform:none;margin:18px auto 0;width:min(72vw,420px);height:min(72vw,420px)}
}

.pays-svg{fill:#223756;stroke:rgba(255,255,255,.14);stroke-width:.5;transition:fill .15s,stroke .15s,filter .15s;cursor:pointer}
.pays-svg.n-recense{fill:#56698c}
.pays-svg.n-suivi{fill:#9fb4d6}
.pays-svg.n-modelise{fill:var(--rouge)}
.pays-svg:hover,.pays-svg:focus-visible{stroke:#fff;stroke-width:1.2;filter:brightness(1.22)}
.pays-svg.n-modelise:hover{filter:brightness(1.1)}

/* pointer-events:none : ce bloc couvre tout l'écran d'entrée pour centrer
   verticalement son texte, mais il ne doit intercepter aucun clic destiné
   au globe dessous, sauf sur ses propres éléments interactifs. */
.hero-contenu{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(24px,6vw,90px);pointer-events:none}
.hero-contenu .hero-cal{pointer-events:auto}

.hero-titre h1{margin:0;max-width:560px;font:700 clamp(24px,3vw,32px)/1.3 var(--txt);letter-spacing:0;
  color:#fff;text-transform:none}

/* Bouton d'ouverture du calendrier complet, visible dès l'entrée, sans
   attendre le défilement : c'est l'onglet, au sens d'un accès permanent. */
.hero-cal{margin-top:26px;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.55);
  background:var(--rouge);border-radius:999px;padding:11px 20px 11px 18px;font:800 11.5px/1 var(--txt);
  letter-spacing:.06em;text-transform:uppercase;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.32);
  transition:background .15s,transform .15s;cursor:pointer}
.hero-cal:hover{background:#c11a26;transform:translateY(-1px)}
.hero-cal svg{width:15px;height:15px;flex:none}

/* ============================================================
   4. Le calendrier complet, en fenêtre modale : le même onglet que sur
   le modèle de référence, accessible depuis l'entrée sans défiler.
   Reprend exactement la donnée du carrousel (les mêmes 66 scrutins
   datés au jour ou au mois), groupée par mois.
   ============================================================ */
.cal-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,14,26,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;pointer-events:none;transition:opacity .18s}
.cal-overlay.on{opacity:1;pointer-events:auto}
.cal-dialog{background:#fff;width:100%;max-width:760px;max-height:84vh;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(0,0,0,.5);border-top:4px solid var(--rouge);
  transform:translateY(10px) scale(.98);transition:transform .18s}
.cal-overlay.on .cal-dialog{transform:translateY(0) scale(1)}
.cal-tete{background:var(--marine);color:#fff;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cal-tete span{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#c59b27;margin-bottom:3px}
.cal-tete h3{margin:0;font:700 19px var(--txt);color:#fff}
.cal-fermer{width:32px;height:32px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);
  color:#fff;font-size:17px;line-height:1;cursor:pointer;transition:background .15s}
.cal-fermer:hover{background:rgba(255,255,255,.22)}
.cal-corps{overflow-y:auto;padding:20px 22px 26px}
.cal-mois{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--marine);
  border-bottom:2px solid var(--marine);padding-bottom:6px;margin:22px 0 10px}
.cal-mois:first-child{margin-top:0}
.cal-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;
  border:1px solid var(--trait);border-radius:8px;margin-bottom:7px;text-decoration:none;color:inherit;transition:.15s}
.cal-item:hover{background:var(--fond);border-color:var(--marine2);transform:translateX(2px)}
.cal-item.n-modelise{background:#fff6f2;border-color:var(--rouge)}
.cal-gauche{display:flex;align-items:center;gap:12px;min-width:0}
.cal-date{font:700 11.5px var(--mono);color:var(--marine);min-width:108px;flex:none}
.cal-item.n-modelise .cal-date{color:var(--rouge)}
.cal-drap{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;border:1px solid var(--trait);background:#fff}
.cal-drap svg{width:100%;height:100%;display:block}
.cal-txt{min-width:0}
.cal-txt b{display:block;font:700 13px var(--txt);color:var(--marine)}
.cal-txt span{font-size:11px;color:var(--gris)}
.cal-voir{flex:none;font:700 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--marine);
  background:var(--fond);padding:5px 10px;border-radius:999px}
.cal-item.n-modelise .cal-voir{background:var(--rouge);color:#fff}
.cal-note{margin:16px 0 0;font-size:11.5px;color:var(--gris)}

.hero-onglet{position:absolute;right:0;top:36px;background:rgba(10,17,32,.42);backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.28);border-right:none;padding:14px 8px;display:flex;flex-direction:column;
  align-items:center;gap:10px;z-index:2}
.hero-onglet span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 10px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:#fff}
.hero-onglet b{writing-mode:vertical-rl;transform:rotate(180deg);font:500 9.5px var(--mono);color:#a8b4c8}

/* La bande basse du globe : légende + compteurs, puis la bande méta et la
   nav de langues (même bloc qu'en haut du rideau sur les autres maquettes,
   redescendu ici). Relevée de 38px : le rideau remonte de 34px sur le bas
   de l'écran d'entrée (.rideau, margin-top:-34px) et passe, en z-index,
   au-dessus du globe ; sans cette marge sa languette arrondie couvrirait
   le bas de cette bande et intercepterait ses liens. */
.hero-bas{position:absolute;left:0;right:0;bottom:38px;z-index:2}

/* pointer-events:none pour la même raison que .hero-contenu : la bande
   couvre toute la largeur de l'écran, y compris entre légende et compteurs
   où il n'y a rien à voir ; aucun de ses enfants n'est interactif. */
.hero-pied{padding:16px clamp(20px,5vw,64px) 18px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;pointer-events:none}
.hero-legende{display:flex;flex-wrap:wrap;gap:7px 14px}
.hl{display:inline-flex;align-items:center;gap:6px;font:500 10px var(--mono);letter-spacing:.04em;color:#c9d1e0}
.hl i{width:8px;height:8px;flex:none;display:inline-block;border-radius:1px}
.hl-mod i{background:var(--rouge)}
.hl-suivi i{background:#e8b64a}
.hl-rec i{background:#2fae7a}
.hl-hors i{background:#48536b}

.hero-compte{display:flex;gap:16px}
.hero-compte div{display:flex;flex-direction:column;align-items:center;color:#fff;line-height:1}
.hero-compte b{font:700 19px/1 var(--chiffre)}
.hero-compte span{font:400 8px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#8b98b0;margin-top:3px}

/* Reprend .meta/.langues de la charte commune, déjà sur fond sombre : rien
   à réécrire, seulement les rendre cliquables ici. */
.hero-metabas{pointer-events:auto}

.hero-scroll{position:absolute;left:50%;bottom:188px;transform:translateX(-50%);z-index:3;
  width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px}
.hero-scroll span{animation:hs-bounce 1.6s ease-in-out infinite}
@keyframes hs-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

.carte-infobulle{position:fixed;z-index:50;pointer-events:none;left:0;top:0;transform:translate(-9999px,-9999px);
  background:var(--marine);color:#fff;padding:7px 10px;font:500 11.5px var(--txt);border-left:3px solid #56698c;
  box-shadow:0 6px 18px rgba(0,0,0,.3);max-width:220px;opacity:0;transition:opacity .1s}
.carte-infobulle.on{opacity:1}
.carte-infobulle b{display:block;font-weight:600;margin-bottom:1px}
.carte-infobulle em{font-style:normal;font:400 10px var(--mono);color:#a8b4c8;text-transform:uppercase;letter-spacing:.05em}
.carte-infobulle.niv-modelise{border-left-color:var(--rouge)}
.carte-infobulle.niv-suivi{border-left-color:#9fb4d6}
.carte-infobulle.niv-recense{border-left-color:#56698c}

/* ============================================================
   2. Le rideau.
   ============================================================ */
.rideau{position:relative;z-index:5;background:var(--fond);margin-top:-34px;border-radius:26px 26px 0 0;
  box-shadow:0 -26px 46px rgba(8,14,26,.32);padding-top:4px}

/* ============================================================
   3. Le carrousel du calendrier. Une vignette à l'image : silhouette réelle
   du pays, drapeau réel, date, scrutin, et un bouton « voir plus » séparé qui
   mène à la fiche. Toute la vignette est aussi un lien vers cette fiche.
   Le calendrier reste complet et déroulant : les 66 scrutins datés au jour
   ou au mois défilent tous, rien n'est paginé au sens où des éléments
   disparaîtraient ; les flèches et le glisser ne font qu'avancer la vue.
   ============================================================ */
.car-section{margin:26px 0 0}
.car-entete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 20px 4px;flex-wrap:wrap}
.car-nav{display:flex;align-items:center;gap:8px}
.car-fleche{width:34px;height:34px;border-radius:50%;border:1px solid var(--trait);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--marine);transition:background .15s}
.car-fleche:hover{background:var(--fond2,#eef1f6)}
.car-fleche:disabled{opacity:.35;cursor:default}

/* Second accès au calendrier complet, entre les deux flèches : même
   fonction que .hero-cal, en plus discret. */
.cal-declencheur{display:inline-flex;align-items:center;gap:7px;height:34px;border:1px solid var(--trait);
  background:#fff;border-radius:999px;padding:0 15px;font:700 10.5px/1 var(--txt);letter-spacing:.04em;
  text-transform:uppercase;color:var(--marine);cursor:pointer;transition:background .15s,border-color .15s}
.cal-declencheur:hover{background:var(--fond,#f5f7fa);border-color:var(--marine2)}
.cal-declencheur svg{width:14px;height:14px;flex:none}

.carrousel-cadre{overflow:hidden;margin:14px 0 0;padding:2px 0 6px}
.carrousel{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:4px 20px 14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;cursor:grab}
.carrousel:active{cursor:grabbing}
.carrousel::-webkit-scrollbar{height:7px}
.carrousel::-webkit-scrollbar-thumb{background:var(--trait)}
.carrousel::-webkit-scrollbar-track{background:transparent}

.ccard{flex:0 0 214px;scroll-snap-align:start;text-decoration:none;color:inherit;display:flex;flex-direction:column;
  background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--trait);
  box-shadow:0 1px 2px rgba(22,41,77,.05);transition:transform .18s ease,box-shadow .18s ease}
.ccard:hover,.ccard:focus-visible{transform:translateY(-5px);box-shadow:0 16px 28px rgba(22,41,77,.16);outline:none}

.ccard-visuel{position:relative;height:150px;background:#eef1f6;overflow:hidden}
.ccard-visuel svg{position:absolute;inset:0;width:100%;height:100%}
.ccard-visuel .silhouette{fill:#c7ccd6}
.ccard.n-recense .silhouette{fill:#8b9ab8}
.ccard.n-suivi .silhouette{fill:#5f82b8}
.ccard.n-modelise .silhouette{fill:var(--rouge);opacity:.92}
.ccard-drapeau{position:absolute;top:10px;left:10px;width:30px;height:30px;border-radius:50%;overflow:hidden;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);background:#fff}
.ccard-drapeau svg{width:100%;height:100%;display:block}
.ccard-niveau{position:absolute;top:10px;right:10px;font:600 8px var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:rgba(15,25,45,.62);padding:3px 7px;border-radius:999px}

.ccard-corps{padding:12px 14px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.ccard-pays{font:700 15px/1.2 var(--txt);color:var(--marine)}
.ccard-quoi{font-size:11px;color:#4b5568;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard-quoi b{font-weight:600}
.ccard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.ccard-meta .quand{font:500 10px var(--mono);color:var(--gris)}
.ccard-meta .st{font-size:8px}

.ccard-pied{margin-top:auto;padding-top:9px;border-top:1px solid var(--trait);display:flex;align-items:center;justify-content:space-between}
.ccard-pied span:first-child{font:600 10.5px var(--txt);color:var(--gris)}
.ccard-fleche{width:26px;height:26px;border-radius:50%;background:var(--marine);color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:12px;flex:none;transition:background .15s}
.ccard:hover .ccard-fleche{background:var(--rouge)}


/* ============================================================
   5. La carte à explorer, en pied de page. Même géométrie que la carte
   d'entrée, mais fixe et manipulable : molette pour zoomer, glisser pour
   se déplacer, ou les boutons de continent qui cadrent une région connue.
   Cliquer un pays affiche sa fiche réelle à droite, celle du carrousel ;
   un pays sans scrutin dans la fenêtre le dit, sans rien inventer.
   ============================================================ */
.explo-section{margin:52px 0 0;padding:0 20px 6px}
.explo-entete{max-width:640px;margin:0 0 16px}
.explo-entete h3{margin:0 0 6px}
.explo-grille{display:grid;grid-template-columns:1.55fr 1fr;gap:22px;align-items:start}

.explo-cadre{position:relative;background:var(--marine);border-radius:16px;overflow:hidden;height:440px;
  box-shadow:0 1px 2px rgba(22,41,77,.08)}
.explo-cadre svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.explo-cadre.tire svg{cursor:grabbing}
.explo-cadre .pays-svg{fill:#26375a}
.explo-cadre .pays-svg.n-recense{fill:#56698c}
.explo-cadre .pays-svg.n-suivi{fill:#9fb4d6}
.explo-cadre .pays-svg.n-modelise{fill:var(--rouge)}
.explo-cadre .pays-svg.on{stroke:#fff;stroke-width:1.6}

.explo-continents{position:absolute;left:14px;top:14px;z-index:3;display:flex;flex-direction:column;gap:5px}
.explo-cont-btn{font:600 9.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#dfe4ec;
  background:rgba(10,17,32,.5);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 11px;
  text-align:left;transition:background .15s,color .15s}
.explo-cont-btn:hover,.explo-cont-btn.on{background:#fff;color:var(--marine)}

.explo-zoom{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;flex-direction:column;gap:5px}
.explo-zoom button{width:30px;height:30px;border-radius:8px;background:rgba(10,17,32,.5);border:1px solid rgba(255,255,255,.22);
  color:#fff;font:700 16px/1 var(--txt);display:flex;align-items:center;justify-content:center;transition:background .15s}
.explo-zoom button:hover{background:#fff;color:var(--marine)}

.explo-fiche{background:#fff;border:1px solid var(--trait);border-radius:16px;padding:22px;min-height:440px;
  display:flex;flex-direction:column;position:sticky;top:16px}
.explo-fiche-vide{margin:auto 0;text-align:center;color:var(--gris);font-size:13px;line-height:1.6}
.explo-fiche-vide b{display:block;color:var(--marine);font:700 16px var(--txt);margin-bottom:6px}
.explo-fv{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.explo-fv-drap{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;border:2px solid var(--fond);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.explo-fv-drap svg{width:100%;height:100%;display:block}
.explo-fv-niv{font:600 8.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:var(--marine);padding:3px 8px;border-radius:999px;display:inline-block;margin-bottom:4px}
.explo-fv.n-modelise .explo-fv-niv{background:var(--rouge)}
.explo-fv.n-suivi .explo-fv-niv{background:#5f82b8}
.explo-fiche .pays{font:700 20px var(--txt);color:var(--marine);display:block;margin:2px 0 12px}
.explo-fiche .quoi{display:block;font-size:12.5px;color:#4b5568;margin-bottom:10px}
.explo-fiche .quand{display:block;margin-bottom:10px}
.explo-fiche .st{display:inline-block;margin-bottom:14px}
.explo-fiche .proba,.explo-fiche .agr{display:block;margin-bottom:14px}
.explo-fiche-lien{margin-top:auto;display:block;text-align:center;background:var(--marine);color:#fff;
  font:700 11px var(--txt);letter-spacing:.04em;text-transform:uppercase;padding:11px;border-radius:8px;transition:background .15s}
.explo-fiche-lien:hover{background:var(--rouge)}
.explo-note{margin:14px 20px 0;max-width:900px}

@media(max-width:900px){
  .explo-grille{grid-template-columns:1fr}
  .explo-cadre{height:340px}
  .explo-fiche{position:static;min-height:0}
}

@media(max-width:640px){
  .hero-onglet{display:none}
  .hero-cal{padding:9px 16px 9px 14px;font-size:10.5px}
  .ccard{flex-basis:172px}
  .ccard-visuel{height:120px}
  .cal-dialog{max-height:92vh}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-scroll span{animation:none}
  .ccard,.pays-svg,.cal-item,.explo-cont-btn{transition:none}
}