:root{
  --nuit:#101322;
  --encre:#191d31;
  --carte:#1f2440;
  --or:#d4b06a;
  --or-clair:#e9d5a4;
  --ivoire:#ece7d9;
  --brume:#9a9bb0;
  --manque:#c97b7b;
  --exces:#7bb0c9;
  --trait:#33395c;
  --r:14px;
  --h-barre:5.5rem;      /* hauteur réservée sous la barre collante */
}
*{box-sizing:border-box;margin:0;padding:0}
/* La page est une colonne unique : en-tête de site, contenu, pied de page.
   Les marges latérales sont portées par .cadre (et non plus par <body>),
   pour que les bandeaux d'en-tête et de pied puissent occuper toute la
   largeur tout en gardant leur contenu aligné sur celui de la page. */
body{
  background:var(--nuit);
  background-image:radial-gradient(ellipse 80% 60% at 50% -10%, #232a52 0%, transparent 60%);
  color:var(--ivoire);
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  line-height:1.6;
  min-height:100vh;
  display:flex;flex-direction:column;
}
/* 892 = 860 de contenu + 2 × 1rem de marge : la colonne de texte garde
   exactement la largeur qu'elle avait quand <body> portait le padding. */
.cadre{max-width:892px;margin:0 auto;padding:0 1rem;width:100%}
main{flex:1 0 auto;padding-bottom:3rem}

/* ------ Lien d'évitement (accessibilité) ------
   Premier élément focalisable de la page : invisible tant qu'il n'a pas
   le focus, il permet de sauter la navigation au clavier. */
.evitement{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--or);color:#241c0c;padding:.6rem 1.1rem;
  border-radius:0 0 var(--r) 0;text-decoration:none;font-size:.9rem;
}
.evitement:focus{left:0}

/* ------ Bandeau de site ------ */
.entete-site{border-bottom:1px solid var(--trait);background:rgba(16,19,34,.6)}
.entete-barre{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem;
}
.marque{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.sceau{
  flex:0 0 auto;width:2.3rem;height:2.3rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2b3158, var(--nuit));
  border:2px solid var(--or);color:var(--or-clair);
  font-family:Didot,"Bodoni MT",Georgia,serif;font-size:1.15rem;line-height:1;
}
.marque-nom{
  display:block;font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.15rem;line-height:1.2;color:var(--or-clair);
}
.marque-sous{
  display:block;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--brume);
}
.marque:hover .marque-nom{color:var(--or)}

/* Menu principal */
.menu-site ul{list-style:none;display:flex;gap:.3rem;flex-wrap:wrap}
.menu-site a{
  display:block;padding:.4rem .8rem;border-radius:99px;
  color:var(--brume);text-decoration:none;font-size:.9rem;
  border:1px solid transparent;transition:color .15s, border-color .15s;
}
.menu-site a:hover{color:var(--ivoire);border-color:var(--trait)}
.menu-site a[aria-current="page"]{color:var(--or-clair);border-color:var(--or)}
.menu-site a:focus-visible{outline:2px solid var(--or);outline-offset:2px}
/* Bouton d'ouverture du menu : réservé aux petites largeurs */
.menu-bouton{
  display:none;background:none;border:1px solid var(--trait);color:var(--or);
  border-radius:99px;padding:.35rem .9rem;font-size:.85rem;
}
.menu-bouton:hover{background:none;border-color:var(--or)}
/* Sous 640 px, le menu se replie derrière le bouton. L'état ouvert est porté
   par une classe, non par l'attribut hidden : au retour sur un écran large,
   le menu doit réapparaître même s'il avait été refermé. */
@media (max-width:640px){
  .menu-bouton{display:block}
  .menu-site{flex-basis:100%;display:none}
  .menu-site.ouvert{display:block}
  .menu-site ul{flex-direction:column;gap:0;padding-bottom:.5rem}
  .menu-site a{border-radius:8px;padding:.55rem .8rem}
}

/* ------ Fil d'Ariane ------ */
.fil{padding-top:1rem;font-size:.82rem}
.fil[hidden]{display:none}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.fil li{display:flex;align-items:center;gap:.45rem;min-width:0}
.fil li + li::before{content:"›";color:var(--trait)}
.fil a{color:var(--brume);text-decoration:none}
.fil a:hover{color:var(--or)}
.fil [aria-current="page"]{
  color:var(--brume);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ------ En-tête éditorial de la page d'accueil ------ */
.intro{text-align:center;margin:2rem 0 2.5rem}
.surtitre{
  font-size:.78rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--or);margin-bottom:.6rem;
}
h1{
  font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
  font-weight:500;font-size:clamp(1.9rem,5vw,2.8rem);
  letter-spacing:.02em;
}
.intro p{color:var(--brume);max-width:34rem;margin:.8rem auto 0;font-size:.95rem}

/* ------ Saisie ------ */
.saisie{
  background:var(--encre);border:1px solid var(--trait);border-radius:var(--r);
  padding:1.5rem;display:grid;gap:1rem;
  grid-template-columns:1fr 1fr minmax(150px,.9fr) auto;align-items:end;
}
.champ label{
  display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brume);margin-bottom:.4rem;
}
.champ input{
  width:100%;background:var(--nuit);border:1px solid var(--trait);
  border-radius:8px;color:var(--ivoire);font-size:1.05rem;
  padding:.65rem .8rem;font-family:inherit;color-scheme:dark;
}
.champ input:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
button{
  background:var(--or);color:#241c0c;border:none;border-radius:8px;
  font-size:1rem;font-weight:600;padding:.7rem 1.6rem;cursor:pointer;
  font-family:inherit;transition:background .15s;
}
button:hover{background:var(--or-clair)}
button:focus-visible{outline:2px solid var(--ivoire);outline-offset:2px}
.erreur{color:var(--manque);font-size:.9rem;margin-top:.7rem;display:none}

/* ------ Célébrités : carrousel ------ */
.bloc-celebrites{margin-top:.8rem}
.bloc-celebrites[hidden]{display:none}
.carrousel{display:flex;align-items:center;gap:.6rem}
.fleche{
  flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;padding:0;
  background:var(--carte);border:1px solid var(--trait);color:var(--or);
  font-size:1.5rem;line-height:1;cursor:pointer;font-family:inherit;
  transition:border-color .15s;
}
.fleche:hover{border-color:var(--or);background:var(--encre)}
.fleche:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.piste-vue{
  flex:1;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;min-width:0;
}
.piste-vue::-webkit-scrollbar{display:none}
.piste{display:flex;gap:.7rem}
.celeb{
  flex:0 0 calc((100% - 2.8rem)/5);   /* 5 cartes visibles (4 espaces de .7rem) */
  scroll-snap-align:start;min-width:0;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:1rem .6rem .8rem;text-align:center;cursor:pointer;
  font-family:inherit;color:var(--ivoire);
  transition:border-color .15s, transform .15s;
}
@media (max-width:760px){.celeb{flex-basis:calc((100% - 1.4rem)/3)}}   /* 3 visibles */
@media (max-width:480px){.celeb{flex-basis:calc((100% - .7rem)/2)}}    /* 2 visibles */
.celeb:hover{border-color:var(--or);transform:translateY(-2px)}
.celeb:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.celeb.actif{border-color:var(--or);box-shadow:0 0 14px rgba(212,176,106,.18)}
.medaillon{
  width:64px;height:64px;border-radius:50%;margin:0 auto .6rem;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2b3158, var(--nuit));
  border:2px solid var(--or);
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.35rem;color:var(--or-clair);letter-spacing:.05em;
  overflow:hidden;
}
.medaillon img{width:100%;height:100%;object-fit:cover;display:block}
.celeb .cnom{font-size:.85rem;line-height:1.3}
.celeb[hidden]{display:none}
/* Recherche dans le carrousel */
.celeb-recherche{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.celeb-recherche input{
  flex:1;min-width:0;background:var(--nuit);border:1px solid var(--trait);
  border-radius:8px;color:var(--ivoire);font-size:.95rem;
  padding:.55rem .8rem;font-family:inherit;color-scheme:dark;
}
.celeb-recherche input:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.celeb-compte{flex:0 0 auto;font-size:.82rem;color:var(--brume);white-space:nowrap}
.celeb-vide{color:var(--brume);font-size:.92rem;font-style:italic;padding:1.4rem .2rem;text-align:center}
.celeb-vide[hidden]{display:none}
@media (max-width:520px){
  .celeb-recherche{flex-wrap:wrap;gap:.4rem}
  .celeb-compte{width:100%}
}

/* Synthèse en tête du portrait */
.synthese{
  margin:0;font-size:1.02rem;line-height:1.75;color:var(--ivoire);
  border-left:2px solid var(--or);padding-left:1.1rem;
}
.synthese b{color:var(--or-clair);font-weight:600}
@media (max-width:640px){.synthese{padding-left:.8rem;font-size:.98rem}}

/* Fiche célébrité dans les résultats */
.fiche{
  background:var(--encre);border:1px solid var(--or);border-radius:var(--r);
  padding:1.1rem 1.4rem;margin-bottom:.5rem;
}
.fiche-tete{display:flex;align-items:center;gap:1.2rem}
.fiche-photo .medaillon{width:88px;height:88px;margin:0;font-size:1.7rem}
.fiche-nom{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.4rem;color:var(--or-clair);
}
.fiche-desc{color:var(--ivoire);font-size:.92rem;font-style:italic;margin-bottom:.25rem}
.fiche-date{color:var(--brume);font-size:.88rem}
.fiche-bio{
  margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--trait);
  font-size:.92rem;color:var(--ivoire);
}
@media (max-width:640px){.fiche-tete{flex-direction:column;text-align:center}}

/* ------ Nombres du nom ------ */
.nn-grille{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.nn-carte{
  background:var(--encre);border:1px solid var(--trait);
  border-radius:var(--r);padding:1.2rem 1.4rem;
}
.nn-carte.large{grid-column:1 / -1;border-left:3px solid var(--or)}
.nn-tete{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}
.nn-medaille{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2b3158, var(--nuit));
  border:2px solid var(--or);
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.5rem;color:var(--or-clair);
}
.nn-titre{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.15rem;color:var(--or-clair);
}
.nn-base{font-size:.78rem;color:var(--brume)}
.nn-calc{font-size:.82rem;color:var(--or);margin-bottom:.6rem;letter-spacing:.04em}
.nn-desc{font-size:.85rem;color:var(--brume);font-style:italic;margin-bottom:.6rem}
.nn-texte{font-size:.95rem}
.facette{margin-bottom:.55rem}
.facette:last-child{margin-bottom:0}
.facette b{color:var(--or)}
.nn-nota{
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--trait);
  font-size:.85rem;color:var(--brume);
}
.nn-extra{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--trait)}
.nn-extra-titre{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--or);margin-bottom:.5rem;
}
.nn-extra p{font-size:.9rem;margin-bottom:.45rem}
.nn-extra p:last-child{margin-bottom:0}
.nn-extra .nn-calc,.nn-extra .nn-desc{margin-bottom:.45rem}
@media (max-width:640px){.nn-grille{grid-template-columns:1fr}}

/* ------ Chemin de vie ------ */
#cheminSvg{max-width:720px;margin:0 auto}
#cheminSvg svg{width:100%;height:auto;display:block}
.chemin-carte{
  display:flex;align-items:center;gap:1.4rem;
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1.3rem 1.5rem;margin-top:1rem;
}
.chemin-nombre{
  flex:0 0 auto;width:74px;height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2b3158, var(--nuit));
  border:2px solid var(--or);box-shadow:0 0 18px rgba(212,176,106,.25);
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:2rem;color:var(--or-clair);
}
.chemin-titre{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.25rem;color:var(--or-clair);margin-bottom:.3rem;
}
.chemin-texte{font-size:.95rem}
.chemin-analyse{
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--manque);border-radius:var(--r);
  padding:1.1rem 1.4rem;margin-top:1rem;font-size:.92rem;
}
.chemin-analyse p{margin-bottom:.7rem}
.chemin-analyse p:last-child{margin-bottom:0}
@media (max-width:640px){.chemin-carte{flex-direction:column;text-align:center}}

/* ------ Cycles personnels ------ */
.cycles-date{color:var(--brume);font-size:.85rem;font-style:italic;margin-bottom:1rem}
.cycles-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:760px){.cycles-grille{grid-template-columns:1fr}}

/* ------ Analyse annuelle ------ */
.annuelle-choix{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  background:var(--encre);border:1px solid var(--trait);border-radius:var(--r);
  padding:.8rem 1.1rem;margin-bottom:1rem;
}
.annuelle-choix label{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brume);
}
.annuelle-choix input{
  background:var(--nuit);border:1px solid var(--trait);
  border-radius:8px;color:var(--ivoire);font-size:1.05rem;
  padding:.45rem .6rem;font-family:inherit;color-scheme:dark;text-align:center;
}
.annuelle-choix input:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.annuelle-choix .pas{
  background:transparent;border:1px solid var(--or);color:var(--or);
  font-size:1.1rem;line-height:1;padding:.35rem .8rem;
}
.annuelle-choix .pas:hover{background:rgba(212,176,106,.15)}
/* Barre de période, dans la section des cycles personnels.
   Flèches : ‹ un jour, ‹‹ un mois, ‹‹‹ une année ; largeur commune pour
   aligner les trois paires et garder une cible de clic confortable. */
.barre-periode{gap:.35rem}
/* Libellé sur sa propre ligne : les commandes tiennent alors d'un seul
   tenant, même sur une largeur de téléphone. */
.barre-periode label{flex:1 0 100%;margin-bottom:.15rem}
.barre-periode .pas{
  padding:.35rem .3rem;min-width:2.2rem;letter-spacing:-.08em;text-align:center;
}
.barre-periode #dateAuj{
  letter-spacing:normal;min-width:0;padding:.35rem .8rem;font-size:.95rem;
}
/* Un triplet de flèches ne se coupe jamais en fin de ligne */
.pas-groupe{display:flex;gap:.35rem;flex:0 0 auto}
.annuelle-periode{color:var(--brume);font-size:.85rem;font-style:italic}
.annuelle-grille{display:grid;gap:1rem}
/* Volets d'interprétation (climat, travail, sentiments, argent, divers) */
.volet{margin-bottom:.5rem;font-size:.95rem}
.volet:last-child{margin-bottom:0}
.volet b{color:var(--or)}
/* Badge de polarité de la lettre de passage */
.polarite{
  display:inline-block;border-radius:99px;padding:.1rem .7rem;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid currentColor;margin-left:.6rem;vertical-align:middle;
}
.polarite.positive{color:#7bc99a}
.polarite.negative{color:var(--manque)}
.polarite.neutre{color:var(--brume)}
.polarite.mixte{color:var(--exces)}
/* Frise des lettres du nom associées aux années */
.frise{display:flex;flex-wrap:wrap;gap:.35rem;margin:.7rem 0}
.frise-case{
  min-width:2.6rem;text-align:center;border:1px solid var(--trait);
  border-radius:8px;padding:.25rem .35rem;background:var(--carte);
}
.frise-case .fl{
  display:block;font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.05rem;color:var(--ivoire);
}
.frise-case .fa{display:block;font-size:.66rem;color:var(--brume)}
.frise-case.active{
  border-color:var(--or);background:rgba(212,176,106,.12);
  box-shadow:0 0 12px rgba(212,176,106,.25);
}
.frise-case.active .fl{color:var(--or-clair)}
.frise-case.active .fa{color:var(--or)}
.frise-sep{flex:0 0 100%;height:0}
/* Grille des douze mois de l'année étudiée : une seule rangée sur la pleine
   colonne, les noms de mois étant abrégés (janv., févr., juil., sept.…). */
.mois-grille{
  display:grid;grid-template-columns:repeat(12,1fr);gap:.45rem;margin:.8rem 0;
}
.mois-case{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:0;
  background:var(--carte);border:1px solid var(--trait);border-radius:10px;
  padding:.5rem .3rem;cursor:pointer;font-family:inherit;
  transition:border-color .15s, background .15s;
}
.mois-case:hover{border-color:var(--or);background:rgba(212,176,106,.08)}
.mois-case .mois-val{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.35rem;color:var(--or-clair);line-height:1;
}
.mois-case .mois-nom{
  font-size:.68rem;color:var(--brume);text-transform:capitalize;white-space:nowrap;
}
.mois-case.active{
  border-color:var(--or);background:rgba(212,176,106,.16);
  box-shadow:0 0 12px rgba(212,176,106,.25);
}
.mois-case.active .mois-nom{color:var(--or)}
.mois-detail{
  border-top:1px solid var(--trait);padding-top:.8rem;
}
@media (max-width:760px){.mois-grille{grid-template-columns:repeat(6,1fr)}}
@media (max-width:640px){.mois-grille{grid-template-columns:repeat(4,1fr)}}
@media (max-width:380px){.mois-grille{grid-template-columns:repeat(3,1fr)}}

.annuelle-conclusion{
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1.2rem 1.4rem;margin-top:1rem;
}
.annuelle-conclusion .nn-extra-titre{margin-bottom:.6rem}
.annuelle-conclusion p{font-size:.95rem;margin-bottom:.6rem}
.annuelle-conclusion p:last-child{margin-bottom:0}

/* ------ Nombres chance ------ */
/* Deux colonnes : bases, nombres majeurs et dates favorables à gauche,
   les séries d'harmoniques à droite. */
.chance-duo{
  display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem;align-items:start;
}
.chance-duo > div{min-width:0}
@media (max-width:760px){
  .chance-duo{grid-template-columns:1fr}
}
.chance-bases{display:grid;gap:.4rem;margin-bottom:.9rem}
.chance-bases p{font-size:.92rem}
.chance-bases b{color:var(--or)}
.chance-serie{margin-bottom:.7rem}
.chance-serie .titre-serie{
  font-size:.8rem;color:var(--brume);margin-bottom:.35rem;
}
.chance-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  border:1px solid var(--or);color:var(--or-clair);
  border-radius:99px;padding:.15rem .7rem;font-size:.88rem;
  background:rgba(212,176,106,.07);
}
.chip.majeur{
  background:var(--or);color:#241c0c;font-weight:600;
}
.chance-note{
  margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--trait);
  font-size:.85rem;color:var(--brume);
}
/* Bulletins de jeu réalistes */
/* Quatre colonnes sur la pleine largeur : les deux grilles Loto puis les
   deux EuroMillions, d'une seule rangée. Largeur bornée pour que les cases
   de numéros gardent une taille de bulletin. */
.tickets{
  display:grid;grid-template-columns:repeat(4,minmax(0,190px));
  gap:.9rem;margin-top:.6rem;justify-content:start;
}
@media (max-width:900px){
  .tickets{grid-template-columns:repeat(2,minmax(0,240px));justify-content:center}
}
@media (max-width:520px){
  .tickets{grid-template-columns:minmax(0,240px)}
}
.ticket{border-radius:12px;padding:.6rem .6rem .7rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ticket-nom{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:center;margin-bottom:.45rem;font-weight:600;
}
.ticket-bande{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  text-align:center;font-weight:700;border-radius:6px;
  padding:.25rem 0;margin:.45rem 0 .35rem;
}
.ticket-panneau{
  background:#fff;border:2px solid #d8232a;border-radius:8px;padding:5px;
  display:grid;gap:3px;
}
.p5{grid-template-columns:repeat(5,1fr)}
.p4{grid-template-columns:repeat(4,1fr)}
.case-num,.rond-chance{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:600;color:#d8232a;
  border:1.5px solid #d8232a;background:#fff;
}
.case-num{border-radius:4px}
.rond-chance{border-radius:50%}
.case-num.coche,.rond-chance.coche{background:#d8232a;color:#fff}
.coche.chaud{box-shadow:0 0 0 2px var(--or)}
/* Loto : bleu */
.ticket.loto{background:#e8f0ff}
.ticket.loto .ticket-nom{color:#1c5bd8}
.ticket.loto .ticket-bande{background:#1c5bd8;color:#fff}
/* EuroMillions : bleu nuit et or */
.ticket.euro{background:#1b2f77}
.ticket.euro .ticket-nom{color:#f5c542}
.ticket.euro .ticket-bande{background:#f5c542;color:#7a1218}
/* Étoiles découpées */
.etoile{
  position:relative;aspect-ratio:1;display:flex;
  align-items:center;justify-content:center;
  font-size:.6rem;font-weight:600;color:#d8232a;border:none;background:none;
}
.etoile::before,.etoile::after{
  content:"";position:absolute;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.etoile::before{inset:0;background:#d8232a}
.etoile::after{inset:3px;background:#fff}
.etoile span{position:relative;z-index:1}
.etoile.coche::after{background:#d8232a}
.etoile.coche{color:#fff}
.etoile.coche.chaud{box-shadow:none;filter:drop-shadow(0 0 3px var(--or))}

/* ------ Compatibilité ------ */
.bloc-compat{margin-top:1rem}
.compat-intro{color:var(--brume);font-size:.95rem;margin-bottom:1.2rem}
.compat-saisie{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.compat-col{
  background:var(--encre);border:1px solid var(--trait);border-radius:var(--r);
  padding:1.2rem 1.4rem;display:grid;gap:.9rem;
}
.compat-col-titre{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.1rem;color:var(--or-clair);
}
.compat-action{text-align:center;margin-top:1rem}
.compat-duo{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.4rem}
.compat-fiche{
  background:var(--encre);border:1px solid var(--trait);border-radius:var(--r);
  padding:1rem 1.2rem;text-align:center;
}
.compat-fiche .qui{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.15rem;color:var(--or-clair);margin-bottom:.5rem;
}
.compat-fiche .vib{font-size:.9rem;color:var(--brume)}
.compat-fiche .vib b{color:var(--or);font-size:1.05rem}
.compat-jauge{text-align:center;margin-top:1rem}
.compat-jauge svg{width:220px;height:auto}
.compat-verdict{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.3rem;color:var(--or-clair);margin-top:.2rem;
}
.compat-texte{
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1.3rem 1.5rem;margin-top:1rem;
}
.compat-texte p{margin-bottom:.9rem}
.compat-texte p:last-child{margin-bottom:0}
@media (max-width:640px){
  .compat-saisie,.compat-duo{grid-template-columns:1fr}
}

/* ------ Barre de sujet collante ------
   Un seul encadré, deux lignes : l'identité et les commandes, puis le rail
   des onglets. overflow:hidden pour que le rail défile en lui-même sans
   déborder de l'arrondi.
   --h-barre : hauteur réservée sous la barre, ajustée en JS à sa hauteur
   réelle (rail compris). Elle sert au décalage des ancres de section. */
.barre-sujet{
  position:sticky;top:0;z-index:20;
  display:flex;flex-direction:column;gap:.5rem;
  overflow:hidden;
  background:rgba(16,19,34,.96);backdrop-filter:blur(8px);
  border:1px solid var(--trait);border-radius:var(--r);
  padding:.5rem .9rem;margin-bottom:1.5rem;
}
.barre-tete{
  display:flex;align-items:center;justify-content:space-between;
  gap:.9rem;flex-wrap:wrap;
}
.barre-identite{flex:1 1 12rem;min-width:0}
.barre-actions{display:flex;gap:.4rem;flex:0 0 auto}
.barre-nom{
  display:block;font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.05rem;line-height:1.3;color:var(--or-clair);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.barre-naissance{display:block;font-size:.74rem;color:var(--brume)}
.barre-sujet .pas{padding:.28rem .7rem;font-size:.85rem}
@media (max-width:640px){
  .barre-sujet{position:static;backdrop-filter:none}
  .barre-tete{justify-content:center;text-align:center}
  .barre-identite{flex:1 1 100%}
  .barre-actions{margin:0 auto}
}

/* ------ Rail des onglets du portrait ------
   Toujours sur une seule ligne : il défile horizontalement plutôt que de se
   replier derrière un bouton, contrairement au menu de site. La barre de
   défilement est masquée, le geste restant possible au doigt et à la molette. */
.rail{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail:empty{display:none}
.rail .onglet{
  flex:0 0 auto;white-space:nowrap;cursor:pointer;
  border:1px solid var(--trait);border-radius:99px;
  padding:.3rem .85rem;font-size:.85rem;font-weight:400;font-family:inherit;
  color:var(--brume);background:transparent;text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.rail .onglet:hover{color:var(--ivoire);border-color:var(--brume);background:transparent}
.rail .onglet[aria-selected="true"]{
  border-color:var(--or);color:var(--or-clair);background:var(--carte);
}
.rail .onglet:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* ------ Sous-pastilles de l'onglet « Portrait numérique » ------
   De simples ancres vers les sections du panneau ouvert : même dessin que
   les pastilles du sommaire d'autrefois sur petite largeur. */
.sous-pastilles{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:1.4rem}
.sous-pastilles:empty{display:none}
.sous-pastilles a{
  border:1px solid var(--trait);border-radius:99px;
  padding:.22rem .8rem;font-size:.8rem;
  color:var(--brume);text-decoration:none;
  transition:color .15s, border-color .15s;
}
.sous-pastilles a:hover{color:var(--ivoire)}
.sous-pastilles a.actif{color:var(--or-clair);border-color:var(--or)}
.sous-pastilles a:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* ------ Tableau de bord ------
   Six médaillons cliquables sous la synthèse, chacun menant à son onglet.
   Sans date de naissance, trois d'entre eux n'ont pas lieu d'être et le
   tableau passe à trois colonnes (classe posée par app.js). */
.tableau-bord{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin:1.4rem 0 1rem;
}
.tableau-bord:empty{display:none}
.tableau-bord.trois{grid-template-columns:repeat(3,1fr)}
.tb-carte{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:0;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:.7rem .35rem;cursor:pointer;font-family:inherit;font-weight:400;
  text-align:center;color:inherit;
  transition:border-color .15s, transform .15s;
}
.tb-carte:hover{background:var(--carte);border-color:var(--or);transform:translateY(-2px)}
.tb-carte:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.tb-carte.majeur{border-color:var(--or)}
.tb-valeur{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:1.9rem;line-height:1;color:var(--or-clair);
}
.tb-libelle{
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brume);line-height:1.3;
}
@media (max-width:640px){
  .tableau-bord{grid-template-columns:repeat(3,1fr)}
}

/* Deux colonnes de lecture, pour les séries de volets et de paragraphes
   qui tenaient chacun sur une ligne entière dans la colonne étroite. */
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:0 1.6rem}
.deux-colonnes > *{min-width:0}
@media (max-width:760px){
  .deux-colonnes{grid-template-columns:1fr}
}

/* ------ Résultats ------ */
/* Les cinq panneaux d'onglets. Sans JavaScript, aucun n'est masqué : ils
   s'affichent à la suite et la page reste entière.
   scroll-margin-top : changer d'onglet amène au début du panneau, qui doit
   se ranger sous la barre collante — même mécanique que les ancres de
   section. */
.onglet-panneau{scroll-margin-top:var(--h-barre)}
.onglet-panneau[hidden]{display:none}
#resultats{display:none;animation:apparition .5s ease;min-width:0}
@keyframes apparition{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#resultats{animation:none}}
.section{scroll-margin-top:var(--h-barre)}

/* Repli des justificatifs de calcul */
.justif{
  margin-top:1.2rem;border:1px solid var(--trait);border-radius:var(--r);
  background:var(--encre);
}
.justif summary{
  cursor:pointer;padding:.7rem 1.1rem;color:var(--or);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
}
.justif summary:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.justif[open] summary{border-bottom:1px solid var(--trait)}
.justif > :not(summary){padding:1.1rem}

/* Bouton en forme de lien (dépliage) */
.lien-repli{
  background:none;border:none;color:var(--or);padding:.5rem 0;
  font-size:.9rem;text-decoration:underline;text-underline-offset:3px;
}
.lien-repli:hover{background:none;color:var(--or-clair)}
.compat-sujet{font-size:.95rem;color:var(--ivoire)}
.compat-sujet b{color:var(--or-clair)}

h2{
  font-family:Didot,"Bodoni MT","Playfair Display",Georgia,serif;
  font-weight:500;font-size:1.35rem;color:var(--or-clair);
  margin:2.2rem 0 1rem;display:flex;align-items:center;gap:.8rem;
}
h2::after{content:"";flex:1;height:1px;background:var(--trait)}
h3{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-weight:500;font-size:1.1rem;color:var(--or-clair);margin:1.8rem 0 .8rem;
}

/* Correspondance lettre → nombre */
.lettres{display:flex;flex-wrap:wrap;gap:.35rem}
.lettre{
  background:var(--carte);border:1px solid var(--trait);border-radius:8px;
  min-width:2.4rem;padding:.35rem .2rem;text-align:center;
}
.lettre .l{font-size:1.05rem;font-weight:600;display:block}
.lettre .n{font-size:.85rem;color:var(--or);display:block}
.lettre.sep{background:none;border:none;min-width:1rem}
/* Renvoi du nom de famille à la ligne suivante */
.lettres .saut{flex:1 0 100%;height:0;margin:0}

/* Grille d'inclusion 3×3
   minmax(0,1fr) et min-width:0 : sans eux, le min-content des libellés
   (« Expansion matérielle ») porte la grille à 480 px et lui fait chevaucher
   la colonne du commentaire. */
.grille{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;
  min-width:0;max-width:min(420px,100%);margin:0 auto;
}
/* La grille, sa note et son décompte à gauche ; le commentaire à droite. */
.grille-duo{
  display:grid;grid-template-columns:450px minmax(0,1fr);gap:1.6rem;
  align-items:start;
}
.grille-duo-part{min-width:0}
.grille-duo h3{margin-top:0}
@media (max-width:900px){
  .grille-duo{grid-template-columns:1fr;gap:0}
}
.case{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;position:relative;
}
.case .chiffre{
  font-family:Didot,"Bodoni MT",Georgia,serif;
  font-size:2rem;color:var(--ivoire);
}
.case .compte{font-size:.78rem;color:var(--brume)}
.case .titre-nb{
  font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brume);margin-top:-.15rem;text-align:center;padding:0 .3rem;
}
.case .points{font-size:.7rem;letter-spacing:.15em;color:var(--or);min-height:1em}
.case.manquant{border-color:var(--manque);background:rgba(201,123,123,.08)}
.case.manquant .chiffre{color:var(--manque)}
.case.dominant{border-color:var(--or);background:rgba(212,176,106,.10);box-shadow:0 0 18px rgba(212,176,106,.15)}
.case.dominant .chiffre{color:var(--or-clair)}
.badge{
  position:absolute;top:.4rem;right:.5rem;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;
}
.case.manquant .badge{color:var(--manque)}
.case.dominant .badge{color:var(--or)}

/* Décompte détaillé */
.decompte{display:grid;gap:.45rem}
.ligne{display:grid;grid-template-columns:5.5rem 1fr 7rem;gap:.8rem;align-items:center}
.ligne .nom{font-size:.9rem;color:var(--brume)}
.barre{background:var(--encre);border-radius:99px;height:.85rem;overflow:hidden}
.barre span{display:block;height:100%;background:var(--or);border-radius:99px;min-width:0}
.ligne.est-manquant .barre span{background:var(--manque)}
.ligne .valeur{font-size:.85rem;text-align:left}
.ligne .valeur em{font-style:normal;color:var(--manque)}
.ligne .valeur strong{color:var(--or)}

/* Synthèse et commentaire */
.etiquettes{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.etq{
  border-radius:99px;padding:.3rem .9rem;font-size:.85rem;
  border:1px solid var(--trait);background:var(--carte);
}
.etq.m{border-color:var(--manque);color:var(--manque)}
.etq.d{border-color:var(--or);color:var(--or-clair)}
.etq.x{border-color:var(--exces);color:var(--exces)}
.commentaire{
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1.3rem 1.5rem;
}
.commentaire p{margin-bottom:.9rem}
.commentaire p:last-child{margin-bottom:0}
.note{color:var(--brume);font-size:.8rem;margin-top:1rem;text-align:center}

@media (max-width:640px){
  .saisie{grid-template-columns:1fr}
  .ligne{grid-template-columns:4rem 1fr;grid-template-rows:auto auto}
  .ligne .valeur{grid-column:1 / -1}
}

/* ------ En-tête d'une fiche de personnalité (/personnalites/<nom>) ------
   Remplace le chapeau .intro de la page d'accueil : le portrait est calculé
   d'office, la page s'ouvre donc sur la personne. */
.fiche-entete{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin:2rem 0}
.fiche-entete > div{flex:1;min-width:15rem}
.fiche-entete h1{font-size:clamp(1.5rem,4vw,2.2rem)}
.fiche-entete .medaillon{
  width:88px;height:88px;font-size:1.8rem;flex:0 0 auto;position:relative;
}
/* Comme dans la galerie : la photo recouvre les initiales, qui reprennent
   leur place si elle échoue (site.js retire l'image). */
.fiche-entete .medaillon img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
}
.fiche-sous{color:var(--brume);font-size:.9rem;margin-top:.5rem;max-width:44rem}
.fiche-sous a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.fiche-sous a:hover{color:var(--or-clair)}

/* ------ Appât : annonce des personnalités proches, avant tout calcul ------ */
.appat{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:.9rem 1.1rem;margin-top:1rem;
}
.appat-medaillons{display:flex;flex:0 0 auto}
/* Les trois médaillons se chevauchent légèrement, comme un jeu de cartes */
.appat-medaillons .medaillon{width:48px;height:48px;font-size:1rem;margin:0 0 0 -14px}
.appat-medaillons .medaillon:first-child{margin-left:0}
.appat p{flex:1;min-width:14rem;font-size:.88rem;color:var(--brume);margin:0}
.appat b{color:var(--ivoire);font-weight:500}

/* Renvoi de la synthèse vers la section des personnalités proches */
.synthese-lien{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.synthese-lien:hover{color:var(--or)}

/* ------ Personnalités proches ------ */
.ressemblance-intro{color:var(--brume);font-size:.92rem;margin-bottom:1.2rem}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;align-items:start}
.proche{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:1.2rem .7rem 1rem;text-align:center;
}
/* Le premier du classement se distingue, sans changer de gabarit */
.proche.premier{border-color:var(--or);box-shadow:0 0 18px rgba(212,176,106,.15)}
.proche .medaillon{width:72px;height:72px;font-size:1.5rem}
.proche-nom{font-size:.92rem;line-height:1.3;margin-bottom:.5rem}
.proche-score{
  font-family:Didot,"Bodoni MT",Georgia,serif;font-size:1.6rem;
  color:var(--or-clair);line-height:1.1;
}
.proche.premier .proche-score{color:var(--or)}
.proche-verdict{font-size:.78rem;color:var(--or);margin-bottom:.5rem}
.proche-vib{font-size:.72rem;color:var(--brume);line-height:1.35}
.ressemblance-suite{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.proche-pastille{
  border:1px solid var(--trait);background:var(--encre);border-radius:99px;
  padding:.3rem .9rem;font-size:.82rem;color:var(--brume);
}
.proche-pastille b{color:var(--or-clair);font-weight:500}
@media (max-width:640px){
  .podium{grid-template-columns:1fr}
}

/* ------ Renvoi de fin de portrait (site partenaire) ------
   Même dessin que l'appât de la saisie — encadré discret, filet doré à
   gauche — mais placé après la dernière section : le portrait est lu, on
   propose autre chose. Il n'entre dans aucun onglet. */
.renvoi{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1rem 1.2rem;
  /* La marge basse est portée ici : le padding-bottom de <main> est neutralisé
     par celui de .cadre, le pied de page collerait au dernier bloc. */
  margin:2.5rem 0 3rem;
}
.renvoi-sceau{
  flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2b3158, var(--nuit));
  border:2px solid var(--or);color:var(--or-clair);
  font-family:Didot,"Bodoni MT",Georgia,serif;font-size:1.25rem;line-height:1;
}
.renvoi p{flex:1;min-width:14rem;font-size:.88rem;color:var(--brume);margin:0}
.renvoi a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.renvoi a:hover{color:var(--or-clair)}

/* ------ Pied de page ------ */
.pied-site{
  flex:0 0 auto;border-top:1px solid var(--trait);
  background:rgba(25,29,49,.55);padding:2.5rem 0 1.8rem;font-size:.9rem;
}
.pied-grille{
  display:grid;gap:2rem;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
}
.pied-site h2{
  /* Neutralise le titre doré des sections du portrait : ici, une simple
     étiquette, sans filet horizontal. */
  display:block;font-family:inherit;font-size:.7rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--or);
  margin:0 0 .8rem;
}
.pied-site h2::after{content:none}
.pied-site ul{list-style:none;display:grid;gap:.45rem}
.pied-site a{color:var(--brume);text-decoration:none}
.pied-site a:hover{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.pied-marque .marque{margin-bottom:.8rem}
.pied-texte{color:var(--brume);max-width:26rem}
.pied-bas{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--trait);
  display:grid;gap:.9rem;
}
.pied-avert{color:var(--brume);font-size:.8rem;line-height:1.5}
.pied-copyright{color:var(--brume);font-size:.8rem}
.pied-copyright b{color:var(--or-clair);font-weight:500}
@media (max-width:640px){
  .pied-grille{grid-template-columns:1fr;gap:1.6rem}
}

/* ------ Pages éditoriales (mentions légales, confidentialité) ------ */
.page-texte{max-width:44rem;margin:2rem auto 0}
.page-texte h1{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:.4rem}
.page-texte .maj{color:var(--brume);font-size:.85rem;margin-bottom:1.5rem}
.page-texte h2{font-size:1.2rem}
.page-texte p,.page-texte li{color:var(--ivoire);margin-bottom:.9rem}
.page-texte ul{padding-left:1.2rem}
.page-texte li{margin-bottom:.5rem}
.page-texte a{color:var(--or);text-decoration:underline;text-underline-offset:3px}
.page-texte a:hover{color:var(--or-clair)}
.page-texte .encadre{
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1.2rem 1.4rem;margin-bottom:1.4rem;
}
.page-texte .encadre p:last-child{margin-bottom:0}
.page-texte dl{margin-bottom:1.2rem}
.page-texte dt{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brume);margin-top:.9rem;
}
.page-texte dd{margin-left:0}

/* ------ Page des palmarès ------
   Même typographie que les pages éditoriales, mais les blocs chiffrés
   occupent toute la colonne : seuls les paragraphes sont bornés. */
.page-palmares{margin-top:2rem}
.page-palmares h1{font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:.4rem}
.page-palmares .maj{color:var(--brume);font-size:.85rem;margin-bottom:1.6rem}
.page-palmares p{max-width:44rem;margin-bottom:1rem}
.page-palmares .encadre{
  background:var(--encre);border:1px solid var(--trait);
  border-left:3px solid var(--or);border-radius:var(--r);
  padding:1.2rem 1.4rem;margin:1.4rem 0;max-width:44rem;
}
.page-palmares .encadre p:last-child{margin-bottom:0}
.page-palmares a{color:var(--or);text-decoration:none}
.page-palmares p a{text-decoration:underline;text-underline-offset:3px}
.page-palmares a:hover{color:var(--or-clair)}
.pal-source,.pal-legende{color:var(--brume);font-size:.82rem;line-height:1.5}
.pal-suite{margin-top:2rem}

/* Les deux colonnes de mouvements */
.pal-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.5rem 0 2rem}
.pal-colonne h3{margin-top:0;font-size:1rem}
.pal-liste{list-style:none;display:grid;gap:.5rem}
.pal-liste li{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:.6rem .8rem;display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;
}
.pal-nom{font-size:.95rem;color:var(--ivoire)!important;align-self:center}
.pal-nom:hover{color:var(--or-clair)!important}
.pal-mvt{
  font-size:.85rem;color:var(--brume);white-space:nowrap;align-self:center;
  font-variant-numeric:tabular-nums;
}
.pal-mvt i{font-style:normal;color:var(--trait)}
.pal-mvt b{font-weight:600;margin-left:.3rem}
.pal-mvt.monte b{color:var(--or)}
.pal-mvt.baisse b{color:var(--manque)}
.pal-liste .pal-an{
  grid-column:1 / -1;font-size:.72rem;color:var(--brume);
  letter-spacing:.02em;line-height:1.35;
}

/* Le graphique par année personnelle : barres divergentes autour d'un axe */
.pal-annees{list-style:none;display:grid;gap:.35rem;margin:1.5rem 0 .8rem}
.pal-annees li{
  display:grid;align-items:center;gap:.8rem;
  grid-template-columns:1.9rem minmax(0,13rem) 1fr 3.2rem 2rem;
}
.pal-chiffre{
  width:1.9rem;height:1.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, #2b3158, var(--nuit));
  border:1px solid var(--or);color:var(--or-clair);
  font-family:Didot,"Bodoni MT",Georgia,serif;font-size:1rem;
}
.pal-libelle{font-size:.8rem;color:var(--ivoire);line-height:1.3}
.pal-libelle em{
  font-style:normal;color:var(--brume);font-size:.7rem;
  letter-spacing:.1em;text-transform:uppercase;display:block;
}
.pal-jauge{display:flex;align-items:center;min-width:0}
.pal-moitie{flex:1;display:flex;height:.7rem;min-width:0}
.pal-moitie.gauche{justify-content:flex-end;border-right:1px solid var(--trait)}
.pal-moitie b{display:block;height:100%;border-radius:99px}
.pal-moitie.gauche b{background:var(--manque)}
.pal-moitie.droite b{background:var(--or)}
.pal-valeur{
  font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--ivoire);
}
.pal-effectif{
  font-size:.72rem;color:var(--brume);text-align:right;
  font-variant-numeric:tabular-nums;
}
/* La galerie des douze palmarès.
   Sans JavaScript, les douze panneaux s'affichent les uns sous les autres et
   les onglets ne sont que des ancres : la page reste entière et lisible.
   site.js les transforme en onglets et n'affiche qu'un panneau à la fois. */
.pal-onglets{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.5rem 0 1.2rem}
.pal-onglets a{
  display:block;padding:.35rem .8rem;border-radius:99px;font-size:.82rem;
  color:var(--brume)!important;text-decoration:none!important;
  border:1px solid var(--trait);background:var(--encre);
  transition:color .15s, border-color .15s;
}
.pal-onglets a:hover{color:var(--ivoire)!important;border-color:var(--brume)}
.pal-onglets a[aria-current="true"]{
  color:var(--or-clair)!important;border-color:var(--or);background:var(--carte);
}
.pal-onglets a:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.pal-panneau{margin-bottom:2rem}
.pal-panneau h3{margin-top:0}
.pal-intro-onglet{color:var(--brume);font-size:.88rem;margin-bottom:1rem}
.pal-cartes{
  list-style:none;display:grid;gap:.7rem;
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.pal-carte{
  position:relative;display:block;text-align:center;
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);
  padding:1rem .5rem .8rem;text-decoration:none!important;color:var(--ivoire)!important;
  transition:border-color .15s, transform .15s;height:100%;
}
a.pal-carte:hover{border-color:var(--or);transform:translateY(-2px)}
a.pal-carte:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.pal-carte.sans-portrait{opacity:.55;cursor:default}
.pal-carte-nom{display:block;font-size:.82rem;line-height:1.3;color:var(--ivoire)}
/* Le médaillon porte les initiales ET la photo : celle-ci les recouvre.
   Contrairement au carrousel, où le script ne pose l'image qu'une fois
   chargée, la page est statique — si la photo manque, site.js retire
   l'image et les initiales réapparaissent d'elles-mêmes. */
.pal-carte .medaillon{position:relative}
.pal-carte .medaillon img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
}
.pal-rang{
  position:absolute;top:.4rem;left:.5rem;
  font-size:.62rem;letter-spacing:.1em;color:var(--or);
}
/* Appel vers la section « Quelle personnalité vous ressemble ? » */
.pal-appel{
  display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  background:var(--encre);border:1px solid var(--or);border-radius:var(--r);
  padding:1.4rem 1.5rem;margin:2rem 0;
}
.pal-appel h3{margin:0 0 .4rem}
.pal-appel > div:last-child{flex:1;min-width:16rem}
.pal-appel p{margin-bottom:.8rem;color:var(--brume);font-size:.9rem}
.pal-appel p:last-child{margin-bottom:0}
.pal-bouton{
  display:inline-block;background:var(--or);color:#241c0c!important;
  border-radius:8px;padding:.55rem 1.3rem;font-size:.95rem;font-weight:600;
  text-decoration:none!important;transition:background .15s;
}
.pal-bouton:hover{background:var(--or-clair);color:#241c0c!important}
.pal-bouton:focus-visible{outline:2px solid var(--ivoire);outline-offset:2px}

@media (max-width:760px){
  .pal-cartes{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:480px){
  .pal-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .pal-colonnes{grid-template-columns:1fr;gap:1.2rem}
  .pal-annees li{grid-template-columns:1.9rem 1fr 3rem;gap:.5rem}
  .pal-jauge{grid-column:1 / -1;order:2}
  .pal-libelle{order:1}
  .pal-valeur{order:1}
  .pal-effectif{display:none}
}