/* ──────────────────────────────────────────────────────────────
   « HIDDEN » VEUT DIRE CACHÉ. TOUJOURS.

   Vincent, 31 août, capture d'écran à l'appui : « le dimensionnement
   ici est toujours pas réglé ». Chaque modèle de la fenêtre s'affichait
   encore au complet — quantité, note, coûtant, spécifications — alors
   que le gabarit écrit bien « hidden » sur le volet.

   Le défaut n'était pas dans le gabarit, il était ici. Le navigateur
   cache [hidden] avec « display: none », mais c'est une règle de sa
   feuille à lui : la MOINDRE classe qui déclare un display la bat.
   « .pan-l-plus { display: grid } » suffisait, et rien ne le signalait
   — pas d'erreur, pas de console, juste une fenêtre trois fois trop
   longue devant un client.

   Cette règle-ci referme le piège pour toute la feuille, une fois. Elle
   porte !important parce que c'est exactement son travail : gagner
   contre n'importe quelle classe qui déclarerait un display, y compris
   celles qui n'existent pas encore.

   Vérifiée par outils/verifier-que-cache-veut-dire-cache.py
   ────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* Le socle visuel de Gestion Lab.

   Relevé sur gestionlabgl.com : Poppins pour tout ce qui affirme, Open Sans
   pour ce qui se lit, le bleu #0077F9, et des boutons en pilule, en
   majuscules, très gras. C'est une identité affirmée — on la reprend
   telle quelle plutôt que d'en inventer une deuxième.

   Ce fichier est chargé par les trois interfaces : le formulaire public,
   le portail client et l'espace équipe. Ce qui les distingue vient
   ensuite; ce qui les unit est ici. */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
    /* Sans ça, un utilisateur en thème sombre reçoit des menus déroulants
       et des barres de défilement sombres sur nos fonds clairs. */
    color-scheme: light;

    /* Les trois bleus de la marque. */
    --vp-clair: #FAD688;
    --vp: #EEB738;
    --vp-fonce: #C9951B;
    --vp-encre: #070708;

    /* LE BLEU QUI PORTE DU TEXTE — D433.
       #0077F9 est le bleu de la marque, et il le reste : logo, dégradés,
       bordures, fonds de sélection. Mais blanc sur #0077F9 donne 4,19:1
       et #0077F9 sur blanc aussi — sous le seuil lisible de 4,5:1, et
       nos écrans se lisent dehors, en plein soleil.

       Dès qu'il y a du TEXTE, c'est ce jeton-ci : 6,47:1.
       La marque ne change pas de couleur; elle change d'emploi. */
    --vp-texte: #111111;

    --noir: #111111;
    --ink: #111827;
    --ink-2: #374151;
    --ink-3: #6B7280;

    --bord: #D1D5DB;
    --bord-doux: #E5EAF2;
    --bord-carte: #F1F4F9;
    --champ: #F8FAFC;
    --paper: #FFFFFF;

    --ok: #0B7A54;
    --ok-fond: #E6F6EF;
    --alerte: #C62828;
    --alerte-fond: #FDECEA;
    --attention: #8A5A00;
    --attention-fond: #FDF4E3;

    --titre: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --corps: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --r: 12px;
    --r-carte: 22px;
    --pilule: 50px;

    --ombre: 0 1px 2px rgba(11, 18, 32, .04), 0 18px 40px -18px rgba(11, 18, 32, .22);
}

/* ── Les primitives partagées ──────────────────────────── */

.vp-titre {
    font-family: var(--titre);
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Le bouton de la marque : pilule, majuscules, très gras.
   C'est la signature la plus reconnaissable du site. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 13px 30px;
    border: 0; border-radius: var(--pilule);
    background: var(--vp-texte); color: #fff;
    font-family: var(--titre);
    font-size: 12.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: background .16s, transform .07s, box-shadow .16s;
    box-shadow: 0 8px 20px -10px rgba(17, 17, 17, .55);
}
.btn:hover { background: var(--vp-encre); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; box-shadow: none; cursor: default; }

/* LE ROUGE DIT « CELLE-LÀ NE REVIENT PAS ».  (D437)
   Un bouton bleu au bout d'une question qui demande « Supprimer ? » fait
   exactement ce qu'on ne veut pas : il ressemble au bouton qu'on presse
   cent fois par jour pour continuer. Le rouge est la convention de toutes
   les applications que l'équipe utilise déjà — ce n'est pas une décoration,
   c'est le dernier signal avant un geste qui ne se défait pas. */
.btn.danger { background: var(--alerte); box-shadow: 0 8px 20px -10px rgba(198, 40, 40, .8); }
.btn.danger:hover { background: #9E1C1C; }

.btn.ghost {
    background: transparent; color: var(--vp-texte);
    border: 1.5px solid var(--bord); box-shadow: none;
}
.btn.ghost:hover { background: var(--champ); border-color: var(--vp-texte); color: var(--vp-encre); }

/* L'étiquette en majuscules espacées, reprise du site. */
.vp-eyebrow {
    font-family: var(--titre);
    font-size: 11px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--vp-texte);
}

/* Le monogramme, quand le vrai logo n'est pas encore déposé. */
.mark {
    width: 36px; height: 36px; border-radius: 11px;
    background: linear-gradient(135deg, var(--vp-clair), var(--vp-fonce));
    color: #fff; display: grid; place-items: center;
    font-family: var(--titre); font-weight: 800; font-size: 13px; letter-spacing: -.02em;
}

/* ── LA FENÊTRE QUI DEMANDE — D437 ───────────────────────────
   Elle remplace `confirm()` sur les vingt-neuf gestes qu'on ne peut pas
   défaire. Un <dialog> natif : le focus y est piégé, Échap ferme, le fond
   devient inerte — rien de tout ça n'est écrit à la main.

   Elle vit dans le socle parce qu'elle n'appartient à aucune interface :
   la même question, posée de la même façon, partout. */
dialog.vp-demande {
    width: min(420px, calc(100vw - 32px));
    padding: 24px 24px 20px;
    border: 0;
    border-radius: 18px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--corps);
    box-shadow: 0 24px 60px -20px rgba(11, 18, 32, .45);
}
dialog.vp-demande::backdrop {
    background: rgba(11, 18, 32, .42);
}
.vp-demande-p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-wrap: pretty;
}
.vp-demande-gestes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

/* Sur un téléphone, la question se pose EN BAS : c'est là qu'est le pouce,
   et deux boutons au milieu de l'écran se touchent en tendant la main. */
@media (max-width: 520px) {
    dialog.vp-demande {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: 20px 20px 0 0;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    .vp-demande-gestes { flex-direction: column-reverse; }
    .vp-demande-gestes .btn { width: 100%; }
}

/* Une image ne déborde jamais de sa colonne, et garde ses proportions.
   Aucune des cinq feuilles ne le posait : sur un mauvais réseau — celui
   d'un technicien — le contenu sautait pendant le chargement. (D435) */
img { max-width: 100%; height: auto; }

/* ── LE SAUT AU CONTENU — D433 ───────────────────────────────
   Le premier élément atteignable au clavier, sur les quatre interfaces.
   Sans lui, chaque page de l'espace équipe fait traverser toute la barre
   de sections avant d'arriver au contenu — à chaque page, toute la
   journée. Invisible à la souris, visible dès qu'on le touche au Tab. */
.saut-contenu {
    position: absolute; left: 8px; top: -80px; z-index: 9999;
    background: var(--paper); color: var(--vp-texte);
    padding: 11px 18px; border-radius: 10px;
    font-family: var(--corps); font-size: 14px; font-weight: 700;
    text-decoration: none; box-shadow: var(--ombre);
    transition: top .15s;
}
.saut-contenu:focus { top: 8px; }

/* Une étiquette que seul un lecteur d'écran voit. Elle existait dans
   equipe.css; le portail client et le formulaire n'y avaient pas droit. */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── L'ANNEAU DE FOCUS — D433 ────────────────────────────────
   Il vit ici, dans le socle, et pas dans chaque interface : le portail
   client et le formulaire en avaient un chacun, l'espace équipe — 8 226
   lignes et 76 écrans — n'en avait AUCUN. Toute une journée de travail
   au clavier sans jamais voir où on est.

   `:focus-visible` et non `:focus` : rien n'apparaît au clic de souris,
   tout apparaît au Tab. Les interfaces peuvent l'habiller par-dessus;
   elles ne peuvent plus l'oublier. */
:focus-visible {
    outline: 2px solid var(--vp-texte);
    outline-offset: 2px;
    border-radius: 4px;
}

/* En contraste élevé (Windows), `outline` est la SEULE marque qui
   survit : ni border-color ni box-shadow ne passent. */
@media (forced-colors: active) {
    :focus-visible { outline: 2px solid Highlight; }
}

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

/* ── D545 — UN ÉCRAN SE FOND DANS L'AUTRE ───────────────────

   Vincent, 16 septembre : « j'ai l'impression de rentrer dans un CRM au
   lieu de rentrer comme dans une application de Apple ou de Google ».

   Entre deux pages, le navigateur peint l'écran en BLANC. Une application
   ne fait jamais ça — et c'est presque tout l'écart entre les deux
   sensations. Trois lignes le corrigent, sans JavaScript, sans toucher
   une seule page : le navigateur garde l'image de l'écran qu'on quitte et
   la fond dans celui qui arrive.

   Un navigateur qui ne connaît pas la règle l'ignore et repeint en blanc,
   comme aujourd'hui. Rien ne dépend d'elle.

   LA COUPURE EST OBLIGATOIRE, ET ELLE NE PEUT PAS ÊTRE LA RÈGLE
   `* { animation: none }` CI-DESSUS : une transition de vue n'est pas
   l'animation d'un élément de la page, elle vit dans un arbre à part que
   ce sélecteur n'atteint pas. Il faut redire `navigation: none`. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ── Le symbole ─────────────────────────────────────────────
   `.mark` était un carré bleu portant les lettres « VP » : un
   provisoire honnête, en attendant le vrai logo. Il est arrivé.

   La règle vaut pour les trois interfaces d'un coup, parce
   qu'elles chargent toutes ce fichier. Le fond, le dégradé et la
   graisse du monogramme sautent — un logo qui porte déjà ses
   couleurs n'a pas besoin d'une pastille derrière lui. */

img.mark {
    background: none;
    border-radius: 0;
    box-shadow: none;
    width: auto;
    height: 34px;
    display: block;
    object-fit: contain;
}

img.mark.big { height: 56px; width: auto; }