/* ══════════════════════════════════════════════════════════════════
   POLITIQUE 2027 — d'après « Frenchy Site - Politique 2027 »

   Les mesures viennent de la maquette : barre de 72 px sur 1280 de
   contenu, bandeau de 52/44, grille de contenu en 1fr + 380 px, cartes
   de 20 px de rayon.

   Comme catalogue.css et emplois.css, cette feuille déclare AUSSI les
   morceaux de barre qu'elle emploie. C'est le motif du site aujourd'hui,
   et c'est surtout la seule façon de ne pas répéter le défaut qui a
   coûté trois passes sur le tableau de bord : une classe appartient à la
   feuille qui la déclare, jamais à celle qui l'a inspirée.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   LE SOCLE DE LA PAGE

   Il manquait, purement et simplement. J'ai écrit cette feuille en
   supposant une base que rien ne fournit : `layout.css` ne pose que
   `max-width` sur le corps, et toutes les autres pages du site
   — emplois, catalogue, direct, profil — déclarent ce bloc elles-mêmes.

   Sans lui, la page rendait :
   · un fond BLANC, car aucune règle ne peignait le corps ;
   · un texte NOIR, dont les titres de carte, sur des cartes bleu nuit ;
   · le tout en TIMES NEW ROMAN — et `Instrument Sans` restait même
     « unloaded », une fonte ne se téléchargeant que si on la demande.

   Cent soixante-neuf éléments étaient concernés. Rien ne le signalait :
   le navigateur applique ses valeurs par défaut et la page s'affiche.
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--fy-nuit, #07071a);
  color: var(--fy-encre, #f2f1f7);
  font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh; min-height: 100dvh;
}

/* Les liens du corps de page reprennent le violet de la marque. La
   maquette le fait dans son <style> ; ici, sans cette règle, ils
   sortaient dans le bleu souligné du navigateur. */
.po-page a:not(.btn):not([class*="po-btn"]):not(.po-rappel) { color: var(--fy-violet, #8b7bff); }
.po-page a:not(.btn):not([class*="po-btn"]):not(.po-rappel):hover { color: #bfb4ff; }

/* ── LA BARRE ───────────────────────────────────────── */
@media (pointer: coarse) { .fy-menu-barre a { min-height: 44px; } }

@keyframes po-pouls { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .nav-point-direct.en-direct { animation: none } }

/* ══════════════════════════════════════════════════════════════════
   LE BANDEAU
   ══════════════════════════════════════════════════════════════════ */
.po-bandeau {
  border-bottom: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
  background: linear-gradient(180deg, var(--fy-carte, #0c0c24), var(--fy-nuit, #07071a));
}
.po-bandeau-inner {
  max-width: 1280px; margin: 0 auto; padding: 52px 32px 44px;
  display: flex; align-items: flex-start; gap: 56px; flex-wrap: wrap;
}
.po-bandeau-texte { flex: 1 1 480px; min-width: 0; }

.po-fil { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.po-retour {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .1em;
  color: #7e7c99; text-decoration: none;
}
.po-retour:hover { color: var(--fy-encre, #f2f1f7); }
.po-fil-trait { width: 1px; height: 13px; background: rgba(255, 255, 255, .16); }
.po-etiquette {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 100px; padding: 7px 13px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em; color: var(--fy-gris, #a5a3bc);
}
.po-etiquette::before {
  content: ''; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--fy-cyan, #5cd6e8);
}

.po-titre {
  margin: 0;
  font-family: var(--font-display, 'Instrument Serif', Georgia, serif);
  font-weight: 400; font-size: 3.75rem; line-height: 1; letter-spacing: -.02em;
  max-width: 17ch; text-wrap: pretty;
}
.po-chapo {
  margin: 22px 0 0; max-width: 60ch;
  font-size: 1.063rem; line-height: 1.6; color: var(--fy-gris, #a5a3bc); text-wrap: pretty;
}

/* ── LE COMPTE À REBOURS ─────────────────────────────── */
.po-rebours {
  flex: none; width: 340px; max-width: 100%;
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px; padding: 26px;
}
.po-rebours-titre {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em; color: #7e7c99;
}
.po-rebours-grille {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px;
}
.po-rebours-nb {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.875rem; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.po-rebours-sec .po-rebours-nb { color: var(--fy-cyan, #5cd6e8); }
.po-rebours-unite {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .625rem; color: #7e7c99; margin-top: 7px;
}
.po-rebours-note {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
  font-size: .813rem; line-height: 1.55; color: #7e7c99;
}

/* ── LE SILENCE ÉLECTORAL ────────────────────────────
   Rouge, et en haut : c'est une interdiction légale, pas une
   information de service. Il occupe toute la largeur du contenu et
   précède tout le reste. */
.po-silence {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 32px 0;
  display: flex; align-items: flex-start; gap: 14px;
  color: var(--fy-rouge, #ff6b6b);
}
.po-silence[hidden] { display: none; }
.po-silence svg { flex: none; margin-top: 2px; }
.po-silence p {
  margin: 0; flex: 1; min-width: 0;
  font-size: .906rem; line-height: 1.55;
  color: var(--fy-corps, #d6d4e4);
}

/* Quand le silence est actif, les commandes d'écriture cessent d'être
   proposées : un bouton qui ne peut qu'échouer n'est pas une commande. */
.po-silencieux .po-option,
.po-silencieux .po-soutien,
.po-silencieux .po-btn-sobre { opacity: .45; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   LA GRILLE DE CONTENU
   ══════════════════════════════════════════════════════════════════ */
.po-page {
  max-width: 1280px; margin: 0 auto; padding: 44px 32px 100px;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px;
  align-items: start;
}
.po-colonne { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.po-carte {
  background: var(--fy-carte, #0c0c24);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px; padding: 26px;
  min-width: 0;
}
.po-carte[hidden] { display: none; }
.po-carte-tete {
  display: flex; align-items: flex-start; gap: 24px; margin-bottom: 22px; flex-wrap: wrap;
}
.po-carte-tete > div:first-child { flex: 1 1 260px; min-width: 0; }
.po-carte h2 { margin: 0; font-size: 1.188rem; font-weight: 600; }
.po-carte-sous { margin: 9px 0 0; font-size: .906rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); }
.po-mono-titre {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em; color: #7e7c99;
  margin-bottom: 20px;
}

/* ── LE DÉBAT EN COURS ───────────────────────────────── */
.po-direct { border-color: rgba(255, 107, 107, .32); padding: 0; overflow: hidden; }
.po-scene {
  position: relative; min-height: 340px;
  background: repeating-linear-gradient(160deg, #0f0f28 0 14px, #151538 14px 28px);
}
.po-scene-vide {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  /* #4a4866 dans la maquette, soit 2,2:1 sur le fond de scène — sous le
     minimum de 4,5:1 exigé par WCAG pour un texte de cette taille. Le
     gris sourd de la page monte à 4,78:1 et ne dépareille pas. */
  font-size: .688rem; letter-spacing: .14em; color: #7e7c99; text-align: center; padding: 0 20px;
}

/* « EN DIRECT » en ENCRE SOMBRE sur le rouge, et non en blanc.
   Le blanc de la maquette donne 2,78:1 — moins que le minimum sur une
   étiquette de 10,5 px, alors que c'est justement celle qu'il ne faut
   pas manquer. L'encre sombre monte à 7,18:1, et c'est déjà ce que fait
   le bouton « Rejoindre le direct » sur le même rouge.

   Le fond passe en opaque : à 92 % d'opacité, le contraste dépendait de
   ce qui se trouve derrière — donc de l'image vidéo, donc de rien de
   sûr. */
.po-pastille-direct {
  position: absolute; top: 18px; left: 20px;
  display: flex; align-items: center; gap: 8px;
  background: var(--fy-rouge, #ff6b6b); border-radius: 100px; padding: 7px 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em;
  color: var(--fy-nuit, #07071a);
}
.po-pastille-direct::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--fy-nuit, #07071a);
  animation: po-pouls 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .po-pastille-direct::before { animation: none } }
.po-scene-mentions { position: absolute; top: 18px; right: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.po-mention {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .688rem; font-weight: 500;
  background: rgba(0, 0, 0, .55); border-radius: 100px; padding: 7px 12px;
  color: var(--fy-encre, #f2f1f7); white-space: nowrap;
}
.po-mention-ue { color: var(--fy-cyan, #5cd6e8); }

.po-intervenants {
  position: absolute; bottom: 18px; left: 20px; right: 20px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.po-intervenant {
  flex: 1 1 140px; min-width: 0;
  background: rgba(7, 7, 26, .78); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 11px 13px;
}
.po-intervenant-nom {
  display: flex; align-items: center; gap: 8px;
  font-size: .813rem; font-weight: 600; min-width: 0;
}
.po-intervenant-nom span:last-child {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-puce { width: 8px; height: 8px; flex: none; border-radius: 2px; }
.po-intervenant-temps {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .781rem; font-weight: 500; color: var(--fy-corps, #d6d4e4); margin-top: 7px;
  font-variant-numeric: tabular-nums;
}
.po-intervenant-famille {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .625rem; color: #7e7c99; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.po-direct-pied { padding: 22px 24px; display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.po-direct-pied > div { flex: 1 1 260px; min-width: 0; }
.po-direct-pied h2 { margin: 0; font-size: 1.313rem; font-weight: 600; }

.po-btn-rejoindre {
  flex: none; background: var(--fy-rouge, #ff6b6b); color: var(--fy-nuit, #07071a);
  font-size: .938rem; font-weight: 600; padding: 14px 22px; border-radius: 11px;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; font-family: inherit;
}
.po-btn-rejoindre:hover { background: #ff8b8b; color: var(--fy-nuit, #07071a); }

/* ── LA CONSULTATION ─────────────────────────────────── */
.po-consultation { border-color: rgba(139, 123, 255, .3); }
.po-consultation-etat {
  display: flex; align-items: center; gap: 10px; margin-bottom: 11px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .656rem; font-weight: 500; letter-spacing: .12em; color: var(--fy-violet, #8b7bff);
}
.po-consultation-etat::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fy-violet, #8b7bff);
}
.po-total { text-align: right; flex: none; }
.po-total-nb {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.375rem; font-weight: 500; font-variant-numeric: tabular-nums;
}
.po-total-mot { font-size: .75rem; color: #7e7c99; margin-top: 4px; }

.po-themes { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.po-theme {
  border: 1px solid rgba(255, 255, 255, .14); background: none;
  color: var(--fy-corps, #d6d4e4);
  font-family: inherit; font-size: .844rem; font-weight: 500;
  padding: 9px 15px; border-radius: 100px; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.po-theme:hover { border-color: rgba(255, 255, 255, .3); }
.po-theme.actif {
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-color: var(--fy-clair, #f4f2ee);
}
@media (pointer: coarse) { .po-theme { min-height: 44px; } }

.po-options { display: flex; flex-direction: column; gap: 10px; }
.po-option {
  position: relative; overflow: hidden; width: 100%; text-align: left;
  border: 1px solid rgba(255, 255, 255, .12); background: var(--fy-nuit, #07071a);
  border-radius: 12px; padding: 15px 18px;
  font-family: inherit; display: flex; align-items: center; gap: 16px; cursor: pointer;
}
.po-option[disabled] { cursor: default; }
.po-option.mienne { border-color: var(--fy-violet, #8b7bff); }
.po-option-jauge {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255, 255, 255, .06);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.po-option.mienne .po-option-jauge { background: rgba(139, 123, 255, .22); }
.po-option-rond {
  position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .24);
}
.po-option.mienne .po-option-rond {
  border-color: var(--fy-violet, #8b7bff); background: var(--fy-violet, #8b7bff);
}
.po-option-texte { position: relative; flex: 1; min-width: 0; font-size: .938rem; color: var(--fy-encre, #f2f1f7); }
.po-option-part {
  position: relative; flex: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .875rem; font-weight: 500; color: var(--fy-gris, #a5a3bc);
  font-variant-numeric: tabular-nums;
}
.po-option.mienne .po-option-part { color: var(--fy-violet, #8b7bff); }

.po-avertissement {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
}
.po-avertissement svg { flex: none; margin-top: 2px; }
.po-avertissement p { margin: 0; flex: 1; min-width: 0; font-size: .813rem; line-height: 1.55; color: #7e7c99; }

/* ── LE TEMPS DE PAROLE ──────────────────────────────── */
.po-fenetres {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  background: var(--fy-nuit, #07071a); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px; padding: 4px;
  /* Le groupe ne pousse jamais la page : s'il manque de place, il défile
     en lui-même. Mesuré à 320 px : il manquait 5 px. */
  max-width: 100%; overflow-x: auto;
}
.po-fenetre {
  border: 0; background: none; color: var(--fy-gris, #a5a3bc);
  font-family: inherit; font-size: .813rem; font-weight: 500;
  padding: 9px 15px; border-radius: 100px; white-space: nowrap; cursor: pointer;
}
.po-fenetre:hover { color: var(--fy-encre, #f2f1f7); }
.po-fenetre.actif { background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a); }
@media (pointer: fine) { .po-fenetres .po-fenetre { min-height: 0; } }
/* Sous 400 px, les trois pastilles gardent leurs 44 px de haut mais
   respirent moins large : c'est le padding qui coûtait les 5 px. */
@media (max-width: 400px) { .po-fenetre { padding: 9px 11px; } }

.po-familles { display: flex; flex-direction: column; gap: 17px; }
.po-famille-tete {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 9px;
}
.po-famille-nom { flex: 1; min-width: 0; font-size: .906rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-famille-temps {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .813rem; color: var(--fy-corps, #d6d4e4); font-variant-numeric: tabular-nums;
}
.po-famille-ecart {
  flex: none; width: 84px; text-align: right; white-space: nowrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .75rem; font-weight: 500; color: #7e7c99;
  font-variant-numeric: tabular-nums;
}
.po-famille-ecart.equilibre { color: var(--fy-cyan, #5cd6e8); }
.po-famille-ecart.ecart { color: var(--fy-ambre, #f0b45c); }

.po-piste { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.po-piste-remplie { height: 8px; border-radius: 4px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
/* La zone hachurée : là où l'écart dépasse le repère. */
.po-piste-ecart {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(115deg, rgba(244, 242, 238, .55) 0 2px, transparent 2px 5px);
}
.po-piste-repere { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--fy-clair, #f4f2ee); }

.po-legende {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
  font-size: .844rem; color: var(--fy-gris, #a5a3bc);
}
.po-legende-repere { display: inline-block; width: 2px; height: 14px; flex: none; background: var(--fy-clair, #f4f2ee); }
.po-legende-hachure {
  display: inline-block; width: 26px; height: 8px; flex: none; border-radius: 4px;
  background: repeating-linear-gradient(115deg, rgba(244, 242, 238, .55) 0 2px, transparent 2px 5px);
}
.po-legende b { color: var(--fy-encre, #f2f1f7); font-weight: 600; }

/* ── LES QUESTIONS ───────────────────────────────────── */
.po-questions { display: flex; flex-direction: column; }
.po-question {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 0; border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
}
.po-question:first-child { border-top: 0; padding-top: 0; }
.po-soutien {
  flex: none; width: 56px;
  border: 1px solid rgba(255, 255, 255, .14); background: none;
  border-radius: 10px; padding: 9px 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--fy-gris, #a5a3bc);
  transition: border-color .15s, background .15s, color .15s;
}
.po-soutien:hover { border-color: rgba(255, 255, 255, .3); }
.po-soutien.mien {
  border-color: var(--fy-violet, #8b7bff); background: rgba(139, 123, 255, .16);
  color: var(--fy-violet, #8b7bff);
}
.po-soutien-nb { font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.po-question-corps { flex: 1; min-width: 0; }
.po-question-texte { font-size: .969rem; line-height: 1.5; color: #e6e4f0; }
.po-question-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.po-question-qui { font-size: .781rem; color: #7e7c99; }
.po-retenue {
  flex: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .625rem; font-weight: 500; letter-spacing: .08em;
  color: var(--fy-cyan, #5cd6e8); background: rgba(92, 214, 232, .12);
  border-radius: 5px; padding: 6px 10px;
}

.po-btn-sobre {
  flex: none; border: 1px solid rgba(255, 255, 255, .16); background: none;
  color: var(--fy-encre, #f2f1f7); font-family: inherit;
  font-size: .875rem; font-weight: 500; padding: 12px 18px; border-radius: 10px;
  white-space: nowrap; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.po-btn-sobre:hover { background: rgba(255, 255, 255, .06); color: var(--fy-encre, #f2f1f7); }

/* ── LE CALENDRIER ───────────────────────────────────── */
.po-agenda { display: flex; flex-direction: column; }
.po-rendezvous {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 0; border-top: 1px solid var(--fy-bord, rgba(255, 255, 255, .08));
}
.po-rendezvous:first-child { border-top: 0; padding-top: 0; }
.po-date { flex: none; width: 46px; text-align: center; }
.po-date-jour {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1.188rem; font-weight: 500; line-height: 1;
}
.po-date-jour.proche { color: var(--fy-ambre, #f0b45c); }
.po-date-mois {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: .625rem; color: #7e7c99; margin-top: 5px; text-transform: uppercase;
}
.po-rendezvous-corps { flex: 1; min-width: 0; }
.po-rendezvous-titre { font-size: .906rem; font-weight: 600; line-height: 1.35; }
.po-rendezvous-meta { font-size: .781rem; color: #7e7c99; margin-top: 5px; }
.po-rappel {
  flex: none; border: 1px solid rgba(255, 255, 255, .14); background: none;
  color: var(--fy-corps, #d6d4e4); font-family: inherit;
  font-size: .781rem; font-weight: 500; padding: 8px 12px; border-radius: 9px;
  white-space: nowrap; cursor: pointer;
}
.po-rappel.pose {
  background: rgba(92, 214, 232, .14); color: var(--fy-cyan, #5cd6e8);
  border-color: rgba(92, 214, 232, .35);
}

/* ── LES RÈGLES ──────────────────────────────────────── */
.po-regles { display: flex; flex-direction: column; gap: 16px; }
.po-regle { display: flex; align-items: flex-start; gap: 12px; }
.po-regle::before {
  content: ''; width: 7px; height: 7px; flex: none; margin-top: 7px;
  border-radius: 2px; background: var(--puce, #8b7bff);
}
.po-regle div { flex: 1; min-width: 0; }
.po-regle b { display: block; font-size: .906rem; font-weight: 600; }
.po-regle p { margin: 6px 0 0; font-size: .844rem; line-height: 1.55; color: var(--fy-gris, #a5a3bc); }
.po-lien-charte { display: inline-block; margin-top: 20px; font-size: .844rem; color: var(--fy-violet, #8b7bff); }
.po-lien-charte:hover { color: #bfb4ff; }

.po-neutralite {
  border: 1px dashed rgba(255, 255, 255, .16); border-radius: 18px; padding: 22px 24px;
}
.po-neutralite p { margin: 0; font-size: .844rem; line-height: 1.6; color: #7e7c99; }

/* ── ÉTATS VIDES ─────────────────────────────────────── */
.po-vide {
  font-size: .906rem; line-height: 1.6; color: #7e7c99;
  padding: 6px 0;
}

/* ── LE MESSAGE FUGACE ───────────────────────────────── */
.po-message {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  z-index: 40; max-width: calc(100vw - 32px);
  background: var(--fy-clair, #f4f2ee); color: var(--fy-nuit, #07071a);
  border-radius: 13px; padding: 15px 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  font-size: .938rem; font-weight: 500;
}
.po-message[hidden] { display: none; }
.po-message::before {
  content: ''; width: 9px; height: 9px; flex: none; border-radius: 2px;
  background: var(--fy-violet, #8b7bff);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .po-page { grid-template-columns: minmax(0, 1fr); }
  .po-bandeau-inner { gap: 32px; }
}
/* Le menu se retire à 1080 comme partout ailleurs, et non à 900 : c'est
   le seuil où la barre d'onglets prend le relais. Réglé à part pour ne
   pas emporter avec lui la taille du titre. */
@media (max-width: 1100px) {
}

@media (max-width: 900px) {
  .po-titre { font-size: 2.5rem; }
}
@media (max-width: 768px) {
  .po-bandeau-inner { padding: 32px 16px 28px; }
  .po-page { padding: 28px 16px 80px; gap: 16px; }
  .po-carte { padding: 20px; border-radius: 16px; }
  .po-direct { padding: 0; }
  .po-direct-pied { padding: 18px 20px; }
  .po-titre { font-size: 2rem; }
  .po-chapo { font-size: .969rem; }
  /* Les vignettes d'intervenants sortent de la scène : superposées à une
     image de 340 px de haut, elles la recouvraient entièrement. */
  .po-scene { min-height: 200px; }
  .po-intervenants { position: static; padding: 14px 20px 0; }
  .po-famille-ecart { width: 68px; }
}
@media (max-width: 480px) {
  .po-titre { font-size: 1.75rem; }
  .po-rebours-nb { font-size: 1.5rem; }
  .po-question { gap: 12px; }
}

/* La page courante marque son icone. */