/* ==========================================================================
   ALPS EXECUTIVE — jetons de design
   FICHIER GÉNÉRÉ — ne pas éditer à la main.
   Source : design/src/tokens.py — régénérer avec theme/tools/build-css.py
   ========================================================================== */

/* --- Replis métriques des polices ------------------------------------------
   Les trois familles web arrivent APRÈS le premier rendu (display=swap) : sans
   correction, l'échange re-mesure les titres et repousse puces et moteur — le
   seul décalage de mise en page mesuré sur le site (CLS ≈ 0,20). Chaque repli
   local est donc AJUSTÉ aux métriques de la famille web qu'il remplace :
   l'échange se fait à encombrement quasi identique, et le décalage disparaît.
   Aucune bibliothèque, aucune police ajoutée — la typographie de marque est
   inchangée. Valeurs calées par mesure (tools du dépôt d'exploitation). */
@font-face{font-family:"Instrument Serif Fallback";src:local("Georgia"),local("Gelasio"),local("Gelasio Regular");
  size-adjust:75.7%;ascent-override:120%;descent-override:30%;line-gap-override:0%}
@font-face{font-family:"Schibsted Grotesk Fallback";src:local("Arial"),local("Liberation Sans");font-weight:400;
  size-adjust:103.9%;ascent-override:94%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Schibsted Grotesk Fallback";src:local("Arial"),local("Liberation Sans");font-weight:500;
  size-adjust:105.4%;ascent-override:93%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Schibsted Grotesk Fallback";src:local("Arial"),local("Liberation Sans");font-weight:600;
  size-adjust:99.7%;ascent-override:98%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Schibsted Grotesk Fallback";src:local("Arial"),local("Liberation Sans");font-weight:700;
  size-adjust:101.7%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"IBM Plex Mono Fallback";src:local("Courier New"),local("Liberation Mono");
  size-adjust:100%;ascent-override:102%;descent-override:26%;line-gap-override:0%}

:root{
  /* --- Couleur ------------------------------------------------------------
     Base graphite nocturne (route de nuit, habitacle avant l'aube) et papier
     chaud. Pas de bleu glacier : c'est le code de la navette low-cost. */
  --ink-900:#0E1116; --ink-800:#161A21; --ink-700:#212731; --ink-600:#2A313C;
  --ink-500:#4A5361; --ink-400:#6B7686; --ink-300:#96A0AE;
  --paper:#F6F3EC; --paper-2:#EFEBE2; --white:#FCFAF6;
  /* ink-400 ne porte JAMAIS de texte : 4.15:1 sur papier, 4.11:1 sur graphite —
     il échoue AA sur les deux fonds. Réservé aux filets, bordures et traits
     d'icône. Le texte tertiaire passe par --ink-tertiary, qui bascule selon le
     fond via la cascade plutôt que d'être choisi à la main à chaque usage. */
  --ink-tertiary:#4A5361;
  --line-dark:#2A313C; --line-light:#DFDACF;

  /* Accent unique : laiton. Un seul accent tient la marque ; deux la diluent. */
  --brass:#B08A4F; --brass-bright:#C9A468; --brass-deep:#8A6C3B;

  /* Atmosphère alpine hivernale.
     Ces valeurs ne sont PAS un nouveau bleu de marque : ce sont des graphites
     très légèrement refroidis, empruntés à la lumière de fin de journée en
     altitude. Le bleu reste sous le seuil de perception comme couleur ; il ne
     se lit que comme une distance atmosphérique. Un bleu glacier franc ferait
     basculer le site du côté « station de ski » que nous refusons. */
  --scene-sky-top:#0B0E13; --scene-sky-mid:#171E29; --scene-sky-low:#242D3A;
  --scene-far:#48545F; --scene-mid:#323C49; --scene-near:#151B23;
  --scene-snow:#E8EDF2;
  --scene-glow:rgba(176,138,79,.16);

  /* États. Discrets : ce ne sont pas des éléments de marque. */
  --ok:#4F7A5B; --warn:#9A6B2F; --err:#8C3B3B;

  /* --- Typographie -------------------------------------------------------- */
  --font-display:"Instrument Serif","Instrument Serif Fallback",Georgia,"Times New Roman",serif;
  --font-ui:"Schibsted Grotesk","Schibsted Grotesk Fallback","Helvetica Neue",Arial,sans-serif;
  --font-data:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,"SF Mono",Menlo,monospace;

  /* --- Espacement : base 4 ------------------------------------------------ */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:56px; --s9:80px; --s10:120px;

  /* --- Rayon : quasi nul. Le carré est un marqueur premium ; le coin très
         arrondi est le marqueur du template. --- */
  --r-0:0px; --r-1:2px; --r-pill:999px;

  --maxw:1280px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink-900);
  font-family:var(--font-ui);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brass-deep);text-decoration:none}
a:hover{color:var(--ink-900);text-decoration:underline;text-underline-offset:3px}

/* --- Échelle typographique ------------------------------------------------ */
/* Échelle d'affichage FLUIDE. Un corps de 72px figé occupe le premier écran
   entier sur 390px et repousse l'action principale sous la ligne de flottaison :
   la taille se borne par le bas ET par le haut plutôt que d'être constante. */
.d-xl{font-family:var(--font-display);font-size:clamp(40px,8.5vw,72px);line-height:1.04;letter-spacing:-.02em;font-weight:400}
.d-l {font-family:var(--font-display);font-size:clamp(32px,6.5vw,56px);line-height:1.07;letter-spacing:-.015em;font-weight:400}
.d-m {font-family:var(--font-display);font-size:clamp(27px,4.5vw,40px);line-height:1.12;letter-spacing:-.01em;font-weight:400}
.h1  {font-size:clamp(24px,3.4vw,32px);line-height:1.18;font-weight:600;letter-spacing:-.01em}
.h2  {font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.005em}
.h3  {font-size:20px;line-height:1.3;font-weight:600}
.bl  {font-size:18px;line-height:1.55}
.b   {font-size:16px;line-height:1.6}
.sm  {font-size:14px;line-height:1.5}
/* Micro-label : capitales très espacées — code de l'hôtellerie et de
   l'aviation d'affaires. Jamais en paragraphe, illisible au-delà de 4 mots. */
.mi  {font-size:12px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
/* Toute donnée opérationnelle (durée, distance, vol, prix) passe en mono
   tabulaire : les chiffres s'alignent en colonne et se comparent d'un coup. */
.data{font-family:var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

.muted{color:var(--ink-500)}
.dark,.on-dark{--ink-tertiary:#96A0AE}
.on-dark{color:var(--paper)} .on-dark .muted{color:var(--ink-300)}
.brass{color:var(--brass-deep)} .on-dark .brass{color:var(--brass-bright)}

/* --- Structure ------------------------------------------------------------ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s7)}
.dark{background:var(--ink-900);color:var(--paper)}

/* --- Composition alpine ------------------------------------------------- */
/* Purement décorative : aucune image, aucun script, ~2 Ko de SVG en ligne. */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:var(--ink-900)}
.scene__sky{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 78% 92%, var(--scene-glow) 0%, transparent 58%),
    linear-gradient(to bottom, var(--scene-sky-top) 0%, var(--scene-sky-mid) 52%, var(--scene-sky-low) 100%)}
.scene__ridges{position:absolute;inset:auto 0 0 0;width:100%;height:72%;display:block}
/* Voile atmosphérique : éclaircit le pied des crêtes comme le fait la brume
   de vallée, et empêche la silhouette de se lire comme un aplat découpé. */
.scene__haze{position:absolute;inset:auto 0 0 0;height:52%;
  background:linear-gradient(to top, rgba(36,45,58,.34) 0%, transparent 100%)}
.scene--interior .scene__ridges,
.scene--detail .scene__ridges{height:52%;opacity:.55}
.scene--arrival .scene__sky{
  background:
    radial-gradient(90% 70% at 50% 100%, var(--scene-glow) 0%, transparent 62%),
    linear-gradient(to bottom, var(--scene-sky-top) 0%, var(--scene-sky-low) 100%)}

/* --- Emplacements photographiques --------------------------------------- */
/* L'espace est réservé par aspect-ratio : une photographie fournie plus tard
   se substitue sans provoquer le moindre décalage. */
.media{position:relative;overflow:hidden;background:var(--ink-900);
  aspect-ratio:var(--media-ratio-mobile,4/3)}
@media (min-width:768px){ .media{aspect-ratio:var(--media-ratio,16/9)} }
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media__note{position:absolute;left:var(--s3);bottom:var(--s3);z-index:2;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--brass-bright);
  border:1px solid var(--brass-deep);border-radius:2px;padding:4px 8px;
  background:rgba(14,17,22,.72)}

/* Cadre photographique en attente : la composition occupe le cadre, la note
   décrit le plan attendu. Le jour où l'image arrive, seule la note disparaît. */
.media-placeholder{position:relative;overflow:hidden}
/* Dans un cadre en attente, la composition est un FOND, pas une illustration :
   aux grandes tailles, les facettes de neige se détachaient en triangles. On
   les atténue et on abaisse l'horizon pour laisser respirer le ciel. */
.media-placeholder .scene__ridges{height:56%;opacity:.62}
.media-placeholder .scene__haze{height:66%}
.media-placeholder__note{position:absolute;left:var(--s4);bottom:var(--s4);z-index:2;
  max-width:calc(100% - var(--s7));
  font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:.05em;
  color:var(--brass-bright);border-left:2px solid var(--brass-deep);
  padding:2px 0 2px 10px}
.rule{height:1px;background:var(--line-light);border:0;margin:0}
.rule-d{height:1px;background:var(--line-dark);border:0;margin:0}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.grid{display:grid}

/* --- Boutons --------------------------------------------------------------
   Un seul bouton plein par écran : l'action principale. Tout le reste est
   fantôme ou lien. Hauteur 52px desktop / 56px mobile — au-dessus du seuil
   de 44px, et confortable avec des gants dans une station. --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 28px;border:1px solid transparent;border-radius:var(--r-1);
  font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--brass);color:var(--ink-900);border-color:var(--brass)}
.btn-primary:hover{background:var(--brass-bright);border-color:var(--brass-bright)}
.btn-ghost{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.btn-ghost:hover{background:var(--ink-900);color:var(--paper)}
.on-dark .btn-ghost{color:var(--paper);border-color:var(--ink-tertiary)}
.on-dark .btn-ghost:hover{background:var(--paper);color:var(--ink-900);border-color:var(--paper)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}

/* --- Champs de formulaire -------------------------------------------------
   Étiquette toujours au-dessus, jamais un placeholder seul : le placeholder
   disparaît à la saisie et le champ devient non identifiable. --- */
.field{display:flex;flex-direction:column;gap:6px}
.field > label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-500)}
/* ink-500 tient sur papier (7:1) mais tombe à 2,2:1 sur le graphite du moteur
   en variante sombre. Un libellé de formulaire illisible n'est pas un détail
   esthétique : c'est ce qui indique au visiteur ce qu'il doit saisir. */
.on-dark .field > label,.engine--dark .field > label{color:var(--ink-300)}
.input{height:52px;padding:0 14px;background:var(--white);
  border:1px solid var(--line-light);border-radius:var(--r-1);
  font-family:var(--font-ui);font-size:16px;color:var(--ink-900);width:100%}
.input:focus{border-color:var(--brass);outline:2px solid rgba(176,138,79,.25);outline-offset:0}
.on-dark .input{background:var(--ink-800);border-color:var(--line-dark);color:var(--paper)}
.hint{font-size:13px;color:var(--ink-500)}

/* --- Marqueur de contenu non validé --------------------------------------
   Rendu visible à dessein : aucun chiffre de flotte, tarif ou antériorité
   n'entre en production sans validation documentaire. --- */
/* --- Règles opposables UI/UX Pro Max --------------------------------------
   Priorité 1 accessibilité, 2 tactile, 7 animation. --- */
button,[role="button"],a[href],label,summary{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* Cible tactile : 44px minimum, 8px d'écart entre deux cibles voisines. */
.tap{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.taps{display:flex;gap:8px;flex-wrap:wrap}

.todo{display:inline-block;padding:1px 7px;border:1px dashed var(--warn);
  border-radius:var(--r-1);color:var(--warn);font-family:var(--font-data);
  font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}