/* ---------------------------------------------------------------------------
   La page publique et les écrans d'authentification.

   C'est la porte, et le seul endroit de l'application où la conviction passe
   avant la densité. Quelqu'un qui arrive ici doit comprendre en une phrase ce
   que fait cet outil, puis entrer.

   Elle est engagée en clair, sans schéma sombre : elle s'ouvre depuis un
   courriel, en réunion, sur un vidéoprojecteur. Les panneaux, eux, suivent le
   système — ce sont eux qu'on regarde huit heures par jour.

   La police d'affichage condensée ne vit QUE sur cette page. Dans un panneau,
   elle serait du bruit sur un libellé de formulaire.
   --------------------------------------------------------------------------- */

:root {
    color: var(--neutre-900);
    font-family: var(--texte-famille);
    font-synthesis: none;
    background: var(--neutre-050);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    font-size: var(--taille-lg);
    line-height: var(--interligne-lecture);
}

a {
    color: inherit;
}

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

.conteneur-messages-temporaires {
    position: fixed;
    z-index: 10;
    top: var(--espace-4);
    right: var(--espace-4);
    width: min(28rem, calc(100% - 2rem));
}

.message-temporaire {
    margin: 0 0 var(--espace-3);
    padding: var(--espace-3) var(--espace-4);
    border-radius: var(--rayon-controle);
    color: var(--conforme-encre);
    background: var(--conforme-fond);
    box-shadow: var(--ombre-levee);
    font-size: var(--taille-md);
}

.message-temporaire-erreur {
    color: var(--ecart-encre);
    background: var(--ecart-fond);
}

/* --- Authentification ------------------------------------------------------ */

.page-authentification {
    display: grid;
    min-height: 100vh;
    padding: var(--espace-6) var(--espace-4);
    place-items: center;
}

/*
 * La connexion est le point d'entrée de l'application : deux colonnes sur un
 * écran de bureau — ce que fait l'outil à gauche, le formulaire à droite — et
 * une seule sur téléphone, le formulaire en premier.
 */
.page-connexion {
    display: grid;
    min-height: 100vh;
    padding: var(--espace-6) var(--espace-4);
    place-items: center;
}

.grille-connexion {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 25rem);
    align-items: center;
    gap: var(--espace-8);
    width: min(70rem, 100%);
}

.presentation-connexion .marque {
    margin-bottom: var(--espace-5);
}

.titre-connexion {
    max-width: 18ch;
    margin: 0;
    font-family: var(--affichage-famille);
    /* Le plancher descend à 1,75 rem : sur un écran de 320 pixels, un titre en
       capitales de 2 rem occupait trois lignes et repoussait tout le reste. */
    font-size: clamp(1.75rem, 4vw, var(--taille-4xl));
    font-weight: 700;
    line-height: 1.08;
    /* Les capitales respirent : le resserrement qui sert un titre en bas de
       casse colle les lettres d'un titre tout en capitales. */
    letter-spacing: 0;
    text-wrap: balance;
}

/*
 * Un paragraphe de présentation vidé de son texte garde ses marges et creuse
 * un trou. Là où le contenu vient d'une variable, on ne peut pas le prévoir en
 * gabarit : la règle s'en charge.
 */
.chapeau-connexion:empty {
    display: none;
}

.chapeau-connexion {
    max-width: 52ch;
    margin: var(--espace-4) 0 var(--espace-6);
    color: var(--neutre-600);
    font-size: var(--taille-lg);
    line-height: var(--interligne-lecture);
}

.titre-formulaire {
    margin: 0;
    font-family: var(--affichage-famille);
    font-size: var(--taille-2xl);
    font-weight: 700;
    letter-spacing: var(--lettrage-serre);
}

/*
 * L'échec d'authentification n'apologise pas et ne reste pas vague : il occupe
 * un bloc plein plutôt qu'une barre latérale colorée, que le plancher de
 * finition écarte au-delà d'un pixel.
 */
.alerte-authentification {
    margin: var(--espace-5) 0 0;
    padding: var(--espace-3) var(--espace-4);
    border-radius: var(--rayon-controle);
    color: var(--ecart-encre);
    background: var(--ecart-fond);
    font-size: var(--taille-md);
}

.panneau-authentification {
    width: min(100%, 27rem);
    padding: var(--espace-6);
    border-radius: var(--rayon-carte);
    background: var(--neutre-000);
    box-shadow: var(--ombre-levee);
}

.marque-authentification {
    margin: 0 0 var(--espace-3);
    color: var(--vert-porteo);
    font-family: var(--affichage-famille);
    font-size: var(--taille-sm);
    font-weight: 700;
    letter-spacing: var(--lettrage-large);
    text-transform: uppercase;
}

.panneau-authentification h1 {
    margin: 0;
    font-family: var(--affichage-famille);
    font-size: var(--taille-4xl);
    font-weight: 700;
    line-height: var(--interligne-compact);
    letter-spacing: var(--lettrage-serre);
}

.introduction-authentification {
    margin: var(--espace-3) 0 var(--espace-5);
    max-width: 34ch;
    color: var(--neutre-500);
    font-size: var(--taille-md);
    line-height: var(--interligne-normal);
}

.panneau-authentification form > div {
    margin-top: var(--espace-4);
}

.panneau-authentification label {
    display: block;
    margin-bottom: var(--espace-2);
    font-size: var(--taille-md);
    font-weight: 600;
}

.panneau-authentification input {
    width: 100%;
    padding: var(--espace-3);
    border: 1px solid var(--neutre-300);
    border-radius: var(--rayon-controle);
    font: inherit;
    font-size: var(--taille-md);
    transition:
        border-color var(--duree-normale) var(--courbe-sortie),
        box-shadow var(--duree-normale) var(--courbe-sortie);
}

.panneau-authentification input:hover {
    border-color: var(--neutre-400);
}

.panneau-authentification input:focus {
    border-color: var(--vert-porteo);
    outline: none;
    box-shadow: 0 0 0 3px var(--vert-porteo-clair);
}

.panneau-authentification .form-help {
    margin: var(--espace-2) 0 0;
    color: var(--neutre-500);
    font-size: var(--taille-sm);
    line-height: var(--interligne-normal);
}

.panneau-authentification .form-error-message,
.panneau-authentification ul {
    color: var(--ecart-encre);
    font-size: var(--taille-sm);
}

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

.bouton-principal {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin-top: var(--espace-5);
    padding: var(--espace-3) var(--espace-4);
    border: 0;
    border-radius: var(--rayon-controle);
    color: var(--neutre-000);
    background: var(--vert-porteo);
    font: inherit;
    font-size: var(--taille-md);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition:
        background-color var(--duree-normale) var(--courbe-sortie),
        transform var(--duree-immediate) var(--courbe-sortie);
}

.bouton-principal:hover {
    background: #085746;
}

/* L'enfoncement se voit : c'est la seule confirmation qu'un clic a été pris
   avant que la page ne réponde. */
.bouton-principal:active {
    transform: translateY(1px);
}

.lien-bouton {
    text-decoration: none;
}

/*
 * « Mot de passe oublié ? » se touche au doigt, souvent en marchant, sur un
 * téléphone tenu d'une main. Le texte fait 23 pixels de haut ; la zone
 * cliquable en fait 44, minimum admis pour qu'un doigt l'atteigne sans viser.
 * Le lien reste un lien — c'est sa zone d'atteinte qui grandit, pas son poids
 * visuel.
 */
.lien-retour {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    margin-top: var(--espace-3);
    color: var(--vert-porteo);
    font-size: var(--taille-md);
    font-weight: 600;
}

.bouton-secondaire {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: var(--espace-2) var(--espace-4);
    border: 1px solid var(--neutre-300);
    border-radius: var(--rayon-controle);
    color: var(--neutre-800);
    background: var(--neutre-000);
    font: inherit;
    font-size: var(--taille-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color var(--duree-normale) var(--courbe-sortie),
        background-color var(--duree-normale) var(--courbe-sortie);
}

.bouton-secondaire:hover {
    border-color: var(--vert-porteo);
    color: var(--vert-porteo);
}

.formulaire-deconnexion {
    margin: 0;
}

/* --- Page d'accueil -------------------------------------------------------- */

.conteneur-page {
    width: min(72rem, calc(100% - 2.5rem));
    margin: 0 auto;
    padding: var(--espace-6) 0 var(--espace-8);
}

.barre-superieure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
    margin-bottom: var(--espace-9);
}

.actions-barre-superieure {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
}

.marque {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    font-family: var(--affichage-famille);
    font-size: var(--taille-xl);
    font-weight: 700;
    letter-spacing: var(--lettrage-serre);
}

.symbole-marque {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: var(--rayon-controle);
    color: var(--neutre-000);
    background: var(--vert-porteo);
    font-size: var(--taille-lg);
}

/*
 * Le titre porte la thèse de la page, et la police condensée est celle des
 * panneaux de chantier : lisible de loin, dans une largeur contrainte.
 * `clamp` est légitime ici — une page de marque se regarde sur tout, du
 * téléphone au vidéoprojecteur — là où les panneaux gardent une échelle fixe.
 */
.presentation {
    max-width: 26ch;
    margin-bottom: var(--espace-7);
}

h1 {
    margin: 0;
    font-family: var(--affichage-famille);
    font-size: clamp(2.5rem, 6vw, var(--taille-5xl));
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--lettrage-tres-serre);
    text-wrap: balance;
}

.chapeau {
    /* 52ch d'unité « zéro » donnent environ 68 caractères de prose réelle,
       dans la fourchette de 65 à 75 au-delà de laquelle l'œil perd sa ligne en
       revenant à la marge. Mesuré, pas estimé. */
    max-width: 52ch;
    margin: var(--espace-5) 0 0;
    color: var(--neutre-600);
    font-size: var(--taille-xl);
    line-height: var(--interligne-lecture);
}

/* --- Le diagramme de l'année ----------------------------------------------- */

/*
 * La signature de l'application, en version publique : douze processus, douze
 * mois. C'est une GÉOMÉTRIE, pas une donnée — aucune valeur réelle ne
 * s'affiche sur une page ouverte à tous, et rien ici ne prétend en être une.
 * Elle montre ce que l'outil organise, ce qu'aucune phrase ne fait aussi vite.
 */
.diagramme-annee {
    padding: var(--espace-5);
    border-radius: var(--rayon-carte);
    background: var(--neutre-000);
    box-shadow: var(--ombre-posee);
}

.diagramme-annee-titre {
    margin: 0 0 var(--espace-4);
    color: var(--neutre-500);
    font-size: var(--taille-xs);
    font-weight: 600;
    letter-spacing: var(--lettrage-large);
    text-transform: uppercase;
}

.diagramme-ligne {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    align-items: center;
    gap: var(--espace-3);
    margin-bottom: 3px;
}

.diagramme-code {
    color: var(--neutre-600);
    font-family: var(--donnee-famille);
    font-size: var(--taille-2xs);
}

.diagramme-mois {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
}

.diagramme-cellule {
    height: 0.7rem;
    border-radius: 2px;
    background: var(--neutre-100);
}

.diagramme-cellule[data-etat="conforme"] {
    background: var(--conforme-aplat);
}

.diagramme-cellule[data-etat="ecart"] {
    background: var(--ecart-aplat);
}

.diagramme-cellule[data-etat="ferme"] {
    background: repeating-linear-gradient(
        135deg,
        var(--neutre-100) 0 3px,
        var(--neutre-200) 3px 6px
    );
}

.diagramme-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2) var(--espace-5);
    margin: var(--espace-5) 0 0;
    color: var(--neutre-500);
    font-size: var(--taille-2xs);
}

.diagramme-legende span {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-2);
}

.diagramme-puce {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
}

.mise-en-page-accueil {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--espace-8);
}

.pied-page {
    margin-top: var(--espace-8);
    color: var(--neutre-500);
    font-size: var(--taille-sm);
}

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

@media (max-width: 60rem) {
    .mise-en-page-accueil {
        grid-template-columns: 1fr;
        gap: var(--espace-6);
    }

    /* Sur un écran étroit, le formulaire passe devant : quelqu'un qui arrive
       ici vient se connecter, pas lire une présentation. */
    .grille-connexion {
        grid-template-columns: 1fr;
        gap: var(--espace-6);
    }

    .presentation-connexion {
        order: 2;
    }

    .panneau-authentification {
        order: 1;
        width: 100%;
    }

    .barre-superieure {
        margin-bottom: var(--espace-6);
    }

    .presentation {
        max-width: none;
    }
}

/*
 * Le téléphone en paysage, et lui seul : la largeur ne manque pas, la HAUTEUR
 * si. Sur 375 pixels de haut, le bouton « Se connecter » commençait à 371 — il
 * fallait faire défiler pour se connecter, sur l'écran dont c'est l'unique
 * objet.
 *
 * La contrainte porte donc sur la hauteur, pas sur la largeur : un même
 * téléphone bascule de l'un à l'autre d'un quart de tour, et une règle en
 * largeur n'aurait rien vu.
 */
@media (max-height: 32rem) {
    .page-connexion {
        padding: var(--espace-4) var(--espace-4);
    }

    .panneau-authentification {
        padding: var(--espace-4);
    }

    /* La phrase d'accueil est la première à céder : elle explique ce que
       l'écran montre déjà. Les libellés des champs, eux, restent. */
    .page-connexion .introduction-authentification {
        display: none;
    }

    .page-connexion .panneau-authentification form > div {
        margin-top: var(--espace-3);
    }

    .page-connexion .bouton-principal {
        margin-top: var(--espace-4);
    }

    .titre-formulaire {
        font-size: var(--taille-xl);
    }
}

@media (max-width: 40rem) {
    .conteneur-page {
        width: min(100% - 1.5rem, 40rem);
        padding-top: var(--espace-4);
    }

    .barre-superieure {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagramme-ligne {
        grid-template-columns: 2.75rem 1fr;
        gap: var(--espace-2);
    }
}