/* ==========================================================================
   Charte IPMS — relevée sur ipms.fr

   Navy #002A5A dominant, corail #F55757 pour l'action principale, le navy
   passant en action secondaire (« Espace candidat » vs « S'inscrire »).
   Titres en gras navy, rayon 8px, typographie Manrope.

   ACCESSIBILITÉ — le corail de marque porte du blanc à 3,29:1 sur le site,
   sous le seuil AA de 4,5:1. --ipms-coral-btn le remplace par la nuance la
   plus proche qui reste lisible (#cd4949, 4,52:1). Pour un rendu strictement
   identique au site, remplacer sa valeur par #f55757 — et assumer l'écart.
   ========================================================================== */

:root{
    --ipms-navy:#002a5a;
    --ipms-navy-dark:#001e40;
    --ipms-navy-tint:#e6ebf1;
    --ipms-navy-tint-strong:#d3dce6;

    /* Corail de marque : filets, accents, anneau de focus. */
    --ipms-coral:#f55757;

    /* Fond des boutons d'action : corail lisible avec du texte blanc. */
    --ipms-coral-btn:#cd4949;
    --ipms-coral-btn-hover:#b03e3e;

    /* Corail lisible sur fond clair (texte, badges). */
    --ipms-coral-dark:#ba4242;
    --ipms-coral-tint:#fdeaea;

    --ipms-ink:#1f2937;
    --ipms-muted:#5f6673;
    --ipms-line:#e5e7eb;
    --ipms-field:#d1d5db;

    /* Gris clair des sections du site, sur lequel les cartes blanches ressortent. */
    --ipms-surface:#f2f3f5;

    /* Le thème IPMS charge Manrope ; ailleurs, repli sur la police système. */
    --ipms-font:"Manrope", "Montserrat", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /*
     * Le site est franchement peu arrondi : boutons quasi droits, cartes à
     * peine adoucies. Des angles très ronds s'en éloignent aussitôt.
     */
    --ipms-radius:4px;
    --ipms-radius-lg:6px;
    --ipms-ring:0 0 0 3px rgba(245, 87, 87, .40);

    /* Ombres discrètes : le site reste plat, l'ombre ne fait que détacher. */
    --ipms-shadow:0 1px 2px rgba(0, 42, 90, .05), 0 3px 10px rgba(0, 42, 90, .05);
    --ipms-shadow-lg:0 2px 4px rgba(0, 42, 90, .06), 0 14px 34px rgba(0, 42, 90, .12);
    --ipms-motion:background-color .15s ease, border-color .15s ease,
        box-shadow .18s ease, color .15s ease, transform .18s ease;
}

/* ---------- Gabarit pleine page ---------- */

body.ipms-full-page{
    margin:0;
    padding:0;
    background:var(--ipms-surface);
    font-family:var(--ipms-font);
}

.ipms-appbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 28px;
    background:var(--ipms-navy);
    color:#fff;
    font-family:var(--ipms-font);
    font-size:14px;
    border-bottom:3px solid var(--ipms-coral);
}

.ipms-appbar-brand{
    font-weight:800;
    font-style:italic;
    letter-spacing:-.02em;
    text-transform:uppercase;
    font-size:16px;
}

.ipms-appbar-user{
    display:flex;
    align-items:center;
    gap:16px;
}

.ipms-appbar-user a{
    color:#fff;
    text-decoration:underline;
    border-radius:6px;
    white-space:nowrap;
}

.ipms-appbar-user a:hover{
    color:var(--ipms-coral-tint);
}

.ipms-appbar-user a:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

/*
 * Taille de base explicite : sans elle, la police du thème hôte s'impose
 * à tout le plugin (Twenty Twenty-Five monte à ~18px) et le formulaire
 * d'évaluation devient illisible.
 */
.ipms-container{
    max-width:1200px;
    margin:32px auto;
    padding:20px;
    font-family:var(--ipms-font);
    font-size:15px;
    line-height:1.55;
    color:var(--ipms-ink);
}

/*
 * Titres : gras navy, capitales, légèrement resserrés — comme les cartes
 * de formation du site (« PRÉPA BPJEPS »).
 */
.ipms-container h1,
.ipms-container h2,
.ipms-container h3{
    font-family:var(--ipms-font);
    font-weight:800;
    letter-spacing:-.02em;
    color:var(--ipms-navy);
}

/* ---------- En-tête ---------- */

.ipms-header{
    background:var(--ipms-navy);
    color:#fff;
    padding:44px 36px;
    border-radius:var(--ipms-radius-lg);
    margin-bottom:26px;
    border-bottom:4px solid var(--ipms-coral);
}

/*
 * La signature du site : énorme, italique, en capitales, très gras et
 * resserré — comme « ORGANISME DE FORMATION AUX MÉTIERS DU SPORT ».
 */
.ipms-header h1{
    margin:0;
    font-size:44px;
    font-weight:800;
    font-style:italic;
    line-height:1.02;
    letter-spacing:-.035em;
    text-transform:uppercase;
    color:#fff;
}

.ipms-header p{
    margin:16px 0 0;
    opacity:.85;
    font-size:15px;
}

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

.ipms-card{
    background:#fff;
    border:1px solid var(--ipms-line);
    border-radius:var(--ipms-radius-lg);
    padding:28px;
    margin-bottom:24px;
    box-shadow:var(--ipms-shadow);
}

/*
 * Titres de carte comme sur le site (« PRÉPA BPJEPS ») : navy, gras,
 * capitales — droits, l'italique restant réservé aux grands titres.
 */
.ipms-card h2{
    margin:0 0 20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--ipms-line);
    font-size:21px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-.01em;
}

.ipms-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
}

/* Deux colonnes : comparaisons côte à côte (ex. Top / Flop des écoles). */
.ipms-grid-2{
    grid-template-columns:repeat(2, 1fr);
}

/* ---------- Champs de formulaire ---------- */

.ipms-form label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

.ipms-container input[type=text],
.ipms-container input[type=date],
.ipms-container input[type=time],
.ipms-container input[type=email],
.ipms-container input[type=number],
.ipms-container select,
.ipms-container textarea{
    width:100%;
    padding:12px;
    border:1px solid var(--ipms-field);
    border-radius:var(--ipms-radius);
    box-sizing:border-box;
    font-size:15px;
    font-family:inherit;
    color:var(--ipms-ink);
    background:#fff;
    transition:var(--ipms-motion);
}

.ipms-container textarea{
    resize:vertical;
}

/* Flèche dessinée en SVG inline : aucune requête réseau. */
.ipms-container select{
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23002a5a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    cursor:pointer;
}

.ipms-container input:hover,
.ipms-container select:hover,
.ipms-container textarea:hover{
    border-color:var(--ipms-navy-tint-strong);
}

.ipms-container input:focus,
.ipms-container select:focus,
.ipms-container textarea:focus{
    outline:none;
    border-color:var(--ipms-coral);
    box-shadow:var(--ipms-ring);
}

/* Une valeur héritée, absente du référentiel : on la signale. */
.ipms-container select option[data-legacy]{
    color:var(--ipms-coral-dark);
}

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

/*
 * Le site IPMS oppose deux boutons : corail pour l'action principale
 * (« S'inscrire »), navy pour l'action secondaire (« Espace candidat »).
 */
.ipms-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:20px;
    background:var(--ipms-coral-btn);
    color:#fff;
    border:0;
    padding:14px 28px;
    border-radius:var(--ipms-radius);
    font-family:var(--ipms-font);
    font-weight:700;
    font-size:15px;
    line-height:1.2;
    text-decoration:none;
    cursor:pointer;
    transition:var(--ipms-motion);
}

.ipms-btn:hover{
    background:var(--ipms-coral-btn-hover);
    color:#fff;
}

.ipms-btn:active{
    transform:none;
}

.ipms-btn:focus-visible,
.ipms-modal-close:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

/* Barre d'actions en tête de page : retour + export. */
.ipms-page-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

/* Ces boutons ouvrent la page : ils ne doivent pas coller à l'en-tête. */
.ipms-back{
    margin-top:0;
    margin-bottom:20px;
}

/* Action secondaire : navy plein, comme « Espace candidat ». */
.ipms-btn-secondary{
    background:var(--ipms-navy);
    color:#fff;
}

.ipms-btn-secondary:hover{
    background:var(--ipms-navy-dark);
    color:#fff;
}

/* ---------- Connexion (page mon-espace, visiteur non connecté) ---------- */

/*
 * Bande de marque étroite et fixe à gauche (comme le header du site) :
 * une simple signature, pas un second volet de contenu. Le formulaire
 * occupe tout le reste de la page et y reste centré, au milieu — pas
 * dans un partage 50/50 avec le bandeau.
 */
.ipms-login-page{
    min-height:calc(100vh - 64px);
    display:grid;
    grid-template-columns:380px 1fr;
}

.ipms-login-hero{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:16px;
    padding:48px 40px;
    background:var(--ipms-navy);
    color:#fff;
    border-right:4px solid var(--ipms-coral);
}

.ipms-login-hero-brand{
    margin:0;
    font-family:var(--ipms-font);
    font-weight:800;
    font-style:italic;
    text-transform:uppercase;
    letter-spacing:-.02em;
    font-size:18px;
    opacity:.85;
}

.ipms-login-hero h1{
    margin:0;
    font-family:var(--ipms-font);
    font-weight:800;
    letter-spacing:-.02em;
    font-size:28px;
    line-height:1.15;
    color:#fff;
}

.ipms-login-hero-sub{
    margin:0;
    max-width:38ch;
    font-size:15px;
    line-height:1.55;
    opacity:.85;
}

.ipms-login-hero-list{
    margin:8px 0 0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.ipms-login-hero-list li{
    padding-left:26px;
    position:relative;
    font-size:14px;
    opacity:.9;
}

.ipms-login-hero-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--ipms-coral);
    font-weight:700;
}

.ipms-login-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}

@media(max-width:880px){
    .ipms-login-page{
        grid-template-columns:1fr;
        min-height:0;
    }

    .ipms-login-hero{
        border-right:0;
        border-bottom:4px solid var(--ipms-coral);
        padding:40px 32px;
    }
}

.ipms-login-wrap{
    max-width:560px;
    width:100%;
    margin:0 auto;
}

.ipms-login-card{
    padding:64px 60px 56px;
}

.ipms-login-card h2{
    margin:0 0 10px;
    padding-bottom:0;
    border-bottom:0;
    font-size:28px;
    text-align:center;
}

.ipms-login-sub{
    margin:0 0 36px;
    padding-bottom:32px;
    border-bottom:1px solid var(--ipms-line);
    text-align:center;
    color:var(--ipms-muted);
    font-size:16px;
}

.ipms-login-form label{
    font-size:15px;
}

.ipms-login-form input{
    padding:16px 18px;
    font-size:16px;
}

.ipms-login-form > div + div{
    margin-top:28px;
}

.ipms-login-remember{
    margin:28px 0 0;
}

.ipms-login-remember label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-weight:500;
    font-size:15px;
    color:var(--ipms-muted);
    cursor:pointer;
}

.ipms-login-remember input{
    width:auto;
    padding:0;
    margin:0;
}

.ipms-login-card .ipms-btn{
    width:100%;
    margin-top:36px;
    padding:16px 28px;
    font-size:16px;
}

/* ---------- Actions de ligne (icônes) ---------- */

.ipms-row-actions{
    display:flex;
    align-items:center;
    gap:6px;
}

/* Le <form> de suppression ne doit pas casser l'alignement des icônes. */
.ipms-row-actions form{
    display:contents;
}

/* Le formulaire du menu de sélection des blocs, lui, reste un bloc normal :
   il vit dans .ipms-menu-list, pas directement dans la rangée d'icônes. */
.ipms-row-actions .ipms-menu-list form{
    display:block;
}

.ipms-icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:none;
    border:1px solid var(--ipms-line);
    border-radius:var(--ipms-radius);
    background:#fff;
    color:var(--ipms-navy);
    cursor:pointer;
    transition:var(--ipms-motion);
}

.ipms-icon-btn svg{
    width:17px;
    height:17px;
}

.ipms-icon-btn:hover{
    background:var(--ipms-navy-tint);
    border-color:var(--ipms-navy-tint-strong);
    color:var(--ipms-navy);
}

.ipms-icon-btn:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

.ipms-icon-btn-danger{
    color:var(--ipms-coral-dark);
}

.ipms-icon-btn-danger:hover{
    background:var(--ipms-coral-tint);
    border-color:var(--ipms-coral);
    color:var(--ipms-coral-dark);
}

/* ---------- Tableau ---------- */

.ipms-table-wrapper{
    overflow-x:auto;
}

.ipms-table{
    width:100%;
    border-collapse:collapse;
}

.ipms-table th{
    background:var(--ipms-navy);
    color:#fff;
    text-align:left;
    padding:14px 16px;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
    white-space:nowrap;
}

.ipms-table th:first-child{
    border-top-left-radius:var(--ipms-radius);
}

.ipms-table th:last-child{
    border-top-right-radius:var(--ipms-radius);
}

.ipms-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--ipms-line);
    font-size:14px;
}

.ipms-table tbody tr{
    transition:background-color .15s ease;
}

.ipms-table tbody tr:last-child td{
    border-bottom:0;
}

.ipms-table tbody tr:hover{
    background:var(--ipms-navy-tint);
}

.ipms-empty{
    color:var(--ipms-muted);
}

/* ---------- Tri des colonnes ---------- */

.ipms-sort{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    border:0;
    background:none;
    font-family:var(--ipms-font);
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:#fff;
    cursor:pointer;
}

.ipms-sort:hover{
    color:var(--ipms-coral);
}

.ipms-sort:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
    border-radius:4px;
}

/* Le chevron n'apparaît que sur la colonne active. */
.ipms-sort-caret::after{
    content:"";
}

.ipms-sort.is-sorted .ipms-sort-caret::after{
    content:"▲";
    font-size:9px;
}

.ipms-sort.is-sorted.is-desc .ipms-sort-caret::after{
    content:"▼";
}

/* ---------- Pagination ---------- */

.ipms-pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--ipms-line);
}

.ipms-pagination-info{
    margin:0;
    font-size:14px;
    color:var(--ipms-muted);
}

.ipms-pagination-buttons{
    display:flex;
    gap:8px;
}

.ipms-page-btn{
    padding:9px 16px;
    border:1px solid var(--ipms-field);
    border-radius:var(--ipms-radius);
    background:#fff;
    font-family:var(--ipms-font);
    font-size:14px;
    font-weight:700;
    color:var(--ipms-navy);
    cursor:pointer;
    transition:var(--ipms-motion);
}

.ipms-page-btn:hover:not(:disabled){
    background:var(--ipms-navy);
    border-color:var(--ipms-navy);
    color:#fff;
}

.ipms-page-btn:disabled{
    opacity:.45;
    cursor:default;
}

.ipms-page-btn:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

/* ---------- Statistiques ---------- */

.ipms-stats{
    display:flex;
    gap:20px;
    margin-bottom:25px;
}

.ipms-stat-card{
    position:relative;
    flex:1;
    background:#fff;
    border:1px solid var(--ipms-line);
    border-radius:var(--ipms-radius-lg);
    padding:24px 20px;
    text-align:center;
    box-shadow:var(--ipms-shadow);
    overflow:hidden;
    transition:var(--ipms-motion);
}

/* Filet corail plein, comme les aplats du site. */
.ipms-stat-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:var(--ipms-coral);
}

.ipms-stat-card:hover{
    box-shadow:var(--ipms-shadow-lg);
    transform:translateY(-2px);
}

.ipms-stat-card h3{
    margin:0;
    color:var(--ipms-muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.ipms-stat-card span{
    display:block;
    margin-top:12px;
    font-size:40px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.02em;
    color:var(--ipms-navy);
    font-variant-numeric:tabular-nums;
}

/* ---------- Barre d'actions ---------- */

.ipms-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.ipms-filters{
    display:flex;
    gap:10px;
    align-items:center;
}

.ipms-search{
    width:350px;
    padding:12px 16px;
    border:1px solid var(--ipms-field);
    border-radius:var(--ipms-radius);
    font-size:15px;
    box-sizing:border-box;
    transition:var(--ipms-motion);
}

/* Le filtre campus n'affine que l'affichage, il ne cloisonne rien.
   Ses règles vivent plus bas, après .ipms-menu-toggle dont il hérite. */

/* Visible pour les lecteurs d'écran, invisible à l'œil. */
.screen-reader-text{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.ipms-search.ipms-loading{
    opacity:.6;
    cursor:wait;
}

.ipms-toolbar-buttons{
    display:flex;
    gap:10px;
}

/* ---------- Modales ---------- */

.ipms-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0, 42, 90, .55);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

/*
 * Panneau navy plein, comme le formulaire de candidature du site :
 * libellés blancs, champs blancs, bouton corail.
 */
.ipms-modal-content{
    background:var(--ipms-navy);
    color:#fff;
    width:700px;
    max-width:90%;
    max-height:90vh;
    overflow-y:auto;
    border-radius:var(--ipms-radius-lg);
    padding:32px;
    position:relative;
    box-shadow:0 20px 50px rgba(0, 0, 0, .35);
}

.ipms-modal-content h2{
    margin:0 0 22px;
    color:#fff;
    font-size:22px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:-.02em;
}

.ipms-modal-content label{
    color:#fff;
    font-weight:600;
}

.ipms-modal-content p{
    color:rgba(255, 255, 255, .85);
    font-size:14px;
}

/*
 * Valeur imposée (compte école) : même allure qu'un champ, mais non
 * modifiable. Le fond légèrement grisé signale qu'il n'y a rien à choisir.
 */
.ipms-modal-content .ipms-static-field{
    width:100%;
    margin:0;
    padding:12px;
    box-sizing:border-box;
    border:1px solid var(--ipms-field);
    border-radius:var(--ipms-radius);
    background:#eef1f5;
    color:var(--ipms-ink);
    font-size:15px;
    font-weight:600;
}

/* Sur fond navy, un bouton navy serait invisible. */
.ipms-modal-content .ipms-btn-secondary{
    background:#fff;
    color:var(--ipms-navy);
}

.ipms-modal-content .ipms-btn-secondary:hover{
    background:var(--ipms-navy-tint);
    color:var(--ipms-navy);
}

.ipms-modal-close{
    position:absolute;
    top:14px;
    right:20px;
    border:0;
    background:transparent;
    font-size:30px;
    line-height:1;
    color:rgba(255, 255, 255, .7);
    cursor:pointer;
    border-radius:8px;
    transition:var(--ipms-motion);
}

.ipms-modal-close:hover{
    color:var(--ipms-coral);
}

/* ---------- Menu d'actions du tableau ---------- */

.ipms-menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border:1px solid var(--ipms-field);
    background:#fff;
    border-radius:var(--ipms-radius);
    font-family:var(--ipms-font);
    font-size:13px;
    font-weight:700;
    color:var(--ipms-navy);
    line-height:1.2;
    white-space:nowrap;
    cursor:pointer;
    transition:var(--ipms-motion);
}

.ipms-menu-toggle:hover,
.ipms-menu-toggle[aria-expanded="true"]{
    background:var(--ipms-navy);
    border-color:var(--ipms-navy);
    color:#fff;
}

.ipms-menu-toggle:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

/* Bouton « Télécharger la fiche » dans la liste des élèves : reste une
   icône carrée, pas un bouton de filtre — la combinaison de classes
   l'emporte sur les deux règles ci-dessus par spécificité. */
.ipms-icon-btn.ipms-menu-toggle{
    width:34px;
    height:34px;
    padding:0;
    gap:0;
    justify-content:center;
}

.ipms-menu-caret{
    font-size:10px;
    transition:transform .15s ease;
}

.ipms-menu-toggle[aria-expanded="true"] .ipms-menu-caret{
    transform:rotate(180deg);
}

/*
 * Filtre campus : même composant que le menu d'actions, mais dimensionné
 * comme le champ de recherche voisin. Ces règles doivent rester APRÈS
 * .ipms-menu-toggle — à spécificité égale, c'est la dernière qui l'emporte.
 */
.ipms-campus-toggle{
    justify-content:space-between;
    min-width:230px;
    padding:12px 16px;
    font-size:15px;
    font-weight:400;
    color:var(--ipms-ink);
}

.ipms-campus-toggle:hover,
.ipms-campus-toggle[aria-expanded="true"]{
    background:#fff;
    border-color:var(--ipms-coral);
    color:var(--ipms-ink);
}

.ipms-campus-toggle .ipms-menu-caret{
    font-size:12px;
    color:var(--ipms-navy);
}

/*
 * Positionné en `fixed` et placé par JS : le conteneur du tableau a un
 * overflow-x, qui rognerait un menu en position absolue.
 */
.ipms-menu-list{
    position:fixed;
    z-index:10000;
    min-width:210px;
    padding:6px;
    background:#fff;
    border:1px solid var(--ipms-line);
    border-radius:var(--ipms-radius);
    box-shadow:0 12px 32px rgba(0, 42, 90, .18);
}

.ipms-menu-list[hidden]{
    display:none;
}

/* Une entité peut compter jusqu'à 26 campus. */
.ipms-menu-scroll{
    max-height:320px;
    overflow-y:auto;
}

/* Champ pour filtrer la liste des campus, collé en haut du menu. */
.ipms-menu-search{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0 0 6px;
    padding:8px 10px;
    position:sticky;
    top:0;
    z-index:1;
    background:#fff;
}

/*
 * Le filet de séparation appartient au formulaire, pas au bouton : à
 * l'intérieur du bouton, il agrandissait sa boîte et le fond du survol
 * débordait sur la zone du filet.
 */
.ipms-menu-list form{
    margin:6px 0 0;
    padding-top:6px;
    border-top:1px solid var(--ipms-line);
}

.ipms-menu-item{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border:0;
    background:transparent;
    border-radius:6px;
    font-family:var(--ipms-font);
    font-size:14px;
    color:var(--ipms-ink);
    text-align:left;
    text-decoration:none;
    cursor:pointer;
    transition:var(--ipms-motion);
}

.ipms-menu-item:hover,
.ipms-menu-item:focus-visible{
    outline:none;
    background:var(--ipms-navy-tint);
    color:var(--ipms-navy);
}

/* La suppression est irréversible : elle se distingue du reste. */
.ipms-menu-danger{
    color:var(--ipms-coral-dark);
    font-weight:600;
}

.ipms-menu-danger:hover,
.ipms-menu-danger:focus-visible{
    background:var(--ipms-coral-tint);
    color:var(--ipms-coral-dark);
}

/* Campus actif dans le filtre. Après :hover, sinon il serait écrasé. */
.ipms-menu-item.is-selected{
    background:var(--ipms-navy);
    color:#fff;
    font-weight:600;
}

.ipms-menu-item.is-selected:hover,
.ipms-menu-item.is-selected:focus-visible{
    background:var(--ipms-navy-dark);
    color:#fff;
}

/*
 * Bouton « Télécharger la fiche officielle » : même composant de menu que
 * les filtres, mais habillé comme un .ipms-btn — c'est une action, pas un
 * simple filtre d'affichage.
 */
.ipms-fiche-toggle{
    padding:14px 28px;
    border:0;
    background:var(--ipms-coral-btn);
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.ipms-fiche-toggle:hover,
.ipms-fiche-toggle[aria-expanded="true"]{
    background:var(--ipms-coral-btn-hover);
    color:#fff;
}

.ipms-fiche-menu{
    min-width:240px;
}

.ipms-fiche-check{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.ipms-fiche-check input{
    width:auto;
    margin:0;
}

.ipms-fiche-submit{
    width:100%;
    margin-top:6px;
}

/* Sélecteur d'entité de l'administrateur. */
.ipms-switcher{
    padding:16px 26px;
    border-left:4px solid var(--ipms-coral);
}

.ipms-switcher label{
    white-space:nowrap;
}

.ipms-switcher select{
    width:auto;
    min-width:240px;
}

/* ---------- Administration ---------- */

.ipms-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:24px;
    border-bottom:2px solid var(--ipms-line);
}

.ipms-tab{
    padding:12px 20px;
    border:1px solid transparent;
    border-bottom:0;
    border-radius:var(--ipms-radius) var(--ipms-radius) 0 0;
    margin-bottom:-2px;
    font-family:var(--ipms-font);
    font-size:14px;
    font-weight:700;
    color:var(--ipms-muted);
    text-decoration:none;
    transition:var(--ipms-motion);
}

.ipms-tab:hover{
    color:var(--ipms-navy);
    background:var(--ipms-navy-tint);
}

.ipms-tab.is-active{
    background:#fff;
    border-color:var(--ipms-line);
    border-top:3px solid var(--ipms-coral);
    border-bottom:2px solid #fff;
    color:var(--ipms-navy);
    box-shadow:0 -2px 8px rgba(0, 42, 90, .05);
}

.ipms-tab:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

/* Ajout d'une valeur : champ + bouton sur une ligne. */
.ipms-inline-form{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.ipms-inline-form input[type=text]{
    flex:1;
    min-width:240px;
}

.ipms-inline-form .ipms-btn{
    margin-top:0;
}

.ipms-admin-meta{
    color:var(--ipms-muted);
    font-size:13px;
}

/* Suppression d'entité : détachée du reste de la carte par un filet. */
.ipms-entity-delete{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--ipms-line);
}

/* ---------- Statistiques : barres maison ---------- */

.ipms-graph-row{
    display:grid;
    grid-template-columns:170px 1fr 190px;
    align-items:center;
    gap:14px;
    margin:12px 0;
}

.ipms-graph-label{
    font-weight:700;
    font-size:14px;
    color:var(--ipms-navy);
}

.ipms-bar{
    height:14px;
    background:var(--ipms-navy-tint);
    border-radius:999px;
    overflow:hidden;
}

.ipms-bar-fill{
    height:100%;
    min-width:3px;
    background:var(--ipms-coral);
    border-radius:999px;
    transition:width .3s ease;
}

.ipms-graph-value{
    font-size:13px;
    color:var(--ipms-ink);
    text-align:right;
    white-space:nowrap;
}

/* Élèves par promotion : une barre par rentrée, bien aérée. */
.ipms-graph-row-wide{
    margin:22px 0;
}

.ipms-bar-tall{
    height:20px;
}

/*
 * Échelle fixe : des repères verticaux réguliers, pour qu'on situe la barre
 * sans avoir à compter. Un dégradé répété plutôt que des éléments en plus,
 * la barre reste un seul bloc.
 *
 * L'écart se règle par --ipms-tick, pour que les repères tombent sur des
 * nombres ronds quelle que soit l'échelle.
 */
.ipms-bar-scaled{
    --ipms-tick:25%;
    background-image:repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(var(--ipms-tick) - 1px),
        rgba(0, 42, 90, .18) calc(var(--ipms-tick) - 1px),
        rgba(0, 42, 90, .18) var(--ipms-tick)
    );
}

/* Échelle de 50 : cinq pas de 10 élèves valent mieux que quatre de 12,5. */
.ipms-tick-fifth{
    --ipms-tick:20%;
}

.ipms-scale-row{
    margin-top:-8px;
}

.ipms-scale{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--ipms-muted);
}

/* Les deux graduations extrêmes débordent sinon de la barre. */
.ipms-scale span:first-child{
    margin-left:-2px;
}

.ipms-scale span:last-child{
    margin-right:-2px;
}

@media(max-width:700px){
    .ipms-scale-row{
        margin-top:0;
    }
}

/*
 * Cartes de la vue d'ensemble : un résumé par onglet. Elles se placent en
 * grille, d'où la mise en colonne — le lien « → » doit rester collé en bas
 * même quand la carte voisine est plus haute.
 */
.ipms-summary{
    display:flex;
    flex-direction:column;
    margin-bottom:0;
}

.ipms-summary h2{
    font-size:16px;
}

/* Sous-titres de la carte de synthèse (Entités / Écoles / Promotions). */
.ipms-summary h3{
    margin:14px 0 4px;
    font-size:12px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ipms-muted);
}

.ipms-summary h3:first-of-type{
    margin-top:4px;
}

.ipms-summary .ipms-alerts{
    font-size:14px;
}

/* La dernière liste pousse le lien « → » vers le bas de la carte. */
.ipms-summary .ipms-alerts:last-of-type{
    flex:1 0 auto;
}

.ipms-summary .ipms-alerts li{
    margin:6px 0;
}

.ipms-more{
    display:inline-block;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--ipms-line);
    color:var(--ipms-coral-btn);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}

.ipms-more:hover,
.ipms-more:focus{
    color:var(--ipms-coral-btn-hover);
    text-decoration:underline;
}

/* La grille de résumés respire autant que les cartes pleine largeur. */
.ipms-container .ipms-grid-2{
    margin-bottom:20px;
}

/*
 * Vue d'ensemble : deux colonnes. À gauche la grande carte « Nombre
 * d'élèves » ; à droite « Évolution » et « Avancement » empilées, qui
 * remplissent la hauteur — plus de carte orpheline en bas.
 */
.ipms-overview-cols{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    align-items:start;
    margin-bottom:20px;
}

.ipms-overview-col{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* Les cartes ne portent plus la marge du bas : le gap s'en charge. */
.ipms-overview-col > .ipms-card{
    margin-bottom:0;
}

@media(max-width:760px){
    .ipms-overview-cols{
        grid-template-columns:1fr;
    }
}

/* ---------- Nombre d'élèves : menus en cascade + tableau ---------- */

.ipms-cascade{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:20px;
}

.ipms-cascade-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1 1 200px;
    margin:0;
    font-size:13px;
    font-weight:700;
    color:var(--ipms-navy);
}

/* Un menu désactivé reste lisible, mais visiblement en attente. */
.ipms-cascade-field select:disabled{
    background-color:var(--ipms-surface);
    color:var(--ipms-muted);
    cursor:not-allowed;
    opacity:1;
}

/* Colonne numérique du tableau : chiffres alignés à droite. */
.ipms-table .ipms-num{
    text-align:right;
    white-space:nowrap;
}

/* Le nombre d'élèves, en évidence. */
.ipms-count-num{
    display:inline-block;
    font-size:22px;
    font-weight:800;
    line-height:1.1;
    color:var(--ipms-navy);
}

/* Barre de proportion : part de la plus grande valeur du niveau affiché. */
.ipms-count-track{
    display:block;
    width:120px;
    max-width:40vw;
    height:6px;
    margin:5px 0 0 auto;
    background:var(--ipms-navy-tint);
    border-radius:999px;
    overflow:hidden;
}

.ipms-count-bar{
    display:block;
    height:100%;
    min-width:4px;
    background:var(--ipms-coral);
    border-radius:999px;
}

/* Cellule de dimension figée (répétée) : discrète, pour laisser ressortir
   la colonne détaillée en gras. */
.ipms-nombre .ipms-cell-fixed{
    color:var(--ipms-muted);
}

.ipms-nombre th{
    white-space:nowrap;
}

#ipms-nombre-table tfoot td{
    border-top:2px solid var(--ipms-line);
    background:var(--ipms-surface);
}

#ipms-nombre-table tfoot .ipms-count-num{
    font-size:20px;
}

/* Cache le JSON embarqué, au cas où un thème l'afficherait. */
#ipms-nombre-data{
    display:none;
}

@media(max-width:600px){
    .ipms-cascade-field{
        flex-basis:100%;
    }
}

/* ---------- Avancement : barres empilées par bloc ---------- */

.ipms-bloc-row{
    margin:18px 0;
}

.ipms-bloc-head{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}

.ipms-bloc-head strong{
    font-size:15px;
    color:var(--ipms-navy);
}

/* Une barre pleine, découpée en trois segments (complet / en cours / pas commencé). */
.ipms-stack{
    display:flex;
    width:100%;
    height:22px;
    border-radius:999px;
    overflow:hidden;
    background:var(--ipms-navy-tint);
}

.ipms-seg{
    height:100%;
    min-width:2px;
}

/* Vert = validé, orange = en cours, gris clair = pas commencé.
   Trois teintes distinctes aussi en niveaux de gris (impression). */
.ipms-seg-complet{ background:#0f766e; }
.ipms-seg-encours{ background:#e0932f; }
.ipms-seg-pasc{ background:var(--ipms-navy-tint-strong); }
.ipms-seg-nonvalide{ background:#cd4949; }   /* rouge = non validé */

/* Vue barres par bloc : résumé chiffré à droite, détail sous la barre. */
.ipms-blocs .ipms-bloc-row{
    margin:14px 0 18px;
}
.ipms-bloc-summary{
    font-size:13px;
    color:var(--ipms-muted);
    text-align:right;
}
.ipms-bloc-summary strong{
    font-weight:700;
}
.ipms-blocs .ipms-bloc-detail{
    margin-top:8px;
}
/* Un seul élève sur 296 arrondit à 0 % : on garde un segment visible. */
.ipms-blocs .ipms-seg{
    min-width:5px;
}

.ipms-legend{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    margin:0 0 16px;
    padding:0;
    list-style:none;
    font-size:13px;
    color:var(--ipms-ink);
}

.ipms-legend li{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
}

.ipms-legend-dot{
    width:12px;
    height:12px;
    border-radius:999px;
    flex:0 0 auto;
}

.ipms-bloc-foot{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid var(--ipms-line);
}

/* Pourcentages validé / non validé d'un bloc. */
.ipms-bloc-pct{
    font-size:13px;
    font-weight:700;
}

.ipms-pct-ok{ color:#0f766e; }
.ipms-pct-ko{ color:var(--ipms-muted); }

.ipms-bloc-sub{
    margin:2px 0 6px;
}

/* Dépliant « Voir les élèves » sous une barre de bloc. */
.ipms-bloc-detail{
    margin-top:8px;
    font-size:13px;
}

.ipms-bloc-detail summary{
    cursor:pointer;
    color:var(--ipms-coral-btn);
    font-weight:700;
    list-style:none;
}

.ipms-bloc-detail summary::-webkit-details-marker{
    display:none;
}

.ipms-bloc-detail summary::before{
    content:"▸ ";
}

.ipms-bloc-detail[open] summary::before{
    content:"▾ ";
}

.ipms-bloc-detail p{
    margin:6px 0 0;
    color:var(--ipms-ink);
}

/* Tableau d'avancement des blocs — style épuré. */

/* En-tête léger : un simple filet, plus de bandeau bleu foncé plein. */
.ipms-blocs-table th{
    background:transparent;
    color:var(--ipms-muted);
    border-bottom:2px solid var(--ipms-line);
    padding:10px 16px;
    letter-spacing:.06em;
}

/* Chaque bloc = ligne de chiffres + ligne « Voir les élèves » regroupées :
   pas de filet entre les deux, un seul trait discret en bas du groupe. */
.ipms-blocs-table tbody tr:not(.ipms-bloc-detail-row) > td{
    border-bottom:0;
    padding:14px 16px 8px;
}

.ipms-blocs-table tbody tr:hover{
    background:transparent;
}

/* Zéros en gris : la couleur ne signale que les chiffres qui comptent. */
.ipms-blocs-table .ipms-num-zero{
    color:var(--ipms-muted);
    font-weight:400;
}

/* Ligne « Voir les élèves » : discrète, sans bandeau gris. */
.ipms-blocs-table .ipms-bloc-detail-row > td{
    padding:0 16px 14px;
    background:transparent;
    border-bottom:1px solid var(--ipms-line);
}

.ipms-blocs-table .ipms-bloc-detail-row .ipms-bloc-detail{
    margin-top:0;
}

.ipms-blocs-table .ipms-bloc-detail summary{
    color:var(--ipms-muted);
    font-weight:600;
    font-size:12px;
}

.ipms-blocs-table .ipms-bloc-detail summary:hover{
    color:var(--ipms-coral-btn);
}

/* Détail élève × bloc : une matrice repliable sous les barres agrégées. */
.ipms-matrix-detail{
    margin-top:18px;
    font-size:14px;
}

.ipms-matrix-detail > summary{
    margin-bottom:12px;
}

.ipms-matrix .ipms-etat-cell{
    text-align:center;
    font-size:16px;
    font-weight:700;
}

/* Recherche : le champ élève prend la place restante. */
.ipms-cascade-grow{
    flex:2 1 260px;
}

/* Autocomplétion : la liste de suggestions se pose sous le champ. */
.ipms-autocomplete{
    position:relative;
}

/*
 * Le champ ressemble à un menu déroulant (flèche à droite) : il s'ouvre au
 * clic sur toute la liste, et se filtre à la frappe.
 */
.ipms-container .ipms-ac-input{
    appearance:none;
    -webkit-appearance:none;
    padding-right:38px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23002a5a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    cursor:pointer;
}

.ipms-ac-list{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:20;
    margin:2px 0 0;
    padding:4px;
    list-style:none;
    max-height:260px;
    overflow-y:auto;
    background:#fff;
    border:1px solid var(--ipms-field);
    border-radius:var(--ipms-radius);
    box-shadow:var(--ipms-shadow-lg);
}

.ipms-ac-list li{
    padding:8px 10px;
    border-radius:var(--ipms-radius);
    font-size:14px;
    cursor:pointer;
}

.ipms-ac-list li:hover{
    background:var(--ipms-navy-tint);
    color:var(--ipms-navy);
}

.ipms-ac-reset{
    display:inline-block;
    margin-top:6px;
    font-size:13px;
    font-weight:700;
    color:var(--ipms-coral-btn);
    text-decoration:none;
}

.ipms-ac-reset:hover{
    text-decoration:underline;
}

/* Fiche d'un élève : l'état d'un bloc, à droite comme les pourcentages. */
.ipms-etat-text-validated{ color:#0f766e; }
.ipms-etat-text-encours{ color:#e0932f; }
.ipms-etat-text-nonvalide{ color:#cd4949; }
.ipms-etat-text-notstarted{ color:var(--ipms-muted); }

/*
 * Pastille d'état bien lisible : fond teinté + texte foncé de la même
 * famille. Plus contrasté que le texte coloré seul, mais reste doux.
 */
.ipms-etat-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1.5;
    white-space:nowrap;
}
.ipms-badge-validated{ background:#d5efe9; color:#0b5c55; }
.ipms-badge-encours{ background:#fbe6c9; color:#8a5410; }
.ipms-badge-nonvalide{ background:#f6dada; color:#9b2f2f; }
.ipms-badge-notstarted{ background:#e8ecf3; color:#5b6675; }

/*
 * Écart d'une rentrée à l'autre. La couleur double la flèche, qui double
 * elle-même le signe : lisible aussi sans distinguer les couleurs.
 */
.ipms-trend{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.ipms-trend-up{
    color:#0f766e;
}

.ipms-trend-down{
    color:var(--ipms-coral-btn);
}

.ipms-trend-flat{
    color:var(--ipms-muted);
}

.ipms-alerts{
    margin:10px 0 0;
    padding-left:20px;
}

.ipms-alerts li{
    margin:6px 0;
}

/* Sur petit écran : la ligne se replie proprement. */
@media(max-width:700px){
    .ipms-graph-row{
        grid-template-columns:1fr;
        gap:6px;
        margin:16px 0;
    }

    .ipms-graph-value{
        text-align:left;
    }
}

.ipms-details summary{
    display:inline-block;
    padding:8px 0;
    color:var(--ipms-navy);
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}

.ipms-details summary:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
    border-radius:6px;
}

/* Comptes regroupés par entité : une section repliable par entité. */
.ipms-account-group{
    border:1px solid var(--ipms-line);
    border-radius:var(--ipms-radius);
    background:var(--ipms-surface);
    margin-bottom:12px;
}

.ipms-account-group > summary{
    display:block;
    padding:14px 16px;
    font-size:15px;
}

.ipms-account-group[open] > summary{
    border-bottom:1px solid var(--ipms-line);
}

.ipms-account-group .ipms-table-wrapper{
    padding:4px 16px 12px;
    background:#fff;
    border-radius:0 0 var(--ipms-radius) var(--ipms-radius);
}

.ipms-account-group .ipms-table td{
    vertical-align:top;
}

.ipms-count{
    margin-left:6px;
    font-weight:600;
    font-size:13px;
    color:var(--ipms-muted);
}

/*
 * Niveau imbriqué (promotion > entité > écoles) : fond blanc et titre plus
 * discret, pour qu'on voie tout de suite qu'on est un cran plus bas.
 */
.ipms-account-group .ipms-account-group{
    background:#fff;
    margin-bottom:8px;
}

.ipms-account-group .ipms-account-group > summary{
    padding:10px 14px;
    font-size:14px;
}

.ipms-account-group .ipms-account-group .ipms-table-wrapper{
    background:var(--ipms-surface);
}

/* Le sélecteur de rattachement, replié par ligne pour garder des lignes courtes. */
.ipms-row-edit{
    margin-top:8px;
}

.ipms-row-edit > summary{
    padding:4px 0;
    font-size:13px;
    font-weight:600;
    color:var(--ipms-coral-dark);
}

.ipms-row-edit > summary:hover{
    color:var(--ipms-navy);
}

.ipms-row-edit .ipms-inline-form{
    margin-top:8px;
}

.ipms-checkbox-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
    gap:8px 16px;
    margin:14px 0;
    font-size:14px;
}

.ipms-checkbox-grid input[type=checkbox]{
    accent-color:var(--ipms-coral);
    margin-right:6px;
}

/* Action destructive dans un tableau : un lien, pas un bouton. */
.ipms-link-danger{
    padding:0;
    border:0;
    background:none;
    font-family:var(--ipms-font);
    font-size:14px;
    font-weight:600;
    color:var(--ipms-coral-dark);
    text-decoration:underline;
    cursor:pointer;
    border-radius:4px;
}

.ipms-link-danger:hover{
    color:var(--ipms-navy);
}

.ipms-link-danger:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

/* ---------- Import Excel ---------- */

.ipms-upload-field{
    position:relative;
    margin:20px 0;
}

/*
 * Le champ reste dans le flux — retiré, il perdrait le focus clavier et la
 * validation « required » du navigateur — mais devient invisible.
 */
.ipms-file-input{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}

.ipms-file-drop{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    padding:26px 20px;
    border:2px dashed rgba(255, 255, 255, .35);
    border-radius:var(--ipms-radius);
    background:rgba(255, 255, 255, .06);
    text-align:center;
    cursor:pointer;
    transition:var(--ipms-motion);
}

.ipms-upload-field:hover .ipms-file-drop,
.ipms-file-input:focus-visible + .ipms-file-drop,
.ipms-file-drop.is-dragging{
    border-color:var(--ipms-coral);
    background:rgba(245, 87, 87, .10);
}

.ipms-file-lead{
    color:#fff;
    font-size:15px;
    font-weight:700;
}

.ipms-file-or{
    color:rgba(255, 255, 255, .65);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

/* Imite un bouton, mais c'est le <label> qui ouvre le sélecteur. */
.ipms-file-cta{
    display:inline-block;
    padding:10px 20px;
    border-radius:var(--ipms-radius);
    background:#fff;
    color:var(--ipms-navy);
    font-weight:700;
    font-size:14px;
}

.ipms-file-name{
    color:#fff;
    font-size:14px;
    font-weight:600;
    word-break:break-all;
}

.ipms-file-hint{
    color:rgba(255, 255, 255, .65);
    font-size:12px;
}

/* ---------- Bandeaux ---------- */

.ipms-notice{
    margin-bottom:20px;
    padding:16px 20px;
    border-radius:var(--ipms-radius);
    font-weight:600;
    box-shadow:var(--ipms-shadow);
}

.ipms-notice-success{
    background:#e8f9ef;
    color:#18794e;
    border:1px solid #8bd3a8;
    border-left:4px solid #18794e;
}

.ipms-notice-error{
    background:var(--ipms-coral-tint);
    color:#93251f;
    border:1px solid #f5b5b5;
    border-left:4px solid var(--ipms-coral-btn);
}

.ipms-notice ul{
    margin-top:12px;
    margin-left:20px;
}

/* ---------- Blocs et épreuves ---------- */

.ipms-blocks{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:12px;
}

.ipms-tile{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:16px 18px;
    border:1px solid var(--ipms-line);
    border-left:4px solid var(--ipms-line);
    border-radius:12px;
    background:#fff;
    color:var(--ipms-ink);
    text-decoration:none;
    transition:var(--ipms-motion);
}

.ipms-tile:hover{
    background:var(--ipms-surface);
    box-shadow:0 4px 14px rgba(0, 42, 90, .10);
}

.ipms-tile:focus-visible{
    outline:none;
    box-shadow:var(--ipms-ring);
}

.ipms-tile-title{
    font-weight:700;
    font-size:16px;
    color:var(--ipms-navy);
}

.ipms-tile-state{
    font-weight:600;
    font-size:14px;
}

.ipms-tile-meta{
    font-size:12px;
    color:var(--ipms-muted);
}

/*
 * La tuile ouverte. On ne touche pas au bord gauche : c'est lui qui
 * porte l'état du bloc.
 */
.ipms-tile.is-current{
    background:var(--ipms-coral-tint);
    border-top-color:var(--ipms-coral);
    border-right-color:var(--ipms-coral);
    border-bottom-color:var(--ipms-coral);
    font-weight:600;
}

.ipms-tile--pending .ipms-tile-state{
    color:var(--ipms-muted);
}

.ipms-tile--partial{
    border-left-color:var(--ipms-navy);
}

.ipms-tile--partial .ipms-tile-state{
    color:var(--ipms-navy);
}

.ipms-tile--validated{
    border-left-color:#18794e;
}

.ipms-tile--validated .ipms-tile-state{
    color:#18794e;
}

.ipms-tile--failed{
    border-left-color:var(--ipms-coral);
}

.ipms-tile--failed .ipms-tile-state{
    color:var(--ipms-coral-dark);
}

/* ---------- Modalités de l'épreuve ---------- */

.ipms-exam-header{
    margin-bottom:24px;
    padding:20px;
    border:1px solid var(--ipms-line);
    border-left:4px solid var(--ipms-coral);
    border-radius:12px;
    background:var(--ipms-surface);
}

.ipms-exam-header h3{
    margin-top:0;
    font-size:16px;
    text-transform:uppercase;
    color:var(--ipms-navy);
}

.ipms-exam-header label{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:600;
}

/* ---------- Compétences ---------- */

.ipms-competence{
    padding:20px;
    margin-bottom:16px;
    border:1px solid var(--ipms-line);
    border-radius:12px;
    background:#fff;
    transition:var(--ipms-motion);
}

.ipms-competence:hover{
    border-color:var(--ipms-navy-tint-strong);
}

/* Compétence sécurité : liseré corail, comme le grisé de la fiche. */
.ipms-competence[data-security="1"]{
    border-left:4px solid var(--ipms-coral);
}

.ipms-competence-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.ipms-competence h3{
    margin:0;
    font-size:15px;
    letter-spacing:0;
    color:var(--ipms-navy);
}

.ipms-competence p{
    margin:10px 0 0;
    font-size:14px;
    line-height:1.5;
}

.ipms-result-options{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:14px;
}

.ipms-result-options label{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}

.ipms-result-options input[type=radio]{
    accent-color:var(--ipms-coral);
}

.ipms-security-badge{
    padding:5px 10px;
    border-radius:20px;
    background:var(--ipms-coral-tint);
    color:var(--ipms-coral-dark);
    border:1px solid var(--ipms-coral);
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.ipms-competence-comment{
    margin-top:18px;
}

.ipms-competence-comment label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:600;
}

/* ---------- Synthèse de l'épreuve ---------- */

.ipms-exam-summary{
    margin:30px 0;
    padding:24px;
    border:1px solid var(--ipms-line);
    border-top:3px solid var(--ipms-navy);
    border-radius:14px;
    background:var(--ipms-surface);
}

.ipms-exam-summary h3{
    margin-top:0;
    font-size:16px;
    text-transform:uppercase;
    color:var(--ipms-navy);
}

.ipms-exam-summary p{
    font-size:14px;
}

.ipms-exam-summary label{
    display:block;
    margin:20px 0 8px;
    font-size:13px;
    font-weight:700;
}

.ipms-exam-status{
    margin-top:18px;
    font-size:16px;
    font-weight:700;
}

/*
 * Verdict validé / non validé. La couleur accélère la lecture, mais le
 * symbole ✓ / ✕ reste : sans lui, un daltonien ne pourrait plus distinguer
 * les deux états.
 */
.ipms-state{
    white-space:nowrap;
}

.ipms-state-ok{
    color:#136c45;
}

.ipms-state-ko{
    color:var(--ipms-coral-dark);
}

.ipms-state-none{
    color:var(--ipms-muted);
}

/* ---------- Signatures ---------- */

.ipms-signatures{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
    margin-top:30px;
}

.ipms-signature-box{
    padding:20px;
    border:1px solid var(--ipms-field);
    border-radius:12px;
    background:#fff;
}

.ipms-signature-box h3{
    margin-top:0;
    font-size:15px;
    text-transform:uppercase;
    color:var(--ipms-navy);
}

.ipms-signature-box label{
    display:block;
    margin:14px 0 8px;
    font-size:13px;
    font-weight:700;
}

.ipms-signature-canvas-wrapper{
    width:100%;
    height:180px;
    margin-bottom:14px;
    border:2px dashed #9ca3af;
    border-radius:var(--ipms-radius);
    background:#fff;
    overflow:hidden;
    transition:var(--ipms-motion);
}

.ipms-signature-canvas-wrapper:hover{
    border-color:var(--ipms-coral);
}

.ipms-signature-canvas{
    display:block;
    width:100%;
    height:100%;
    touch-action:none;
    cursor:crosshair;
}

/* ---------- Responsive ---------- */

@media(max-width:800px){
    .ipms-grid{
        grid-template-columns:1fr;
    }

    .ipms-signatures{
        grid-template-columns:1fr;
    }

    .ipms-stats{
        flex-wrap:wrap;
    }

    .ipms-toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .ipms-search{
        width:100%;
    }
}

/* Respecte le réglage système de réduction des animations. */
@media(prefers-reduced-motion:reduce){
    *{
        transition:none !important;
    }
}

/* ==========================================================================
   Blindage contre le thème hôte (ex. Divi)

   Divi impose au contenu des interlignes et des marges très grands, au niveau
   des éléments (p, input…), ce qui « gonfle » toute l'interface du plugin. On
   ramène ces valeurs à la normale — uniquement dans le plugin, jamais ailleurs.
   Le !important est nécessaire pour passer devant les règles du thème.
   ========================================================================== */

body.ipms-full-page,
.ipms-container{
    font-size:15px;
    line-height:1.55;
}

.ipms-container p{
    margin:0 0 12px !important;
    line-height:1.5 !important;
}

.ipms-container label,
.ipms-container a,
.ipms-container li,
.ipms-container strong,
.ipms-container em,
.ipms-container button{
    line-height:1.4 !important;
}

.ipms-container h1{
    line-height:1.05 !important;
}

.ipms-container h2,
.ipms-container h3{
    line-height:1.2 !important;
}

/* Les champs : Divi les agrandit (police, hauteur, marges) et efface leur
   contour. On impose les nôtres — taille normale ET bordure toujours visible.
   background-color (pas background) pour ne pas effacer la flèche des <select>. */
.ipms-container input,
.ipms-container select,
.ipms-container textarea{
    font-size:15px !important;
    line-height:1.4 !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    border:1px solid var(--ipms-field) !important;
    border-radius:var(--ipms-radius) !important;
    background-color:#fff !important;
    color:var(--ipms-ink) !important;
}

/*
 * Contour dessiné à l'OMBRE INTERNE (box-shadow), pas seulement au border :
 * Divi surcharge « border » avec une règle plus forte, mais ne touche pas au
 * box-shadow des champs au repos. On monte aussi la spécificité (préfixe body)
 * pour passer devant les règles du thème.
 */
body.ipms-full-page .ipms-container input,
body.ipms-full-page .ipms-container select,
body.ipms-full-page .ipms-container textarea,
.ipms-container.ipms-container input,
.ipms-container.ipms-container select,
.ipms-container.ipms-container textarea{
    box-shadow:inset 0 0 0 1px var(--ipms-field) !important;
    background-color:#fff !important;
    border-radius:var(--ipms-radius) !important;
}

/* Au clic : contour corail + anneau de focus. */
body.ipms-full-page .ipms-container input:focus,
body.ipms-full-page .ipms-container select:focus,
body.ipms-full-page .ipms-container textarea:focus,
.ipms-container.ipms-container input:focus,
.ipms-container.ipms-container select:focus,
.ipms-container.ipms-container textarea:focus{
    border-color:var(--ipms-coral) !important;
    box-shadow:inset 0 0 0 1px var(--ipms-coral), var(--ipms-ring) !important;
}

/*
 * Champ « valeur imposée » (compte école, ex. « Tours ») : c'est un <p>.
 * Divi contraint la largeur des <p>, il apparaissait donc plus étroit que
 * les autres champs. On le force à occuper toute la largeur de sa case,
 * exactement comme les inputs voisins.
 */
body.ipms-full-page .ipms-modal-content .ipms-static-field,
.ipms-modal-content.ipms-modal-content .ipms-static-field{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    box-sizing:border-box !important;
    line-height:1.4 !important;
}