/* Vigyll — feuille de style unique, écrite à la main. Pas de framework, pas de build. */

:root {
    /* Identité */
    --bleu-nuit: #16323f;
    --bleu: #1b4b60;
    --bleu-clair: #e8f1f5;
    --teal: #0f8b8d;
    --teal-sombre: #0b6c6e;

    /* Neutres */
    --encre: #1c2529;
    --gris: #5b6b73;
    --gris-clair: #e3e8ea;
    --fond: #f6f8f9;
    --blanc: #ffffff;

    /* Échelle d'acceptabilité — jamais utilisée pour autre chose que la cotation.
       Les quatre noms et les quatre valeurs doivent rester identiques à
       App\Support\Cotation::NIVEAUX : c'est la seule duplication tolérée. */
    --crit-acceptable: #2e7d32;
    --crit-modere: #f9a825;
    --crit-grave: #ef6c00;
    --crit-critique: #c62828;

    --rayon: 6px;
    --ombre: 0 1px 3px rgba(22, 50, 63, .12);
    --largeur: 1180px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--fond);
}

a { color: var(--teal-sombre); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }

/* ---- Ossature ---- */

.bandeau {
    background: var(--bleu-nuit);
    color: var(--blanc);
}

.bandeau-interieur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: .9rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.marque {
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--blanc);
    text-decoration: none;
}

.marque span { color: var(--teal); }

.contenu {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.pied {
    border-top: 1px solid var(--gris-clair);
    color: var(--gris);
    font-size: .875rem;
}

.pied-interieur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 1.25rem;
}

/* ---- Blocs ---- */

.carte {
    background: var(--blanc);
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
    padding: 1.5rem;
}

.grille {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

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

.bouton {
    display: inline-block;
    padding: .6rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    background: var(--teal);
    color: var(--blanc);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.bouton:hover { background: var(--teal-sombre); }

.bouton-secondaire {
    background: var(--blanc);
    color: var(--bleu);
    border-color: var(--gris-clair);
}

.bouton-secondaire:hover { background: var(--bleu-clair); }

/* ---- Messages ---- */

.message { padding: .8rem 1rem; border-radius: var(--rayon); margin-bottom: 1.25rem; }
.message-succes { background: #e8f5e9; border: 1px solid #a5d6a7; }
.message-erreur { background: #fdecea; border: 1px solid #f5b5b0; }

/* ---- Criticité ---- */

.pastille {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--blanc);
}

.pastille-acceptable { background: var(--crit-acceptable); }
.pastille-modere     { background: var(--crit-modere); color: var(--encre); }
.pastille-grave      { background: var(--crit-grave); }
.pastille-critique   { background: var(--crit-critique); }

/* ---- Tableaux ---- */

.tableau-defilant { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanc);
}

th, td {
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--gris-clair);
}

th { background: var(--bleu-clair); font-weight: 600; }

/* ---- Formulaires ---- */

label { display: block; font-weight: 600; margin-bottom: .3rem; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--blanc);
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--teal);
    outline-offset: 1px;
}

.champ { margin-bottom: 1.1rem; }
.erreur-champ { color: var(--crit-critique); font-size: .875rem; margin-top: .25rem; }

/* ================================================================
   Pages publiques (layouts/vitrine.blade.php)
   Réservé à la présentation : l'application connectée n'utilise
   aucune de ces classes.
   ================================================================ */

.bandeau-liens {
    display: flex;
    gap: 1.4rem;
    margin-left: auto;
    font-size: .9375rem;
}

.bandeau-liens a {
    color: #c3d7de;
    text-decoration: none;
    padding: .2rem 0;
    border-bottom: 2px solid transparent;
}

.bandeau-liens a:hover { color: var(--blanc); border-bottom-color: var(--teal); }

.bouton-clair {
    background: var(--blanc);
    color: var(--bleu-nuit);
    padding: .45rem .95rem;
}

.bouton-clair:hover { background: var(--bleu-clair); }

/* ---- Bandes de contenu ---- */

.bande { padding: 3.5rem 0; }
.bande-claire { background: var(--bleu-clair); }

.bande-interieur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.bande h2 { font-size: 1.65rem; margin-bottom: .5rem; }
.chapo { color: var(--gris); max-width: 68ch; margin-bottom: 2rem; }
.bande-claire .chapo { color: var(--bleu); }

/* ---- Pied de page vitrine ---- */

.pied-vitrine {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    justify-content: space-between;
    align-items: center;
}

.pied-liens { display: flex; gap: 1.4rem; }

/* ---- Adaptation aux petits écrans ---- */

@media (max-width: 860px) {
    .bandeau-liens { display: none; }      /* la nav de section n'a pas de sens sur mobile */
    .bande { padding: 2.5rem 0; }
}

/* ---- Écrans étroits (connexion, mot de passe) ---- */

.ecran-etroit {
    max-width: 460px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.ecran-etroit .carte h1 { font-size: 1.4rem; }
.ecran-etroit .chapo { font-size: .9375rem; margin-bottom: 1.5rem; }

.message-info { background: var(--bleu-clair); border: 1px solid #b9d4de; }

.aide { font-size: .8125rem; color: var(--gris); margin: .35rem 0 0; }

.mention-sombre { font-size: .875rem; color: var(--gris); margin-top: 1.4rem; }

/* ---------------------------------------------------------------------------
   Bandeau de l'application connectée — compte, site courant, déconnexion.
   Rien ici n'est une sécurité : le menu est un confort d'affichage, le contrôle
   d'accès se fait côté serveur dans chaque contrôleur.
   --------------------------------------------------------------------------- */

.bandeau-compte {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .9rem;
}

.bandeau-compte form { margin: 0; }

.selecteur-site select {
    padding: .35rem .5rem;
    border-radius: var(--rayon);
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .1);
    color: inherit;
    font: inherit;
    max-width: 14rem;
}

.selecteur-site select option { color: var(--encre); }

.site-courant { opacity: .85; }
.nom-compte { font-weight: 600; }

.bouton-discret {
    background: none;
    border: 1px solid rgba(255, 255, 255, .35);
    color: inherit;
    font: inherit;
    padding: .35rem .7rem;
    border-radius: var(--rayon);
    cursor: pointer;
}

.bouton-discret:hover { background: rgba(255, 255, 255, .12); }

/* Lien présenté comme du texte, mais qui doit rester un bouton de formulaire
   (la déconnexion change l'état du serveur : jamais un simple lien GET). */
.lien-bouton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gris);
    text-decoration: underline;
    cursor: pointer;
}

/* Étiquette lue par les lecteurs d'écran, invisible à l'œil. */
.visuellement-cache {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Paires « intitulé / valeur » du tableau de bord. */
.paires { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0; }
.paires dt { font-weight: 600; color: var(--gris); }
.paires dd { margin: 0; }

@media (max-width: 640px) {
    .paires { grid-template-columns: 1fr; gap: .1rem 0; }
    .paires dd { margin-bottom: .75rem; }
}

/* ---------------------------------------------------------------------------
   Administration (P04) — menu de l'application, listes et formulaires.
   Le menu n'affiche que ce que le compte peut ouvrir ; il n'autorise rien.
   --------------------------------------------------------------------------- */

.menu-app { background: var(--bleu); }

.menu-app-interieur {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.4rem;
}

.menu-app a {
    color: #c3d7de;
    text-decoration: none;
    font-size: .9375rem;
    padding: .6rem 0;
    border-bottom: 3px solid transparent;
}

.menu-app a:hover { color: var(--blanc); }
.menu-app a.actif { color: var(--blanc); border-bottom-color: var(--teal); }

.entete-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: .6rem;
}

.entete-page h1, .entete-page h2 { margin: 0; }
.entete-section { margin-top: 2.25rem; margin-bottom: 1rem; }

.fil { font-size: .875rem; color: var(--gris); margin: 0 0 .5rem; }

.carte + .carte, .grille + .carte, .tableau-defilant + .carte { margin-top: 1.25rem; }
.carte h2 { font-size: 1.1rem; }
.carte h2:not(:first-child) { margin-top: 1.6rem; }

.formulaire { max-width: 760px; }

.champs-ligne {
    display: grid;
    gap: 0 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.champ-court { max-width: 200px; }

fieldset.champ { border: 0; padding: 0; margin-left: 0; margin-right: 0; }
fieldset.champ legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }

label.case {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 400;
    margin: .35rem 0;
    cursor: pointer;
}

label.case input { width: auto; margin: 0; }

.facultatif { font-weight: 400; font-size: .8125rem; color: var(--gris); }

input:disabled { background: var(--fond); color: var(--gris); }

.actions-formulaire {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.aide-bloc { margin: 1rem 0 1.25rem; font-size: .9375rem; max-width: 74ch; }
.aide-ligne { display: block; margin: .1rem 0 0; }

/* Lignes et états */
.ligne-inactive td, li.ligne-inactive { color: var(--gris); }

.etat {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .8125rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.etat-actif { background: #e8f5e9; border-color: #a5d6a7; }
.etat-inactif { background: var(--gris-clair); color: var(--gris); }
.etat-attente { background: #fff8e1; border-color: #ffe082; }

.role { display: block; font-size: .9375rem; }
.role-perimetre { color: var(--gris); }

/* Grille des rôles d'un compte, site par site */
.grille-roles {
    border: 1px solid var(--gris-clair);
    border-radius: var(--rayon);
    padding: .75rem 1rem;
    margin: .75rem 0;
}

.grille-roles-titre { font-weight: 600; margin: 0 0 .25rem; }
.grille-roles-lecture { background: var(--fond); }
.grille-roles-lecture p { margin: .2rem 0; }

.option-accordee { margin: .3rem 0; }

/* Onglets des référentiels */
.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    border-bottom: 1px solid var(--gris-clair);
    margin-bottom: .5rem;
}

.onglets a {
    padding: .5rem .9rem;
    text-decoration: none;
    color: var(--gris);
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--rayon) var(--rayon) 0 0;
    margin-bottom: -1px;
}

.onglets a.actif {
    color: var(--encre);
    background: var(--blanc);
    border-color: var(--gris-clair);
    font-weight: 600;
}

/* Types de risque par famille */
.famille-risque { margin-top: 1.75rem; }
.famille-risque h2 { font-size: 1.05rem; color: var(--bleu); }

.liste-types { list-style: none; margin: 0; padding: 0; background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--rayon); }
.liste-types li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .45rem .9rem; border-bottom: 1px solid var(--gris-clair); }
.liste-types li:last-child { border-bottom: 0; }
.liste-types a { margin-left: auto; font-size: .875rem; }

.etiquette {
    font-size: .75rem;
    padding: .05rem .45rem;
    border-radius: var(--rayon);
    background: var(--bleu-clair);
    color: var(--bleu);
}

/* Client courant du SuperAdmin (2026-09-15) */
.selecteur-client select { font-weight: 600; }
.actions-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.form-en-ligne { display: inline; margin: 0; }
.bouton-petit { padding: .3rem .8rem; font-size: .875rem; }