/* ==========================================================================
   Serrures Riviera — jetons de design (tokens)
   Source : DESIGN.md. À importer en premier dans le thème WordPress.
   Les pages utilisent ces noms, jamais les valeurs brutes.
   ========================================================================== */
:root {
  /* Couleurs ----------------------------------------------------------- */
  --navy-900: #0B1F3A;      /* titres, texte fort, bouton principal, sections sombres */
  --navy-800: #132B4D;      /* cartes sur fond sombre */
  --ink-600: #4B5A70;       /* texte courant sur fond clair */
  --on-dark-300: #AEB9CA;   /* texte courant sur fond sombre */
  --muted-dark: #8D9AB0;    /* copyright, mentions sur fond sombre */
  --line: #E3E7EE;          /* séparateurs */
  --line-strong: #D5DBE4;   /* contours des champs et boutons secondaires */
  --line-dark: rgba(255,255,255,.12);
  --white: #FFFFFF;
  --surface: #F7F8FA;       /* sections claires alternées */
  --placeholder: #E4E9F0;   /* fond des emplacements photo */
  --gold: #DDAE2A;          /* icônes et liserés sur fond sombre, badge Recommandé */
  --gold-600: #AD8615;      /* icônes or sur fond clair */
  --gold-text: #8C6B22;     /* petit texte or sur fond clair, liens au survol */
  --gold-tint: #FFFCF3;     /* fond de la carte recommandée sur fond clair */
  --red: #D7263D;           /* boutons d'appel UNIQUEMENT */
  --red-hover: #B81F33;
  --danger-bg: #FDF0F2;     /* encart urgence, erreurs */
  --danger-text: #7A1222;
  --warning-bg: #FFF4D6;
  --warning-text: #7A5A12;
  --success: #3CCB7F;       /* pastille « disponible maintenant » */
  --lake: #DDE5EF;          /* carte de la zone : lac */

  /* Typographie -------------------------------------------------------- */
  --font: 'Schibsted Grotesk', system-ui, sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-17: 17px; --fs-18: 18px; --fs-20: 20px; --fs-22: 22px; --fs-26: 26px;
  --fs-30: 30px; --fs-32: 32px; --fs-40: 40px; --fs-44: 44px; --fs-46: 46px;
  --fs-50: 50px; --fs-56: 56px;
  --lh-tight: 1.06; --lh-heading: 1.1; --lh-body: 1.6;

  /* Espacements (base 8) ---------------------------------------------- */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-6: 48px;
  --sp-8: 64px; --sp-12: 96px; --sp-16: 128px;
  --content: 1200px;

  /* Formes ---------------------------------------------------------- */
  --r-btn: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* Ombres (jamais noires) ------------------------------------------- */
  --shadow-soft: 0 12px 32px rgba(11,31,58,.08);
  --shadow-strong: 0 24px 60px rgba(11,31,58,.14);
  --shadow-on-dark: 0 24px 60px rgba(2,10,24,.45);
  --shadow-callbar: 0 -8px 24px rgba(11,31,58,.14);

  /* Hauteurs de boutons ------------------------------------------------ */
  --btn-sm: 44px; --btn-md: 48px; --btn: 52px; --btn-lg: 60px; --btn-xl: 64px;
}

@media (max-width: 767px) {
  :root { --sp-16: 64px; }
}

/* États communs ----------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--focus, var(--gold-600)); outline-offset: 3px; } /* or foncé sur fond clair (3,4:1), or sur fond sombre (23.10.2026) */
.sr-entete-page, .sr-hero, .sr-intro, .sr-services-accueil, .sr-gains, .sr-proche, .sr-final, .sr-zone__encart, .sr-contrat--recommande, .sr-menu-mobile { --focus: var(--gold); }
button:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(221,174,42,.2); }
.field[aria-invalid="true"] { border: 1.5px solid var(--red); box-shadow: 0 0 0 3px rgba(215,38,61,.12); }
.tel, .tab { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ==========================================================================
   Valeurs relevées dans l'export (22.10.2026) — déjà présentes dans
   design-export, ajoutées ici pour ne jamais écrire de valeur brute.
   Voir DESIGN.md, section « Valeurs relevées dans l'export ».
   ========================================================================== */
:root {
  /* Couleurs ----------------------------------------------------------- */
  --on-dark-200: #C9D2DF;        /* petite phrase du Hero sur fond sombre */
  --sep-dark: #5D6E88;           /* séparateur du fil d'Ariane */
  --navy-700: #16305A;           /* survol des cartes sur fond sombre */
  --placeholder-dark: #1A3458;   /* fond de l'emplacement photo du Hero */
  --placeholder-icon: #8A97AB;   /* icône des vignettes vides */
  --line-dashed: #C3CCD8;        /* contour pointillé de la zone photos */
  --river: #C9D6E4;              /* Rhône sur la carte */
  --map-route: rgba(176,132,24,.6);
  --map-pill-border: rgba(176,132,24,.45);

  /* Intro 3D : clé et serrure ----------------------------------------- */
  --key-1: #FFE88A; --key-2: #F2C21E; --key-3: #D49A12; --key-4: #9E6C0A;
  --key-side-a: #A3740F; --key-side-b: #8F630C;
  --key-engrave: rgba(120,80,6,.55);
  --lock-1: #1B3A66; --lock-2: #0E2445; --keyhole: #06142A;
  --shadow-lock: 0 18px 40px rgba(2,8,20,.45);

  /* Tailles ------------------------------------------------------------ */
  --header-h: 120px; --logo-h: 100px; --logo-footer-h: 64px;
  --btn-chip: 42px;              /* pastilles de filtre et raccourcis */
  --btn-skip: 40px;              /* « Passer l'intro » */
  --callbar-h: 84px;             /* barre d'appel du téléphone : 10 + 52 + 22 px */

  /* Hero de l'accueil (mise à jour du 22.10.2026) ---------------------- */
  --fs-64: 64px;                 /* titre du Hero, ordinateur */
  --ls-display: -.035em;         /* espacement des lettres du titre du Hero */
  --hero-h: 780px;               /* hauteur du Hero, ordinateur */

  /* Espacement des lettres -------------------------------------------- */
  --ls-h1: -.03em; --ls-h2: -.025em; --ls-h3: -.015em; --ls-card: -.01em; --ls-price: -.035em;

  /* Mouvement ---------------------------------------------------------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);   /* apparitions, photos */
  --ease-pulse: cubic-bezier(.4,0,.2,1);  /* pulsation des boutons d'appel */
  --dur-fast: .2s; --dur-card: .25s; --dur-thumb: .3s; --dur-photo: .6s; --dur-rise: .7s;
  --rise-distance: 18px; --rise-step: .12s;   /* chargement du Hero (export) */
  --reveal-distance: 30px; --dur-reveal: .5s;  /* apparition au défilement (décision du 22.10.2026) */
  --dur-press: .1s; --dur-menu-in: .2s; --dur-menu-out: .14s;
  --ease-in: cubic-bezier(.4,0,1,1);           /* (plus utilisé : les sorties prennent --ease-ui, plus réactive) */
  --ease-ui: cubic-bezier(.23,1,.32,1);        /* réactions de l'interface : appui, menu, accordéons, apparitions (23.10.2026) */
  --reveal-step: 80ms;                          /* décalage entre éléments d'une grille qui apparaissent (23.10.2026) */
  --lift-btn: -1px; --lift-card: -4px;
  --pulse-spread: 14px;
}

@media (max-width: 767px) {
  :root {
    --header-h: 92px; --logo-h: 74px; --logo-footer-h: 52px;
    --hero-h: 660px;
    --ls-display: -.025em;
    --ls-h2: -.02em;
    --pulse-spread: 12px;
  }
}