/* ═══════════════════════════════════════════════════════════════════
   GESTION DE PROGRESSION BACCALAURÉAT PRO ERA
   Feuille de style principale — remplace bootstrap.min.css + style.css
   Placer dans : /const/style.css
   ═══════════════════════════════════════════════════════════════════

   SOMMAIRE
   1.  Tokens de design (variables CSS)
   2.  Reset & base typographique
   3.  Mise en page générale
   4.  Bandeau titre du site   (.app-banner)
   5.  Navigation              (#barremenu, .menu)
   6.  Bandeau titre de page   (.page-title)
   7.  Cartes de contenu       (.card, .zoneTableau, .zoneTableauSecondaire)
   8.  En-têtes de section     (.section-head, .zoneTitreTableau)
   9.  Tableaux de données
   10. Boutons
   11. Formulaires & champs
   12. Messages d'état
   13. Zone de filtres
   14. Boîte de dialogue
   15. Select personnalisé
   16. Indicateurs d'avancement
   17. Elements details/summary
   18. Pied de page
   19. Utilitaires & responsive
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ─── 1. TOKENS DE DESIGN ─────────────────────────────────────────── */
:root {
    --c-brand-900: #0f2235;
    --c-brand-800: #1b3a5c;
    --c-brand-700: #24527a;
    --c-brand-600: #2c6496;
    --c-brand-100: #ddeaf8;
    --c-brand-50:  #f0f6fd;
    --c-gold:      #c8790f;
    --c-gold-lt:   #f6a623;
    --c-white:     #ffffff;
    --c-bg:        #f4f6f9;
    --c-surface:   #ffffff;
    --c-border:    #ccd6e4;
    --c-border-lt: #e4eaf2;
    --c-muted:     #6b7d95;
    --c-text:      #1e2d3d;
    --c-text-sm:   #3d5166;
    --c-success:   #16692e;
    --c-success-bg:#e6f7ec;
    --c-success-bd:#3cb96a;
    --c-danger:    #9b1c1c;
    --c-danger-bg: #fff0f0;
    --c-danger-bd: #e53e3e;
    --c-danger-btn:#dc2626;
    --c-danger-hov:#b91c1c;
    --av1-bg:#ffe9e9; --av1-bd:#d4706d; --av1-tx:#7e1e1e;
    --av2-bg:#ffefde; --av2-bd:#f3971e; --av2-tx:#9e4c00;
    --av3-bg:#fdfcca; --av3-bd:#b3b140; --av3-tx:#646b02;
    --av4-bg:#e8f8ee; --av4-bd:#27a04a; --av4-tx:#16692e;
    --av5-bg:#f2ecfc; --av5-bd:#7c3aed; --av5-tx:#4c1d95;
    --font-ui:   'Outfit', system-ui, sans-serif;
    --font-body: 'Lora', Georgia, serif;
    --fs-base: 14.5px;
    --fs-sm:   12.5px;
    --fs-xs:   11px;
    --lh: 1.65;
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
    --sp-5:24px; --sp-6:32px; --sp-7:48px;
    --radius: 6px;
    --radius-sm: 4px;
    --border: 1px solid var(--c-border);
    --shadow-sm: 0 1px 4px rgba(15,34,53,.08);
    --shadow:    0 2px 10px rgba(15,34,53,.12);
    --shadow-md: 0 5px 20px rgba(15,34,53,.16);
    --ease: all .18s ease;
}

/* ─── 2. RESET & BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: var(--fs-base); }
body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--lh);
    color: var(--c-text);
    background: var(--c-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-ui); color: var(--c-brand-800); line-height: 1.3; font-weight: 600; }
p { margin-bottom: .35rem; }
strong { font-weight: 600; color: var(--c-text); }
ul,ol { padding-left: 1.4em; }
li { margin-bottom: .2em; }
a { color: var(--c-brand-600); text-decoration: none; transition: var(--ease); }
a:hover { color: var(--c-gold); text-decoration: underline; }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background: var(--c-border-lt); }
::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-brand-600); }

/* ─── 3. MISE EN PAGE GÉNÉRALE ────────────────────────────────────── */
header {
    background: var(--c-brand-800);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
}
main {
    flex: 1;
    padding: var(--sp-5) var(--sp-6);
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
}
footer { margin-top: auto; background: var(--c-brand-900); border-top: 3px solid var(--c-gold); }

/* ─── 4. BANDEAU TITRE DU SITE (.app-banner) ──────────────────────── */
/* Remplace l'ancien div#home.zoneTitreSite dans header.php           */
.app-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--sp-6);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.app-banner .titreSite {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-white);
    letter-spacing: .03em;
    line-height: 1;
}
#logout {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: rgba(255,255,255,.82);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.22);
    padding: 5px 14px;
    border-radius: 20px;
    transition: var(--ease);
    text-decoration: none;
    white-space: nowrap;
}
#logout:hover { background: rgba(255,255,255,.2); color: var(--c-white); text-decoration: none; }

#home {
    scroll-margin-top: 160px; /* Ajustez la valeur en pixels selon la hauteur réelle de votre menu */
}

/* ─── 5. NAVIGATION (#barremenu, .menu) ──────────────────────────── */
#barremenu {
    display: flex;
    align-items: stretch;
    background: var(--c-brand-700);
    padding: 0 var(--sp-6);
}
.logo {
    display: flex;
    align-items: center;
    padding: 6px var(--sp-4) 6px 0;
    margin-right: var(--sp-4);
    border-right: 1px solid rgba(255,255,255,.15);
    flex-shrink: 0;
}
.logo img { height: 30px; width: auto; }
.menu { flex: 1; }
.menu nav > ul { list-style:none; display:flex; flex-wrap:wrap; padding:0; margin:0; }
.menu nav > ul > li { position: relative; }
.menu nav > ul > li > a {
    display: flex;
    align-items: center;
    padding: 12px var(--sp-4);
    font-family: var(--font-ui);
    font-size: .8rem;
    font-weight: 500;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ease);
    border-bottom: 3px solid transparent;
}
.menu nav > ul > li > a:hover,
.menu nav > ul > li:hover > a {
    color: var(--c-white);
    background: rgba(255,255,255,.07);
    border-bottom-color: var(--c-gold);
    text-decoration: none;
}
/* Sous-menus niveau 2 */
.menu nav ul ul {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 235px;
    background: var(--c-brand-900);
    border: 1px solid rgba(255,255,255,.1);
    border-top: 3px solid var(--c-gold);
    box-shadow: 0 10px 28px rgba(0,0,0,.38);
    z-index: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: var(--sp-1) 0;
    animation: menuSlide .14s ease;
}
@keyframes menuSlide { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
/* Niveau 3 */
.menu nav ul ul ul { top:0; left:100%; border-top:3px solid var(--c-gold); border-radius:var(--radius); }
/* Liens sous-menus */
.menu nav ul ul li > a {
    display: block;
    padding: 8px var(--sp-4);
    font-family: var(--font-ui);
    font-size: .78rem;
    color: rgba(255,255,255,.8);
    text-decoration: none;
    transition: var(--ease);
    border-left: 3px solid transparent;
}
.menu nav ul ul li > a:hover {
    color: var(--c-gold);
    background: rgba(255,255,255,.06);
    border-left-color: var(--c-gold);
    padding-left: calc(var(--sp-4) + 5px);
    text-decoration: none;
}
.menu nav ul li:hover > ul { display: block; }

/* ─── 6. BANDEAU TITRE DE PAGE (.page-title) ──────────────────────── */
/* Remplace les anciens <div> sans classe ou class="titrePage"         */
/* dans le bas du <header> de chaque page PHP                          */
.page-title {
    background: linear-gradient(90deg, #0f2235 0%, var(--c-brand-700) 100%);
    padding: 10px var(--sp-6);
    border-top: 1px solid rgba(255,255,255,.06);
}
.page-title h1, .page-title h2 {
    font-family: var(--font-ui);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-white);
}
.page-title h3, .page-title p {
    font-family: var(--font-ui);
    font-size: .85rem;
    font-weight: 400;
    color: rgba(255,255,255,.75);
    margin-top: 2px;
}
/* Alias de rétrocompatibilité (classe .titrePage encore présente dans le PHP) */
.titrePage { font-family: var(--font-ui); color: var(--c-white); font-size: 1.05rem; font-weight: 600; }

/* ─── 7. CARTES DE CONTENU ────────────────────────────────────────── */
/* .zoneTableau : carte blanche avec ombre                             */
/* .zoneTableauSecondaire : carte en pointillés (formulaires d'ajout)  */
.zoneTableau {
    background: var(--c-surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--sp-5);
    overflow: hidden;
    transition: box-shadow .2s ease;
}
.zoneTableau:hover { box-shadow: var(--shadow-md); }

.zoneTableauSecondaire {
    background: var(--c-surface);
    border: 2px dashed var(--c-border);
    border-radius: var(--radius);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.zoneTableauSecondaire > h3 {
    margin-bottom: var(--sp-3);
    font-size: .95rem;
    color: var(--c-brand-800);
    font-family: var(--font-ui);
}

/* Zone de boutons en bas de carte (.zoneBoutons)                      */
.zoneBoutons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--c-bg);
    border-top: var(--border);
    align-items: flex-start;
}
.zoneBoutons form { display:flex; flex-direction:column; gap:var(--sp-1); }
.zoneBoutons label { display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-sm); color:var(--c-muted); cursor:pointer; }

/* Zone de lien discret sous un tableau */
.zoneLien { padding: var(--sp-2) var(--sp-5); background: var(--c-bg); border-top: var(--border); }
.lien { font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--c-brand-600); border-bottom:1px dashed var(--c-brand-600); padding-bottom:1px; }
.lien:hover { color:var(--c-gold); border-bottom-color:var(--c-gold); text-decoration:none; }

.zoneMessage { margin-bottom: var(--sp-4); }
.actionButtons { display:flex; flex-direction:column; gap:var(--sp-1); align-items:flex-start; }

/* ─── 8. EN-TÊTES DE SECTION ──────────────────────────────────────── */
/* .zoneTitreTableau : bandeau coloré au-dessus de chaque tableau       */
.zoneTitreTableau {
    background: var(--c-brand-50);
    border-left: 4px solid var(--c-gold);
    border-bottom: 1px solid var(--c-border-lt);
    padding: var(--sp-2) var(--sp-5);
}
.zoneTitreTableau h2 { font-size:1.1rem; color:var(--c-brand-800); margin-bottom:2px; }
.zoneTitreTableau h3 { font-size:.95rem; font-weight:600; color:var(--c-brand-800); margin-bottom:2px; }
.zoneTitreTableau h4 { font-size:.85rem; font-weight:500; color:var(--c-brand-700); margin:2px 0; }
.zoneTitreTableau h5 { font-size:.82rem; font-weight:600; color:var(--c-brand-800); margin:2px 0; }
.zoneTitreTableau p  { font-size:var(--fs-sm); color:var(--c-muted); margin:2px 0; }
.zoneTitreTableau strong { color:var(--c-danger); }

/* ─── 9. TABLEAUX DE DONNÉES ──────────────────────────────────────── */
table { width:100%; border-collapse:collapse; font-size:var(--fs-base); }
thead tr, tr.Entete { background: var(--c-brand-800); }
thead th, .Entete th {
    padding: 10px var(--sp-4);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--c-white);
    text-align: left;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-right: 1px solid rgba(255,255,255,.1);
    white-space: nowrap;
}
thead th:last-child, .Entete th:last-child { border-right:none; }
tbody tr { border-bottom:1px solid var(--c-border-lt); transition:background .12s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:nth-child(even) { background: var(--c-brand-100); }
tbody tr:hover { background: #d2e4f5; }
tbody td { padding:8px var(--sp-4); color:var(--c-text-sm); vertical-align:top; border-right:1px solid var(--c-border-lt); }
tbody td:last-child { border-right:none; }
tbody td > a { font-family:var(--font-ui); font-weight:600; color:var(--c-brand-800); }
tbody td > a:hover { color:var(--c-gold); text-decoration:none; }

/* Tableau double ligne : la 2e ligne affiche la théorie/savoirs       */
/* On définit une couleur pour les activités IMPAIRES 
   (1ème, 2ème...) */
.tableaudoubleligne tbody tr:nth-of-type(4n+1),
.tableaudoubleligne tbody tr:nth-of-type(4n+2) {
    font-size: var(--fs-base);
    font-style: normal;
    color: var(--c-muted);
    padding: var(--sp-1) var(--sp-4) var(--sp-2) calc(var(--sp-4)*2);
    background: #f7fafe;
    border-top: 1px dashed var(--c-border);
}

/* On définit une couleur différente pour les activités PAIRES 
   (2ème, 4ème...)  */
.tableaudoubleligne tbody tr:nth-of-type(4n+3),
.tableaudoubleligne tbody tr:nth-of-type(4n) {
    font-size: var(--fs-base);
    font-style: normal;
    color: var(--c-white);
    padding: var(--sp-1) var(--sp-4) var(--sp-2) calc(var(--sp-4)*2);
    background: --var(--c-brand-50);
    border-top: 1px dashed var(--c-border);

}



/* Tableau de progression */
.tableauprogression { table-layout:auto; }
.tableauprogression td { vertical-align:middle; }
/* Tableau de navigation : flex row de boutons                         */
.tab_nav { width:100%; border-collapse:separate; border-spacing:0; }
.tab_nav tbody { display:flex; flex-wrap:wrap; gap:var(--sp-2); padding:var(--sp-2) 0; }
.tab_nav th, .tab_nav td { background:transparent; border:none; padding:0; }
/* Formulaires inline dans les tableaux */
.formSuppr { display:inline-flex; align-items:center; }
.formSuppr button { font-size:var(--fs-xs); padding:4px 10px; }

/* ─── 10. BOUTONS ─────────────────────────────────────────────────── */
/* Base commune */
button, input[type="submit"], input[type="button"],
.btValid,.btNormal,.btDanger,.bt,.bt_nav,.btn,
.btn-primary,.btn-secondary,.btn-danger,
a.btNormal, a.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ease);
    white-space: nowrap;
    letter-spacing: .015em;
}
/* Primaire (doré) */
.btValid, .btn-primary {
    background: var(--c-gold);
    color: var(--c-white);
    box-shadow: 0 2px 6px rgba(200,121,15,.35);
}
.btValid:hover, .btn-primary:hover {
    background: #a5630a;
    box-shadow: 0 4px 12px rgba(200,121,15,.45);
    transform: translateY(-1px);
    color: var(--c-white); text-decoration:none;
}
/* Secondaire (gris-bleu) */
.btNormal, a.btNormal, .bt.btNormal, .btn-secondary, a.btn-secondary {
    background: #e8edf5;
    color: var(--c-brand-800);
    border: 1px solid var(--c-border);
}
.btNormal:hover, a.btNormal:hover, .btn-secondary:hover {
    background: #d5dff0; border-color:var(--c-brand-600);
    color:var(--c-brand-800); transform:translateY(-1px); text-decoration:none;
}
/* Bouton sans classe */
button:not(.btValid):not(.btDanger):not(.btSuppr):not(.bt_nav):not([id]) {
    background:#e8edf5; color:var(--c-brand-800); border:1px solid var(--c-border);
}
button:not(.btValid):not(.btDanger):not(.btSuppr):not(.bt_nav):not([id]):hover {
    background:#d5dff0; border-color:var(--c-brand-600); transform:translateY(-1px);
}
/* Danger (rouge) */
.btDanger, .btn-danger {
    background: var(--c-danger-btn);
    color: var(--c-white);
    box-shadow: 0 2px 6px rgba(220,38,38,.28);
}
.btDanger:hover, .btn-danger:hover {
    background:var(--c-danger-hov); box-shadow:0 4px 12px rgba(220,38,38,.38);
    transform:translateY(-1px); color:var(--c-white); text-decoration:none;
}
/* Suppression compacte dans tableaux */
.btSuppr {
    font-size:var(--fs-xs); padding:4px 10px;
    background:var(--c-danger-btn); color:var(--c-white); border-radius:var(--radius-sm);
}
.btSuppr:hover { background:var(--c-danger-hov); transform:none; box-shadow:0 2px 8px rgba(220,38,38,.38); color:var(--c-white); text-decoration:none; }
/* Navigation (bleu marine) */
.bt_nav, .btn-nav { background:var(--c-brand-800); color:var(--c-white)!important; font-size:.78rem; box-shadow:var(--shadow-sm); }
.bt_nav:hover, .btn-nav:hover { background:var(--c-brand-900); color:var(--c-gold)!important; text-decoration:none; transform:translateY(-1px); }
/* Petit */
.btPetit { font-size:var(--fs-xs); padding:5px 10px; }
/* Sticky gauche */
.btStikyG { position:sticky; left:var(--sp-4); z-index:20; box-shadow:var(--shadow-md); margin:var(--sp-2) 0 var(--sp-4); }
/* Fixe bas-droite */
.btfixeD {
    position:fixed; bottom:var(--sp-5); right:var(--sp-5); z-index:100;
    border-radius:50%; width:44px; height:44px; padding:0;
    background:var(--c-brand-800); color:var(--c-white);
    box-shadow:var(--shadow-md); border:2px solid var(--c-gold);
    font-size:var(--fs-xs); font-weight:700;
    
    /* CORRECTION : Centrage automatique du lien dans le rond */
    display: flex;
    align-items: center;
    justify-content: center;
}
.btfixeD a { color:inherit; text-decoration:none; font-size:9px; font-weight:700; }
.btfixeD:hover { background:var(--c-brand-700); transform:translateY(-2px); }

/* ─── 11. FORMULAIRES & CHAMPS ────────────────────────────────────── */
form { padding:var(--sp-1) 0; }
label {
    display:block; font-family:var(--font-ui); font-size:var(--fs-sm);
    font-weight:500; color:var(--c-brand-800); margin-bottom:var(--sp-1); margin-top:var(--sp-4);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="texte"], .form-control {
    display:block; width:100%; max-width:580px;
    padding:9px var(--sp-4); border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
    font-family:var(--font-body); font-size:var(--fs-base); color:var(--c-text);
    background:var(--c-white); transition:border-color .2s,box-shadow .2s; margin-bottom:var(--sp-1);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, .form-control:focus {
    outline:none; border-color:var(--c-brand-600); box-shadow:0 0 0 3px rgba(44,100,150,.15);
}
input[readonly] { background:var(--c-bg); color:var(--c-muted); cursor:default; border-style:dashed; }
textarea {
    display:block; width:100%; padding:9px var(--sp-4);
    border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
    font-family:var(--font-body); font-size:var(--fs-base); color:var(--c-text);
    background:var(--c-white); resize:vertical; line-height:1.6;
    transition:border-color .2s,box-shadow .2s; margin-bottom:var(--sp-1);
}
textarea:focus { outline:none; border-color:var(--c-brand-600); box-shadow:0 0 0 3px rgba(44,100,150,.15); }
.large-textarea { min-height:110px; }
select, .select_pleine_largeur {
    display:block; padding:9px 36px 9px var(--sp-4);
    border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
    font-family:var(--font-ui); font-size:var(--fs-sm); color:var(--c-text);
    background:var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231b3a5c' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 13px center;
    appearance:none; cursor:pointer; transition:border-color .2s; margin-bottom:var(--sp-1);
}
.select_pleine_largeur { width:100%; max-width:700px; }
select:focus { outline:none; border-color:var(--c-brand-600); box-shadow:0 0 0 3px rgba(44,100,150,.15); }
input[type="checkbox"] { accent-color:var(--c-brand-800); width:15px; height:15px; cursor:pointer; }

/* Carte de connexion */
.formulaire.connexion {
    max-width:420px; margin:var(--sp-7) auto;
    background:var(--c-white); border-radius:var(--radius); box-shadow:var(--shadow-md);
    padding:var(--sp-6); border-top:4px solid var(--c-gold);
}
.formulaire.connexion form { padding:0; }
.formulaire.connexion label { margin-top:var(--sp-4); }
.formulaire.connexion .btValid { margin-top:var(--sp-5); width:100%; justify-content:center; }
/* Classes Bootstrap mini */
.mb-3 { margin-bottom:var(--sp-4); }
.form-label { font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600; color:var(--c-brand-800); display:block; margin-bottom:var(--sp-1); }
.form-text  { font-size:var(--fs-xs); color:var(--c-muted); margin-top:3px; display:block; }

/* ─── 12. MESSAGES D'ÉTAT ─────────────────────────────────────────── */
/* .alert-success : succès (vert)                                       */
/* .alert-danger / .error-message : erreur (rouge)                     */
/* .green / p.green : texte informatif positif                         */
.alert-success, .alert-danger, .error-message {
    display:flex; align-items:flex-start; gap:var(--sp-2);
    padding:var(--sp-2) var(--sp-5); border-radius:var(--radius);
    font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500;
    margin-bottom:var(--sp-4); animation:alertIn .25s ease;
}
@keyframes alertIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.alert-success { background:var(--c-success-bg); color:var(--c-success); border:1px solid var(--c-success-bd); border-left:4px solid var(--c-success-bd); }
.alert-success::before { content:'✓\00a0'; font-weight:700; }
.alert-danger, .error-message { background:var(--c-danger-bg); color:var(--c-danger); border:1px solid var(--c-danger-bd); border-left:4px solid var(--c-danger-bd); }
.alert-danger::before, .error-message::before { content:'⚠\00a0'; font-weight:700; }
.green, p.green {
    display:inline-block; font-family:var(--font-ui); font-size:var(--fs-sm);
    font-style:italic; color:var(--c-success); background:var(--c-success-bg);
    border-left:3px solid var(--c-success-bd); border-radius:var(--radius-sm);
    padding:6px var(--sp-4); margin:var(--sp-2) var(--sp-4);
}

/* ─── 13. ZONE DE FILTRES ─────────────────────────────────────────── */
/* Utilisé dans cohorte_progression.php et avancement_updateparlot.php */
/* .zoneFiltre : grille des groupes de filtres                          */
/* .boxFiltre  : un fieldset stylisé                                   */
/* .filtre     : une ligne label + checkbox                            */
/* .zoneInvisible : panneau masqué par défaut (affiché par JS)         */
.zoneFiltre { display:flex; flex-wrap:wrap; gap:var(--sp-4); padding:var(--sp-4); background:var(--c-bg); }
.boxFiltre {
    background:var(--c-white); border:var(--border); border-radius:var(--radius);
    padding:var(--sp-4); min-width:190px; flex:1; box-shadow:var(--shadow-sm);
}
.boxFiltre legend { font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:600; color:var(--c-brand-800); padding:0 var(--sp-1); }
.filtre { display:flex; align-items:center; justify-content:space-between; padding:5px var(--sp-1); gap:var(--sp-2); border-bottom:1px dashed var(--c-border-lt); font-size:var(--fs-sm); }
.filtre:last-child { border-bottom:none; }
.filtre label { font-family:var(--font-body); font-weight:400; font-size:var(--fs-sm); color:var(--c-text-sm); margin:0; cursor:pointer; }
.zoneInvisible { display:none; background:var(--c-white); border:var(--border); border-radius:var(--radius); padding:var(--sp-4); margin-top:var(--sp-2); box-shadow:var(--shadow); animation:alertIn .2s ease; }
#btAfficherFiltre { background:transparent; border:1.5px solid var(--c-brand-600); color:var(--c-brand-600); font-size:var(--fs-sm); padding:5px 13px; border-radius:var(--radius-sm); margin-top:var(--sp-1); cursor:pointer; transition:var(--ease); }
#btAfficherFiltre:hover { background:var(--c-brand-600); color:var(--c-white); }
#btFiltrer { background:var(--c-brand-800); color:var(--c-white); padding:8px 20px; margin-top:var(--sp-4); border-radius:var(--radius-sm); cursor:pointer; transition:var(--ease); }
#btFiltrer:hover { background:var(--c-brand-700); }
#btReset { background:transparent; border:1px solid var(--c-border); color:var(--c-muted); padding:8px 20px; margin-top:var(--sp-4); margin-left:var(--sp-2); border-radius:var(--radius-sm); cursor:pointer; transition:var(--ease); }
#btReset:hover { background:#e8edf5; border-color:var(--c-brand-600); color:var(--c-brand-800); }

/* ─── 14. BOÎTE DE DIALOGUE (#dialogSuppr) ───────────────────────── */
/* Écrase les styles inline position:absolute/width de dialogue_suppr */
dialog {
    border:none; border-radius:var(--radius);
    box-shadow:0 12px 48px rgba(0,0,0,.42);
    padding:var(--sp-6); min-width:340px; max-width:460px;
    font-family:var(--font-ui); animation:dialogIn .2s ease;
}
@keyframes dialogIn { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} }
dialog::backdrop { background:rgba(10,20,35,.68); backdrop-filter:blur(3px); }
dialog p { font-size:.95rem; color:var(--c-text); margin-bottom:var(--sp-5); line-height:1.55; }
dialog #cancel {
    position:static!important; width:auto!important;
    background:#e8edf5; color:var(--c-brand-800); border:1px solid var(--c-border);
    padding:8px 20px; border-radius:var(--radius-sm);
    font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500;
    cursor:pointer; transition:var(--ease); margin-right:var(--sp-2);
}
dialog #cancel:hover { background:#d5dff0; }
dialog #confirmation {
    position:static!important; width:auto!important;
    background:var(--c-danger-btn); color:var(--c-white);
    padding:8px 20px; border-radius:var(--radius-sm);
    font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500;
    cursor:pointer; transition:var(--ease);
}
dialog #confirmation:hover { background:var(--c-danger-hov); }

/* ─── 15. SELECT PERSONNALISÉ (script_choix.js) ──────────────────── */
.custom-select-container { position:relative; width:100%; max-width:580px; font-family:var(--font-ui); font-size:var(--fs-sm); }
.select-selected {
    background:var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231b3a5c' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 13px center;
    border:1.5px solid var(--c-border); border-radius:var(--radius-sm);
    padding:9px var(--sp-4); padding-right:36px; cursor:pointer; user-select:none; transition:var(--ease);
}
.select-selected:hover { border-color:var(--c-brand-600); }
.select-selected.select-arrow-active { border-color:var(--c-brand-600); box-shadow:0 0 0 3px rgba(44,100,150,.15); border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.select-items { position:absolute; width:100%; z-index:99; top:100%; background:var(--c-white); border:1.5px solid var(--c-brand-600); border-top:none; border-radius:0 0 var(--radius-sm) var(--radius-sm); box-shadow:0 8px 24px rgba(0,0,0,.18); max-height:280px; overflow-y:auto; list-style:none; padding:0; margin:0; }
.select-hide { display:none; }
.select-option { padding:8px var(--sp-4); cursor:pointer; transition:background .12s; font-size:var(--fs-sm); border-bottom:1px solid var(--c-border-lt); }
.select-option:hover { background:var(--c-brand-100); color:var(--c-brand-800); }
.optgroup-label { padding:6px var(--sp-4); font-weight:700; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--c-white); background:var(--c-brand-700); list-style:none; }

/* ─── 16. INDICATEURS D'AVANCEMENT ───────────────────────────────── */
/* tr.tr_avancement0..4  : couleur de fond + bordure gauche des lignes */
/* a.avancement0..4      : badge pill cliquable                        */
.tr_avancement1 { border-left:4px solid var(--av1-bd)!important; }
.tr_avancement2 { background:#fff4e0!important; border-left:4px solid var(--av2-bd)!important; }
.tr_avancement3 { background:#fffbd7!important; border-left:4px solid var(--av3-bd)!important; }
.tr_avancement4 { background:#f3fbf5!important; border-left:4px solid var(--av4-bd)!important; }
.tr_avancement5 { background:#f6f2ff!important; border-left:4px solid var(--av5-bd)!important; }
a[class^="avancement"], a[class*=" avancement"] {
    font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600;
    padding:3px 10px; border-radius:12px; text-decoration:none; display:inline-block; transition:var(--ease);
}
.avancement1 { background:var(--av1-bg); color:var(--av1-tx); border:1px solid var(--av1-bd); }
.avancement2 { background:var(--av2-bg); color:var(--av2-tx); border:1px solid var(--av2-bd); }
.avancement3 { background:var(--av3-bg); color:var(--av3-tx); border:1px solid var(--av3-bd); }
.avancement4 { background:var(--av4-bg); color:var(--av4-tx); border:1px solid var(--av4-bd); }
.avancement5 { background:var(--av5-bg); color:var(--av5-tx); border:1px solid var(--av5-bd); }
.avancement1:hover { background:#ff9a88; text-decoration:none; }
.avancement2:hover { background:#ffc37f; text-decoration:none; }
.avancement3:hover { background:#fdff95; text-decoration:none; }
.avancement4:hover { background:#b5e7c5; text-decoration:none; }
.avancement5:hover { background:#d4c5f5; text-decoration:none; }

/* ─── 17. DETAILS / SUMMARY ──────────────────────────────────────── */
/* Utilisés dans les tableaux pour afficher les compétences            */
details { margin:2px 0; }
summary {
    cursor:pointer; font-family:var(--font-ui); font-size:var(--fs-sm); font-weight:500;
    color:var(--c-brand-600); list-style:none; display:flex; align-items:center;
    gap:4px; padding:2px 4px; border-radius:3px; transition:var(--ease);
}
summary::before { content:'▶'; font-size:8px; color:var(--c-gold); transition:transform .15s ease; }
details[open] summary::before { transform:rotate(90deg); }
summary:hover { color:var(--c-gold); background:rgba(27,58,92,.05); }
details[open] > *:not(summary) { font-size:var(--fs-sm); color:var(--c-muted); padding:3px var(--sp-4); border-left:2px solid var(--c-gold); margin-left:var(--sp-2); margin-top:2px; }

/* ─── 18. PIED DE PAGE ───────────────────────────────────────────── */
.text-center.p-3, footer > div {
    display:flex; align-items:center; justify-content:center;
    gap:var(--sp-5); flex-wrap:wrap;
    padding:var(--sp-4) var(--sp-6);
    font-family:var(--font-ui); font-size:var(--fs-sm); color:rgba(255,255,255,.6);
}
.text-dark { color:var(--c-gold); text-decoration:none; font-weight:500; }
.text-dark:hover { color:#f5b84c; text-decoration:none; }

/* ─── 19. UTILITAIRES & RESPONSIVE ───────────────────────────────── */
main > h3, main > h4, main > h5 { font-family:var(--font-ui); color:var(--c-brand-800); margin:var(--sp-2) 0 var(--sp-1); }
main > h5 { font-size:.88rem; font-weight:500; }
main > p  { max-width:800px; }

@media (max-width:1100px) {
    main { padding:var(--sp-4); }
    .app-banner, #barremenu, .page-title { padding-left:var(--sp-4); padding-right:var(--sp-4); }
}
@media (max-width:768px) {
    .app-banner { flex-direction:column; align-items:flex-start; gap:var(--sp-1); padding:var(--sp-2) var(--sp-4); }
    .app-banner .titreSite { font-size:.95rem; }
    #barremenu { flex-direction:column; padding:0 var(--sp-2); }
    .logo { display:none; }
    .menu nav > ul { flex-direction:column; }
    .menu nav > ul > li > a { padding:var(--sp-2) var(--sp-4); border-bottom:1px solid rgba(255,255,255,.08); border-left:none; }
    .menu nav ul ul { position:static; box-shadow:none; border-top:none; border-left:3px solid var(--c-gold); margin-left:var(--sp-4); animation:none; min-width:0; }
    .menu nav ul ul ul { left:0; position:static; margin-left:var(--sp-4); }
    main { padding:var(--sp-2) var(--sp-4); }
    .zoneTableau, .zoneTableauSecondaire { border-radius:0; }
    .zoneFiltre { flex-direction:column; }
    thead th { font-size:var(--fs-xs); padding:var(--sp-2); }
    tbody td { padding:var(--sp-1) var(--sp-2); font-size:var(--fs-sm); }
    input[type="text"],input[type="email"],input[type="password"],input[type="number"],select,textarea,.form-control { max-width:100%; }
    .formulaire.connexion { margin:var(--sp-4); padding:var(--sp-5); }
    .btfixeD { bottom:var(--sp-4); right:var(--sp-4); width:38px; height:38px; }
    dialog { min-width:280px; margin:var(--sp-4); }
    .tab_nav tbody { flex-direction:column; }
    .zoneBoutons { flex-direction:column; }
    .page-title { padding-left:var(--sp-4); padding-right:var(--sp-4); }
}

/* Wrapper flex des boutons dans la boîte de dialogue */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}