/* =========================================================================
   By Zigzag — Composants réutilisables (boutons, header, footer, switch)
   ========================================================================= */

/* ---- Boutons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-family: "Oswald", sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn--primary {
    background-color: var(--c-accent);
    color: var(--c-accent-contrast);
}

.btn--primary:hover {
    background-color: var(--c-accent-hover);
    color: var(--c-accent-contrast);
}

.btn--ghost {
    background-color: transparent;
    color: var(--c-text);
    border-color: var(--c-border);
}

.btn--ghost:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.btn--lg {
    padding: 0.95rem 1.9rem;
    font-size: 1rem;
}

/* Bouton compact (contrôles de tableaux denses). */
.btn--sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}

.btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Bouton NATIVEMENT désactivé (espace client : « Déplacer »/« Annuler » quand
   le moteur a fermé l'action). Il reste VISIBLE — l'explication vit à côté,
   pas dans un title — et garde son relief de bouton pour qu'on comprenne que
   l'action existe, mais pas maintenant. Pas de pointer-events:none ici : le
   navigateur bloque déjà le clic, et le curseur « interdit » informe. */
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:disabled:hover {
    transform: none;
    border-color: var(--c-border);
    color: inherit;
}

/* ---- Header sticky ---- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(18, 18, 18, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    line-height: 1.05;
    color: var(--c-text);
}

.brand__text {
    display: flex;
    flex-direction: column;
}

/* Logo image du header — seul et agrandi depuis le lot 2 (le bloc texte
   ne s'affiche qu'en repli, sans logo uploadé). */
.brand__logo {
    display: block;
    height: 72px;
    width: auto;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Monogramme placeholder du logo (header, login, admin). */
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--c-accent);
    border-radius: 50%;
    font-family: "Oswald", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--c-accent);
    flex-shrink: 0;
}

.logo-mark--sm {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
}

.brand__name {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.brand__tag {
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-accent);
}

.main-nav {
    display: flex;
    gap: 1.5rem;
}

.main-nav a {
    color: var(--c-text);
    font-size: 0.92rem;
    font-weight: 500;
}

.main-nav a:hover {
    color: var(--c-accent);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Salutation du client connecté + formulaire de déconnexion (T2). */
.site-header__user {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

.site-header__logout {
    margin: 0;
}

/* ---- Footer ---- */
.site-footer {
    background-color: #0d0d0d;
    border-top: 1px solid var(--c-border);
    padding: 3rem 0 1.5rem;
    color: var(--c-text-muted);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.site-footer__brand {
    font-family: "Oswald", sans-serif;
    font-size: 1.3rem;
    color: var(--c-text);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.site-footer__col a {
    display: block;
    color: var(--c-text-muted);
    margin-bottom: 0.4rem;
}

.site-footer__col a:hover {
    color: var(--c-accent);
}

.site-footer__bottom {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--c-border);
    text-align: center;
    font-size: 0.85rem;
}

/* ---- Responsive header / footer ---- */
@media (max-width: 860px) {
    .main-nav {
        display: none; /* nav simplifiée en mobile pour la démo phase 1 */
    }
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }
}

/* BARRE D'ACTIONS QUI DÉBORDAIT, sur DEUX plages distinctes — le défaut ne se
   limitait pas au mobile. Une fois le client CONNECTÉ, la barre compte deux
   entrées de plus (« Bonjour X » et « Déconnexion ») et réclame 616 px :
     - à 390 px, elle demandait 486 px pour 331 px utiles ;
     - entre 862 px et ~1030 px, la nav principale vient de réapparaître
       (324 px) et le total dépasse encore la largeur disponible.
   Dans les deux cas TOUTE la page héritait d'un défilement horizontal.

   On retire les deux entrées qui font DOUBLE EMPLOI, plutôt que de rétrécir
   le reste jusqu'à l'illisible ou de repousser la nav :
     - « Bonjour X » : la page le redit en titre, juste dessous ;
     - « Accueil » : le logo, à gauche, EST déjà ce lien.
   Elles reviennent au-delà, où la place existe réellement. */
@media (max-width: 1040px) {
    .site-header__user,
    .site-header__accueil {
        display: none;
    }
}

@media (max-width: 560px) {
    .brand__tag { display: none; }
    .site-header__actions .btn--primary { display: none; }
    /* Logo réduit pour laisser la place aux actions (header 72px, cf. themes.css). */
    .brand__logo { height: 56px; }

    .site-header__actions {
        gap: 0.5rem;
    }

    /* Libellés sur UNE ligne : à la taille normale, « Mes rendez-vous » se
       cassait en trois lignes et étirait la hauteur de l'en-tête. */
    .site-header__actions .btn {
        padding: 0.45rem 0.75rem;
        font-size: 0.78rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }
}

/* ---- Messages flash ---- */
.flash {
    margin: 1.25rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--c-border);
    background-color: var(--c-bg-elev);
    font-size: 0.95rem;
}

.flash--warning {
    border-color: rgba(201, 161, 74, 0.6);
    color: var(--c-accent-hover, var(--c-accent));
}

.flash--success {
    border-color: rgba(90, 160, 90, 0.6);
    color: #8fce8f;
}

/* AVERTISSEMENT ≠ REFUS (lots O10/O12).
   Le moteur renvoie des `avertissements[]` sur des opérations qui ont RÉUSSI :
   « ce créneau chevauche un rendez-vous », « hors des horaires d'ouverture »,
   « ce rendez-vous est déjà honoré, son prix pratiqué passe de X € à Y € ». Le board
   les rendait avec l'étiquette 'warning', celle de ses refus — un constat sur
   une écriture aboutie avait donc exactement l'aspect d'un échec, et le gérant
   ne pouvait pas savoir si son rendez-vous existait.
   D'où une étiquette et un style à part : cadre neutre, pas de teinte d'alerte,
   et un préfixe « À savoir » qui dit en un mot que rien n'a échoué. */
.flash--avertissement {
    border-color: var(--c-border);
    border-left: 3px solid var(--c-accent);
    color: var(--c-text-muted);
}

.flash--avertissement::before {
    content: "À savoir — ";
    font-weight: 600;
    color: var(--c-accent);
}

/* Variante destructrice publique (déconnexion, annulation) — même teinte
   que .btn--danger de l'admin. */
.btn--danger {
    color: #d66;
}

.btn--danger:hover {
    border-color: #d66;
    color: #d66;
}

/* Action destructrice PRINCIPALE (confirmer l'annulation d'un rendez-vous) :
   le rouge doit être le FOND, pas le texte. Cumulé à .btn--primary, qui pose
   un fond doré, le `color: #d66` ci-dessus donnait du rouge sur or —
   illisible. Rouge repris de .badge--annulee, pour que « annulé » ait la même
   couleur partout. */
.btn--primary.btn--danger,
.btn--primary.btn--danger:hover {
    background-color: #b02226;
    border-color: #b02226;
    color: #fff;
}

.btn--primary.btn--danger:hover {
    background-color: #8e1b1e;
    border-color: #8e1b1e;
}

/* Enveloppe de tableau : défilement horizontal propre sur petits écrans
   (le tableau scrolle dans son cadre au lieu de faire déborder la page).

   `position: relative` N'EST PAS décoratif : sans lui, l'enveloppe ne
   découpait PAS ses descendants en position absolue, et la page entière
   héritait d'un défilement horizontal.

   Le cas réel : le <th> de la colonne d'action de « Mes rendez-vous » porte
   un `<span class="visually-hidden">Avis</span>` ; `.visually-hidden` est en
   `position: absolute` (app.css). Un élément absolu n'est découpé par un
   `overflow` ancêtre QUE si cet ancêtre est son bloc conteneur. L'enveloppe
   étant en `position: static`, le bloc conteneur du span était le bloc
   conteneur INITIAL : le span échappait au découpage et se posait à sa
   position statique — c'est-à-dire dans le tableau NON défilé, large de
   481 px. À 390 px de viewport il atterrissait à x = 414, et le document
   mesurait 415 px. D'où 25 px de défilement parasite à 390 px, 95 px à
   320 px, sur l'écran le plus consulté au téléphone.

   Rendre l'enveloppe positionnée la remet dans son rôle : tout ce qu'elle
   contient, y compris les éléments absolus, reste découpé par ELLE. */
.table-scroll {
    position: relative;
    overflow-x: auto;
}

/* Zone d'action destructrice (droit à l'effacement RGPD sur « Mes données »). */
.zone-danger {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(221, 102, 102, 0.4);
    border-radius: 8px;
    background-color: rgba(221, 102, 102, 0.05);
}

.zone-danger__titre {
    font-size: 1.1rem;
    color: #d66;
    margin: 0 0 0.5rem;
}

.zone-danger p {
    color: var(--c-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

/* =========================================================================
   Œil afficher/masquer un mot de passe (JS: assets/password_toggle.js)
   Le wrapper .pw-toggle est injecté autour de chaque <input type=password>.
   ========================================================================= */
.pw-toggle {
    position: relative;
    display: block;
}

.pw-toggle__btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    transition: color 0.18s ease;
}

.pw-toggle__btn:hover,
.pw-toggle__btn[aria-pressed="true"] {
    color: var(--c-accent);
}

.pw-toggle__btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: -2px;
    border-radius: var(--radius);
}

/* =========================================================================
   Message de politique d'annulation (espace client + tunnel de réservation).
   ========================================================================= */
.policy-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    background: rgba(201, 161, 74, 0.08);
    border: 1px solid rgba(201, 161, 74, 0.35);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius);
    color: var(--c-text);
    font-size: 0.92rem;
    line-height: 1.5;
}

.policy-note__icon {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    font-family: "Oswald", sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

/* --- Champ « code à 6 chiffres » (C2) ----------------------------------- */
/* Partagé par la page client (/verification-email, habillage .client-form du
   site) et la page staff (/invitation, habillage .login-box du board) : les
   deux chargent components.css, et un code se saisit de la même façon des
   deux côtés. Chiffres espacés et centrés — on relit un code caractère par
   caractère, en le comparant à celui affiché dans l'e-mail. */
.champ-code {
    text-align: center;
    letter-spacing: 0.4em;
    /* Le letter-spacing ajoute un vide APRÈS le dernier chiffre : cette
       indentation le compense pour que la saisie reste optiquement centrée. */
    text-indent: 0.4em;
    font-size: 1.3rem;
    font-family: "Oswald", sans-serif;
}

/* Le placeholder « 123456 » doit s'aligner sur la saisie qui le remplacera
   (même espacement), sans se faire passer pour un code déjà entré. */
.champ-code::placeholder {
    letter-spacing: 0.4em;
    opacity: 0.35;
}