/* ============================================================
   CHARTE & SYSTEME VISUEL — Plateforme TUC  (v2, refonte UX)
   Bleu #19529E · Or #DCBF1B · Rouge #C8102E (sensible) · Nunito
   ============================================================ */
:root{
  --bleu:#19529E; --bleu-700:#123c75; --bleu-050:#eaf1fb;
  --or:#DCBF1B; --or-050:#fbf6dd; --or-700:#7a6700;
  --rouge:#C8102E; --vert:#1d7a40; --vert-050:#e7f4ec;
  --fond:#f3f5f9; --carte:#ffffff; --bord:#e6e9f0; --bord-fort:#d4dae6;
  --txt:#2b3242; --txt-2:#5b6577; --txt-3:#8a93a6;
  --r:14px; --r-sm:10px;
  --ombre:0 1px 2px rgba(18,60,117,.06), 0 8px 24px rgba(18,60,117,.07);
  --ombre-sm:0 1px 2px rgba(18,60,117,.08);
  --police:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--police);color:var(--txt);background:var(--fond);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
button{font-family:inherit}

/* ---------- Boot ---------- */
.tuc-boot{min-height:100vh;display:grid;place-content:center;gap:14px;text-align:center;color:var(--txt-3)}
.tuc-boot__logo{width:84px;height:84px;border-radius:22px;margin:0 auto;background:var(--bleu);color:#fff;font-weight:800;font-size:30px;display:grid;place-content:center;box-shadow:var(--ombre)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-content:center;padding:24px;background:radial-gradient(1200px 500px at 50% -10%, var(--bleu-050), var(--fond))}
.login-card{background:var(--carte);border-radius:20px;box-shadow:var(--ombre);padding:34px;width:min(540px,94vw);border:1px solid var(--bord)}
.login-card h1{color:var(--bleu-700);font-size:24px;font-weight:800}
.login-card p{color:var(--txt-2);margin:6px 0 22px}
.login-roles{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.login-role{text-align:left;border:1.5px solid var(--bord);background:var(--carte);border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:800;color:var(--txt);transition:.15s}
.login-role:hover{border-color:var(--bleu);background:var(--bleu-050);transform:translateY(-1px)}
.login-role small{display:block;font-weight:500;color:var(--txt-3);margin-top:3px;font-size:12px}
.login-card input{width:100%;padding:11px 13px;border:1.5px solid var(--bord);border-radius:10px;font-family:inherit;font-size:15px;margin-bottom:12px}
.login-mode{margin-top:20px;font-size:12px;color:var(--txt-3);text-align:center}
.badge-mode{display:inline-block;background:var(--or);color:#3a3000;font-weight:800;padding:2px 9px;border-radius:6px}

/* ---------- Coquille ---------- */
.app-shell{display:grid;grid-template-columns:264px 1fr;grid-template-rows:auto 1fr;grid-template-areas:"nav header" "nav main";min-height:100vh}
.app-header{grid-area:header;display:flex;align-items:center;gap:14px;padding:0 26px;height:66px;background:var(--carte);border-bottom:1px solid var(--bord)}
.app-header__title{font-weight:800;font-size:17px;color:var(--bleu-700)}
.app-header__spacer{flex:1}
.app-header__user{display:flex;align-items:center;gap:14px;font-size:14px}
.app-header__user .nom{font-weight:800;color:var(--txt)}
.app-header__roles{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.role-badge{background:var(--or-050);color:#7a6700;font-weight:800;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid #efe2a6}
.btn-logout{background:var(--fond);color:var(--txt-2);border:1px solid var(--bord);padding:8px 14px;border-radius:9px;font-weight:800;cursor:pointer}
.btn-logout:hover{background:#fff;color:var(--bleu)}

/* sidebar */
.app-nav{grid-area:nav;background:var(--bleu-700);color:#fff;padding:0;display:flex;flex-direction:column}
.app-nav__brand{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.app-nav__brand .logo{width:40px;height:40px;border-radius:11px;background:#fff;color:var(--bleu);font-weight:800;display:grid;place-content:center}
.app-nav__brand .nom{font-weight:800;font-size:16px}
.app-nav__label{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.6px;padding:18px 22px 8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;color:rgba(255,255,255,.82);text-decoration:none;font-weight:700;cursor:pointer;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.actif{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--or)}
.nav-item__icone{font-size:19px;width:24px;text-align:center}
.app-nav__pied{margin-top:auto;padding:16px 20px;font-size:11px;color:rgba(255,255,255,.4)}

.app-main{grid-area:main;padding:30px 34px;overflow:auto;max-width:1180px;min-width:0}

/* impersonation */
.banniere-impersonation{grid-area:header;display:none}
body.imp .app-shell{grid-template-rows:auto auto 1fr;grid-template-areas:"nav banner" "nav header" "nav main"}
.banniere-impersonation{display:flex;align-items:center;gap:12px;background:#7a6700;color:#fff;padding:9px 26px;font-weight:800;font-size:13px;grid-area:banner}
.btn-retour{background:var(--or);color:#3a3000;border:0;padding:6px 13px;border-radius:8px;font-weight:800;cursor:pointer}

/* ---------- Typo / sections ---------- */
.ui-titre{font-size:26px;font-weight:800;color:var(--bleu-700);letter-spacing:-.3px}
.ui-sous-titre{color:var(--txt-3);margin:4px 0 26px;font-size:15px}
.ui-section{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px}
.ui-section h2{font-size:17px;font-weight:800;color:var(--bleu-700)}

/* ---------- Grilles ---------- */
.ui-grille{display:grid;gap:18px}
@media(min-width:760px){.ui-grille--2{grid-template-columns:1fr 1fr}.ui-grille--3{grid-template-columns:repeat(3,1fr)}.ui-grille--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Cartes ---------- */
.ui-carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-sm);padding:20px}
.ui-carte__entete{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 14px;gap:10px}
.ui-carte__entete h2,.ui-carte__entete h3{font-size:16px;font-weight:800;color:var(--bleu-700)}

/* ---------- Bloc repliable (accordeon de section) ----------
   Un titre de section qui se replie. Concu pour <details>/<summary> : le
   navigateur porte deja l'etat ouvert/ferme, le clavier et le lecteur d'ecran —
   on n'ajoute que l'habillage. Le chevron est decoratif (aria-hidden), c'est le
   <summary> qui recoit le focus.
   Reutilisable : tout ecran qui a une section a replier prend ces classes. */
.ui-repli{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-sm);margin:6px 0 16px;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.ui-repli:hover{border-color:var(--bord-fort)}
.ui-repli[open]{box-shadow:var(--ombre)}
.ui-repli__tete{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none;transition:background .15s;list-style:none}
.ui-repli__tete::-webkit-details-marker{display:none}
.ui-repli__tete::marker{content:""}
.ui-repli__tete:hover{background:var(--bleu-050)}
/* Le liseré d'accessibilité est en OR : sur un fond bleu clair au survol, un
   contour bleu serait invisible — c'est le repère du clavier, il doit se voir. */
.ui-repli__tete:focus-visible{outline:3px solid var(--or);outline-offset:-3px}
.ui-repli__chev{flex:none;width:28px;height:28px;border-radius:9px;background:var(--bleu-050);color:var(--bleu);display:grid;place-content:center;transition:transform .18s ease,background .15s,color .15s}
.ui-repli[open] .ui-repli__chev{transform:rotate(90deg);background:var(--bleu);color:#fff}
.ui-repli__tete h2{font-size:17px;font-weight:800;color:var(--bleu-700);line-height:1.25}
/* Le compte de ce qui attend dans le bloc. Reste lisible une fois replie —
   c'est justement la qu'il sert : savoir ce qu'on ne voit pas. Ton OR quand il
   y a du travail, neutre a zero : le chiffre est toujours la, mais il n'appelle
   l'oeil que s'il y a lieu. */
.ui-repli__compte{flex:none;min-width:28px;padding:2px 10px;border-radius:999px;background:var(--or-050);color:#6b5a00;font-size:12.5px;font-weight:800;text-align:center;line-height:1.55}
.ui-repli__compte--vide{background:var(--fond);color:var(--txt-3)}
.ui-repli__aide{margin-left:auto;color:var(--txt-3);font-size:12.5px;font-weight:600;text-align:right}
.ui-repli__corps{padding:16px 18px 18px;border-top:1px solid var(--bord)}

/* ---------- Repli de GROUPE : un bloc qui en contient d'autres ----------
   Demande DG du 12/08/2026 : regrouper les deux accordeons de travail sous un
   bloc par diplome. Il faut donc DEUX niveaux lisibles d'un coup d'oeil, sinon
   on ne sait plus lequel ouvre quoi.
   Le groupe se distingue par un titre plus grand, un liseré bleu a gauche et un
   fond legerement teinte ; les accordeons qu'il contient s'aplatissent (pas
   d'ombre, marges resserrees) pour ne pas empiler deux cartes identiques. */
.ui-repli--groupe{border-left:4px solid var(--bleu);background:var(--fond)}

.ui-repli--groupe > .ui-repli__tete{padding:16px 18px}
.ui-repli--groupe > .ui-repli__tete h2{font-size:19px;letter-spacing:.2px}
.ui-repli--groupe > .ui-repli__corps{background:var(--carte);padding:14px 14px 6px}
.ui-repli--groupe .ui-repli{box-shadow:none;margin:0 0 10px}
.ui-repli--groupe .ui-repli[open]{box-shadow:var(--ombre-sm)}
.ui-repli--groupe .ui-repli__tete h2{font-size:15.5px}
.ui-repli--groupe .ui-repli__corps{padding:14px 15px 16px}
@media (max-width:760px){
  .ui-repli--groupe > .ui-repli__tete h2{font-size:17px}
  .ui-repli--groupe > .ui-repli__corps{padding:11px 10px 4px}
}

/* ---------- La couleur dit le diplome ----------
   Demande DG du 12/08/2026 : deux couleurs pour distinguer BAFA et BAFD.
   Charte TUC : BLEU #19529E pour le BAFA, OR #DCBF1B pour le BAFD.

   Le ROUGE #C8102E n'est pas un candidat : il est reserve aux alertes et au
   sensible. Colorer un diplome en rouge ferait lire « probleme » la ou il n'y a
   qu'un cursus different, et affaiblirait le rouge partout ou il doit vraiment
   arreter l'oeil.

   MESURE, PAS ESTIMATION : l'or pur ne se lit pas en texte sur blanc (1,82:1,
   le seuil AA est a 4,5). Le lisere et le fond prennent donc l'or VIF, le TEXTE
   prend --or-700 #7a6700 — 5,57:1 sur blanc, 5,13:1 sur la pastille or. C'est la
   nuance qu'utilisent deja les pastilles or : deux valeurs, un seul or.

   La correspondance diplome -> ton vit dans _commun/etape-parcours.js
   (TON_DIPLOME) : ce fichier ne connait que les couleurs, pas les diplomes. */
.ui-repli--bafa{border-left-color:var(--bleu)}
.ui-repli--bafd{border-left-color:var(--or)}
.ui-repli--bafd > .ui-repli__tete h2{color:var(--or-700)}
.ui-repli--bafd > .ui-repli__tete:hover{background:var(--or-050)}
.ui-repli--bafd > .ui-repli__tete:focus-visible{outline-color:var(--or-700)}
.ui-repli--bafd > .ui-repli__tete > .ui-repli__chev{background:var(--or-050);color:var(--or-700)}
.ui-repli--bafd[open] > .ui-repli__tete > .ui-repli__chev{background:var(--or-700);color:#fff}

/* ---------- Boutons ---------- */
.ui-bouton{background:var(--bleu);color:#fff;border:0;padding:10px 18px;border-radius:10px;font-weight:800;cursor:pointer;transition:.15s}
.ui-bouton:hover{background:var(--bleu-700)}
.ui-bouton--or{background:var(--or);color:#3a3000}
.ui-bouton--secondaire{background:var(--carte);color:var(--bleu);border:1.5px solid var(--bord-fort)}
.ui-bouton--secondaire:hover{border-color:var(--bleu);background:var(--bleu-050)}
.ui-bouton:disabled{opacity:.5;cursor:default}

/* ---------- Tables ---------- */
.ui-tableau{width:100%;border-collapse:collapse;font-size:14px}
.ui-tableau th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--txt-3);padding:10px 12px;border-bottom:2px solid var(--bord)}
.ui-tableau td{padding:12px;border-bottom:1px solid var(--bord)}
.ui-tableau tbody tr:hover{background:var(--fond)}

/* ---------- Alertes ---------- */
.ui-alerte{border-radius:11px;padding:13px 16px;font-weight:600;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.ui-alerte--info{background:var(--bleu-050);color:var(--bleu-700)}
.ui-alerte--sensible{background:#fcebed;color:#8f0c20;border:1px solid #f3c6cd}
.ui-alerte--ok{background:var(--vert-050);color:var(--vert)}

/* ---------- Pills / etats ---------- */
.ui-etat,.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800}
.ui-etat--encours,.pill--bleu{background:var(--bleu-050);color:var(--bleu)}
.ui-etat--fait,.pill--vert{background:var(--vert-050);color:var(--vert)}
.ui-etat--attente,.pill--or{background:var(--or-050);color:#7a6700}
.pill--rouge{background:#fcebed;color:var(--rouge)}
.pill--gris{background:#eef0f4;color:var(--txt-2)}

/* ---------- Tuiles KPI ---------- */
.tuile{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);padding:18px;box-shadow:var(--ombre-sm);display:flex;gap:14px;align-items:center}
.tuile__ic{width:46px;height:46px;border-radius:12px;display:grid;place-content:center;font-size:22px;background:var(--bleu-050);flex:none}
.tuile__v{font-size:25px;font-weight:800;color:var(--bleu-700);line-height:1.05}
.tuile__l{font-size:13px;color:var(--txt-2);font-weight:700}
.tuile__d{font-size:11.5px;color:var(--txt-3)}
.tuile--or .tuile__ic{background:var(--or-050)} .tuile--vert .tuile__ic{background:var(--vert-050)} .tuile--rouge .tuile__ic{background:#fcebed}

/* ---------- Anneau de progression ---------- */
.anneau{display:grid;place-items:center;position:relative}
.anneau__txt{position:absolute;text-align:center}
.anneau__pct{font-size:24px;font-weight:800;color:var(--bleu-700)}
.anneau__lib{font-size:11px;color:var(--txt-3);font-weight:700}

/* ---------- Timeline verticale (parcours) ---------- */
.chrono{position:relative;margin:4px 0 0;padding-left:6px}
.chrono__item{position:relative;padding:0 0 22px 30px}
.chrono__item:before{content:"";position:absolute;left:9px;top:4px;bottom:-4px;width:2px;background:var(--bord-fort)}
.chrono__item:last-child:before{display:none}
.chrono__node{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--bord-fort);z-index:1}
.chrono__item--fait .chrono__node{background:var(--vert);border-color:var(--vert)}
.chrono__item--fait:before{background:var(--vert)}
.chrono__item--actuel .chrono__node{background:var(--or);border-color:var(--or);box-shadow:0 0 0 4px var(--or-050)}
.chrono__t{font-weight:800;color:var(--txt)}
.chrono__s{font-size:13px;color:var(--txt-3)}

/* ---------- Frise horizontale (compat) ---------- */
.frise{display:flex;flex-wrap:wrap;margin:8px 0 4px}
.frise__etape{display:flex;flex-direction:column;align-items:center;flex:1;min-width:92px;position:relative;padding-top:26px;text-align:center}
.frise__pastille{width:18px;height:18px;border-radius:50%;background:var(--bord-fort);border:3px solid #fff;box-shadow:0 0 0 2px var(--bord-fort);position:absolute;top:0;z-index:2}
.frise__etape--fait .frise__pastille{background:var(--vert);box-shadow:0 0 0 2px var(--vert)}
.frise__etape--actuel .frise__pastille{background:var(--or);box-shadow:0 0 0 2px var(--or)}
.frise__ligne{position:absolute;top:7px;left:-50%;width:100%;height:4px;background:var(--bord-fort);z-index:1}
.frise__etape--fait .frise__ligne{background:var(--vert)}
.frise__etape:first-child .frise__ligne{display:none}
.frise__libelle{font-size:11.5px;font-weight:700;color:var(--txt-2)}

/* ---------- Entonnoir ---------- */
.entonnoir{display:grid;gap:9px}
.entonnoir__ligne{display:grid;grid-template-columns:180px 1fr 92px;align-items:center;gap:12px}
.entonnoir__libelle{font-weight:800;font-size:13px}
.entonnoir__piste{background:var(--fond);border-radius:8px;height:30px;overflow:hidden;border:1px solid var(--bord)}
.entonnoir__barre{height:100%;background:linear-gradient(90deg,var(--bleu),#2f6fc0);border-radius:7px 0 0 7px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-weight:800;font-size:12px}
.entonnoir__nb{font-weight:800;color:var(--bleu-700)} .entonnoir__nb small{color:var(--txt-3);font-weight:700}

/* ---------- Formulaires ---------- */
.champ{display:block;margin-bottom:14px}
.champ>span{display:block;font-size:13px;font-weight:800;margin-bottom:5px;color:var(--txt)}
.champ textarea,.champ input,.champ select{width:100%;padding:10px 12px;border:1.5px solid var(--bord-fort);border-radius:10px;font-family:inherit;font-size:14px}
.champ textarea{min-height:96px;resize:vertical}

/* ---------- Sous-nav (onglets pilule) ---------- */
.ss-nav{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--bord);padding:5px;border-radius:12px;margin-bottom:24px;box-shadow:var(--ombre-sm)}
.ss-onglet{background:none;border:0;padding:9px 15px;border-radius:9px;font-weight:800;font-size:14px;color:var(--txt-2);cursor:pointer}
.ss-onglet:hover{color:var(--bleu);background:var(--bleu-050)}
.ss-onglet.actif{color:#fff;background:var(--bleu)}

/* ---------- Hero (entete d'ecran riche) ---------- */
.hero{background:linear-gradient(120deg,var(--bleu-700),var(--bleu));color:#fff;border-radius:var(--r);padding:24px 26px;display:flex;align-items:center;gap:26px;box-shadow:var(--ombre)}
.hero__txt h1{font-size:23px;font-weight:800}
.hero__txt p{color:rgba(255,255,255,.8);margin-top:4px}
.hero .anneau__pct{color:#fff}.hero .anneau__lib{color:rgba(255,255,255,.75)}

/* ---------- Deperdition ---------- */
.deperdition{background:#fcebed;border:1px solid #f3c6cd;border-radius:var(--r);padding:18px}
.deperdition__pct{font-size:30px;font-weight:800;color:var(--rouge);line-height:1}

/* ---------- Administration ---------- */
.matrice{width:100%;border-collapse:collapse;font-size:13px}
.matrice th,.matrice td{padding:8px 10px;border-bottom:1px solid var(--bord);text-align:center}
.matrice th:first-child,.matrice td:first-child{text-align:left}
.matrice thead th{position:sticky;top:0;background:#fff;font-size:11px;text-transform:uppercase;color:var(--txt-3)}
.matrice tbody tr:hover{background:var(--fond)}
.matrice .grp td{background:var(--bleu-050);font-weight:800;color:var(--bleu-700)}
.matrice input[type=checkbox]{width:17px;height:17px;accent-color:var(--bleu);cursor:pointer}
.col-tout{color:#7a6700;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-role{border:1.5px solid var(--bord-fort);background:#fff;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:800;cursor:pointer;color:var(--txt-3)}
.chip-role.on{background:var(--bleu-050);border-color:var(--bleu);color:var(--bleu)}
.exc-select{padding:5px 9px;border:1.5px solid var(--bord-fort);border-radius:8px;font-family:inherit;font-weight:700}

/* ---------- Divers ---------- */
.ligne-action{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--bord)}
.ligne-action:last-child{border-bottom:0}
.note-test{font-size:12px;color:var(--txt-3);margin-top:18px}
.vide{color:var(--txt-3);text-align:center;padding:44px}
.muted{color:var(--txt-3)} .gras{font-weight:800}
#tuc-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--bleu-700);color:#fff;padding:12px 20px;border-radius:11px;font-weight:800;box-shadow:var(--ombre);opacity:0;pointer-events:none;transition:.25s;z-index:999}
#tuc-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Zones de dépôt (dossier d'embauche) ===== */
.dropzone{display:flex;align-items:center;gap:10px;border:1.5px dashed var(--bord-fort);border-radius:10px;padding:12px 14px;cursor:pointer;color:var(--txt-2);font-weight:700;background:var(--fond);transition:.15s}
.dropzone:hover{border-color:var(--bleu);background:var(--bleu-050);color:var(--bleu)}
.dropzone .ic{font-size:20px}
.doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--bord)}
.doc-row:last-child{border-bottom:0}
.doc-meta{font-size:12px;color:var(--txt-3)}
.photo-zone{width:120px;height:120px;border-radius:14px;border:1.5px dashed var(--bord-fort);display:grid;place-content:center;text-align:center;color:var(--txt-3);font-weight:700;font-size:12px;cursor:pointer;background:var(--fond);overflow:hidden}
.photo-zone:hover{border-color:var(--bleu);color:var(--bleu)}
.photo-thumb{width:120px;height:120px;border-radius:14px;object-fit:cover;border:1px solid var(--bord)}
.dateperem{padding:6px 9px;border:1.5px solid var(--bord-fort);border-radius:8px;font-family:inherit;font-size:13px}

/* ===== Grille de cartes du catalogue (stages) ===== */
.grille-catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.carte-catalogue{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-sm);display:flex;flex-direction:column;transition:.15s}
.carte-catalogue:hover{box-shadow:var(--ombre)}
.carte-catalogue__photo{position:relative;height:128px;background:var(--fond);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.carte-catalogue__photo img{width:100%;height:100%;object-fit:cover}
.carte-catalogue__badge{position:absolute;top:8px;right:8px;background:rgba(18,60,117,.85);color:#fff;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px}
.carte-catalogue__corps{padding:14px;flex:1;display:flex;flex-direction:column}

/* ===== Bannière photo d'une fiche (catalogue stages) ===== */
.fiche-hero-photo{width:100%;height:240px;border-radius:14px;overflow:hidden;background:var(--fond);display:flex;align-items:center;justify-content:center;color:var(--txt-3);font-weight:700;font-size:13px}
.fiche-hero-photo img{width:100%;height:100%;object-fit:cover}

/* ===== Éditeur de texte enrichi (mini, sans dépendance externe) ===== */
.rte{border:1.5px solid var(--bord-fort);border-radius:10px;overflow:hidden;background:#fff}
.rte__barre{display:flex;gap:2px;padding:4px 6px;background:var(--fond);border-bottom:1px solid var(--bord)}
.rte__barre button{border:0;background:none;border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:13px;color:var(--txt-2)}
.rte__barre button:hover{background:var(--bleu-050);color:var(--bleu)}
.rte__zone{min-height:70px;padding:8px 10px;font-size:14px;line-height:1.4;outline:none}
.rte__zone:empty:before{content:attr(data-placeholder);color:var(--txt-3)}
.rte__zone ul,.rte__zone ol{margin:6px 0;padding-left:22px}

/* ===== Fiche stage : habillage Claude Design (L1) ===== */
.fiche-detail{--f-muted:#5B6B85;--f-muted2:#8A97AD;--f-ink:#1e293b}
.fiche-onglet-panneau{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:26px 28px 30px;box-shadow:0 1px 2px rgba(16,42,90,.04)}
.fiche-bloc{margin-bottom:30px}
.fiche-bloc:last-child{margin-bottom:0}
.fiche-bloc__t{margin:0 0 18px;font-size:14.5px;font-weight:800;color:var(--bleu);border-bottom:2px solid var(--bleu-050);padding-bottom:10px}
.fiche-bloc__t small,.fiche-bloc__t .sub{font-weight:600;color:#8A97AD;font-size:12.5px}
.fiche-champ{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.fiche-champ>span{color:#5B6B85;font-weight:700;font-size:12.5px}
.fiche-champ--inline{flex-direction:row;align-items:center;gap:9px}
.fiche-input{width:100%;box-sizing:border-box;height:40px;padding:0 12px;border:1.5px solid var(--bord);border-radius:10px;font-family:inherit;font-size:14.5px;font-weight:600;color:#1e293b;background:#fff;transition:all .12s ease}
select.fiche-input{cursor:pointer}
textarea.fiche-input{height:auto;min-height:84px;padding:10px 12px;line-height:1.5;resize:vertical}
.fiche-input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(25,82,158,.14)}
.fiche-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px 16px;align-items:end}
.fiche-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.fiche-cps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.fiche-cps-col{border:1px solid var(--bord);background:#FAFBFD;border-radius:10px;padding:14px 16px}
.fiche-cps-col__t{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--bleu-700)}
.fiche-check{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:600;color:#1e293b;padding:5px 0;cursor:pointer}
.fiche-check input{width:17px;height:17px;flex:none;accent-color:var(--bleu);cursor:pointer}
.fiche-pilules{display:flex;flex-wrap:wrap;gap:8px}
.fiche-pilule{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--bord);border-radius:9px;padding:8px 14px;font-size:13.5px;font-weight:700;color:#5B6B85;cursor:pointer;transition:all .12s ease;background:#fff}
.fiche-pilule:hover{border-color:#C9D8EE;background:var(--bleu-050)}
.fiche-pilule:has(input:checked){background:var(--bleu-050);border-color:var(--bleu);color:var(--bleu)}
.fiche-pilule input{position:absolute;opacity:0;width:0;height:0;margin:0}
.fiche-seg{display:inline-flex;gap:3px;background:#EEF2F8;padding:3px;border-radius:10px;align-items:center;width:fit-content}
.fiche-seg button{border:0;background:none;border-radius:8px;padding:7px 14px;font-family:inherit;font-size:13.5px;font-weight:700;color:#5B6B85;cursor:pointer;line-height:1;transition:all .12s ease}
.fiche-seg button.on{background:#fff;color:var(--bleu-700);box-shadow:0 1px 2px rgba(16,42,90,.12)}
.fiche-semaine{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:14px}
.fiche-jour{border:1px solid var(--bord);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.fiche-jour__t{background:var(--bleu-700);color:#fff;font-size:14px;font-weight:800;text-align:center;padding:9px}
.fiche-jour__c{display:flex;flex-direction:column;gap:6px;padding:12px}
.fiche-jour__c>span{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px}
.fiche-jour__c--matin>span{color:var(--or)}
.fiche-jour__c--aprem>span{color:var(--bleu)}
.fiche-jour__ta{width:100%;box-sizing:border-box;border:1px solid var(--bord);border-radius:8px;padding:8px 10px;font-family:inherit;font-size:13px;font-weight:500;min-height:74px;resize:vertical;background:#FBFCFE;transition:all .12s ease}
.fiche-jour__ta:focus{outline:none;border-color:var(--bleu);background:#fff;box-shadow:0 0 0 3px rgba(25,82,158,.12)}
.fiche-tarifs{border:1px solid var(--bord);border-radius:11px;background:#F7F9FC;padding:13px 16px}
.fiche-tarifs__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.fiche-tarifs__head>span:first-child{font-size:12.5px;font-weight:800;color:#5B6B85}
.fiche-tarifs__lock{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#8A97AD}
.fiche-tarifs__cols{display:flex;align-items:center;gap:12px;padding:0 12px;margin-bottom:2px}
.fiche-tarifs__cols>span{flex:1;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#8A97AD}
.fiche-tarifs__cols .c1,.fiche-tarifs__row .c1{width:96px;flex:none}
.fiche-tarifs__row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px}
.fiche-tarifs__row.on{background:var(--bleu-050)}
.fiche-tarifs__row .c1{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:#1e293b;font-size:13.5px}
.fiche-tarifs__row .v{flex:1;font-size:16px;font-weight:800;color:var(--bleu-700)}
.fiche-tarifs__tag{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--bleu);background:#fff;border:1px solid var(--bleu);padding:2px 6px;border-radius:5px}
.fiche-acm{display:flex;align-items:center;gap:9px;border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:700;margin-bottom:16px}
.fiche-acm--ok{background:var(--vert-050);color:var(--vert);border:1px solid #BEE3CC}
.fiche-acm--bad{background:#FBEAEC;color:var(--rouge);border:1px solid #F3C7CE}
.fiche-acm--info{background:var(--bleu-050);color:var(--bleu-700);border:1px solid #D3E1F5}
/* Méthode de réalisation (cartes) */
.fiche-methode{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;border-radius:11px;cursor:pointer;border:1.5px solid var(--bord);background:#fff;transition:all .12s ease}
.fiche-methode.on{border-color:var(--bleu);background:var(--bleu-050)}
.fiche-methode input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--bleu);cursor:pointer}
.fiche-methode .t{font-weight:800;color:#1e293b}
.fiche-methode .s{font-size:12.5px;font-weight:600;color:#5B6B85;margin-top:3px}
/* Cahier des charges prestataire */
.cdc-item{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--bord);border-radius:10px;padding:13px 16px;background:#fff}
.cdc-item.off{background:#FAFBFD;opacity:.6}
.cdc-item .lbl{flex:1;min-width:220px;display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:0}
.cdc-item .lbl input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--bleu);cursor:pointer}
.cdc-item .ti{font-weight:800;color:#1e293b}
.cdc-item .he{font-size:12.5px;font-weight:600;color:#5B6B85;margin-top:3px}
.cdc-tag{flex:none;display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;background:var(--or-050);color:#7a6510;font-size:11px;font-weight:800;letter-spacing:.03em;margin-right:2px}
.cdc-lvl button.on-oblig{background:var(--bleu);color:#fff;box-shadow:0 1px 2px rgba(16,42,90,.12)}
.cdc-lvl button.on-facult{background:var(--or-050);color:#7a6510;box-shadow:0 1px 2px rgba(16,42,90,.08)}
.cdc-del{flex:none;width:36px;height:36px;border-radius:8px;border:1px solid var(--bord);background:#fff;color:var(--rouge);cursor:pointer;font-size:14px}
.cdc-del:hover{background:#FBEAEC;border-color:#F3C7CE}
/* Communication */
.fiche-pilule.on{background:var(--bleu-050);border-color:var(--bleu);color:var(--bleu)}
.comm-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.comm-canal{border:1.5px solid var(--bord);border-radius:11px;background:#fff;padding:14px 16px}
.comm-canal__t{display:flex;align-items:center;gap:9px;font-weight:800;color:#1e293b;margin-bottom:4px}
.comm-count{font-size:12px;font-weight:700;color:#8A97AD}
.comm-canal__h{font-size:12.5px;font-weight:600;color:#5B6B85;margin-bottom:9px}
.comm-ta{border:1px solid var(--bord);outline:none;resize:vertical;width:100%;box-sizing:border-box;min-height:78px;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;background:#FBFCFE;font-family:inherit;color:#1e293b}
.comm-ta:focus{border-color:var(--bleu);background:#fff;box-shadow:0 0 0 3px rgba(25,82,158,.12)}
.comm-apercu{position:sticky;top:16px}
.comm-apercu__lbl{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8A97AD;margin-bottom:9px}
.comm-apercu__card{border:1px solid var(--bord);border-radius:13px;overflow:hidden;box-shadow:0 4px 16px rgba(16,42,90,.08);background:#fff}
.comm-apercu__bar{height:7px}
.comm-apercu__photo{height:120px;background:var(--fond);display:flex;align-items:center;justify-content:center;color:#8A97AD;font-size:12px;font-weight:700}
.kw-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;border-radius:8px;background:var(--bleu-050);color:var(--bleu);font-size:13px;font-weight:700}
.kw-chip button{border:none;background:transparent;color:var(--bleu);cursor:pointer;width:18px;height:18px;border-radius:5px;font-size:11px}
.kw-chip button:hover{background:#fff}
.couleur-sw{width:34px;height:34px;border-radius:9px;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 1px var(--bord);display:inline-block}
.couleur-sw.on{border:3px solid #1e293b}
@media(max-width:760px){.comm-layout{grid-template-columns:1fr}.comm-apercu{position:static}}
/* Qualité */
.qual-kpi{border:1px solid var(--bord);background:#FBFCFE;border-radius:11px;padding:16px 18px}
.qual-kpi .l{font-size:12.5px;font-weight:700;color:#5B6B85;margin-bottom:7px}
.qual-kpi .v{font-size:25px;font-weight:800;line-height:1;color:var(--bleu-700)}
.qual-kpi .u{font-size:15px;font-weight:700;color:#8A97AD}
.qual-q{display:flex;align-items:center;gap:10px}
.qual-q .n{flex:none;width:26px;height:26px;border-radius:7px;background:var(--bleu-050);color:var(--bleu);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.qual-q .fiche-input{flex:1}
/* barre d'onglets : carte blanche + centrée */
#fiche-onglets{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:9px;box-shadow:0 1px 2px rgba(16,42,90,.04);display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;justify-content:center}
/* Barre d'onglets de la fiche : toujours à la ligne, jamais rognée (bat les media-queries via l'id) */
#fiche-onglets{flex-wrap:wrap;overflow:visible;max-width:100%}
#fiche-onglets .ss-onglet{white-space:nowrap;flex:none}
@media(max-width:860px){.fiche-semaine{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.fiche-cps{grid-template-columns:1fr}.fiche-semaine{grid-template-columns:1fr}#fiche-onglets{justify-content:flex-start}.ss-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* ===== Sous-menu latéral d'un module (2e barre) ===== */
.ss-layout{display:grid;grid-template-columns:212px 1fr;gap:24px;align-items:start}
@media(max-width:760px){.ss-layout{grid-template-columns:1fr}}
/* Palier telephone : l'indication ne tient plus a droite du titre, elle passe
   dessous et s'aligne sur lui (28px de chevron + 12px de gouttiere). */
@media(max-width:760px){
  .ui-repli__tete{flex-wrap:wrap;padding:12px 14px}
  .ui-repli__tete h2{font-size:16px}
  .ui-repli__aide{margin-left:40px;width:100%;text-align:left;margin-top:2px}
  .ui-repli__corps{padding:14px}
}
.ss-aside{background:#fff;border:1px solid var(--bord);border-radius:14px;box-shadow:var(--ombre-sm);padding:12px 10px;position:sticky;top:16px}
.ss-aside__t{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--txt-3);padding:6px 10px}
.ss-aside__a{display:block;padding:9px 11px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--txt-2);cursor:pointer;border-left:3px solid transparent}
.ss-aside__a:hover{background:var(--fond);color:var(--bleu)}
.ss-aside__a.actif{background:var(--bleu-050);color:var(--bleu);border-left-color:var(--or)}
.ss-aside__r{font-size:12.5px;color:var(--txt-3)}

/* ============================================================
   RESPONSIVE MOBILE (v1) — l'app doit être 100% utilisable
   au téléphone. Desktop inchangé au-dessus de 900px.
   ============================================================ */

/* --- Éléments de la coquille utilisés par layout.js --- */
.btn-burger{display:none;background:none;border:0;cursor:pointer;font-size:22px;line-height:1;color:var(--bleu-700);padding:8px;margin-left:-6px;border-radius:9px}
.btn-burger:active{background:var(--bleu-050)}
.nav-voile{display:none}
.btn-fermer-nav{display:none;margin-left:auto;background:none;border:0;color:rgba(255,255,255,.7);font-size:24px;line-height:1;cursor:pointer;padding:4px 8px}

/* Panneau de notifications (classe remplaçant les styles inline) */
.cloche-panel{display:none;position:absolute;right:0;top:34px;background:#fff;border:1px solid #e3e8f0;border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14);width:340px;max-height:70vh;overflow:auto;z-index:1000;padding:8px}

/* Hauteurs d'écran fiables sur mobile (barres du navigateur) */
@supports(height:100dvh){
  .tuc-boot,.login-wrap{min-height:100dvh}
  .app-shell{min-height:100dvh}
}

/* Images et médias ne débordent jamais */
img,svg,canvas,video{max-width:100%}

@media(max-width:900px){

  /* ---- Coquille : 1 colonne, sidebar en tiroir ---- */
  .app-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr;grid-template-areas:"header" "main"}
  body.imp .app-shell{grid-template-rows:auto auto 1fr;grid-template-areas:"banner" "header" "main"}

  .app-nav{position:fixed;top:0;bottom:0;left:0;width:min(300px,84vw);z-index:1200;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.25);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom)}
  body.nav-ouverte .app-nav{transform:none}
  body.nav-ouverte{overflow:hidden}
  body.nav-ouverte .nav-voile{display:block;position:fixed;inset:0;background:rgba(15,25,45,.5);z-index:1100}
  .btn-fermer-nav{display:block}
  .nav-item{padding:14px 20px;min-height:44px}

  .btn-burger{display:grid;place-content:center}
  .app-header{height:58px;padding:0 12px 0 8px;gap:8px;position:sticky;top:0;z-index:900}
  .app-header__roles{display:none}
  .app-header__user{gap:8px;font-size:13px}
  .btn-logout{padding:8px 10px}
  .banniere-impersonation{padding:8px 12px;font-size:12px;flex-wrap:wrap;gap:8px}
  body.imp .banniere-impersonation{display:flex}

  .app-main{padding:16px 14px calc(24px + env(safe-area-inset-bottom));max-width:none;min-width:0}

  .cloche-panel{position:fixed;left:10px;right:10px;top:64px;width:auto;max-height:70dvh}

  /* ---- Typo / sections ---- */
  .ui-titre{font-size:21px}
  .ui-sous-titre{margin-bottom:18px;font-size:14px}
  .ui-section{flex-wrap:wrap;gap:8px}
  .ui-carte{padding:16px}
  .ui-carte__entete{flex-wrap:wrap}
  .ui-grille{gap:12px}
  .ligne-action{flex-wrap:wrap}

  /* ---- Tableaux : défilement horizontal au doigt ---- */
  .ui-tableau,.matrice{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .ui-tableau th,.ui-tableau td,.matrice th,.matrice td{white-space:nowrap}

  /* ---- Hero / entonnoir ---- */
  .hero{flex-direction:column;align-items:flex-start;gap:16px;padding:18px}
  .hero__txt h1{font-size:19px}
  .entonnoir__ligne{grid-template-columns:92px 1fr 58px;gap:8px}
  .entonnoir__libelle{font-size:11.5px}
  .entonnoir__nb{font-size:13px}

  /* ---- Onglets pilule : passent à la ligne (tablette), tout reste visible ---- */
  .ss-nav{flex-wrap:wrap;margin-bottom:16px}
  .ss-onglet{white-space:nowrap;min-height:40px}

  /* ---- Sous-menu latéral d'un module : rangée horizontale ---- */
  .ss-layout{gap:14px}
  .ss-aside{position:static;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px;align-items:center}
  .ss-aside__t{display:none}
  .ss-aside__a{white-space:nowrap;border-left:0;border-bottom:3px solid transparent;flex:none}
  .ss-aside__a.actif{border-left:0;border-bottom-color:var(--or)}
  .ss-aside__r{display:none}

  /* ---- Login ---- */
  .login-wrap{padding:14px}
  .login-card{padding:22px 18px}
  .login-roles{grid-template-columns:1fr}

  /* ---- Formulaires : 16px = pas de zoom auto iOS, cibles 44px ---- */
  .champ input,.champ select,.champ textarea,.login-card input{font-size:16px;min-height:44px}
  .ui-bouton{min-height:44px}
  .champ textarea{min-height:110px}

  /* ---- Divers ---- */
  .photo-zone,.photo-thumb{width:100px;height:100px}
  .tuile{padding:14px;gap:11px}
  .tuile__v{font-size:21px}
  #tuc-toast{left:12px;right:12px;transform:translateY(20px);bottom:calc(16px + env(safe-area-inset-bottom));text-align:center}
  #tuc-toast.visible{transform:translateY(0)}
}

/* ============================================================
   RESPONSIVE MOBILE — MODULE ALSH (Centres / Personnel /
   Affectations / Materiel). Classes ajoutees en plus des styles
   inline existants (non touches) ; !important necessaire pour
   surcharger les inline width/height/grid sur les ecrans copies
   du mockup Claude Design.
   ============================================================ */
@media(max-width:900px){
  .alsh-barre{height:auto !important;min-height:52px;padding:8px 12px !important;flex-wrap:nowrap !important;gap:10px !important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .alsh-split{flex-direction:column}
  .alsh-rail{width:100% !important}
  .alsh-pool{width:100% !important}
  .alsh-detail{padding:14px !important}
  .alsh-table-scroll{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .alsh-table-row{min-width:960px}
  .alsh-grid-2{grid-template-columns:1fr !important}
}

/* ============================================================
   PALIERS D'AFFICHAGE (2026-07-13) — coquille (core/layout.js)
   reactive a shared/palier.js. Ordinateur = base (sections
   ci-dessus, inchangee). Tablette = meme structure 2 colonnes
   que l'ordinateur mais sidebar reduite aux icones (jamais en
   tiroir). Telephone = barre d'onglets en bas (type application)
   a la place du menu burger ; le tiroir existant (.app-nav /
   .nav-voile) sert de panneau "Plus" pour les modules au-dela
   des 4 premiers. Le changement de palier ne touche JAMAIS
   #zone-ecran : seule une classe sur <body> change.
   ============================================================ */

/* ---- Tablette : sidebar en rail d'icones, jamais en tiroir ---- */
body.palier-tablette .app-shell{grid-template-columns:64px 1fr;grid-template-areas:"nav header" "nav main"}
body.palier-tablette.imp .app-shell{grid-template-rows:auto auto 1fr;grid-template-areas:"nav banner" "nav header" "nav main"}
body.palier-tablette .app-nav{position:static;transform:none;width:auto;box-shadow:none;overflow-y:auto;padding-bottom:0}
body.palier-tablette .app-nav__brand{justify-content:center;padding:18px 8px}
body.palier-tablette .app-nav__brand .nom,
body.palier-tablette .app-nav__label,
body.palier-tablette .app-nav__pied,
body.palier-tablette .nav-item span:last-child,
body.palier-tablette .btn-fermer-nav{display:none}
body.palier-tablette .nav-item{justify-content:center;padding:12px 0}
body.palier-tablette .btn-burger{display:none}

/* ---- Telephone : barre d'onglets bas (type application) ---- */
body.palier-telephone .btn-burger{display:none}
body.palier-telephone .app-main{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
/* Le voile ne doit jamais rester affiche hors telephone (ex. on redimensionne
   telephone -> tablette pendant que le panneau "Plus" etait ouvert). */
body.palier-tablette .nav-voile,
body.palier-ordinateur .nav-voile{display:none}

.barre-onglets-bas{display:none;position:fixed;left:0;right:0;bottom:0;z-index:600;background:#fff;border-top:1px solid var(--bord);padding-bottom:env(safe-area-inset-bottom)}
body.palier-telephone .barre-onglets-bas{display:flex}
.barre-onglets-bas__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;text-decoration:none;color:var(--txt-3);font-size:10px;font-weight:700;background:none;border:0;font-family:inherit;cursor:pointer}
.barre-onglets-bas__item.actif{color:var(--bleu)}
.barre-onglets-bas__ic{font-size:19px;line-height:1}