/*
 * Espace administrateur · feuille de style dédiée.
 *
 * Écrite à la main, chargée APRÈS site.css et uniquement sur les pages
 * d'administration. Aucune classe Tailwind n'est générée ici : le CSS du site
 * est précompilé, donc tout ce qui suit est du CSS ordinaire, scopé sous
 * `.iv-admin` pour ne jamais atteindre le site public.
 *
 * L'ossature est une barre latérale : la navigation tient en colonne à gauche,
 * avec le pied de session (compte, site public, déconnexion) ancré en bas, et
 * se replie derrière un bouton sous 1024 px.
 *
 * Deux couches :
 *   1. le système de composants (.iv-card, .iv-btn, .iv-table…) utilisé par le
 *      gabarit et les écrans refondus ;
 *   2. une couche de reprise, en fin de fichier, qui redonne l'apparence
 *      « verre » aux combinaisons d'utilitaires Tailwind restées dans les
 *      formulaires des modules.
 */

/* ==========================================================================
   1. Jetons
   ========================================================================== */

.iv-admin {
    --iv-rose: #e5276b;
    --iv-rose-sombre: #c31c58;
    --iv-vert: #81bc3b;
    --iv-orange: #f97316;
    --iv-encre: #1c1c28;
    --iv-encre-douce: #55556b;
    --iv-encre-faible: #8a8aa0;

    --iv-verre: rgba(255, 255, 255, .72);
    --iv-verre-fort: rgba(255, 255, 255, .86);
    --iv-verre-faible: rgba(255, 255, 255, .5);
    --iv-bord: rgba(16, 24, 40, .07);
    --iv-bord-clair: rgba(255, 255, 255, .75);
    --iv-flou: saturate(170%) blur(20px);

    --iv-ombre-s: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
    --iv-ombre-m: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -14px rgba(16, 24, 40, .18);
    --iv-ombre-l: 0 2px 4px rgba(16, 24, 40, .04), 0 28px 60px -26px rgba(16, 24, 40, .28);
    --iv-ombre-rose: 0 10px 24px -10px rgba(229, 39, 107, .55);

    --iv-r-s: 10px;
    --iv-r-m: 14px;
    --iv-r-l: 20px;
    --iv-r-xl: 26px;

    --iv-transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. Fond et ossature
   ========================================================================== */

.iv-admin {
    min-height: 100vh;
    margin: 0;
    color: var(--iv-encre);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    background-color: #f4f5fa;
    -webkit-font-smoothing: antialiased;
}

/* Halos colorés fixés derrière le contenu. */
.iv-admin::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(52rem 32rem at 12% -8%, rgba(229, 39, 107, .16), transparent 62%),
        radial-gradient(46rem 30rem at 92% 4%, rgba(129, 188, 59, .16), transparent 60%),
        radial-gradient(40rem 34rem at 62% 105%, rgba(139, 92, 246, .12), transparent 60%);
}

.iv-shell {
    position: relative;
    z-index: 1;
    max-width: 82rem;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 5rem;
}

@media (min-width: 1024px) {
    .iv-shell { padding: 2.25rem 2rem 5rem; }
}

/* ==========================================================================
   3. Ossature à barre latérale
   --------------------------------------------------------------------------
   Douze sections ne tiennent pas dans une rangée de pastilles : passées en
   colonne, elles se voient toutes d'un coup. La colonne est collante et
   possède son propre défilement, pour que le pied de session (compte, site,
   déconnexion) reste atteignable quelle que soit la longueur du menu.
   ========================================================================== */

.iv-app {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
}

.iv-side {
    position: sticky;
    top: 0;
    z-index: 45;
    flex: none;
    width: 16.5rem;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 1.15rem .85rem 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .68));
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border-right: 1px solid var(--iv-bord);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .6) inset, 22px 0 44px -38px rgba(16, 24, 40, .55);
}

.iv-side__tete {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .4rem;
}

.iv-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
    margin-right: auto;
    min-width: 0;
}

.iv-brand__titre {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.iv-brand__sous {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--iv-encre-faible);
}

/* Fermeture du menu replié : sans objet sur grand écran. */
.iv-side__fermer {
    display: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 10px;
    color: var(--iv-encre-douce);
    cursor: pointer;
}

.iv-side__fermer:hover { background: rgba(16, 24, 40, .06); color: var(--iv-encre); }

/* ==========================================================================
   4. Navigation de la barre latérale
   ========================================================================== */

.iv-side__nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-bottom: .3rem;
}

.iv-side__nav::-webkit-scrollbar { width: 6px; }
.iv-side__nav::-webkit-scrollbar-thumb { background: rgba(16, 24, 40, .14); border-radius: 999px; }

/* --- Familles dépliables -------------------------------------------------
   Chaque famille est un <details> : le repli marche sans JavaScript, et
   `admin.js` ne fait que retenir l'état d'une page à l'autre. */

.iv-side__groupe + .iv-side__groupe { margin-top: .5rem; }

.iv-side__famille {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .15rem;
    padding: .35rem .75rem;
    border-radius: 10px;
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--iv-encre-faible);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: color var(--iv-transition), background-color var(--iv-transition);
}

/* Le triangle natif est remplacé par le chevron. */
.iv-side__famille::-webkit-details-marker { display: none; }

.iv-side__famille span { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iv-side__famille:hover { color: var(--iv-encre); background: rgba(255, 255, 255, .8); }

.iv-side__famille:focus-visible { outline: 2px solid var(--iv-rose); outline-offset: 2px; }

.iv-side__chevron {
    width: .85rem;
    height: .85rem;
    flex: none;
    opacity: .6;
    transition: transform var(--iv-transition);
}

.iv-side__groupe[open] > .iv-side__famille > .iv-side__chevron { transform: rotate(180deg); }

.iv-side__groupe-liste {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.iv-side__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .52rem .75rem;
    border-radius: 11px;
    font-size: .855rem;
    font-weight: 600;
    color: var(--iv-encre-douce);
    text-decoration: none;
    transition: color var(--iv-transition), background-color var(--iv-transition);
}

.iv-side__item svg { width: 1.05rem; height: 1.05rem; flex: none; opacity: .75; }
.iv-side__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iv-side__item:hover {
    color: var(--iv-encre);
    background: rgba(255, 255, 255, .9);
}

.iv-side__item[aria-current="page"] {
    color: #fff;
    background: linear-gradient(140deg, var(--iv-rose), #f4497f);
    box-shadow: var(--iv-ombre-rose);
}

.iv-side__item[aria-current="page"] svg { opacity: 1; }

/* --- Pied : session et sorties ------------------------------------------ */

.iv-side__pied {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    padding-top: .7rem;
    border-top: 1px solid var(--iv-bord);
}

.iv-side__pied form { margin: 0; }

.iv-side__mail {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    padding: .45rem .75rem;
    border-radius: 11px;
    background: var(--iv-verre-faible);
    border: 1px solid var(--iv-bord);
    font-size: .78rem;
    font-weight: 500;
    color: var(--iv-encre-douce);
}

.iv-side__mail svg { width: .9rem; height: .9rem; flex: none; }
.iv-side__mail span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.iv-side__lien {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .75rem;
    border: 0;
    border-radius: 11px;
    background: none;
    font: inherit;
    font-size: .83rem;
    font-weight: 600;
    color: var(--iv-encre-douce);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--iv-transition), background-color var(--iv-transition);
}

.iv-side__lien svg { width: 1rem; height: 1rem; flex: none; opacity: .75; }

.iv-side__lien:hover {
    color: var(--iv-encre);
    background: rgba(255, 255, 255, .9);
}

.iv-side__lien[aria-current="page"] {
    color: var(--iv-rose);
    background: rgba(229, 39, 107, .1);
}

.iv-side__lien--sortie:hover { color: #b91c1c; background: rgba(220, 38, 38, .09); }

/* ==========================================================================
   4 bis. Colonne repliable sous 1024 px
   --------------------------------------------------------------------------
   Une case à cocher pilote l'ouverture : pas de JavaScript, donc le menu
   fonctionne même si le script tarde ou échoue.
   ========================================================================== */

.iv-menu__case {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.iv-voile {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--iv-transition);
}

.iv-barre-mobile {
    display: none;
    position: sticky;
    top: 0;
    z-index: 30;
    align-items: center;
    gap: .8rem;
    padding: .65rem 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .7));
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border-bottom: 1px solid var(--iv-bord);
}

.iv-barre-mobile__titre {
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-burger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex: none;
    padding: .4rem .75rem;
    border-radius: 999px;
    border: 1px solid var(--iv-bord);
    background: var(--iv-verre-fort);
    font-size: .8rem;
    font-weight: 600;
    color: var(--iv-encre);
    cursor: pointer;
}

.iv-burger svg { width: 1rem; height: 1rem; }

/* Le repère de focus doit rester visible : la case est masquée, on le reporte
   sur le bouton qui la commande. */
.iv-menu__case:focus-visible ~ .iv-app .iv-burger { outline: 2px solid var(--iv-rose); outline-offset: 2px; }

@media (max-width: 1023px) {
    .iv-side {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        width: min(19rem, 86vw);
        transform: translateX(-100%);
        transition: transform var(--iv-transition);
        box-shadow: var(--iv-ombre-l);
    }

    .iv-side__fermer { display: grid; }
    .iv-barre-mobile { display: flex; }

    .iv-menu__case:checked ~ .iv-app .iv-side { transform: none; }
    .iv-menu__case:checked ~ .iv-app .iv-voile { opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   4 ter. Colonne de contenu
   ========================================================================== */

.iv-main {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   5. En-tête de page
   ========================================================================== */

.iv-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.iv-page-head__titre {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.iv-page-head__sous {
    margin: .35rem 0 0;
    font-size: .9rem;
    color: var(--iv-encre-douce);
}

/* ==========================================================================
   6. Onglets internes
   ========================================================================== */

.iv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .3rem;
    margin-bottom: 1.5rem;
    border-radius: var(--iv-r-m);
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--iv-bord);
    box-shadow: var(--iv-ombre-s);
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.iv-tabs::-webkit-scrollbar { display: none; }

.iv-tab {
    padding: .5rem .95rem;
    border-radius: 10px;
    font-size: .83rem;
    font-weight: 600;
    color: var(--iv-encre-douce);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--iv-transition);
}

.iv-tab:hover { color: var(--iv-encre); background: rgba(255, 255, 255, .75); }

.iv-tab[aria-current="page"] {
    color: var(--iv-rose);
    background: #fff;
    box-shadow: var(--iv-ombre-s);
}

/* ==========================================================================
   7. Cartes
   ========================================================================== */

.iv-card {
    position: relative;
    border-radius: var(--iv-r-xl);
    background: var(--iv-verre);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-m);
    overflow: hidden;
}

/* Liseré lumineux sur le haut de chaque carte. */
.iv-card::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
    pointer-events: none;
}

.iv-card--pad { padding: 1.75rem; }

@media (min-width: 768px) {
    .iv-card--pad { padding: 2.25rem; }
}

.iv-card__titre {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0 0 .25rem;
}

/* Vignettes de statistiques */
.iv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.iv-stat {
    padding: 1.15rem 1.35rem;
    border-radius: var(--iv-r-l);
    background: var(--iv-verre);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-s);
}

.iv-stat__label {
    margin: 0 0 .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iv-encre-faible);
}

.iv-stat__valeur {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.iv-stat--alerte {
    border-color: rgba(220, 38, 38, .25);
    background: linear-gradient(180deg, rgba(254, 242, 242, .9), rgba(255, 255, 255, .7));
}

.iv-stat--alerte .iv-stat__valeur { color: #dc2626; }

/* ==========================================================================
   8. Barre de recherche
   ========================================================================== */

.iv-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.iv-search__field {
    position: relative;
    flex: 1 1 22rem;
    min-width: 0;
}

.iv-search__icone {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--iv-encre-faible);
    pointer-events: none;
    transition: color var(--iv-transition);
}

.iv-search__input {
    width: 100%;
    padding: .8rem 5.5rem .8rem 2.85rem;
    font: inherit;
    font-size: .92rem;
    color: var(--iv-encre);
    border-radius: 999px;
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-s);
    transition: border-color var(--iv-transition), box-shadow var(--iv-transition);
    appearance: none;
}

.iv-search__input::placeholder { color: var(--iv-encre-faible); }

.iv-search__input:focus {
    outline: none;
    border-color: rgba(229, 39, 107, .55);
    box-shadow: 0 0 0 4px rgba(229, 39, 107, .13), var(--iv-ombre-m);
}

.iv-search__field:focus-within .iv-search__icone { color: var(--iv-rose); }

/* Raccourci clavier affiché à droite du champ. */
.iv-search__kbd {
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    padding: .18rem .45rem;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--iv-encre-faible);
    background: rgba(16, 24, 40, .045);
    border: 1px solid var(--iv-bord);
    pointer-events: none;
}

@media (min-width: 640px) {
    .iv-search__kbd { display: block; }
}

.iv-search__field:focus-within .iv-search__kbd,
.iv-search__field.est-rempli .iv-search__kbd { display: none; }

/* Croix d'effacement, visible dès qu'il y a du texte. */
.iv-search__clear {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: var(--iv-encre-douce);
    background: rgba(16, 24, 40, .06);
    transition: all var(--iv-transition);
}

.iv-search__clear svg { width: .85rem; height: .85rem; }
.iv-search__clear:hover { background: rgba(229, 39, 107, .12); color: var(--iv-rose); }
.iv-search__field.est-rempli .iv-search__clear { display: grid; }

.iv-search__compte {
    font-size: .82rem;
    font-weight: 600;
    color: var(--iv-encre-douce);
    padding: .35rem .8rem;
    border-radius: 999px;
    background: var(--iv-verre-faible);
    border: 1px solid var(--iv-bord);
    white-space: nowrap;
}

.iv-search__compte[hidden] { display: none; }
.iv-search__compte.est-vide { color: var(--iv-rose); border-color: rgba(229, 39, 107, .3); }

/* Ligne « aucun résultat » injectée par le script. */
.iv-search__aucun td,
.iv-search__aucun {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--iv-encre-faible);
    font-size: .9rem;
}

/* ==========================================================================
   9. Tableaux
   ========================================================================== */

.iv-table-wrap { overflow-x: auto; }

.iv-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    font-size: .875rem;
}

.iv-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .85rem 1.35rem;
    text-align: left;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--iv-encre-faible);
    background: rgba(248, 249, 253, .92);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border-bottom: 1px solid var(--iv-bord);
    white-space: nowrap;
}

.iv-table thead th:last-child { text-align: right; }

.iv-table tbody td {
    padding: .95rem 1.35rem;
    border-bottom: 1px solid rgba(16, 24, 40, .05);
    color: var(--iv-encre-douce);
    vertical-align: middle;
}

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

.iv-table tbody tr {
    transition: background-color var(--iv-transition);
}

.iv-table tbody tr:hover { background: rgba(255, 255, 255, .75); }

.iv-table tbody tr.est-passe { opacity: .55; }

.iv-table .iv-cell-forte {
    color: var(--iv-encre);
    font-weight: 600;
}

.iv-table .iv-cell-note {
    display: block;
    margin-top: .15rem;
    font-size: .74rem;
    font-weight: 400;
    color: var(--iv-encre-faible);
}

.iv-table .iv-cell-actions {
    text-align: right;
    white-space: nowrap;
}

.iv-table .iv-cell-vide {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--iv-encre-faible);
}

.iv-table .iv-col-select { width: 2.75rem; padding-inline: 1rem; }

/* ==========================================================================
   10. Badges
   ========================================================================== */

.iv-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .25rem .62rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    background: rgba(16, 24, 40, .05);
    color: var(--iv-encre-douce);
    white-space: nowrap;
}

button.iv-badge { cursor: pointer; transition: all var(--iv-transition); }
button.iv-badge:hover { filter: brightness(.96); transform: translateY(-1px); }

.iv-badge--vert   { background: rgba(129, 188, 59, .14); color: #4d7a17; border-color: rgba(129, 188, 59, .3); }
.iv-badge--rouge  { background: rgba(220, 38, 38, .1);   color: #b91c1c; border-color: rgba(220, 38, 38, .22); }
.iv-badge--rose   { background: rgba(229, 39, 107, .1);  color: var(--iv-rose-sombre); border-color: rgba(229, 39, 107, .22); }
.iv-badge--orange { background: rgba(249, 115, 22, .12); color: #c2410c; border-color: rgba(249, 115, 22, .25); }
.iv-badge--neutre { background: rgba(16, 24, 40, .05);   color: var(--iv-encre-douce); border-color: var(--iv-bord); }

/* ==========================================================================
   11. Boutons et actions
   ========================================================================== */

.iv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .6rem 1.1rem;
    border-radius: var(--iv-r-m);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--iv-transition);
    white-space: nowrap;
}

.iv-btn svg { width: 1rem; height: 1rem; flex: none; }
.iv-btn:disabled { opacity: .55; cursor: not-allowed; }

.iv-btn--primaire {
    color: #fff;
    background: linear-gradient(140deg, var(--iv-rose), #f4497f);
    box-shadow: var(--iv-ombre-rose);
}

.iv-btn--primaire:hover { filter: brightness(1.05); transform: translateY(-1px); }

.iv-btn--fantome {
    color: var(--iv-encre-douce);
    background: var(--iv-verre-fort);
    border-color: var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-s);
}

.iv-btn--fantome:hover { color: var(--iv-encre); background: #fff; transform: translateY(-1px); }

.iv-btn--contour {
    color: var(--iv-rose);
    background: rgba(255, 255, 255, .75);
    border-color: rgba(229, 39, 107, .4);
}

.iv-btn--contour:hover { background: rgba(229, 39, 107, .07); }

.iv-btn--vert   { color: #fff; background: linear-gradient(140deg, #71a833, var(--iv-vert)); box-shadow: 0 10px 22px -12px rgba(129, 188, 59, .8); }
.iv-btn--orange { color: #fff; background: linear-gradient(140deg, #ea6a0c, var(--iv-orange)); box-shadow: 0 10px 22px -12px rgba(249, 115, 22, .8); }
.iv-btn--rouge  { color: #fff; background: linear-gradient(140deg, #cf2020, #ef4444); box-shadow: 0 10px 22px -12px rgba(220, 38, 38, .8); }
.iv-btn--vert:hover, .iv-btn--orange:hover, .iv-btn--rouge:hover { filter: brightness(1.06); transform: translateY(-1px); }

.iv-btn--sm { padding: .45rem .8rem; font-size: .8rem; border-radius: 10px; }

/* Actions en fin de ligne de tableau */
.iv-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
}

.iv-action {
    padding: .32rem .6rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--iv-encre-douce);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--iv-transition);
}

.iv-action:hover { background: rgba(16, 24, 40, .06); color: var(--iv-encre); }
.iv-action--modifier:hover { background: rgba(229, 39, 107, .1); color: var(--iv-rose); }
.iv-action--publier { color: #4d7a17; }
.iv-action--publier:hover { background: rgba(129, 188, 59, .14); color: #3f6612; }
.iv-action--supprimer { color: #b91c1c; }
.iv-action--supprimer:hover { background: rgba(220, 38, 38, .1); color: #991b1b; }

/* Flèches de réordonnancement : la première ligne ne peut pas monter, la
   dernière ne peut pas descendre. Le bouton reste en place, éteint. */
.iv-action:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* Barre d'actions groupées */
.iv-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-bottom: 1rem;
    padding: .85rem 1.15rem;
    border-radius: var(--iv-r-l);
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-m);
}

.iv-barre-outils {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.iv-barre-outils__groupe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
}

/* ==========================================================================
   12. Formulaires
   ========================================================================== */

.iv-label {
    display: block;
    margin-bottom: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--iv-encre-douce);
}

.iv-input {
    display: block;
    width: 100%;
    padding: .68rem .9rem;
    font: inherit;
    font-size: .9rem;
    color: var(--iv-encre);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--iv-bord);
    border-radius: var(--iv-r-m);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    transition: border-color var(--iv-transition), box-shadow var(--iv-transition), background-color var(--iv-transition);
}

.iv-input::placeholder { color: var(--iv-encre-faible); }

.iv-input:focus {
    outline: none;
    background: #fff;
    border-color: rgba(229, 39, 107, .5);
    box-shadow: 0 0 0 4px rgba(229, 39, 107, .12);
}

select.iv-input {
    appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355556b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    background-size: 1.05rem;
}

textarea.iv-input { min-height: 7rem; resize: vertical; }

.iv-admin input[type="checkbox"],
.iv-admin input[type="radio"] {
    accent-color: var(--iv-rose);
    width: 1rem;
    height: 1rem;
}

.iv-fieldset {
    border: 1px solid var(--iv-bord);
    border-radius: var(--iv-r-l);
    padding: 1.25rem;
    background: rgba(255, 255, 255, .45);
}

/* ==========================================================================
   13. Messages flash
   ========================================================================== */

.iv-flash {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .95rem 1.15rem;
    margin-bottom: .75rem;
    border-radius: var(--iv-r-l);
    font-size: .89rem;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: var(--iv-ombre-s);
    animation: iv-apparition 260ms cubic-bezier(.4, 0, .2, 1);
}

.iv-flash svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .07rem; }

.iv-flash--success {
    color: #3f6612;
    background: linear-gradient(180deg, rgba(129, 188, 59, .16), rgba(255, 255, 255, .7));
    border-color: rgba(129, 188, 59, .32);
}

.iv-flash--error {
    color: #b91c1c;
    background: linear-gradient(180deg, rgba(220, 38, 38, .1), rgba(255, 255, 255, .7));
    border-color: rgba(220, 38, 38, .25);
}

@keyframes iv-apparition {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   14. Page de connexion
   ========================================================================== */

.iv-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2.5rem 1.25rem;
    position: relative;
    z-index: 1;
}

.iv-login__carte {
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem 2.25rem;
    border-radius: var(--iv-r-xl);
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-l);
}

.iv-login__logo { display: block; height: 3rem; margin: 0 auto 1.75rem; width: auto; object-fit: contain; }

.iv-login__titre {
    margin: 0 0 .4rem;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.025em;
}

.iv-login__sous {
    margin: 0 0 1.75rem;
    text-align: center;
    font-size: .88rem;
    color: var(--iv-encre-douce);
}

.iv-login__champs { display: grid; gap: .85rem; margin-bottom: 1.25rem; }
.iv-login__erreur {
    margin-bottom: 1rem;
    padding: .7rem .9rem;
    border-radius: var(--iv-r-m);
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    color: #b91c1c;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .22);
}

.iv-login__retour {
    display: block;
    margin-top: 1.5rem;
    text-align: center;
    font-size: .84rem;
    color: var(--iv-encre-faible);
    text-decoration: none;
}

.iv-login__retour:hover { color: var(--iv-rose); }

/* ==========================================================================
   15. Divers
   ========================================================================== */

.iv-admin :focus-visible {
    outline: 2px solid var(--iv-rose);
    outline-offset: 2px;
}

.iv-admin code {
    padding: .1rem .35rem;
    border-radius: 6px;
    font-size: .82em;
    background: rgba(16, 24, 40, .06);
}

.iv-muted { color: var(--iv-encre-faible); }

/* ==========================================================================
   16. Reprise des utilitaires Tailwind restants
   --------------------------------------------------------------------------
   Les formulaires des modules gardent leur balisage Tailwind d'origine. Ces
   règles, plus spécifiques que les utilitaires, leur donnent la même matière
   que le reste de l'administration sans avoir à toucher à chaque champ.
   ========================================================================== */

.iv-admin .bg-white.rounded-2xl,
.iv-admin .bg-white.rounded-xl {
    background: var(--iv-verre);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border-color: var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-m);
    border-radius: var(--iv-r-xl);
}

.iv-admin .bg-gray-50 { background-color: rgba(255, 255, 255, .5); }
.iv-admin .border-gray-100,
.iv-admin .border-gray-200 { border-color: var(--iv-bord); }
.iv-admin .text-dark { color: var(--iv-encre); }
.iv-admin .text-gray-500 { color: var(--iv-encre-douce); }
.iv-admin .text-gray-400 { color: var(--iv-encre-faible); }
.iv-admin .shadow-sm { box-shadow: var(--iv-ombre-s); }
.iv-admin .shadow-lg { box-shadow: var(--iv-ombre-l); }

/* Boutons Tailwind du corps des formulaires (enregistrer, brouillon…) */
.iv-admin .bg-rose:not(.iv-badge) {
    background: linear-gradient(140deg, var(--iv-rose), #f4497f);
    box-shadow: var(--iv-ombre-rose);
}

.iv-admin .rounded-full.bg-gray-100 { background: rgba(16, 24, 40, .05); }

/* Vignette d'image et zones d'aperçu */
.iv-admin img.rounded-xl,
.iv-admin img.rounded-lg { box-shadow: var(--iv-ombre-s); }

/* ==========================================================================
   17. Icônes
   --------------------------------------------------------------------------
   icon() sort des SVG en `w-5 h-5` ; on impose la taille utile au contexte.
   ========================================================================== */

.iv-search__icone svg { width: 100%; height: 100%; }
.iv-side__mail svg    { width: .9rem; height: .9rem; flex: none; }
.iv-action svg        { width: .9rem; height: .9rem; }
.iv-badge svg         { width: .8rem; height: .8rem; }
.iv-flash svg         { width: 1.15rem; height: 1.15rem; }
.iv-btn svg           { width: 1rem; height: 1rem; }
.iv-side__item svg    { width: 1.05rem; height: 1.05rem; }
.iv-side__lien svg    { width: 1rem; height: 1rem; }

.iv-flashes { margin-bottom: 1.5rem; }

@media (max-width: 640px) {
    .iv-page-head__titre { font-size: 1.5rem; }
}

/* ==========================================================================
   18. Blocs et mises en colonnes
   ========================================================================== */

.iv-bloc { margin-bottom: 2.5rem; }

.iv-bloc__titre {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .3rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.iv-bloc__titre svg { width: 1.05rem; height: 1.05rem; color: var(--iv-rose); }

.iv-bloc__sous {
    margin: 0 0 1.25rem;
    max-width: 46rem;
    font-size: .88rem;
    color: var(--iv-encre-douce);
}

.iv-colonnes {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .iv-colonnes { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}

.iv-colonnes__principale,
.iv-colonnes__cote {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.iv-form { display: grid; gap: 1.1rem; max-width: 26rem; }

.iv-liste-def { margin: 0; display: grid; gap: .7rem; font-size: .88rem; }
.iv-liste-def > div { display: flex; justify-content: space-between; gap: 1rem; }
.iv-liste-def dt { color: var(--iv-encre-douce); }
.iv-liste-def dd { margin: 0; font-weight: 700; color: var(--iv-encre); }

.iv-liste-puces { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; font-size: .85rem; }
.iv-liste-puces li { display: flex; align-items: center; gap: .5rem; color: var(--iv-encre-douce); }
.iv-liste-puces svg { width: .95rem; height: .95rem; color: var(--iv-rose); flex: none; }

/* Le balisage garde l'utilitaire `hidden` de Tailwind pour ce que le script
   montre et cache (colonne de sélection, barre d'actions groupées, champs de
   fichier). Nos composants déclarant leur propre `display`, il faut trancher. */
.iv-admin .hidden { display: none !important; }

.iv-search__input::-webkit-search-cancel-button,
.iv-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* La recherche transversale liste tout le site : on la borne en hauteur pour
   que les réglages du compte restent atteignables juste en dessous. */
#liste-globale .iv-table-wrap { max-height: 28rem; overflow: auto; }

@media (max-width: 640px) {
    /* Deux vignettes par ligne plutôt qu'une pile interminable. */
    .iv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .iv-stat { padding: .9rem 1rem; }
    .iv-stat__valeur { font-size: 1.5rem; }
    .iv-card--pad { padding: 1.35rem; }
    .iv-search__input { padding-right: 3rem; }
}

/* ==========================================================================
   19. Fenêtres modales
   ========================================================================== */

.iv-modale {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(16, 24, 40, .45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: iv-fondu 160ms ease-out;
}

.iv-modale__boite {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: min(84vh, 52rem);
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border-radius: var(--iv-r-xl);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-l);
    animation: iv-monte 200ms cubic-bezier(.4, 0, .2, 1);
}

.iv-modale__boite--large { max-width: 46rem; }

.iv-modale__fermer {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: var(--iv-encre-douce);
    background: rgba(16, 24, 40, .06);
    transition: all var(--iv-transition);
}

.iv-modale__fermer svg { width: .95rem; height: .95rem; }
.iv-modale__fermer:hover { background: rgba(229, 39, 107, .12); color: var(--iv-rose); }

.iv-modale__titre {
    margin: 0 2.5rem .4rem 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.iv-modale__sous {
    margin: 0 0 1.1rem;
    font-size: .87rem;
    line-height: 1.55;
    color: var(--iv-encre-douce);
}

.iv-modale__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.1rem;
}

.iv-modale__retour {
    margin-right: auto;
    font-size: .83rem;
    font-weight: 600;
    color: #4d7a17;
    opacity: 0;
    transition: opacity var(--iv-transition);
}

.iv-modale__retour.est-visible { opacity: 1; }
.iv-modale__retour.est-erreur { color: #b91c1c; }

@keyframes iv-fondu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes iv-monte {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Le prompt lui-même : lisible, sélectionnable, jamais coupé en largeur. */
.iv-prompt {
    flex: 1;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 1.1rem 1.25rem;
    border-radius: var(--iv-r-l);
    background: rgba(16, 24, 40, .035);
    border: 1px solid var(--iv-bord);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.65;
    color: var(--iv-encre);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
}

/* Le pied de la zone de contenu de l'éditeur d'article. */
.iv-astuce {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .7rem;
}

.iv-astuce__texte {
    margin: 0;
    font-size: .78rem;
    color: var(--iv-encre-douce);
}

/* ==========================================================================
   20. Tableau de bord statistiques
   ========================================================================== */

/* La variation sous chaque chiffre. Le vert et le rouge portent le sens, mais
   le signe le porte aussi : la couleur seule ne suffirait pas à qui ne la
   distingue pas. */
.iv-stat__delta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    margin: .35rem 0 0;
    font-size: .82rem;
    font-weight: 700;
}

.iv-stat__delta--hausse { color: #3f7d1c; }
.iv-stat__delta--baisse { color: var(--iv-rose-sombre); }
.iv-stat__delta--neutre { color: var(--iv-encre-faible); }

.iv-stat__note {
    font-size: .72rem;
    font-weight: 500;
    color: var(--iv-encre-faible);
}

/* Deux cartes côte à côte : un classement se lit en regard d'un autre. Sous
   1024 px elles s'empilent, la largeur ne permettant plus la comparaison. */
.iv-duo {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .iv-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Chiffres alignés à droite : c'est ce qui rend une colonne comparable d'une
   ligne à l'autre. */
.iv-table .iv-nombre {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Courbe des sessions. La hauteur est fixe et le tracé s'étire : à trente
   points, l'allure compte plus que la lecture au pixel. */
.iv-spark {
    display: block;
    width: 100%;
    height: 11rem;
    overflow: visible;
}

.iv-spark__legende {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .5rem 0 0;
    font-size: .74rem;
    color: var(--iv-encre-faible);
}

.iv-spark__legende span:nth-child(2) { font-weight: 700; }

@media (max-width: 640px) {
    .iv-spark { height: 8rem; }
    .iv-spark__legende span:nth-child(2) { display: none; }
}

/* Les tableaux du tableau de bord n'ont que deux ou trois colonnes et vivent
   dans des cartes à moitié de largeur : la largeur plancher de 46rem prévue
   pour les listes de gestion y pousserait les chiffres hors du cadre. */
.iv-table--compacte {
    min-width: 0;
}

.iv-table--compacte thead th { padding: .6rem .9rem; }
.iv-table--compacte tbody td { padding: .6rem .9rem; }

.iv-table--compacte tbody td:first-child {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    /* Sur téléphone, trois colonnes ne tiennent que si le libellé cède : la
       requête est tronquée plutôt que de pousser les chiffres hors du cadre. */
    .iv-table--compacte tbody td:first-child { max-width: 9rem; }
    .iv-table--compacte thead th,
    .iv-table--compacte tbody td { padding: .55rem .7rem; }
}

/* ==========================================================================
   21. Tableau de bord : synthèse, graphes et barres
   ==========================================================================
   Le lecteur n'est pas analyste. Rien n'est donc affiché seul : chaque chiffre
   a soit une phrase, soit une barre qui le met en regard des autres, soit une
   courbe où la période précédente est tracée en pointillés. Tout est en CSS et
   en SVG écrits à la main, sans bibliothèque de graphiques : le poids de la
   page d'administration ne bouge pas.
   ========================================================================== */

/* --- Synthèse : quatre chiffres expliqués en français ------------------- */

.iv-resume {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.iv-resume__carte {
    position: relative;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: var(--iv-r-l);
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-m);
    overflow: hidden;
}

/* Un filet coloré en haut de carte : il donne le verdict avant la lecture. */
.iv-resume__carte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--iv-encre-faible);
}

.iv-resume__carte--hausse::before { background: var(--iv-vert); }
.iv-resume__carte--baisse::before { background: var(--iv-rose); }
.iv-resume__carte--neutre::before { background: var(--iv-encre-faible); }

.iv-resume__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: .55rem;
    border-radius: 50%;
    background: rgba(229, 39, 107, .1);
    color: var(--iv-rose);
}

.iv-resume__carte--hausse .iv-resume__icone { background: rgba(129, 188, 59, .16); color: #4c7a16; }
.iv-resume__carte--baisse .iv-resume__icone { background: rgba(229, 39, 107, .12); color: var(--iv-rose-sombre); }

.iv-resume__icone svg { width: 1.05rem; height: 1.05rem; }

.iv-resume__chiffre {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--iv-encre);
}

.iv-resume__titre {
    margin: .3rem 0 .6rem;
    font-size: .92rem;
    font-weight: 700;
    color: var(--iv-encre);
}

.iv-resume__phrase {
    margin: 0;
    font-size: .83rem;
    line-height: 1.5;
    color: var(--iv-encre-douce);
}

/* --- Ce qu'il faut retenir ---------------------------------------------- */

.iv-retenir { margin-bottom: 2.5rem; }

.iv-retenir__liste {
    margin: .35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .7rem;
}

.iv-retenir__liste li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--iv-encre-douce);
}

.iv-retenir__liste svg {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: .2rem;
    color: var(--iv-vert);
}

/* --- Phrase d'aide sous un titre de carte ------------------------------- */

.iv-card__aide {
    margin: -.35rem 0 1.1rem;
    max-width: 38rem;
    font-size: .81rem;
    line-height: 1.5;
    color: var(--iv-encre-faible);
}

.iv-card__titre--suite { margin-top: 2rem; }
.iv-card__titre--bon svg { color: var(--iv-vert); }
.iv-card__titre--alerte svg { color: var(--iv-rose); }

/* --- Courbes ------------------------------------------------------------ */

.iv-graphe {
    position: relative;
    padding-right: 3.2rem; /* la place de l'échelle chiffrée */
}

.iv-graphe__svg {
    display: block;
    width: 100%;
    height: 11rem;
    overflow: visible;
}

.iv-graphe__grille {
    stroke: var(--iv-bord);
    stroke-width: 1;
    stroke-dasharray: 3 5;
}

/* La période précédente : présente mais discrète, elle sert de référence et
   ne doit jamais se lire avant la courbe du moment. */
.iv-graphe__avant {
    fill: none;
    stroke: var(--iv-encre-faible);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: .55;
}

/* Alignée sur la boîte du tracé, qui n'a aucune marge interne : les trois
   valeurs tombent donc exactement sur les trois repères. */
.iv-graphe__echelle {
    position: absolute;
    top: 0;
    right: 0;
    height: 11rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--iv-encre-faible);
}

.iv-graphe__echelle span { transform: translateY(-.5em); }
.iv-graphe__echelle span:last-child { transform: translateY(.1em); }

.iv-graphe__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .7rem 0 0;
    font-size: .74rem;
    color: var(--iv-encre-faible);
}

.iv-graphe__legende { display: flex; flex-wrap: wrap; gap: .9rem; }

.iv-graphe__cle { display: inline-flex; align-items: center; gap: .35rem; }

.iv-graphe__cle i {
    width: .85rem;
    height: .2rem;
    border-radius: 2px;
    background: var(--iv-rose);
}

.iv-graphe__cle--avant i {
    background: repeating-linear-gradient(to right,
        var(--iv-encre-faible) 0 3px, transparent 3px 6px);
}

/* --- Classements en barres ---------------------------------------------- */

.iv-barres {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .1rem;
}

.iv-barres__ligne {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) minmax(3rem, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: .42rem 0;
    border-bottom: 1px solid var(--iv-bord);
}

.iv-barres__ligne:last-child { border-bottom: 0; }

.iv-barres__libelle {
    font-size: .85rem;
    color: var(--iv-encre);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iv-barres__piste {
    height: .55rem;
    border-radius: 999px;
    background: rgba(16, 24, 40, .05);
    overflow: hidden;
}

.iv-barres__jauge {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: var(--iv-rose);
}

.iv-barres__valeur {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--iv-encre);
}

.iv-barres__unite,
.iv-barres__suffixe {
    font-size: .72rem;
    font-weight: 500;
    color: var(--iv-encre-faible);
}

/* --- Jauge de position -------------------------------------------------- */

/* La bulle du curseur se pose au-dessus de la piste : il lui faut sa place. */
.iv-jauge { padding-top: 1.9rem; }

.iv-jauge__piste {
    position: relative;
    height: 1.15rem;
}

.iv-jauge__zones {
    display: flex;
    height: 100%;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(16, 24, 40, .05);
}

.iv-jauge__zone { display: block; height: 100%; }
.iv-jauge__zone--top { background: rgba(129, 188, 59, .75); }
.iv-jauge__zone--page1 { background: rgba(129, 188, 59, .34); }
.iv-jauge__zone--page2 { background: rgba(249, 115, 22, .28); }

.iv-jauge__curseur {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 1.9rem;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--iv-encre);
    transform: translateY(-50%);
}

.iv-jauge__bulle {
    position: absolute;
    bottom: calc(100% + .3rem);
    left: 50%;
    transform: translateX(-50%);
    padding: .12rem .45rem;
    border-radius: 999px;
    background: var(--iv-encre);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.iv-jauge__reperes {
    display: flex;
    justify-content: space-between;
    margin-top: .45rem;
    font-size: .7rem;
    color: var(--iv-encre-faible);
}

.iv-jauge__phrase {
    margin: 1rem 0 0;
    font-size: .85rem;
    line-height: 1.55;
    color: var(--iv-encre-douce);
}

.iv-jauge__phrase strong { color: var(--iv-encre); }

/* --- Anneau de répartition ---------------------------------------------- */

.iv-anneau {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.iv-anneau__svg { width: 8.5rem; height: 8.5rem; flex: none; }
.iv-anneau__fond { fill: none; stroke: rgba(16, 24, 40, .06); stroke-width: 16; }

.iv-anneau__legende {
    flex: 1 1 11rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .6rem;
}

.iv-anneau__legende li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .55rem;
    font-size: .85rem;
}

.iv-anneau__legende i {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
}

.iv-anneau__nom { color: var(--iv-encre); }

.iv-anneau__part {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- Détail chiffré replié ---------------------------------------------- */

.iv-detail { margin-top: 1.1rem; }

.iv-detail > summary {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 700;
    color: var(--iv-encre-douce);
    list-style: none;
}

.iv-detail > summary::-webkit-details-marker { display: none; }
.iv-detail > summary:hover { color: var(--iv-rose); }
.iv-detail > summary svg { width: .9rem; height: .9rem; }
.iv-detail__corps { margin-top: .8rem; }

@media (max-width: 640px) {
    .iv-resume__chiffre { font-size: 2rem; }
    .iv-graphe { padding-right: 2.6rem; }
    .iv-graphe__svg,
    .iv-graphe__echelle { height: 8.5rem; }
    .iv-barres__ligne { grid-template-columns: minmax(4.5rem, 8rem) minmax(2rem, 1fr) auto; gap: .55rem; }
    /* Le complément chiffré mangeait toute la largeur, ne laissant à la barre
       qu'un moignon : sur téléphone, la barre passe avant le détail. */
    .iv-barres__suffixe { display: none; }
    .iv-graphe__legende { display: none; }
    .iv-anneau { gap: 1rem; }
    .iv-anneau__svg { width: 7rem; height: 7rem; }
}

/* Les titres de carte qui portent une icône. icon() sort un SVG en display
   block : sans passer le titre en flex, l'icône tomberait sur sa propre ligne. */
.iv-retenir .iv-card__titre,
.iv-card__titre--bon,
.iv-card__titre--alerte {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.iv-retenir .iv-card__titre svg,
.iv-card__titre--bon svg,
.iv-card__titre--alerte svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
}

/* ==========================================================================
   22. Tableau de bord : rythme vertical, période libre, survol des courbes
   ========================================================================== */

/* Une seule grille pour tout l'écran. Les cartes n'ont pas de marge propre
   dans le reste de l'administration, où elles vivent dans des grilles à gouttière ;
   ici elles s'enchaînent directement, il fallait donc un rythme unique plutôt
   qu'une marge ajoutée à chaque bloc, qui finissait par se contredire. */
.iv-tdb {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

/* Les blocs qui portaient leur propre marge la rendent à la grille. */
.iv-tdb > .iv-resume,
.iv-tdb > .iv-retenir,
.iv-tdb > .iv-stats,
.iv-tdb > .iv-duo,
.iv-tdb > .iv-bloc { margin-bottom: 0; }

/* Un titre de chapitre respire davantage au-dessus qu'en dessous : il doit
   rester visuellement attaché au contenu qu'il annonce. */
.iv-tdb > .iv-bloc { margin-top: 1.25rem; }
.iv-tdb > .iv-bloc:first-child { margin-top: 0; }
.iv-tdb .iv-bloc__sous { margin-bottom: 0; }

/* --- Période personnalisée ---------------------------------------------- */

.iv-perso { position: relative; }

.iv-perso > summary {
    cursor: pointer;
    list-style: none;
}

.iv-perso > summary::-webkit-details-marker { display: none; }

.iv-perso__panneau {
    position: absolute;
    z-index: 30;
    top: calc(100% + .5rem);
    left: 0;
    width: min(22rem, calc(100vw - 3rem));
    padding: 1.1rem 1.2rem 1.2rem;
    border-radius: var(--iv-r-l);
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    -webkit-backdrop-filter: var(--iv-flou);
    border: 1px solid var(--iv-bord-clair);
    box-shadow: var(--iv-ombre-l);
}

.iv-perso__champs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.iv-perso__champ { display: grid; gap: .3rem; }

.iv-perso__aide {
    margin: .75rem 0 1rem;
    font-size: .76rem;
    line-height: 1.45;
    color: var(--iv-encre-faible);
}

/* --- Survol des courbes ------------------------------------------------- */

.iv-graphe__maille { color: var(--iv-encre-faible); }

/* Les trois éléments du survol sont posés en CSS par-dessus le tracé : le SVG
   est étiré par `preserveAspectRatio: none`, un cercle dessiné dedans serait
   donc déformé en ovale. */
.iv-graphe__viseur,
.iv-graphe__point,
.iv-graphe__info {
    position: absolute;
    pointer-events: none;
}

.iv-graphe__viseur {
    top: 0;
    width: 1px;
    height: 11rem;
    background: var(--iv-encre-faible);
    opacity: .45;
}

.iv-graphe__point {
    width: .6rem;
    height: .6rem;
    margin: -.3rem 0 0 -.3rem;
    border-radius: 50%;
    background: var(--iv-rose);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

.iv-graphe__info {
    top: 0;
    z-index: 5;
    min-width: 8rem;
    padding: .5rem .65rem;
    border-radius: var(--iv-r-s);
    background: var(--iv-encre);
    color: #fff;
    font-size: .76rem;
    line-height: 1.4;
    box-shadow: var(--iv-ombre-m);
    transform: translateX(-50%);
    white-space: nowrap;
}

.iv-graphe__info b {
    display: block;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.iv-graphe__info em {
    display: block;
    margin-top: .15rem;
    font-style: normal;
    opacity: .65;
}

/* Le curseur en croix dit que la courbe se lit point par point. */
.iv-graphe[data-graphe] { cursor: crosshair; }

@media (max-width: 640px) {
    .iv-tdb { gap: 1.1rem; }
    .iv-tdb > .iv-bloc { margin-top: .9rem; }
    .iv-graphe__viseur { height: 8.5rem; }
    .iv-perso__panneau { left: auto; right: 0; }
}

/* ==========================================================================
   23. Aide et santé du site
   ==========================================================================
   L'écran s'adresse à quelqu'un qui n'ouvrira pas la documentation. Tout y est
   donc dimensionné pour se lire de loin : un verdict en pleine largeur, trois
   anneaux chiffrés, puis des lignes repliables. Rien de tout cela n'existe
   ailleurs dans l'administration, d'où une section à part plutôt que des
   variantes greffées sur les composants existants.
   ========================================================================== */

/* --- Le verdict, en haut, pleine largeur -------------------------------- */

.iv-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: var(--iv-r-xl);
    border: 1px solid var(--iv-bord);
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    box-shadow: var(--iv-ombre-m);
}

.iv-verdict__icone {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: 50%;
}

.iv-verdict__icone svg { width: 1.6rem; height: 1.6rem; }

.iv-verdict__texte { flex: 1 1 18rem; }

.iv-verdict__titre {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--iv-encre);
}

.iv-verdict__phrase {
    margin: .3rem 0 0;
    font-size: .92rem;
    color: var(--iv-encre-douce);
}

.iv-verdict__date {
    margin: .55rem 0 0;
    font-size: .76rem;
    color: var(--iv-encre-faible);
}

.iv-verdict__date a { color: var(--iv-rose); font-weight: 700; }

.iv-verdict__action { flex: none; margin: 0; }

/* Le fond reprend la couleur du verdict, très dilué : l'état du site se lit
   avant même la phrase, ce qui est exactement le but. */
.iv-verdict--bon       { border-color: rgba(47, 158, 68, .28); background: linear-gradient(120deg, rgba(47, 158, 68, .10), var(--iv-verre-fort) 55%); }
.iv-verdict--attention { border-color: rgba(249, 115, 22, .3);  background: linear-gradient(120deg, rgba(249, 115, 22, .12), var(--iv-verre-fort) 55%); }
.iv-verdict--alerte    { border-color: rgba(220, 38, 38, .3);   background: linear-gradient(120deg, rgba(220, 38, 38, .12), var(--iv-verre-fort) 55%); }

.iv-verdict--bon .iv-verdict__icone       { background: rgba(47, 158, 68, .14);  color: #2f9e44; }
.iv-verdict--attention .iv-verdict__icone { background: rgba(249, 115, 22, .16); color: #c2410c; }
.iv-verdict--alerte .iv-verdict__icone    { background: rgba(220, 38, 38, .14);  color: #b91c1c; }

/* --- Les trois notes ---------------------------------------------------- */

.iv-notes {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.iv-note {
    padding: 1.5rem 1.25rem;
    text-align: center;
    border-radius: var(--iv-r-xl);
    border: 1px solid var(--iv-bord);
    background: var(--iv-verre-fort);
    backdrop-filter: var(--iv-flou);
    box-shadow: var(--iv-ombre-s);
}

.iv-note__svg { width: 7.5rem; height: 7.5rem; }
.iv-note__fond { fill: none; stroke: rgba(16, 24, 40, .07); stroke-width: 12; }

.iv-note__chiffre {
    font-size: 2.4rem;
    font-weight: 800;
    fill: var(--iv-encre);
    font-variant-numeric: tabular-nums;
}

.iv-note__titre {
    margin: .7rem 0 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--iv-encre);
}

.iv-note__phrase {
    margin: .3rem 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--iv-encre-douce);
}

/* --- La liste des problèmes --------------------------------------------- */

.iv-sous-titre {
    margin: 1.4rem 0 .6rem;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--iv-encre-faible);
}

.iv-problemes { display: grid; gap: .6rem; }

.iv-probleme {
    border-radius: var(--iv-r-m);
    border: 1px solid var(--iv-bord);
    background: #fff;
    overflow: hidden;
}

.iv-probleme__tete {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;
    font-size: .9rem;
}

.iv-probleme__tete::-webkit-details-marker { display: none; }
.iv-probleme__tete:hover { background: rgba(16, 24, 40, .025); }

.iv-probleme__icone { display: grid; place-items: center; flex: none; }
.iv-probleme__icone svg { width: 1.1rem; height: 1.1rem; }

.iv-probleme__titre { flex: 1; font-weight: 700; color: var(--iv-encre); }

/* Le trait de gauche porte la gravité : on trie visuellement la liste sans
   avoir à lire les étiquettes. */
.iv-probleme--bloquant  { border-left: 4px solid #dc2626; }
.iv-probleme--important { border-left: 4px solid var(--iv-orange); }
.iv-probleme--conseil   { border-left: 4px solid rgba(16, 24, 40, .18); }

.iv-probleme--bloquant .iv-probleme__icone  { color: #b91c1c; }
.iv-probleme--important .iv-probleme__icone { color: #c2410c; }
.iv-probleme--conseil .iv-probleme__icone   { color: var(--iv-encre-faible); }

.iv-probleme__corps {
    padding: 0 1rem 1.1rem 2.8rem;
    font-size: .87rem;
    line-height: 1.65;
    color: var(--iv-encre-douce);
}

.iv-probleme__corps p { margin: 0 0 .55rem; }
.iv-probleme__corps strong { color: var(--iv-encre); }

.iv-probleme__pages { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }

.iv-probleme__corps code {
    padding: .12rem .4rem;
    border-radius: 6px;
    background: rgba(16, 24, 40, .05);
    font-size: .78rem;
    word-break: break-all;
}

/* --- La liste d'état ---------------------------------------------------- */

.iv-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.iv-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .85rem;
    border-radius: var(--iv-r-s);
    background: rgba(16, 24, 40, .025);
    font-size: .85rem;
}

.iv-check__icone { flex: none; margin-top: .1rem; }
.iv-check__icone svg { width: 1.05rem; height: 1.05rem; }

.iv-check--bon .iv-check__icone     { color: #2f9e44; }
.iv-check--mauvais .iv-check__icone { color: #b91c1c; }
.iv-check--inconnu .iv-check__icone { color: var(--iv-encre-faible); }

.iv-check--mauvais { background: rgba(220, 38, 38, .06); }

.iv-check__libelle { display: block; font-weight: 700; color: var(--iv-encre); }
.iv-check__detail  { display: block; margin-top: .1rem; color: var(--iv-encre-douce); }

/* --- Pastilles de note dans les tableaux -------------------------------- */

.iv-pastille {
    display: inline-grid;
    place-items: center;
    min-width: 2.1rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.iv-pastille--bon       { background: rgba(47, 158, 68, .14);  color: #2f9e44; }
.iv-pastille--attention { background: rgba(249, 115, 22, .16); color: #c2410c; }
.iv-pastille--alerte    { background: rgba(220, 38, 38, .12);  color: #b91c1c; }
.iv-pastille--neutre    { background: rgba(16, 24, 40, .06);   color: var(--iv-encre-faible); }

/* --- Progression de l'analyse ------------------------------------------- */

.iv-progres { margin: 1.2rem 0; }

.iv-progres__piste {
    height: .6rem;
    border-radius: 999px;
    background: rgba(16, 24, 40, .07);
    overflow: hidden;
}

.iv-progres__jauge {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--iv-rose-sombre), var(--iv-rose));
    transition: width var(--iv-transition);
}

.iv-progres__texte {
    margin: .5rem 0 0;
    font-size: .8rem;
    color: var(--iv-encre-douce);
    font-variant-numeric: tabular-nums;
}

/* --- Le formulaire de contact, en pied d'écran -------------------------- */

.iv-support { border-color: rgba(229, 39, 107, .22); }
.iv-support .iv-form { margin-top: 1.1rem; }
.iv-support input[type="file"] { padding: .55rem .7rem; }

@media (max-width: 640px) {
    .iv-verdict { padding: 1.15rem 1.15rem; }
    .iv-verdict__action { width: 100%; }
    .iv-verdict__action .iv-btn { width: 100%; justify-content: center; }
    .iv-probleme__corps { padding-left: 1rem; }
}

/* Les listes à puces portant une adresse complète (liens cassés, pièces
   jointes) doivent pouvoir passer à la ligne : sans cela, l'étiquette d'état
   sort de la carte. */
.iv-card .iv-liste-puces li { flex-wrap: wrap; align-items: baseline; }

.iv-card .iv-liste-puces code {
    padding: .12rem .4rem;
    border-radius: 6px;
    background: rgba(16, 24, 40, .05);
    font-size: .78rem;
    word-break: break-all;
}

/* --- Le détail d'une note ------------------------------------------------ */
/* Chaque critère sur trois lignes : ce qui est mesuré, combien de points il
   pèse, et une phrase qui dit pourquoi. La barre unique de `.iv-barres` ne
   convenait pas : elle est faite pour un chiffre en suffixe, pas pour une
   explication, qui débordait de sa colonne sur téléphone. */

.iv-criteres {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1rem;
}

.iv-critere__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .35rem;
    font-size: .85rem;
}

.iv-critere__libelle { font-weight: 700; color: var(--iv-encre); }

.iv-critere__valeur {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--iv-encre);
}

.iv-critere__poids { font-weight: 400; font-size: .74rem; color: var(--iv-encre-faible); }

.iv-critere__piste {
    display: block;
    height: .4rem;
    border-radius: 999px;
    background: rgba(16, 24, 40, .07);
    overflow: hidden;
}

.iv-critere__jauge {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--iv-rose-sombre), var(--iv-rose));
}

.iv-critere__detail {
    margin: .35rem 0 0;
    font-size: .78rem;
    line-height: 1.55;
    color: var(--iv-encre-douce);
}