* { box-sizing: border-box; }
body {
  margin: 0;
  background: #0a0a0a;
  color: #d8f5d8;
  font-family: 'Consolas', 'Courier New', monospace;
}
header {
  padding: 10px 16px;
  background: #111;
  border-bottom: 1px solid #1e4d1e;
}
header h1 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 1px;
  color: #ffcc00;
}
/* Enveloppe du pupitre (radar+ECDIS+conduite) : ce contenu a une largeur "native" fixe pensée pour
   un grand écran (~1340px). Sur tablette/téléphone, Controls.ajusterEchelleLayout() applique un
   transform:scale() sur .layout pour que tout tienne à l'écran sans redessiner chaque panneau — le
   wrapper masque juste le débord horizontal résiduel (overflow:hidden) puisqu'un transform ne
   change pas la taille de mise en page de l'élément, seulement son rendu visuel. */
.layout-scale-wrap {
  width: 100%;
  overflow: hidden;
}
.layout {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
  transform-origin: top left;
}
#radarCanvas {
  background: #001a00;
  border: 1px solid #1e4d1e;
  border-radius: 4px;
  display: block;
  cursor: crosshair;
  /* Empêche le navigateur d'interpréter un glissement du doigt sur le radar (déplacement de
     l'écho own ship, réglage EBL/VRM) comme un geste de défilement/zoom de la page — sans ça le
     tactile se dispute avec Controls.init() (glissementOwnEnCours, voir controls.js). */
  touch-action: none;
}
.radar-wrap {
  position: relative;
  width: 900px;
}
.fin-bandeau {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
}
.fin-bandeau.collision {
  background: rgba(180, 0, 0, 0.85);
  color: #fff;
}
.fin-bandeau.terminee {
  background: rgba(0, 60, 0, 0.9);
  color: #d8f5d8;
}
#sessionInfo {
  font-size: 12px;
  color: #00e0ff;
}
/* Occupe toute la largeur de la page (pas seulement celle du bloc radar) — sa propre rangée dans
   .layout (display:flex; flex-wrap:wrap), centrée entre le radar et l'ECDIS au-dessus plutôt que
   limitée à la largeur de l'un des deux (voir .ap-colonnes plus bas pour le centrage horizontal
   du contenu à l'intérieur de cette largeur). */
.panel-conduite {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Sans ce order, .panel-conduite (placé entre .radar-bloc et .ecdis-bloc dans le HTML) forcerait
     un retour à la ligne entre les deux à cause de sa largeur 100% — empêchant radar et ECDIS
     d'être côte à côte même sur un grand écran. En le poussant après les deux dans l'ordre flex,
     radar-bloc et ecdis-bloc (order:0 par défaut) partagent la première ligne dès qu'ils tiennent,
     et .panel-conduite retombe seul sur la ligne suivante, pleine largeur, comme prévu. */
  order: 3;
}

/* Barre du haut de l'écran de simulation : séance/pause/accélération/panneau instructeur — tout
   ce qui n'a pas besoin d'être regardé en permanence pendant la conduite regroupé ici plutôt que
   dispersé dans une colonne annexe (l'ancienne .panel-annexe, supprimée — tout son contenu a
   migré ici ou dans le panneau noir du radar, voir VECTOR ci-dessous). */
.topbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: #111;
  border-bottom: 1px solid #1e4d1e;
}
.topbar .champ {
  margin-bottom: 0;
}
.topbar select {
  width: auto;
}
.topbar-debug-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}
/* Plein écran natif demandé directement sur #ecranSimulation (pas document.documentElement, voir
   controls.js) : seule cette div occupe l'écran, le <header> du dessus reste en dehors — d'où
   ce fond explicite (sinon l'écran fullscreen affiche un fond noir UA par défaut sans le thème). */
#ecranSimulation:fullscreen {
  background: #0a0a0a;
  overflow-y: auto;
}
/* Le panneau instructeur devient un menu déroulant depuis la barre du haut plutôt qu'un bloc fixe
   dans une colonne — même contenu/logique d'affichage (#debugToggle bascule juste .hidden, voir
   controls.js, aucun changement JS), seule la position change. */
.debug-dropdown {
  position: absolute;
  top: 100%;
  right: 14px;
  width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  background: #0a0a0a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  z-index: 20;
}

/* Écrans plein-page (sélection de séance, chargement) — remplacent l'ancien .layout unique tant
   qu'aucune séance n'est en cours ; voir main.js pour la bascule via afficherEcran(). Le sélecteur
   :not([hidden]) est nécessaire, pas juste .ecran-centre seul : l'attribut [hidden] du navigateur
   (display:none) et une classe ont la MÊME spécificité CSS (0,1,0 chacun) — sans ce :not(), cette
   règle (posée après la feuille de style par défaut du navigateur dans la cascade) l'aurait
   emporté sur [hidden] et l'écran serait resté visible malgré `element.hidden = true` en JS. Bug
   réel rencontré en testant : les trois écrans s'empilaient tous à la fois au lieu de basculer.
*/
.ecran-centre:not([hidden]) {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}
.ecran-centre fieldset {
  width: 320px;
}

/* Écran d'accueil (#ecranSelection) : photo de fond plein cadre (ferry entrant/sortant entre deux
   jetées, illustrations/ferry_calais.png) + une seconde image de détail (télégraphe de passerelle
   réel, illustrations/telegraphe_passerelle.png) — demande explicite de l'utilisateur ("je voudrais
   que cette page soit plus soignée"). Classe séparée de .ecran-centre (qui reste utilisée telle
   quelle par #ecranChargement, le spinner de chargement) plutôt que de surcharger la même classe :
   les deux écrans n'ont plus rien de visuellement commun désormais. Même palette noir/vert
   phosphore/ambre/cyan que le reste de l'appli — pas la typographie serif de landing.html, qui est
   une page marketing externe, pas un écran fonctionnel du produit lui-même.
*/
/* :not([hidden]) requis — même bug de spécificité CSS que .ecran-centre et .champ plus haut dans
   ce fichier (une classe et [hidden] partagent la spécificité 0,1,0, donc display:flex ici
   l'emporterait sur `element.hidden = true` posé par main.js/afficherEcran). Repéré en testant
   cette fois : le bouton "Démarrer la séance" fonctionnait bien (l'appli passait réellement à
   l'écran de simulation en dessous), mais l'écran d'accueil restait visuellement affiché par-dessus
   — rien ne semblait se passer au clic alors que tout fonctionnait déjà correctement. */
.ecran-accueil:not([hidden]) {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
}
.accueil-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(1.05) contrast(1.05);
}
.accueil-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Ancien dégradé horizontal (90deg) retiré : il assombrissait la gauche pour la lisibilité de la
     carte quand elle était calée à gauche (justify-content: flex-start) — devenu asymétrique et
     inutile maintenant qu'elle est centrée (.ecran-accueil). Son propre fond quasi-opaque
     (.accueil-panel, rgba(6,12,9,.82)) suffit déjà à la lisibilité, dégradé vertical conservé pour
     l'ambiance générale (assombrit vers le bas). */
  background: linear-gradient(180deg, rgba(3,8,5,.55) 0%, rgba(3,8,5,.78) 55%, rgba(2,5,3,.96) 100%);
}
.accueil-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  max-width: 380px;
  width: 100%;
}
.accueil-kicker {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7fae8f;
  margin-bottom: 10px;
}
.accueil-panel {
  background: rgba(6, 12, 9, .82);
  border: 1px solid #1e4d1e;
  border-radius: 6px;
  padding: 30px 32px;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.7);
}
.accueil-panel fieldset {
  border: none;
  padding: 0;
  width: auto;
}
.accueil-panel legend {
  /* Remplacée visuellement par .accueil-kicker + .accueil-title ci-dessus — gardée dans le HTML
     pour la sémantique/accessibilité du fieldset, juste masquée à l'écran. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.accueil-title {
  font-size: 23px;
  letter-spacing: .3px;
  color: #d8f5d8;
  margin: 0 0 8px;
}
.accueil-sub {
  font-size: 12.5px;
  color: #7fae8f;
  margin: 0 0 24px;
  line-height: 1.55;
}
.accueil-panel .champ { margin-bottom: 14px; }
.accueil-panel label { flex: 0 0 78px; font-size: 12px; color: #9db3ac; }
.accueil-panel select { padding: 7px 8px; }
.accueil-panel button#nouvelleSeanceBtn {
  width: 100%;
  margin-top: 8px;
  padding: 11px 14px;
  background: #ffcc00;
  color: #1a1305;
  border: 1px solid #ffcc00;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12.5px;
  border-radius: 3px;
}
.accueil-panel button#nouvelleSeanceBtn:hover {
  background: #ffdb4d;
}
.accueil-btn-regles {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  background: transparent;
  color: #00e0ff;
  border: 1px solid #00e0ff;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12.5px;
  border-radius: 3px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.accueil-btn-regles:hover {
  background: rgba(0, 224, 255, .12);
}
.accueil-aide {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #1e4d1e;
}
.accueil-aide h3 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #7fae8f;
}
.accueil-aide p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b9d6c9;
}
.accueil-detail {
  margin: 0;
  border: 1px solid #1e4d1e;
  border-radius: 6px;
  overflow: hidden;
  background: #060a08;
  box-shadow: 0 30px 70px -25px rgba(0,0,0,.7);
}
.accueil-detail img { width: 100%; display: block; }
.accueil-detail figcaption {
  padding: 10px 12px;
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #7fae8f;
  border-top: 1px solid #142523;
}
@media (max-width: 760px) {
  .accueil-content { max-width: none; }
}
.chargement-texte {
  color: #00e0ff;
  font-size: 13px;
  letter-spacing: 1px;
}
.chargement-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #1e4d1e;
  border-top-color: #00ff41;
  border-radius: 50%;
  animation: chargement-tourne 0.8s linear infinite;
}
@keyframes chargement-tourne {
  to { transform: rotate(360deg); }
}

/* Rappel affiché à l'arrivée sur l'écran de simulation — tant que la séance n'a pas vraiment
   démarré (POWER + TRANSMIT, voir Engine.sessionDemarree), rien ne bouge et sans ce rappel rien
   n'explique pourquoi à l'écran. Masqué dès que la séance démarre (voir main.js, boucle()). */
.hint-demarrage {
  margin: 12px 12px 0;
  padding: 8px 14px;
  background: #111;
  border: 1px solid #ffcc00;
  color: #ffcc00;
  font-size: 12px;
  letter-spacing: 0.5px;
}
fieldset {
  border: 1px solid #1e4d1e;
  border-radius: 4px;
  padding: 10px;
}
legend {
  color: #00e0ff;
  font-size: 12px;
  padding: 0 4px;
}
/* :not([hidden]) requis pour la même raison que .ecran-centre plus haut : même spécificité CSS que
   [hidden], donc un simple .champ{display:flex} l'emporterait sur `element.hidden = true` posé par
   Controls.majChampsSelonLieu (masquage de Navire/Durée pour un lieu qui les impose déjà) — repéré
   en testant, le champ restait visible malgré .hidden === true en JS. */
.champ:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.champ label {
  flex: 0 0 70px;
  font-size: 12px;
}
input[type="number"], select {
  background: #0a0a0a;
  color: #d8f5d8;
  border: 1px solid #1e4d1e;
  border-radius: 3px;
  padding: 4px 6px;
  width: 100%;
}
button {
  background: #143214;
  color: #d8f5d8;
  border: 1px solid #1e4d1e;
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  /* Sans ça, Safari iPad interprète des taps rapprochés sur un même bouton (ex. SET HEADING +/-
     cliqué plusieurs fois de suite) comme un double-tap et zoome la page, malgré le
     user-scalable=no du viewport (ignoré par iOS 10+ pour l'accessibilité) — signalé par
     l'utilisateur en testant sur iPad. touch-action:manipulation supprime spécifiquement ce geste
     de double-tap-zoom sur les boutons, sans toucher au pinch-zoom du reste de la page. */
  touch-action: manipulation;
}
button:hover {
  background: #1e4d1e;
}
.hud-row {
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed #1e4d1e;
}
#debugPanel {
  border-color: #ff5555;
}
#debugPanel legend {
  color: #ff8080;
}

/* Bloc radar : les deux panneaux de contrôle collés de part et d'autre de l'écran, comme sur
   la photo de référence — pas d'écart entre eux et le canvas. L'autopilot (.panel-conduite) n'est
   plus imbriqué ici : il vit dans sa propre rangée pleine largeur sous radar+ECDIS, voir plus bas. */
.radar-bloc {
  display: flex;
}
.radar-rangee {
  display: flex;
  gap: 0;
  align-items: flex-start;
}

/* Panneau de contrôle radar, même fond noir que l'écran radar de la photo de référence. */
.panel-noir {
  width: 210px;
  min-width: 210px;
  background: #000;
  border: 1px solid #1e4d1e;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel-noir fieldset {
  min-width: 0;
}
.panel-noir-gauche {
  border-right: none;
  border-radius: 4px 0 0 4px;
}
.panel-noir-droite {
  border-left: none;
  border-radius: 0 4px 4px 0;
}
.radar-bloc .radar-wrap #radarCanvas {
  border-radius: 0;
}
.panel-noir fieldset {
  border-color: #00ff41;
}
.panel-noir legend {
  color: #00ff41;
  font-weight: bold;
  letter-spacing: 1px;
}
.champ-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.champ-boutons button {
  flex: 1 1 auto;
  min-width: 90px;
  background: #001a00;
  color: #00ff41;
  border-color: #00ff41;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.champ-boutons button:hover {
  background: #003300;
}
.champ-boutons button.actif {
  background: #00ff41;
  color: #000;
}
.champ-glissiere {
  display: flex;
  align-items: center;
  gap: 8px;
}
.champ-glissiere label {
  flex: 0 0 75px;
  font-size: 11px;
  color: #00ff41;
}
.champ-glissiere input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: #00ff41;
}
/* Réglage fixe, purement décoratif (aucun effet réel) : une jauge non interactive plutôt
   qu'une glissière qui laisserait croire qu'elle fait quelque chose. */
.jauge-fixe {
  flex: 1;
  min-width: 0;
  height: 6px;
  background: #143214;
  border: 1px solid #1e4d1e;
  border-radius: 3px;
  overflow: hidden;
}
.jauge-remplissage {
  height: 100%;
  background: #00ff41;
}

/* Panneau "Barre / Machine (Autopilot)", inspiré d'un boîtier pilote automatique réel (photo de
   référence AP.jpg) : trois colonnes côte à côte — cap (GYRO/SET HEADING + boutons +/-), barre
   (RUDDER/R.O.T, cadrans analogiques, eux-mêmes côte à côte plutôt qu'empilés), vitesse (SPEED/SET
   SPEED). .panel-conduite occupe toute la largeur de la page (voir plus haut) ; justify-content
   centre ce groupe de colonnes au milieu de cette largeur plutôt que de le laisser collé à gauche. */
.ap-colonnes {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: flex-start;
}
.ap-colonne {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ap-colonne-cap {
  width: 150px;
  align-items: stretch;
}
/* RUDDER et R.O.T côte à côte (plutôt qu'empilés) : place le suffit maintenant que le panneau
   entier occupe toute la largeur de la page. */
.ap-colonne-barre {
  width: 420px;
  flex-direction: row;
  gap: 16px;
}
.ap-colonne-barre .ap-jauge {
  flex: 1;
  min-width: 0;
}
.ap-colonne-vitesse {
  width: 160px;
}
.ap-bloc {
  text-align: center;
  background: #0a0a0a;
  border: 1px solid #1e4d1e;
  border-radius: 3px;
  padding: 6px 0;
}
.ap-bloc label {
  display: block;
  font-size: 11px;
  color: #7fae7f;
  letter-spacing: 1px;
}
.ap-digit {
  font-size: 30px;
  font-weight: bold;
  line-height: 1.2;
}
.ap-digit-gyro { color: #00e0ff; }
.ap-digit-set { color: #ffcc00; }
/* Transmetteur d'ordre (E.O.T.) : libellés bien plus longs ("ARRIÈRE TRÈS LENTE") que les 3
   chiffres de GYRO/SET HEADING qui partagent par ailleurs le même style .ap-digit — taille réduite
   et retour à la ligne autorisé plutôt que de déborder de la colonne. */
#apMachine {
  font-size: 15px;
  line-height: 1.15;
  min-height: 2.3em;
}
/* Boutons +/- de réglage du cap, sous SET HEADING (remplace l'ancienne roulette cliquable) —
   maintien = répétition rapide, voir demarrerRepetitionCap dans main.js. */
.ap-cap-boutons {
  display: flex;
  gap: 4px;
  padding: 4px 6px 0;
}
.ap-cap-boutons button {
  flex: 1;
  font-size: 14px;
  padding: 3px 0;
}
.ap-jauge {
  margin-bottom: 0;
}
/* R.O.T / RUDDER : cadrans analogiques en demi-cercle (aiguille + zones PORT rouge / STBD verte),
   inspirés des instruments de bord réels fournis en référence (illustrations/rudder.jpg,
   illustrations/R.O.T.jpg) plutôt que la barre bipolaire linéaire utilisée initialement — dessinés
   sur canvas par main.js (dessinerJaugeDemiCercle), qui s'adapte automatiquement aux dimensions
   width/height du canvas (tout est calculé en proportion, rien en pixels absolus) : agrandir ces
   cadrans se fait uniquement en changeant les attributs width/height dans index.php. */
.ap-jauge-titre {
  text-align: center;
  font-size: 11px;
  color: #7fae7f;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.ap-gauge-canvas {
  display: block;
  margin: 0 auto;
  background: #0a0a0a;
  border: 1px solid #1e4d1e;
  border-radius: 6px;
}
.ap-jauge-valeur {
  text-align: center;
  font-size: 13px;
  color: #d8f5d8;
  margin-top: 2px;
}

/* Boutons de la colonne cap (+/- de réglage et ACCEPT) : même thème jaune que l'ancien bouton
   ACCEPT de la roulette (photo de référence AP.jpg), conservé après sa suppression. */
.ap-colonne-cap button {
  background: #001a00;
  color: #ffcc00;
  border-color: #ffcc00;
  font-weight: bold;
}
.ap-colonne-cap button:hover {
  background: #332900;
}

/* Bloc ECDIS : carte (Leaflet, voir ecdis.js) + panneau de données, même charpente que
   .radar-bloc/.panel-noir mais palette bleu marine distincte — deux systèmes de bord séparés,
   pas la même identité visuelle que le radar vert. Photo de référence : illustrations/ecdis.jpg. */
.ecdis-bloc {
  display: flex;
  gap: 0;
  align-items: flex-start;
}
.ecdis-wrap {
  width: 900px;
  height: 900px;
  border: 1px solid #2a4a7a;
  border-right: none;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}
#ecdisMap {
  width: 100%;
  height: 100%;
  background: #0a1428;
}
.panel-noir-ecdis {
  background: #0a1428;
  border-color: #2a4a7a;
  border-left: none;
  border-radius: 0 4px 4px 0;
}
.panel-noir-ecdis fieldset {
  border-color: #2a6ab0;
}
.panel-noir-ecdis legend {
  color: #00e0ff;
  font-weight: bold;
  letter-spacing: 1px;
}
.panel-noir-ecdis .champ label {
  color: #6a9fd8;
  font-size: 10px;
  letter-spacing: 1px;
  flex: 0 0 60px;
}
.panel-noir-ecdis .champ span {
  color: #fff;
  font-size: 12px;
}
.panel-noir-ecdis .champ-boutons button {
  background: #0a1428;
  color: #00e0ff;
  border-color: #2a6ab0;
  font-size: 11px;
  letter-spacing: 0.5px;
}
.panel-noir-ecdis .champ-boutons button:hover {
  background: #123055;
}
/* Symbole own ship sur la carte ECDIS (voir ecdis.js) : illustrations/boat.png, tourné selon le
   cap. pointer-events:none pour ne jamais gêner le pan/zoom Leaflet sous le curseur. */
.ecdis-own-icon {
  pointer-events: none;
}
.ecdis-own-image {
  width: 14px;
  height: 28px;
  display: block;
  transform-origin: center center;
}
/* Cibles AIS sur la carte ECDIS (voir Ecdis.majCiblesAis). Le cyan du triangle AIS radar (pensé
   pour un fond noir) est quasi invisible sur le fond bleu clair des tuiles OpenSeaMap — rouge vif
   à la place, choisi spécifiquement pour son contraste sur fond bleu/eau ET sur les zones de
   terre plus claires, pas une simple reprise de la palette radar. */
.ecdis-target-icon {
  pointer-events: none;
}
.ecdis-target-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #e30000;
  margin: 0 auto;
  transform-origin: center center;
}
.ecdis-target-label {
  font-size: 10px;
  font-weight: bold;
  color: #e30000;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
  text-align: center;
  white-space: nowrap;
  margin-top: 2px;
}

/* Onglets RADAR/ECDIS : n'existent que sur petit écran (voir .mode-compact, posée par
   Controls.ajusterEchelleLayout dans main.js selon la largeur de fenêtre). Sur grand écran, radar
   (+conduite) et ECDIS restent affichés ensemble comme avant — .vue-radar/.vue-ecdis en
   display:contents les laisse alors se comporter comme de simples enfants directs de .layout,
   sans changer le rendu flex existant. */
.ecran-tabs {
  display: none;
  gap: 8px;
  padding: 0 12px 10px;
}
.mode-compact .ecran-tabs {
  display: flex;
}
.tab-btn {
  flex: 1;
  padding: 10px;
  background: #111;
  color: #7fae7f;
  border: 1px solid #1e4d1e;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}
.tab-btn.actif {
  background: #00ff41;
  color: #000;
  border-color: #00ff41;
}
.vue-radar, .vue-ecdis {
  display: contents;
}
.mode-compact .vue-radar.masque,
.mode-compact .vue-ecdis.masque {
  display: none;
}

/* Téléphone (portrait ou paysage étroit) : la rangée radar-bloc (panneau|canvas|panneau, ~1320px)
   et la rangée ecdis-bloc (carte|panneau, ~1110px) ne peuvent plus être mises à l'échelle en bloc de
   façon lisible sous ~700px — on les empile verticalement à la place (chaque panneau/canvas prend
   toute la largeur) plutôt que de les réduire en miniature ou d'exiger de tourner l'appareil.
   Fonctionne avec .mode-compact/.ecran-tabs ci-dessus (déjà actif sous 1400px) : un seul onglet
   RADAR ou ECDIS visible à la fois, et c'est CE contenu-là qui s'empile ici. Les canvas gardent leur
   résolution de dessin interne (900x900, voir attributs width/height dans index.php) — seule leur
   taille CSS affichée change ; Controls.coordsCanvas() dans controls.js recalcule déjà les
   coordonnées de pointeur en conséquence, donc aucun changement JS n'est nécessaire ici. */
@media (max-width: 700px) {
  /* .radar-bloc/.ecdis-bloc n'ont pas de largeur propre (dimensionnés par leur contenu, en flex-grow:0
     par défaut) : sans ce width:100% explicite, leur empilement en colonne resterait replié sur la
     largeur naturelle de leur contenu au lieu de remplir l'écran — testé, c'est bien ce qui se
     produisait (colonne étroite collée à gauche plutôt que pleine largeur). */
  .radar-bloc, .ecdis-bloc {
    width: 100%;
  }
  .radar-rangee {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .panel-noir {
    width: 100%;
    min-width: 0;
  }
  .panel-noir-gauche, .panel-noir-droite {
    border: 1px solid #1e4d1e;
    border-radius: 4px;
  }
  .radar-wrap {
    width: 100%;
  }
  #radarCanvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .ecdis-bloc {
    flex-direction: column;
    align-items: stretch;
  }
  .ecdis-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border: 1px solid #2a4a7a;
    border-radius: 4px;
  }
  .panel-noir-ecdis {
    width: 100%;
    border: 1px solid #2a4a7a;
    border-radius: 4px;
  }
  .ap-colonnes {
    flex-direction: column;
    align-items: stretch;
  }
  .ap-colonne-cap, .ap-colonne-barre, .ap-colonne-vitesse {
    width: 100%;
  }
  .ap-colonne-barre {
    flex-direction: column;
  }
}
/* Cibles tactiles plus généreuses sur appareil à pointeur imprécis (doigt) : les boutons du pupitre
   radar (11px, pensés pour un clic souris précis) restent en dessous du minimum recommandé (~44px)
   une fois mis à l'échelle sur tablette. Ne change rien à la souris (media query pointer:coarse). */
@media (pointer: coarse) {
  .champ-boutons button, .ap-cap-boutons button, .ap-colonne-cap button {
    min-height: 40px;
  }
}
/* Sous-titres à l'intérieur du panneau instructeur (Cibles CPA/TCPA, Classification COLREG). */
.instructeur-sous-titre {
  color: #ff8080;
  font-size: 11px;
  letter-spacing: 0.5px;
  margin: 8px 0 4px;
}
.instructeur-sous-titre:first-of-type {
  margin-top: 0;
}