/* ──────────────────────────────────────────────────────────────
   « 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 Piscines VP.

   Relevé sur piscinesvp.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 {
    /* Les trois bleus de la marque. */
    --vp-clair: #00AAFF;
    --vp: #0077F9;
    --vp-fonce: #0047F7;
    --vp-encre: #002E9E;

    --noir: #0B1220;
    --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); 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(0, 119, 249, .8);
}
.btn:hover { background: var(--vp-fonce); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; box-shadow: none; cursor: default; }

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

/* 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);
}

/* 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;
}

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

/* ── 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; }