/* =====================================================================
   Espace pro Capitech - basé sur le design system Capitech
   Thème sombre, cartes à filet violet, boutons en pilule, titres Epilogue
   ===================================================================== */

/* ===== Polices (auto-hébergées, licence OFL) ===== */

@font-face
{
    font-family: "Epilogue";
    src: url("/fonts/epilogue-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face
{
    font-family: "Instrument Sans";
    src: url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face
{
    font-family: "Instrument Sans";
    src: url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face
{
    font-family: "Instrument Sans";
    src: url("/fonts/instrument-sans-latin-700-normal.woff2") format("woff2");
    font-weight: 700 800;
    font-display: swap;
}

/* ===== Variables (tokens du design system) ===== */

:root
{
    --surface-page: #110620;
    --obsidian: #08070c;
    --obsidian-2: #0d0b14;
    --ink: #f4f1ff;
    --text-body: #ceccd3;
    --text-muted: #9d97af;
    --violet: #8c52ff;
    --violet-btn: #8449fa;
    --violet-bright: #b28aff;
    --violet-deep: #6428e0;
    --coral: #fe5757;
    --on-violet: #ffffff;
    --line: rgba(244, 241, 255, 0.2);
    --line-violet: rgba(178, 138, 255, 0.3);
    --degrade: linear-gradient(100deg, #8c52ff 0%, #fe5757 100%);

    --succes: #4ade80;
    --succes-fond: rgba(74, 222, 128, 0.12);
    --alerte: #fbbf5a;
    --alerte-fond: rgba(251, 191, 90, 0.12);
    --erreur: #ff8a8a;
    --erreur-fond: rgba(254, 87, 87, 0.14);

    --space-2: 8px;
    --space-4: 16px;
    --space-7: 28.8px;
    --space-8: 32px;
    --radius-sm: 8px;
    --radius-card: 20px;
    --radius-pill: 999px;
    --container: 1400px;

    --police-titres: "Epilogue", "Arial Black", sans-serif;
    --police-texte: "Instrument Sans", system-ui, sans-serif;
}

/* ===== Base ===== */

*,
*::before,
*::after
{
    box-sizing: border-box;
}

html
{
    color-scheme: dark;
}

body
{
    margin: 0;
    min-height: 100vh;
    font-family: var(--police-texte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
    background:
        radial-gradient(ellipse 70% 50% at 70% -10%, rgba(140, 82, 255, 0.22), transparent 70%),
        var(--surface-page);
    background-attachment: fixed;
}

h1,
h2,
h3
{
    margin: 0;
    font-family: var(--police-titres);
    font-weight: 700;
    letter-spacing: -0.018em;
    color: var(--ink);
}

h1
{
    margin-bottom: var(--space-8);
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1;
}

/* Signature Capitech : le point final des titres en violet */
h1::after
{
    content: ".";
    color: var(--violet);
}

h2
{
    margin-bottom: 20px;
    font-size: 22px;
    line-height: 1.15;
}

h3
{
    font-size: 19px;
    line-height: 1.2;
}

a
{
    color: var(--violet-bright);
}

[hidden]
{
    display: none !important;
}

:focus-visible
{
    outline: 2px solid var(--violet-bright);
    outline-offset: 2px;
}

.vide
{
    color: var(--text-muted);
}

/* Indicateur de chargement : l'étoile Capitech qui tourne (le texte reste lu par les lecteurs d'écran) */
.chargement
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    margin: 0;
    font-size: 0;
    color: transparent;
}

.chargement::before
{
    content: "";
    width: 44px;
    height: 44px;
    background: url("/img/capitech-etoile.svg") center / contain no-repeat;
    animation: rotation-etoile 1.1s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

@keyframes rotation-etoile
{
    0%
    {
        transform: rotate(0deg) scale(0.9);
    }

    50%
    {
        transform: rotate(180deg) scale(1.1);
    }

    100%
    {
        transform: rotate(360deg) scale(0.9);
    }
}

capi-app > .chargement
{
    min-height: 100vh;
}

.discret
{
    color: var(--text-muted);
    font-size: 14px;
}

/* ===== Disposition ===== */

.disposition
{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.menu
{
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100vh;
    padding: var(--space-8) 20px;
    border-right: 1px solid var(--line-violet);
    background: rgba(8, 7, 12, 0.6);
    backdrop-filter: blur(12px);
}

.marque
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.marque-logo
{
    display: block;
    width: 118px;
    height: auto;
}

.marque-espace
{
    padding: 4px 12px;
    border: 1px solid var(--line-violet);
    border-radius: var(--radius-pill);
    color: var(--violet-bright);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.menu .marque
{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.menu-entreprise
{
    margin: 5px 0 20px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--line-violet);
    color: var(--ink);
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-liens
{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-liens a
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.menu-liens a:hover
{
    background: rgba(178, 138, 255, 0.1);
    color: var(--ink);
}

.menu-liens a.actif
{
    background: var(--violet-btn);
    color: var(--on-violet);
}

.menu-deconnexion
{
    margin-top: auto;
}

.lien-marque
{
    color: inherit;
    text-decoration: none;
}

.bouton-compte-mobile
{
    display: none;
}

/* ===== Chantiers ===== */

.encart-chantier
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid var(--line-violet);
    border-radius: 14px;
    background: rgba(140, 82, 255, 0.1);
}

.encart-chantier p
{
    flex: 1 1 260px;
    margin: 0;
}

.formulaire-chantier
{
    max-width: 760px;
}

.formulaire-chantier .pastilles
{
    margin-bottom: 20px;
}

.titre-section
{
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--line);
}

.grille-champs
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 var(--space-4);
}

.icone
{
    flex-shrink: 0;
}

main
{
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 48px clamp(20px, 4vw, 56px);
}

.bandeau-admin
{
    padding: 12px 20px;
    background: var(--degrade);
    color: var(--on-violet);
    text-align: center;
    font-weight: 600;
}

/* ===== Cartes et grilles ===== */

.carte
{
    padding: var(--space-7) var(--space-8);
    border: 1px solid var(--line-violet);
    border-radius: var(--radius-card);
    background: var(--obsidian-2);
}

/* Toutes les cartes d'une même rangée ont la même hauteur */
.grille-2
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.grille-modules
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* Marges du premier et du dernier élément d'une carte neutralisées : l'espace intérieur est le même en haut et en bas */
.carte > :first-child,
.carte > form > :first-child
{
    margin-top: 0;
}

.carte > :last-child,
.carte > form > :last-child,
.carte > details > form > :last-child
{
    margin-bottom: 0;
}

.grille-2 > .carte,
.grille-modules > .carte
{
    display: flex;
    flex-direction: column;
}

.entete-page
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.entete-page h1
{
    margin: 0;
}

/* ===== Boutons ===== */

.bouton
{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 13px var(--space-8);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.bouton:active
{
    transform: translateY(1px);
}

.bouton:disabled
{
    opacity: 0.6;
    cursor: wait;
}

.bouton-plein
{
    background: var(--violet-btn);
    color: var(--on-violet);
}

.bouton-plein:hover
{
    background: var(--violet-deep);
}

.bouton-secondaire
{
    border-color: var(--line);
    background: transparent;
    color: var(--ink);
}

.bouton-secondaire:hover
{
    border-color: var(--violet-bright);
}

.bouton-danger
{
    border-color: var(--erreur-fond);
    color: var(--erreur);
}

.bouton-danger:hover
{
    border-color: var(--erreur);
}

.bouton-lien
{
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Le bouton principal d'une carte reste collé en bas, même si les cartes n'ont pas le même contenu */
.carte > .bouton:last-child,
.carte > form > .bouton:last-child
{
    align-self: flex-start;
    margin-top: auto;
}

.entete-section
{
    margin: 48px 0 24px;
}

.entete-section h2
{
    margin: 0;
}

.libelle
{
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
}

.code
{
    display: inline-block;
    align-self: flex-start;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--obsidian);
    color: var(--violet-bright);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.code-bloc
{
    display: block;
    align-self: stretch;
    padding: 12px 14px;
    line-height: 1.5;
}

.champ .bouton
{
    align-self: flex-start;
}

.tableau td .actions
{
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.tableau td .bouton
{
    padding: 9px 18px;
    font-size: 14px;
    white-space: nowrap;
}

.champ select,
.versions select
{
    appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b28aff' stroke-width='2.5' 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 16px center;
    background-size: 16px;
    cursor: pointer;
}

.champ select
{
    width: 100%;
    padding: 12px 44px 12px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--obsidian);
    color: var(--ink);
    font: inherit;
}

.versions
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.versions li
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.versions select
{
    flex-shrink: 0;
    padding: 8px 40px 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--obsidian);
    color: var(--ink);
    font: inherit;
}

.grille-serree
{
    gap: 12px;
    margin-top: 16px;
}

.filtres
{
    margin-bottom: var(--space-8);
}

.bloc
{
    margin-top: 24px;
}

.sous-titre
{
    margin-top: var(--space-8);
}

.infos
{
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px;
    margin: 0 0 20px;
}

.infos dt
{
    color: var(--text-muted);
}

.infos dd
{
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.description
{
    margin: 0;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--obsidian);
    white-space: pre-line;
}

.galerie
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

.photo
{
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--line-violet);
    border-radius: 14px;
}

.photo img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.photo:hover img
{
    transform: scale(1.04);
}

/* Préfixe .badge : ces couleurs doivent l'emporter sur le style de base des badges, défini plus bas */
.badge.statut-nouvelle
{
    border-color: transparent;
    background: var(--succes);
    color: var(--obsidian);
}

.badge.statut-en_cours
{
    border-color: transparent;
    background: rgba(140, 82, 255, 0.18);
    color: var(--violet-bright);
}

.badge.statut-visite_prevue,
.badge.statut-devis_envoye
{
    border-color: transparent;
    background: var(--alerte-fond);
    color: var(--alerte);
}

.badge.statut-signe,
.badge.statut-termine
{
    border-color: transparent;
    background: var(--succes-fond);
    color: var(--succes);
}

.cloche
{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-weight: 600;
    text-decoration: none;
}

.cloche:hover,
.cloche.actif
{
    background: rgba(178, 138, 255, 0.1);
    color: var(--ink);
}

.cloche-compteur
{
    min-width: 22px;
    margin-left: auto;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--coral);
    color: var(--on-violet);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.liste-notifications
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-ligne
{
    padding: 0;
}

.notification-ligne a
{
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px 24px;
    color: inherit;
    text-decoration: none;
}

.notification-ligne strong
{
    color: var(--ink);
}

.notification-ligne.non-lue
{
    border-color: var(--violet-bright);
    box-shadow: inset 4px 0 0 var(--violet);
}

.fenetre
{
    width: min(520px, calc(100vw - 32px));
    padding: var(--space-8);
    border: 1px solid var(--line-violet);
    border-radius: var(--radius-card);
    background: var(--obsidian-2);
    color: var(--text-body);
}

.fenetre::backdrop
{
    background: rgba(8, 7, 12, 0.7);
    backdrop-filter: blur(3px);
}

.fenetre .actions
{
    margin-top: 24px;
}

.interrupteur-compact
{
    margin: 0;
    font-weight: 600;
}

.interrupteur-compact input:disabled
{
    opacity: 0.4;
    cursor: not-allowed;
}

.etapes
{
    margin: 0;
    padding-left: 22px;
}

.etapes li
{
    margin-bottom: 8px;
}

.galerie-petite
{
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.etapes-chantier .description
{
    margin-top: 8px;
}

.formulaire-etape
{
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid var(--line);
}

.formulaire-etape .pastilles
{
    margin-bottom: 20px;
}

.champ input[type=file]
{
    padding: 10px;
}

.jour-agenda
{
    margin-bottom: var(--space-8);
}

.titre-jour::first-letter
{
    text-transform: uppercase;
}

.rdv .entete-module h3
{
    font-size: 18px;
}

.rdv p
{
    margin: 0 0 14px;
}

.rdv-annule
{
    opacity: 0.6;
}

/* ===== Agenda : calendrier ===== */

.agenda-zone
{
    display: grid;
    grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-8);
}

.champ-site
{
    max-width: 440px;
}

.calendrier-carte
{
    margin: 0;
}

.cal-entete
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 18px;
}

.cal-titre
{
    margin: 0;
    font-size: 20px;
    text-align: center;
}

.cal-titre::first-letter
{
    text-transform: uppercase;
}

.bouton-icone
{
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.bouton-icone:hover
{
    border-color: var(--violet-bright);
    background: rgba(140, 82, 255, 0.15);
}

.bouton-icone .icone
{
    width: 20px;
    height: 20px;
}

.cal-grille
{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-jour-semaine
{
    padding-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}

.jour-cal
{
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.jour-cal .numero
{
    display: grid;
    place-items: center;
    width: min(40px, 88%);
    aspect-ratio: 1;
    border: 2px solid transparent;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.jour-cal:hover .numero
{
    background: rgba(244, 241, 255, 0.08);
}

.jour-cal:focus-visible
{
    outline: none;
}

.jour-cal:focus-visible .numero
{
    outline: 2px solid var(--violet-bright);
    outline-offset: 2px;
}

/* Jour de visite : chiffre entouré */
.jour-cal.ouvert .numero
{
    border-color: var(--succes);
    color: var(--ink);
}

/* Modifié pour ce jour précis */
.jour-cal.exception::after
{
    content: "";
    position: absolute;
    top: 8%;
    right: 12%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--alerte);
}

/* Jour avec rendez-vous : chiffre entouré et rempli */
.jour-cal.avec-rdv .numero
{
    border-color: var(--violet);
    background: var(--violet-btn);
    color: var(--on-violet);
}

.compte-rdv
{
    position: absolute;
    right: 6%;
    bottom: 4%;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--coral);
    color: var(--on-violet);
    font-size: 11px;
    font-weight: 700;
}

/* Aujourd'hui : petit trait violet sous le chiffre */
.jour-cal.aujourdhui::before
{
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 14px;
    height: 3px;
    border-radius: var(--radius-pill);
    background: var(--violet-bright);
    transform: translateX(-50%);
}

.jour-cal.choisi
{
    background: rgba(178, 138, 255, 0.16);
    box-shadow: inset 0 0 0 1px var(--line-violet);
}

.jour-cal.passe,
.jour-cal.hors-mois
{
    opacity: 0.4;
}

.cal-legende
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 0;
    padding: 0;
    color: var(--text-muted);
    font-size: 13px;
    list-style: none;
}

.cal-legende li
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.puce
{
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-radius: 50%;
}

.puce-rdv
{
    background: var(--violet-btn);
}

.puce-ouvert
{
    border-color: var(--succes);
}

.puce-ferme
{
    border-color: var(--line);
}

.puce-exception
{
    width: 8px;
    height: 8px;
    border: 0;
    background: var(--alerte);
}

.agenda-panneau
{
    min-width: 0;
}

.agenda-panneau .titre-jour
{
    margin-top: 0;
}

.texte-aide
{
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.horaires-jour
{
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.grille-heures
{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 var(--space-4);
}

@media (max-width: 1100px)
{
    .agenda-zone
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendrier-carte
    {
        max-width: 520px;
        width: 100%;
    }
}

@media (max-width: 480px)
{
    .calendrier-carte
    {
        padding-left: 14px;
        padding-right: 14px;
    }

    .jour-cal .numero
    {
        font-size: 14px;
    }

    .compte-rdv
    {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }
}

.entete-module h2,
.entete-module h3
{
    min-width: 0;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.entete-module .badge
{
    flex-shrink: 0;
}

.carte .entete-module
{
    margin-bottom: 20px;
}

/* Titre de carte avec badge (ex : "Dernières demandes" + "1 nouvelle") */
.titre-badge
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.notification-ligne
{
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-ligne a
{
    flex: 1;
    min-width: 0;
}

.notification-ligne .bouton-lu
{
    flex-shrink: 0;
    margin-right: 20px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.notification-ligne .bouton-lu:hover
{
    border-color: var(--violet-bright);
    color: var(--ink);
}

/* ===== Messages ===== */

.alerte
{
    margin-bottom: 20px;
    padding: 14px 20px;
    border: 1px solid rgba(251, 191, 90, 0.35);
    border-radius: 14px;
    background: var(--alerte-fond);
    color: var(--alerte);
}

.alerte .infos
{
    margin: 10px 0;
}

.alerte .bouton
{
    margin-top: 8px;
}

.alerte-succes
{
    border-color: rgba(74, 222, 128, 0.35);
    background: var(--succes-fond);
    color: var(--succes);
}

.erreur
{
    padding: 12px 18px;
    border-radius: 14px;
    background: var(--erreur-fond);
    color: var(--erreur);
}

.badge
{
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-actif
{
    padding: 5px 13px;
    border: 0;
    background: var(--succes-fond);
    color: var(--succes);
}

.badge-alerte
{
    padding: 5px 13px;
    border: 0;
    background: var(--alerte-fond);
    color: var(--alerte);
}

.badge-bientot
{
    padding: 5px 13px;
    border: 0;
    background: var(--degrade);
    color: var(--on-violet);
}

.notification
{
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10;
    max-width: 440px;
    padding: 14px 22px;
    border-radius: var(--radius-pill);
    background: var(--violet-btn);
    color: var(--on-violet);
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.notification-erreur
{
    background: #c43b3b;
}

/* ===== Formulaires ===== */

.champ
{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    min-width: 0;
}

.champ label,
.champ legend
{
    padding: 0;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
}

.champ legend
{
    margin-bottom: 10px;
}

.champ small
{
    color: var(--text-muted);
    font-size: 13px;
}

.champ input:not([type=checkbox]),
.champ textarea
{
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--obsidian);
    color: var(--ink);
    font: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.champ input:not([type=checkbox]):focus,
.champ textarea:focus
{
    border-color: var(--violet-bright);
    outline: none;
    box-shadow: 0 0 0 3px rgba(140, 82, 255, 0.25);
}

.champ textarea
{
    resize: vertical;
}

.requis
{
    color: var(--coral);
}

.formulaire-ajout
{
    margin-bottom: var(--space-8);
}

/* ===== Interrupteurs (remplacent les cases à cocher oui / non) ===== */

.interrupteur
{
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
}

.interrupteur input
{
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
    margin: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--obsidian);
    box-shadow: inset 0 0 0 1px var(--line);
    appearance: none;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
}

.interrupteur input::before
{
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.25s, background 0.25s;
}

.interrupteur input:checked
{
    background: var(--succes);
    box-shadow: none;
}

.interrupteur input:checked::before
{
    background: var(--on-violet);
    transform: translateX(20px);
}

.interrupteur small
{
    display: block;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

/* ===== Choix multiples en pastilles ===== */

.pastilles
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pastille,
.champ .pastille
{
    position: relative;
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--text-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pastille input
{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pastille:hover
{
    border-color: var(--violet-bright);
}

.pastille:has(input:checked)
{
    border-color: var(--violet-btn);
    background: var(--violet-btn);
    color: var(--on-violet);
}

.pastille:has(input:focus-visible)
{
    outline: 2px solid var(--violet-bright);
    outline-offset: 2px;
}

/* ===== Listes et tableaux ===== */

.liste
{
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.liste a
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

.liste a strong
{
    color: var(--ink);
}

.liste a > span
{
    min-width: 0;
}

.liste a:hover strong
{
    color: var(--violet-bright);
}

.liste-simple
{
    margin: 0 0 20px;
    padding-left: 20px;
}

.liste-simple li::marker
{
    color: var(--violet);
}

.lien-suite
{
    margin-top: auto;
    font-weight: 600;
    text-decoration: none;
}

.lien-suite::after
{
    content: " →";
}

.tableau-zone
{
    container: tableau / inline-size;
}

.tableau-conteneur
{
    padding: 0;
    overflow-x: auto;
}

.tableau
{
    width: 100%;
    border-collapse: collapse;
}

.tableau th,
.tableau td
{
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

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

.tableau tbody tr:hover
{
    background: rgba(178, 138, 255, 0.05);
}

.tableau th
{
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tableau td a,
.tableau td strong
{
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.tableau td a:not(.bouton):hover
{
    color: var(--violet-bright);
}

.valeur-empilee
{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chronologie
{
    margin: 0;
    padding: 0;
    list-style: none;
}

.chronologie li
{
    position: relative;
    padding: 0 0 18px 26px;
    border-left: 1px solid var(--line-violet);
    margin-left: 6px;
}

.chronologie li::before
{
    content: "";
    position: absolute;
    top: 6px;
    left: -6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--degrade);
}

.chronologie strong
{
    color: var(--ink);
}

.chronologie span
{
    display: block;
}

.retour
{
    display: inline-block;
    margin-bottom: var(--space-8);
    font-weight: 600;
    text-decoration: none;
}

@container tableau (max-width: 820px)
{
    /* Les tableaux deviennent des cartes empilées dès que leur conteneur est trop étroit (quelle que soit la taille de l'écran) */
    .tableau-conteneur
    {
        border: 0;
        background: none;
    }

    .tableau,
    .tableau tbody,
    .tableau tr,
    .tableau td
    {
        display: block;
        width: 100%;
    }

    .tableau thead
    {
        display: none;
    }

    .tableau tr
    {
        margin-bottom: 14px;
        padding: 16px 20px;
        border: 1px solid var(--line-violet);
        border-radius: var(--radius-card);
        background: var(--obsidian-2);
    }

    .tableau tbody tr:hover
    {
        background: var(--obsidian-2);
    }

    .tableau td
    {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 0;
        border-bottom: 1px solid var(--line);
        text-align: right;
        overflow-wrap: anywhere;
    }

    .tableau td::before
    {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 600;
        text-align: left;
    }

    .tableau td .valeur-empilee
    {
        align-items: flex-end;
        min-width: 0;
    }

    .infos
    {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .infos dd
    {
        margin-bottom: 10px;
    }

    .entete-module
    {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 20px;
    }

    .tableau td.cellule-titre
    {
        padding-top: 0;
        font-size: 18px;
    }

    .tableau td.cellule-titre::before
    {
        content: none;
    }

    /* Chaque carte garde ses traits de séparation, la dernière comprise : seule la dernière ligne d'une carte n'en a pas */
    .tableau tbody tr:last-child td
    {
        border-bottom: 1px solid var(--line);
    }

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

    .tableau td.cellule-action
    {
        padding-top: 14px;
    }

    .tableau td.cellule-action::before
    {
        content: none;
    }

    .tableau td.cellule-action .actions
    {
        flex-direction: column;
        width: 100%;
    }

    .tableau td.cellule-action .bouton
    {
        width: 100%;
    }
}

/* ===== Modules ===== */

.section-site
{
    margin-bottom: 48px;
}

.entete-module
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.carte-module > p
{
    margin: 0 0 20px;
    color: var(--text-muted);
}

.carte-module details
{
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.carte-module summary
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--violet-bright);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.carte-module summary::-webkit-details-marker
{
    display: none;
}

.carte-module summary::after
{
    content: "+";
    font-size: 22px;
    line-height: 1;
    transition: transform 0.2s;
}

.carte-module details[open] summary
{
    margin-bottom: 20px;
}

.carte-module details[open] summary::after
{
    transform: rotate(45deg);
}

/* ===== Connexion ===== */

.connexion
{
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 20px;
}

.connexion-carte
{
    width: 100%;
    max-width: 420px;
    padding: 40px;
}

.connexion-carte .marque
{
    margin-bottom: 28px;
}

.connexion-carte .bouton
{
    width: 100%;
}

.connexion-carte .bouton-lien
{
    display: block;
    margin-top: 16px;
    color: var(--text-muted);
    font-weight: 400;
    text-align: left;
}

/* Case à cocher simple avec son libellé (ex : "Faire confiance à cet appareil") */
.case
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

.case input
{
    width: 18px;
    height: 18px;
    accent-color: var(--violet-bright);
}

/* Clé secrète et codes de secours de la double authentification */
.code-secret
{
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 17px;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
    user-select: all;
}

.codes-secours
{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 20px;
    padding: 0;
    list-style: none;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ===== Responsive ===== */

@media (max-width: 900px)
{
    /* La rangée du haut garde la hauteur de son contenu : sur une page courte, c'est le contenu qui s'étire, pas l'en-tête */
    .disposition
    {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        align-content: start;
    }

    /* Le menu devient une barre en haut (logo + déconnexion) et une barre fixe en bas (liens) */
    .menu
    {
        position: sticky;
        top: 0;
        z-index: 5;
        background: rgba(8, 7, 12, 0.96);
        backdrop-filter: none;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        height: auto;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--line-violet);
    }

    .menu .marque
    {
        flex-direction: row;
        align-items: center;
    }

    .marque-logo
    {
        width: 96px;
    }

    .menu-entreprise
    {
        display: none;
    }

    .menu-deconnexion
    {
        margin: 0 0 0 auto;
        padding: 10px;
    }

    .cloche ~ .menu-deconnexion
    {
        margin-left: 0;
    }

    /* Sur mobile, la barre du bas garde 5 liens : l'accueil passe par le logo, le compte par l'icône du haut */
    .menu-liens .lien-ordinateur
    {
        display: none;
    }

    .bouton-compte-mobile
    {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-pill);
        color: var(--text-body);
    }

    .bouton-compte-mobile.actif
    {
        border-color: transparent;
        background: var(--violet-btn);
        color: var(--on-violet);
    }

    /* Super admin (sans cloche) : l'icône compte se cale à droite */
    .menu-entreprise + .bouton-compte-mobile
    {
        margin-left: auto;
    }

    .bouton-compte-mobile ~ .menu-deconnexion
    {
        margin-left: 0;
    }

    .cloche
    {
        margin: 0 0 0 auto;
        padding: 10px;
        border: 1px solid var(--line);
    }

    .cloche-libelle
    {
        display: none;
    }

    .cloche-compteur
    {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 20px;
        margin: 0;
        padding: 1px 6px;
    }

    .menu-deconnexion span
    {
        display: none;
    }

    .menu-liens
    {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5;
        flex-direction: row;
        justify-content: space-around;
        gap: 4px;
        padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-violet);
        background: rgb(24 17 51 / 75%);
        backdrop-filter: blur(1.5px);
    }

    .menu-liens a
    {
        flex: 1;
        flex-direction: column;
        gap: 4px;
        max-width: 110px;
        padding: 8px 4px;
        border-radius: 14px;
        font-size: 12px;
        text-align: center;
    }

    .menu-liens a.actif
    {
        background: var(--violet-btn);
        color: var(--on-violet);
    }

    main
    {
        padding: 28px 16px 120px;
    }

    .bandeau-admin
    {
        font-size: 14px;
    }

    .grille-2,
    .grille-modules
    {
        grid-template-columns: minmax(0, 1fr);
    }

    .entete-page .bouton
    {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce)
{
    *
    {
        transition: none !important;
    }
}