/* L'Hexagone décodé — salle 3, la France dans le monde : seulement les ajouts propres à la salle.
   Tout le reste (consoles, touches, cartels, graphiques) vient de css/atelier.css. */

/* ---------- 1.1 Conseil de sécurité ---------- */
.cs-schema svg { width: 100%; height: auto; }
.cs-table { fill: none; stroke: var(--plaque-2); stroke-linecap: round; }
.cs-siege circle { fill: none; stroke: var(--texte-3); stroke-width: 2; transition: fill .15s; }
.cs-siege.pour circle { fill: var(--texte); stroke: var(--texte); }
.cs-siege.contre circle { fill: var(--ambre); stroke: var(--ambre); }
.cs-siege.abst circle { fill: var(--marine); stroke-dasharray: 3 3; }
.cs-siege.permanent circle { stroke-width: 3; }
text.cs-glyphe { font: 700 18px var(--f-signal); fill: var(--texte-3); pointer-events: none; }
.cs-siege.pour text.cs-glyphe, .cs-siege.contre text.cs-glyphe { fill: var(--encre); }
text.cs-nom-t { font: 600 17px var(--f-signal); fill: var(--texte-2); }
text.cs-nom-t.fr { fill: var(--texte); }
text.cs-resultat { font-family: var(--f-signal); font-weight: 700; }
text.cs-resultat.oui { fill: var(--texte); }
text.cs-resultat.non { fill: var(--ambre); }
text.cs-veto-t { font: 600 17px var(--f-signal); fill: var(--ambre); }
.cs-legende { margin-top: 10px; }
.cs-l { border-radius: 50% !important; box-sizing: border-box; }
.cs-l.pour { background: var(--texte) !important; }
.cs-l.contre { background: var(--ambre) !important; }
.cs-l.abst { background: transparent !important; box-shadow: inset 0 0 0 2px var(--texte-3); }
.cs-pupitre { align-items: flex-start; }
.cs-permanents { gap: 8px; }
.cs-ligne { display: grid; grid-template-columns: 7.4em auto; align-items: center; gap: 12px; }
.cs-nom { font: 600 19px/1 var(--f-signal); }
.cs-ligne .bascule button { min-height: 40px; padding: 0 11px; font-size: 17px; }
.fleches { display: flex; gap: 12px; align-items: center; }
.fleches .afficheur { min-width: 110px; justify-content: center; font-size: 28px; }

/* ---------- 1.2 Vetos ---------- */
.vetos-fr { margin: 6px 0 0; padding-left: 1.2em; font-size: 15px; color: var(--texte-2); display: grid; gap: 4px; }
.vetos-fr b { color: var(--texte); font-weight: 700; }
.vetos-fr li.hors { color: var(--texte-3); }

/* ---------- 2.1 Accord des votes ---------- */
.accord-zone { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px 32px; align-items: start; }
.accord-jauge svg { display: block; margin: 0 auto; }
.jauge-fond { fill: none; stroke: var(--nuit); stroke-width: 22; }
.jauge-plein { fill: none; stroke: var(--d-autre); stroke-width: 22; }
.jauge-grad { stroke: var(--texte-3); stroke-width: 1.5; }
text.jauge-t { font: 500 13px var(--f-mono); fill: var(--texte-3); }
.jauge-aiguille { stroke: var(--texte); stroke-width: 4; stroke-linecap: round; transition: all .3s; }
.jauge-axe { fill: var(--texte); }
text.jauge-val { font: 700 38px var(--f-signal); fill: var(--texte); }
.jauge-legende { text-align: center; font-size: 15px; color: var(--texte-2); margin: 4px auto 0; max-width: 22ch; }
.alerte-rupture, .alerte-source { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; margin: 18px 0 0; padding: 14px 16px; background: var(--nuit); border-left: 3px solid var(--ambre); }
.alerte-rupture p, .alerte-source p { margin: 0; font-size: 16px; color: var(--texte); }
.alerte-signe { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ambre); color: var(--encre); font: 700 19px/1 var(--f-signal); }
.accord-extremes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 32px; margin-top: 8px; }
.accord-extremes h4 { font-size: 19px; margin-bottom: 6px; }
.accord-extremes ol { margin: 0; padding-left: 1.4em; font-size: 15px; color: var(--texte-2); }
.accord-extremes li span { display: inline-block; min-width: 11em; }
.accord-extremes li b { font: 500 15px var(--f-mono); color: var(--texte); }

/* ---------- 2.2 Vrais votes ---------- */
.vv-date { font: 600 15px/1 var(--f-signal); color: var(--texte-3); margin: 0 0 8px; }
.vv-titre { font-size: 27px; line-height: 1.1; margin-bottom: 18px; max-width: 30ch; }
.vv-question { font: 600 20px/1 var(--f-signal); margin: 0 0 12px; }
.vv-reponses { margin-bottom: 8px; }
.vv-reponses .touche { min-width: 120px; }
.vv-revele { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); }
.vv-verdict { font: 600 22px/1.2 var(--f-signal); margin: 0 0 16px; display: inline-block; padding: 6px 12px; }
.vv-verdict.oui { background: var(--texte); color: var(--encre); }
.vv-verdict.non { box-shadow: inset 0 0 0 2px var(--texte); }
.vv-barre { display: flex; height: 26px; max-width: 640px; gap: 2px; margin: 6px 0 10px; }
.vv-barre span { min-width: 2px; }
.vv-barre .pour { background: var(--texte); }
.vv-barre .contre { background: var(--ambre); }
.vv-barre .abst { background: transparent; box-shadow: inset 0 0 0 2px var(--texte-3); }
.vv-leg i.vide { background: transparent; box-shadow: inset 0 0 0 2px var(--texte-3); }
.vv-pays { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-width: 720px; }
.vv-pays li { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--plaque-2); border-left: 4px solid var(--texte-3); font-size: 15px; }
.vv-pays li b { font: 600 18px/1 var(--f-signal); }
.vv-pays li.pour { border-left-color: var(--texte); }
.vv-pays li.contre { border-left-color: var(--ambre); }
.vv-pays li.fr span { font-weight: 700; }
#vv-score { min-width: 0; font-size: 28px; }

/* ---------- 3.1 Hémicycle ---------- */
.hemi-schema svg { width: 100%; height: auto; max-width: 760px; margin: 0 auto; display: block; }
.hemi-schema circle { transition: fill .2s; }
.hemi-pays { cursor: pointer; }
.hemi-a { fill: #5a689f; }
.hemi-b { fill: #35427a; }
text.hemi-chiffre { font-family: var(--f-signal); font-weight: 700; fill: var(--d-autre); }
text.hemi-chiffre.fr { fill: var(--d-france); }

/* ---------- 3.2 Majorité qualifiée ---------- */
.mq-pays { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px 8px; }
.mq-pays .touche { width: 100%; min-height: 50px; font-size: 17px; padding: 7px 10px 9px; gap: 4px; }
.mq-pays .touche::before { width: 14px; height: 4px; }
.mq-jauges { display: grid; gap: 22px; }
.mq-j-titre { font: 600 19px/1.1 var(--f-signal); margin: 0 0 10px; display: flex; gap: 10px; align-items: center; }
.mq-piste { position: relative; height: 28px; background: var(--nuit); box-shadow: inset 0 0 0 1px var(--trait); margin-bottom: 26px; }
.mq-plein { position: absolute; left: 0; top: 0; bottom: 0; background: var(--d-gris); transition: width .3s; }
.mq-jauge.ok .mq-plein { background: var(--d-autre); }
.mq-seuil { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--texte); }
.mq-seuil span { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 14px var(--f-mono); color: var(--texte-2); }
.mq-j-val { margin: 0; font-size: 16px; color: var(--texte-2); }
.mq-j-val b { font: 600 26px/1 var(--f-signal); color: var(--texte); }
.mq-resultat { font: 600 22px/1.2 var(--f-signal); padding: 10px 14px; margin: 0; }
.mq-resultat.oui { background: var(--texte); color: var(--encre); }
.mq-resultat.non { box-shadow: inset 0 0 0 2px var(--texte); }

/* ---------- 3.3 Conseil de l'UE ---------- */
.alerte-source { margin: 0 0 22px; max-width: 900px; }
.cue-grille, .cue-exemples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--trait-doux); background: var(--plaque); }
.cue-periode, .cue-ex { padding: 20px 24px; min-width: 0; }
.cue-periode + .cue-periode, .cue-ex + .cue-ex { border-left: 1px solid var(--trait); }
.cue-p { font: 600 15px/1.2 var(--f-signal); color: var(--texte-3); margin: 0 0 8px; }
.cue-periode .cue-fig { font: 600 44px/1 var(--f-signal); margin: 0 0 8px; }
.cue-periode p, .cue-ex p { font-size: 16px; }
.cue-ex h4 { margin-bottom: 8px; }
.cue-titre { font-size: 24px; margin: 30px 0 12px; }

/* ---------- 4.1 Budget de l'UE ---------- */
.bu-schema svg { width: 100%; height: auto; max-width: 680px; }
.bu-sol { stroke: var(--texte-3); stroke-width: 1.5; }
.bu-relance { fill: var(--d-autre); opacity: .45; stroke: var(--d-autre); stroke-width: 1.5; stroke-dasharray: 4 3; }
text.bu-relance-t { font: 600 14px var(--f-signal); fill: var(--texte); }
.bu-ecart { stroke: var(--ambre); stroke-width: 3; }

/* ---------- 5. Repères ---------- */
.reperes-monde-bloc { margin: 56px 0 20px; }
.reperes-monde { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; border-top: 2px solid var(--texte); }
.repere-m { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px 0; border-bottom: 1px solid var(--trait); min-width: 0; }
.repere-m p { margin: 0; font-size: 16px; color: var(--texte-2); }
.repere-m-titre { font: 600 18px/1.1 var(--f-signal) !important; color: var(--texte-3) !important; }
.repere-m-val { font: 600 30px/1.05 var(--f-signal) !important; color: var(--texte) !important; }
.repere-m .pied-exp { margin-top: auto; padding-top: 8px; }

/* ---------- 6. Bilan ---------- */
.point-monde { grid-template-columns: minmax(0, 1fr); }
.point-monde a { font-size: 15px; }

/* ---------- 7. Débat : qui défend l'argument ---------- */
.plateau li .qui { display: block; margin-top: 6px; font-size: 14px; color: var(--texte-2); }
.plateau li .qui a { color: var(--texte-2); }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 900px) {
  .accord-zone { grid-template-columns: minmax(0, 1fr); }
  .accord-jauge { max-width: 300px; margin: 0 auto; }
  .accord-extremes { grid-template-columns: minmax(0, 1fr); }
  .cue-grille, .cue-exemples { grid-template-columns: minmax(0, 1fr); }
  .cue-periode + .cue-periode, .cue-ex + .cue-ex { border-left: 0; border-top: 1px solid var(--trait); }
}
@media (max-width: 620px) {
  .cs-ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cs-ligne .bascule button { padding: 0 9px; font-size: 16px; }
  .vv-titre { font-size: 23px; }
  .vv-reponses .touche { min-width: 0; flex: 1 1 0; }
  .vv-pays { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mq-pays { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cue-periode, .cue-ex { padding: 16px; }
  .cue-fig { font-size: 36px; }
  .repere-m { padding-right: 0; }
  .accord-extremes li span { min-width: 9em; }
}

/* ---------- 5.3 : barre de l'objectif et fin de la ligne d'objectif ---------- */
.m-objectif { fill: none; stroke: var(--texte-3); stroke-width: 1.5; stroke-dasharray: 4 3; }
circle.point.s-moy { fill: var(--d-moy); }