/* ==========================================================
   PEEP Académie Martinique · Consultation mouvement lycéen
   Mobile d'abord. Police : Archivo (SIL OFL), auto-hébergée.
   ========================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --bleu: #0066BA;
  --bleu-fonce: #004F91;
  --nuit: #0D2440;
  --brume: #E7F0F9;
  --blanc: #FFFFFF;
  --encre: #10233A;
  --encre-douce: #4A5B6E;
  --alerte: #C2611F;
  --alerte-clair: #EDB48A;
  --neutre: #C5CDD6;
  --bon-clair: #8DBBE6;

  /* Variables reprises par chaque volet */
  --fond: var(--blanc);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --piste: #E3E9F0;
  --rempli: var(--bon-clair);
  --rempli-fort: var(--bleu);
  --c-bon: var(--bleu);
  --c-bon-clair: var(--bon-clair);
  --c-alerte: var(--alerte);
  --c-alerte-clair: var(--alerte-clair);
  --c-neutre: var(--neutre);

  --marge: 20px;
  --largeur: 620px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid #FFB000; outline-offset: 3px; border-radius: 4px; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--marge);
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #DCE4EC;
}
.marque {
  display: flex; align-items: center; gap: 8px;
  color: var(--bleu); text-decoration: none;
  font-weight: 800; font-stretch: 80%; font-size: 1.05rem; letter-spacing: .01em;
}
.marque-logo { display: block; height: 32px; width: auto; }
.marque-acad {
  font-size: .78rem; line-height: 1.05; font-weight: 700; font-stretch: 85%;
  color: var(--bleu); padding-left: 8px; border-left: 1px solid #C9D6E4;
}
@media (max-width: 340px) { .marque-acad { display: none; } }
.btn-partage-mini {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 8px 14px; min-height: 40px;
  background: var(--bleu); color: #fff;
  font: inherit; font-weight: 700; font-size: .95rem;
}
.btn-partage-mini svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Volets ---------- */
.volet {
  background: var(--fond);
  color: var(--texte);
  padding: 64px 0 60px;
}
.contenu {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
}

.v-blanc { --fond: var(--blanc); }
.v-brume { --fond: var(--brume); --piste: #D3E1EF; }
.v-bleu {
  --fond: var(--bleu);
  --texte: #fff;
  --texte-doux: rgba(255, 255, 255, .82);
  --piste: rgba(255, 255, 255, .22);
  --rempli: rgba(255, 255, 255, .7);
  --rempli-fort: #fff;
}
.v-nuit {
  --fond: var(--nuit);
  --texte: #fff;
  --texte-doux: rgba(255, 255, 255, .75);
  --piste: rgba(255, 255, 255, .14);
  --rempli: #3D93E6;
  --rempli-fort: #6FB4F5;
  --c-bon: #4FA3F2;
  --c-bon-clair: #A9CDF0;
  --c-alerte: #F08A4B;
  --c-neutre: #4B5F78;
}

/* ---------- Typographie ---------- */
h1, h2 {
  font-weight: 800;
  font-stretch: 68%;
  line-height: .98;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 13.5vw, 5rem); margin-top: 28px; }
h2 { font-size: clamp(2.3rem, 10.5vw, 3.8rem); margin-bottom: 28px; }
h3 {
  font-size: 1.1rem; font-weight: 700; font-stretch: 85%;
  margin: 36px 0 14px;
}
.chiffre {
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(6rem, 34vw, 11rem);
  line-height: .82;
  letter-spacing: -.02em;
  color: var(--rempli-fort);
  margin-bottom: 6px;
}
.v-blanc .chiffre, .v-brume .chiffre { color: var(--bleu); }
.chiffre.alerte { color: var(--alerte); font-size: clamp(4.6rem, 26vw, 8.5rem); }
.chiffre + h2 { margin-top: 4px; }

.chapo {
  font-size: 1.2rem; line-height: 1.4;
  color: var(--texte-doux);
  max-width: 34ch;
  margin-bottom: 8px;
}
.note {
  margin-top: 22px;
  font-size: .9rem;
  color: var(--texte-doux);
}

/* ---------- Ouverture ---------- */
.ouverture { padding-top: 44px; padding-bottom: 56px; }
.ouverture h1 { margin-bottom: 16px; }
.indice { margin-top: 18px; font-size: .9rem; color: rgba(255, 255, 255, .7); }

/* ---------- Points (un point = un parent) ---------- */
.points {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 5px;
  max-width: 440px;
}
.pt { display: block; aspect-ratio: 1; border-radius: 50%; }
.pt-blanc { background: #fff; }
.pt-bon { background: var(--c-bon); }
.pt-bon-clair { background: var(--c-bon-clair); }
.pt-alerte { background: var(--c-alerte); }
.pt-alerte-clair { background: var(--c-alerte-clair); }
.pt-neutre { background: var(--c-neutre); }

.points-anime .pt {
  opacity: 0;
  transform: scale(.2);
  animation: apparition .45s cubic-bezier(.2, .9, .3, 1.3) forwards;
  animation-delay: calc(var(--i) * 14ms);
}
@keyframes apparition { to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .points-anime .pt { animation: none; opacity: 1; transform: none; }
}

.legende {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 16px;
  font-size: .95rem;
  color: var(--texte-doux);
}
.legende li { display: flex; align-items: center; gap: 7px; }
.legende b { color: var(--texte); font-weight: 800; }
.pastille { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

/* ---------- Barres ---------- */
.barres { display: grid; gap: 16px; }
.barre-lib {
  display: block;
  font-size: 1rem; font-weight: 600; line-height: 1.25;
  margin-bottom: 6px;
}
.barre-piste {
  display: grid;
  grid-template-columns: 1fr 3.6rem;
  align-items: center;
  gap: 10px;
}
.barre-piste::before {
  content: "";
  grid-column: 1; grid-row: 1;
  height: 22px; border-radius: 6px;
  background: var(--piste);
}
.barre-rempli {
  grid-column: 1; grid-row: 1;
  height: 22px; border-radius: 6px;
  background: var(--rempli);
  min-width: 6px;
}
.barre.fort .barre-rempli { background: var(--rempli-fort); }
.barre-val {
  grid-column: 2; grid-row: 1;
  font-weight: 800; font-stretch: 75%; font-size: 1.25rem;
  text-align: right; white-space: nowrap;
}

/* ---------- Barres empilées ---------- */
.empilee { margin-bottom: 18px; }
.empilee-lib { display: block; font-weight: 600; margin-bottom: 6px; }
.empilee-piste {
  display: flex; height: 38px; border-radius: 8px; overflow: hidden; gap: 2px;
}
.seg {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-stretch: 75%; font-size: 1rem; white-space: nowrap;
}
.seg-bon { background: var(--c-bon); color: #fff; }
.seg-bon-clair { background: var(--c-bon-clair); color: var(--nuit); }
.seg-alerte { background: var(--c-alerte); color: #fff; }
.seg-neutre { background: var(--c-neutre); }

/* ---------- Bulle SMS ---------- */
.sms { margin: 4px 0 32px; }
.sms-bulle {
  display: inline-block; max-width: 300px;
  background: #fff; color: var(--encre);
  padding: 12px 16px; border-radius: 20px 20px 20px 6px;
  font-size: 1rem; line-height: 1.35;
  box-shadow: 0 8px 24px rgba(0, 30, 70, .25);
}

/* ---------- Classement ---------- */
.classement { counter-reset: rang; display: grid; gap: 22px; }
.classement li {
  counter-increment: rang;
  display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 12px;
}
.classement li::before {
  content: counter(rang);
  grid-row: span 2;
  font-weight: 900; font-stretch: 62%; font-size: 3.4rem; line-height: .9;
  color: var(--bleu);
}
.classement li:nth-child(n+2)::before { color: var(--bon-clair); }
.classement strong { font-size: 1.3rem; font-weight: 800; font-stretch: 80%; line-height: 1.15; }
.classement span { color: var(--texte-doux); font-size: .98rem; }

/* ---------- Anneaux ---------- */
.anneaux { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.anneau { text-align: center; }
.anneau svg { width: 100%; max-width: 150px; display: block; margin: 0 auto; }
.anneau-fond { fill: none; stroke: #D3E1EF; stroke-width: 10; }
.anneau-val { fill: none; stroke: var(--bleu); stroke-width: 10; stroke-linecap: round; }
.anneau-txt {
  font-family: "Archivo", sans-serif; font-weight: 900; font-stretch: 65%;
  font-size: 30px; fill: var(--encre);
  text-anchor: middle; dominant-baseline: central;
}
.anneau-pc { font-size: 16px; font-weight: 700; }
.anneau figcaption { margin-top: 6px; font-weight: 800; font-stretch: 80%; font-size: 1.1rem; }

/* ---------- Duo de chiffres ---------- */
.duo .contenu { display: grid; gap: 44px; }
.duo h2 { margin-bottom: 0; }

/* ---------- Étiquettes ---------- */
.etiquettes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.etiquettes li {
  padding: .3em .75em; border-radius: 999px;
  background: var(--brume); color: var(--bleu-fonce);
  font-weight: 800; font-stretch: 75%; line-height: 1.15;
}
.etiquettes li:first-child { background: var(--alerte); color: #fff; }

/* ---------- Citations ---------- */
.citations {
  display: flex; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px var(--marge) 14px;
  scroll-padding: 0 var(--marge);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-width: calc(var(--largeur) + 2 * var(--marge));
  margin: 0 auto;
}
.citations li {
  flex: 0 0 84%; max-width: 380px;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 26px 22px;
  display: flex; align-items: flex-end;
  min-height: 180px;
}
.citations blockquote {
  font-style: italic; font-weight: 500;
  font-size: 1.3rem; line-height: 1.35;
}
.citations blockquote::before {
  content: "«";
  display: block;
  font-style: normal; font-weight: 900; font-stretch: 62%;
  font-size: 4rem; line-height: .7;
  color: #6FB4F5; margin-bottom: 14px;
}
.v-nuit .note { margin-top: 10px; }

/* ---------- Demandes ---------- */
.demandes { display: grid; gap: 12px; margin-top: 26px; }
.demandes li {
  background: rgba(255, 255, 255, .12);
  border-left: 5px solid #fff;
  border-radius: 4px 14px 14px 4px;
  padding: 16px 18px;
}
.demandes strong {
  display: block;
  font-size: 1.35rem; font-weight: 800; font-stretch: 75%; line-height: 1.1;
  margin-bottom: 4px;
}
.demandes span { color: rgba(255, 255, 255, .85); font-size: 1rem; }

/* ---------- Partage ---------- */
.partage { display: grid; gap: 12px; margin-top: 28px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 18px;
  border: 0; border-radius: 14px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 1.1rem; text-decoration: none;
}
.btn svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.btn-whatsapp { background: #1FA855; color: #fff; }
.btn-facebook { background: #1877F2; color: #fff; }
.btn-lien { background: var(--brume); color: var(--bleu-fonce); }
.btn:active, .btn-partage-mini:active { transform: scale(.98); }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--nuit); color: rgba(255, 255, 255, .7);
  padding: 32px var(--marge) max(32px, env(safe-area-inset-bottom));
  font-size: .85rem; text-align: center;
}
.pied p { max-width: 52ch; margin: 0 auto 8px; }

/* ---------- Message de confirmation ---------- */
.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--encre); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-weight: 700; z-index: 20;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

/* ---------- Écrans plus larges ---------- */
@media (min-width: 720px) {
  :root { --marge: 32px; }
  .volet { padding: 96px 0 90px; }
  .duo .contenu { grid-template-columns: 1fr 1fr; }
  .partage { grid-template-columns: 1fr 1fr 1fr; }
  .citations li { flex-basis: 360px; }
}