/* =============================================================================
   AVIERO — La pile avionique
   -----------------------------------------------------------------------------
   Le poste COM, le transpondeur, et les quatre habillages par machine (Garmin du Cessna,
   Bendix/King du Piper, Becker du Robin, rack générique).

   Ce fichier est le n° 11 sur 14. L'ORDRE DE CHARGEMENT EST LE CONTRAT :
   c'est la cascade CSS, et plusieurs règles de ce projet ne valent que par leur
   position après une autre. Les <link> d'index.html sont numérotés pour cette
   raison, et tests/contrat/chargement.test.mjs surveille cet ordre.

   Extrait du <style> d'index.html le 18/09/2026, sans qu'aucune règle ne soit
   modifiée, ajoutée ou supprimée.
   ========================================================================== */
  /* ================= Pile avionique : COM + transpondeur =================
     Deux boîtiers empilés, comme dans un tableau de bord : l'émetteur VHF au-dessus,
     le transpondeur en dessous. Les quatre habillages s'inspirent des postes qu'on
     rencontre réellement dans ces machines — ce sont des évocations, pas des répliques.
     Largeur bornée : un rack avionique est étroit, et le panneau de parole a besoin
     de la place restante. */
  /* 540 px : la largeur juste suffisante pour que chaque boîtier tienne sur UNE
     rangée (afficheur + molettes). En dessous tout passait à la ligne et la pile
     devenait deux fois plus haute. Reste ~40 % plus étroit que la pleine largeur. */
  /* Pile avionique a gauche, photo d'avion a droite : le rack garde sa largeur,
     la photo occupe ce qui reste. */
  .avio-rang{ display:flex; align-items:flex-start; gap:20px; margin:0 0 14px; }
  .avio{ flex:0 1 540px; max-width:540px; min-width:0; }

  .vf-avion{ flex:1 1 240px; min-width:0; margin:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:7px; align-self:stretch; }
  .vf-avion img{ display:block; width:100%; max-width:340px; height:auto; max-height:150px;
    object-fit:contain;
    /* L'ombre portee suit la silhouette (et non le cadre) : c'est ce qui pose
       l'avion dans la page au lieu de le laisser flotter en vignette. */
    filter:drop-shadow(0 10px 14px rgba(15,20,35,.28));
    animation:vfFlotte 5.5s ease-in-out infinite; will-change:transform; }
  .vf-avion figcaption{ font-size:11px; color:var(--ink-2); text-align:center; line-height:1.4; }
  .vf-avion figcaption b{ display:block; font-size:12px; color:var(--ink); font-weight:700; }
  /* Un leger roulis vertical, comme en air calme. */
  @keyframes vfFlotte{ 0%,100%{ transform:translateY(-5px) } 50%{ transform:translateY(5px) } }
  @media (prefers-reduced-motion:reduce){ .vf-avion img{ animation:none } }
  @media (max-width:900px){
    .avio-rang{ flex-direction:column; gap:14px; }
    .avio{ flex:1 1 auto; max-width:540px; width:100%; }
    /* En colonne, `flex:1` etirait le bloc photo sur toute la hauteur restante et
       laissait un grand vide sous le transpondeur : on le laisse a sa taille. */
    .vf-avion{ flex:0 0 auto; align-self:center; }
    .vf-avion img{ max-width:280px; max-height:110px; }
  }
  .radio{ margin-bottom:8px; }
  .radio:last-child{ margin-bottom:0; }
  .radio-corps{ background:linear-gradient(#2a2d33,#16181c); border:1px solid #0c0d10;
    border-radius:10px; padding:8px 9px; box-shadow:0 2px 10px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.07); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  /* Plaque constructeur : horizontale et lisible — c'est le premier repère visuel
     qui distingue un habillage d'un autre. */
  .radio-plaque{ display:flex; align-items:center; gap:5px; font-family:var(--mono);
    font-size:8px; letter-spacing:.13em; color:#8a929d; text-transform:uppercase;
    flex:none; writing-mode:vertical-rl; transform:rotate(180deg);
    align-self:stretch; justify-content:center; }
  .radio-led{ width:5px; height:5px; border-radius:50%; background:#3a4048; flex:none; }
  .radio.actif .radio-led{ background:#4ade80; box-shadow:0 0 5px rgba(74,222,128,.9); }

  /* min-width 232 : deux fréquences à trois décimales plus le bouton de permutation.
     En dessous, la valeur STANDBY débordait sous les molettes dès qu'elle était
     renseignée. La rangée de commandes passe alors à la ligne, ce qui est voulu. */
  .radio-ecran{ display:flex; align-items:center; gap:8px; background:#05070a;
    border:1px solid #000; border-radius:5px; padding:5px 9px; flex:1 1 232px; min-width:232px;
    box-shadow:inset 0 2px 7px rgba(0,0,0,.85); }
  .radio-col{ display:flex; flex-direction:column; gap:1px; align-items:center; flex:1; }
  .radio-lab{ font-family:var(--mono); font-size:7.5px; letter-spacing:.14em; color:#5d6672; }
  .radio-val{ font-family:var(--mono); font-size:19px; font-weight:700; letter-spacing:.01em;
    line-height:1; color:#3ee08a; text-shadow:0 0 9px rgba(62,224,138,.55); white-space:nowrap; }
  .radio-val.stby{ color:#8b95a3; text-shadow:none; }
  .radio-val.attendue{ animation:radioClign 1s ease-in-out infinite; }
  @keyframes radioClign{ 0%,100%{opacity:1} 50%{opacity:.35} }
  .radio-swap{ background:#22262c; border:1px solid #0a0c0f; border-radius:5px; cursor:pointer;
    padding:5px 6px; display:inline-flex; box-shadow:0 1px 0 rgba(255,255,255,.06); flex:none; }
  .radio-swap:hover{ background:#2e343c; }
  .radio-swap:active{ transform:translateY(1px); }
  .radio-swap svg{ width:15px; height:15px; fill:none; stroke:#c8ced8; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; }
  .radio-swap.pret svg{ stroke:#3ee08a; }
  .radio-swap.pret{ box-shadow:0 0 0 2px rgba(62,224,138,.45); }

  .radio-cmd{ display:flex; align-items:center; gap:7px; flex:none; }
  .radio-knob{ display:flex; align-items:center; gap:3px; background:#1b1e23; border:1px solid #0a0c0f;
    border-radius:18px; padding:2px; }
  .rk{ width:21px; height:21px; border-radius:50%; border:1px solid #0a0c0f; cursor:pointer;
    background:radial-gradient(circle at 35% 30%,#4a5058,#23272d); color:#dfe4ea;
    font-size:14px; line-height:1; font-family:var(--sans); display:inline-flex;
    align-items:center; justify-content:center; flex:none; }
  .rk:hover{ background:radial-gradient(circle at 35% 30%,#5a616a,#2b3037); }
  .rk:active{ transform:translateY(1px); }
  .rk-lab{ font-family:var(--mono); font-size:7.5px; letter-spacing:.08em; color:#7d8590;
    width:19px; text-align:center; }
  .radio-saisie{ width:74px; background:#05070a; border:1px solid #000; border-radius:5px;
    padding:5px 6px; font-family:var(--mono); font-size:12px; color:#8b95a3; text-align:center; }
  .radio-saisie:focus{ outline:none; border-color:#3ee08a; color:#3ee08a; }
  /* Pastille « à afficher » : rappelle en clair la fréquence ou le code à régler,
     et disparaît d'elle-même dès que le réglage est fait. C'est le seul endroit où
     l'élève peut lire la valeur attendue si le contrôleur ne l'a pas annoncée. */
  .radio-cible{ display:inline-flex; align-items:center; gap:7px; margin:7px 2px 0;
    background:var(--violet-soft); border:1px solid var(--violet); border-radius:var(--pill);
    padding:4px 11px; font-size:12.5px; color:var(--violet); }
  .radio-cible b{ font-family:var(--mono); font-size:13.5px; font-weight:700; }
  .radio-cible.hidden{ display:none; }
  .xp-btn.exec{ letter-spacing:.04em; }
  /* Code composé mais pas encore activé : le bouton EXÉC réclame l'appui. On le met
     en relief plutôt qu'en clignotement d'opacité, qui le faisait passer pour inactif. */
  .xp-btn.exec.arme{ background:#3ee08a; color:#06180f; border-color:#1d6b45;
    animation:execPulse 1.1s ease-in-out infinite; }
  @keyframes execPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(62,224,138,.55)}
                        50%{box-shadow:0 0 0 4px rgba(62,224,138,0)} }
  .radio[data-skin="cessna"] .xp-btn.exec.arme{ background:#8fc6ff; color:#06182c; border-color:#3b6ea3; }
  .radio[data-skin="piper"]  .xp-btn.exec.arme{ background:#5cff96; color:#04200f; border-color:#1f6d3c; }
  .radio[data-skin="robin"]  .xp-btn.exec.arme{ background:#ffb347; color:#241500; border-color:#8a5f1c; }
  .radio[data-skin="generic"] .xp-btn.exec.arme{ background:#e6ebf2; color:#14171c; border-color:#8b95a3; }
  .radio-val.brouillon{ opacity:.6; }
  .radio-aide{ font-size:12.5px; color:var(--ink-2); margin:6px 2px 0; line-height:1.5; }
  .radio-aide.alerte{ color:#96332f; }
  :root[data-theme="dark"] .radio-aide.alerte{ color:#f3b4b0; }

  /* ---- Transpondeur ----
     Quatre roues octales (0 à 7 : un code SSR n'a pas de 8 ni de 9), un sélecteur de
     mode et le bouton IDENT. */
  .xp-ecran{ flex:1 1 150px; min-width:140px; gap:9px; }
  .xp-code{ letter-spacing:.16em; }
  .xp-etat{ font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; color:#5d6672;
    border:1px solid #23262c; border-radius:3px; padding:2px 5px; flex:none; }
  .xp-etat.on{ color:#3ee08a; border-color:#2c5c42; }
  .xp-roues{ display:flex; gap:3px; }
  .xp-roue{ display:flex; flex-direction:column; align-items:center; gap:1px;
    background:#1b1e23; border:1px solid #0a0c0f; border-radius:5px; padding:2px; }
  .xp-roue button{ width:19px; height:13px; border:none; border-radius:3px; cursor:pointer;
    background:#3a4048; color:#dfe4ea; font-size:9px; line-height:1; padding:0;
    display:inline-flex; align-items:center; justify-content:center; }
  .xp-roue button:hover{ background:#4c545e; }
  .xp-roue span{ font-family:var(--mono); font-size:12px; color:#aeb6c0; }
  .xp-btn{ font-family:var(--mono); font-size:9px; letter-spacing:.06em; cursor:pointer;
    background:#22262c; color:#c8ced8; border:1px solid #0a0c0f; border-radius:5px;
    padding:6px 7px; flex:none; }
  .xp-btn:hover{ background:#2e343c; }
  .xp-btn:active{ transform:translateY(1px); }
  .xp-btn.actif{ background:#3ee08a; color:#06180f; border-color:#1d6b45; }
  .xp-btn.attendu{ animation:radioClign 1s ease-in-out infinite; }

  /* ================= Habillages par machine =================
     Chaque habillage change la façade ENTIÈRE (teinte du boîtier, forme, écran,
     couleur des segments, plaque constructeur) : à l'écran, on doit voir tout de
     suite qu'on a changé d'avion. */

  /* --- Cessna : postes Garmin. Bezel anthracite arrondi, plaque horizontale en haut,
         afficheur blanc bleuté, molettes concentriques. --- */
  .radio[data-skin="cessna"] .radio-corps{ background:linear-gradient(#454b54,#23272d);
    border-radius:12px; border-color:#12151a; }
  .radio[data-skin="cessna"] .radio-plaque{ color:#dfe6ef; font-size:8.5px; letter-spacing:.2em;
    background:#151a20; border:1px solid #0a0d11; border-radius:4px; padding:12px 4px; }
  .radio[data-skin="cessna"] .radio-ecran{ background:#070c12; border-radius:4px; }
  .radio[data-skin="cessna"] .radio-val{ color:#eaf3ff; text-shadow:0 0 8px rgba(150,195,255,.55); }
  .radio[data-skin="cessna"] .radio-val.stby{ color:#7f8b9c; text-shadow:none; }
  .radio[data-skin="cessna"] .radio-lab{ color:#6d7887; }
  .radio[data-skin="cessna"] .rk{ background:radial-gradient(circle at 35% 30%,#6d7683,#2b3138);
    box-shadow:inset 0 0 0 3px #23272d, 0 1px 0 rgba(255,255,255,.08); }
  .radio[data-skin="cessna"] .radio-swap.pret svg{ stroke:#8fc6ff; }
  .radio[data-skin="cessna"] .radio-swap.pret{ box-shadow:0 0 0 2px rgba(143,198,255,.45); }
  .radio[data-skin="cessna"] .xp-btn.actif{ background:#8fc6ff; color:#06182c; border-color:#3b6ea3; }
  .radio[data-skin="cessna"] .xp-etat.on{ color:#8fc6ff; border-color:#31506e; }

  /* --- Piper : type Bendix/King. Façade noire quasi carrée, vis apparentes,
         numéraux vert gaz, molette unique crantée. --- */
  .radio[data-skin="piper"] .radio-corps{ background:linear-gradient(#242424,#0e0e0e);
    border-radius:4px; border-color:#000;
    box-shadow:0 2px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
  .radio[data-skin="piper"] .radio-plaque{ color:#d3d6da; font-size:7.5px; letter-spacing:.1em;
    border-right:1px solid #2f2f2f; padding-right:7px; }
  .radio[data-skin="piper"] .radio-ecran{ background:#020602; border-radius:2px;
    border:1px solid #1a1a1a; }
  .radio[data-skin="piper"] .radio-val{ color:#5cff96; text-shadow:0 0 11px rgba(92,255,150,.65); }
  .radio[data-skin="piper"] .radio-val.stby{ color:#2f7d52; text-shadow:none; }
  .radio[data-skin="piper"] .radio-lab{ color:#4f5c53; }
  .radio[data-skin="piper"] .radio-knob{ border-radius:4px; background:#141414; }
  .radio[data-skin="piper"] .rk{ border-radius:3px;
    background:linear-gradient(#3d3d3d,#1c1c1c); color:#d6d9dc; }
  .radio[data-skin="piper"] .radio-swap{ border-radius:3px; background:#1c1c1c; }
  .radio[data-skin="piper"] .radio-swap.pret svg{ stroke:#5cff96; }
  .radio[data-skin="piper"] .xp-roue{ border-radius:3px; background:#141414; }
  .radio[data-skin="piper"] .xp-roue button{ border-radius:2px; background:#3d3d3d; }
  .radio[data-skin="piper"] .xp-btn{ border-radius:3px; background:#1c1c1c; }
  .radio[data-skin="piper"] .xp-btn.actif{ background:#5cff96; color:#04200f; border-color:#1f6d3c; }
  .radio[data-skin="piper"] .xp-etat.on{ color:#5cff96; border-color:#265338; }

  /* --- Robin / Jodel : postes Becker. Boîtier étroit brun-noir, écran ambre à
         segments, boutons plats rectangulaires. --- */
  .radio[data-skin="robin"] .radio-corps{ background:linear-gradient(#332f28,#17150f);
    border-radius:6px; border-color:#0a0906; padding:8px 9px; gap:7px; }
  .radio[data-skin="robin"] .radio-plaque{ color:#c9a86a; font-size:7.5px; letter-spacing:.16em; }
  .radio[data-skin="robin"] .radio-ecran{ background:#120c03; border:1px solid #060400;
    border-radius:3px; padding:5px 9px; }
  .radio[data-skin="robin"] .radio-val{ color:#ffb347; text-shadow:0 0 10px rgba(255,179,71,.6); }
  .radio[data-skin="robin"] .radio-val.stby{ color:#8c7448; text-shadow:none; }
  .radio[data-skin="robin"] .radio-lab{ color:#6d5c3c; }
  .radio[data-skin="robin"] .radio-knob{ border-radius:4px; background:#1d1a14; }
  .radio[data-skin="robin"] .rk{ border-radius:4px; background:linear-gradient(#4a4438,#221f18);
    color:#e6d9bd; width:20px; height:19px; }
  .radio[data-skin="robin"] .radio-swap{ border-radius:4px; background:#221f18; }
  .radio[data-skin="robin"] .radio-swap.pret svg{ stroke:#ffb347; }
  .radio[data-skin="robin"] .radio-swap.pret{ box-shadow:0 0 0 2px rgba(255,179,71,.45); }
  .radio[data-skin="robin"] .radio-saisie{ background:#120c03; color:#c9a86a; }
  .radio[data-skin="robin"] .radio-saisie:focus{ border-color:#ffb347; color:#ffb347; }
  .radio[data-skin="robin"] .xp-roue{ border-radius:4px; background:#1d1a14; }
  .radio[data-skin="robin"] .xp-roue button{ border-radius:2px; background:#4a4438; color:#e6d9bd; }
  .radio[data-skin="robin"] .xp-roue span{ color:#ffb347; }
  .radio[data-skin="robin"] .xp-btn{ border-radius:4px; background:#221f18; color:#e6d9bd; }
  .radio[data-skin="robin"] .xp-btn.actif{ background:#ffb347; color:#241500; border-color:#8a5f1c; }
  .radio[data-skin="robin"] .xp-etat.on{ color:#ffb347; border-color:#6b5426; }

  /* --- Générique : rack gris neutre, segments blancs. --- */
  .radio[data-skin="generic"] .radio-val{ color:#e6ebf2; text-shadow:0 0 8px rgba(230,235,242,.35); }
  .radio[data-skin="generic"] .radio-swap.pret svg{ stroke:#e6ebf2; }
  .radio[data-skin="generic"] .xp-btn.actif{ background:#e6ebf2; color:#14171c; border-color:#8b95a3; }
  .radio[data-skin="generic"] .xp-etat.on{ color:#e6ebf2; border-color:#4a515b; }

  @media (max-width:640px){
    .avio{ max-width:none; }
    .radio-corps{ gap:8px; padding:9px; }
    .radio-plaque{ display:none; }
    .radio-ecran{ min-width:0; width:100%; padding:7px 9px; }
    .radio-val{ font-size:20px; }
    .radio-cmd{ width:100%; justify-content:space-between; }
    .radio-saisie{ flex:1; width:auto; min-width:0; }
    .xp-roues{ flex:none; }
  }