/* ==========================================================================
   Fondations des pages publiques — accueil, réservation, tarifs, mentions.
   --------------------------------------------------------------------------
   Chargée AVANT la feuille propre à chaque page. Trois choses ici, et rien
   d'autre :

     1. les trois polices du site, auto-hébergées en woff2 (latin seul) :
          Lobster — le logo « PRO'BarberShop », et lui seul ;
          Cinzel  — les titres ;
          Inter   — tout le texte.
        Elles remplacent les sept fontes TTF d'avant (Handlee, Niconne,
        Sansita, Roboto Slab, Berkshire Swash…) : un seul fichier de Lobster
        pesait 387 Ko, les trois réunis en pèsent 108 ;
     2. la palette, en variables : un composant neuf ne doit plus écrire ses
        ors en dur. Les thèmes saisonniers redéfinissent ces mêmes variables
        (fin d'halloween.css et de noel.css) : ce qui les utilise change de
        saison sans une ligne de plus ;
     3. les composants partagés par plusieurs pages (boutons, pastille
        d'ouverture, barre d'action mobile, lien d'évitement).
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/woff2/inter-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/woff2/cinzel-latin.woff2) format('woff2');
}
@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/woff2/lobster-latin.woff2) format('woff2');
}

:root {
    /* Fonds, du plus profond au plus clair */
    --pbs-ink: #0f0e0d;
    --pbs-night: #161514;
    --pbs-surface: #1d1b18;
    --pbs-surface-2: #26231f;

    /* L'or de la maison */
    --pbs-gold: #cb9b51;
    --pbs-gold-bright: #f6e27a;
    --pbs-gold-light: #ffec8f;
    --pbs-gold-deep: #8a5a2b;
    --pbs-gold-gradient: linear-gradient(135deg, #cb9b51 0%, #f6e27a 55%, #cb9b51 100%);
    --pbs-on-gold: #17150f;            /* texte posé sur un aplat doré */
    --pbs-line: rgba(203, 155, 81, 0.30);
    --pbs-line-soft: rgba(203, 155, 81, 0.14);
    --pbs-glow: 149, 126, 52;          /* halo derrière le carrousel (r, g, b) */

    /* Texte */
    --pbs-cream: #f3ece0;              /* texte principal */
    --pbs-sand: #cbb697;               /* texte secondaire, chaud */
    --pbs-muted: rgba(243, 236, 224, 0.62);

    /* États */
    --pbs-ok: #7bbf6a;
    --pbs-warn: #e08a3c;
    --pbs-danger: #d38991;

    /* Typographie */
    --pbs-font-logo: 'Lobster', cursive;
    --pbs-font-title: 'Cinzel', Georgia, 'Times New Roman', serif;
    --pbs-font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Formes */
    --pbs-radius: 16px;
    --pbs-radius-sm: 10px;
    --pbs-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* Le bouton retour des navigateurs mobiles ne doit pas faire sauter le texte
   d'une police de secours à l'autre : on fixe la taille de référence. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Focus clavier visible partout. :where() garde la spécificité à zéro : une
   page qui dessine son propre focus l'emporte sans se battre. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--pbs-gold-bright);
    outline-offset: 3px;
}

/* Un élément masqué l'est vraiment, même si sa classe lui donne un display
   (une ligne de tarif retirée du catalogue, une note sans contenu…). */
[hidden] { display: none !important; }

/* Masqué à l'écran, lu par les lecteurs d'écran. */
.pbs-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : invisible jusqu'à ce qu'on y arrive au clavier. */
.pbs-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10001;
    padding: 10px 16px;
    border-radius: var(--pbs-radius-sm);
    background: var(--pbs-gold-gradient);
    color: var(--pbs-on-gold);
    font: 600 0.9rem/1 var(--pbs-font-text);
    text-decoration: none;
    transition: top 0.2s ease;
}
.pbs-skip:focus { top: 12px; }

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

.pbs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;                  /* cible tactile confortable */
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 0.92rem/1.1 var(--pbs-font-text);
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease,
                color 0.25s ease, border-color 0.25s ease;
}
.pbs-btn svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pbs-btn--gold {
    background: var(--pbs-gold-gradient);
    color: var(--pbs-on-gold);
    box-shadow: 0 6px 18px rgba(203, 155, 81, 0.30);
}
.pbs-btn--gold:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(203, 155, 81, 0.42);
}
.pbs-btn--ghost {
    background: rgba(203, 155, 81, 0.08);
    border-color: var(--pbs-line);
    color: var(--pbs-gold-bright);
}
.pbs-btn--ghost:hover {
    background: rgba(203, 155, 81, 0.16);
    border-color: var(--pbs-gold-bright);
}
.pbs-btn:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Pastille d'ouverture — « Ouvert · ferme à 20h »
   Le texte de repli est écrit dans la page ; scripts/salon-infos.js le
   remplace par l'état du moment, calculé par le serveur.
   -------------------------------------------------------------------------- */

.pbs-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--pbs-line);
    background: rgba(0, 0, 0, 0.28);
    color: var(--pbs-cream);
    font: 600 0.8rem/1.2 var(--pbs-font-text);
}
.pbs-status__dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pbs-gold);
}
.pbs-status[data-state="open"] .pbs-status__dot {
    background: var(--pbs-ok);
    box-shadow: 0 0 0 3px rgba(123, 191, 106, 0.22);
}
.pbs-status[data-state="closed"] .pbs-status__dot {
    background: var(--pbs-danger);
}

/* --------------------------------------------------------------------------
   Barre d'action mobile — Réserver / Appeler, à portée de pouce.
   Elle n'apparaît qu'une fois l'appel à réserver de l'en-tête sorti de
   l'écran (scripts/salon-infos.js) : inutile de doubler un bouton visible.
   -------------------------------------------------------------------------- */

.pbs-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(15, 14, 13, 0.92);
    border-top: 1px solid var(--pbs-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateY(110%);
    transition: transform 0.3s ease;
}
.pbs-sticky.is-visible { transform: translateY(0); }
.pbs-sticky .pbs-btn { flex: 1; }

@media (min-width: 868px) {
    .pbs-sticky { display: none; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit : les visiteurs qui l'ont demandé à leur système n'ont ni
   apparitions, ni scintillements, ni défilement animé. Le délai est remis à
   zéro aussi : un élément qui attendait la fin de son animation pour
   apparaître (opacity: 0 → 1, « forwards ») s'affiche donc immédiatement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}