/*
 * Feuille de style du parcours public — VIP Booking.
 *
 * ⚠️ Écrite À LA MAIN, volontairement : rien à compiler au déploiement. Node
 * *peut* s'installer sur Plesk ; le choix n'est pas « on ne peut pas », c'est
 * « une étape de moins qui casse ». Si l'on passe un jour à Tailwind, suivre
 * le motif de levizio : compiler en session et committer `public/build/`.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * COULEURS — recopiées de `vipgpi-core/resources/css/vip-tokens.css`
 *
 * Décision du 2026-08-14 : la maquette hi-fi donne la mise en page et la
 * structure, mais les couleurs viennent des tokens de l'écosystème. La
 * maquette proposait sa propre palette (fond #04182e, or #efd37a) ; aucune
 * de ses valeurs ne coïncidait avec les tokens, et s'en écarter aurait fait
 * de la réservation la seule page qui ne ressemble pas au reste.
 *
 * ⚠️ Ces valeurs sont une COPIE. La source de vérité est `vip-tokens.css`
 * dans `vipgpi-core` ; ce dépôt ne dépend pas du paquet, donc la copie est
 * assumée. La resynchroniser si les tokens changent là-bas.
 *
 * TYPOGRAPHIE — pile système, aucune requête externe.
 * `vip-tokens.css` ne contient AUCUNE typographie ; `config/vipgpi-core.php`
 * nomme Montserrat + Open Sans, mais aucun fichier de police n'existe nulle
 * part dans l'écosystème et aucune application ne les utilise. Les apps
 * réelles emploient des serifs pour les titres (Newsreader, Cinzel,
 * Cormorant Garamond) — c'est cet usage-là qu'on suit, en police système.
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {
    /* Marque */
    --vip-navy: #0e1030;
    --vip-navy-dark: #0b0d26;
    --vip-gold: #c9a227;
    --vip-gold-hover: #b8901c;

    /* Surfaces (mode clair) */
    --vip-bg: #faf9f5;
    --vip-surface: #ffffff;
    --vip-surface-alt: #f0ede5;
    --vip-border: #e7e3d8;

    /* Texte (mode clair) */
    --vip-text: #1a2744;
    --vip-text-muted: #6b6455;
    --vip-text-inverse: #f5f3ec;

    /* États */
    --vip-success: #1a7f4b;
    --vip-warning: #b07a1e;
    --vip-danger: #a23b3b;
}

.dark {
    --vip-bg: #0b0d26;
    --vip-surface: #14163a;
    --vip-surface-alt: #1b1e47;
    --vip-border: #2b2e5c;

    --vip-text: #eef0fa;
    --vip-text-muted: #a3a8c9;
    --vip-text-inverse: #1a2744;

    --vip-success: #4cc98a;
    --vip-warning: #e0a94f;
    --vip-danger: #e07777;
}

/* Dérivés propres à ce parcours — exprimés à partir des tokens, jamais en dur. */
:root {
    --titre: Georgia, 'Times New Roman', 'Nimbus Roman', serif;
    --corps: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

    --rayon: 4px;
    --rayon-carte: 6px;
    --ombre: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .28);
    --enveloppe: 1120px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    background: var(--vip-bg);
    color: var(--vip-text);
    font-family: var(--corps);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/*
 * Le halo de la maquette, reformulé sur les tokens : un dégradé radial qui
 * éclaircit le haut de la page. `--vip-surface-alt` fait le point clair,
 * `--vip-bg` le fond.
 */
.page {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 22%,
                var(--vip-surface-alt), var(--vip-bg) 60%, var(--vip-navy-dark));
}

.enveloppe {
    max-width: var(--enveloppe);
    margin: 0 auto;
    padding: 28px 24px 72px;
    position: relative;
    z-index: 1;
}

a { color: var(--vip-gold); text-decoration: none; }
a:hover { color: var(--vip-gold-hover); }

h1 { font: 400 clamp(26px, 4vw, 40px)/1.12 var(--titre); margin: 0 0 8px; }
h2 { font: 400 clamp(19px, 2.4vw, 27px)/1.2 var(--titre); margin: 0 0 14px; }
h3 { font: 400 19px var(--titre); margin: 0 0 8px; }

.doux { color: var(--vip-text-muted); }
.petit { font-size: .875rem; }

/* --- En-tête ---------------------------------------------------------- */

.bandeau {
    min-height: 84px;
    display: flex;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--vip-border);
    background: color-mix(in srgb, var(--vip-navy-dark) 62%, transparent);
    position: relative;
    z-index: 5;
}

.bandeau .enveloppe {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    width: 100%;
}

/*
 * ⚠️ Le logo est la version TRANSPARENTE à texte blanc, livrée dans la
 * maquette. La version à fond crème ne convient pas ici : son texte est en
 * navy, donc invisible sur ce fond, et son fond opaque découperait un
 * rectangle clair.
 */
.bandeau .logo {
    width: clamp(170px, 24vw, 222px);
    height: auto;
    display: block;
}

.bandeau .contact {
    text-align: right;
    font-size: .82rem;
    color: var(--vip-text-muted);
    line-height: 1.5;
}

.bandeau .contact a { color: var(--vip-text-muted); }
.bandeau .contact a:hover { color: var(--vip-gold); }

/* --- Fil de progression (3 étapes) ------------------------------------ */

.progression {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    flex-wrap: wrap;
}

.progression li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vip-text-muted);
}

.progression li + li::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--vip-border);
    margin-right: 4px;
}

.progression .puce {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--vip-border);
    display: grid;
    place-items: center;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.progression .courante { color: var(--vip-gold); }
.progression .courante .puce {
    border-color: var(--vip-gold);
    color: var(--vip-navy-dark);
    background: var(--vip-gold);
    font-weight: 700;
}

.progression .faite { color: var(--vip-text); }
.progression .faite .puce { border-color: var(--vip-gold); color: var(--vip-gold); }

/* --- Cartes ----------------------------------------------------------- */

.carte {
    background: color-mix(in srgb, var(--vip-surface) 92%, transparent);
    border: 1px solid var(--vip-border);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre);
    padding: 24px;
    margin-bottom: 18px;
}

.colonnes {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.colonnes > .principal { flex: 1 1 420px; min-width: 0; }
.colonnes > .lateral { flex: 1 1 280px; min-width: 0; }

/* --- Tuiles (types de rendez-vous, conseillers) ------------------------ */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li + li { margin-top: 12px; }

.tuile {
    display: block;
    padding: 18px 20px;
    background: color-mix(in srgb, var(--vip-surface) 92%, transparent);
    border: 1px solid var(--vip-border);
    border-left: 3px solid var(--vip-gold);
    border-radius: var(--rayon-carte);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--ombre);
    transition: transform .12s ease, border-color .12s ease;
}

.tuile:hover,
.tuile:focus-visible {
    transform: translateY(-1px);
    border-color: var(--vip-gold);
    color: inherit;
}

.tuile .titre { font: 400 1.12rem var(--titre); display: block; }
.tuile .meta { color: var(--vip-text-muted); font-size: .85rem; margin-top: 5px; display: block; }

/* --- Calendrier mensuel ----------------------------------------------- */

/*
 * ⚠️ Le calendrier est PLAFONNÉ en largeur, pas ses cases.
 *
 * Les cases sont carrées (`aspect-ratio`) et remplissent leur colonne : leur
 * côté vaut donc la largeur de la grille divisée par sept. Sur une colonne
 * unique — tablette, ou l'écran de report qui n'a pas de panneau latéral —
 * cette largeur atteint 1000 px, et le mois s'affiche en cases de 110 px sur
 * 800 px de haut, dont l'essentiel en cases grisées. Mesuré au rendu à 768 px.
 *
 * Plafonner la HAUTEUR des cases était la correction évidente ; elle décolle
 * les cases de leur colonne et disloque l'alignement. C'est la grille qu'il
 * faut borner : les cases restent carrées et pleines à toutes les tailles.
 */
.navigation-mois,
.grille-mois {
    max-width: 600px;
    margin-inline: auto;
}

.navigation-mois {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.navigation-mois .mois {
    font: 400 19px var(--titre);
    margin: 0;
    min-width: 150px;
    text-align: center;
    text-transform: capitalize;
}

.fleche {
    border: 0;
    background: transparent;
    color: var(--vip-gold);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    text-decoration: none;
}

.fleche:hover { color: var(--vip-gold-hover); }

.fleche[aria-disabled="true"] {
    color: var(--vip-text-muted);
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.grille-mois {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.grille-mois .jour-semaine {
    text-align: center;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vip-gold);
    padding: 4px 2px;
}

.grille-mois .jour {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border: 1px solid var(--vip-border);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--vip-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.grille-mois .jour:hover,
.grille-mois .jour:focus-visible {
    border-color: var(--vip-gold);
    color: var(--vip-gold);
}

/* Un jour sans disponibilité reste visible mais inerte : le masquer ferait
   croire à un trou dans le calendrier. */
.grille-mois .jour.vide {
    color: var(--vip-text-muted);
    opacity: .4;
    cursor: not-allowed;
    pointer-events: none;
    border-color: transparent;
}

.grille-mois .jour.choisi {
    background: var(--vip-gold);
    border-color: var(--vip-gold);
    color: var(--vip-navy-dark);
    font-weight: 700;
}

.grille-mois .blanc { visibility: hidden; }

/* --- Créneaux --------------------------------------------------------- */

.bloc-creneaux {
    border-top: 1px solid var(--vip-border);
    padding-top: 16px;
    margin-top: 16px;
}

.creneaux {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
}

.creneau {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border: 1px solid var(--vip-gold);
    border-radius: var(--rayon);
    background: transparent;
    color: var(--vip-text);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.creneau:hover,
.creneau:focus-visible {
    background: var(--vip-gold);
    color: var(--vip-navy-dark);
}

.creneau:hover svg, .creneau:focus-visible svg { stroke: var(--vip-navy-dark); }

.creneau svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: var(--vip-gold);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.creneau .places {
    display: block;
    font-size: .68rem;
    opacity: .8;
}

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

.bouton {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid var(--vip-gold);
    border-radius: var(--rayon);
    background: var(--vip-gold);
    color: var(--vip-navy-dark);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bouton:hover { background: var(--vip-gold-hover); border-color: var(--vip-gold-hover); color: var(--vip-navy-dark); }

.bouton.fantome {
    background: transparent;
    color: var(--vip-text);
    border-color: var(--vip-border);
}

.bouton.fantome:hover { border-color: var(--vip-gold); color: var(--vip-gold); background: transparent; }

.bouton.danger { background: transparent; color: var(--vip-danger); border-color: var(--vip-danger); }
.bouton.danger:hover { background: var(--vip-danger); color: var(--vip-text-inverse); border-color: var(--vip-danger); }

.bouton[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Formulaire ------------------------------------------------------- */

.champ { margin-bottom: 16px; }

.champ label {
    display: block;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .02em;
    margin-bottom: 6px;
}

.champ input,
.champ textarea,
.champ select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--vip-border);
    border-radius: var(--rayon);
    font: inherit;
    background: var(--vip-surface-alt);
    color: var(--vip-text);
}

.champ input::placeholder, .champ textarea::placeholder { color: var(--vip-text-muted); }

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
    outline: 2px solid var(--vip-gold);
    outline-offset: 1px;
    border-color: var(--vip-gold);
}

.champ .aide { color: var(--vip-text-muted); font-size: .8rem; margin-top: 4px; }
.champ .erreur-champ { color: var(--vip-danger); font-size: .82rem; margin-top: 4px; }

/* Pot de miel : invisible pour l'humain, atteignable par un automate. */
.pot-de-miel {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

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

.message {
    padding: 13px 16px;
    border-radius: var(--rayon);
    margin-bottom: 18px;
    border: 1px solid;
    background: var(--vip-surface);
}

.message.erreur { border-color: var(--vip-danger); color: var(--vip-danger); }
.message.succes { border-color: var(--vip-success); color: var(--vip-success); }
.message.info { border-color: var(--vip-border); color: var(--vip-text-muted); }

/* --- Récapitulatif ---------------------------------------------------- */

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

.recap li {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--vip-border);
}

.recap li:last-child { border-bottom: 0; }
.recap .etiquette { color: var(--vip-text-muted); min-width: 92px; font-size: .85rem; }
.recap .valeur { font-weight: 600; }

.filet-or {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--vip-gold), transparent);
    margin-bottom: 22px;
}

/* --- Pied ------------------------------------------------------------- */

.pied {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid var(--vip-border);
    color: var(--vip-text-muted);
    font-size: .82rem;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pied a { color: var(--vip-text-muted); }
.pied a:hover { color: var(--vip-gold); }

/* --- Rangées de boutons ----------------------------------------------- */

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
}

/* ======================================================================
 * VARIANTE MOBILE
 *
 * ⚠️ La maquette hi-fi ne contient AUCUNE règle de média : elle est dessinée
 * pour un écran large uniquement. Ce qui suit ne la transpose donc pas, ça la
 * prolonge — en gardant sa structure (bandeau, fil de progression, grille,
 * cartes) et en ne touchant qu'aux dimensions.
 *
 * C'est le cas d'usage MAJORITAIRE : ces liens se partagent par courriel et
 * par message, et s'ouvrent sur un téléphone.
 * ====================================================================== */

/*
 * ⚠️ `100dvh` APRÈS `100vh`, pas à la place.
 *
 * Sur Safari iOS, `100vh` vaut la hauteur SANS la barre d'adresse : le fond
 * dépasse le viewport et la page se met à défiler de quelques dizaines de
 * pixels alors qu'elle tient à l'écran. `dvh` suit la hauteur réellement
 * visible. L'ordre compte : un navigateur qui ignore `dvh` garde `vh`.
 */
body, .page { min-height: 100dvh; }

/* Tablette et petits portables : les deux colonnes ne tiennent plus. */
@media (max-width: 900px) {
    .colonnes { flex-direction: column; }
    .colonnes > .principal,
    .colonnes > .lateral { flex: 1 1 auto; width: 100%; }
}

@media (max-width: 640px) {
    .enveloppe { padding: 18px 12px 48px; }
    .carte { padding: 16px 13px; }
    .bandeau { padding: 10px 12px; min-height: 66px; }

    h1 { margin-bottom: 6px; }
    .filet-or { margin-bottom: 16px; }

    /*
     * ⚠️ Le TÉLÉPHONE reste affiché — c'est l'adresse courriel qui disparaît.
     * Ce bloc masquait les deux jusqu'au 2026-08-14 : cacher un numéro à
     * composer sur l'appareil qui sait le composer, alors qu'il est le recours
     * de qui ne trouve aucune date, est exactement l'inverse de ce qu'il faut.
     * Le pied de page les porte tous les deux, mais tout en bas.
     */
    .bandeau .contact { font-size: .78rem; text-align: right; }
    .bandeau .contact br,
    .bandeau .contact a[href^="mailto:"] { display: none; }
    .bandeau .contact a[href^="tel:"] { color: var(--vip-gold); white-space: nowrap; }

    /* Le fil de progression tient sur une ligne : traits raccourcis. */
    .progression { gap: 6px; margin-bottom: 20px; }
    .progression li { font-size: .66rem; letter-spacing: .04em; gap: 6px; }
    .progression li + li::before { width: 12px; margin-right: 2px; }
    .progression .puce { width: 20px; height: 20px; font-size: .68rem; }

    /*
     * La grille reste à SEPT colonnes — un calendrier qui n'a pas la forme
     * d'un calendrier ne se lit plus.
     *
     * ⚠️ `aspect-ratio` cède la place à `min-height`. À 7 colonnes sur un
     * écran de 360 px, une case carrée fait ~40 px de côté : sous le seuil de
     * 44 px où une cible tactile commence à se rater. La largeur est imposée
     * par la grille, la hauteur non — c'est donc elle qu'on garantit.
     */
    .grille-mois { gap: 4px; }
    .grille-mois .jour {
        aspect-ratio: auto;
        min-height: 44px;
    }
    .grille-mois .jour-semaine { font-size: .6rem; letter-spacing: .06em; padding: 2px 0; }

    .navigation-mois { gap: 6px; }
    .navigation-mois .mois { min-width: 0; flex: 1 1 auto; font-size: 17px; }

    /*
     * La flèche gagne sa cible tactile de 44 px SANS grossir le chevron : le
     * carré vient du conteneur, le glyphe reste centré dedans. Mesuré au
     * rendu — le seul `padding` la laissait à 29 × 38 px.
     */
    .fleche {
        display: inline-grid;
        place-items: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .creneaux { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
    .creneau { padding: 13px 6px; }

    /* Empilés et pleine largeur : « Confirmer le rendez-vous » et « Retour »
       ne tiennent pas côte à côte sous 400 px. */
    .actions { flex-direction: column; align-items: stretch; }
    .actions .bouton { width: 100%; text-align: center; }

    .tuile { padding: 15px 16px; }
    .pied { flex-direction: column; gap: 6px; }
}

/* Petits téléphones (iPhone SE et compagnie). */
@media (max-width: 380px) {
    .bandeau .logo { width: 150px; }
    .bandeau .contact { font-size: .74rem; }

    /* Deux colonnes de créneaux plutôt que trois serrées. */
    .creneaux { grid-template-columns: repeat(2, 1fr); }

    /*
     * L'étiquette passe AU-DESSUS de la valeur. Côte à côte, une étiquette de
     * 92 px laisse une colonne trop étroite : une adresse ou un « jeudi
     * 18 septembre 2026, 14:00 » s'y casse sur quatre lignes.
     */
    .recap li { flex-direction: column; gap: 2px; padding: 8px 0; }
    .recap .etiquette { min-width: 0; }
}