/* ===========================================================================
   DIZOUI — Direction artistique « Nuit néon / Verre dépoli »
   Chargée APRÈS bootstrap.min.css et bootstrap-icons.css.

   Principe directeur, valable partout : le noir n'est pas un fond, c'est une
   chambre noire. Trois halos saturés diffusent derrière les surfaces, et
   UNE SEULE CHOSE RAYONNE PAR ÉCRAN — l'action principale. Tout le reste
   emprunte sa lumière.

   Le back-office reçoit une dose volontairement réduite : on y reste une
   heure, pas quatre secondes. Halos discrets, pas de verre dépoli sur les
   zones de lecture, et la couleur concentrée sur un index de 3 px.
   =========================================================================== */

/* --- Polices, servies en local (aucun appel réseau) ---------------------- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
             src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
             src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
             src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
             src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap;
             src:url('fonts/inter-latin-800-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------------------
   Jetons
   --------------------------------------------------------------------------- */
:root {
    color-scheme: dark;

    /* Fonds, du plus profond au plus élevé */
    --encre:     #07060D;
    --encre-2:   #0C0A16;
    --encre-3:   #12101F;
    --encre-4:   #191527;

    /* Textes — ratios mesurés sur --encre */
    --txt:       #F4F1FF;   /* titres, texte fort         18,1:1 */
    --txt-2:     #ADA6C9;   /* texte courant               8,7:1 */
    --txt-3:     #8E86AD;   /* tertiaire, légendes         5,7:1 */
    --sur-neon:  #100A18;   /* encre POSÉE sur un néon     5,9:1 */

    /* Néons */
    --magenta:   #FF3D9A;   /*  6,1:1 */
    --cyan:      #3DEBFF;   /* 14,0:1 */
    --violet:    #A06BFF;   /*  5,8:1 */

    /* États */
    --succes:    #3DF5A8;   /* 14,2:1 */
    --attente:   #FFC24D;   /* 12,6:1 */
    --danger:    #FF5C7A;   /*  6,8:1 */
    --info:      #3DEBFF;

    /* Verre dépoli. Il n'a d'effet que s'il y a de la couleur DERRIÈRE :
       toute surface qui l'emploie doit être posée au-dessus d'un halo. */
    --verre:      linear-gradient(158deg, rgba(255,255,255,.088),
                                          rgba(255,255,255,.026) 46%,
                                          rgba(255,255,255,.052));
    --verre-bord: rgba(255,255,255,.115);

    --police: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
              Helvetica, Arial, sans-serif;
    /* Pas de serif dans cette direction : plus club, moins faire-part. */
    --police-titre: var(--police);
    --police-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, Menlo, monospace;

    --t-xs:.75rem; --t-sm:.8125rem; --t-base:1rem; --t-md:1.125rem;
    --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem;

    --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px; --e-5:20px;
    --e-6:24px; --e-8:32px; --e-10:40px; --e-12:48px; --e-16:64px;

    --rayon-champ:12px; --rayon-bouton:16px; --rayon-carte:18px; --rayon-pilule:999px;

    /* Les ombres portent une couleur, jamais du noir pur : c'est ce qui
       distingue une lueur d'une ombre. */
    --ombre-1: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px -12px rgba(0,0,0,.9);
    --ombre-2: 0 10px 30px -18px rgba(0,0,0,.95);
    --ombre-3: 0 26px 60px -34px rgba(0,0,0,.95);
    --ombre-focus: 0 0 0 3px rgba(255,61,154,.35);
    --lueur: 0 10px 26px -12px rgba(255,61,154,.85), 0 0 44px -14px rgba(192,91,255,.75);

    --t-rapide:.15s cubic-bezier(.4,0,.2,1);
    --t-normal:.25s cubic-bezier(.4,0,.2,1);
    --t-rebond:.55s cubic-bezier(.34,1.56,.64,1);

    --largeur-menu:268px;
    --cible-tactile:48px;

    /* Grain : il casse le banding des dégradés sombres, très visible sinon
       sur les grands aplats de nuit. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Reprise des variables Bootstrap ------------------------------------- */
/* On repeint Bootstrap par ses propres variables plutôt qu'en surchargeant
   ses sélecteurs : moins de spécificité à combattre, et les composants
   générés en JS héritent automatiquement. Le mode sombre natif de
   Bootstrap 5.3 est activé par data-bs-theme="dark" sur la balise <html>. */
:root, [data-bs-theme="dark"] {
    --bs-primary: #FF3D9A;
    --bs-primary-rgb: 255,61,154;
    --bs-body-color: #ADA6C9;
    --bs-body-color-rgb: 173,166,201;
    --bs-body-bg: #07060D;
    --bs-body-bg-rgb: 7,6,13;
    --bs-emphasis-color: #F4F1FF;
    --bs-secondary-color: rgba(173,166,201,.75);
    --bs-tertiary-color: rgba(173,166,201,.5);
    --bs-tertiary-bg: #12101F;
    --bs-border-color: rgba(255,255,255,.10);
    --bs-border-color-translucent: rgba(255,255,255,.10);
    --bs-body-font-family: var(--police);
    --bs-border-radius: .9rem;
    --bs-border-radius-sm: .65rem;
    --bs-border-radius-lg: 1.15rem;
    --bs-link-color: #3DEBFF;
    --bs-link-color-rgb: 61,235,255;
    --bs-link-hover-color: #8FF3FF;
    --bs-heading-color: #F4F1FF;
    --bs-code-color: #FF7DBB;
    --bs-form-control-bg: #191527;
    --bs-form-control-disabled-bg: #12101F;
    --bs-secondary-bg: #191527;
}

html { background-color: #07060D; }

body {
    position: relative;
    font-family: var(--police);
    color: var(--txt-2);
    -webkit-font-smoothing: antialiased;
    /* Les trois halos, fixés : la lumière vient de la pièce, pas de la page.
       Sans `fixed`, ils défileraient et l'effet de chambre noire tomberait. */
    background-color: var(--encre);
    background-image:
        radial-gradient(1100px 620px at 12% -6%,  rgba(255,61,154,.20), transparent 62%),
        radial-gradient(900px  560px at 92% 4%,   rgba(61,235,255,.15), transparent 60%),
        radial-gradient(1000px 900px at 50% 120%, rgba(160,107,255,.18), transparent 65%);
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--grain);
    opacity: .15;
    mix-blend-mode: overlay;
}
body > * { position: relative; z-index: 1; }

h1, h2, h3 { color: var(--txt); font-weight: 700; letter-spacing: -.02em; }

/* ---------------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------------- */
.btn { font-weight: 650; border-radius: var(--rayon-bouton); }
.btn:focus-visible { box-shadow: var(--ombre-focus); }

/* L'action principale est LA seule chose qui rayonne à l'écran. Encre foncée
   posée sur le néon (5,9:1) plutôt que du blanc (3,3:1) : elle se lit comme
   une enseigne allumée, pas comme un aplat de couleur. */
.btn-primary {
    --bs-btn-color: var(--sur-neon);
    --bs-btn-hover-color: var(--sur-neon);
    --bs-btn-active-color: var(--sur-neon);
    --bs-btn-disabled-color: var(--sur-neon);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    background-image: linear-gradient(97deg,#FF3D9A 0%,#C05BFF 52%,#A06BFF 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--lueur);
    transition: transform var(--t-rapide), filter var(--t-rapide);
}
.btn-primary:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-outline-primary {
    --bs-btn-color: var(--txt);
    --bs-btn-border-color: rgba(255,255,255,.16);
    --bs-btn-bg: rgba(255,255,255,.055);
    --bs-btn-hover-color: var(--txt);
    --bs-btn-hover-bg: rgba(255,255,255,.10);
    --bs-btn-hover-border-color: rgba(61,235,255,.45);
    --bs-btn-active-color: var(--txt);
    --bs-btn-active-bg: rgba(255,255,255,.12);
    --bs-btn-active-border-color: rgba(61,235,255,.55);
}
.btn-outline-secondary {
    --bs-btn-color: var(--txt-2);
    --bs-btn-border-color: rgba(255,255,255,.14);
    --bs-btn-hover-color: var(--txt);
    --bs-btn-hover-bg: rgba(255,255,255,.08);
    --bs-btn-hover-border-color: rgba(255,255,255,.22);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: rgba(255,92,122,.35);
    --bs-btn-bg: rgba(255,92,122,.09);
    --bs-btn-hover-color: var(--sur-neon);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
}
.btn-outline-warning {
    --bs-btn-color: var(--attente);
    --bs-btn-border-color: rgba(255,194,77,.35);
    --bs-btn-bg: rgba(255,194,77,.09);
    --bs-btn-hover-color: var(--sur-neon);
    --bs-btn-hover-bg: var(--attente);
}

/* Accent froid : réservé à l'action « qui fait plaisir » — publier, imprimer,
   éditer la liste. Elle ne coexiste jamais avec un bouton primaire. */
.btn-accent {
    color: var(--sur-neon);
    background-image: linear-gradient(97deg,#3DEBFF 0%,#7DDCFF 45%,#A06BFF 100%);
    border: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45),
                0 10px 26px -12px rgba(61,235,255,.8),
                0 0 44px -16px rgba(160,107,255,.7);
    transition: transform var(--t-rapide), filter var(--t-rapide);
}
.btn-accent:hover, .btn-accent:focus { color: var(--sur-neon); filter: brightness(1.08); transform: translateY(-1px); }
.btn-accent:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   Barre latérale
   --------------------------------------------------------------------------- */
.menu {
    position: relative;
    width: var(--largeur-menu);
    min-height: 100vh;
    background: linear-gradient(180deg, #14091F 0%, #0B0714 55%, #07060D 100%);
    border-right: 1px solid rgba(255,255,255,.07);
    color: var(--txt-2);
    overflow: hidden;
}
/* Trois aurores, à faible opacité : elles donnent la profondeur sans jamais
   gêner la lecture des libellés. */
.menu::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(420px 300px at -10% -6%,  rgba(255,45,142,.30), transparent 66%),
        radial-gradient(380px 320px at 110% 22%,  rgba(123,59,255,.28), transparent 64%),
        radial-gradient(420px 300px at 20% 108%,  rgba(0,200,245,.16), transparent 66%);
}
.menu > * { position: relative; }

.menu__marque {
    display: flex; align-items: center; gap: var(--e-2);
    color: var(--txt); text-decoration: none;
    font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
}
.menu__logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 auto;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--magenta) 0%, var(--violet) 100%);
    color: var(--sur-neon);
    font-family: var(--police);
    font-size: .8125rem; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 8px 24px -10px rgba(255,61,154,.9), inset 0 1px 0 rgba(255,255,255,.45);
}
.menu__section {
    margin: var(--e-5) 0 var(--e-1); padding: 0 var(--e-3);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: .10em;
    text-transform: uppercase; color: var(--txt-3);
}
.menu__lien {
    position: relative;
    display: flex; align-items: center; gap: var(--e-2);
    padding: .58rem .75rem; border-radius: 12px;
    color: var(--txt-2); text-decoration: none; font-size: .9375rem;
    transition: background-color var(--t-rapide), color var(--t-rapide);
}
.menu__lien:hover { background: rgba(255,255,255,.055); color: var(--txt); }
/* L'onglet actif ne se colore pas en aplat : il s'allume par un index de
   3 px. La couleur reste rare, donc elle continue de signifier quelque chose. */
.menu__lien.est-actif { background: rgba(255,255,255,.075); color: var(--txt); font-weight: 650; }
.menu__lien.est-actif::before {
    content: "";
    position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 999px;
    background: linear-gradient(180deg, var(--magenta), var(--violet));
    box-shadow: 0 0 10px 1px rgba(255,61,154,.85);
}
.menu__pied { border-top: 1px solid rgba(255,255,255,.09); padding-top: var(--e-3); font-size: var(--t-sm); }
.menu__compte { color: var(--txt); text-decoration: none; }
.menu__compte:hover { color: #fff; }
.menu__role { color: var(--txt-3); font-size: var(--t-xs); }

/* ---------------------------------------------------------------------------
   En-tête de page
   --------------------------------------------------------------------------- */
.entete {
    position: sticky; top: 0; z-index: 20;
    padding: var(--e-3) var(--e-6);
    background: rgba(12,10,22,.72);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
    backdrop-filter: saturate(150%) blur(18px);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.entete__fil { font-size: var(--t-sm); color: var(--txt-3); margin-bottom: 2px; }
.entete__fil a { color: var(--txt-3); text-decoration: none; }
.entete__fil a:hover { color: var(--cyan); text-decoration: underline; }
.entete__titre { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.025em;
                 margin: 0; line-height: 1.2; color: var(--txt); }

/* ---------------------------------------------------------------------------
   Cartes, tuiles, états vides
   --------------------------------------------------------------------------- */
/* Pas de verre dépoli sur les zones de lecture : on y reste longtemps, et le
   flou fatigue. Surface opaque, liseré fin, et c'est tout. */
.card {
    background: var(--encre-3);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-2);
    overflow: hidden;
}
.card > .card-header:first-child { position: relative; }
.card > .card-header:first-child::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--magenta) 0%, var(--violet) 55%, var(--cyan) 100%);
    opacity: .85;
}
.card-header {
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.075);
    color: var(--txt);
    font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em;
    padding: var(--e-4) var(--e-5);
}
.card-footer { background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.075); }
.card-body { color: var(--txt-2); }

/* Les tuiles ont droit au verre : ce sont des chiffres qu'on lit en deux
   secondes, posés directement sur les halos du fond. */
.tuile {
    position: relative; overflow: hidden; height: 100%;
    padding: var(--e-5);
    border: 1px solid var(--verre-bord);
    border-radius: var(--rayon-carte);
    background: var(--verre);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: blur(26px) saturate(155%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), var(--ombre-3);
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.tuile:hover { transform: translateY(-2px); }
.tuile__label { font-size: var(--t-sm); font-weight: 600; color: var(--txt-2); }
.tuile__valeur {
    font-size: 2.6rem; font-weight: 800; line-height: 1;
    letter-spacing: -.045em; margin-top: var(--e-2); color: var(--txt);
}
.tuile__detail { font-size: var(--t-xs); color: var(--txt-3); margin-top: var(--e-1); }
.tuile__icone {
    position: absolute; right: -10px; bottom: -18px;
    font-size: 5rem; line-height: 1; opacity: .10; color: #fff;
}
/* Chaque état porte sa lueur propre, jamais un aplat saturé. */
.tuile--succes  { border-color: rgba(61,245,168,.28);
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 46px -22px rgba(61,245,168,.9), var(--ombre-3); }
.tuile--succes  .tuile__valeur, .tuile--succes  .tuile__icone { color: var(--succes); }
.tuile--danger  { border-color: rgba(255,92,122,.28);
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 46px -22px rgba(255,92,122,.9), var(--ombre-3); }
.tuile--danger  .tuile__valeur, .tuile--danger  .tuile__icone { color: var(--danger); }
.tuile--attente { border-color: rgba(255,194,77,.28);
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 46px -22px rgba(255,194,77,.85), var(--ombre-3); }
.tuile--attente .tuile__valeur, .tuile--attente .tuile__icone { color: var(--attente); }

.vide { text-align: center; padding: var(--e-12) var(--e-6); color: var(--txt-2); }
.vide__icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 88px; height: 88px; margin-bottom: var(--e-4);
    border-radius: 50%; font-size: 2.4rem; color: var(--txt);
    background: radial-gradient(circle, rgba(255,61,154,.35), rgba(160,107,255,.12) 55%, transparent 72%);
    border: 1px solid rgba(255,255,255,.10);
}
.vide__titre { font-size: var(--t-lg); font-weight: 700; color: var(--txt); margin-bottom: var(--e-2); }
.vide__texte { font-size: .9375rem; max-width: 44ch; margin: 0 auto var(--e-5); color: var(--txt-2); }

/* ---------------------------------------------------------------------------
   Tableaux et formulaires
   --------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--txt-2);
    --bs-table-border-color: rgba(255,255,255,.07);
    --bs-table-hover-bg: rgba(255,255,255,.045);
    --bs-table-hover-color: var(--txt);
    --bs-table-striped-bg: rgba(255,255,255,.02);
    --bs-table-striped-color: var(--txt-2);
}
.table > thead th {
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
    color: var(--txt-3); font-weight: 700; white-space: nowrap;
    background: rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.table > tbody td { vertical-align: middle; border-color: rgba(255,255,255,.06); }
.table a { color: var(--txt); text-decoration: none; }
.table a:hover { color: var(--cyan); }

.form-label { font-weight: 600; font-size: .9375rem; margin-bottom: var(--e-1); color: var(--txt); }
.form-control, .form-select {
    background: var(--encre-4);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--rayon-champ);
    color: var(--txt);
    /* 16 px minimum : en dessous, iOS zoome au focus et la page part hors écran. */
    font-size: var(--t-base);
    padding: .55rem .8rem;
}
.form-control::placeholder { color: var(--txt-3); }
.form-control:focus, .form-select:focus {
    background: var(--encre-4); color: var(--txt);
    border-color: rgba(255,61,154,.55);
    box-shadow: var(--ombre-focus);
}
.form-control:disabled { background: var(--encre-3); color: var(--txt-3); }
.form-text { color: var(--txt-3); font-size: var(--t-sm); }
.form-check-input { background-color: var(--encre-4); border-color: rgba(255,255,255,.22); }
.form-check-input:checked { background-color: var(--magenta); border-color: var(--magenta); }
.form-check-input:focus { box-shadow: var(--ombre-focus); border-color: rgba(255,61,154,.55); }
.input-group-text { background: var(--encre-4); border-color: rgba(255,255,255,.12); color: var(--txt-2); }

/* Badges : une couleur en texte et un liseré, jamais un aplat saturé — un
   tableau de trente lignes deviendrait un sapin de Noël. */
.badge { font-weight: 700; letter-spacing: .01em; padding: .4em .72em; border-radius: var(--rayon-pilule); }
.badge.bg-success   { background: rgba(61,245,168,.12) !important; color: var(--succes) !important; border: 1px solid rgba(61,245,168,.30); }
.badge.bg-danger    { background: rgba(255,92,122,.12) !important; color: var(--danger) !important; border: 1px solid rgba(255,92,122,.30); }
.badge.bg-warning   { background: rgba(255,194,77,.12) !important; color: var(--attente) !important; border: 1px solid rgba(255,194,77,.32); }
.badge.bg-info      { background: rgba(61,235,255,.12) !important; color: var(--cyan) !important; border: 1px solid rgba(61,235,255,.30); }
.badge.bg-primary   { background: rgba(255,61,154,.14) !important; color: var(--magenta) !important; border: 1px solid rgba(255,61,154,.32); }
.badge.bg-secondary { background: rgba(255,255,255,.07) !important; color: var(--txt-2) !important; border: 1px solid rgba(255,255,255,.14); }
.badge.bg-dark      { background: rgba(0,0,0,.45)      !important; color: var(--txt-2) !important; border: 1px solid rgba(255,255,255,.14); }
.badge.bg-light     { background: rgba(255,255,255,.07) !important; color: var(--txt-2) !important; border: 1px solid rgba(255,255,255,.14); }

.pastille {
    display: inline-block; width: .8rem; height: .8rem; border-radius: 50%;
    vertical-align: -1px; margin-right: .3rem;
    box-shadow: 0 0 9px 1px currentColor, inset 0 0 0 1px rgba(255,255,255,.28);
}

.alert { border-radius: var(--rayon-carte); border-width: 1px; }
.alert-success { background: rgba(61,245,168,.10); border-color: rgba(61,245,168,.28); color: var(--succes); }
.alert-danger  { background: rgba(255,92,122,.10); border-color: rgba(255,92,122,.30); color: var(--danger); }
.alert-warning { background: rgba(255,194,77,.10); border-color: rgba(255,194,77,.30); color: var(--attente); }
.alert-info    { background: rgba(61,235,255,.10); border-color: rgba(61,235,255,.28); color: var(--cyan); }

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--txt-2);
    --bs-list-group-border-color: rgba(255,255,255,.07);
    --bs-list-group-action-hover-bg: rgba(255,255,255,.04);
    --bs-list-group-action-hover-color: var(--txt);
    --bs-list-group-active-bg: rgba(255,61,154,.16);
    --bs-list-group-active-border-color: rgba(255,61,154,.32);
    --bs-list-group-active-color: var(--txt);
}
.progress { background: rgba(255,255,255,.07); }
.dropdown-menu {
    --bs-dropdown-bg: var(--encre-3);
    --bs-dropdown-border-color: rgba(255,255,255,.10);
    --bs-dropdown-link-color: var(--txt-2);
    --bs-dropdown-link-hover-bg: rgba(255,255,255,.06);
    --bs-dropdown-link-hover-color: var(--txt);
}

/* Onglets d'un événement */
.onglets { border-bottom: 1px solid rgba(255,255,255,.09); gap: var(--e-1); }
.onglets .nav-link { color: var(--txt-3); border: 0; border-bottom: 2px solid transparent;
                     border-radius: 0; padding: .6rem .9rem; font-weight: 600; }
.onglets .nav-link:hover { color: var(--txt); border-bottom-color: rgba(255,255,255,.2); }
.onglets .nav-link.active {
    color: var(--txt); background: transparent;
    border-bottom-color: var(--magenta);
    box-shadow: 0 2px 12px -4px rgba(255,61,154,.9);
}

code { background: rgba(255,61,154,.10); color: #FF7DBB; padding: .1em .4em;
       border-radius: 6px; font-family: var(--police-mono); font-size: .88em; }
pre  { background: var(--encre-4) !important; border-color: rgba(255,255,255,.09) !important; color: var(--txt-2); }
hr   { border-color: rgba(255,255,255,.10); opacity: 1; }
.text-muted { color: var(--txt-3) !important; }
.bg-light   { background: rgba(255,255,255,.05) !important; }
.border     { border-color: rgba(255,255,255,.10) !important; }
.table-light { --bs-table-bg: rgba(255,255,255,.03); --bs-table-color: var(--txt-2); }

/* ---------------------------------------------------------------------------
   Boutons des fournisseurs d'identité

   Chaque marque impose sa charte. On s'en tient à ce qu'elles ont en commun :
   hauteur confortable, logo officiel à gauche, libellé « Continuer avec X »,
   et surtout aucune déformation du logo. Sur fond de nuit, Google et
   Microsoft gardent leur pastille blanche, imposée par leurs chartes.
   --------------------------------------------------------------------------- */
.fournisseurs { display: flex; flex-direction: column; gap: var(--e-2); }

.bouton-fournisseur {
    display: flex; align-items: center; justify-content: center; gap: var(--e-2);
    width: 100%;
    /* 48 px : la hauteur minimale confortable au pouce, et celle recommandée
       par les chartes de Google comme d'Apple. */
    min-height: 48px;
    padding: .7rem 1rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--rayon-bouton);
    background: rgba(255,255,255,.055);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    color: var(--txt);
    font-size: .9375rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
    transition: background-color var(--t-rapide), border-color var(--t-rapide);
}
.bouton-fournisseur:hover { background: rgba(255,255,255,.10); border-color: rgba(61,235,255,.40); color: var(--txt); }
.bouton-fournisseur:focus-visible { outline: 0; box-shadow: var(--ombre-focus); }
.bouton-fournisseur svg { flex: 0 0 auto; }
/* Les logos Google et Microsoft sont multicolores sur fond clair : on leur
   pose une pastille blanche plutôt que de les dénaturer. */
.bouton-fournisseur--google svg,
.bouton-fournisseur--microsoft svg {
    background: #fff; border-radius: 6px; padding: 3px; box-sizing: content-box;
}
/* Apple impose le noir et le logo blanc. Sur fond de nuit, on inverse : fond
   blanc et logo noir, la seule variante que sa charte autorise ici. */
.bouton-fournisseur--apple { background: #fff; border-color: #fff; color: #000; }
.bouton-fournisseur--apple:hover { background: #f0f0f0; border-color: #f0f0f0; color: #000; }

.separateur {
    display: flex; align-items: center; gap: var(--e-3);
    margin: var(--e-5) 0; color: var(--txt-3); font-size: var(--t-sm);
}
.separateur::before, .separateur::after {
    content: ""; flex: 1 1 0; height: 1px; background: rgba(255,255,255,.12);
}
.fournisseurs-vides {
    padding: var(--e-3) var(--e-4);
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: var(--rayon-champ);
    background: rgba(255,255,255,.03);
    font-size: var(--t-sm); color: var(--txt-3);
}

/* ---------------------------------------------------------------------------
   Page autonome (connexion, inscription)
   --------------------------------------------------------------------------- */
.page-nue {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + var(--e-6)) var(--e-4)
             calc(env(safe-area-inset-bottom, 0px) + var(--e-6));
}
.page-nue__boite { width: 100%; max-width: 430px; }
.page-nue__marque {
    display: flex; align-items: center; justify-content: center; gap: var(--e-2);
    font-size: 1.7rem; font-weight: 800; letter-spacing: -.035em;
    color: var(--txt); margin-bottom: var(--e-2);
}
.page-nue__baseline { text-align: center; color: var(--txt-3); font-size: var(--t-sm); margin-bottom: var(--e-6); }
/* Sur cet écran, la carte a droit au verre : c'est un écran court, posé
   pile sur le halo magenta. */
.page-nue .card {
    background: var(--verre);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: blur(26px) saturate(155%);
    border-color: var(--verre-bord);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), var(--ombre-3);
}
.page-nue__legal {
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2) var(--e-4);
    margin-top: var(--e-6); font-size: var(--t-xs);
}
.page-nue__legal a { color: var(--txt-3); text-decoration: none; }
.page-nue__legal a:hover { color: var(--cyan); text-decoration: underline; }
summary { color: var(--txt-2); }
summary:hover { color: var(--txt); }

/* ---------------------------------------------------------------------------
   Pages légales

   Colonne étroite et interlignage généreux : ces textes sont longs et se
   lisent rarement en entier, mais quand quelqu'un les ouvre, c'est qu'il
   cherche une réponse précise. La lisibilité prime sur tout le reste.
   --------------------------------------------------------------------------- */
.page-legale { background: var(--encre); }
.legale__conteneur { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--e-5); }

.legale__tete {
    position: relative; overflow: hidden;
    padding: var(--e-10) 0 var(--e-12);
    color: var(--txt);
    background:
        radial-gradient(700px 420px at 8% -30%,  rgba(255,45,142,.55), transparent 62%),
        radial-gradient(620px 400px at 92% -10%, rgba(0,200,245,.38), transparent 60%),
        radial-gradient(700px 500px at 50% 130%, rgba(123,59,255,.45), transparent 65%),
        #0B0714;
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.legale__marque {
    display: inline-flex; align-items: center; gap: var(--e-2);
    margin-bottom: var(--e-6); color: var(--txt); text-decoration: none;
    font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em;
}
.legale__titre { margin: 0; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 800;
                 line-height: 1.1; letter-spacing: -.03em; color: var(--txt); }
.legale__sous-titre { margin: var(--e-3) 0 0; font-size: 1.0625rem; color: var(--txt-2); max-width: 52ch; }

.legale__corps { padding-top: var(--e-10); padding-bottom: var(--e-12);
                 font-size: 1.0625rem; line-height: 1.72; color: var(--txt-2); }
.legale__corps section { margin-bottom: var(--e-12); }
.legale__corps h2 {
    font-size: 1.5rem; font-weight: 700; margin: 0 0 var(--e-4);
    padding-bottom: var(--e-2); color: var(--txt);
    border-bottom: 1px solid rgba(255,255,255,.10);
}
.legale__corps h3 { font-size: 1.0625rem; font-weight: 700; margin: var(--e-6) 0 var(--e-2); color: var(--cyan); }
.legale__corps p  { margin: 0 0 var(--e-4); }
.legale__corps ul { margin: 0 0 var(--e-4); padding-left: var(--e-6); }
.legale__corps li { margin-bottom: var(--e-2); }
.legale__corps code { background: rgba(255,61,154,.10); color: #FF7DBB; }

/* Le résumé en tête : la plupart des lecteurs n'iront pas plus loin, il doit
   donc être exact et suffisant à lui seul. */
.legale__resume {
    padding: var(--e-5) var(--e-6);
    border-radius: var(--rayon-carte);
    background: var(--verre);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--verre-bord);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13);
}
.legale__resume h2 { border: 0; margin-bottom: var(--e-3); font-size: 1.25rem; }
.legale__resume ul { margin-bottom: 0; }

/* Encadré d'alerte, pour les données de santé. */
.legale__encadre {
    margin: var(--e-6) 0; padding: var(--e-5) var(--e-6);
    border: 1px solid rgba(255,194,77,.38);
    border-radius: var(--rayon-carte);
    background: rgba(255,194,77,.07);
    box-shadow: 0 0 50px -30px rgba(255,194,77,.9);
}
.legale__encadre h3 { margin-top: 0; color: var(--attente); }

.legale__fiche { display: grid; grid-template-columns: 200px 1fr; gap: var(--e-2) var(--e-4); margin: 0; }
.legale__fiche dt { font-weight: 600; color: var(--txt-3); }
.legale__fiche dd { margin: 0; color: var(--txt); }

.legale__table { width: 100%; border-collapse: collapse; margin: 0 0 var(--e-4); font-size: .9375rem; }
.legale__table th {
    text-align: left; padding: var(--e-2) var(--e-3);
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.12);
    font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--txt-3);
}
.legale__table td { padding: var(--e-3); border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }

.legale__note { font-size: .9375rem; color: var(--txt-3); }
.legale__maj  { font-size: var(--t-sm); color: var(--txt-3); font-style: italic; }

/* ---------------------------------------------------------------------------
   Pied de page public
   --------------------------------------------------------------------------- */
.pied-legal {
    padding: var(--e-8) 0 calc(env(safe-area-inset-bottom, 0px) + var(--e-8));
    background: #050409;
    border-top: 1px solid rgba(255,255,255,.08);
    color: var(--txt-3); font-size: var(--t-sm);
}
.pied-legal__lignes { display: flex; flex-wrap: wrap; gap: var(--e-5);
                      justify-content: space-between; align-items: flex-start; }
.pied-legal__marque { font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--txt); }
.pied-legal__editeur { margin-top: 2px; }
.pied-legal__liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.pied-legal a { color: var(--txt-2); text-decoration: none; }
.pied-legal a:hover { color: var(--cyan); text-decoration: underline; }
.pied-legal a[aria-current="page"] { color: var(--magenta); }
.pied-legal__bas { margin-top: var(--e-6); padding-top: var(--e-4);
                   border-top: 1px solid rgba(255,255,255,.08);
                   font-size: var(--t-xs); color: var(--txt-3); }

/* ===========================================================================
   MOBILE

   L'essentiel des usages se fait au téléphone, y compris côté organisateur :
   on ajoute des invités dans la voiture, on regarde les réponses dans la
   file d'attente. Ce bloc n'est pas un rattrapage, c'est la cible principale.
   =========================================================================== */

@media (max-width: 991.98px) {
    .menu {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
        width: min(84vw, 300px);
        transform: translateX(-100%);
        transition: transform var(--t-normal);
        overflow-y: auto;
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--e-4));
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--e-4));
    }
    .menu.est-ouvert { transform: translateX(0); }
    .menu__lien { padding: .8rem .75rem; font-size: 1rem; }

    .voile {
        position: fixed; inset: 0; z-index: 1040;
        background: rgba(4,3,8,.62);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .entete { padding: calc(env(safe-area-inset-top, 0px) + var(--e-3)) var(--e-4) var(--e-3); }
    .entete__titre { font-size: 1.25rem; }
    main.contenu { padding: var(--e-4) !important; }

    /* Toutes les cibles tactiles atteignent 44 px : c'est le minimum pour un
       pouce, et la plupart des boutons d'action sont des icônes seules. */
    .btn-sm { min-height: 40px; min-width: 40px; }
    .btn    { min-height: 44px; }
    .form-check-input { width: 1.25rem; height: 1.25rem; }
}

@media (min-width: 992px) {
    .menu__bascule, .voile, .barre-mobile { display: none !important; }
}

/* --- Tableaux : cartes empilées plutôt que défilement horizontal ---------- */
/* Un tableau qui défile latéralement sur un téléphone est inutilisable : on
   perd la première colonne, donc le nom de la personne qu'on regarde. Chaque
   ligne devient une carte, et chaque cellule porte son intitulé. */
@media (max-width: 767.98px) {
    .table--cartes { display: block; }
    .table--cartes thead { display: none; }
    .table--cartes tbody, .table--cartes tr, .table--cartes td { display: block; width: 100%; }

    .table--cartes tr {
        display: flex; flex-direction: column;
        margin-bottom: var(--e-3);
        padding: var(--e-3) var(--e-4);
        border: 1px solid rgba(255,255,255,.09);
        border-radius: var(--rayon-carte);
        background: var(--encre-4);
        box-shadow: var(--ombre-1);
    }
    /* Le nom passe en tête de carte quelle que soit sa position dans le
       tableau : sur une carte, on doit lire d'abord DE QUI il s'agit. */
    .table--cartes td[data-principal] { order: -2; }
    .table--cartes td[data-label="Statut"] { order: -1; }
    .table--cartes td[data-actions] { order: 10; }

    .table--cartes td {
        padding: .35rem 0 !important;
        border: 0 !important;
        text-align: left !important;
        /* Les largeurs fixées en ligne pour la mise en page tableau
           provoqueraient un défilement horizontal une fois en carte. */
        max-width: none !important;
        white-space: normal !important;
    }
    .table--cartes .text-truncate { overflow: visible; text-overflow: clip; white-space: normal; }

    .table--cartes td[data-label]::before {
        content: attr(data-label);
        display: block; margin-bottom: 2px;
        font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: var(--txt-3);
    }
    .table--cartes td[data-principal] { padding-top: 0 !important; font-size: 1.0625rem; }
    .table--cartes td[data-principal]::before { display: none; }
    .table--cartes td[data-actions] {
        display: flex !important; flex-wrap: wrap; gap: var(--e-2);
        margin-top: var(--e-2); padding-top: var(--e-3) !important;
        border-top: 1px solid rgba(255,255,255,.08) !important;
    }
    .table--cartes td[data-actions]::before { display: none; }
    .table--cartes td[data-actions] .btn { flex: 0 0 auto; }
    .table--cartes td:empty { display: none; }
    .card-body.p-0 .table--cartes { padding: var(--e-3); }
}

/* --- Barre d'actions collée en bas ---------------------------------------- */
/* L'action principale d'un écran doit rester sous le pouce, même après avoir
   fait défiler une longue liste. */
.barre-mobile {
    position: sticky; bottom: 0; z-index: 15;
    display: flex; gap: var(--e-2);
    margin: var(--e-4) calc(-1 * var(--e-4)) calc(-1 * var(--e-4));
    padding: var(--e-3) var(--e-4) calc(env(safe-area-inset-bottom, 0px) + var(--e-3));
    background: rgba(7,6,13,.86);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-top: 1px solid rgba(255,255,255,.10);
}
.barre-mobile .btn { flex: 1 1 0; }

@media (max-width: 575.98px) {
    /* 16 px strict sur toute saisie : en dessous, iOS zoome au focus et la
       page se retrouve à moitié hors écran, sans revenir en arrière. */
    .form-control, .form-select, .form-control-lg { font-size: 16px !important; min-height: 46px; }
    textarea.form-control { min-height: 96px; }
    .card-header { padding: var(--e-3) var(--e-4); }
    .card-body   { padding: var(--e-4); }
    .tuile       { padding: var(--e-4); }
    .tuile__valeur { font-size: 2rem; }
    .entete__fil { display: none; }

    .legale__fiche { grid-template-columns: 1fr; gap: 0; }
    .legale__fiche dt { margin-top: var(--e-3); }
    .legale__corps { font-size: 1rem; }
    /* Un tableau de durées ne se lit pas en défilement latéral. */
    .legale__table, .legale__table tbody, .legale__table tr, .legale__table td { display: block; width: 100%; }
    .legale__table thead { display: none; }
    .legale__table tr { margin-bottom: var(--e-3); padding-bottom: var(--e-2);
                        border-bottom: 1px solid rgba(255,255,255,.10); }
    .legale__table td { padding: var(--e-1) 0; border: 0; }
    .legale__table td:first-child { font-weight: 600; color: var(--txt); }
}

/* Respect du réglage système : on coupe le mouvement, jamais la couleur —
   celle-ci reste nécessaire à la compréhension. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------------------
   Impression d'un écran du back-office

   On inverse la polarité : la nuit ne s'imprime pas. Fond blanc, encre noire,
   navigation supprimée. Le néon reste à l'écran, où il est produit par de la
   lumière émise ; sur le papier il faudrait le déposer en encre, ce qui vide
   les cartouches pour un résultat sale.
   --------------------------------------------------------------------------- */
@media print {
    html, body { background: #fff !important; color: #111 !important; }
    body::before { display: none !important; }
    .menu, .entete, .voile, .barre-mobile, .sans-impression, .pied-legal { display: none !important; }
    main.contenu { padding: 0 !important; }
    .card, .tuile { background: #fff !important; border: 1px solid #999 !important;
                    box-shadow: none !important; color: #111 !important; }
    .card > .card-header:first-child::before { display: none !important; }
    .card-header, .tuile__label, .tuile__valeur, .tuile__detail,
    .table, .table > tbody td, .legale__corps { color: #111 !important; }
    .table > thead th { background: #eee !important; color: #333 !important; }
    a { color: #111 !important; text-decoration: underline; }
}

/* ---------------------------------------------------------------------------
   Formulaire d'invité : les trois emplacements média
   ---------------------------------------------------------------------------
   Chaque emplacement est une ligne, pas une carte : trois cartes empilées
   dans une carte donnent un mille-feuille illisible sur un téléphone. Un
   filet à gauche suffit à dire « ceci est un bloc », et il s'allume quand
   l'emplacement porte quelque chose de personnalisé.
   --------------------------------------------------------------------------- */
.emplacement {
    position: relative;
    padding: 14px 0 14px 14px;
    border-left: 2px solid rgba(255,255,255,.10);
}
.emplacement + .emplacement { margin-top: 4px; }
.emplacement.est-personnalise { border-left-color: var(--magenta); }

.emplacement__tete {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 10px;
}
.emplacement__icone {
    flex: 0 0 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: var(--txt-2); font-size: 1rem;
}
.emplacement.est-personnalise .emplacement__icone {
    background: linear-gradient(140deg, rgba(255,61,154,.22), rgba(160,107,255,.18));
    border-color: rgba(255,61,154,.38);
    color: var(--txt);
}
.emplacement__intitule { min-width: 0; }
.emplacement__titre {
    display: block; font-weight: 650; line-height: 1.25; color: var(--txt);
}
.emplacement__aide {
    display: block; margin-top: 2px;
    font-size: .8125rem; line-height: 1.4; color: var(--txt-3);
}
.emplacement__corps { display: flex; flex-direction: column; gap: 8px; }
.emplacement__champ[hidden] { display: none; }
.emplacement__apercu {
    margin: 6px 0 0; font-size: .8125rem; color: var(--txt-3);
    overflow-wrap: anywhere;
}
.emplacement__apercu.est-attention { color: var(--attente); }

/* --- <details> stylé comme une carte -------------------------------------- */
.details-carte > summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 8px;
}
.details-carte > summary::-webkit-details-marker { display: none; }
.details-carte > summary::after {
    content: "\f282";                     /* bi-chevron-down */
    font-family: "bootstrap-icons";
    margin-left: auto;
    font-size: .8em; opacity: .6;
    transition: transform var(--t-rapide);
}
.details-carte[open] > summary::after { transform: rotate(180deg); }

/* --- Barre d'actions ------------------------------------------------------ */
/* Sur téléphone les boutons passent en pleine largeur et empilés : deux
   boutons de 48 % côte à côte donnent deux cibles qu'on rate une fois sur
   trois, et « Annuler » ne doit jamais être à côté de « Ajouter ». */
.actions-formulaire { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575.98px) {
    .actions-formulaire { flex-direction: column; }
    .actions-formulaire .btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Mobile : ce qui se chevauchait
   ---------------------------------------------------------------------------
   Trois motifs reviennent partout dans le back-office et cassent tous au même
   endroit, vers 400 px : une rangée « texte + bouton », un en-tête de carte
   « titre + action », et une barre d'actions. Bootstrap les laisse en ligne
   jusqu'au bout ; le bouton se comprime alors à 80 px et le texte lui passe
   dessous en le chevauchant.

   Règle unique : sous 576 px, ces rangées passent en colonne et les boutons
   prennent toute la largeur. Un bouton pleine largeur sous le pouce vaut
   mieux qu'un bouton de 80 px sur trois lignes.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Alertes qui portent une action (« Revenir au générique »…). */
    .alert.d-flex {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    /* Le bloc de texte reprend toute la largeur : sans cela il garde son
       flex-grow et le bouton reste coince a cote de lui, comprime. */
    .alert.d-flex > .flex-grow-1 { flex: 1 1 100%; min-width: 0; }
    .alert.d-flex > .btn,
    .alert.d-flex > form {
        width: 100%;
        margin-top: 10px;
    }
    .alert.d-flex > form > .btn { width: 100%; }

    /* En-têtes de carte « titre à gauche, bouton à droite ». */
    .card-header.d-flex {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
    }
    .card-header.d-flex > .btn,
    .card-header.d-flex > form > .btn { width: 100%; }
    /* La mention discrète d'un en-tête revient sous le titre, pas à côté. */
    .card-header.d-flex > .small.text-muted { order: 9; }

    /* Pieds de carte et barres d'actions. */
    .card-footer.d-flex,
    .card-footer.d-grid { flex-direction: column; gap: 8px; }
    .card-footer .btn { width: 100%; }

    /* Un tableau ne défile jamais latéralement ici : il devient des cartes
       (.table--cartes). Ailleurs, on garde le défilement mais on l'annonce
       par une ombre plutôt que de laisser le contenu être coupé net. */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(90deg, var(--encre-3) 30%, rgba(12,10,22,0)) left / 22px 100% no-repeat,
            linear-gradient(270deg, var(--encre-3) 30%, rgba(12,10,22,0)) right / 22px 100% no-repeat;
        background-attachment: local, local;
    }

    /* Les groupes de champs collés (input + bouton copier) débordaient dès
       que l'URL était longue : l'input peut rétrécir, le bouton non. */
    .input-group > .form-control { min-width: 0; }

    /* Boutons d'action en fin de ligne de tableau : ils sortaient de la
       carte quand il y en avait trois. */
    td[data-actions] {
        display: flex; flex-wrap: wrap; gap: 6px;
        justify-content: flex-end;
    }
}

/* Blocs de commande (conseils ffmpeg…) : une ligne longue doit défiler dans
   son propre cadre, jamais élargir la page. */
.bloc-code {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(0,0,0,.35);
    color: var(--txt-2);
    font-size: .8125rem; line-height: 1.5;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Badge neutre : remplace les `bg-light text-dark` hérités de la charte
   claire, qui posaient une pastille blanche au milieu de la nuit. */
.badge-doux {
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--txt-2);
    font-weight: 600;
}