/* Pages de stratégie (La Martingale ; puis Fibonacci, D'Alembert, Paroli). Maquette : Exemple 14.
   Chargée APRÈS accueil.css : on reprend son en-tête, ses boutons, son bas de page et sa fenêtre
   « bientôt » ; ici seulement ce qui est propre aux pages de stratégie. */

:root {
  --vert: #33d56f;
  --orange: #ffa11f;
  --cyan: #3aa8ff;
  --violet: #a65cff;
  --rouge-vif: #ff3149;
  --cadre-fond: linear-gradient(180deg, rgba(10, 22, 64, .95), rgba(4, 9, 30, .95));
}

/* ---------- Fond de page (pas l'image de l'accueil) ---------- */
.page.strat { background: radial-gradient(ellipse at 50% 0, #17225c 0, #070c26 40%, #040818 75%); }
.page.strat::before, .page.strat::after { content: none; display: none; }

/* ---------- Drapeaux avec leur code (cadre de la maquette) ---------- */
.drapeaux-cadre {
  padding: 6px 10px 4px; gap: 10px; border-radius: 12px;
  border: 1.5px solid rgba(70, 150, 255, .7); background: rgba(4, 10, 34, .75);
  box-shadow: 0 0 12px rgba(47, 134, 255, .35);
}
.drapeau-lien { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; }
.drapeau-lien .code { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: #dfe8ff; }
.drapeau-lien[aria-current] .drapeau { box-shadow: 0 0 0 2px var(--or), 0 0 12px rgba(247, 201, 72, .75); }
.drapeau-lien[aria-current] .code { color: var(--or); }
.drapeau-lien:hover .drapeau { filter: brightness(1.15); }

/* ---------- Menu : le même que l'accueil sur toutes les pages (6 nov) ; la rubrique de la page est en or ---------- */
.menu [aria-current="true"] {
  color: var(--or); border-color: var(--or);
  background: radial-gradient(ellipse at 50% 120%, rgba(247, 201, 72, .28), rgba(247, 201, 72, .05));
  box-shadow: 0 0 12px rgba(247, 201, 72, .45);
}
.menu [aria-current="true"] svg.i { color: var(--or); }

/* ---------- Bloc de côté (même style que « Montantes principales » de l'accueil) : la page affichée en or ---------- */
.bandeau-zone { position: relative; }
.systemes [aria-current="page"] {
  border-color: var(--or); color: var(--or-clair);
  background: radial-gradient(ellipse at 30% 120%, rgba(247, 201, 72, .3), rgba(5, 12, 38, .92));
  box-shadow: 0 0 12px rgba(247, 201, 72, .55);
}
@media (min-width: 1000px) {
  .bloc-cote {
    position: absolute; z-index: 3; top: 50%; right: max(var(--marge), calc(50% - 700px)); transform: translateY(-50%);
    width: clamp(220px, 19vw, 290px); padding: 10px 10px 12px;
  }
  .bloc-cote h2 { margin-bottom: 8px; font-size: clamp(1rem, 1.35vw, 1.45rem); }
  .bloc-cote ul { gap: 7px; }
  .bloc-cote a, .bloc-cote button { padding: .42em .7em; font-size: clamp(.88rem, 1.1vw, 1.25rem); white-space: nowrap; }
}
@media (max-width: 999px) {
  .bloc-cote { margin: 16px var(--marge) 0; }
}

/* ---------- Menu en onglets biseautés (ancien menu des pages, plus utilisé depuis le 6 nov) ---------- */
.menu-strat { padding: 4px var(--marge) 0; filter: drop-shadow(0 0 8px rgba(47, 134, 255, .75)); }
.menu-cadre {
  --pointe: 20px;
  padding: 2px; background: var(--bleu);
  clip-path: polygon(var(--pointe) 0, calc(100% - var(--pointe)) 0, 100% 50%, calc(100% - var(--pointe)) 100%, var(--pointe) 100%, 0 50%);
}
.menu-strat ul {
  display: flex; padding: 0 calc(var(--pointe) - 4px);
  background: linear-gradient(180deg, #0f2268, #050c2c);
  clip-path: polygon(calc(var(--pointe) - 1px) 0, calc(100% - var(--pointe) + 1px) 0, 100% 50%, calc(100% - var(--pointe) + 1px) 100%, calc(var(--pointe) - 1px) 100%, 0 50%);
}
.menu-strat li { flex: 1 1 auto; display: flex; position: relative; }
.menu-strat li + li::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px;
  background: rgba(90, 150, 255, .5); transform: skewX(-24deg);
}
.menu-strat a, .menu-strat button {
  flex: 1; position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; gap: .45em;
  padding: .78em .9em; border: 0; background: none; color: #fff; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: clamp(.86rem, 1.12vw, 1.15rem);
}
.menu-strat svg.i { width: 1.3em; height: 1.3em; color: var(--or); }
.menu-strat a:hover, .menu-strat button:hover { color: var(--or-clair); }
.menu-strat [aria-current="page"]::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: -6px; right: -6px;
  transform: skewX(-24deg); border-radius: 4px; border: 1.5px solid #ff8a95;
  background: linear-gradient(180deg, #ff4a5c, #c20c20 60%, #9c0614);
  box-shadow: 0 0 16px rgba(255, 40, 60, .85), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.menu-strat [aria-current="page"]:hover { color: #fff; }

/* ---------- Bandeau du haut : décor (Exemple 15) + titre de la stratégie en image (Exemples 18 à 23) ---------- */
.bandeau {
  position: relative; margin-top: 12px; width: 100%; aspect-ratio: 2000 / 640; max-height: 500px; min-height: 230px;
  background: #060b26 url(img/strategie-bandeau.webp) 50% 32% / cover no-repeat;
  border-top: 1px solid rgba(70, 150, 255, .35); border-bottom: 1px solid rgba(70, 150, 255, .35);
  box-shadow: inset 0 -30px 40px -20px rgba(4, 8, 24, .9);
}
.bandeau h1 {
  position: absolute; margin: 0; left: 46.5%; top: 8%; width: 38%; transform: translateX(-50%);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .75));
}
.titre-strat { display: block; width: 100%; height: auto; }
/* ---------- Grille des cadres ---------- */
.contenu {
  width: 100%; max-width: 1320px; margin: 18px auto 0; padding: 0 var(--marge);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch;
}
.cadre {
  position: relative; min-width: 0; padding: 14px 18px 18px; border-radius: 16px;
  border: 2px solid var(--bleu); background: var(--cadre-fond);
  box-shadow: 0 0 16px var(--bleu-halo), inset 0 0 14px rgba(47, 134, 255, .2);
}
.cadre h2 {
  display: flex; align-items: center; flex-wrap: wrap; gap: .1em .5em; margin: 0 0 12px;
  font-weight: 800; font-size: clamp(1.15rem, 1.5vw, 1.55rem); line-height: 1.2;
}
.cadre h2 svg.i { width: 1.35em; height: 1.35em; color: var(--or); }
.cadre h2 small { font-weight: 600; font-size: .7em; color: rgba(255, 255, 255, .85); }
.cadre h2.titre-or { color: var(--or); text-shadow: 0 0 10px rgba(247, 201, 72, .35); }
.cadre p { margin: 0 0 .7em; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.cadre p:last-child { margin-bottom: 0; }
.cadre b { color: #fff; }

/* Points forts (cadre du principe) */
.forts-titre { display: flex; align-items: center; gap: .45em; margin: 14px 0 8px; font-size: 1.05rem; font-weight: 800; color: #6ff0a0; }
.forts-titre svg.i { width: 1.3em; height: 1.3em; }
.forts { display: flex; flex-direction: column; gap: 6px; }
.forts li { position: relative; padding-left: 24px; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.forts li::before {
  content: ""; position: absolute; left: 2px; top: .3em; width: 13px; height: 7px; transform: rotate(-45deg);
  border-left: 3px solid var(--vert); border-bottom: 3px solid var(--vert); filter: drop-shadow(0 0 4px rgba(51, 213, 111, .8));
}

/* Étapes */
.etapes-cadre { display: flex; flex-direction: column; }
.etapes-cadre .etapes { margin-top: auto; }
.ruban-bloc { margin: 20px 0 auto; }
.ruban-titre { margin: 0 0 8px !important; font-weight: 700; font-size: .92rem; color: rgba(255, 255, 255, .8) !important; }
.ruban { display: flex; flex-wrap: wrap; gap: 8px 6px; padding: 0; }
.ruban li {
  position: relative; display: grid; place-items: center; min-width: 3.4em; padding: .3em .55em; border-radius: 999px;
  font-weight: 800; font-size: .9rem; font-variant-numeric: tabular-nums; color: #1b1100;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcc33 50%, #c98a00); box-shadow: 0 0 8px rgba(255, 200, 50, .55);
}
.ruban li + li::before { content: "›"; position: absolute; left: -7px; color: var(--or); font-weight: 900; }
.ruban li.trop { color: #ffd2d6; background: rgba(255, 30, 50, .18); box-shadow: none; border: 1.5px dashed rgba(255, 90, 106, .85); text-decoration: line-through; }
.ruban li.encaisse { color: #fff; background: linear-gradient(180deg, #27b252, #13802f); box-shadow: 0 0 10px rgba(61, 220, 111, .6); }
.etapes { display: flex; align-items: stretch; gap: 26px; margin: 18px 0 4px; padding: 0; counter-reset: none; }
.etape {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 22px 10px 12px; border-radius: 12px; border: 2px solid var(--cyan); text-align: center;
  background: linear-gradient(180deg, rgba(14, 40, 110, .9), rgba(6, 16, 50, .9));
  box-shadow: 0 0 12px rgba(58, 168, 255, .55), inset 0 0 10px rgba(58, 168, 255, .2);
}
.etape strong { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.15; }
.etape > span:not(.num) { font-size: clamp(.85rem, 1vw, 1rem); color: rgba(255, 255, 255, .9); line-height: 1.2; margin-top: 3px; }
.etape .num {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%); display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; font-weight: 900; color: #1b1100;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcc33 45%, #c98a00);
  box-shadow: 0 0 10px rgba(255, 200, 50, .8), 0 0 0 2px #0a1240;
}
.etape + .etape::before {
  content: ""; position: absolute; left: -19px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-top: 3px solid var(--or); border-right: 3px solid var(--or); transform: rotate(45deg);
  filter: drop-shadow(0 0 4px rgba(247, 201, 72, .8));
}

/* Exemple : titre + petit champ « mise initiale » */
.exemple-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin-bottom: 12px; }
.exemple-tete h2 { margin: 0; }
.tableau-wrap {
  overflow-x: auto; border-radius: 10px; border: 2px solid rgba(70, 150, 255, .85);
  box-shadow: 0 0 10px rgba(47, 134, 255, .4); background: rgba(3, 8, 28, .85);
}
.progression { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.progression th {
  padding: .6em .45em; font-weight: 700; font-size: clamp(.8rem, .95vw, .98rem); line-height: 1.15;
  background: linear-gradient(180deg, #164096, #0b245f); color: #fff; border-left: 1px solid rgba(110, 170, 255, .35);
}
.progression td {
  padding: .42em .45em; text-align: center; font-weight: 700; font-size: clamp(.86rem, 1vw, 1.05rem);
  border-top: 1px solid rgba(90, 150, 255, .3); border-left: 1px solid rgba(90, 150, 255, .3); white-space: nowrap;
}
.progression th:first-child, .progression td:first-child { border-left: 0; }
.progression .perte, .progression .negatif { color: #ff5466; }
.progression .gain { color: #49e27c; }
.progression .bilan-gain { color: #fff; background: linear-gradient(180deg, #27b252, #13802f); box-shadow: inset 0 0 8px rgba(120, 255, 160, .5); }
.progression tr.fin td { background-color: rgba(40, 200, 90, .08); }
.progression tr.bloque td { background-color: rgba(255, 40, 60, .12); }
.progression .bloque-txt { color: #fff; background: linear-gradient(180deg, #e2263a, #9e0a18); }
.note-tableau { margin: 10px 0 0; font-size: .95rem; }
.progression .positif { color: #49e27c; }
.progression .niveau { color: var(--or-clair); }
.progression tr.fin-seq td, .progression tr.objectif td { background-color: rgba(40, 200, 90, .1); }
.progression tr.objectif td { background-color: rgba(247, 201, 72, .13); }
.progression tr.fin-seq td:last-child, .progression tr.objectif td:last-child { color: #fff; }
.progression td .res {
  min-width: 5.6em; padding: .2em .55em; border-radius: 7px; border: 1.5px solid; background: none; font-weight: 800; font-size: inherit;
}
.progression td .res.perte { color: #ff5466; border-color: rgba(255, 84, 102, .65); background: rgba(255, 40, 60, .08); }
.progression td .res.gain { color: #49e27c; border-color: rgba(73, 226, 124, .65); background: rgba(40, 200, 90, .1); }
.progression td .res:hover { filter: brightness(1.25); box-shadow: 0 0 8px currentColor; }
.aide-tableau { margin: 8px 0 0 !important; font-size: .85rem; color: rgba(255, 255, 255, .65) !important; }
.outils-serie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn-outil {
  display: inline-flex; align-items: center; gap: .4em; padding: .45em .85em; border-radius: 10px; font-weight: 700; font-size: .88rem;
  border: 1.5px solid rgba(70, 150, 255, .85); background: rgba(5, 12, 38, .9); color: #fff; box-shadow: 0 0 8px rgba(47, 134, 255, .35);
}
.btn-outil svg.i { color: var(--or); }
.btn-outil:hover { background: rgba(47, 134, 255, .22); }
.exemple .discret { margin-top: 6px !important; font-size: .82rem; color: rgba(255, 255, 255, .6); }

/* ---------- Champs (calculateur et exemple) ---------- */
.champ { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.champ label { font-weight: 700; color: #fff; }
.saisie {
  display: flex; align-items: center; flex: none; width: 150px; height: 38px; padding-left: 10px; border-radius: 9px;
  border: 2px solid rgba(70, 150, 255, .85); background: rgba(3, 8, 28, .95); box-shadow: 0 0 8px rgba(47, 134, 255, .35);
}
.saisie:focus-within { border-color: var(--or); box-shadow: 0 0 10px rgba(247, 201, 72, .55); }
.saisie input {
  flex: 1; min-width: 0; width: 100%; height: 100%; border: 0; padding: 0 4px 0 0; background: none; color: #fff;
  font: inherit; font-weight: 700; font-size: 1.05rem; text-align: right; -moz-appearance: textfield; appearance: textfield;
}
.saisie input::-webkit-outer-spin-button, .saisie input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.saisie input:focus { outline: none; }
.saisie .unite { font-weight: 700; color: rgba(255, 255, 255, .85); padding-right: 6px; }
.fleches { display: flex; flex-direction: column; align-self: stretch; border-left: 1.5px solid rgba(70, 150, 255, .6); }
.fleches button {
  flex: 1; display: grid; place-items: center; width: 30px; padding: 0; border: 0; background: rgba(47, 134, 255, .12); color: #dfe9ff;
}
.fleches button + button { border-top: 1px solid rgba(70, 150, 255, .5); }
.fleches button:hover { background: rgba(47, 134, 255, .35); color: #fff; }
.fleches svg.i { width: 14px; height: 14px; stroke-width: 3; }
.champ.compact .saisie { width: 130px; height: 34px; }
.champ.compact label { font-size: .92rem; }

/* ---------- Calculateur ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 18px; align-items: start; }
.champs { display: flex; flex-direction: column; gap: 9px; }
.calc .champ { flex-direction: column; align-items: stretch; gap: 3px; }
.calc .champ .saisie { width: 100%; }
.resultats {
  padding: 10px 14px 12px; border-radius: 12px; border: 2px solid var(--vert);
  background: linear-gradient(180deg, rgba(8, 40, 30, .9), rgba(4, 16, 18, .92));
  box-shadow: 0 0 14px rgba(51, 213, 111, .55), inset 0 0 10px rgba(51, 213, 111, .2);
}
.resultats h3 { margin: 0 0 6px; text-align: center; color: var(--or); font-size: 1.08rem; font-weight: 800; }
.resultats dl { margin: 0; }
.resultats dl div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; padding: 4px 0; border-top: 1px solid rgba(51, 213, 111, .2); }
.resultats dd { margin-left: auto !important; text-align: right; }
.resultats dl div:first-child { border-top: 0; }
.resultats dt { color: rgba(255, 255, 255, .88); }
.resultats dd { margin: 0; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resultats dd.fort { color: var(--or); font-size: 1.35rem; text-shadow: 0 0 10px rgba(247, 201, 72, .5); }
.resultats dd.alerte, .resultats dd.fort.alerte { color: #ff6372; text-shadow: none; }
.btn-calc {
  grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: .7em;
  padding: .45em 2em .45em .5em; border-radius: 999px; border: 2px solid #ff7f8c; color: #fff;
  background: linear-gradient(180deg, #ff4253 0%, #d4111f 55%, #a5070f 100%);
  box-shadow: 0 0 22px rgba(255, 30, 50, .75), inset 0 2px 0 rgba(255, 255, 255, .35);
  font-weight: 800; font-size: clamp(1.05rem, 1.4vw, 1.35rem); text-shadow: 0 2px 0 rgba(80, 0, 0, .55);
}
.btn-calc .rond { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c3101c, #6e0007); }
.btn-calc .rond svg.i { color: #ffd23f; width: 1.3em; height: 1.3em; }
.btn-calc:hover { filter: brightness(1.1); }
.alertes { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.alertes:empty { display: none; }
.alertes p {
  margin: 0; padding: .5em .75em; border-radius: 10px; font-weight: 700; font-size: .95rem; color: #ffd2d6;
  background: rgba(255, 30, 50, .14); border: 1.5px solid rgba(255, 70, 90, .7);
}
.proba { grid-column: 1 / -1; font-size: .92rem; }
.proba p { margin: 0 0 .35em; }
.proba [data-proba] { font-weight: 700; color: #ffd27a; }
.proba .discret { color: rgba(255, 255, 255, .62); font-size: .85rem; }
.eclair { animation: eclair .9s ease-out; }
@keyframes eclair { 0% { box-shadow: 0 0 0 3px var(--or), 0 0 30px rgba(247, 201, 72, .9); } 100% { } }

/* ---------- Graphique ---------- */
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -2px 0 8px; font-size: .88rem; color: rgba(255, 255, 255, .9); }
.legende li { display: inline-flex; align-items: center; gap: .45em; }
.legende li::before { content: ""; width: 26px; height: 4px; border-radius: 2px; }
.legende .l-mise::before { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.legende .l-capital::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.legende .l-limite::before { height: 0; border-top: 2px dashed #ff5a6a; }
.legende .l-net::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.legende .l-comp::before { height: 0; border-top: 2px dashed #b77dff; }
.legende .l-limite[hidden] { display: none; }
.trace { position: relative; }
.trace svg { display: block; width: 100%; height: clamp(250px, 24vw, 320px); overflow: visible; touch-action: pan-y; }
.trace svg text { font-family: var(--police); }
.bulle {
  position: absolute; z-index: 2; pointer-events: none; padding: 6px 9px; border-radius: 9px; white-space: nowrap;
  background: rgba(4, 10, 34, .95); border: 1.5px solid rgba(110, 170, 255, .85); box-shadow: 0 0 12px rgba(47, 134, 255, .5);
  font-size: .85rem; line-height: 1.35;
}
.bulle b { color: var(--or); }
.bulle .m { color: var(--orange); }
.bulle .c { color: var(--cyan); }
.phrase { margin: 8px 0 0 !important; font-size: .95rem; }

/* ---------- Risques ---------- */
.cadre.risques {
  border-color: var(--rouge-vif); padding-right: 22%;
  background: linear-gradient(180deg, rgba(74, 8, 22, .94), rgba(30, 4, 14, .96));
  box-shadow: 0 0 18px rgba(255, 40, 60, .6), inset 0 0 16px rgba(255, 40, 60, .22);
}
.risques h2 svg.i { color: #ff4a5c; }
.risques .triangle {
  position: absolute; top: 10px; right: 16px; width: 70px; height: 70px; color: #ff3149; stroke-width: 1.6;
  filter: drop-shadow(0 0 8px rgba(255, 40, 60, .9));
}
.puces { display: flex; flex-direction: column; gap: 7px; }
.puces li { position: relative; padding-left: 22px; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.puces li::before {
  content: ""; position: absolute; left: 3px; top: .42em; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9aa4, #ff2238 60%); box-shadow: 0 0 8px rgba(255, 40, 60, .9);
}
.risques .fin { margin-top: 12px !important; font-weight: 800; color: #fff; }
.jetons { position: absolute; right: 14px; bottom: 12px; width: 15%; max-width: 110px; height: auto; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }

/* ---------- Autres stratégies ---------- */
.cadre.autres { grid-column: 1 / -1; }
.autres ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.carte {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 16px; text-align: left;
  border-radius: 14px; border: 2px solid; color: #fff; text-decoration: none;
}
.carte span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carte strong { font-style: italic; font-weight: 900; font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
.carte small { font-size: .9rem; color: rgba(255, 255, 255, .88); }
.carte svg.grand { width: 52px; height: 52px; stroke-width: 1.5; color: var(--or); }
.carte svg.chev { width: 22px; height: 22px; stroke-width: 3; }
.carte:hover { filter: brightness(1.15); }
.carte.vert { border-color: #3ddc6f; background: linear-gradient(180deg, rgba(14, 70, 36, .95), rgba(5, 30, 18, .95)); box-shadow: 0 0 14px rgba(61, 220, 111, .5); }
.carte.bleu { border-color: var(--cyan); background: linear-gradient(180deg, rgba(14, 44, 110, .95), rgba(5, 16, 48, .95)); box-shadow: 0 0 14px rgba(58, 168, 255, .5); }
.carte.rouge { border-color: #ff4a5c; background: linear-gradient(180deg, rgba(90, 10, 26, .95), rgba(36, 4, 14, .95)); box-shadow: 0 0 14px rgba(255, 60, 80, .5); }
.carte.violet { border-color: var(--violet); background: linear-gradient(180deg, rgba(60, 20, 110, .95), rgba(24, 6, 50, .95)); box-shadow: 0 0 14px rgba(166, 92, 255, .55); }

/* ---------- Bas de page ---------- */
.bas-strat {
  width: 100%; max-width: 1320px; margin: 18px auto 0; padding: 0 var(--marge);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px;
}
.bas-strat p { margin: 0; font-style: italic; text-align: center; color: rgba(255, 255, 255, .9); }
.btn-bas {
  display: inline-flex; align-items: center; gap: .55em; padding: .55em 1.3em; border-radius: 12px; white-space: nowrap;
  border: 2px solid var(--bleu); background: rgba(5, 12, 38, .9); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 0 12px var(--bleu-halo);
}
.btn-bas svg.i { color: var(--or); width: 1.35em; height: 1.35em; }
.btn-bas:hover { background: rgba(47, 134, 255, .2); }
.page.strat .pied { padding-top: 16px; }

/* =========================================================
   Ordinateur
   ========================================================= */
@media (min-width: 1000px) {
  .page.strat .pied { justify-content: center; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
  .menu-strat a, .menu-strat button { padding: .75em .55em; font-size: .86rem; }
  .menu-cadre { --pointe: 14px; }
}

/* =========================================================
   Téléphone et tablette
   ========================================================= */
@media (max-width: 999px) {
  .page.strat .actions { flex-direction: row; }
  .drapeaux-cadre { gap: 7px; padding: 5px 8px 3px; }
  .drapeau-lien .code { font-size: .68rem; }

  /* Menu : bandeau qui défile, comme sur l'accueil */
  .menu-strat { padding: 2px 0 0; }
  .menu-cadre { clip-path: none; padding: 2px 0; }
  .menu-strat ul {
    clip-path: none; overflow-x: auto; scrollbar-width: none; padding: 0 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .menu-strat ul::-webkit-scrollbar { display: none; }
  .menu-strat li { flex: 0 0 auto; }
  .menu-strat li:last-child { padding-right: 34px; }
  .menu-strat a, .menu-strat button { padding: .8em .9em; font-size: .86rem; }

  /* Bandeau : partie droite de l'image (roulette, pièces, graphique), le titre en haut */
  .bandeau { aspect-ratio: 960 / 560; max-height: 440px; min-height: 0; background-image: url(img/strategie-bandeau-tel.webp); background-position: 50% 100%; }
  .bandeau h1 { left: 50%; top: 5%; width: min(88%, 520px); }

  .contenu { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cadre { padding: 14px 14px 16px; }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .autres ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cadre.risques { padding-right: 14px; padding-bottom: 20px; }
  .risques .triangle { width: 46px; height: 46px; top: 8px; right: 10px; }
  .risques h2 { padding-right: 50px; }
  .jetons { position: static; display: block; width: 74px; margin: 10px 0 -6px auto; }

  .bas-strat { flex-wrap: wrap; justify-content: center; }
  .bas-strat p { order: 3; flex-basis: 100%; }
}

@media (max-width: 560px) {
  .etapes { flex-direction: column; gap: 22px; margin-top: 20px; }
  .etape { flex: none; padding: 18px 10px 10px; }
  .etape + .etape::before { left: 50%; top: -17px; margin: 0 0 0 -6px; transform: rotate(135deg); }
  .progression th { font-size: .74rem; padding: .5em .3em; }
  .progression td { font-size: .82rem; padding: .4em .3em; }
  .champ .saisie { width: 136px; }
  .exemple-tete { flex-direction: column; align-items: stretch; }
  .btn-calc { width: 100%; justify-content: center; padding-right: 1.2em; }
  .btn-bas { padding: .5em 1em; font-size: .95rem; }
}

@media (max-width: 360px) {
  .drapeaux-cadre { gap: 5px; padding: 4px 6px 2px; }
  .champ { flex-wrap: wrap; }
  .champ .saisie { width: 100%; }
}