/* ==========================================================================
   SKALI.CSS — socle commun La Skàli (référence : la page d'accueil)
   Polices hébergées sur le site, couleurs, mouvement, boutons, en-tête.
   Partagé par les pages publiques hors accueil (Pilates, Hyrox, événements).
   Rien de global ici à part les @font-face et les variables : les classes
   sont préfixées « sk- » pour ne jamais entrer en collision avec le style
   propre d'une page, qui reste dans son <style> ou sa feuille.
   ========================================================================== */

/* --- Polices (mêmes fichiers que l'accueil, aucune requête vers Google) --- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 300 800; font-stretch: 75% 100%; font-display: swap; src: url(/fonts/bricolage-grotesque-latin.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic-latin.woff2) format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/permanent-marker-latin.woff2) format('woff2'); }

:root {
    /* Couleurs de la marque (valeurs de index.html) */
    --sk-noir: #0b0b0b;
    --sk-noir-2: #161616;          /* cartes sur fond noir */
    --sk-creme: #f1eee8;           /* fond clair principal */
    --sk-papier: #fbf8f2;          /* cartes sur fond crème */
    --sk-sable: #e9dfcf;           /* fond clair chaud (section prix de l'accueil) */
    --sk-vert: #368d5f;            /* vert de marque (grands aplats, pas sous du petit texte blanc) */
    --sk-vert-fonce: #2b774f;      /* vert des boutons : blanc dessus en AA */
    --sk-vert-nuit: #22603f;       /* survol / appui */
    --sk-vert-clair: #6cc08f;      /* accent sur fond noir */
    --sk-texte: #0b0b0b;
    --sk-texte-2: #3a3833;         /* texte secondaire sur crème (AA) */
    --sk-texte-3: #57544d;         /* texte discret sur crème (AA) */
    --sk-texte-clair: #c7c3bb;     /* texte secondaire sur noir (AA) */
    --sk-trait: rgba(11, 11, 11, .12);
    --sk-trait-clair: rgba(241, 238, 232, .14);
    --sk-jaune-hyrox: #f2d31b;     /* accent Hyrox */
    --sk-bleu-hydrox: #0b679c;     /* accent Hydrox (bleu bassin) : texte AA sur crème 5,3:1, papier 5,8:1, blanc 6,1:1 */
    /* Univers Hydrox : le bassin vu d'en haut (hydrox.html, pastille de l'accueil) */
    --sk-bassin: #072b49;          /* l'eau, fond de page : crème dessus 12,4:1 */
    --sk-bassin-fond: #041b30;     /* lignes de fond et T */
    --sk-bassin-clair: #8fd3f2;    /* reflets, accents sur l'eau : 8,8:1 sur --sk-bassin */
    --sk-bassin-texte: #c3d6e4;    /* texte secondaire sur l'eau (AA) */
    --sk-bassin-alerte: #ffb3a1;   /* message d'erreur sur l'eau (AA) */

    /* Typo */
    --sk-font: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sk-font-serif: 'Instrument Serif', Georgia, serif;
    --sk-font-main: 'Permanent Marker', cursive;

    /* Formes */
    --sk-radius: 18px;             /* cartes et photos */
    --sk-radius-sm: 14px;
    --sk-pill: 999px;              /* boutons et contrôles */

    /* Mouvement (grille Emil Kowalski) */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --dur-press: 160ms;
    --dur-ui: 220ms;
    --dur-reveal: 600ms;
}

/* --- Typo de la marque --------------------------------------------------- */
.sk-cond { font-family: var(--sk-font); font-variation-settings: 'wdth' 82; font-weight: 800; line-height: .92; letter-spacing: -.035em; }
.sk-serif { font-family: var(--sk-font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.sk-hand { font-family: var(--sk-font-main); font-weight: 400; letter-spacing: .01em; line-height: 1.15; display: inline-block; }

/* --- Boutons (mêmes que l'accueil) --------------------------------------- */
.sk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--sk-pill);
    font: 600 16px/1.2 var(--sk-font); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease, border-color var(--dur-ui) ease, transform var(--dur-press) var(--ease-out);
}
.sk-btn:active { transform: scale(.97); }
.sk-btn-g { background: var(--sk-vert-fonce); color: #fff; }                                   /* action principale */
.sk-btn-d { background: var(--sk-noir); color: var(--sk-creme); }                               /* sur fond clair */
.sk-btn-w { background: var(--sk-creme); color: var(--sk-noir); }                               /* sur fond noir */
.sk-btn-o { background: transparent; color: var(--sk-creme); box-shadow: inset 0 0 0 1px rgba(241, 238, 232, .35); }   /* contour sur fond noir */
.sk-btn-od { background: transparent; color: var(--sk-noir); box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .35); }     /* contour sur fond clair */
.sk-btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
.sk-btn[aria-disabled="true"], .sk-btn:disabled { opacity: .45; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
    .sk-btn-g:hover { background: var(--sk-vert-nuit); }
    .sk-btn-d:hover { background: #262626; }
    .sk-btn-w:hover { background: #fff; }
    .sk-btn-o:hover { box-shadow: inset 0 0 0 1px var(--sk-creme); }
    .sk-btn-od:hover { box-shadow: inset 0 0 0 1px var(--sk-noir); }
}

/* --- En-tête commun : l'ours rond + « La Skàli », barre noire ------------ */
/* Markup :
   <header class="sk-nav"><div class="sk-nav-in">
     <a class="sk-logo" href="/"><img src="/img/site-ours-rond-120.webp" alt="" width="120" height="100"><span class="sk-cond">La Skàli</span></a>
     <nav class="sk-nav-links" aria-label="…"> liens <a> … </nav>
     <a class="sk-btn sk-btn-g sk-btn-sm" href="…">Action</a>
   </div></header>
   La page garde son propre menu mobile si elle en a un : seul l'habillage est commun. */
.sk-nav { position: sticky; top: 0; z-index: 60; background: rgba(11, 11, 11, .94); color: var(--sk-creme); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(241, 238, 232, .08); }
.sk-nav-in { max-width: 1320px; margin: 0 auto; min-height: 60px; padding: 8px clamp(16px, 4vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sk-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--sk-creme); text-decoration: none; }
.sk-logo img { width: 36px; height: auto; }
.sk-logo .sk-cond { font-size: 24px; }
.sk-nav-links { display: flex; align-items: center; gap: 4px; }
.sk-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--sk-pill); font: 600 15px/1 var(--sk-font); color: var(--sk-creme); text-decoration: none; transition: color var(--dur-ui) ease, background-color var(--dur-ui) ease; }
@media (hover: hover) and (pointer: fine) { .sk-nav-links a:not(.sk-btn):hover { color: var(--sk-vert-clair); } }
.sk-nav :focus-visible { outline: 2px solid var(--sk-vert-clair); outline-offset: 3px; }
@media (max-width: 899px) {
    .sk-nav-in { min-height: 56px; padding: 6px 16px; }
    .sk-logo img { width: 34px; }
    .sk-logo .sk-cond { font-size: 22px; }
}

/* --- Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sk-btn:active { transform: none; }
    .sk-btn, .sk-nav-links a { transition: none; }
}