/* AFIS Ops Manager - cahier de marche cote public
 *
 * Concu pour un ecran de vigie : cibles tactiles larges, contraste eleve,
 * panneaux repliables pour tenir sur un ecran etroit, et un mode nuit qui
 * evite d'eblouir en vacation nocturne.
 */

.afis-vigie {
    --v-fond: #ffffff;
    --v-fond2: #f6f7f7;
    --v-bord: #d5d7da;
    --v-texte: #1d2327;
    --v-doux: #50575e;
    --v-accent: #2271b1;
    --v-vert: #135e2a;
    --v-ambre: #996800;
    --v-rouge: #b32d2e;
    --v-cible: 46px;

    max-width: 1500px;
    margin: 0 auto;
    color: var(--v-texte);
    font-size: 16px;
    line-height: 1.5;
}

.afis-vigie.nuit {
    --v-fond: #16181b;
    --v-fond2: #1f2226;
    --v-bord: #33383e;
    --v-texte: #e2e4e7;
    --v-doux: #9aa0a6;
    --v-accent: #6ba8d8;
    --v-vert: #5fb87a;
    --v-ambre: #d9a441;
    --v-rouge: #e07276;

    background: var(--v-fond);
    padding: 14px;
    border-radius: 8px;
}

.afis-vigie * { box-sizing: border-box; }

.afis-vigie-vide {
    padding: 30px;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 6px;
    text-align: center;
}

/* ---------- Entete ---------- */





.afis-vigie-sites { display: flex; gap: 4px; flex-wrap: wrap; }
.afis-vigie-sites a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid var(--v-bord);
    border-radius: 4px;
    text-decoration: none;
    color: var(--v-texte);
    font-family: Consolas, Monaco, monospace;
    font-weight: 700;
    font-size: 14px;
}
.afis-vigie-sites a.actif { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }

.afis-vigie-nuit {
    min-height: 38px;
    padding: 0 14px;
    background: var(--v-fond2);
    color: var(--v-texte);
    border: 1px solid var(--v-bord);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}


/* ---------- Alertes ---------- */

.afis-vigie-alerte {
    padding: 12px 15px;
    border-radius: 5px;
    margin-bottom: 13px;
    font-size: 15px;
    border-left: 4px solid;
    background: var(--v-fond2);
}
.afis-vigie-alerte.info { border-color: var(--v-accent); }
.afis-vigie-alerte.ok   { border-color: var(--v-vert); }
.afis-vigie-alerte.ko   { border-color: var(--v-rouge); }

.afis-vigie-avert { color: var(--v-ambre); font-weight: 600; font-size: 14px; margin: 8px 0 0; }
.afis-vigie-note  { color: var(--v-doux); font-size: 13px; margin: 7px 0 0; }

.afis-cdm-masque { display: none !important; }

.afis-etiquette {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    color: var(--v-doux);
}
.afis-etiquette.ouverte { border-color: var(--v-accent); color: var(--v-accent); }
.afis-etiquette.close   { border-color: var(--v-ambre); color: var(--v-ambre); }
.afis-etiquette.visee   { border-color: var(--v-vert); color: var(--v-vert); }

/* ---------- Ouverture ---------- */

.afis-vigie-jour {
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 6px;
    padding: 18px;
    margin-bottom: 22px;
}
.afis-vigie-jour-date {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v-doux);
    margin-bottom: 12px;
}
.afis-vigie-ouvrir { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Boutons ---------- */

.afis-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--v-cible);
    padding: 10px 20px;
    background: var(--v-fond);
    color: var(--v-texte);
    border: 1px solid var(--v-bord);
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.afis-btn:hover { border-color: var(--v-accent); }
.afis-btn:disabled { opacity: .45; cursor: not-allowed; }

.afis-btn-primaire { background: var(--v-accent); border-color: var(--v-accent); color: #fff; }
.afis-btn-primaire:hover { filter: brightness(1.08); }

.afis-btn-large { min-height: 50px; padding: 0 30px; font-size: 16px; }
.afis-btn-petit { min-height: 34px; padding: 4px 12px; font-size: 13px; }

.afis-btn-sous { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }

.afis-lien-suppr {
    background: none;
    border: 0;
    color: var(--v-rouge);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 0;
    text-decoration: underline;
}

/* ---------- Champs ---------- */

.afis-champ { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.afis-champ > span { font-weight: 600; color: var(--v-doux); font-size: 13px; }

.afis-vigie input[type="text"],
.afis-vigie input[type="time"],
.afis-vigie input[type="number"],
.afis-vigie select,
.afis-vigie textarea {
    min-height: var(--v-cible);
    padding: 9px 12px;
    background: var(--v-fond);
    color: var(--v-texte);
    border: 1px solid var(--v-bord);
    border-radius: 5px;
    font-size: 16px; /* evite le zoom automatique sur iOS */
    width: 100%;
}
.afis-vigie textarea { min-height: 110px; line-height: 1.5; resize: vertical; }
.afis-vigie input:focus, .afis-vigie select:focus, .afis-vigie textarea:focus {
    outline: 2px solid var(--v-accent);
    outline-offset: 1px;
}

.afis-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.afis-cases { display: flex; flex-direction: column; gap: 2px; margin: 10px 0; }
.afis-case {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--v-cible);
    padding: 4px 6px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 4px;
}
.afis-case:hover { background: var(--v-fond2); }
.afis-case input[type="checkbox"] { width: 22px; height: 22px; margin: 0; flex: none; }

/* ---------- Totaux ---------- */

.afis-vigie-totaux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.afis-vigie-totaux > div {
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 6px;
    padding: 12px 14px;
    text-align: center;
}
.afis-vigie-totaux .lib {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--v-doux);
}
.afis-vigie-totaux strong {
    display: block;
    font-size: 25px;
    font-family: Consolas, Monaco, monospace;
    margin-top: 3px;
}

/* ---------- Panneaux repliables ---------- */

.afis-panneau {
    background: var(--v-fond);
    border: 1px solid var(--v-bord);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.afis-panneau > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 54px;
    padding: 12px 16px;
    background: var(--v-fond2);
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.afis-panneau > summary::-webkit-details-marker { display: none; }
.afis-panneau > summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 400;
    color: var(--v-doux);
    line-height: 1;
}
.afis-panneau[open] > summary::after { content: '\2212'; }

.afis-panneau-compte {
    margin-left: auto;
    margin-right: 10px;
    padding: 2px 10px;
    border-radius: 10px;
    background: var(--v-fond);
    border: 1px solid var(--v-bord);
    font-size: 12px;
    font-weight: 600;
    color: var(--v-doux);
}

.afis-panneau-corps { padding: 16px; }

/* ---------- Presences ---------- */

.afis-presences { display: flex; flex-direction: column; gap: 12px; }

/* Une presence tient sur une ligne : deux champs d'heure et une case ne
   justifient pas un pave qui oblige a faire defiler. */
.afis-presence {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--v-bord);
    border-radius: 8px;
    padding: 10px 14px;
    background: var(--v-fond2);
}
.afis-presence-agent { margin: 0; }
.afis-presence-agent strong {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: 1px;
}
.afis-presence-agent span { display: block; font-size: 12px; color: var(--v-doux); }

.afis-presence-heures {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.afis-presence-heures label { flex: 0 0 auto; }
.afis-presence-heures input[type="time"] { width: 122px; }
.afis-presence-heures label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--v-doux); }

.afis-presence-duree { text-align: left; padding: 0; }
.afis-presence-duree .lib {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--v-doux);
}
.cdm-p-duree { font-family: Consolas, Monaco, monospace; font-size: 19px; font-weight: 700; }

.afis-presence-pied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.afis-j1 {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    background: var(--v-texte);
    color: var(--v-fond);
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
}

.afis-ajout {
    margin-top: 16px;
    padding: 14px;
    background: var(--v-fond2);
    border: 1px dashed var(--v-bord);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.afis-ajout-heures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- RCC ---------- */

.afis-rcc-prereglages { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.afis-rcc-prereglages .afis-btn { flex: 1 1 140px; }

.afis-rcc-piste { width: 100%; height: auto; display: block; margin: 4px 0; }

.afis-rcc-piste .rcc-qfu {
    font-family: Consolas, Monaco, monospace;
    font-size: 21px;
    font-weight: 700;
    fill: var(--v-texte);
}

.rcc-tiers rect {
    fill: #3c434a;
    stroke: var(--v-fond);
    stroke-width: 3;
    cursor: pointer;
    transition: fill .12s;
}
.rcc-tiers text {
    font-family: Consolas, Monaco, monospace;
    font-size: 32px;
    font-weight: 700;
    fill: #fff;
    pointer-events: none;
}
/* Une piste est seche la plupart du temps : le code 6 ne peut pas etre le
   plus sombre de l'echelle, sinon l'ecran est noir en permanence. On part du
   vert pour l'etat nominal et on fonce a mesure que l'etat se degrade. */
.rcc-tiers[data-valeur="6"] rect { fill: #1d7a3c; }
.rcc-tiers[data-valeur="5"] rect { fill: #1f6feb; }
.rcc-tiers[data-valeur="4"] rect { fill: #5b9bd5; }
.rcc-tiers[data-valeur="3"] rect { fill: #d9a441; }
.rcc-tiers[data-valeur="2"] rect { fill: #e07a1f; }
.rcc-tiers[data-valeur="1"] rect { fill: #c0392b; }
.rcc-tiers[data-valeur="0"] rect { fill: #7d1d18; }
.rcc-tiers:active rect { stroke: var(--v-accent); }

.afis-rcc-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}

/* ---------- Journaux ---------- */

.afis-journal { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--v-bord); }
.afis-journal li { padding: 9px 2px; border-bottom: 1px solid var(--v-bord); font-size: 14px; }
.afis-journal .h {
    display: inline-block;
    min-width: 52px;
    font-family: Consolas, Monaco, monospace;
    font-weight: 700;
    color: var(--v-accent);
}
.afis-journal em { color: var(--v-doux); font-size: 12px; font-style: normal; margin-left: 5px; }

/* ---------- Pages recentes ---------- */

.afis-vigie-section { margin-bottom: 26px; }
.afis-vigie-section h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--v-doux);
    border-bottom: 1px solid var(--v-bord);
    padding-bottom: 6px;
    margin: 0 0 12px;
}

.afis-vigie-pages { list-style: none; margin: 0; padding: 0; }
.afis-vigie-pages a {
    display: grid;
    grid-template-columns: 100px 1fr auto auto;
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid var(--v-bord);
    border-radius: 5px;
    margin-bottom: 7px;
    text-decoration: none;
    color: var(--v-texte);
}
.afis-vigie-pages a:hover { border-color: var(--v-accent); background: var(--v-fond2); }
.afis-vigie-pages-date { font-weight: 700; font-size: 14px; }
.afis-vigie-pages-agents { font-family: Consolas, Monaco, monospace; color: var(--v-doux); font-size: 14px; }
.afis-vigie-pages-duree { font-family: Consolas, Monaco, monospace; font-weight: 700; }

/* ---------- Cloture ---------- */

.afis-vigie-cloture {
    margin: 24px 0;
    padding: 18px;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 6px;
}

/* ---------- Indicateur d'enregistrement ---------- */

.afis-cdm-etat {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 10px);
    padding: 11px 22px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transition: opacity .18s, transform .18s;
    pointer-events: none;
    z-index: 9999;
}
.afis-cdm-etat.visible { opacity: 1; transform: translate(-50%, 0); }
.afis-cdm-etat.ok { background: #135e2a; }
.afis-cdm-etat.ko { background: #b32d2e; }

/* ---------- Ecrans etroits ---------- */

@media (max-width: 560px) {
    .afis-vigie { font-size: 15px; }
    .afis-presence-heures { grid-template-columns: 1fr 1fr; }
    .afis-presence-duree { grid-column: 1 / -1; text-align: left; padding-bottom: 0; }
    .afis-vigie-pages a { grid-template-columns: 1fr auto; row-gap: 4px; }
    .afis-vigie-pages-agents { grid-column: 1 / -1; }
}

/* ---------- Pieces jointes en vigie ---------- */

.afis-galerie-boite { margin-top: 12px; }

.afis-galerie { display: flex; flex-wrap: wrap; gap: 10px; }
.afis-galerie:empty { display: none; }

.afis-piece {
    position: relative;
    width: 104px;
    height: 104px;
    border: 1px solid var(--v-bord);
    border-radius: 6px;
    overflow: hidden;
    background: var(--v-fond2);
}
.afis-piece a { display: block; width: 100%; height: 100%; }
.afis-piece img { width: 100%; height: 100%; object-fit: cover; display: block; }

.afis-piece-doc {
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--v-rouge);
    text-decoration: none;
}

.afis-piece-suppr {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(29, 35, 39, .82);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.afis-piece-ajout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--v-cible);
    margin-top: 10px;
    padding: 10px 16px;
    border: 1px dashed var(--v-bord);
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--v-accent);
}
.afis-piece-ajout input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}


/* ==================================================================
   Barre fixe et onglets
   Une vacation dure huit heures : l'agent ne doit jamais chercher ses
   compteurs, ni faire defiler pour atteindre une saisie.
   ================================================================== */

/* Barre et onglets sont colles ensemble, dans un seul conteneur : deux
   elements sticky independants se recouvrent des que le premier depasse la
   hauteur supposee du second, et cette hauteur change avec le contenu. */

/* Ligne du haut : retour, statut, bascule jour/nuit. */



/* La barre d'administration de WordPress se superpose sinon a l'entete. */
body.admin-bar 
@media screen and (max-width: 782px) {
    body.admin-bar }










/* ---------- Blocs ---------- */

.afis-bloc { display: none; margin-bottom: 16px; }
.afis-bloc.visible { display: block; }

.afis-bloc-titre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--v-doux);
}
.afis-bloc-etat {
    padding: 2px 9px;
    border-radius: 10px;
    background: var(--v-fond2);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
.afis-bloc-corps {
    padding: 16px;
    background: var(--v-fond);
    border: 1px solid var(--v-bord);
    border-radius: 10px;
}

/* La piste occupe moins de hauteur : trois bandes, pas trois pavés. */
.afis-rcc-piste { max-height: 110px; }

/* Numeros de QFU aux seuils, comme sur la piste. */
.afis-rcc-piste .rcc-qfu {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 17px;
    fill: var(--v-texte);
}
.afis-rcc-piste .rcc-seuil { fill: #23282d; }
.afis-rcc-piste .rcc-raie { fill: #ffffff; }
.afis-rcc-piste .rcc-axe { fill: #ffffff; }

@media (max-width: 680px) {
                }

/* ---------- Zone de suppression ---------- */

.afis-danger {
    border-color: var(--v-rouge, #b3261e) !important;
    background: var(--v-rouge-doux, #fdecea);
}
.afis-vigie.nuit .afis-danger { background: #2a1517; }

.afis-danger p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.afis-danger-note { font-size: 13px; color: var(--v-doux); }

.afis-danger-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 6px;
}
.afis-danger-form .afis-champ { flex: 1 1 260px; }

.afis-btn-danger {
    background: var(--v-rouge, #b3261e);
    border-color: var(--v-rouge, #b3261e);
    color: #fff;
}
.afis-btn-danger:hover { filter: brightness(1.08); }

/* Une ancre ou un champ vise par le navigateur ne doit pas se retrouver
   sous l'entete collee. */
.afis-vigie { scroll-padding-top: 130px; }
html { scroll-padding-top: 130px; }


/* ==================================================================
   Entete de la page de vigie (prefixe cdmx)
   Les noms ont ete changes volontairement : une feuille de style
   perimee en cache ne peut plus s'y accrocher et recreer les
   recouvrements des versions precedentes.
   ================================================================== */

.cdmx-entete {
    position: sticky;
    top: 0;
    z-index: 40;
    margin: 0 -14px 14px;
    padding: 6px 14px 0;
    background: var(--v-fond);
    border-bottom: 1px solid var(--v-bord);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

body.admin-bar .cdmx-entete { top: 32px; }

@media screen and (max-width: 782px) {
    body.admin-bar .cdmx-entete { top: 46px; }
}

.cdmx-haut {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 4px;
}

.cdmx-retour { color: var(--v-doux); text-decoration: none; font-size: 13px; font-weight: 600; }
.cdmx-retour:hover { color: var(--v-accent); }

.cdmx-outils { display: flex; align-items: center; gap: 8px; }

.cdmx-statut {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--v-fond2);
    color: var(--v-doux);
}
.cdmx-statut.ouverte { background: #e8f1fe; color: #1f6feb; }
.cdmx-statut.close   { background: #fdf3dc; color: #9a6700; }
.cdmx-statut.visee   { background: #e4f5e9; color: #10702c; }
.afis-vigie.nuit .cdmx-statut.ouverte { background: #16283f; color: #58a6ff; }
.afis-vigie.nuit .cdmx-statut.close   { background: #33280f; color: #d9a441; }
.afis-vigie.nuit .cdmx-statut.visee   { background: #14301d; color: #4ec26f; }

/* Une seule ligne : date, compteurs, agents en poste. */
.cdmx-barre {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    padding: 2px 0 8px;
}

.cdmx-date { display: flex; flex-direction: column; gap: 0; }
.cdmx-date .jour { font-size: 18px; font-weight: 700; line-height: 1.15; white-space: nowrap; }
.cdmx-date .site {
    font-size: 11px;
    color: var(--v-doux);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.cdmx-chiffres { display: flex; gap: 22px; }
.cdmx-chiffres .lib {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--v-doux);
    font-weight: 700;
}
.cdmx-chiffres strong {
    display: block;
    font-size: 18px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    line-height: 1.2;
}

.cdmx-poste { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.cdmx-trig {
    display: inline-flex;
    align-items: center;
    height: 27px;
    padding: 0 10px;
    background: #e4f5e9;
    color: #10702c;
    border-radius: 7px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}
.afis-vigie.nuit .cdmx-trig { background: #14301d; color: #4ec26f; }
.cdmx-vide { font-size: 12px; color: var(--v-doux); }

/* Onglets, dans le meme conteneur : aucun recouvrement possible. */
.cdmx-onglets {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding: 0 0 7px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cdmx-onglets::-webkit-scrollbar { display: none; }

.cdmx-onglet {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 15px;
    background: var(--v-fond2);
    color: var(--v-doux);
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.cdmx-onglet:hover { color: var(--v-texte); }
.cdmx-onglet.actif { background: var(--v-accent); color: #fff; }

.cdmx-compte {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, .14);
    font-size: 11px;
    font-weight: 700;
}
.cdmx-onglet.actif .cdmx-compte { background: rgba(255, 255, 255, .25); }

@media (max-width: 680px) {
    .cdmx-barre { gap: 14px; }
    .cdmx-date .jour { font-size: 16px; }
    .cdmx-chiffres { gap: 14px; }
    .cdmx-chiffres strong { font-size: 16px; }
    .cdmx-poste { margin-left: 0; }
}


/* ---------- Densite des onglets ---------- */

/* Sur un ecran large, les champs se rangent en colonnes : on ne fait defiler
   que lorsqu'il n'y a plus de place, pas par principe. */
.afis-bloc-corps .afis-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px 20px;
    align-items: start;
}

.afis-vigie .afis-bloc-corps { padding: 14px 16px; }

.afis-presences { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 720px) {
    .afis-presence { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Compteurs et notifications ---------- */

.afis-choix-so { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.afis-choix-so input[type="number"] { width: 110px; }

.afis-champ small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: var(--v-doux);
    line-height: 1.45;
}

.afis-notifs { align-items: start; }
.afis-notif {
    padding: 12px 14px;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 8px;
}

.afis-conditionnel { display: none; margin-top: 10px; }
.afis-conditionnel.visible { display: flex; }
.afis-conditionnel input { max-width: 110px; }

/* ---------- Coordination ---------- */

.afis-coord { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.afis-coord select { min-width: 110px; }

.afis-conditionnel-val { display: none; flex-direction: column; gap: 4px; }
.afis-conditionnel-val.visible { display: flex; }
.afis-conditionnel-val span { font-size: 12px; color: var(--v-doux); }

/* ---------- Carte d'aerodrome et reperes ---------- */

.afis-adc {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    border: 1px solid var(--v-bord);
    border-radius: 8px;
    overflow: hidden;
    cursor: crosshair;
    touch-action: manipulation;
}
.afis-adc[data-lecture="1"] { cursor: default; }
.afis-adc img { max-width: 100%; height: auto; display: block; }

.afis-adc.vise { box-shadow: 0 0 0 3px var(--v-accent); }

.afis-repere {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    cursor: pointer;
}

.afis-reperes-legende {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    line-height: 1.5;
}
.afis-reperes-legende li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--v-bord);
    font-size: 14px;
}
.afis-reperes-legende li:last-child { border-bottom: 0; }

.afis-repere-num {
    flex: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #c0392b;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}
.afis-repere-texte em { color: var(--v-doux); font-style: normal; font-size: 13px; }
.afis-repere-heure {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--v-doux);
}

.afis-pointer { margin-top: 8px; }

/* ---------- Rognage, dans l'ecran Service ---------- */

#afis-carte-zone { display: none; margin-top: 14px; }
#afis-carte-zone.visible { display: block; }
#afis-carte-toile {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--v-bord);
    border-radius: 8px;
    cursor: crosshair;
    touch-action: none;
}

.cdmx-soleil {
    display: block;
    font-size: 11px;
    color: var(--v-doux);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: .3px;
}

.cdmx-form-pdf { margin: 0; }

/* ---------- Releves corrigeables ---------- */

.afis-journal-modifiable li {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 7px 0;
}

.afis-journal-modifiable input[type="time"].h {
    width: 104px;
    min-height: 36px;
    padding: 2px 8px;
    font-size: 14px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.afis-releve-texte {
    min-height: 36px;
    padding: 2px 10px;
    font-size: 14px;
    max-width: 190px;
}
.afis-releve-large { max-width: 320px; flex: 1 1 200px; }

.afis-releve-x {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--v-bord);
    border-radius: 50%;
    background: transparent;
    color: var(--v-doux);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.afis-releve-x:hover { border-color: var(--v-rouge, #b3261e); color: var(--v-rouge, #b3261e); }

.afis-reperes-liste .afis-repere-num { flex: none; }

.afis-alerte-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.afis-alerte-action form { margin: 0; }

/* ---------- Meteo aeronautique ---------- */

.afis-meteo {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-left: 3px solid var(--v-bord);
    border-radius: 8px;
}
.afis-meteo.local { border-left-color: var(--v-accent); }

.afis-meteo-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.afis-meteo-oaci {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.afis-meteo-etat {
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.afis-meteo-etat.vfr      { background: #e4f5e9; color: #10702c; }
.afis-meteo-etat.marginal { background: #fdf3dc; color: #9a6700; }
.afis-meteo-etat.ifr      { background: #fdecea; color: #b3261e; }

.afis-vigie.nuit .afis-meteo-etat.vfr      { background: #14301d; color: #4ec26f; }
.afis-vigie.nuit .afis-meteo-etat.marginal { background: #33280f; color: #d9a441; }
.afis-vigie.nuit .afis-meteo-etat.ifr      { background: #34191a; color: #e5706a; }

.afis-meteo-age { font-size: 12px; color: var(--v-doux); margin-left: auto; }
.afis-meteo-age.vieux { color: #9a6700; font-weight: 600; }

.afis-meteo-ligne {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 4px;
}
.afis-meteo-ligne .lib {
    flex: none;
    width: 46px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v-doux);
}
.afis-meteo-ligne code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    background: none;
    padding: 0;
    color: var(--v-texte);
}
.afis-meteo-ligne em { font-size: 13px; color: var(--v-doux); }

/* ---------- Notes et consignes ---------- */

.afis-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.afis-note {
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #f0e2b0;
    border-left: 4px solid #d9a441;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.afis-vigie.nuit .afis-note { background: #2a2413; border-color: #4a3f1d; }

.afis-note.consigne {
    background: #eef4fd;
    border-color: #cbdcf5;
    border-left-color: var(--v-accent);
}
.afis-vigie.nuit .afis-note.consigne { background: #16223a; border-color: #29405f; }

.afis-note.a-lire { border-left-width: 6px; box-shadow: 0 2px 10px rgba(31, 111, 235, .18); }

.afis-note-tete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.afis-note-type {
    padding: 2px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .07);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.afis-note.consigne .afis-note-type { background: var(--v-accent); color: #fff; }

.afis-note-titre { font-size: 16px; }

.afis-note-signature {
    margin-left: auto;
    font-size: 12px;
    color: var(--v-doux);
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

.afis-note-corps { font-size: 15px; line-height: 1.6; }
.afis-note-corps p { margin: 0 0 8px; }
.afis-note-corps p:last-child { margin-bottom: 0; }

.afis-note-pieces { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.afis-note-pj {
    display: inline-block;
    padding: 6px 11px;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--v-bord);
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    color: var(--v-texte);
}
.afis-note-pj.image { padding: 0; overflow: hidden; line-height: 0; }
.afis-note-pj.image img { max-height: 120px; max-width: 200px; display: block; }

.afis-note-pied {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.afis-note-lu { font-size: 13px; font-weight: 600; color: #10702c; }
.afis-vigie.nuit .afis-note-lu { color: #4ec26f; }

.afis-note-lecteurs {
    font-size: 12px;
    color: var(--v-doux);
    border-bottom: 1px dotted var(--v-doux);
    cursor: help;
}

.afis-note-retirer { margin-left: auto; font-size: 12px; color: var(--v-doux); }

.afis-puce-note {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.afis-puce-note.consigne { background: var(--v-accent); color: #fff; }

.afis-sous-titre {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--v-doux);
    margin: 22px 0 8px;
}

.afis-meteo.ouverture { border-left-color: #9a6700; }
.afis-meteo-etat.ouv { background: #fdf3dc; color: #9a6700; }
.afis-vigie.nuit .afis-meteo-etat.ouv { background: #33280f; color: #d9a441; }

/* ---------- NOTAM ---------- */

.afis-notam-reserve {
    padding: 11px 14px;
    margin-bottom: 14px;
    background: #fdf3dc;
    border: 1px solid #f0e2b0;
    border-left: 4px solid #9a6700;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #6b4a00;
}
.afis-vigie.nuit .afis-notam-reserve { background: #2a2413; border-color: #4a3f1d; color: #d9a441; }
.afis-notam-reserve a { color: inherit; font-weight: 700; }

.afis-notam {
    padding: 10px 13px;
    margin-bottom: 8px;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 8px;
}

.afis-notam-tete {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.afis-notam-num {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .5px;
}

.afis-notam-classe {
    padding: 1px 8px;
    border-radius: 9px;
    background: var(--v-fond3, rgba(0,0,0,.07));
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--v-doux);
}

.afis-notam-dates {
    margin-left: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--v-doux);
}

.afis-notam-texte code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: none;
    padding: 0;
    color: var(--v-texte);
}

/* ---------- Radar ---------- */

.afis-radar {
    margin: 14px 0;
    padding: 12px;
    background: var(--v-fond2);
    border: 1px solid var(--v-bord);
    border-radius: 10px;
}

.afis-radar-tete {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.afis-radar-titre {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v-doux);
}

.afis-radar-heure {
    margin-left: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--v-doux);
}

.afis-radar img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--v-bord);
}

/* Source complete pour l'Europe : la reserve reste, le ton s'apaise. */
.afis-notam-reserve.complete {
    background: #eef4fd;
    border-color: #cbdcf5;
    border-left-color: #1f6feb;
    color: #14406e;
}
.afis-vigie.nuit .afis-notam-reserve.complete {
    background: #16223a;
    border-color: #29405f;
    color: #7fb3f5;
}


/* ==================================================================
   LA VIGIE AU DOIGT
   Le cahier se tient en service, souvent sur une tablette posee et
   parfois d'une seule main. Tout ce qui suit vise ce geste-la.
   ================================================================== */

/* Aucun champ sous 16px : en deca, Safari agrandit la page au focus
   et ne la remet pas droite. */
@media (max-width: 1024px) {
    .afis-vigie input,
    .afis-vigie select,
    .afis-vigie textarea { font-size: 16px !important; }

    .afis-journal-modifiable input[type="time"].h { width: 118px; }
}

@media (pointer: coarse) {
    .afis-vigie { --v-cible: 48px; }

    .cdmx-onglet { min-height: 46px; padding-inline: 17px; }
    .afis-releve-x { width: 42px; height: 42px; font-size: 20px; }
    .afis-note-accuser { min-height: 46px; }

    /* Un repere se pointe au doigt : il doit se voir et se toucher. */
    .afis-repere { width: 36px; height: 36px; font-size: 15px; }
}

@media (max-width: 760px) {

    .afis-vigie { font-size: 15.5px; }

    /* L'en-tete colle en haut : elle ne doit pas manger l'ecran. */
    .cdmx-entete { margin-inline: -12px; padding-inline: 12px; }
    .cdmx-barre { gap: 12px; padding-bottom: 6px; }
    .cdmx-date .jour { font-size: 15px; }
    .cdmx-chiffres { gap: 12px; }
    .cdmx-chiffres strong { font-size: 15px; }
    .cdmx-soleil { display: none; }

    /* Les onglets defilent, mais sans couper le dernier. */
    .cdmx-onglets { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; }

    .afis-bloc-corps { padding: 14px 12px; }

    /* Une presence tient en pile : trigramme, heures, puis actions. */
    .afis-presence { grid-template-columns: 1fr; gap: 12px; }
    .afis-presence-heures { gap: 10px; }
    .afis-presence-heures label { flex: 1 1 128px; }
    .afis-presence-heures input[type="time"] { width: 100%; }

    /* Les releves horodates : l'heure et le texte sur deux lignes
       plutot qu'une ligne serree ou plus rien n'est touchable. */
    .afis-journal-modifiable li { gap: 8px; }
    .afis-releve-texte { max-width: none; flex: 1 1 100%; }
    .afis-releve-large { flex: 1 1 100%; }

    .afis-grille { grid-template-columns: 1fr; }

    .afis-meteo-ligne { flex-direction: column; gap: 2px; }
    .afis-meteo-ligne .lib { width: auto; }

    .afis-notam-tete { gap: 7px; }
    .afis-notam-dates { margin-left: 0; flex: 1 1 100%; }

    .afis-note-signature { margin-left: 0; flex: 1 1 100%; }
    .afis-note-pj.image img { max-width: 100%; }

    .afis-alerte-action { flex-direction: column; align-items: stretch; }
    .afis-alerte-action .afis-btn { width: 100%; }

    /* La carte d'aerodrome prend toute la largeur disponible. */
    .afis-adc { display: block; width: 100%; }
}

@media (max-width: 420px) {
    .cdmx-poste { margin-left: 0; width: 100%; }
    .cdmx-chiffres { flex: 1 1 100%; }
    .afis-btn-large { width: 100%; max-width: none; }
}

/* Pas de defilement lateral sur la page entiere. */
.afis-vigie { overflow-x: clip; }
.afis-vigie img { max-width: 100%; height: auto; }

/* 2.29.4 : affichage telephone et tablette (cahier de marche seul) */
@media (max-width: 1024px) {
    .afis-vigie :is(small, .lib, .cdmx-statut, .cdmx-soleil, .afis-j1, .afis-note-type, .afis-notam-classe, .site, th) {
        font-size: 12px !important;
    }
}
@media (max-width: 760px) {
    .afis-vigie table:not(.afis-reg-table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (pointer: coarse), (max-width: 760px) {
    .cdmx-retour { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 2.30.0 : services de coordination (plusieurs possibles, saisie libre) */
.afis-duo-coord { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.afis-coord-moment { min-width: 0; }
.afis-coord-services { margin-top: 8px; gap: 8px; }
.afis-vigie .afis-coord-services .afis-coord-avec { font-size: 13px; font-weight: 600; color: var(--v-texte); }
.afis-coord-groupe { display: flex; flex-direction: column; gap: 4px; }
.afis-vigie .afis-coord-groupe-titre { font-size: 12px; color: var(--v-doux); }
.afis-coord-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.afis-coord-puce {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 4px 10px;
    border: 1px solid var(--v-bord); border-radius: 20px;
    background: var(--v-fond); cursor: pointer; max-width: 100%;
}
.afis-coord-puce input { width: 18px; height: 18px; margin: 0; flex: none; }
.afis-vigie .afis-coord-puce span { font-size: 14px; color: var(--v-texte); overflow-wrap: anywhere; }
.afis-coord-puce:has(input:checked) { border-color: var(--v-accent); background: var(--v-fond2); font-weight: 600; }
.afis-coord-autre { display: flex; flex-direction: column; gap: 2px; max-width: 360px; }
.afis-coord-autre input { width: 100%; }

/* 2.30.0 : page saisie a posteriori ou importee */
.afis-vigie-alerte.a-posteriori { border-left: 4px solid var(--v-ambre); }

/* ==================================================================
   2.37.0 : SOUS-ONGLETS (Piste, Journal), a l'image de Cockpit
   Meme dessin que les onglets de Cockpit UI (cku-ong) : barre soulignee,
   onglet actif sombre surmonte d'un trait magenta, liste deroulante sur
   telephone. Couleurs reprises du cahier pour le jour et la nuit.
   ================================================================== */

.afis-vigie { --v-ong-actif: #1d2328; --v-ong-trait: #e040fb; }
.afis-vigie.nuit { --v-ong-actif: #2b333a; }

.afis-bloc[hidden] { display: none !important; }

.afis-ong { margin-bottom: 14px; }
.afis-ong-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--v-ong-actif);
}
.afis-ong-barre [role="tab"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 6px 6px 0 0;
    color: var(--v-doux) !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.afis-ong-barre [role="tab"]:hover { color: var(--v-texte) !important; background: var(--v-fond2); }
.afis-ong-barre [role="tab"]:focus-visible { outline: 2px solid var(--v-ong-trait); outline-offset: -2px; }
.afis-ong-barre [role="tab"].is-on {
    color: #fff !important;
    background: var(--v-ong-actif);
    box-shadow: inset 0 3px 0 var(--v-ong-trait);
}
.afis-ong-b {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--v-fond2);
    color: var(--v-texte);
    border: 1px solid var(--v-bord);
    font: 700 12px/1 ui-monospace, Menlo, Consolas, monospace;
}
.afis-ong-barre .is-on .afis-ong-b { background: #3b444c; border-color: #3b444c; color: #eef1f2; }
.afis-ong-b.is-ok { background: #e4f5e9; border-color: #b7dfc3; color: #10702c; }
.afis-ong-barre .is-on .afis-ong-b.is-ok { background: #14301d; border-color: #14301d; color: #4ec26f; }
.afis-vigie.nuit .afis-ong-b.is-ok { background: #14301d; border-color: #1f4a2c; color: #4ec26f; }

.afis-ong-choix { display: none; margin: 0; }
.afis-ong-choix span { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--v-doux); }
.afis-ong-choix select {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--v-ong-actif);
    border-radius: 6px;
    background: var(--v-ong-actif);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--v-ong-trait);
}
@media (max-width: 640px) {
    .afis-ong-barre { display: none; }
    .afis-ong-choix { display: block; }
}

/* Vent du METAR dans « Piste et vent » */
.afis-vent {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--v-bord);
    border-left: 4px solid var(--v-accent);
    border-radius: 8px;
    background: var(--v-fond2);
}
.afis-vent-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.afis-vent-lib { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--v-doux); }
.afis-vent-val { font: 700 20px/1.2 ui-monospace, Menlo, Consolas, monospace; }
.afis-vent-raf { color: var(--v-ambre); font-size: 16px; }
.afis-vent-var, .afis-vent-age { font-size: 13px; color: var(--v-doux); }
.afis-vent-age.vieux { color: var(--v-ambre); }
.afis-vent-qfu { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.afis-vent-c {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
    flex: 1 1 240px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--v-fond);
    border: 1px solid var(--v-bord);
    font-size: 14px;
}
.afis-vent-c .q { font: 700 15px ui-monospace, Menlo, Consolas, monospace; min-width: 62px; }
.afis-vent-c.arriere { border-color: var(--v-ambre); }
.afis-vent .afis-vigie-note { margin: 6px 0 0; }

/* ==================================================================
   2.37.0 : SCOPE RADAR (onglet Piste > Radar)
   Console sombre dans les deux modes : le radar se lit sur fond noir.
   ================================================================== */

.afis-rs { min-width: 0; container-type: inline-size; }
.afis-rs-repli[hidden] { display: none; }
.afis-rs-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px; }
.afis-rs-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.afis-rs-seg-l { margin-right: 4px; font-size: 13px; font-weight: 700; color: var(--v-doux); }
.afis-rs-b {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid var(--v-bord);
    border-radius: 8px;
    background: var(--v-fond2);
    color: var(--v-texte);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    touch-action: manipulation;
    font-variant-numeric: tabular-nums;
}
.afis-rs-b:hover { border-color: var(--v-accent); }
.afis-rs-b:focus-visible { outline: 2px solid var(--v-ong-trait); outline-offset: 2px; }
.afis-rs-b.is-on { background: var(--v-ong-actif); border-color: var(--v-ong-actif); color: #fff; box-shadow: inset 0 -3px 0 var(--v-ong-trait); }
.afis-rs-trafic { margin-left: auto; }
.afis-rs-trafic.is-on { box-shadow: inset 0 -3px 0 #6fdc8c; }

.afis-rs-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@container (min-width: 900px) { .afis-rs-grille { grid-template-columns: minmax(0, 1fr) 320px; } }

.afis-rs-cadre {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #070b0e;
}
.afis-rs-svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; touch-action: manipulation; }
.afis-rs-hors { fill: #070b0e; }
.afis-rs-ciel { fill: #0d151b; }
.afis-rs-voile { fill: #070b0e; opacity: .35; pointer-events: none; }
.afis-rs-radar image { opacity: .88; }
.afis-rs-cercle { fill: none; stroke: #6c8496; stroke-opacity: .75; }
.afis-rs-cercle.fort { stroke: #a9bccb; stroke-opacity: .9; }
.afis-rs-dist, .afis-rs-qfu, .afis-rs-n, .afis-rs-code {
    font-family: "B612 Mono", ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    paint-order: stroke;
    stroke: #070b0e;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.afis-rs-dist { fill: #c9d6e0; }
.afis-rs-qfu { fill: #ffffff; }
.afis-rs-code { fill: #9fb2c1; }
.afis-rs-n { fill: #e8f3fa; }
.afis-rs-nord { fill: #e8f3fa; }
.afis-rs-axe { stroke: #f5d76e; stroke-opacity: .85; fill: none; }
.afis-rs-piste { stroke: #ffffff; stroke-linecap: butt; }
.afis-rs-arp { fill: #e040fb; }
.afis-rs-anneau { fill: none; stroke: #3b4d5a; }

.afis-rs-heure {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: calc(100% - 16px);
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(7, 11, 14, .82);
    color: #e8f3fa;
    font: 700 15px/1.3 ui-monospace, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.afis-rs-heure.vide { color: #ffb347; }
.afis-rs-attrib {
    margin: 0;
    padding: 4px 10px 6px;
    background: #070b0e;
    color: #8fa3b2;
    font-size: 11.5px;
    line-height: 1.35;
}

/* Commandes de l'animation (CKAff.radarAnim) : meme console sombre. */
.afis-rs-cmd {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: #101a22;
    color: #e8f3fa;
}
.afis-rs-cmd:empty { display: none; }
.afis-rs-cmd .cka-ra { max-width: none; font-size: 15px; }
.afis-rs-cmd .cka-ra select { min-height: 44px; font-size: 16px; }
.afis-rs-cmd .cka-ra-b { width: 52px; height: 48px; }
.afis-rs-cmd .cka-ra-curseur { height: 40px; }
.afis-rs-cmd .cka-ra-heure { font-size: 18px; }
.afis-rs-cmd .cka-ra-leg span { font-size: 11.5px; padding: 2px 0; }
.afis-vigie .afis-rs-note { margin: 0; font-size: 13px; color: #b8c7d2; }
.afis-rs-note[hidden] { display: none; }

@media (max-width: 640px) {
    .afis-rs-outils { gap: 8px; }
    .afis-rs-seg { flex: 1 1 100%; }
    .afis-rs-seg .afis-rs-b { flex: 1 1 0; padding: 0 6px; }
    .afis-rs-seg-l { flex: 1 1 100%; }
    .afis-rs-trafic { margin-left: 0; flex: 1 1 100%; }
    .afis-rs-cadre { border-radius: 10px; }
    .afis-rs-heure { font-size: 12.5px; top: 6px; left: 6px; }
    .afis-vigie .afis-bloc-corps:has(> .afis-rs) { padding: 10px 8px; }
}