/* ==========================================================================
   ORION — thème du site (hors CTA et récepteur d'alerte)
   Posé par-dessus Metronic 7 : ne remplace pas le bundle, le recouvre.
   Chargé par include/composant/header/header_global_css.php.

   Parti pris : un fond clair et lumineux, avec des halos colorés qui dérivent
   lentement, et des surfaces en verre dépoli blanc par-dessus.
   ========================================================================== */

:root {
    /* Marque, relevée sur le logo */
    --or-navy: #06183A;
    --or-navy-clair: #0E2A56;

    /* Les trois étoiles du logo = les trois services, plus le service des routes */
    --or-sp: #D90E15;
    --or-fdo: #0061EF;
    --or-sam: #E0A800;
    --or-rou: #16A34A;

    /* Service courant : reposé par .orion-sp / .orion-fdo / .orion-sam / .orion-rou */
    --or-accent: #0061EF;
    --or-accent-sombre: #0049B4;
    --or-accent-doux: rgba(0, 97, 239, .10);
    --or-accent-texte: #FFFFFF;

    /* Le fond : un gris tres clair, uni */
    --or-fond: #F5F7FA;

    /* Les surfaces. Elles s'appelaient « verre » quand elles etaient
       translucides ; le nom reste pour ne pas toucher aux 30 regles qui s'en
       servent, mais ce sont desormais des surfaces BLANCHES PLEINES, posees sur
       le fond et separees par un filet net. */
    --or-verre: #FFFFFF;
    --or-verre-haut: #FFFFFF;
    --or-verre-bord: #EAEEF4;
    --or-verre-trait: #F0F3F7;
    --or-flou: none;

    /* Encre */
    --or-encre: #0C1B33;
    --or-encre-2: #4A5A75;
    --or-encre-3: #8493AC;

    /* États */
    --or-ok: #0E9F6E;
    --or-attention: #D97706;
    --or-grave: #DC2626;

    /* Mesures. Des rayons plus courts et des ombres discretes : une surface
       plate se tient par son filet, pas par son relief. */
    --or-rayon: 14px;
    --or-rayon-s: 10px;
    --or-ombre: 0 1px 2px rgba(16, 24, 40, .04);
    --or-ombre-flottante: 0 12px 32px -10px rgba(16, 24, 40, .20), 0 2px 6px rgba(16, 24, 40, .05);
    --or-lueur: none;
    --or-aside: 264px;
    --or-barre-h: 68px;   /* hauteur de la barre du haut ; 58 px sous 992 px */
    --or-aside-rail: 76px;
    /* Largeur du contenu : PLUS DE PLAFOND (2026-10-18). Il valait 1560 px, avec le
       conteneur cale a gauche (margin: 0) : sur un ecran de 2560 px, tout le contenu
       tenait dans la moitie gauche et laissait ~700 px vides a droite, sur toutes les
       pages. Le contenu suit desormais la fenetre ; une page qui veut une largeur de
       lecture la pose sur son propre bloc (centre), pas sur le gabarit. */
    --or-largeur: none;
}

body.orion-sp { --or-accent: #D90E15; --or-accent-sombre: #A80A10; --or-accent-doux: rgba(217, 14, 21, .10); }
body.orion-fdo { --or-accent: #0061EF; --or-accent-sombre: #0049B4; --or-accent-doux: rgba(0, 97, 239, .10); }
body.orion-sam { --or-accent: #C07C00; --or-accent-sombre: #945F00; --or-accent-doux: rgba(224, 168, 0, .14); }
body.orion-rou { --or-accent: #16A34A; --or-accent-sombre: #107537; --or-accent-doux: rgba(22, 163, 74, .12); }

/* ==========================================================================
   Le fond
   ========================================================================== */

html { background: var(--or-fond); }

body {
    position: relative;
    background: var(--or-fond);
    color: var(--or-encre);
    font-family: Poppins, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* PLUS DE HALOS NI DE CONSTELLATION.
   Ils existaient pour donner de la couleur a flouter sous le verre : sans verre,
   ils ne feraient que salir un fond qui doit rester net. Le clin d'oeil a la
   constellation d'Orion reste sur la page de connexion, qui garde son fond
   sombre (orion_connexion.css). */

/* Le canevas d'étoiles ne sert plus qu'à la page de connexion, restée sombre */
#or-etoiles { display: none; }

/* ==========================================================================
   Gabarit
   ========================================================================== */

/* Le conteneur d'origine reste dans les 46 pages : on le neutralise, notre menu
   s'en échappe en position fixe */
.aside {
    position: static !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: visible !important;
    background: none !important;
    box-shadow: none !important;
}

.wrapper {
    padding-left: calc(var(--or-aside) + 28px) !important;
    padding-top: 0 !important;
    background: none !important;
    transition: padding-left .22s cubic-bezier(.3, .8, .3, 1);
}

/* La barre du haut est fixe : le contenu descend d'autant, sinon il passerait
   dessous. 72 px de barre, plus la gouttiere. */
.content { padding-top: 96px !important; padding-bottom: 40px !important; background: none !important; }
.page, .d-flex.flex-column.flex-root { background: none !important; }

#kt_content .container-fluid,
#kt_header .container-fluid {
    max-width: var(--or-largeur);
    margin: 0;
    padding-left: 0 !important;
    padding-right: 32px !important;
}

/* LA BARRE DU HAUT EST FIXE : LE CONTENU DOIT COMMENCER SOUS ELLE.
   Cette compensation manquait depuis la refonte. Sans elle, le haut du
   contenu passait sous la barre, et #kt_header — en position STATIQUE, donc
   sans z-index utile — y laissait 82 px invisibles. Metronic ajoutait
   par-dessus 96 px reserves a un sous-en-tete qui n'existe plus ici.

   !important : Metronic remet .wrapper a 0 avec une regle plus forte. Sans
   lui, la regle s'applique mais la valeur calculee reste 0 — mesure.

   La portee est volontairement etroite : le SGO n'a pas de #kt_aside, son
   entete lui est propre, et rien de tout ceci ne doit l'atteindre. */
#kt_aside ~ #kt_wrapper { padding-top: var(--or-barre-h) !important; }

#kt_aside ~ #kt_wrapper > #kt_content { padding-top: 18px !important; }

/* LE TITRE DE PAGE EST RETIRE (demande du 2026-10-11).
   Les regles de mise en forme de #kt_header plus bas restent : elles ne
   dessinent plus rien, mais l'element DOIT RESTER DANS LA PAGE. global.js y
   lit le nom de la page (#kt_header_menu .menu-text) pour l'en-tete du
   telephone, et textContent se lit tres bien sur un element masque. */
#kt_aside ~ #kt_wrapper > #kt_header { display: none !important; }

/* L'en-tête Metronic devient le titre de la page */
#kt_header {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 34px 0 20px !important;
}

#kt_header .menu-nav { padding: 0 !important; }
#kt_header .menu-item { margin: 0 !important; }

/* Metronic sort ce menu de l'écran sous 992 px (panneau coulissant) : ici c'est un
   titre, il doit rester en place à toutes les tailles */
#kt_header .header-menu-wrapper,
#kt_header .header-menu,
#kt_header .header-menu-mobile {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

#kt_header .header-menu .menu-nav { display: block !important; }

#kt_header .menu-text {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -.028em;
    line-height: 1.15;
    white-space: normal;
    padding: 0 !important;
    color: var(--or-encre) !important;
}

/* ==========================================================================
   Les surfaces
   ========================================================================== */

.card.card-custom,
.modal-content,
.or-menu {
    background: var(--or-verre);
    border: 1px solid var(--or-verre-bord);
    box-shadow: var(--or-ombre);
}

/* La barre laterale ne flotte pas : elle est un BORD de la fenetre, pas une
   carte posee dessus. Un filet a droite la separe du contenu, rien de plus. */
.or-aside {
    background: #FFFFFF;
    border: 0;
    border-right: 1px solid var(--or-verre-bord);
    box-shadow: none;
}

.card.card-custom,
.or-aside,
.modal-content { position: relative; }

/* Le reflet sur l'arête haute a été retiré avec le verre : sur une surface
   blanche pleine, un dégradé blanc ne se voit pas — il ne restait qu'un
   artefact du thème précédent. */

/* ==========================================================================
   Menu latéral
   ========================================================================== */

.or-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 96;
    display: flex;
    flex-direction: column;
    width: var(--or-aside);
    /* border-box : sans lui, le rembourrage S'AJOUTE a la largeur et le menu
       depasse de 28 px — la barre du haut, calee sur --or-aside, passe alors
       dessous. */
    box-sizing: border-box;
    padding: 18px 14px;
    border-radius: 0;
    transition: width .22s cubic-bezier(.3, .8, .3, 1);
}

/* ---- Marque ---- */

.or-marque {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 16px;
    text-decoration: none;
    flex: none;
}

.or-marque:hover { text-decoration: none; }

.or-marque img {
    width: 42px;
    height: 42px;
    display: block;
    flex: none;
    filter: drop-shadow(0 6px 16px rgba(15, 35, 75, .22));
    transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}

.or-marque:hover img { transform: scale(1.06) rotate(-4deg); }

.or-marque-texte { display: flex; flex-direction: column; line-height: 1.1; overflow: hidden; }

.or-marque-nom {
    font-size: 1.16rem;
    font-weight: 700;
    letter-spacing: .17em;
    color: var(--or-encre);
    white-space: nowrap;
}

.or-marque-sous {
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or-encre-3);
    white-space: nowrap;
}

/* ---- Bouton de réduction ---- */

.or-reduire {
    position: absolute;
    top: 30px;
    right: -13px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid var(--or-verre-trait);
    color: var(--or-encre-2);
    font-size: .6rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 35, 75, .16);
    transition: transform .2s, color .15s, border-color .15s;
}

.or-reduire:hover { color: var(--or-accent); border-color: var(--or-accent); }
body.or-replie .or-reduire { transform: rotate(180deg); }

/* ---- Sélecteurs (service, affectation) ---- */

.or-service {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid var(--or-verre-trait);
    color: var(--or-encre);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex: none;
    transition: background-color .15s, border-color .15s;
}

.or-service:hover { background: #FFFFFF; border-color: var(--or-accent); color: var(--or-encre); text-decoration: none; }
.or-service > span:nth-child(2) { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

.or-etoile {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--or-accent);
    box-shadow: 0 0 0 3px var(--or-accent-doux);
    flex: none;
}

.or-fleche { font-size: .58rem; opacity: .45; flex: none; }

/* ---- Entrées ---- */

.or-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 -4px;
    padding: 0 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 35, 75, .18) transparent;
}

.or-nav::-webkit-scrollbar { width: 5px; }
.or-nav::-webkit-scrollbar-thumb { background: rgba(15, 35, 75, .16); border-radius: 3px; }

.or-titre-section {
    padding: 14px 12px 6px;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--or-encre-3);
    white-space: nowrap;
}

/* AUCUN SOULIGNEMENT. Le menu s'appuyait sur Metronic pour l'enlever : une
   dependance invisible, qui saute des que la page ne charge pas tout le bundle.
   On le pose ici, ou il se lit. */
.or-lien,
.or-marque,
.or-sous a,
.or-cta,
.or-action,
.or-avis,
.or-chercher,
.rch_trouve,
.tb_lien { text-decoration: none; }

.or-lien:hover,
.or-sous a:hover,
.or-cta:hover,
.or-avis:hover { text-decoration: none; }

.or-lien {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 42px;
    padding: 0 12px;
    margin-bottom: 3px;
    border-radius: 10px;
    color: var(--or-encre-2);
    font-size: .845rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .14s, color .14s;
}

.or-lien:hover { background: #FFFFFF; color: var(--or-encre); text-decoration: none; }

.or-lien > i:first-child {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex: none;
    opacity: .75;
}

.or-lien > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* UNE PASTILLE PLEINE, pas une teinte. Sur un menu d'une vingtaine d'entrees,
   un fond pale se cherche ; un aplat a l'accent se trouve sans regarder. */
.or-lien.est-actif {
    background: var(--or-accent);
    color: var(--or-accent-texte);
    font-weight: 600;
}

.or-lien.est-actif > i:first-child { color: var(--or-accent-texte) !important; opacity: 1; }
.or-lien.est-actif:hover { background: var(--or-accent-sombre); color: var(--or-accent-texte); }

/* Le lisere de gauche a ete retire : la pastille pleine dit deja ou l'on est,
   et les deux ensemble faisaient bavard. */

/* ---- Groupes dépliants ---- */

.or-groupe > .or-lien .or-fleche { transition: transform .2s; }
.or-groupe.est-ouvert > .or-lien .or-fleche { transform: rotate(180deg); }
.or-groupe.est-ouvert > .or-lien { color: var(--or-encre); }

.or-sous {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s cubic-bezier(.3, .8, .3, 1);
}

.or-groupe.est-ouvert > .or-sous { grid-template-rows: 1fr; }
.or-sous > div { overflow: hidden; }

.or-sous a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 38px;
    padding: 0 12px 0 22px;
    margin: 2px 0 0 18px;
    border-radius: 10px;
    color: var(--or-encre-2);
    font-size: .81rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.or-sous a::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--or-verre-trait);
}

.or-sous a:first-child::before { top: 8px; }
.or-sous a:last-child::before { bottom: 8px; }

.or-sous a::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: rgba(15, 35, 75, .16);
    transition: background-color .14s, box-shadow .14s;
}

.or-sous a:hover { background: #FFFFFF; color: var(--or-encre); }
.or-sous a.est-actif { background: var(--or-accent-doux); color: var(--or-accent-sombre); font-weight: 600; }
.or-sous a.est-actif::after { background: var(--or-accent); box-shadow: 0 0 0 3px var(--or-accent-doux); }
.or-sous a > i { width: 15px; text-align: center; font-size: .78rem; opacity: .6; flex: none; }
.or-sous hr { margin: 6px 12px 6px 30px; border: 0; border-top: 1px solid var(--or-verre-trait); }

/* ---- Pied du menu ---- */

.or-aside-pied {
    flex: none;
    padding-top: 12px;
    margin-top: 10px;
    border-top: 1px solid var(--or-verre-trait);
}

/* LE SGO EST UNE CARTE, PAS UN BOUTON DE PLUS.
   En bas du menu, sombre, avec le logo du service : elle se distingue des
   entrees de navigation au lieu de se confondre avec elles, et elle dit ou l'on
   va — une autre application, dans un autre onglet. */
.or-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 4px;
    border-radius: 12px;
    background: var(--or-navy);
    color: #FFFFFF;
    white-space: nowrap;
    transition: background-color .15s;
}
.or-cta:hover { background: var(--or-navy-clair); color: #FFFFFF; }

/* Une icône plutôt que le logo : le logo du service, réduit à 22 px et posé
   sur fond sombre, ne se lisait plus — il faisait tache au lieu de signer. */
.or-cta i {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF !important;
    font-size: 14px;
}

.or-cta span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
}
/* La seconde ligne, ecrite par la CSS : le balisage n'a qu'un libelle a porter */
.or-cta span::after {
    content: "Syst\00E8me de gestion des op\00E9rations";
    display: block;
    color: rgba(255, 255, 255, .55);
    font-size: .72rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
}

.or-cta:hover { filter: brightness(1.1); box-shadow: 0 14px 30px -12px var(--or-accent); color: var(--or-accent-texte); text-decoration: none; }

.or-compte {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 52px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--or-encre);
}

.or-compte-nom { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; flex: 1 1 auto; }
.or-compte-nom b { font-size: .8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-compte-nom small { font-size: .66rem; color: var(--or-encre-3); white-space: nowrap; }

.or-avatar {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: #FFFFFF;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--or-verre-trait);
    flex: none;
}

.or-actions { display: flex; align-items: center; gap: 4px; padding: 0 6px 2px; }

.or-action {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 38px;
    border-radius: 10px;
    color: var(--or-encre-3);
    font-size: .92rem;
    cursor: pointer;
    transition: background-color .14s, color .14s;
}

.or-action:hover { background: #FFFFFF; color: var(--or-encre); text-decoration: none; }
.or-action.est-actif { background: var(--or-accent-doux); color: var(--or-accent-sombre); }
.or-quitter:hover { background: rgba(220, 38, 38, .10); color: var(--or-grave); }

/* ---- Menus surgissants ---- */

.or-tiroir { position: relative; }

.or-menu {
    position: absolute;
    bottom: 0;
    left: calc(100% + 14px);
    min-width: 258px;
    padding: 9px;
    border-radius: var(--or-rayon);
    background: #FFFFFF;
    box-shadow: var(--or-ombre-flottante), var(--or-lueur);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 3;
    max-height: min(420px, calc(100vh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.or-menu::-webkit-scrollbar { width: 6px; }
.or-menu::-webkit-scrollbar-thumb { background: rgba(15, 35, 75, .16); border-radius: 3px; }

.or-tiroir.est-ouvert > .or-menu { opacity: 1; visibility: visible; transform: translateX(0); }

.or-menu.vers-bas {
    top: calc(100% + 8px);
    bottom: auto;
    left: 0;
    right: 0;
    min-width: 0;
    transform: translateY(-8px);
}

.or-tiroir.est-ouvert > .or-menu.vers-bas { transform: translateY(0); }

body.or-replie .or-menu.vers-bas {
    top: 0;
    left: calc(100% + 14px);
    right: auto;
    min-width: 258px;
    transform: translateX(-8px);
}

body.or-replie .or-tiroir.est-ouvert > .or-menu.vers-bas { transform: translateX(0); }

.or-menu-titre {
    padding: 9px 11px 6px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or-encre-3);
}

.or-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px;
    border-radius: var(--or-rayon-s);
    color: var(--or-encre-2);
    font-size: .865rem;
    font-weight: 500;
    text-decoration: none;
}

.or-menu a:hover { background: rgba(15, 35, 75, .05); color: var(--or-encre); }
.or-menu a.est-actif { background: var(--or-accent-doux); color: var(--or-accent-sombre); font-weight: 600; }
.or-menu a i { width: 18px; text-align: center; font-size: .85rem; color: var(--or-encre-3); }
.or-menu a:hover i, .or-menu a.est-actif i { color: var(--or-accent); }
.or-menu hr { margin: 7px 5px; border: 0; border-top: 1px solid var(--or-verre-trait); }

.or-pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.or-pastille-sp { background: var(--or-sp); }
.or-pastille-fdo { background: var(--or-fdo); }
.or-pastille-sam { background: var(--or-sam); }
.or-pastille-rou { background: var(--or-rou); }

.or-super {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--or-sp);
    color: #FFFFFF;
    font-size: .6rem;
    font-weight: 700;
}

.or-cache {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.or-maintenance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(217, 119, 6, .09);
    border: 1px solid rgba(217, 119, 6, .22);
    color: #8A4B00;
    font-size: .78rem;
    line-height: 1.45;
    font-weight: 500;
}

.or-maintenance i { color: var(--or-attention); margin-top: 2px; flex: none; }

/* Une information, pas un avertissement : la gestion du service est passée aux bureaux */
.or-note-bureaux { margin: 6px 0 10px; background: rgba(0, 97, 239, .07); border-color: rgba(0, 97, 239, .2); color: #1D4F9F; }
.or-note-bureaux i { color: #0061EF; }
body.or-replie .or-note-bureaux span { display: none; }

/* ---- Mode rail ---- */

body.or-replie { --or-aside: var(--or-aside-rail); }

body.or-replie .or-marque-texte,
body.or-replie .or-titre-section,
body.or-replie .or-compte-nom,
body.or-replie .or-lien > span,
body.or-replie .or-lien > .or-fleche,
body.or-replie .or-service > span:nth-child(2),
body.or-replie .or-service > .or-fleche,
body.or-replie .or-cta span,
body.or-replie .or-maintenance span { display: none; }

body.or-replie .or-aside { padding: 16px 10px; align-items: center; }
body.or-replie .or-marque { padding: 4px 0 16px; justify-content: center; }
body.or-replie .or-lien,
body.or-replie .or-service,
body.or-replie .or-compte { justify-content: center; padding: 0; gap: 0; }
body.or-replie .or-actions { flex-direction: column; gap: 2px; padding: 4px 0 0; }
body.or-replie .or-action { width: 100%; flex: none; }
body.or-replie .or-service { width: 44px; }
body.or-replie .or-cta { padding: 0; }
body.or-replie .or-nav { width: 100%; }

body.or-replie .or-sous {
    position: absolute;
    left: calc(100% + 14px);
    top: 0;
    display: block;
    min-width: 258px;
    padding: 9px;
    background: #FFFFFF;
    backdrop-filter: var(--or-flou);
    -webkit-backdrop-filter: var(--or-flou);
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    box-shadow: var(--or-ombre-flottante);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 3;
}

body.or-replie .or-groupe:hover > .or-sous,
body.or-replie .or-groupe.est-ouvert > .or-sous { opacity: 1; visibility: visible; transform: translateX(0); }
body.or-replie .or-sous > div { overflow: visible; }

body.or-replie .or-sous a {
    margin: 0;
    padding: 10px 11px;
    height: auto;
    font-size: .865rem;
    color: var(--or-encre-2);
}

body.or-replie .or-sous a::before,
body.or-replie .or-sous a::after { display: none; }

/* ---- Tiroir sur téléphone ---- */

.or-ouvrir {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 95;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #FFFFFF;
    backdrop-filter: var(--or-flou);
    -webkit-backdrop-filter: var(--or-flou);
    border: 1px solid var(--or-verre-trait);
    color: var(--or-encre);
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: var(--or-ombre-flottante);
}

.or-voile-menu { display: none; }

/* ==========================================================================
   Composants Metronic
   Le fond est clair : Metronic est chez lui, on ne reprend que ce qui doit
   s'accorder au verre et à la couleur du service.
   ========================================================================== */

.text-primary { color: var(--or-accent) !important; }
.text-success { color: var(--or-ok) !important; }
.text-warning { color: var(--or-attention) !important; }
.text-danger { color: var(--or-grave) !important; }
.text-muted { color: var(--or-encre-3) !important; }
.text-dark, .text-dark-50, .text-dark-65, .text-dark-75, .text-dark-95 { color: var(--or-encre) !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--or-encre); }
a { color: var(--or-accent); }
a:hover { color: var(--or-accent-sombre); }
hr { border-top-color: var(--or-verre-trait); }

/* Les fonds blancs opaques laissent place au verre */
.bg-white { background-color: transparent !important; }

/* ---- Cartes ---- */

.card.card-custom { border-radius: var(--or-rayon); }

.card.card-custom > .card-header {
    border-bottom: 0;
    padding: 24px 28px 0;
    min-height: 0;
    background: none;
}

.card.card-custom > .card-header .card-title { margin: 0; }

.card.card-custom > .card-header .card-label {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--or-encre);
}

.card.card-custom > .card-header .card-icon i { color: var(--or-accent) !important; }
.card.card-custom > .card-body { padding: 24px 28px 28px; }
.card.card-custom > .card-footer { background: none; border-top: 1px solid var(--or-verre-trait); }
.card.card-custom.gutter-b { margin-bottom: 26px; }

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

.btn {
    border-radius: var(--or-rayon-s);
    font-weight: 600;
    padding: 10px 18px;
    transition: filter .15s, background-color .15s, border-color .15s, box-shadow .15s;
}

.btn.font-weight-bold, .btn.font-weight-bolder { font-weight: 600 !important; }
.btn.btn-sm { padding: 7px 14px; }

.btn-primary, .btn-danger, .btn-warning, .btn-success, .btn-info, .btn-dark {
    background: var(--or-accent);
    border-color: var(--or-accent);
    color: var(--or-accent-texte);
    box-shadow: 0 8px 20px -10px var(--or-accent);
}

.btn-primary:hover, .btn-danger:hover, .btn-warning:hover, .btn-success:hover, .btn-info:hover, .btn-dark:hover,
.btn-primary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled):active {
    background: var(--or-accent-sombre);
    border-color: var(--or-accent-sombre);
    color: var(--or-accent-texte);
    box-shadow: 0 12px 26px -10px var(--or-accent);
}

.btn-light, .btn-secondary, .btn-outline-secondary, .btn-clean {
    background: #FFFFFF;
    border: 1px solid var(--or-verre-trait);
    color: var(--or-encre-2);
    box-shadow: none;
}

.btn-light:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-clean:hover {
    background: #FFFFFF;
    border-color: rgba(15, 35, 75, .14);
    color: var(--or-encre);
}

.btn.btn-icon { padding: 0; }
.btn-hover-text-primary:hover { color: var(--or-accent) !important; }

/* ---- Formulaires ---- */

.form-control, .custom-select {
    height: calc(1.5em + 1.4rem + 2px);
    background-color: #FFFFFF;
    border: 1px solid var(--or-verre-trait);
    border-radius: var(--or-rayon-s);
    color: var(--or-encre);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}

textarea.form-control { height: auto; }

.form-control:focus, .custom-select:focus {
    background-color: #FFFFFF;
    border-color: var(--or-accent);
    box-shadow: 0 0 0 3.5px var(--or-accent-doux);
    color: var(--or-encre);
}

.form-control::placeholder { color: var(--or-encre-3); }

label, .col-form-label { font-size: .8rem; font-weight: 600; color: var(--or-encre-2); margin-bottom: 7px; }

.input-group-text {
    background: #FFFFFF;
    border: 1px solid var(--or-verre-trait);
    color: var(--or-encre-2);
}

.switch input:checked ~ span:before { background-color: var(--or-accent) !important; }

/* ---- Tableaux ---- */

.table thead th {
    border: 0;
    border-bottom: 1px solid var(--or-verre-trait);
    padding: 12px 16px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--or-encre-3);
    white-space: nowrap;
    background: none;
}

.table tbody td, .table td {
    border-top: 1px solid var(--or-verre-trait);
    padding: 15px 16px;
    vertical-align: middle;
    color: var(--or-encre-2);
    font-size: .875rem;
    background: none;
}

.table tbody tr:hover td { background: #FFFFFF; }
.table tbody td b, .table tbody td strong { color: var(--or-encre); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--or-verre-trait); }

/* ---- Étiquettes ---- */

.label.label-inline, .badge { border-radius: 6px; font-weight: 600; }

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

.alert.alert-custom {
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    box-shadow: var(--or-lueur), 0 0 0 1px var(--or-verre-trait);
    padding: 16px 20px;
    background: var(--or-verre);
    backdrop-filter: var(--or-flou);
    -webkit-backdrop-filter: var(--or-flou);
    color: var(--or-encre-2);
}

.alert.alert-custom .alert-text { color: var(--or-encre-2); }
.alert.alert-custom .alert-text b { color: var(--or-encre); }
.alert.alert-custom .alert-icon i { color: var(--or-accent); }

.alert-light-primary { background: var(--or-accent-doux) !important; border-color: color-mix(in srgb, var(--or-accent) 22%, transparent) !important; }
.alert-light-warning, .alert-warning { background: rgba(217, 119, 6, .09) !important; border-color: rgba(217, 119, 6, .22) !important; }
.alert-light-danger, .alert-danger { background: rgba(220, 38, 38, .08) !important; border-color: rgba(220, 38, 38, .2) !important; }
.alert-light-success, .alert-success { background: rgba(14, 159, 110, .08) !important; border-color: rgba(14, 159, 110, .2) !important; }
.alert-warning .alert-icon i, .alert-light-warning .alert-icon i { color: var(--or-attention); }
.alert-danger .alert-icon i, .alert-light-danger .alert-icon i { color: var(--or-grave); }
.alert-success .alert-icon i, .alert-light-success .alert-icon i { color: var(--or-ok); }

/* ---- Fenêtres modales ---- */

.modal-content { border-radius: var(--or-rayon); background: #FFFFFF; }
.modal-backdrop.show { opacity: .35; }
.modal-header, .modal-footer { border-color: var(--or-verre-trait); }
.modal-title { color: var(--or-encre); font-weight: 600; }

/* ---- Menus déroulants de Metronic ---- */

.dropdown-menu {
    background: #FFFFFF;
    backdrop-filter: var(--or-flou);
    -webkit-backdrop-filter: var(--or-flou);
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    box-shadow: var(--or-ombre-flottante);
}

.dropdown-divider { border-color: var(--or-verre-trait); }

/* ---- Onglets et pagination ---- */

.nav-tabs { border-bottom-color: var(--or-verre-trait); }
.nav-tabs .nav-link { color: var(--or-encre-3); border: 0; }
.nav-tabs .nav-link:hover { color: var(--or-encre); }
.nav-tabs .nav-link.active { color: var(--or-encre); background: none; border-bottom: 2px solid var(--or-accent); }

.page-link { background: #FFFFFF; border-color: var(--or-verre-trait); color: var(--or-encre-2); }
.page-link:hover { background: #FFFFFF; color: var(--or-encre); }
.page-item.active .page-link { background: var(--or-accent); border-color: var(--or-accent); color: var(--or-accent-texte); }

/* ---- Divers ---- */

.separator { border-color: var(--or-verre-trait) !important; }
.progress { background-color: rgba(15, 35, 75, .07); }
.progress-bar { background-color: var(--or-accent); }

#kt_footer {
    background: none !important;
    border-top: 1px solid var(--or-verre-trait);
    color: var(--or-encre-3);
    font-size: .78rem;
}

#kt_scrolltop {
    background: #FFFFFF;
    backdrop-filter: var(--or-flou);
    -webkit-backdrop-filter: var(--or-flou);
    border: 1px solid var(--or-verre-trait);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15, 35, 75, .18); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 35, 75, .3); background-clip: content-box; }

/* ==========================================================================
   Tableaux de bord (panel.php)
   ========================================================================== */

.or-chiffre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.or-chiffre-valeur {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--or-encre);
}

.or-chiffre-valeur small { font-size: 1.1rem; font-weight: 600; color: var(--or-encre-3); }
.or-chiffre-nom { margin-top: 6px; font-size: .81rem; font-weight: 500; color: var(--or-encre-3); }
.or-chiffre-icone { font-size: 1.7rem; color: var(--or-accent); opacity: .22; }

.or-chiffre-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--or-verre-trait);
    font-size: .78rem;
    color: var(--or-encre-3);
}

.or-chiffre-detail b { color: var(--or-encre); }

/* ---- Carte d'un service ---- */

.or-service-carte { --or-teinte: var(--or-accent); }
.or-service-carte.or-sp { --or-teinte: var(--or-sp); }
.or-service-carte.or-fdo { --or-teinte: var(--or-fdo); }
.or-service-carte.or-sam { --or-teinte: var(--or-sam); }
.or-service-carte.or-rou { --or-teinte: var(--or-rou); }

.or-service-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }

.or-service-tete i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--or-teinte) 12%, transparent);
    color: var(--or-teinte);
    font-size: 1rem;
    flex: none;
}

.or-service-tete h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--or-encre); }
.or-service-chiffres { display: flex; gap: 32px; }

.or-jauge {
    height: 7px;
    margin: 18px 0 16px;
    border-radius: 4px;
    background: rgba(15, 35, 75, .07);
    overflow: hidden;
}

.or-jauge > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--or-teinte);
    transition: width .4s cubic-bezier(.3, .8, .3, 1);
}

.or-service-statuts { display: flex; flex-wrap: wrap; gap: 6px; }

.or-statut {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(15, 35, 75, .05);
    font-size: .73rem;
    font-weight: 500;
    color: var(--or-encre-2);
}

.or-statut b { font-weight: 700; color: var(--or-encre); }
.or-statut-di { background: rgba(14, 159, 110, .11); color: var(--or-ok); }
.or-statut-di b { color: var(--or-ok); }
.or-statut-en { background: rgba(220, 38, 38, .10); color: var(--or-grave); }
.or-statut-en b { color: var(--or-grave); }

/* ---- Effectifs ---- */

.or-bloc-service { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--or-verre-trait); }
.or-bloc-service:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }

.or-bloc-tete {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
    font-size: .92rem;
    color: var(--or-encre);
}

.or-bloc-total { margin-left: auto; font-size: .78rem; font-weight: 500; color: var(--or-encre-3); }
.or-repartition { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }

.or-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: .73rem;
    font-weight: 500;
}

.or-etat b { font-weight: 700; }
.or-grades { display: flex; flex-direction: column; gap: 7px; }

.or-grade, .or-profil {
    display: grid;
    grid-template-columns: minmax(0, 150px) 1fr 38px;
    align-items: center;
    gap: 12px;
}

.or-grade-nom, .or-profil-nom {
    font-size: .8rem;
    color: var(--or-encre-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.or-profil-barre { height: 6px; border-radius: 3px; background: rgba(15, 35, 75, .07); overflow: hidden; }

.or-profil-barre > span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--or-accent);
    opacity: .8;
}

.or-profil-nombre { font-size: .8rem; font-weight: 700; color: var(--or-encre); text-align: right; }

/* ---- État du système ---- */

.or-acces { display: flex; flex-direction: column; gap: 2px; }
.or-acces-ligne { display: flex; align-items: center; gap: 11px; padding: 9px 0; }
.or-acces-nom { font-size: .855rem; font-weight: 500; color: var(--or-encre-2); }
.or-acces-etat { margin-left: auto; font-size: .78rem; font-weight: 600; color: var(--or-encre-3); }

.or-point { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.or-point-ok { background: var(--or-ok); box-shadow: 0 0 0 3px rgba(14, 159, 110, .15); }
.or-point-attention { background: var(--or-attention); box-shadow: 0 0 0 3px rgba(217, 119, 6, .15); }
.or-point-ko { background: var(--or-grave); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }

/* ---- Répartition des profils ---- */

.or-familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }

.or-famille-tete {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--or-verre-trait);
    font-size: .855rem;
    font-weight: 600;
    color: var(--or-encre);
}

.or-famille-tete i { color: var(--or-accent); font-size: .9rem; }
.or-famille-tete b { margin-left: auto; font-size: 1.05rem; }
.or-famille .or-profil { grid-template-columns: minmax(0, 1fr) 70px 32px; margin-bottom: 7px; }

/* ---- Rien à montrer ---- */

.or-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 30px 16px;
    border-radius: var(--or-rayon-s);
    background: rgba(15, 35, 75, .035);
    border: 1px dashed rgba(15, 35, 75, .12);
    color: var(--or-encre-3);
    font-size: .855rem;
}

.or-vide i { font-size: 1rem; }

/* ==========================================================================
   Tablette et téléphone
   ========================================================================== */

@media (max-width: 1399.98px) {
    :root { --or-aside: 240px; }
    #kt_content .container-fluid,
    #kt_header .container-fluid { padding-right: 24px !important; }
}

@media (max-width: 991.98px) {

    #kt_header_mobile { display: none !important; }
    body.header-mobile-fixed { padding-top: 0 !important; }

    .wrapper { padding-left: 0 !important; }
    #kt_content .container-fluid,
    #kt_header .container-fluid { padding-left: 18px !important; padding-right: 18px !important; }
    #kt_header { padding: 70px 0 14px !important; }
    #kt_header .menu-text { font-size: 1.35rem !important; }

    .or-ouvrir { display: flex; }

    .or-aside {
        top: 0; left: 0; bottom: 0;
        width: 282px;
        border-radius: 0;
        border: 0;
        background: #FFFFFF;
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.3, .8, .3, 1);
        z-index: 99;
    }

    body.or-menu-ouvert .or-aside { transform: translateX(0); }
    body.or-menu-ouvert .or-voile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 98;
        background: rgba(15, 35, 75, .32);
        backdrop-filter: none;
    }

    /* Sur téléphone, le rail n'a pas de sens */
    body.or-replie { --or-aside: 282px; }
    .or-reduire { display: none; }
    body.or-replie .or-marque-texte,
    body.or-replie .or-titre-section,
    body.or-replie .or-compte-nom,
    body.or-replie .or-lien > span,
    body.or-replie .or-lien > .or-fleche,
    body.or-replie .or-service > span:nth-child(2),
    body.or-replie .or-service > .or-fleche,
    body.or-replie .or-cta span { display: revert; }
    body.or-replie .or-aside { padding: 16px 12px; align-items: stretch; }
    body.or-replie .or-lien,
    body.or-replie .or-service,
    body.or-replie .or-compte { justify-content: flex-start; padding: 0 12px; gap: 12px; }
    body.or-replie .or-service { width: 100%; }
    body.or-replie .or-actions { flex-direction: row; gap: 4px; padding: 0 6px 2px; }
    body.or-replie .or-action { flex: 1 1 0; }
    body.or-replie .or-sous { position: static; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; display: grid; backdrop-filter: none; }
    body.or-replie .or-sous a { margin: 2px 0 0 18px; padding: 0 12px 0 22px; height: 38px; }
    body.or-replie .or-sous a::before, body.or-replie .or-sous a::after { display: block; }

    .or-menu { left: 0; bottom: calc(100% + 10px); transform: translateY(8px); max-width: calc(100vw - 40px); }
    .or-tiroir.est-ouvert > .or-menu { transform: translateY(0); }
    body.or-replie .or-menu.vers-bas,
    .or-menu.vers-bas { top: calc(100% + 8px); bottom: auto; left: 0; right: 0; min-width: 0; transform: translateY(-8px); }
    body.or-replie .or-tiroir.est-ouvert > .or-menu.vers-bas,
    .or-tiroir.est-ouvert > .or-menu.vers-bas { transform: translateY(0); }
}

@media (max-width: 575.98px) {
    #kt_content .container-fluid,
    #kt_header .container-fluid { padding-left: 14px !important; padding-right: 14px !important; }
    .card.card-custom > .card-header { padding: 18px 18px 0; }
    .card.card-custom > .card-body { padding: 18px; }
    .or-service-chiffres { gap: 20px; }
    .or-grade, .or-profil { grid-template-columns: minmax(0, 110px) 1fr 32px; gap: 9px; }
}

/* ==========================================================================
   Mouvement réduit : le ciel se fige
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .or-jauge > span, .or-profil-barre > span { transition: none; }
}

/* Impression : le verre et les halos n'ont pas de sens sur papier */
@media print {
    body::before, body::after, .or-aside, .or-ouvrir { display: none !important; }
    body { background: #FFFFFF; }
    .wrapper { padding-left: 0 !important; }
    .card.card-custom { background: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: none; backdrop-filter: none; }
}

/* Un compte dans le menu, à droite du libellé : les non-lus de la messagerie.
   À ne pas confondre avec .or-pastille, qui est un voyant rond de 9 px. */
.or-nombre {
    flex: none;
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--or-grave, #F64E60);
    color: #FFFFFF;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}
.or-lien.est-actif .or-nombre { background: #FFFFFF; color: var(--or-grave, #F64E60); }


/* ==========================================================================
   La barre du haut (include/composant/header/header_barre.php)
   ========================================================================== */

/* Elle non plus ne flotte pas : elle ferme le haut de la fenetre, dans le
   prolongement de la barre laterale, et se separe du contenu par un filet. */
.or-barre {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--or-aside);
    z-index: 95;
    display: flex;
    align-items: center;
    height: var(--or-barre-h);
    padding: 0 24px 0 28px;
    border: 0;
    border-bottom: 1px solid var(--or-verre-bord);
    border-radius: 0;
    background: #FFFFFF;
    transition: left .22s cubic-bezier(.3, .8, .3, 1);
}

/* Le menu en rail : la barre suit */
body.or-rail .or-barre { left: var(--or-aside-rail); }

/* ---- La recherche ---- */

.or-chercher {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 680px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--or-rayon-s);
    background: #F4F6FA;
}
.or-chercher > i { flex: none; margin-right: 10px; color: var(--or-encre-3) !important; font-size: 13px; }

.or-chercher input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: var(--or-encre);
    font-size: .92rem;
}
.or-chercher input::placeholder { color: var(--or-encre-3); }
.or-chercher input:focus { outline: none; }

.or-chercher kbd {
    flex: none;
    margin-left: 10px;
    padding: 2px 7px;
    border: 1px solid var(--or-verre-bord);
    border-radius: 5px;
    background: #FFFFFF;
    color: var(--or-encre-3);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
}

.or-barre-droite { display: flex; align-items: center; margin-left: auto; }
.or-barre-droite > * { margin-left: 8px; }

/* ---- La cloche ---- */

.or-cloche {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--or-rayon-s);
    background: #F4F6FA;
    color: var(--or-encre-2);
    cursor: pointer;
}
.or-cloche:hover { background: var(--or-accent-doux); color: var(--or-accent); }
.or-cloche i { margin: 0 !important; font-size: 15px; color: inherit !important; }

/* Le compte des choses a traiter. Un chiffre, pas un point : savoir QUE quelque
   chose attend sans savoir COMBIEN n'aide pas a decider si on s'y met. */
.or-cloche em {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid #FFFFFF;
    border-radius: 9px;
    background: var(--or-grave);
    color: #FFFFFF;
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
}
.or-cloche.a-traiter { color: var(--or-encre); }

/* ---- Les conditions en jeu ---- */

.or-ambiance {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 14px 0 12px;
    border-radius: var(--or-rayon-s);
    background: #F4F6FA;
}
.or-ambiance > i { margin-right: 10px; color: var(--or-accent) !important; font-size: 17px; }
.or-ambiance b { display: block; color: var(--or-encre); font-size: .85rem; font-weight: 600; line-height: 1.15; }
.or-ambiance small { display: block; color: var(--or-encre-3); font-size: .74rem; }

/* ---- Le compte ---- */

.or-chip {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 10px 0 5px;
    border: 0;
    border-radius: var(--or-rayon-s);
    background: none;
    color: var(--or-encre);
    cursor: pointer;
}
.or-chip:hover { background: #F4F6FA; }

.or-chip-avatar {
    flex: none;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 50%;
    background: #EEF1F6 center/cover no-repeat;
}
.or-chip-texte { text-align: left; }
.or-chip-texte b { display: block; color: var(--or-encre); font-size: .87rem; font-weight: 600; line-height: 1.2; }
.or-chip-texte small { display: block; color: var(--or-encre-3); font-size: .75rem; }
.or-chip > i { margin-left: 10px; color: var(--or-encre-3) !important; font-size: 10px; }

/* ---- Les menus de la barre ---- */

.or-menu-avis, .or-menu-compte { width: 268px; padding: 6px; }
.or-menu-titre { padding: 8px 10px 6px; color: var(--or-encre-3); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

.or-avis {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--or-encre-2);
    font-size: .88rem;
    text-decoration: none;
}
.or-avis:hover { background: #F4F6FA; color: var(--or-accent); text-decoration: none; }
.or-avis > i:first-child { flex: none; width: 18px; margin-right: 9px; color: var(--or-encre-3) !important; font-size: 13px; }
.or-avis:hover > i:first-child { color: var(--or-accent) !important; }
.or-avis span { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.or-avis > i:last-child { flex: none; margin-left: 8px; font-size: 10px; color: var(--or-encre-3) !important; }
.or-avis-quitter:hover { background: #FEECEC; color: var(--or-grave); }
.or-avis-quitter:hover > i:first-child { color: var(--or-grave) !important; }

.or-menu-compte hr { margin: 6px 10px; border: 0; border-top: 1px solid var(--or-verre-trait); }

.or-menu-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 12px;
    color: var(--or-encre-3);
    font-size: .86rem;
    text-align: center;
}
.or-menu-vide i { margin-bottom: 8px; font-size: 20px; color: var(--or-ok) !important; }

/* ---- Telephone ---- */

@media (max-width: 991px) {
    :root { --or-barre-h: 58px; }
    .or-barre { left: 0; right: 0; top: 0; height: var(--or-barre-h); padding: 0 14px; }
    .or-chercher kbd { display: none; }
    .or-ambiance { display: none; }
    .or-chip-texte { display: none; }
    .or-chip > i { display: none; }
    .content { padding-top: 74px !important; }
}

@media (max-width: 575px) {
    .or-chercher input::placeholder { color: transparent; }
}


/* ==========================================================================
   La recherche globale (recherche.php)
   ========================================================================== */

.rch_champ { display: flex; align-items: center; height: 48px; padding: 0 6px 0 16px; border-radius: var(--or-rayon-s); background: #F4F6FA; }
.rch_champ > i { flex: none; margin-right: 12px; color: var(--or-encre-3) !important; }
.rch_champ input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; color: var(--or-encre); font-size: 1rem; }
.rch_champ input:focus { outline: none; }
.rch_champ .btn { flex: none; height: 36px; padding: 0 18px; }

.rch_note { display: block; margin-top: 10px; color: var(--or-encre-3); font-size: .84rem; }

.rch_trouve { display: flex; align-items: center; padding: 13px 24px; border-bottom: 1px solid var(--or-verre-trait); color: var(--or-encre); text-decoration: none; }
.rch_trouve:last-child { border-bottom: 0; }
.rch_trouve:hover { background: #FAFBFD; color: var(--or-encre); text-decoration: none; }

.rch_marque { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-right: 14px; border-radius: 10px; background: #E7F0FE; color: #0061EF; }
.rch_marque i { margin: 0 !important; font-size: 14px; color: inherit !important; }
.rch_marque_inter { background: #FEECEC; color: #D90E15; }

.rch_corps { flex: 1 1 auto; min-width: 0; }
.rch_nom { display: block; color: var(--or-encre); font-weight: 600; }
.rch_quoi { display: block; margin-top: 2px; color: var(--or-encre-3); font-size: .84rem; }
.rch_trouve > i:last-child { flex: none; margin-left: 10px; color: var(--or-encre-3) !important; font-size: 11px; }

.rch_vide { display: flex; flex-direction: column; align-items: center; padding: 42px 16px; color: var(--or-encre-3); text-align: center; }
.rch_vide i { margin-bottom: 12px; font-size: 26px; color: #D6DCE6 !important; }


/* ---- Les menus de la barre du haut s'ouvrent VERS LE BAS ---- */
/*
   .or-menu est dessine pour le menu lateral : il sort a droite
   (left: calc(100% + 14px)) et s'aligne sur le bas de son declencheur. Depuis un
   chip colle au bord droit de la fenetre, cela l'envoie HORS CHAMP — le menu
   s'ouvrait bel et bien, on ne le voyait simplement jamais.

   Dans la barre, il descend sous son declencheur et s'aligne a droite.
*/
.or-barre .or-menu {
    top: calc(100% + 10px);
    bottom: auto;
    left: auto;
    right: 0;
    transform: translateY(-8px);
}

.or-barre .or-tiroir.est-ouvert > .or-menu { transform: translateY(0); }

/* La cloche est plus etroite que son menu : on l'aligne sur le bord droit de la
   barre plutot que sur elle-meme, sinon le menu deborde de la fenetre. */
.or-barre .or-tiroir-avis .or-menu { right: -8px; }

/* ==========================================================================
   PAGE INCRUSTEE DANS UNE FENETRE DE LA CASERNE
   caserne.js ouvre les ecrans du site dans un cadre nomme « orion_incruste » :
   le menu, la barre du haut et le pied de page y feraient doublon avec ceux de
   la page qui l'a ouvert. La classe est posee par header_global_css.php.
   ========================================================================== */
html.orion-incruste .or-aside,
html.orion-incruste .or-barre,
html.orion-incruste #kt_header,
html.orion-incruste .header-mobile,
html.orion-incruste #kt_header_mobile,
html.orion-incruste .footer,
html.orion-incruste #kt_footer { display: none !important; }

html.orion-incruste .wrapper,
html.orion-incruste #kt_aside ~ #kt_wrapper { padding-left: 0 !important; padding-top: 0 !important; }
html.orion-incruste #kt_aside ~ #kt_wrapper > #kt_content,
html.orion-incruste .content { padding-top: 14px !important; padding-bottom: 14px !important; }
html.orion-incruste #kt_content .container-fluid { max-width: none; padding-left: 16px !important; padding-right: 16px !important; }

/* ==========================================================================
   LES DOSSIERS ADMINISTRATIFS (dossiers.php)
   ========================================================================== */

.dos_tete {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 16px;
}
.dos_titre { margin: 0 0 2px; font-size: 22px; font-weight: 700; color: var(--or-encre); }
.dos_sous_titre { color: var(--or-encre-3); font-size: 13px; }
.dos_tete_actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.dos_recherche {
    position: relative; margin: 0;
}
.dos_recherche i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--or-encre-3); font-size: 12px; }
.dos_recherche input {
    width: 260px; height: 38px; padding: 0 12px 0 34px;
    border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon-s);
    background: #FFFFFF; color: var(--or-encre); font-size: 13px;
}
.dos_recherche input:focus { outline: none; border-color: var(--or-accent); box-shadow: 0 0 0 3px var(--or-accent-doux); }

.dos_filtres { display: flex; gap: 6px; margin-bottom: 14px; }
.dos_filtre {
    padding: 6px 14px; border-radius: 999px;
    background: #FFFFFF; border: 1px solid var(--or-verre-bord);
    color: var(--or-encre-2); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.dos_filtre:hover { color: var(--or-accent); border-color: var(--or-accent); text-decoration: none; }
.dos_filtre.est-actif { background: var(--or-accent); border-color: var(--or-accent); color: #FFFFFF; }

.dos_vide {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 48px 16px; color: var(--or-encre-3); font-weight: 600; text-align: center;
}
.dos_vide i { font-size: 30px; opacity: .6; }

.dos_table thead th {
    border-top: 0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--or-encre-3);
}
.dos_table td { vertical-align: middle; }
.dos_pastille {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-right: 10px; border-radius: 10px;
    background: var(--or-accent-doux); color: var(--or-accent); font-size: 12px; font-weight: 700;
}

.dos_retour { display: inline-block; margin-bottom: 12px; color: var(--or-encre-3); font-weight: 600; font-size: 13px; }
.dos_retour:hover { color: var(--or-accent); text-decoration: none; }

.dos_hero_ligne { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dos_avatar {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 18px;
    background: var(--or-accent); color: #FFFFFF; font-size: 22px; font-weight: 700;
}
.dos_hero_texte { flex: 1 1 240px; min-width: 0; }
.dos_hero_nom { font-size: 20px; font-weight: 700; color: var(--or-encre); }
.dos_hero_grade { color: var(--or-encre-2); font-weight: 500; }
.dos_faits { display: flex; gap: 22px; flex-wrap: wrap; }
.dos_faits > div { display: flex; flex-direction: column; }
.dos_faits small { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--or-encre-3); }
.dos_faits b { font-size: 14px; color: var(--or-encre); }

.dos_onglets { margin-top: 18px; border-bottom: 1px solid var(--or-verre-bord); flex-wrap: wrap; }
.dos_onglets .nav-link { font-weight: 600; color: var(--or-encre-2); }
.dos_onglets .nav-link.active { color: var(--or-accent); }
.dos_compte {
    display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px;
    border-radius: 999px; background: var(--or-accent-doux); color: var(--or-accent);
    font-size: 11px; font-weight: 700; text-align: center;
}

.dos_defs { margin: 0; }
.dos_defs > div { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--or-verre-trait); }
.dos_defs > div:last-child { border-bottom: 0; }
.dos_defs dt { flex: 0 0 120px; margin: 0; font-size: 12px; font-weight: 600; color: var(--or-encre-3); }
.dos_defs dd { flex: 1 1 auto; margin: 0; color: var(--or-encre); min-width: 0; overflow-wrap: anywhere; }
.dos_mini_titre { margin: 14px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or-encre-3); }

/* La chronologie : un fil vertical, un point par evenement */
.dos_chrono { position: relative; padding-left: 8px; }
.dos_chrono::before {
    content: ''; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--or-verre-bord);
}
.dos_evt { position: relative; display: flex; gap: 16px; padding: 0 0 18px; }
.dos_point {
    position: relative; z-index: 1; flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #FFFFFF; font-size: 11px; box-shadow: 0 0 0 4px #F5F7FA;
}
.dos_point i { color: #FFFFFF; }
.dos_evt_corps {
    flex: 1 1 auto; min-width: 0; padding: 12px 14px;
    background: #FFFFFF; border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon-s);
}
.dos_evt_tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dos_evt_date { color: var(--or-encre-2); font-size: 12.5px; font-weight: 600; }
.dos_evt_ref { margin-left: auto; font-size: 12px; color: var(--or-encre-3); }
.dos_evt_titre { margin-top: 6px; font-weight: 600; color: var(--or-encre); }
.dos_evt_texte { margin-top: 6px; color: var(--or-encre-2); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.dos_evt_aut { margin-top: 8px; font-size: 11.5px; color: var(--or-encre-3); }
.dos_evt_actions { margin-left: auto; display: inline-flex; gap: 6px; }
.dos_evt_extra { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--or-encre-2); }
.dos_evt_extra small { color: var(--or-encre-3); margin-right: 4px; }

/* L'onglet Formation d'un dossier : les evaluations d'un cours et la date du releve Moodle */
.dos_evals { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 8px; }
.dos_point.bg-neutre { background: #A1A5B7; }
.dos_chip { display: inline-flex; align-items: center; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 6px; background: #EEF1F6; color: #3A4660; font-size: 12px; font-weight: 600; line-height: 1.35; }
.dos_chip i { flex: none; margin-right: 6px; font-size: 11px; color: inherit !important; }
.dos_chip.est-fait { background: #EAF1FE; color: #0F3D8C; }
.dos_chip.est-reussi { background: #E3F5EC; color: #0B7B56; }
.dos_chip.est-echoue { background: #FEECEC; color: #A80A10; }
.dos_chip.est-info { background: #E6F4FA; color: #0A6A9B; }
.dos_chip.est-note { background: #F1EEFB; color: #4B2FA0; }
.dos_source { margin-bottom: 14px; color: var(--or-encre-3); font-size: 12.5px; }
.dos_source i { margin-right: 6px; }

/* Formation › Resultats : le suivi et les notes de tout le monde */
.fo_res_outils { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 10px 0 14px; }
.fo_res_outils .form-control { max-width: 320px; }
.fo_res_etat { flex: 1 1 auto; color: var(--or-encre-3); font-size: .85rem; }
.fo_res_ligne { cursor: pointer; }
.fo_res_ligne:hover td { background: #FAFBFD; }
.fo_res_ligne.est-relu { opacity: .55; }
.fo_res_sous { margin-top: 2px; color: var(--or-encre-3); font-size: .75rem; }
.fo_res_ok { color: #0B7B56; font-weight: 700; }
.fo_res_ko { color: #A80A10; font-weight: 700; }
.fo_res_detail > td { padding: 18px 22px 6px !important; background: #FAFBFD; border-top: 0 !important; }
.fo_res_detail_corps .card { box-shadow: none; border: 1px solid var(--or-verre-trait); }

/* Formation › Frise des grades : le plateau de reglage (un cours se glisse sur le grade qui l'ouvre) */
.fo_frise_tete { flex-wrap: wrap; }
.fo_frise_regler { margin-left: auto; align-self: center; }
.fo_fr_resume { display: flex; align-items: center; gap: 8px; margin: 10px 0 14px; padding: 8px 12px; border-radius: var(--or-rayon-s); background: #EEF3FD; color: #0F3D8C; font-size: .85rem; font-weight: 600; }
.fo_fr_resume.est-erreur { background: #FEECEC; color: #A80A10; }
.fo_fr_plateau { display: flex; align-items: flex-start; gap: 16px; }
.fo_fr_hors { flex: 0 0 300px; position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow: auto; background: #FFFFFF; border: 1px solid var(--or-verre-trait); }
.fo_fr_grades { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 12px; }
.fo_fr_grades .fo_fr_zone { flex: 0 0 270px; }
.fo_fr_zone { padding: 10px; border-radius: var(--or-rayon-s); background: #F3F6FA; border: 2px dashed transparent; min-height: 120px; transition: border-color .12s, background .12s; }
.fo_fr_zone.est-survol { border-color: var(--or-accent); background: #FFF5F5; }
.fo_fr_zone_tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; color: var(--or-encre); }
.fo_fr_zone_tete b { font-size: .95rem; }
.fo_fr_zone_tete span { color: var(--or-encre-3); font-size: .8rem; }
.fo_fr_zone_tete .fo_fr_n { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #E3E8F0; color: var(--or-encre-2); font-weight: 700; }
.fo_fr_aide { margin-bottom: 8px; color: var(--or-encre-3); font-size: .75rem; line-height: 1.4; }
.fo_fr_cartes { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.fo_fr_carte { padding: 9px 10px; border: 1px solid var(--or-verre-trait); border-radius: var(--or-rayon-s); background: #FFFFFF; cursor: grab; }
.fo_fr_carte.est-glisse { opacity: .4; }
.fo_fr_carte.est-envoi { opacity: .55; pointer-events: none; }
.fo_fr_carte.est-pose { animation: fo_fr_pose .6s ease-out; }
.fo_fr_carte.est-manuel { border-left: 3px solid var(--or-accent); }
.fo_fr_carte.est-exclu { border-left: 3px solid #A80A10; }
.fo_fr_carte.est-masque { cursor: default; background: #F7F8FA; }
.fo_fr_nom { color: var(--or-encre); font-size: .85rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fo_fr_theme { margin-top: 2px; color: var(--or-encre-3); font-size: .72rem; line-height: 1.3; }
.fo_fr_etat { margin: 6px 0; color: var(--or-encre-2); font-size: .72rem; font-weight: 600; }
.fo_fr_carte.est-manuel .fo_fr_etat { color: var(--or-accent); }
.fo_fr_carte.est-exclu .fo_fr_etat { color: #A80A10; }
.fo_fr_lien { font-size: .75rem; font-weight: 600; }
.fo_fr_choix { font-size: .75rem; }
@keyframes fo_fr_pose { from { background: #FFF1C2; } to { background: #FFFFFF; } }
@media (max-width: 991px) {
    .fo_fr_plateau { flex-direction: column; }
    .fo_fr_hors { flex: 0 0 auto; position: static; max-height: none; width: 100%; }
    .fo_fr_grades { width: 100%; }
}
.dos_evt_ref + .dos_evt_actions { margin-left: 8px; }

@media (max-width: 767px) {
    .dos_recherche input { width: 100%; }
    .dos_recherche { flex: 1 1 100%; }
    .dos_defs > div { flex-direction: column; gap: 2px; }
    .dos_defs dt { flex: none; }
}

/* ==========================================================================
   MENU EN RUBRIQUES (2026-10-14)
   Le menu du personnel n'a plus d'accordeons : un titre et ses liens, tous
   visibles. Des liens un peu plus bas que ceux des groupes, pour que quatorze
   entrees tiennent sans defiler sur un ecran courant.
   ========================================================================== */
.or-lien-fin { height: 35px; margin-bottom: 1px; gap: 11px; font-size: .83rem; }
.or-lien-fin > i:first-child { font-size: .92rem; }
.or-titre-fin { padding: 11px 12px 4px; }
.or-titre-fin:first-of-type { padding-top: 6px; }


/* ==========================================================================
   La formation (formation.php) — préfixe fo_
   ========================================================================== */

.fo_onglets { margin-bottom: 20px; flex-wrap: wrap; }
.fo_onglets .nav-link { font-weight: 600; color: var(--or-encre-2); }
.fo_onglets .nav-link.active { color: var(--or-accent); }

.fo_corps { padding-bottom: 24px; }

/* L'accès Moodle */
.fo_moodle {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 8px;
    padding: 16px 20px;
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
}
.fo_moodle_icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--or-accent-doux);
    color: var(--or-accent);
}
.fo_moodle_icone i { margin: 0 !important; font-size: 19px; color: inherit !important; }
.fo_moodle_texte { flex: 1 1 auto; min-width: 0; }
.fo_moodle_texte b { display: block; color: var(--or-encre); font-size: 1rem; }
.fo_moodle_texte span { display: block; color: var(--or-encre-3); font-size: .88rem; line-height: 1.4; }

/* Un titre de rubrique */
.fo_titre {
    display: flex;
    align-items: center;
    margin: 26px 0 14px;
    color: var(--or-encre);
    font-size: 1.1rem;
    font-weight: 700;
}
.fo_titre i { margin-right: 10px; font-size: 15px; color: var(--or-accent); }
.fo_titre_note { margin-left: 12px; color: var(--or-encre-3); font-size: .84rem; font-weight: 600; }

/* Les cartes : formations en cours, spécialités */
.fo_grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.fo_grille_larges { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
/* Les spécialités dans la colonne de droite : une carte par ligne, plus compacte */
.fo_grille_colonne { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fo_colonne_droite .fo_titre:first-child { margin-top: 0; }
.fo_colonne_droite .fo_titre_note { display: block; margin: 2px 0 0; }
/* La demande est une COLONNE (le mot, puis le niveau et le bouton) : jamais de « wrap » ici, sinon le niveau et le
   bouton partent dans une seconde colonne, hors de la carte */
.fo_colonne_droite .fo_demande { flex-direction: column; flex-wrap: nowrap; }
.fo_colonne_droite .fo_demande input[type="text"] { flex: none; width: 100%; }
.fo_colonne_droite .fo_demande .btn { flex: none; }

.fo_carte {
    --fo-teinte: var(--or-accent);
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--or-verre-bord);
    border-top: 3px solid var(--fo-teinte);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
}
.fo_carte_tete { display: flex; align-items: center; margin-bottom: 12px; }
.fo_icone {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-right: 12px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--fo-teinte) 14%, #FFFFFF);
    color: var(--fo-teinte);
    font-size: 21px;
    line-height: 1;
}
.fo_icone i { margin: 0 !important; font-size: 17px; color: inherit !important; }
.fo_carte_titre { flex: 1 1 auto; min-width: 0; }
.fo_carte_titre b { display: block; color: var(--or-encre); font-size: 1rem; line-height: 1.25; }
.fo_carte_titre span { display: block; color: var(--or-encre-3); font-size: .82rem; }

.fo_description { margin: 0 0 12px; color: var(--or-encre-2); font-size: .88rem; line-height: 1.45; }

/* La progression d'un cours Moodle */
.fo_progres { height: 8px; border-radius: 999px; background: #EEF1F6; overflow: hidden; }
.fo_progres span { display: block; height: 100%; border-radius: 999px; background: var(--fo-teinte); }
.fo_progres_texte { display: flex; justify-content: space-between; margin-top: 6px; color: var(--or-encre-3); font-size: .8rem; }
.fo_note { padding: 9px 12px; border-radius: var(--or-rayon-s); background: #F7F9FC; color: var(--or-encre-3); font-size: .84rem; line-height: 1.4; }

.fo_carte_pied { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.fo_depuis { color: var(--or-encre-3); font-size: .8rem; }

/* La suite de niveaux d'une spécialité */
.fo_niveaux { margin: 0 0 14px; padding: 0; list-style: none; }
.fo_niveaux li { display: flex; align-items: center; padding: 6px 0; border-top: 1px solid var(--or-verre-trait); color: var(--or-encre-2); font-size: .86rem; }
.fo_niveaux li:first-child { border-top: 0; }
.fo_niveaux li > i { flex: none; margin-right: 10px; font-size: 13px; color: #C5CCD8 !important; }
.fo_niveau_nom { flex: 1 1 auto; min-width: 0; }
.fo_niveau_nom b { color: var(--or-encre); }
.fo_niveau_grade { flex: none; margin-left: 10px; color: var(--or-encre-3); font-size: .76rem; }
.fo_niveau_ok > i { color: #0E9F6E !important; }
.fo_niveau_cours > i { color: var(--fo-teinte) !important; }
.fo_niveau_ferme { opacity: .55; }

/* L'état d'une spécialité pour l'agent, et son action */
.fo_carte_action { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.fo_etat { display: flex; align-items: center; padding: 8px 12px; border-radius: var(--or-rayon-s); font-size: .85rem; font-weight: 600; line-height: 1.3; }
.fo_etat i { flex: none; margin-right: 9px; font-size: 13px; color: inherit !important; }
.fo_etat_attente { background: #FDF2DC; color: #8A5A00; }
.fo_etat_cours { background: #E7F0FE; color: #0F3D8C; }
.fo_etat_ok { background: #E3F6EC; color: #0B7B56; }
.fo_etat_echec { background: #FEECEC; color: #A80A10; }
.fo_etat_ferme { background: #F4F6FA; color: var(--or-encre-3); font-weight: 500; }

/* La demande d'un niveau : le mot sur toute la largeur, puis le bouton (un nom de niveau est long) */
.fo_demande { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.fo_demande .form-control { width: 100%; min-width: 0; }
.fo_demande .btn { width: auto; white-space: nowrap; line-height: 1.3; }
/* Le niveau demandé en clair (qui s'abrège), le bouton compact à côté : plus de bouton de trois lignes */
.fo_demande_ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fo_demande_niveau { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--or-encre-2); font-size: .84rem; font-weight: 600; }
.fo_demande_bouton { flex: none; padding: 5px 14px; }
.fo_frise_pied { padding: 0 2px 14px; }
.fo_formation small { color: var(--or-encre-3); font-weight: 600; }

/* Les listes (demandes, décisions, cours) */
.fo_liste { border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon); background: #FFFFFF; overflow: hidden; }
.fo_ligne {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--or-verre-trait);
    color: var(--or-encre);
}
.fo_ligne:last-child { border-bottom: 0; }
.fo_ligne_lien:hover { background: #FAFBFD; color: var(--or-encre); text-decoration: none; }
.fo_ligne_lien.est-actif { background: var(--or-accent-doux); }
.fo_ligne_lien > i { flex: none; margin-left: auto; color: var(--or-encre-3); font-size: 11px; }
.fo_ligne_quoi { flex: 1 1 280px; min-width: 0; font-size: .92rem; }
.fo_ligne_quand { flex: none; color: var(--or-encre-3); font-size: .82rem; }
.fo_ligne_note { display: block; width: 100%; color: var(--or-encre-3); font-size: .82rem; font-style: italic; }
.fo_ligne_quoi .fo_ligne_note { width: auto; margin-top: 3px; }
.fo_ligne_actions { flex: none; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fo_refus { display: inline-flex; gap: 6px; }
.fo_refus .form-control { width: 190px; }

.fo_vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 16px;
    border: 1px dashed var(--or-verre-bord);
    border-radius: var(--or-rayon);
    color: var(--or-encre-3);
    text-align: center;
}
.fo_vide i { margin-bottom: 10px; font-size: 24px; color: #D6DCE6 !important; }
.fo_vide span { font-size: .9rem; }
.fo_vide_lien { margin-top: 10px; color: var(--or-accent); font-weight: 600; }

/* Barre d'outils d'un onglet */
.fo_barre { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.fo_barre_texte { color: var(--or-encre-3); font-size: .9rem; }
.fo_filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.fo_filtre {
    padding: 4px 12px;
    border: 1px solid var(--or-verre-bord);
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--or-encre-2);
    font-size: .8rem;
    font-weight: 600;
}
.fo_filtre:hover { color: var(--or-accent); border-color: var(--or-accent); text-decoration: none; }
.fo_filtre.est-actif { background: var(--or-accent); border-color: var(--or-accent); color: #FFFFFF; }

/* Les formulaires des réglages */
.fo_formulaire { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fo_formulaire .form-control { flex: 1 1 200px; min-width: 0; }
.fo_formulaire_grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 14px; align-items: end; }
.fo_formulaire_grille label { display: block; margin: 0; color: var(--or-encre-2); font-size: .82rem; font-weight: 600; }
.fo_formulaire_grille label .form-control { margin-top: 4px; font-weight: 400; }
.fo_formulaire_grille .fo_large { grid-column: 1 / -1; }
.fo_formulaire_grille .fo_case { align-self: center; margin-top: 18px; }

.fo_niveau_form {
    margin-bottom: 14px;
    padding: 16px 18px;
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
}
.fo_niveau_form_nouveau { border-style: dashed; background: #FAFBFD; }
.fo_niveau_titre { margin-bottom: 12px; color: var(--or-encre); font-weight: 700; }
.fo_niveau_pied { display: flex; gap: 8px; margin-top: 14px; }

.fo_mdp { padding: 3px 9px; border-radius: 6px; background: #FFFFFF; color: var(--or-encre); font-size: 1rem; font-weight: 700; user-select: all; }

@media (max-width: 767px) {
    .fo_moodle { flex-wrap: wrap; }
    .fo_grille, .fo_grille_larges { grid-template-columns: minmax(0, 1fr); }
    .fo_demande { flex-direction: column; align-items: stretch; }
    .fo_refus .form-control { width: 140px; }
}

/* Les formulaires de candidature : leurs champs, et le réglage de ces champs (recrutement.php?vue=formulaires) */
.rcrf_etoile { color: #D90E15; }
.rcrf_case { display: flex; align-items: center; font-weight: 600; }
.rcr_ed_champ { margin-bottom: 12px; padding: 12px 14px 2px; border: 1px solid #EBEDF3; border-radius: 10px; background: #FAFBFD; }
.rcr_ed_champ:hover { border-color: #C9D3E6; }
.rcr_ed_systeme { margin-bottom: 12px; padding: 10px 14px; border: 1px dashed #D1D3E0; border-radius: 10px; color: #7E8299; font-size: .9rem; }

/* Le lecteur : le cours Moodle s'affiche dans la page */
.fo_lecteur_tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fo_lecteur_titre { flex: 1 1 auto; min-width: 0; color: var(--or-encre); font-size: 1.1rem; font-weight: 700; }
.fo_lecteur {
    display: block;
    width: 100%;
    height: calc(100vh - 230px);
    min-height: 560px;
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
}
.fo_lecteur_aide { margin-top: 10px; }

/* ---- Les cours : la bibliothèque par thèmes et la page d'un cours --------------------------------- */
.fo_groupe { margin-top: 30px; padding-bottom: 8px; border-bottom: 2px solid color-mix(in srgb, var(--fo-teinte) 30%, #FFFFFF); }
.fo_groupe i { color: var(--fo-teinte); }
.fo_groupe_theme { margin-bottom: 18px; }
.fo_theme_nom { margin: 4px 0 10px; color: var(--or-encre-2); font-size: .86rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.fo_recherche { flex: 0 1 280px; min-width: 180px; }

.fo_cours_grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fo_cours {
    --fo-teinte: var(--or-accent);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
    color: var(--or-encre);
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
a.fo_cours_ouvert:hover {
    border-color: var(--fo-teinte);
    box-shadow: 0 6px 18px rgba(6, 24, 58, .09);
    color: var(--or-encre);
    text-decoration: none;
    transform: translateY(-2px);
}
.fo_cours_ferme { opacity: .72; }
.fo_cours_visuel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--fo-teinte) 88%, #000000), color-mix(in srgb, var(--fo-teinte) 55%, #FFFFFF));
    color: #FFFFFF;
    overflow: hidden;
}
.fo_cours_visuel > i { margin: 0 !important; font-size: 30px; color: rgba(255, 255, 255, .92) !important; }
.fo_cours_visuel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fo_cours_cadenas {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(6, 24, 58, .62);
}
.fo_cours_cadenas i { margin: 0 !important; font-size: 11px; color: #FFFFFF !important; }
.fo_cours_corps { display: flex; flex-direction: column; flex: 1 1 auto; gap: 8px; padding: 12px 14px 14px; }
.fo_cours_corps b { display: block; color: var(--or-encre); font-size: .94rem; line-height: 1.3; }
.fo_cours_etat { display: flex; align-items: center; margin-top: auto; color: var(--or-encre-3); font-size: .8rem; font-weight: 600; line-height: 1.3; }
.fo_cours_etat i { flex: none; margin-right: 7px; font-size: 12px; color: inherit !important; }
.fo_cours_etat.est-cours { color: #0F3D8C; }
.fo_cours_etat.est-fini { color: #0B7B56; }
.fo_cours_etat.est-ferme { color: var(--or-encre-3); font-weight: 500; }
.fo_cours_corps .fo_progres { --fo-teinte: var(--or-accent); height: 6px; }

/* La page d'un cours */
.fo_lecteur_theme { display: block; margin-top: 2px; color: var(--or-encre-3); font-size: .8rem; font-weight: 600; }
.fo_avancement { margin-bottom: 14px; padding: 12px 16px; border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon); background: #FFFFFF; }
.fo_avancement_ligne { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--or-encre-3); font-size: .86rem; }
.fo_avancement_ligne b { color: var(--or-encre); font-size: 1.05rem; }
.fo_avancement .fo_progres { --fo-teinte: #0E9F6E; }

.fo_section { margin-bottom: 14px; border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon); background: #FFFFFF; overflow: hidden; }
.fo_section_titre { padding: 10px 16px; border-bottom: 1px solid var(--or-verre-trait); background: #FAFBFD; color: var(--or-encre); font-size: .9rem; font-weight: 700; }
.fo_etiquette { padding: 10px 16px; border-bottom: 1px solid var(--or-verre-trait); color: var(--or-encre-2); font-size: .86rem; line-height: 1.5; }
.fo_etiquette img { max-width: 100%; height: auto; }
.fo_etiquette p:last-child { margin-bottom: 0; }
.fo_sous_titre { display: flex; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--or-verre-trait); background: #F7F9FC; color: var(--or-encre-2); font-size: .82rem; font-weight: 700; }
.fo_sous_titre i { margin-right: 8px; font-size: 11px; color: var(--or-encre-3) !important; }

.fo_act { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--or-verre-trait); }
.fo_act:last-child { border-bottom: 0; }
.fo_act_icone { flex: none; width: 18px; margin-top: 3px; text-align: center; font-size: 14px; color: var(--or-encre-3) !important; }
.fo_act_corps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fo_act_nom { color: var(--or-encre); font-size: .88rem; font-weight: 600; line-height: 1.35; }
a.fo_act_nom:hover { color: var(--or-accent); text-decoration: none; }
.fo_act_note { color: var(--or-encre-3); font-size: .78rem; line-height: 1.35; }
.fo_act_note i { margin-right: 6px; font-size: 11px; color: inherit !important; }
.fo_act_bouton { margin-top: 2px; }
.fo_act > i.fo_act_ok, .fo_act > i.fo_act_attente { flex: none; margin-top: 3px; font-size: 15px; }
.fo_act_ok { color: #0E9F6E !important; }
.fo_act_attente { color: #C5CCD8 !important; }
.fo_act.est-actif { background: var(--or-accent-doux); box-shadow: inset 3px 0 0 var(--or-accent); }
.fo_act.est-ferme { opacity: .65; }

/* Le visionneur */
.fo_doc_tete { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fo_doc_titre { flex: 1 1 auto; min-width: 0; color: var(--or-encre); font-size: 1rem; font-weight: 700; }
.fo_doc_titre i { margin-right: 10px; color: var(--or-accent) !important; }
.fo_doc_lu { margin-bottom: 10px; color: #0B7B56; font-size: .82rem; font-weight: 600; }
.fo_doc_lu i { margin-right: 6px; color: inherit !important; }
.fo_visionneuse {
    display: block;
    width: 100%;
    height: calc(100vh - 260px);
    min-height: 520px;
    border: 1px solid var(--or-verre-bord);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
}
.fo_visionneuse_image, .fo_visionneuse_video { display: block; max-width: 100%; max-height: calc(100vh - 260px); margin: 0 auto; border-radius: var(--or-rayon); }
.fo_visionneuse_audio { display: block; width: 100%; }
.fo_visionneuse_vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 30px 20px;
    border: 1px dashed var(--or-verre-bord);
    border-radius: var(--or-rayon);
    background: #FFFFFF;
    color: var(--or-encre-3);
    text-align: center;
}
.fo_visionneuse_vide > i { margin-bottom: 14px; font-size: 30px; color: #D6DCE6 !important; }
.fo_visionneuse_vide b { color: var(--or-encre); font-size: 1rem; }
.fo_visionneuse_vide span { margin-top: 4px; max-width: 420px; font-size: .88rem; line-height: 1.45; }

@media (max-width: 767px) {
    .fo_cours_grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .fo_cours_visuel { height: 72px; }
    .fo_visionneuse { height: 70vh; min-height: 380px; }
    .fo_recherche { flex: 1 1 100%; }
}

/* Une page de cours (texte et images) */
.fo_page { padding: 22px 26px; border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon); background: #FFFFFF; color: var(--or-encre-2); font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.fo_page img { max-width: 100%; height: auto; border-radius: 8px; }
.fo_page h1, .fo_page h2, .fo_page h3, .fo_page h4 { margin: 1.2em 0 .5em; color: var(--or-encre); font-weight: 700; }
.fo_page table { max-width: 100%; border-collapse: collapse; }
.fo_page td, .fo_page th { padding: 6px 10px; border: 1px solid var(--or-verre-bord); }
.fo_page > :first-child { margin-top: 0; }

/* La règle de visibilité d'un cours, vue du bureau formation */
.fo_cours_regle { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: #EEF3FD; color: #0F3D8C; font-size: .72rem; font-weight: 700; }
.fo_cours_regle i { margin-right: 6px; font-size: 10px; color: inherit !important; }
.fo_cours_regle.est-masque { background: #FEECEC; color: #A80A10; }

/* Les competences que la reussite de l'examen d'un cours donne : sous le cours, dans le lecteur, et le choix du bureau formation */
.fo_cours_competences { display: inline-flex; align-items: center; align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: #E3F5EC; color: #0B7B56; font-size: .72rem; font-weight: 700; }
.fo_cours_competences i { margin-right: 6px; font-size: 10px; color: inherit !important; }
.fo_competences { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--or-rayon-s); background: #E3F5EC; color: #0B7B56; font-size: .88rem; font-weight: 600; }
.fo_competences > i { flex: none; color: inherit !important; }
.fo_competence { display: inline-flex; padding: 2px 10px; border: 1px solid #A8DCC6; border-radius: 999px; background: #FFFFFF; color: #0B7B56; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.fo_competences_choix { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; max-height: 280px; overflow: auto; padding: 4px 2px; }
.fo_coche_texte { font-style: normal; }

/* La liste des comptes Moodle des agents (réglages) : défile dans sa carte */
.fo_table_defile { max-height: 460px; overflow: auto; border: 1px solid var(--or-verre-trait); border-radius: var(--or-rayon-s); }
.fo_table_defile thead th { position: sticky; top: 0; z-index: 1; background: #FAFBFD; }
.fo_c_mail { color: var(--or-encre-3); font-size: .78rem; }

/* Une case à cocher : le thème dessine un carré pour CHAQUE <span> enfant direct, le texte suit donc en texte nu */
.fo_coche { display: flex; align-items: center; font-size: .92rem; color: var(--or-encre); line-height: 1.35; }
.fo_coche > span { flex: none; margin-right: 10px; }

/* ---- Le recrutement : les quatre étapes d'un dossier ---- */
.rcr_etapes { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.rcr_etape { display: flex; align-items: center; gap: 10px; color: var(--or-encre-3); font-weight: 600; font-size: 13px; }
.rcr_rond {
    width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--or-verre-trait); color: var(--or-encre-2); font-size: 13px; font-weight: 700;
}
.rcr_etape.est-faite { color: #0E9F6E; }
.rcr_etape.est-faite .rcr_rond { background: #0E9F6E; color: #FFFFFF; }
.rcr_etape.est-courante { color: var(--or-accent); }
.rcr_etape.est-courante .rcr_rond { background: var(--or-accent); color: #FFFFFF; box-shadow: 0 0 0 4px var(--or-accent-doux); }

/* ---- Les fenêtres (pop-up) : une page d'ORION par-dessus la page, sans menu (global.js : or_popup) ---- */
.or-popup .modal-dialog { max-width: min(1180px, 96vw); }
.or-popup .modal-content { overflow: hidden; border-radius: 14px; }
.or-popup .modal-header { padding: 10px 18px; align-items: center; background: var(--or-surface, #FFFFFF); border-bottom: 1px solid var(--or-verre-bord); }
.or-popup .modal-title { font-size: 15px; font-weight: 700; color: var(--or-encre); flex: 1 1 auto; }
.or-popup .close { margin: 0; padding: 4px 8px; }
.or-popup-seule { color: var(--or-encre-3); font-size: 13px; margin-right: 10px; }
.or-popup-seule:hover { color: var(--or-accent); text-decoration: none; }
.or-popup .modal-body { position: relative; }
.or-popup-cadre { display: block; width: 100%; height: 80vh; border: 0; opacity: 0; transition: opacity .15s; background: #F3F6F9; }
.or-popup-cadre.or-popup-pret { opacity: 1; }
.or-popup-attente { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--or-encre-3); }
@media (max-width: 767px) {
    .or-popup .modal-dialog { margin: 8px auto; }
    .or-popup-cadre { height: 86vh; }
}

/* ---- Ma progression : la frise des grades (formation.php) ---- */
.fo_frise_carte { margin: 0 0 22px; padding: 18px 20px 6px; background: var(--or-verre); border: 1px solid var(--or-verre-bord); border-radius: var(--or-rayon); box-shadow: var(--or-ombre); }
.fo_frise_tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
.fo_frise_resume { color: var(--or-encre-2); font-size: .92rem; }
.fo_frise_resume b { color: var(--or-encre); }
.fo_frise { display: flex; align-items: stretch; overflow-x: auto; padding: 18px 2px 16px; scroll-snap-type: x proximity; }
.fo_etape { position: relative; flex: 0 0 188px; padding: 0 8px; scroll-snap-align: center; }
.fo_etape::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 3px; background: var(--or-verre-trait); }
.fo_etape.est-acquis::before { background: var(--or-ok); }
.fo_etape.est-actuel::before { background: linear-gradient(to right, var(--or-ok) 50%, var(--or-verre-trait) 50%); }
.fo_marque { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 0 0 10px;
    border-radius: 50%; background: var(--or-verre); border: 3px solid var(--or-verre-trait); color: var(--or-encre-3); font-size: .78rem; }
.fo_etape.est-acquis .fo_marque { background: var(--or-ok); border-color: var(--or-ok); color: #fff; }
.fo_etape.est-actuel .fo_marque { background: var(--or-accent); border-color: var(--or-accent); color: #fff; box-shadow: 0 0 0 5px var(--or-accent-doux); }
.fo_etape.est-prochain .fo_marque { border-color: var(--or-accent); border-style: dashed; color: var(--or-accent); }
.fo_etape_tete b { display: block; color: var(--or-encre); font-size: 1rem; }
.fo_etape_tete span { display: block; color: var(--or-encre-2); font-size: .82rem; line-height: 1.25; }
.fo_etape.est-avenir:not(.est-prochain) .fo_etape_tete b, .fo_etape.est-avenir:not(.est-prochain) .fo_etape_tete span { color: var(--or-encre-3); }
.fo_etape_badge { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--or-verre-trait); color: var(--or-encre-2); font-size: .72rem; font-style: normal; font-weight: 600; }
.fo_etape_ici { background: var(--or-accent); color: #fff; }
.fo_etape_suite { background: var(--or-accent-doux); color: var(--or-accent); }
.fo_etape_compte { margin: 10px 0 2px; color: var(--or-encre-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.fo_formation { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--or-verre-trait); border-left: 4px solid var(--fo-teinte, var(--or-accent));
    border-radius: 8px; color: var(--or-encre-2); font-size: .8rem; line-height: 1.2; text-decoration: none; }
.fo_formation i { flex: 0 0 14px; text-align: center; color: var(--or-encre-3); }
.fo_formation b { color: var(--or-encre); font-weight: 600; }
a.fo_formation:hover { border-color: var(--or-accent); text-decoration: none; color: var(--or-encre); }
.fo_formation.est-reussi { background: rgba(14, 159, 110, .08); }
.fo_formation.est-reussi i { color: var(--or-ok); }
.fo_formation.est-en_cours, .fo_formation.est-a_verifier { background: var(--or-accent-doux); }
.fo_formation.est-en_cours i, .fo_formation.est-a_verifier i { color: var(--or-accent); }
.fo_formation.est-ferme { opacity: .62; }
.fo_formation.est-echoue i { color: var(--or-grave); }
.fo_formation_aucune { margin-top: 10px; color: var(--or-encre-3); font-size: .78rem; font-style: italic; }
@media (max-width: 767px) { .fo_etape { flex-basis: 170px; } }


/* ==========================================================================
   APPLICATION MOBILE (2026-10-17)

   ORION s'installe sur l'écran d'accueil et se comporte comme une application :
     - un DOCK en bas (accueil, planning, standard, bureau, menu), à portée du pouce ;
     - une FEUILLE qui remonte (alertes à traiter, notifications push, installation) ;
     - les ZONES SÛRES des encoches et de la barre de geste ;
     - des fenêtres qui montent du bas, des champs qui ne font pas zoomer iOS ;
     - des transitions entre pages (View Transitions) et une barre de progression.

   Posé en fin de fichier : il prolonge « Tablette et téléphone » sans rien retirer. Rien ne change au-dessus
   de 992 px, sauf la feuille (ouverte depuis le menu du compte).
   ========================================================================== */

:root {
    --or-dock-h: 62px;
    --or-sa-haut: env(safe-area-inset-top, 0px);
    --or-sa-bas: env(safe-area-inset-bottom, 0px);
    --or-sa-gauche: env(safe-area-inset-left, 0px);
    --or-sa-droite: env(safe-area-inset-right, 0px);
}

html {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Le toucher : pas de délai de double-tap, pas de zoom sur un bouton */
a, button, .btn, label, summary, select, [role="button"],
input[type="checkbox"], input[type="radio"] { touch-action: manipulation; }

/* Ce qui est de l'interface, pas du contenu, ne se sélectionne pas au doigt */
html.or-standalone .or-dock,
html.or-standalone .or-barre,
html.or-standalone .or-aside { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---- Le dock et la feuille : cachés sur grand écran ---- */

.or-dock { display: none; }
.or-voile-feuille { display: none; }
html.orion-incruste .or-dock,
html.orion-incruste .or-feuille,
html.orion-incruste .or-voile-feuille { display: none !important; }

/* ---- La feuille « Alertes et notifications » ----
   Sur grand écran : une carte sous la barre, à droite. Sur téléphone : une feuille qui remonte du bas. */

.or-voile-feuille {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(6, 24, 58, .38);
    opacity: 0;
    transition: opacity .2s ease;
}
.or-voile-feuille.est-ouvert { display: block; opacity: 1; }
.or-voile-feuille[hidden] { display: none; }

.or-feuille {
    position: fixed;
    z-index: 1310;
    top: 74px;
    right: 24px;
    display: flex;
    flex-direction: column;
    width: 400px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 100px);
    background: #FFFFFF;
    border: 1px solid var(--or-verre-bord);
    border-radius: 18px;
    box-shadow: var(--or-ombre-flottante);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .22s cubic-bezier(.3, .8, .3, 1);
}
.or-feuille[hidden] { display: none; }
.or-feuille.est-ouverte { opacity: 1; transform: none; }

.or-feuille-poignee { display: none; }
.or-feuille-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.or-feuille-tete h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--or-encre); }
.or-feuille-fermer {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border: 0; border-radius: 50%; background: #F4F6FA; color: var(--or-encre-2); cursor: pointer;
}
.or-feuille-fermer i { margin: 0 !important; font-size: 14px; color: inherit !important; }
.or-feuille-corps { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 14px 16px; overscroll-behavior: contain; }
.or-feuille-bloc { padding: 8px 0 12px; border-bottom: 1px solid var(--or-verre-trait); }
.or-feuille-bloc:last-child { border-bottom: 0; }
.or-feuille-bloc[hidden] { display: none; }
.or-feuille-sous-titre { padding: 6px 6px 8px; color: var(--or-encre-3); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.or-feuille-texte { margin: 0 6px 12px; color: var(--or-encre-2); font-size: .9rem; line-height: 1.5; }
.or-feuille-vide { display: flex; align-items: center; gap: 10px; padding: 12px 8px; color: var(--or-encre-3); }
.or-feuille-vide i { color: var(--or-ok) !important; }
.or-feuille .or-avis { padding: 13px 10px; }

.or-feuille-bouton {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px;
    background: var(--or-accent); color: #FFFFFF; font-size: .95rem; font-weight: 700; cursor: pointer;
}
.or-feuille-bouton i { margin: 0 !important; color: inherit !important; }
.or-feuille-bouton:active { transform: scale(.985); }
.or-feuille-bouton[disabled] { opacity: .6; cursor: default; }
.or-feuille-bouton-clair { background: #F4F6FA; color: var(--or-encre); }
.or-feuille-actions { display: flex; gap: 8px; margin-top: 10px; }
.or-feuille-actions[hidden] { display: none; }
.or-feuille-actions .or-feuille-bouton { flex: 1 1 0; min-height: 44px; font-size: .86rem; }

/* Les préférences : un interrupteur par catégorie */
.or-push-prefs { margin-top: 10px; }
.or-push-prefs[hidden] { display: none; }
.or-pref { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-top: 1px solid var(--or-verre-trait); cursor: pointer; }
.or-pref:first-child { border-top: 0; }
.or-pref > i { flex: none; width: 20px; text-align: center; color: var(--or-encre-3) !important; }
.or-pref-texte { flex: 1 1 auto; min-width: 0; }
.or-pref-texte b { display: block; color: var(--or-encre); font-size: .9rem; font-weight: 600; }
.or-pref-texte small { display: block; color: var(--or-encre-3); font-size: .76rem; line-height: 1.35; }
.or-pref input { position: absolute; opacity: 0; pointer-events: none; }
.or-pref-inter { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: #D6DCE6; transition: background .2s; }
.or-pref-inter::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, .8, .3, 1); }
.or-pref input:checked + .or-pref-inter { background: var(--or-accent); }
.or-pref input:checked + .or-pref-inter::after { transform: translateX(18px); }
.or-pref input:focus-visible + .or-pref-inter { outline: 3px solid var(--or-accent-doux); }

/* ---- Toasts et barre de progression ---- */

.or-toast {
    position: fixed; left: 50%; bottom: calc(var(--or-sa-bas) + 24px); z-index: 1400;
    display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px);
    padding: 12px 16px; border-radius: 14px; background: #0C1B33; color: #FFFFFF; font-size: .9rem;
    box-shadow: 0 10px 30px rgba(6, 24, 58, .35);
    transform: translate(-50%, 20px); opacity: 0; transition: transform .25s cubic-bezier(.3, .8, .3, 1), opacity .2s;
}
.or-toast.est-visible { transform: translate(-50%, 0); opacity: 1; }
.or-toast button { flex: none; padding: 6px 12px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .16); color: #FFFFFF; font-weight: 700; cursor: pointer; }

.or-progres {
    position: fixed; top: 0; left: 0; z-index: 1500; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--or-accent), #6AA8FF);
    box-shadow: 0 0 8px var(--or-accent-doux);
    transition: width .35s ease, opacity .25s ease .1s;
    pointer-events: none;
}
.or-progres.est-fini { opacity: 0; }

/* ---- Les transitions entre pages (Chrome, Edge, Safari 18) ----
   Le fond et la barre ne bougent pas ; seul le contenu se fond. */

@media (max-width: 991.98px), (display-mode: standalone) {
    @view-transition { navigation: auto; }
}
.or-barre { view-transition-name: or-barre; }
.or-aside { view-transition-name: or-aside; }
.or-dock { view-transition-name: or-dock; }
::view-transition-group(or-barre),
::view-transition-group(or-aside),
::view-transition-group(or-dock) { animation-duration: 0s; }
::view-transition-old(root) { animation: or-page-sortie .1s ease both; }
::view-transition-new(root) { animation: or-page-entree .2s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes or-page-sortie { to { opacity: 0; } }
@keyframes or-page-entree { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .or-feuille, .or-voile-feuille, .or-toast, .or-pref-inter::after { transition: none; }
}

/* ==========================================================================
   Téléphone et tablette
   ========================================================================== */

@media (max-width: 991.98px) {

    body { padding-bottom: calc(var(--or-dock-h) + var(--or-sa-bas)); }

    /* Le bouton menu flottant fait place à l'entrée « Menu » du dock (il recouvrait la recherche) */
    .or-ouvrir { display: none !important; }

    /* La barre du haut : zones sûres */
    .or-barre {
        height: calc(var(--or-barre-h) + var(--or-sa-haut));
        padding: var(--or-sa-haut) calc(14px + var(--or-sa-droite)) 0 calc(14px + var(--or-sa-gauche));
    }
    #kt_aside ~ #kt_wrapper { padding-top: calc(var(--or-barre-h) + var(--or-sa-haut)) !important; }
    .content { padding-top: calc(74px + var(--or-sa-haut)) !important; }
    #kt_header { padding-top: calc(70px + var(--or-sa-haut)) !important; }
    .wrapper { padding-left: var(--or-sa-gauche) !important; padding-right: var(--or-sa-droite) !important; }

    /* Le tiroir du menu : zones sûres, et il laisse voir un peu de page */
    .or-aside {
        width: min(86vw, 320px);
        padding-top: calc(16px + var(--or-sa-haut));
        padding-bottom: calc(16px + var(--or-sa-bas));
        padding-left: calc(12px + var(--or-sa-gauche));
        box-shadow: 8px 0 32px rgba(6, 24, 58, .18);
    }
    .or-lien, .or-sous a { min-height: 46px; }
    .or-voile-menu { z-index: 1090; }
    body.or-menu-ouvert .or-voile-menu { z-index: 1090; }
    .or-aside { z-index: 1100; }

    /* Le dock */
    .or-dock {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        height: calc(var(--or-dock-h) + var(--or-sa-bas));
        padding: 6px calc(6px + var(--or-sa-droite)) var(--or-sa-bas) calc(6px + var(--or-sa-gauche));
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: saturate(1.4) blur(14px);
        backdrop-filter: saturate(1.4) blur(14px);
        border-top: 1px solid var(--or-verre-bord);
    }
    .or-dock-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 2px;
        border: 0;
        border-radius: 14px;
        background: none;
        color: var(--or-encre-3);
        font: inherit;
        text-decoration: none;
        cursor: pointer;
        -webkit-appearance: none;
    }
    .or-dock-item:hover { color: var(--or-encre-2); text-decoration: none; }
    .or-dock-icone {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 30px;
        border-radius: 15px;
        transition: background .2s, transform .15s;
    }
    .or-dock-icone i { margin: 0 !important; font-size: 17px; color: inherit !important; }
    .or-dock-libelle { font-size: .66rem; font-weight: 600; letter-spacing: .01em; line-height: 1; }
    .or-dock-item.est-actif { color: var(--or-accent); }
    .or-dock-item.est-actif .or-dock-icone { background: var(--or-accent-doux); }
    .or-dock-item:active .or-dock-icone { transform: scale(.9); }
    .or-dock-badge {
        position: absolute;
        top: -4px;
        right: 4px;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        border: 2px solid #FFFFFF;
        border-radius: 9px;
        background: var(--or-grave);
        color: #FFFFFF;
        font-size: .62rem;
        font-style: normal;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
    }
    /* Le clavier à l'écran : le dock s'efface, il ne doit pas flotter sur les champs */
    html.or-clavier .or-dock { display: none; }
    html.or-clavier body { padding-bottom: 0; }

    /* Ce qui flottait en bas passe au-dessus du dock */
    .or-voir-comme { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 12px) !important; }
    .cta_dock { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 10px) !important; }
    #cta_notifications { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 20px) !important; }

    /* La feuille remonte du bas, pleine largeur */
    .or-feuille {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        max-height: 88vh;
        max-height: 88dvh;
        padding-bottom: var(--or-sa-bas);
        border: 0;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
        opacity: 1;
        transition: transform .3s cubic-bezier(.3, .8, .3, 1);
    }
    .or-feuille.est-ouverte { transform: translateY(0); }
    .or-feuille-poignee { display: block; width: 42px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: #D6DCE6; }
    .or-feuille-tete { padding-top: 8px; }
    .or-toast { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 16px); }

    /* Les fenêtres d'ORION : en plein écran, sans marge */
    .or-popup .modal-dialog { max-width: 100%; margin: 0; height: 100%; }
    .or-popup .modal-content { height: 100%; border-radius: 0; border: 0; }
    .or-popup .modal-header { padding-top: calc(10px + var(--or-sa-haut)); }
    .or-popup .modal-body { flex: 1 1 auto; min-height: 0; }
    .or-popup-cadre { height: calc(100vh - 56px - var(--or-sa-haut) - var(--or-sa-bas)); height: calc(100dvh - 56px - var(--or-sa-haut) - var(--or-sa-bas)); }

    /* Les autres fenêtres (Bootstrap) : une feuille qui monte du bas */
    .modal:not(.or-popup) .modal-dialog {
        display: flex;
        align-items: flex-end;
        min-height: 100%;
        max-width: none;
        margin: 0;
    }
    .modal:not(.or-popup) .modal-content {
        width: 100%;
        max-height: 92vh;
        max-height: 92dvh;
        overflow-y: auto;
        border: 0;
        border-radius: 20px 20px 0 0;
        padding-bottom: var(--or-sa-bas);
    }
    .modal.fade:not(.or-popup) .modal-dialog { transform: translateY(100%); transition: transform .3s cubic-bezier(.3, .8, .3, 1); }
    .modal.show:not(.or-popup) .modal-dialog { transform: none; }

    /* Les onglets défilent au doigt au lieu de s'empiler */
    .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar { display: none; }
    .nav-tabs .nav-item, .nav-pills .nav-item { flex: none; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }
}

@media (max-width: 767.98px) {
    /* iOS zoome sur tout champ de moins de 16 px : on les passe à 16 px, avec une vraie zone de toucher */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select, textarea, .form-control, .custom-select { font-size: 16px !important; }
    .form-control:not(textarea), .custom-select, select.form-control { min-height: 44px; }
    .form-control-sm { min-height: 40px !important; }
    .btn { min-height: 42px; }
    .btn-sm, .btn.btn-sm { min-height: 38px; }
    .btn-icon { min-width: 42px; min-height: 42px; }
    .or-chercher { height: 44px; }

    /* Des cartes qui respirent moins, des titres qui ne débordent pas */
    .card.card-custom { border-radius: 16px; }
    h1, .h1, h2, .h2 { overflow-wrap: anywhere; }
    .dropdown-menu { max-width: calc(100vw - 24px); }
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* La recherche : sa phrase reste lisible (elle était rendue transparente sous 576 px, il ne restait qu'une loupe) */
@media (max-width: 575.98px) {
    .or-chercher input::placeholder { color: var(--or-encre-3); }
    .or-chercher input { text-overflow: ellipsis; }
}

/* ---- Application installée : plein écran, rien de ce qui ne sert qu'à la souris ---- */

html.or-standalone .or-chercher kbd { display: none; }
html.or-standalone body { overscroll-behavior-y: contain; }

/* ==========================================================================
   L'INVITATION À INSTALLER L'APPLICATION (2026-10-17)
   Une carte en bas d'écran, sur téléphone, quand le navigateur sait installer ORION. Au-dessus du dock.
   ========================================================================== */

.or-installer {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--or-sa-bas) + 12px);
    z-index: 1390;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 480px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid #E3E8F0;
    border-radius: 18px;
    background: #FFFFFF;
    color: var(--or-encre);
    box-shadow: 0 14px 40px rgba(6, 24, 58, .28);
    transform: translateY(28px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.3, .8, .3, 1), opacity .2s;
}
.or-installer.est-visible { transform: translateY(0); opacity: 1; }
.or-installer-icone { flex: none; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 1px 4px rgba(6, 24, 58, .2); }
.or-installer-corps { flex: 1 1 auto; min-width: 0; }
.or-installer-titre { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.or-installer-texte { margin-top: 3px; font-size: .86rem; line-height: 1.4; color: var(--or-encre-2); }
.or-installer-partager {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin: 0 .1em;
    vertical-align: -.22em;
    fill: none;
    stroke: var(--or-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.or-installer-actions { display: flex; gap: 8px; margin-top: 12px; }
.or-installer-ok,
.or-installer-plus {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}
.or-installer-ok { background: var(--or-accent); color: var(--or-accent-texte); }
.or-installer-ok:active { background: var(--or-accent-sombre); }
.or-installer-plus { background: transparent; color: var(--or-encre-2); }
.or-installer-plus:active { background: var(--or-accent-doux); }

@media (max-width: 991.98px) {
    .or-installer--dock { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 12px); }
}
.or-installer--haut {
    top: calc(var(--or-sa-haut) + 10px);
    bottom: auto;
    padding: 10px 12px;
    transform: translateY(-28px);
}
.or-installer--haut.est-visible { transform: translateY(0); }
.or-installer--haut .or-installer-icone { width: 40px; height: 40px; }
.or-installer--haut .or-installer-titre { font-size: .92rem; }
.or-installer--haut.or-installer--invite .or-installer-texte { display: none; }
.or-installer--haut .or-installer-actions { margin-top: 8px; }
.or-installer--haut .or-installer-ok,
.or-installer--haut .or-installer-plus { min-height: 40px; }
html.or-clavier .or-installer { display: none; }
@media (prefers-reduced-motion: reduce) {
    .or-installer { transition: none; }
}

/* ==========================================================================
   HALLOWEEN SUR L'INTRANET (2026-10-17) — html.or-hw, du 1er octobre au 2 novembre
   Léger exprès : du CSS seulement (pas d'image à charger, pas d'animation, pas de script). Trois touches : une
   citrouille à côté de la marque, une toile discrète dans le coin bas de l'écran, la bannière du tableau de bord
   (tableau.css). Les variables portent les dessins (data: URI) pour les deux feuilles de style.
   ========================================================================== */

html.or-hw {
    --or-hw-toile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 124' fill='none' stroke='%23FFC48A' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 0L124 0M0 0L115 47M0 0L88 88M0 0L47 115M0 0L0 124M30 0Q23 5 28 11M28 11Q20 13 21 21M21 21Q13 20 11 28M11 28Q5 23 0 30M58 0Q45 9 54 22M54 22Q38 25 41 41M41 41Q25 38 22 54M22 54Q9 45 0 58M88 0Q68 13 81 34M81 34Q57 38 62 62M62 62Q38 57 34 81M34 81Q13 68 0 88'/%3E%3C/svg%3E");
    --or-hw-chauve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 32'%3E%3Cpath fill='%23120824' stroke='%23FFB86B' stroke-width='.9' d='M32 11C30.5 5 28.5 4 27 8.5L26 13C20 6.5 10 4.5 1.5 10.5C8 10.5 12 14.5 14 21C18 16.5 22 16.5 25 20.5C27 18.5 29.5 18.5 32 25C34.5 18.5 37 18.5 39 20.5C42 16.5 46 16.5 50 21C52 14.5 56 10.5 62.5 10.5C54 4.5 44 6.5 38 13L37 8.5C35.5 4 33.5 5 32 11Z'/%3E%3C/svg%3E");
}

html.or-hw .or-marque-nom::after { content: " \1F383"; }

@media (min-width: 992px) {
    html.or-hw body::after {
        content: "";
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 50;
        width: 120px;
        height: 120px;
        background: var(--or-hw-toile) left top / contain no-repeat;
        transform: rotate(180deg);
        opacity: .45;
        pointer-events: none;
    }
}

/* ==========================================================================
   DOCK : L'ACCUEIL ROND AU CENTRE (2026-10-17)
   Standard et Planning à gauche, Bureau et Menu à droite ; l'accueil est un bouton rond posé dans une encoche de la
   barre, séparé de ses voisins par deux petits arcs. Aux couleurs d'Halloween en saison (html.or-hw).
   ========================================================================== */

:root {
    --or-dock-encoche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 62'%3E%3Cpath fill='%23FFFFFF' d='M0 0H10Q19 0 23.8 8A27 27 0 0 0 72.2 8Q77 0 86 0H96V62H0Z'/%3E%3Cpath fill='none' stroke='%23EAEEF4' d='M0 .5H10Q19 .5 23.8 8.5A27 27 0 0 0 72.2 8.5Q77 .5 86 .5H96'/%3E%3C/svg%3E");
}

@media (max-width: 991.98px) {
    .or-dock {
        padding: 0;
        align-items: stretch;
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-top: 0;
        /* L'ombre suit la forme de la barre, encoche comprise */
        filter: drop-shadow(0 -2px 8px rgba(15, 35, 75, .10));
    }
    .or-dock-cote {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        padding: 6px 4px var(--or-sa-bas);
        background: #FFFFFF;
        border-top: 1px solid var(--or-verre-bord);
    }
    .or-dock-cote:first-child { padding-left: calc(4px + var(--or-sa-gauche)); }
    .or-dock-cote:last-child { padding-right: calc(4px + var(--or-sa-droite)); }

    .or-dock-centre {
        position: relative;
        flex: none;
        width: 96px;
        background:
            linear-gradient(#FFFFFF, #FFFFFF) left bottom / 100% var(--or-sa-bas) no-repeat,
            var(--or-dock-encoche) left top / 96px var(--or-dock-h) no-repeat;
    }
    .or-dock-centre .or-dock-accueil {
        position: absolute;
        inset: 0;
        flex: none;
        padding: 0;
        border-radius: 0;
        justify-content: flex-end;
    }
    .or-dock-bouton {
        position: absolute;
        top: -27px;
        left: 50%;
        width: 46px;
        height: 46px;
        margin-left: -23px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--or-accent), var(--or-accent-sombre));
        color: #FFFFFF;
        box-shadow: 0 8px 18px -6px var(--or-accent);
        transition: transform .15s, box-shadow .2s;
    }
    .or-dock-bouton i { margin: 0 !important; font-size: 18px; color: inherit !important; }
    .or-dock-accueil:active .or-dock-bouton { transform: scale(.93); }
    .or-dock-accueil.est-actif .or-dock-bouton { box-shadow: 0 0 0 3px var(--or-accent-doux), 0 8px 18px -6px var(--or-accent); }
    .or-dock-accueil .or-dock-libelle {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(8px + var(--or-sa-bas));
        text-align: center;
        color: var(--or-encre-3);
    }
    .or-dock-accueil.est-actif .or-dock-libelle { color: var(--or-accent); }

    /* Le bouton dépasse la barre de 27 px : ce qui flotte au-dessus du dock monte d'autant */
    .or-toast { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 38px); }
    .or-installer--dock { bottom: calc(var(--or-dock-h) + var(--or-sa-bas) + 36px); }

    /* Halloween : une citrouille à la place de la maison */
    html.or-hw .or-dock-bouton {
        background: radial-gradient(circle at 36% 28%, #FFB04A 0%, #FF7A00 55%, #B83D00 100%);
        box-shadow: 0 0 0 2px rgba(255, 224, 138, .55), 0 8px 20px -6px rgba(255, 106, 0, .85);
    }
    html.or-hw .or-dock-accueil.est-actif .or-dock-bouton {
        box-shadow: 0 0 0 3px rgba(142, 68, 255, .45), 0 8px 20px -6px rgba(255, 106, 0, .85);
    }
    html.or-hw .or-dock-bouton i { display: none; }
    html.or-hw .or-dock-bouton::before {
        content: "";
        position: absolute;
        top: -6px;
        left: 50%;
        width: 8px;
        height: 10px;
        margin-left: -3px;
        border-radius: 3px 3px 1px 1px;
        background: #5C7A1F;
        transform: rotate(9deg);
    }
    html.or-hw .or-dock-bouton::after {
        content: "";
        position: absolute;
        inset: 8px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%232A1150'%3E%3Cpath d='M14 22L27 31L12 34Z'/%3E%3Cpath d='M50 22L37 31L52 34Z'/%3E%3Cpath d='M32 35L37 44L27 44Z'/%3E%3Cpath d='M13 46L22 53L28 46L32 54L36 46L42 53L51 46C46 60 18 60 13 46Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
        filter: drop-shadow(0 0 3px rgba(255, 224, 138, .9));
        animation: or-hw-lueur 3.4s steps(1, end) infinite;
    }
}

/* ---- La lueur de bougie, partagée (dock, décoration de la barre latérale) ---- */
@keyframes or-hw-lueur {
    0%   { opacity: 1; }
    9%   { opacity: .72; }
    15%  { opacity: .95; }
    38%  { opacity: .8; }
    44%  { opacity: 1; }
    71%  { opacity: .68; }
    78%  { opacity: .92; }
}

/* ==========================================================================
   HALLOWEEN : LA DÉCORATION ANIMÉE DE LA BARRE LATÉRALE (2026-10-17)
   Dans le vide au-dessus du SGO : une citrouille qui se balance et vacille, un fantôme qui flotte. Seulement
   si l'écran est assez haut (sinon elle mangerait le menu). Transform et opacity seulement : rien à repeindre.
   ========================================================================== */

html.or-hw {
    --or-hw-citrouille: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 150'%3E%3Cpath d='M76 34C72 20 78 9 92 4C91 14 88 24 86 36Z' fill='%236B8A22'/%3E%3Cellipse cx='46' cy='88' rx='38' ry='52' fill='%23E86A00'/%3E%3Cellipse cx='114' cy='88' rx='38' ry='52' fill='%23E86A00'/%3E%3Cellipse cx='80' cy='88' rx='40' ry='57' fill='%23FF8A1F'/%3E%3Cpath d='M63 38C53 72 53 106 63 140M97 38C107 72 107 106 97 140' stroke='%23B84300' stroke-width='2' fill='none' opacity='.55'/%3E%3Cg fill='%23FFE08A'%3E%3Cpath d='M52 68L71 84L49 87Z'/%3E%3Cpath d='M108 68L89 84L111 87Z'/%3E%3Cpath d='M80 92L88 105L72 105Z'/%3E%3Cpath d='M50 112L61 122L70 111L80 123L90 111L99 122L110 112C102 136 58 136 50 112Z'/%3E%3C/g%3E%3C/svg%3E");
    --or-hw-fantome: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 2C9 2 3 10 3 21V44L9 39L14 45L20 39L26 45L31 39L37 44V21C37 10 31 2 20 2Z' fill='%23F3ECFF'/%3E%3Cellipse cx='14' cy='20' rx='3' ry='4.5' fill='%232A1150'/%3E%3Cellipse cx='26' cy='20' rx='3' ry='4.5' fill='%232A1150'/%3E%3Cellipse cx='20' cy='30' rx='4' ry='5' fill='%232A1150'/%3E%3C/svg%3E");
}

@keyframes or-hw-balancer { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes or-hw-flotter {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(12px, -9px); }
    50% { transform: translate(0, -16px); }
    75% { transform: translate(-12px, -7px); }
}

@media (min-height: 760px) {
    html.or-hw .or-aside-pied { position: relative; }
    /* De la place pour qu'une longue liste puisse défiler au-dessus de la décoration */
    html.or-hw .or-nav { padding-bottom: 112px; }

    html.or-hw .or-aside-pied::before {
        content: "";
        position: absolute;
        left: 20%;
        bottom: calc(100% + 6px);
        width: 78px;
        height: 74px;
        background: var(--or-hw-citrouille) center / contain no-repeat;
        filter: drop-shadow(0 0 12px rgba(255, 122, 0, .55));
        transform-origin: 50% 92%;
        pointer-events: none;
        animation: or-hw-balancer 5.2s ease-in-out infinite, or-hw-lueur 3.4s steps(1, end) infinite;
    }
    html.or-hw .or-aside-pied::after {
        content: "";
        position: absolute;
        right: 18%;
        bottom: calc(100% + 30px);
        width: 42px;
        height: 50px;
        background: var(--or-hw-fantome) center / contain no-repeat;
        opacity: .92;
        pointer-events: none;
        animation: or-hw-flotter 7s ease-in-out infinite;
    }
    body.or-replie .or-aside-pied::before,
    body.or-replie .or-aside-pied::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    html.or-hw .or-aside-pied::before,
    html.or-hw .or-aside-pied::after,
    html.or-hw .or-dock-bouton::after { animation: none; }
}

/* =====================================================================================================================
   Telephone : passe du 2026-10-16 (apercu mobile)
   ===================================================================================================================== */
@media (max-width: 991.98px) {

    /* Sur certaines pages (telephonie, appels enregistres...), le pied de page est pose a cote du contenu, dans la rangee de la
       page : il lui prenait 58 px de large et le contenu s'arretait avant le bord droit. La rangee passe a la ligne : contenu en
       pleine largeur, pied dessous. */
    .page { flex-wrap: wrap; }
    .page > #kt_wrapper { flex: 1 1 100%; min-width: 0; max-width: 100%; }
    .page > #kt_footer { flex: 1 1 100%; }

    /* Les champs et cases masques (select2, cases a cocher) se placent par rapport a la carte, hors du defilement : ils
       elargissaient toute la page (infrastructures.php : 72 px de defilement lateral). Le defilement les contient. */
    .tableau_defilant,
    .table-responsive { position: relative; }
}

@media (max-width: 767.98px) {

    /* Pastilles de filtre (recrutement, dossiers) : une rangee qui defile, jamais des ronds ecrases */
    .dos_filtres { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .dos_filtres::-webkit-scrollbar { display: none; }
    .dos_filtre { flex: none; white-space: nowrap; }

    /* Filtres des pages de gestion (grades, aptitudes, infrastructures...) : une etiquette au-dessus de chaque champ, au lieu
       d'un tableau de deux rangees plus large que l'ecran (global.js pose filtres_cartes et data-titre) */
    table.filtres_cartes,
    table.filtres_cartes > tbody,
    table.filtres_cartes > tbody > tr,
    table.filtres_cartes > tbody > tr > td { display: block; width: auto !important; padding: 0; border: 0; }
    table.filtres_cartes { margin-bottom: 8px; }
    table.filtres_cartes > tbody > tr:first-child > td:not(:first-child) { display: none; }
    table.filtres_cartes > tbody > tr:first-child > td:first-child {
        display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 0 0 8px;
    }
    table.filtres_cartes > tbody > tr:first-child > td:first-child br { display: none; }
    table.filtres_cartes > tbody > tr:nth-child(2) > td { padding: 0 0 10px; }
    table.filtres_cartes > tbody > tr:nth-child(2) > td::before {
        content: attr(data-titre); display: block; margin-bottom: 4px;
        color: var(--or-encre-3); font-size: 12px; font-weight: 700;
    }
    /* Cartes : le contenu d'une cellule (plusieurs pastilles...) passe a la ligne, aligne a droite, au lieu de depasser la carte */
    table.tableau_cartes > tbody > tr > td { flex-wrap: wrap; justify-content: flex-end; }
    table.tableau_cartes > tbody > tr > td::before { margin-right: auto; }

    /* (le champ d'origine masque par select2 reste a 1 px : il elargissait la page) */
    table.filtres_cartes .form-control:not(.select2-hidden-accessible),
    table.filtres_cartes .select2-container { width: 100% !important; }
}

/* ---- Dossiers modernisés (2026-10-17) : l'insigne du grade en photo, liste en lignes, fiche allégée ---- */
.dos_photo {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background-color: #F3F6F9; background-size: cover; background-position: center; background-repeat: no-repeat;
    box-shadow: 0 0 0 2px #FFFFFF, 0 2px 8px rgba(15, 23, 42, .12);
}
.dos_photo_init { background: var(--or-accent-doux); color: var(--or-accent); font-size: 14px; font-weight: 700; }
.dos_photo_xl { width: 104px; height: 104px; font-size: 32px; box-shadow: 0 0 0 5px #FFFFFF, 0 8px 24px rgba(15, 23, 42, .18); }

.dos_liste_carte { overflow: hidden; }
.dos_outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--or-verre-bord); }
.dos_outils .dos_recherche { flex: 1 1 260px; }
.dos_outils .dos_recherche input { width: 100%; }
.dos_outils .dos_filtres { margin: 0; }
.dos_tris { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: #F3F6F9; }
.dos_tris > span { padding: 0 8px 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--or-encre-3); }
.dos_tri { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--or-encre-2); cursor: pointer; }
.dos_tri.est-actif { background: #FFFFFF; color: var(--or-accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }

.dos_lignes { display: flex; flex-direction: column; }
.dos_ligne {
    display: grid; grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, .8fr) 56px 14px; align-items: center; gap: 16px;
    padding: 12px 20px; border-bottom: 1px solid var(--or-verre-trait); color: var(--or-encre); text-decoration: none; transition: background .12s;
}
.dos_ligne:last-child { border-bottom: 0; }
.dos_ligne:hover { background: #F7F9FC; text-decoration: none; color: var(--or-encre); }
.dos_ligne:hover .dos_ligne_fleche { color: var(--or-accent); transform: translateX(2px); }
.dos_ligne_qui { display: flex; flex-direction: column; min-width: 0; }
.dos_ligne_qui b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos_ligne_qui small { color: var(--or-encre-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dos_matricule { margin-left: 8px; padding: 0 6px; border-radius: 4px; background: #F3F6F9; color: var(--or-encre-3); font-size: 11px; font-weight: 600; }
.dos_ligne_int { display: flex; flex-direction: column; font-size: 13px; color: var(--or-encre-2); }
.dos_ligne_int small { color: var(--or-encre-3); font-size: 11.5px; }
.dos_ligne_etat { display: flex; align-items: center; gap: 6px; justify-content: flex-start; }
.dos_sans_compte { color: var(--or-encre-3); font-size: 12px; }
.dos_ligne_pieces { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--or-encre-2); font-weight: 600; font-size: 13px; }
.dos_ligne_pieces i { color: var(--or-encre-3); }
.dos_ligne_fleche { color: #C4C8D4; font-size: 11px; transition: transform .12s, color .12s; }

.dos_hero { overflow: hidden; }
.dos_hero_bandeau { height: 84px; background: linear-gradient(120deg, var(--or-accent) 0%, #7a0d12 100%); }
.dos_hero .dos_hero_ligne { align-items: flex-end; margin-top: -60px; padding-top: 0; }
.dos_hero .dos_hero_texte { padding-bottom: 4px; }
.dos_hero .dos_hero_nom { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 22px; }
.dos_hero_role { margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #F3F6F9; color: var(--or-encre-2); font-size: 12px; font-weight: 600; }
.dos_hero .dos_faits { padding-bottom: 4px; }
.dos_hero .dos_faits > div { padding: 8px 14px; border-radius: 10px; background: #F7F9FC; }
.dos_hero .dos_faits span { font-size: 11.5px; color: var(--or-encre-3); }

.dos_bloc { padding: 20px 22px; }
.dos_bloc_tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dos_bloc_tete h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--or-encre); }
.dos_bloc_tete h3 i { margin-right: 10px; color: var(--or-accent); }
.dos_bloc_vide { color: var(--or-encre-3); padding: 12px 0; }
.dos_bloc_vide i { margin-right: 8px; }
.dos_contacts { display: flex; flex-direction: column; gap: 4px; }
.dos_contacts i { width: 18px; margin-right: 6px; color: var(--or-encre-3); }
.dos_puces { display: flex; flex-wrap: wrap; gap: 6px; }
.dos_puces.est-replie .dos_puce:nth-child(n+17):not(.dos_puce_plus) { display: none; }
.dos_puce { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 0; line-height: 1.4; }
.dos_puce_info { background: #E6F4FA; color: #0A6A9B; }
.dos_puce_warning { background: #FFF4DE; color: #8A5A00; }
.dos_puce_plus { background: transparent; color: var(--or-accent); cursor: pointer; }
.dos_puce_plus:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .dos_ligne { grid-template-columns: 40px minmax(0, 1fr) auto 12px; gap: 12px; padding: 12px 16px; }
    .dos_ligne .dos_photo { width: 40px; height: 40px; }
    .dos_ligne_int, .dos_ligne_etat { display: none; }
    .dos_outils { padding: 12px 16px; }
    .dos_tris { width: 100%; justify-content: space-between; }
    .dos_hero .dos_hero_ligne { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .dos_hero .dos_hero_texte { flex: none; width: 100%; }
    .dos_hero .dos_faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; width: 100%; }
    .dos_hero .dos_hero_nom, .dos_hero .dos_faits { justify-content: center; }
    .dos_photo_xl { width: 92px; height: 92px; }
    .dos_bloc { padding: 16px; }
}

/* L'inventaire au Standard (2026-10-17) : l'icône de la pastille d'un engin, teintée par la dernière vérification */
.moy_engin .st_inv { margin-left: 6px; padding: 3px; border-radius: 6px; background: rgba(255, 255, 255, .85); font-size: 11px; cursor: pointer; }
.moy_engin .st_inv:hover { background: #FFFFFF; box-shadow: 0 0 0 2px rgba(15, 23, 42, .2); }
.moy_engin .st_inv_ok { color: #1F9D55 !important; }
.moy_engin .st_inv_anomalie { color: #E8590C !important; }
.moy_engin .st_inv_vieux { color: #B7791F !important; }
.moy_engin .st_inv_jamais { color: #8A8FA8 !important; }

/* Les boutons de couleur gardent la couleur du thème (bleu, vert…) : leur ombre suit leur fond, plus le rouge d'ORION (2026-10-17) */
.btn.btn-primary { --btn-ombre: rgba(54, 153, 255, .85); }
.btn.btn-success { --btn-ombre: rgba(27, 197, 189, .85); }
.btn.btn-warning { --btn-ombre: rgba(255, 168, 0, .85); }
.btn.btn-info { --btn-ombre: rgba(137, 80, 252, .85); }
.btn.btn-dark { --btn-ombre: rgba(24, 28, 50, .7); }
.btn.btn-primary, .btn.btn-success, .btn.btn-warning, .btn.btn-info, .btn.btn-dark { box-shadow: 0 8px 20px -10px var(--btn-ombre); }
.btn.btn-primary:hover, .btn.btn-success:hover, .btn.btn-warning:hover, .btn.btn-info:hover, .btn.btn-dark:hover,
.btn.btn-primary:focus, .btn.btn-success:focus, .btn.btn-warning:focus, .btn.btn-info:focus, .btn.btn-dark:focus { box-shadow: 0 12px 26px -10px var(--btn-ombre); }

/* Le bouton « haut de page » : au-dessus de la bulle de discussion, et bien visible */
#kt_scrolltop.scrolltop { bottom: 96px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: var(--or-accent); border: 0; box-shadow: 0 8px 22px -8px var(--or-accent); z-index: 1040; }
#kt_scrolltop.scrolltop .svg-icon svg g [fill] { fill: #FFFFFF; }
#kt_scrolltop.scrolltop:hover { filter: brightness(1.08); }

/* ---- Ma formation refaite (2026-10-17) : l'avancement en tête, le parcours avec les insignes, des colonnes équilibrées ---- */
.fo_avancement .av_hero { margin-top: 0; border: 0; box-shadow: none; padding: 4px 4px 18px; border-bottom: 1px dashed var(--or-verre-bord); border-radius: 0; }
.fo_avancement .av_conditions_bas { margin: 0 0 18px; }
.fo_avancement .fo_frise_tete { margin-top: 18px; }
.fo_etape_tete .fo_etape_insigne { width: 52px; height: 52px; font-size: 15px; margin-bottom: 8px; display: inline-flex; }
.fo_etape.est-avenir:not(.est-prochain) .fo_etape_insigne { filter: grayscale(1); opacity: .5; }
.fo_etape.est-actuel .fo_etape_insigne { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--or-accent); }
.fo_etape.est-prochain .fo_etape_insigne { box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px #2B6CE6; }
.fo_rangee { margin-top: 8px; }
.fo_specialites_bloc { margin-top: 10px; }
.fo_grille_spe { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.fo_titre_cours { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--or-verre-bord); }

/* Les sections de « Ma formation » (2026-10-17) : une seule à la fois */
.fo_sections_nav { position: sticky; top: 70px; z-index: 4; display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 16px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px); border: 1px solid var(--or-verre-bord); box-shadow: 0 4px 18px -10px rgba(15, 23, 42, .25); width: max-content; max-width: 100%; }
.fo_sections_nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; color: var(--or-encre-2); font-weight: 600; font-size: 13.5px; text-decoration: none; }
.fo_sections_nav a:hover { background: #F3F6F9; text-decoration: none; }
.fo_sections_nav a.est-actif { background: var(--or-accent); color: #FFFFFF; }
.fo_sections_nav a span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: 11.5px; text-align: center; }
.fo_sections_nav a.est-actif span { background: rgba(255, 255, 255, .25); }
.fo_partie[hidden] { display: none !important; }
.fo_partie .fo_rangee { margin-top: 0; }
.fo_partie .fo_specialites_bloc { margin-top: 0; }
.fo_partie .fo_frise_carte { margin-top: 0; }
.fo_grille_spe .fo_description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .fo_sections_nav { top: 60px; border-radius: 14px; width: auto; } .fo_sections_nav a { padding: 7px 12px; font-size: 12.5px; } }

/* Les onglets du dossier, des bureaux et des outils de formation : les pastilles de « Ma formation » (2026-10-17) */
.nav.nav-tabs.nav-tabs-line.or_onglets { position: sticky; top: 70px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; width: max-content; max-width: 100%; margin: 18px 0 18px; padding: 6px;
    border: 1px solid var(--or-verre-bord); border-radius: 999px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: 0 4px 18px -10px rgba(15, 23, 42, .25); }
.nav.nav-tabs.nav-tabs-line.or_onglets .nav-item { margin: 0 !important; }
.nav.nav-tabs.nav-tabs-line.or_onglets .nav-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 8px 16px; border: 0 !important; border-radius: 999px;
    background: transparent; color: var(--or-encre-2); font-weight: 600; font-size: 13.5px; line-height: 1.3; text-decoration: none; transition: background .15s, color .15s; }
.nav.nav-tabs.nav-tabs-line.or_onglets .nav-link i { margin: 0 !important; color: inherit !important; font-size: 13px; }
.nav.nav-tabs.nav-tabs-line.or_onglets .nav-link:hover { background: #F3F6F9; color: var(--or-encre); }
.nav.nav-tabs.nav-tabs-line.or_onglets .nav-link.active, .nav.nav-tabs.nav-tabs-line.or_onglets .nav-link.active:hover { background: var(--or-accent); color: #FFFFFF; }
.or_onglets .or_onglet_n, .or_onglets .dos_compte { min-width: 20px; margin: 0; padding: 0 6px; border-radius: 999px; background: rgba(0, 0, 0, .08); color: inherit; font-size: 11.5px; font-weight: 700; text-align: center; }
.or_onglets .or_onglet_alerte { background: #F64E60; color: #FFFFFF; }
.or_onglets .nav-link.active .or_onglet_n, .or_onglets .nav-link.active .dos_compte { background: rgba(255, 255, 255, .25); color: #FFFFFF; }
.bur_onglets.or_onglets { margin-top: 0; }
@media (max-width: 767px) { .nav.nav-tabs.nav-tabs-line.or_onglets { top: 60px; border-radius: 14px; width: auto; } .nav.nav-tabs.nav-tabs-line.or_onglets .nav-link { padding: 7px 12px; font-size: 12.5px; } }

/* Alignements de « Ma formation » (2026-10-17) : en-tête de la frise, étapes centrées sur leur marque, note du titre */
.fo_frise_tete { align-items: center; }
.fo_frise_tete .fo_frise_resume { margin-left: auto; }
.fo_frise_tete .fo_frise_regler { margin-left: 0; }
.fo_frise_tete .fo_frise_regler i { font-size: 12px; }
.fo_etape .fo_marque { margin: 0 auto 12px; }
.fo_etape_tete { text-align: center; }
.fo_etape_tete .fo_etape_insigne { margin: 0 auto 8px; }
.fo_etape_tete b, .fo_etape_tete span { text-align: center; }
.fo_etape > .fo_formation_aucune, .fo_etape > .fo_etape_compte { text-align: center; }
.fo_specialites_bloc .fo_titre { flex-wrap: wrap; align-items: baseline; }
.fo_specialites_bloc .fo_titre i { align-self: center; }
.fo_specialites_bloc .fo_titre_note { display: inline-block; margin: 0 0 0 12px; padding: 2px 10px; border-radius: 999px; background: var(--or-accent-doux); color: var(--or-accent); font-size: .78rem; }
.fo_partie .fo_rangee .fo_titre:first-child { margin-top: 0; }
@media (max-width: 767px) { .fo_frise_tete .fo_frise_resume { margin-left: 0; flex-basis: 100%; } }

.bur_volet[hidden] { display: none !important; }

/* ==========================================================================
   Luminosité (2026-10-18) : Normal / Atténué / Sombre
   La classe est posée sur <html> par include/composant/header/header_global_css.php,
   avant les feuilles de style (pas d'éclair blanc) ; « Atténué » par défaut quand le
   site est ouvert dans FiveM (html.or-fivem), où les packs graphiques le surexposent.
   Deux leviers : des fonds moins blancs (les jetons), puis un voile neutre, fixe et
   transparent aux clics, qui assombrit TOUT, y compris les blancs écrits en dur, les
   fenêtres et les cartes. Pas de filter sur la page : il coûte cher au navigateur du
   jeu et se combine mal avec les éléments fixes.
   ========================================================================== */

html.or-lum-attenue { --or-fond: #E9EDF2; --or-verre: #F7F8FA; --or-verre-haut: #F7F8FA; --or-verre-bord: #DFE4EB; }
html.or-lum-sombre  { --or-fond: #DCE1E8; --or-verre: #EEF1F5; --or-verre-haut: #EEF1F5; --or-verre-bord: #D3DAE3; }

html.or-lum-attenue::after,
html.or-lum-sombre::after {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2147483647;
    pointer-events: none;
    background: rgba(6, 12, 24, .14);
}
html.or-lum-sombre::after { background: rgba(6, 12, 24, .30); }

/* Une page ouverte dans une fenêtre d'ORION est déjà sous le voile de la page qui l'ouvre */
html.orion-incruste::after { content: none !important; }

/* Le réglage, dans le menu du compte (header_barre.php) */
.or-lum { padding: 8px 10px 10px; }
.or-lum-tete { display: flex; align-items: center; margin-bottom: 8px; color: var(--or-encre-2); font-size: .88rem; font-weight: 600; }
.or-lum-tete i { flex: none; width: 18px; margin-right: 9px; text-align: center; color: var(--or-encre-3); font-size: 13px; }
.or-lum-crans { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: #EEF1F6; }
.or-lum-crans button {
    flex: 1 1 0; min-width: 0; padding: 6px 4px; border: 0; border-radius: 8px; background: none;
    color: var(--or-encre-2); font: 600 .78rem Poppins, -apple-system, "Segoe UI", Roboto, sans-serif; cursor: pointer;
}
.or-lum-crans button:hover { color: var(--or-accent); }
.or-lum-crans button.est-actif { background: #FFFFFF; color: var(--or-accent-sombre); box-shadow: 0 1px 3px rgba(16, 24, 40, .14); }
.or-lum-note { display: none; margin-top: 7px; color: var(--or-encre-3); font-size: .72rem; line-height: 1.35; }
html.or-fivem .or-lum-note { display: block; }

/* Cahier de consignes d'un bureau (chefs de garde, 2026-10-19, bureau_espace.php) */
.bur_cahier .card-body { display: flex; flex-direction: column; gap: 10px; }
.bur_cs { border: 1px solid #EBEDF3; border-left: 4px solid #3699FF; border-radius: 0 10px 10px 0; padding: 10px 14px; background: #FFFFFF; }
.bur_cs.est-importante { border-left-color: #F64E60; background: #FFF8F9; }
.bur_cs.est-non-lue { box-shadow: 0 0 0 2px rgba(54, 153, 255, .25); }
.bur_cs.est-importante.est-non-lue { box-shadow: 0 0 0 2px rgba(246, 78, 96, .3); }
.bur_cs.est-levee { border-left-color: #B5B5C3; background: #F7F8FA; opacity: .85; }
.bur_cs_tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; }
.bur_cs_qui { color: #7E8299; font-size: 12px; }
.bur_cs_texte { font-size: 13.5px; color: #181C32; line-height: 1.5; overflow-wrap: anywhere; }
.bur_cs_pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; }
.bur_cs_lus { color: #7E8299; display: inline-flex; align-items: center; gap: 6px; }
.bur_cs_lus i { color: #1BC5BD; }
.bur_cs_actions { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.bur_cs_actions form { margin: 0; }
.bur_cs_form { border: 1px dashed #D1D3E0; border-radius: 10px; padding: 12px; background: #F7F9FC; }
.bur_cs_form_pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.bur_cs_echeance { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; }
.bur_cs_echeance input { width: auto; }
.bur_cs_vide { color: #7E8299; font-size: 13px; display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.bur_cs_historique { margin-top: 4px; }
.bur_cs_historique > summary { cursor: pointer; font-weight: 600; color: #5E6278; font-size: 13px; padding: 6px 0; }
.bur_cs_historique[open] > summary { margin-bottom: 8px; }
.bur_cs_historique .bur_cs + .bur_cs { margin-top: 8px; }
.bur_cs_pages { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; font-size: 12.5px; }

/* Menu du profil : le service affiché (2026-11-02) — la pastille ne s'étire pas comme le texte */
.or-avis .or-pastille { flex: none; margin: 0 13px 0 4px; }
.or-avis.est-actif { color: var(--or-accent); cursor: default; }
.or-avis.est-actif > i:last-child { color: var(--or-accent) !important; font-size: 11px; }

/* SAMU (2026-11-05) : la feuille de garde, gros bouton au-dessus du Standard */
.or-lien.or-gros-bouton { padding-top: 14px; padding-bottom: 14px; margin-bottom: 6px; background: var(--or-accent); color: var(--or-accent-texte, #FFFFFF); font-weight: 700; font-size: 1rem; border-radius: 12px; }
.or-lien.or-gros-bouton > i:first-child { color: inherit !important; opacity: 1; font-size: 1.15rem; }
.or-lien.or-gros-bouton:hover { filter: brightness(1.08); background: var(--or-accent); color: var(--or-accent-texte, #FFFFFF); }


/* ==========================================================================
   LE MENU DU COMPTE, EN CARTES (2026-11-10)
   ========================================================================== */
.or-menu-compte.or-mc { width: 320px; padding: 0; max-height: calc(100vh - 90px); overflow-y: auto; border-radius: 16px; }
.or-mc-tete { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
    background: linear-gradient(135deg, var(--or-accent-doux), transparent 70%); border-bottom: 1px solid var(--or-verre-trait); }
.or-mc-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background-size: cover; background-position: center;
    box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--or-accent); }
.or-mc-qui { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.or-mc-qui b { font-size: .95rem; color: var(--or-encre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-mc-qui small { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--or-encre-2); }
.or-mc-qui small i { font-size: 7px; color: var(--or-accent) !important; }
.or-mc-titre { padding: 14px 16px 7px; font-size: .68rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--or-encre-3); }
.or-mc-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.or-mc-tuile { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 10px 14px; border-radius: 12px;
    background: #F5F7FB; border: 1px solid transparent; color: var(--or-encre); text-decoration: none; overflow: hidden;
    transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.or-mc-tuile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--or-mc-teinte, var(--or-accent)); }
.or-mc-tuile b { font-size: .84rem; }
.or-mc-tuile small { font-size: .72rem; color: var(--or-encre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-mc-tuile i { position: absolute; top: 9px; right: 9px; font-size: 13px; color: var(--or-mc-teinte, var(--or-accent)) !important; }
.or-mc-tuile:hover { transform: translateY(-1px); border-color: var(--or-mc-teinte, var(--or-accent)); background: #FFFFFF; color: var(--or-encre); text-decoration: none; }
.or-mc-tuile.est-actif { background: #FFFFFF; border-color: var(--or-mc-teinte, var(--or-accent)); box-shadow: 0 4px 14px rgba(12, 27, 51, .08); cursor: default; }
.or-mc-sp { --or-mc-teinte: var(--or-sp); }
.or-mc-fdo { --or-mc-teinte: var(--or-fdo); }
.or-mc-sam { --or-mc-teinte: var(--or-sam); }
.or-mc-rou { --or-mc-teinte: var(--or-rou); }
.or-mc-perso { display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 8px 10px; border-radius: 12px; color: var(--or-encre);
    border: 1px dashed var(--or-verre-trait); text-decoration: none; transition: background .12s ease, border-color .12s ease; }
.or-mc-perso:hover { background: #F5F7FB; border-color: var(--or-accent); color: var(--or-encre); text-decoration: none; }
.or-mc-init { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #6366F1, #8B5CF6); }
.or-mc-perso span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.or-mc-perso b { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.or-mc-perso small { font-size: .72rem; color: var(--or-encre-3); }
.or-mc-perso > i { color: var(--or-encre-3) !important; font-size: 12px; }
.or-mc-pastilles { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.or-mc-pastille { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: #F5F7FB;
    font-size: .76rem; font-weight: 600; color: var(--or-encre-2); text-decoration: none; border: 1px solid transparent; }
.or-mc-pastille i { font-size: 11px; color: var(--or-encre-3) !important; }
.or-mc-pastille:hover { border-color: var(--or-accent); color: var(--or-encre); text-decoration: none; }
.or-mc-pastille.est-actif { background: var(--or-accent); color: #FFFFFF; }
.or-mc-pastille.est-actif i { color: #FFFFFF !important; }
.or-mc-trait { height: 1px; margin: 14px 16px 10px; background: var(--or-verre-trait); }
.or-mc-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; padding: 0 12px; }
.or-mc-action { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; color: var(--or-encre-2);
    font-size: .7rem; font-weight: 600; text-decoration: none; text-align: center; transition: background .12s ease, color .12s ease; }
.or-mc-action i { font-size: 16px; color: var(--or-encre-3) !important; }
.or-mc-action:hover { background: #F5F7FB; color: var(--or-accent); text-decoration: none; }
.or-mc-action:hover i { color: var(--or-accent) !important; }
.or-mc .or-lum { margin: 8px 12px 0; }
.or-mc-quitter { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px; padding: 9px; border-radius: 12px;
    font-size: .8rem; font-weight: 700; color: var(--or-grave, #C62828); background: #FEF2F2; text-decoration: none; }
.or-mc-quitter i { color: inherit !important; }
.or-mc-quitter:hover { background: #FEE2E2; color: var(--or-grave, #C62828); text-decoration: none; }

/* Le bouton Administration, au-dessus de « Ouvrir le SGO » */
.or-cta-admin { background: linear-gradient(135deg, #312E81, #4F46E5); box-shadow: 0 6px 16px rgba(79, 70, 229, .25); }
.or-cta-admin:hover { background: linear-gradient(135deg, #3730A3, #6366F1); }
.or-cta-admin span { display: flex; flex-direction: column; line-height: 1.2; }
.or-cta-admin small { font-size: .68rem; font-weight: 500; opacity: .75; }
.or-cta-admin.est-ouverte { background: linear-gradient(135deg, #065F46, #059669); box-shadow: 0 6px 16px rgba(5, 150, 105, .25); }
.or-cta-admin span::after { content: none; display: none; }
.or-cta-admin small { display: block; color: rgba(255, 255, 255, .7); font-size: .72rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Le bas du menu du compte, centré et aligné sur les blocs du dessus (2026-11-10) */
.or-mc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 12px; }
.or-mc-action { flex: 1 1 0; min-width: 72px; max-width: 104px; white-space: nowrap; }
.or-mc .or-lum { margin: 12px 12px 0; padding: 0; }
.or-mc .or-lum-tete { justify-content: center; }
.or-mc .or-lum-tete i { width: auto; margin-right: 7px; }