/* ============================================================
   Inspo — feuille de style
   Look « médias sociaux » : stories, feed, hashtags.
   Mobile d'abord. Thèmes clair et sombre via tokens.
   ============================================================ */

:root {
  --fond: #fafafa;
  --carte: #ffffff;
  --bordure: #e8e8ee;
  --texte: #101014;
  --texte-doux: #71717e;
  --accent: #d62976;
  --rayon: 18px;

  /* Anneau de story (dégradé signature) */
  --anneau: conic-gradient(from 210deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75);

  /* Dégradés des visuels de posts et des stories */
  --grad-1: linear-gradient(135deg, #ff5e7d, #ff9966);
  --grad-2: linear-gradient(135deg, #4facfe, #00e0b8);
  --grad-3: linear-gradient(135deg, #962fbf, #fb7ba2);
  --grad-4: linear-gradient(135deg, #f7b733, #fc4a1a);
  --grad-5: linear-gradient(135deg, #11c76f, #38b2f8);
  --grad-6: linear-gradient(135deg, #fa709a, #ffd166);
  --grad-7: linear-gradient(135deg, #b8863b, #5e3f1e); /* sépia — légendes */

  /* Voile sombre + lignes d'énergie diagonales, appliqués sur les grands visuels */
  --voile:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 28px),
    linear-gradient(180deg, rgba(10, 10, 22, 0.14), rgba(10, 10, 22, 0.52));
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0b0b0f;
    --carte: #16161d;
    --bordure: #26262f;
    --texte: #f4f4f8;
    --texte-doux: #9d9dab;
    --accent: #ff4d94;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}

/* touch-action: manipulation empêche le double-tap-zoom accidentel de
   Safari sur les boutons tapés rapidement (stories, likes, quiz...) sans
   désactiver le pincer-zoomer — le zoom volontaire reste possible partout.
   tap-highlight transparent : le rectangle gris que le mobile flashe au
   toucher (très visible sur les grandes zones de tap invisibles des
   stories — signalé par JP). Le site fournit ses propres retours visuels
   (diapo qui avance, cœur qui pop, boutons qui s'enfoncent). */
button { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ---------- Barre d'app ---------- */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordure);
  padding: 0.8rem 1rem 0.6rem;
  max-width: 640px;
  margin: 0 auto;
}

.appbar-haut {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.logo .etoile {
  background: var(--anneau);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.appbar-slogan {
  color: var(--texte-doux);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-bouton {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--texte);
  padding: 0.25rem;
  margin-left: 0.2rem;
  align-self: center;
  display: inline-flex;
}

.menu-bouton svg { width: 24px; height: 24px; }

.menu-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Menu latéral ---------- */

.tiroir-fond {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 14, 0.55);
  backdrop-filter: blur(4px);
  z-index: 70;
  display: flex;
  justify-content: flex-end;
}

.tiroir {
  background: var(--carte);
  border-left: 1px solid var(--bordure);
  width: min(320px, 85vw);
  height: 100%;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  animation: glisse 0.25s ease;
}

@keyframes glisse {
  from { transform: translateX(40px); opacity: 0; }
}

.tiroir-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tiroir-fermer { position: static; }

.tiroir-item {
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texte);
  padding: 0.8rem 0.6rem;
  border-radius: 12px;
}

.tiroir-item:hover { background: var(--fond); }

.tiroir-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tiroir-note {
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--texte-doux);
  padding: 0.6rem;
}

/* ---------- Chips de filtres ---------- */

.chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 0.7rem;
  -webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.38rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.chip:active { transform: scale(0.95); }

.chip.actif {
  background: var(--texte);
  border-color: var(--texte);
  color: var(--fond);
}

.chip:focus-visible,
.story-bulle:focus-visible,
.post-visuel:focus-visible,
.action:focus-visible,
.stories-fermer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Accueil : la carte d'entrée (amorce du profil en vedette) ---------- */

.accueil {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 0.75rem 0.2rem;
}

/* .post-visuel.carte-entree : double classe nécessaire — sinon l'aspect-ratio 4/3
   de .post-visuel (défini plus bas) gagne et transforme la carte en dalle vide */
.post-visuel.carte-entree {
  aspect-ratio: auto;
  min-height: 0;
  border-radius: var(--rayon);
  gap: 0.65rem;
  padding: 1.3rem 1.4rem 1.4rem;
}

.entree-entete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.entree-entete .mini-anneau {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.entree-sur {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.entree-amorce {
  font-size: clamp(1.35rem, 5.5vw, 1.75rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}

.entree-cta {
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 800;
  color: #101014;
  background: #fff;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
}

.sous-accueil {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.3rem 0;
}

.sous-accueil-texte {
  color: var(--texte-doux);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Compteur de la collection (« ✦ 12/21 découvertes ») — local à l'appareil */
.collection-compteur {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.melanger {
  flex: 0 0 auto;
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.melanger:active { transform: rotate(-8deg) scale(0.94); }

.melanger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Rangée de stories ---------- */

.stories {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 1rem 1rem 0.4rem;
  -webkit-overflow-scrolling: touch;
}

.stories::-webkit-scrollbar { display: none; }

/* Fondus : signalent qu'on peut glisser plutôt que de couper net une bulle.
   Chaque bord s'allume seulement s'il y a vraiment du contenu caché de ce
   côté (classes posées par app.js au scroll) — un fondu à droite qui reste
   là une fois rendu à la fin, ou l'absence de fondu à gauche une fois
   scrollé, avaient l'air cassés (signalé par JP). */
.stories.fondu-droite {
  mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
}
.stories.fondu-gauche {
  mask-image: linear-gradient(to left, black calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(to left, black calc(100% - 48px), transparent);
}
.stories.fondu-gauche.fondu-droite {
  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}

@media (hover: hover) and (pointer: fine) {
  /* Indique qu'on peut glisser à la souris (voir app.js) — sans ça, rien
     ne signale sur laptop que la rangée déborde du cadre. */
  .stories { cursor: grab; }
  .stories.stories-glisse { cursor: grabbing; }
}

/* Le clic-glissé souris (app.js) ne doit ni sélectionner le texte des noms
   ni déclencher le drag-and-drop natif des avatars-photos — sinon le geste
   se bat avec le scroll. */
.stories.stories-glisse { user-select: none; }
.story-avatar { -webkit-user-drag: none; user-drag: none; }

.story-bulle {
  position: relative; /* ancre de la pastille NOUVEAU */
  flex: 0 0 auto;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 76px;
}

/* Pastille des fiches récentes (champ « ajoute » de data.js, 14 jours).
   Posée sur la BULLE, pas dans l'anneau — l'anneau tourne en continu et
   emporterait la pastille avec lui. */
.story-nouveau {
  position: absolute;
  top: 54px; /* chevauche le bas de l'anneau de 68px */
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid var(--fond);
  pointer-events: none;
}

.story-anneau {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--anneau);
  padding: 3px;
  display: grid;
  place-items: center;
  transition: transform 0.12s ease;
}

.story-bulle:active .story-anneau { transform: scale(0.93); }

/* Story déjà vue : l'anneau s'éteint (code Instagram) — ce qui reste à
   découvrir se repère d'un œil. L'état vit dans l'appareil seulement. */
.story-bulle.vue .story-anneau { background: var(--bordure); }
.story-bulle.vue .story-nom { opacity: 0.65; }

.story-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2.5px solid var(--fond);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
}

.story-nom {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--texte-doux);
  max-width: 76px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Fil de posts ---------- */

.fil {
  max-width: 640px;
  margin: 0 auto;
  padding: 0.6rem 0 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  margin: 0 0.75rem;
  overflow: hidden;
}

.post-entete {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
}

.mini-anneau {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--anneau);
  padding: 2px;
}

.mini-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--carte);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
}

.post-qui { min-width: 0; }

.post-nom { font-weight: 800; font-size: 0.95rem; line-height: 1.3; }

.post-lieu {
  color: var(--texte-doux);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.post-discipline {
  margin-left: auto;
  flex: 0 1 auto;
  max-width: 42%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Sur mobile, ce max-width coupait les sports (« COURT… », « DANSE
     CONTE… », signalé par JP) : le nom ne se compresse pas et étouffait
     la pastille. Correctif plus bas : l'en-tête devient enveloppable et
     la pastille descend sous le nom, entière, quand la place manque. */
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

/* Média query APRÈS les règles de base — à spécificité égale, une media
   query placée avant se fait écraser par l'ordre du fichier (leçon quiz.css). */
@media (max-width: 520px) {
  .post-entete { flex-wrap: wrap; row-gap: 0.15rem; }
  .post-discipline {
    max-width: 100%;
    /* Si la pastille tient à droite du nom, elle y reste ; sinon elle
       descend sur sa propre ligne, ENTIÈRE (margin-left: auto la garde
       collée à droite dans les deux cas). */
  }
}

/* Visuel du post : bloc dégradé cliquable qui ouvre la story */

.post-visuel {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  color: #fff;
  text-align: left;
  position: relative;
  isolation: isolate; /* les enfants en z-index négatif (photo, voile) restent sous ce bloc, pas sous toute la carte */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
}

/* Photo réelle (consentie) en fond du grand visuel : sous le texte (non
   positionné, donc peint au-dessus), au-dessus du dégradé de repli. Le
   object-position ci-dessous est un repli — chaque profil peut l'ajuster via
   `photoPosition` (data.js), posé en style inline par visuelPhotoHTML(). */
.post-visuel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: -2;
}

/* Voile en dégradé, seulement dans le bas (là où vit le texte) : garde le
   haut de la photo net, assure le contraste du texte sans assombrir tout
   l'ensemble (JP, 2026-07-23 — le voile plein précédent avait été retiré
   pour la raison inverse). */
.post-visuel-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 22, 0) 42%, rgba(10, 10, 22, 0.75) 100%);
  pointer-events: none;
}

/* Voile sombre par-dessus le dégradé : look affiche, texte plus lisible, moins bonbon */
.grad-fond[data-gradient="1"] { background: var(--grad-1); }
.grad-fond[data-gradient="2"] { background: var(--grad-2); }
.grad-fond[data-gradient="3"] { background: var(--grad-3); }
.grad-fond[data-gradient="4"] { background: var(--grad-4); }
.grad-fond[data-gradient="5"] { background: var(--grad-5); }
.grad-fond[data-gradient="6"] { background: var(--grad-6); }
.grad-fond[data-gradient="7"] { background: var(--grad-7); }

/* Sur grand écran, le 4:3 devient une dalle à moitié vide — on plafonne */
@media (min-width: 700px) {
  .post-visuel { max-height: 400px; }
}

.post-visuel[data-gradient="1"] { background: var(--voile), var(--grad-1); }
.post-visuel[data-gradient="2"] { background: var(--voile), var(--grad-2); }
.post-visuel[data-gradient="3"] { background: var(--voile), var(--grad-3); }
.post-visuel[data-gradient="4"] { background: var(--voile), var(--grad-4); }
.post-visuel[data-gradient="5"] { background: var(--voile), var(--grad-5); }
.post-visuel[data-gradient="6"] { background: var(--voile), var(--grad-6); }
.post-visuel[data-gradient="7"] { background: var(--voile), var(--grad-7); }

.post-stat {
  font-size: clamp(4rem, 17vw, 5.6rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
  display: inline-block;
  transform: skew(-4deg);
  align-self: flex-start;
}

.post-stat-label {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 24ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.post-indice {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
  margin-top: 0.4rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.post-caption {
  padding: 0.1rem 1rem 0.15rem;
  font-size: 0.9rem;
  color: var(--texte);
}

.post-caption strong { font-weight: 800; }

/* Rangée d'actions */

.post-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem 0.1rem;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--texte);
  padding: 0.3rem 0.45rem;
  border-radius: 10px;
  line-height: 1;
  transition: transform 0.12s ease;
}

.action:active { transform: scale(1.25); }

/* Cœur et partage : de vraies icônes SVG (traits, comme Instagram) plutôt
   que des emoji — même famille visuelle que les icônes réseaux sociaux
   juste à côté, pas de cercle de fond (JP, 2026-07-22 : référence
   Instagram, icônes nues). Rempli en rouge seulement quand aimé. */
.action.coeur svg,
.action.partage svg { width: 23px; height: 23px; }

.action-histoire {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--accent);
  padding: 0.4rem 0.7rem;
}

.action-icone {
  display: inline-flex;
  align-items: center;
  color: var(--texte);
  padding: 0.3rem 0.4rem;
}

.action-icone svg { width: 21px; height: 21px; }

/* Cœur cliquable dans l'en-tête de la story (2026-07-22, JP : « on ne peut
   toujours pas liker une fiche en cours de route »). margin-left: auto ici
   plutôt que sur .stories-suivre : c'est maintenant le premier élément à se
   pousser vers la droite, .stories-suivre/.stories-fermer suivent juste après. */
.stories-coeur {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

.stories-suivre {
  display: flex;
  gap: 0.4rem;
}

.stories-icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}

.stories-icone svg { width: 18px; height: 18px; }

/* :not([hidden]) — sinon le ✕ perdrait son margin-left:auto quand « Suivre » est caché */
.stories-suivre:not([hidden]) + .stories-fermer { margin-left: 0.5rem; }

.coeur.aime { animation: pop 0.25s ease; }

@keyframes pop {
  50% { transform: scale(1.4); }
}

.post-tags {
  padding: 0.15rem 1rem 1rem;
  font-size: 0.85rem;
  color: var(--texte-doux);
  font-weight: 600;
}

/* Les hashtags ne sont pas cliquables (pas de filtre, choix assumé du
   site) — ils héritent donc du même ton neutre que le reste de
   .post-tags plutôt qu'une couleur d'accent, pour ne plus ressembler à
   un lien mort (signalé par plusieurs personas de test, 07-18 et 07-22). */

.aucun-resultat {
  text-align: center;
  color: var(--texte-doux);
  padding: 3rem 1rem;
  font-size: 1rem;
  font-weight: 600;
}

/* ---------- Story plein écran ---------- */

.stories-fond {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 50;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}

.stories-cadre {
  position: relative;
  width: min(100vw, 480px);
  height: min(100dvh, 860px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
}

@media (min-width: 500px) {
  .stories-cadre { border-radius: 22px; height: min(92dvh, 860px); }
}

.stories-cadre[data-gradient="1"] { background: var(--voile), var(--grad-1); }
.stories-cadre[data-gradient="2"] { background: var(--voile), var(--grad-2); }
.stories-cadre[data-gradient="3"] { background: var(--voile), var(--grad-3); }
.stories-cadre[data-gradient="4"] { background: var(--voile), var(--grad-4); }
.stories-cadre[data-gradient="5"] { background: var(--voile), var(--grad-5); }
.stories-cadre[data-gradient="6"] { background: var(--voile), var(--grad-6); }
.stories-cadre[data-gradient="7"] { background: var(--voile), var(--grad-7); }

/* Barres de progression */

.stories-progres {
  display: flex;
  gap: 4px;
  padding: 0.7rem 0.8rem 0;
}

.progres-segment {
  flex: 1;
  height: 3px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  cursor: pointer;
  /* Même protection anti-double-tap-zoom que les zones de navigation. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Un trait de 3 px, c'est intapable au pouce. Cette zone invisible de 23 px
   rend le segment atteignable sans rien déplacer dans la mise en page — et
   elle reste bien au-dessus des zones de navigation, qui commencent à 70 px. */
.progres-segment::after {
  content: "";
  position: absolute;
  inset: -10px 0;
}

.progres-segment:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.progres-segment .rempli {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 2px;
}

.progres-segment.vu .rempli { width: 100%; }
.progres-segment.actuel .rempli { width: 100%; transition: width 0.2s ease; }

/* En-tête de la story */

.stories-entete {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
}

.stories-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px; /* l'en-tête est en flex : sans ça, le cercle devient un ovale */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  overflow: hidden; /* clippe la photo (rectangulaire) dans le cercle */
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.25);
}

.stories-avatar.a-une-photo { cursor: pointer; }

/* Photo agrandie : tape l'avatar de l'en-tête pour la voir en grand
   (JP, 2026-07-23). Confinée au cadre de la story (position absolute dans
   .stories-cadre, pas fixed) pour respecter ses coins arrondis. */
.story-photo-agrandie {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.9);
  display: grid;
  place-items: center;
}

.story-photo-agrandie img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
  border-radius: 12px;
}

.story-photo-fermer {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}

.stories-nom { font-weight: 800; font-size: 0.92rem; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }

.stories-meta { font-size: 0.75rem; opacity: 0.9; text-shadow: 0 1px 6px rgba(0,0,0,0.35); }

.stories-badge-valide {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  color: #3fa9f5;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.stories-badge-valide svg { width: 15px; height: 15px; }

/* 44×44 minimum : la cible recommandée pour un doigt (iOS / WCAG 2.5.5) —
   à 34px, fermer était « pas super facile » sur téléphone (signalé par JP). */
.stories-fermer {
  margin-left: auto;
  border: none;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  width: 44px;
  height: 44px;
  flex: 0 0 44px; /* l'en-tête est en flex : sans ça, le rond se fait écraser en ovale */
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Contenu de la diapositive */

.stories-corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1.6rem 3.5rem;
  gap: 0.8rem;
  overflow-y: auto;
  min-height: 0;
}

.slide-etiquette {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(0, 0, 0, 0.28);
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.slide-texte {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  text-wrap: pretty;
}

.stories-pied {
  position: absolute;
  bottom: 0.9rem;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.bouton-carte {
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.92rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  transition: transform 0.12s ease;
}

.bouton-carte:active { transform: scale(0.95); }

.bouton-carte:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.stories-indication {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

/* Diapo finale : la quote éditoriale en grand */
.slide-quote {
  font-size: clamp(1.6rem, 6.5vw, 2.1rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.slide-citation-source {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* La porte concrète du « Et toi ? », cliquable — au-dessus des zones de
   navigation (z-index), sinon le tap ouvre la diapo suivante au lieu du lien. */
.bouton-et-toi {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: #101014;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.bouton-et-toi:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Bravo de collection complète : une pastille au-dessus de la quote, dans le
   flux de la diapo — jamais un pop-up qui coupe la lecture. */
.finale-collection {
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 800;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(6px);
  text-shadow: none;
  animation: monte 0.55s ease both;
}

.finale-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
  animation: monte 0.55s 0.16s ease both;
}

.finale-actions .bouton-carte {
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
}

.histoire-suivante {
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 800;
  color: #101014;
  background: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.histoire-suivante:focus-visible,
.finale-actions .bouton-carte:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Zones de navigation (tap gauche / droite) */

.zone-nav {
  position: absolute;
  top: 70px;
  bottom: 0;
  width: 38%;
  border: none;
  background: none;
  cursor: pointer;
  /* Empêche le double-tap-zoom de Safari sur ces zones tapées rapidement
     (bogue signalé par JP : le texte apparaissait décalé/coupé après
     un zoom accidentel). Le vrai pincer-zoomer reste possible ailleurs. */
  touch-action: manipulation;
}

.zone-nav.gauche { left: 0; }
.zone-nav.droite { right: 0; width: 62%; }

/* ---------- Pied ---------- */

.pied {
  max-width: 640px;
  margin: 0 auto;
  border-top: 1px solid var(--bordure);
  padding: 1.6rem 1rem 2.6rem;
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.85rem;
}

.pied-note { font-size: 0.75rem; margin-top: 0.3rem; opacity: 0.75; }

.lien-apropos {
  border: none;
  background: none;
  cursor: pointer;
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lien-apropos:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- À propos ---------- */

.apropos h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.4rem;
}

.apropos h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 1.3rem 0 0.35rem;
  color: var(--accent);
}

.apropos p {
  color: var(--texte);
  font-size: 0.95rem;
}

/* ---------- Cartes « Légendes » (look carte de hockey vintage) ---------- */

.post.retro {
  background: #f6edd8;
  border: 3px double #8a6a3b;
  box-shadow: inset 0 0 0 3px #f6edd8, inset 0 0 0 4px #c9b284;
}

.post.retro .post-nom,
.post.retro .post-tagline {
  font-family: Georgia, "Times New Roman", serif;
}

.post.retro .post-nom { color: #3c2c14; }
.post.retro .post-lieu, .post.retro .post-tags { color: #7a6647; }
.post.retro .post-tags .tag { color: #8a5a1e; }

.post.retro .post-discipline {
  color: #8a5a1e;
  border-color: #c9b284;
}

.post.retro .mini-avatar { border-color: #f6edd8; }

/* « Voir son histoire ▸ » utilise --accent partout ailleurs (violet en
   mode sombre) — sur une carte Légende, ça jure avec le sépia. Même ton
   que le reste du style vintage (JP, 2026-07-22 : « le bleu sur le doré
   fit moins »). */
.post.retro .action-histoire { color: #8a5a1e; }

/* Le fond crème des cartes Légende ne bascule jamais en mode sombre — sans
   ceci, .action (color: var(--texte)) deviendrait blanc sur crème en
   thème sombre, invisible comme le cœur qui a lancé cette série de correctifs. */
.post.retro .action.coeur,
.post.retro .action.partage { color: #8a5a1e; }

/* ---------- Photo réelle (quand on en a une, consentie) ---------- */

.avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Pastille NOUVEAU sur le visuel du post (même durée de vie que celle
   des stories — 14 jours après la date « ajoute » de la fiche). */
.post-nouveau {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.retro-ruban {
  position: absolute;
  top: 1.1rem;
  left: 0;
  background: #3c2c14;
  color: #f6edd8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.95rem 0.35rem 1.5rem;
  border-radius: 0 999px 999px 0;
  text-shadow: none;
  /* Sans ça, le ruban brun se fond dans la carte sépia des légendes qui est
     dans la même famille de tons (signalé par JP) — un léger liseré doré
     le fait ressortir peu importe le fond en dessous. */
  box-shadow: 0 0 0 1.5px #b8863b, 0 4px 12px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  .post.retro { background: #efe3c8; }
}

/* ---------- Bouton flottant + formulaire de nomination ---------- */

.fab {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 30;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fa7e1e, #d62976, #962fbf);
  box-shadow: 0 6px 22px rgba(214, 41, 118, 0.45);
  transition: transform 0.12s ease;
}

.fab:active { transform: scale(0.94); }

.fab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.proposer-fond {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 14, 0.6);
  backdrop-filter: blur(6px);
  z-index: 60;
  display: grid;
  place-items: end center;
  overflow-y: auto;
}

@media (min-width: 560px) { .proposer-fond { place-items: center; } }

.proposer {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 1.6rem 1.4rem 2rem;
  position: relative;
}

@media (min-width: 560px) { .proposer { border-radius: 22px; } }

.proposer h2 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.proposer-sous-titre {
  color: var(--texte-doux);
  font-size: 0.92rem;
  margin: 0.5rem 0 1.2rem;
}

/* 44×44 minimum, même raison que .stories-fermer ci-dessus. */
.proposer-fermer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: none;
  background: var(--fond);
  color: var(--texte);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.05rem;
  cursor: pointer;
}

.proposer-onglets {
  display: flex;
  gap: 0.4rem;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 0.25rem;
  margin-bottom: 1.2rem;
  width: fit-content;
  max-width: calc(100% - 44px);
}

.onglet {
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  color: var(--texte-doux);
  white-space: nowrap;
}

.onglet.actif {
  background: var(--texte);
  color: var(--fond);
}

.onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#form-nomination,
#form-histoire {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#form-nomination label,
#form-histoire label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-weight: 700;
  font-size: 0.9rem;
}

#form-nomination .optionnel,
#form-histoire .optionnel { font-weight: 500; color: var(--texte-doux); }

#form-nomination input,
#form-nomination select,
#form-nomination textarea,
#form-histoire input,
#form-histoire select,
#form-histoire textarea {
  font: inherit;
  /* 16px minimum : sous ce seuil, Safari iOS zoome automatiquement sur le
     champ au toucher (et dézoome en le quittant) — donnait l'impression que
     la page « bouge de gauche à droite » pendant qu'on remplit le formulaire. */
  font-size: 16px;
  font-weight: 500;
  color: var(--texte);
  background: var(--fond);
  border: 1.5px solid var(--bordure);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  width: 100%;
}

#form-nomination input:focus,
#form-nomination select:focus,
#form-nomination textarea:focus,
#form-histoire input:focus,
#form-histoire select:focus,
#form-histoire textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

#form-nomination textarea,
#form-histoire textarea { resize: vertical; }

.case-consentement {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.6rem !important;
}

.case-consentement input[type="checkbox"] {
  width: auto !important;
  margin-top: 0.25rem;
  accent-color: var(--accent);
}

.case-consentement span { font-weight: 500; font-size: 0.85rem; color: var(--texte-doux); }

/* piège à robots : invisible pour les humains */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.note-anonyme {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte-doux);
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

.aide-histoire {
  font-size: 0.85rem;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
}

.aide-histoire summary {
  font-weight: 600;
  cursor: pointer;
  color: var(--texte);
}

.aide-histoire[open] summary { margin-bottom: 0.6rem; }

.aide-histoire ul {
  margin: 0.5rem 0;
  padding-left: 1.1rem;
  color: var(--texte-doux);
}

.aide-histoire li { margin-bottom: 0.5rem; }

.aide-histoire p {
  color: var(--texte-doux);
  margin: 0.5rem 0 0;
}

.note-avertissement {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte);
  background: color-mix(in srgb, var(--accent) 12%, var(--fond));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--bordure));
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}

#bloc-parent {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.9rem;
  border: 1px dashed var(--bordure);
  border-radius: 12px;
}

.aide-ia-intro {
  color: var(--texte-doux);
  margin: 0.9rem 0 0.6rem;
  font-size: 0.85rem;
}

.bouton-copier-prompt {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--bordure);
  border-radius: 14px;
  background: var(--carte);
  color: var(--texte);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.bouton-copier-prompt:hover { border-color: var(--accent); transform: translateY(-1px); }
.bouton-copier-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-erreur {
  color: #d13438;
  font-size: 0.88rem;
  font-weight: 600;
}

.bouton-envoyer {
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  padding: 0.85rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #fa7e1e, #d62976, #962fbf);
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.bouton-envoyer:active { transform: scale(0.97); }
.bouton-envoyer:disabled { opacity: 0.6; cursor: wait; }

.proposer-merci {
  text-align: center;
  padding: 1.5rem 0.5rem 0.5rem;
}

.proposer-merci .gros-emoji { font-size: 3rem; display: block; margin-bottom: 0.8rem; }

.proposer-merci h2 { margin-bottom: 0.5rem; }

.proposer-merci p { color: var(--texte-doux); font-size: 0.95rem; }

/* ---------- Inspo de la semaine ---------- */

.vedette-bandeau {
  background: linear-gradient(90deg, #fa7e1e, #d62976, #962fbf);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* ---------- Le chemin (ligne du temps dans la story) ---------- */

.chemin {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: monte 0.55s 0.08s ease both;
}

.chemin li {
  position: relative;
  padding-left: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* La ligne verticale et les points */
.chemin li::before {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 1.2rem;
  bottom: -1rem;
  width: 2.5px;
  background: rgba(255, 255, 255, 0.45);
}

.chemin li:last-child::before { display: none; }

.chemin li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36rem;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

.chemin li:last-child::after {
  background: #ffd166;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.9);
}

.chemin-quand {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

.chemin-quoi {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Mouvement : le site respire ---------- */

/* Dégradés vivants — dérive lente des couleurs */
.post-visuel,
.stories-cadre {
  background-size: 170% 170%;
  animation: derive 16s ease-in-out infinite alternate;
}

@keyframes derive {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

/* Entrée des posts au défilement */
.anim-entree {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.anim-entree.visible {
  opacity: 1;
  transform: none;
}

/* Anneaux de stories qui tournent doucement (les initiales restent droites) */
.story-anneau { animation: tourne 12s linear infinite; }
.story-avatar { animation: tourne-inverse 12s linear infinite; }

@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes tourne-inverse { to { transform: rotate(-360deg); } }

/* Contenu des diapos de story qui monte en fondu */
.slide-etiquette { animation: monte 0.45s ease both; }
.slide-texte { animation: monte 0.55s 0.08s ease both; }
.slide-quote { animation: monte 0.55s 0.08s ease both; }

@keyframes monte {
  from { opacity: 0; transform: translateY(18px); }
}

/* Le bouton flottant pulse discrètement — même couleur que son ombre
   statique (marine), pas l'ancien rose d'avant le rebranding. Cette
   animation resurchargeait la couleur du box-shadow marine posé plus
   bas dans le fichier (règle .fab { background: #0b1633; ... }) : le
   halo restait rose en continu, jurait avec le bouton (signalé par JP). */
.fab { animation: halo 3.2s ease-in-out infinite; }

@keyframes halo {
  0%, 100% { box-shadow: 0 6px 22px rgba(11, 22, 51, 0.35); }
  50% { box-shadow: 0 6px 30px rgba(11, 22, 51, 0.65); }
}

/* L'étoile du logo scintille */
.logo .etoile { display: inline-block; animation: scintille 2.6s ease-in-out infinite; }

@keyframes scintille {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.86); }
}

/* ---------- Divers ---------- */

/* ---------- Invitation PWA ---------- */
/* Sous la story (z-index 50) : elle n'apparaît qu'au retour au fil de
   toute façon. Même famille visuelle que le FAB (marine uni). */
.invite-pwa {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: min(94vw, 540px);
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: #0b1633;
  color: #fff;
  box-shadow: 0 12px 30px rgba(11, 22, 51, 0.45);
}

.invite-pwa-texte { margin: 0; font-size: 0.88rem; line-height: 1.4; flex: 1; }
.invite-pwa-texte strong { display: block; }

.invite-pwa-installer {
  border: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 800;
  background: #fff;
  color: #0b1633;
  flex: none;
}

.invite-pwa-fermer {
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
}

/* Les fenêtres utilisent display:grid — sans cette règle, l'attribut hidden serait ignoré */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Rafraîchissement de marque 2026 — ex-brand-refresh.css.
   Fusionné ICI, À LA FIN, exprès : ces règles écrasent celles
   du haut du fichier (même ordre de cascade qu'avant la fusion,
   quand c'était un fichier séparé chargé après). Trois bogues de
   cascade sont venus de couches invisibles entre fichiers — au
   moins maintenant l'écrasement se voit dans le même fichier.
   ============================================================ */

/* Maquette de marque 2026 — adaptation légère du kit Inspo. */

:root {
  --fond: #f3f2ff;
  --carte: #ffffff;
  --bordure: #dfe1ee;
  --texte: #0b0f23;
  --texte-doux: #536174;
  --accent: #6e4cff;
  --rayon: 16px;
  --anneau: conic-gradient(from 220deg, #6e4cff, #a78bfa, #3fd7c6, #6e4cff);
  --grad-1: linear-gradient(140deg, #6e4cff, #a78bfa);
  --grad-2: linear-gradient(140deg, #2158cb, #3fd7c6);
  --grad-3: linear-gradient(140deg, #4f2db7, #a78bfa 58%, #3fd7c6);
  --grad-4: linear-gradient(140deg, #182659, #6e4cff 65%, #b8acff);
  --grad-5: linear-gradient(140deg, #0d6d78, #3fd7c6 62%, #a78bfa);
  --grad-6: linear-gradient(140deg, #6e4cff, #d4c9ff 58%, #3fd7c6);
  --voile:
    radial-gradient(circle at 88% 8%, rgba(167, 139, 250, 0.62), transparent 28%),
    radial-gradient(circle at 12% 96%, rgba(63, 215, 198, 0.34), transparent 36%),
    linear-gradient(180deg, rgba(11, 15, 35, 0.02), rgba(11, 15, 35, 0.58));
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #080b1a;
    --carte: #15182f;
    --bordure: #282c4a;
    --texte: #ffffff;
    --texte-doux: #c8ccda;
    --accent: #a78bfa;
  }
}

body {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #6e4cff 9%, transparent), transparent 28rem),
    var(--fond);
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

.appbar {
  max-width: none;
  padding: 0.72rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, #0b0f23 92%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 35px rgba(11, 15, 35, 0.12);
}

.appbar-haut { align-items: center; }

.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo img {
  display: block;
  width: 104px;
  height: auto;
}

.appbar-slogan {
  margin-left: auto;
  color: #c8ccda;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.menu-bouton { color: #fff; }

.tiroir {
  color: #fff;
  background: #0b0f23;
  border-left-color: rgba(255, 255, 255, 0.12);
}

.tiroir-item { color: #fff; }
.tiroir-item:hover { background: rgba(255, 255, 255, 0.08); }
.tiroir-note { color: #c8ccda; }

.accueil {
  max-width: 780px;
  padding: clamp(1rem, 4vw, 2.25rem) 1rem 0.2rem;
}

.post-visuel.carte-entree {
  isolation: isolate;
  min-height: clamp(420px, 62vw, 560px);
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 70px rgba(11, 15, 35, 0.24);
  overflow: hidden;
}

.post-visuel.carte-entree::before,
.post-visuel.carte-entree::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 90%;
  height: 42%;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0.82;
  transform: rotate(-12deg);
}

.post-visuel.carte-entree::before {
  top: -12%;
  right: -28%;
  background: linear-gradient(90deg, transparent, #a78bfa, #6e4cff, transparent);
}

.post-visuel.carte-entree::after {
  right: -16%;
  bottom: -24%;
  background: linear-gradient(90deg, transparent, #3fd7c6, #6e4cff, transparent);
}

/* Photo de fond (silhouette + aurore boréale) : remplace le dégradé de couleur
   par une vraie image d'ambiance. [data-gradient] ajouté au sélecteur juste
   pour battre la spécificité de .post-visuel[data-gradient="N"] (même poids
   que .post-visuel.carte-entree sinon — l'ordre du fichier déciderait, fragile).
   Les rubans dégradés ::before/::after sont coupés : une vraie aurore derrière
   n'a pas besoin de son imitation en dégradé par-dessus. */
.post-visuel.carte-entree[data-gradient] {
  background: var(--voile), url("../brand/accueil-aurore-silhouette.jpg");
  background-size: 100% 100%, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
}

.post-visuel.carte-entree::before,
.post-visuel.carte-entree::after {
  display: none;
}

.entree-entete {
  gap: 0.65rem;
  align-items: center;
}

.entree-icone {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(11, 15, 35, 0.2);
}

.entree-sur {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
}

.entree-promesse {
  max-width: 15ch;
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(2.25rem, 8vw, 4.4rem);
  font-weight: 750;
  line-height: 0.98;
  letter-spacing: -0.055em;
  text-wrap: balance;
  text-shadow: 0 3px 22px rgba(11, 15, 35, 0.35);
}

.entree-promesse em {
  color: #d7caff;
  font-style: normal;
}

.entree-amorce {
  max-width: 46ch;
  font-size: clamp(0.98rem, 2.4vw, 1.18rem);
  font-weight: 650;
  line-height: 1.45;
  color: #f3f2ff;
  text-shadow: 0 2px 14px rgba(11, 15, 35, 0.45);
}

.entree-cta {
  margin-top: 0.25rem;
  border-radius: 12px;
  background: #fff;
  color: #0b0f23;
  box-shadow: 0 10px 28px rgba(11, 15, 35, 0.28);
}

.sous-accueil { padding: 0.9rem 0.3rem 0; }

.melanger {
  border-radius: 12px;
  color: var(--accent);
}

.stories {
  max-width: 780px;
  padding-top: 1.35rem;
}


.story-anneau { width: 64px; height: 64px; }

.section-entete {
  max-width: 720px;
  margin: 2rem auto 0.15rem;
  padding: 0 1rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.section-sur-titre {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-entete h2 {
  margin-top: 0.1rem;
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.section-entete p {
  color: var(--texte-doux);
  font-size: 0.78rem;
  font-weight: 650;
  text-align: right;
}

.fil {
  max-width: 720px;
  gap: 1.2rem;
}

.post {
  border-radius: 16px;
  border-color: var(--bordure);
  box-shadow: 0 16px 44px rgba(11, 15, 35, 0.08);
}

.post-visuel:not(.carte-entree) { aspect-ratio: 16 / 10; }

.post-discipline {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.post-stat {
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-style: normal;
  letter-spacing: -0.06em;
  transform: none;
}

.action-histoire,
.lien-apropos { color: var(--accent); }

/* .post-indice (« Voir son histoire ▸ ») vit À L'INTÉRIEUR de la carte
   dégradée, pas sur fond blanc comme les trois sélecteurs ci-dessus — le
   violet accent y était quasi invisible sur le dégradé bleu-turquoise
   (signalé par JP, capture à l'appui). Le blanc hérité de .post-visuel
   (avec son ombre portée) est fait pour ce fond-là. */

.bouton-envoyer {
  border-radius: 12px;
  background: linear-gradient(110deg, #6e4cff, #a78bfa 58%, #3fd7c6);
  box-shadow: 0 12px 30px rgba(110, 76, 255, 0.32);
}

/* Le FAB reste marine uni : le dégradé violet/turquoise le rendait "ton sur
   ton" avec la bannière du quiz juste au-dessus (signalé par JP) — un solide
   contrasté se distingue de tout le contenu coloré autour. */
.fab {
  border-radius: 12px;
  background: #0b1633;
  box-shadow: 0 12px 30px rgba(11, 22, 51, 0.4);
}

.stories-cadre {
  background: var(--voile), linear-gradient(145deg, #0b0f23, #40298f 64%, #147d80);
}

.slide-etiquette,
.bouton-carte { background: linear-gradient(110deg, #6e4cff, #a78bfa 58%, #3fd7c6); }

/* Même clash que « Voir son histoire » (2026-07-22) : le dégradé violet-
   turquoise jure sur le sépia des stories Légende. Même ton que le reste
   du look vintage. */
.stories-cadre[data-gradient="7"] .slide-etiquette { background: linear-gradient(110deg, #8a5a1e, #b8863b); }

@media (max-width: 520px) {
  .appbar-slogan { display: none; }
  .post-visuel.carte-entree { min-height: 440px; }
  .section-entete p { max-width: 13ch; }
  /* Icône seule, plus petit empreinte : le bouton texte complet pouvait
     chevaucher la bannière du quiz juste au-dessus (signalé par JP). */
  .fab {
    right: 0.8rem;
    bottom: 0.8rem;
    width: 46px;
    height: 46px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
  }
  .fab-texte { display: none; }
}