/* ==========================================================================
   layout.css : en-tete, hero, jauges de majorite, sections
   ========================================================================== */

/* ------------------------------------------------------------- en-tete -- */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--ligne);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 60px;
}

.entete__marque {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-width: 0;
}

.entete__logo {
  height: 20px;
  width: auto;
}

.entete__titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entete__outils {
  display: flex;
  align-items: center;
  gap: var(--e1);
}

.pastille-direct {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--llb-magenta) 12%, transparent);
  color: var(--llb-magenta);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pastille-direct__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pastille-direct[data-actif="oui"] .pastille-direct__point {
  animation: pouls 2s var(--doux) infinite;
}

@keyframes pouls {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}

.bouton-icone {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--encre-douce);
  transition: background var(--duree-courte) var(--doux),
    color var(--duree-courte) var(--doux);
}

.bouton-icone:hover {
  background: var(--surface-2);
  color: var(--encre);
}

.bouton-icone svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* ----------------------------------------------------------------- hero */

.hero {
  /* Le hero doit tenir dans un écran de portable sans repousser la carte
     sous la ligne de flottaison : padding resserré, marges internes courtes. */
  padding: clamp(var(--e3), 3.5vw, var(--e5)) 0 var(--e4);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--ligne);
}

.hero__date {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--llb-magenta);
  margin-bottom: var(--e1);
}

/* Le surtitre vit dans le h1 : le titre complet part au référencement,
   la lecture à l'écran reste hiérarchisée. */
.hero__sur {
  display: block;
  font-family: var(--texte);
  font-weight: 600;
  font-size: var(--t-petit);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--encre-faible);
  margin-bottom: 6px;
}

.hero__titre {
  margin-bottom: var(--e2);
  max-width: 17ch;
}

.hero__chapo {
  margin-bottom: var(--e1);
  max-width: 50ch;
}

.hero__signature {
  font-size: var(--t-petit);
  color: var(--encre-faible);
}

.hero__signature a {
  color: var(--encre-douce);
}

/* ------------------------------------------------- jauges de majorite -- */

.jauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--e2);
  margin-top: var(--e3);
}

.jauge {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--ligne);
  border-radius: var(--rayon);
  padding: var(--e2) var(--e3) var(--e3);
}

.jauge__haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e1);
}

.jauge__nom {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 1.25rem;
}

.jauge__verdict {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre-douce);
}

/* La barre ne clippe rien : c'est la piste interieure qui arrondit les
   aplats. Sans cette separation, overflow:hidden avalait le trait de
   majorite et son etiquette, qui debordent volontairement. */
.jauge__barre {
  position: relative;
  height: 40px;
  margin: var(--e2) 0 26px;
}

.jauge__piste {
  position: absolute;
  inset: 0;
  display: flex;
  border-radius: 8px;
  background: var(--vide);
  overflow: hidden;
}

.jauge__part {
  height: 100%;
  width: 0;
  flex: 0 0 auto;
  transition: width var(--duree) var(--ressort);
}

.jauge__part--dem {
  background: var(--dem-gagne);
}

.jauge__part--dem-proj {
  background: var(--dem-projete);
  opacity: 0.75;
}

.jauge__part--rep-proj {
  background: var(--rep-projete);
  opacity: 0.75;
  margin-left: auto;
}

.jauge__part--rep {
  background: var(--rep-gagne);
}

.jauge__part--ind {
  background: var(--ind-gagne);
}

.jauge__seuil {
  position: absolute;
  z-index: 2;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 2px;
  background: var(--encre);
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  transition: transform var(--duree) var(--ressort) 240ms;
}

.jauge__seuil::after {
  content: attr(data-seuil);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--encre-douce);
  white-space: nowrap;
}

.est-pret .jauge__seuil {
  transform: translateX(-50%) scaleY(1);
}

.jauge__pieds {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: var(--e2);
}

.jauge__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.jauge__score b {
  font-family: var(--titre);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
}

.jauge__score span {
  font-size: var(--t-petit);
  color: var(--encre-douce);
}

.jauge__score--dem b {
  color: var(--dem-gagne);
}

.jauge__score--rep {
  text-align: right;
}

.jauge__score--rep b {
  color: var(--rep-gagne);
}

.jauge__gain {
  font-size: var(--t-micro);
  font-weight: 600;
  color: var(--encre-faible);
}

/* ------------------------------------------------------------- sections */

.section {
  padding: var(--e6) 0;
  border-bottom: 1px solid var(--ligne);
}

.section:last-of-type {
  border-bottom: none;
}

.section__entete {
  margin-bottom: var(--e4);
}

.section__titre {
  margin-bottom: var(--e2);
}

.synthese {
  border-left: 3px solid var(--llb-magenta);
  padding-left: var(--e2);
  margin-bottom: var(--e4);
  max-width: 62ch;
}

.synthese dt {
  font-weight: 600;
  margin-bottom: 4px;
}

.synthese dd {
  margin: 0 0 var(--e2);
  color: var(--encre-douce);
}

.synthese dd:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------- pied -- */

.pied {
  background: var(--surface);
  border-top: 1px solid var(--ligne);
  padding: var(--e5) 0;
  font-size: var(--t-petit);
  color: var(--encre-douce);
}

.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e4);
}

.pied h3 {
  font-size: 0.95rem;
  margin-bottom: var(--e1);
}

.pied ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pied li {
  margin-bottom: 6px;
}

.pied__legal {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--ligne);
  font-size: var(--t-micro);
  color: var(--encre-faible);
}

.pied__legal p {
  max-width: none;
  margin-bottom: 4px;
}

.hero__conduite {
  font-size: var(--t-petit);
  color: var(--encre-douce);
  margin: 0;
}

/* Le bloc question-réponse du hero reste lisible mais cesse de pousser la
   carte vers le bas. */
.synthese--hero {
  margin: var(--e3) 0 0;
  max-width: 68ch;
}

.synthese--hero dd {
  margin-bottom: 0;
  font-size: var(--t-petit);
}