/* ==========================================================================
   AMPIXELWEB — base.css
   Tokens de design, reset, typographie, boutons, utilitaires, apparitions.
   Chargé en premier sur toutes les pages.
   ========================================================================== */

:root {

  /* --- Neutres chauds (ambiance héritée du hero) --- */
  --ink:        #14100b;   /* fond sombre profond */
  --espresso:   #241a10;   /* sombre secondaire, surfaces sur fond ink */
  --bark:       #3a2c1d;   /* bordures sur fond sombre */
  --parchment:  #f2ebdd;   /* fond clair principal */
  --sand:       #e9dec6;   /* fond clair alterné, surfaces */
  --paper:      #fff7ed;   /* blanc chaud (charte : orange-50) */

  /* --- Accents (charte graphique Ampixelweb) --- */
  --orange:     #f97316;   /* accent primaire : aplats, CTA, filets */
  --orange-dk:  #ea580c;   /* survol, états actifs */
  --ember:      #9a3412;   /* accent au niveau du TEXTE (contraste AA sur clair) */
  --amber:      #fbbf24;   /* accent secondaire : étoiles, badges */

  /* --- Texte --- */
  --text:        #14100b;  /* titres et corps sur fond clair */
  --text-mid:    #57534e;  /* texte secondaire, 6.4:1 sur parchemin */
  --text-dim:    #7a7167;  /* méta décorative, jamais sous 14px */
  --on-dark:     #f2ebdd;  /* texte sur fond sombre */
  --on-dark-mid: rgba(242, 235, 221, 0.66);

  /* --- Filets --- */
  /* Fond de carte (section Ancrage local) */
  --geo-paper:    #f8f2e6;
  --geo-water:    #cad8dc;
  --geo-water-dk: #a6bfc6;

  --line:        rgba(20, 16, 11, 0.13);
  --line-strong: rgba(20, 16, 11, 0.26);
  --line-dark:   rgba(242, 235, 221, 0.15);

  /* --- Rythme --- */
  --gutter:       clamp(1.25rem, 4.5vw, 4.5rem);

  /* Typographie. Les familles ne sont ecrites qu'ici : partout ailleurs on
     passe par ces variables, pour qu'un changement de police reste une seule
     ligne au lieu des 38 declarations en dur d'avant.
     --font-logo est reserve au mot-symbole « Ampixelweb ». */
  --font-titre: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-corps: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-logo:  "Marcellus", Georgia, serif;
  --shell:        1240px;
  --shell-narrow: 880px;
  --section:      clamp(5rem, 11vh, 9rem);

  /* --- Formes --- */
  --r-sm:   4px;
  --r-md:   10px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* --- Ombres : très douces, jamais lourdes --- */
  --shadow-sm: 0 1px 2px rgba(20, 16, 11, 0.05);
  --shadow-md: 0 10px 30px -18px rgba(20, 16, 11, 0.35);
  --shadow-lg: 0 26px 60px -32px rgba(20, 16, 11, 0.45);

  /* --- Mouvement --- */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px; /* évite que le bandeau collant masque les ancres */
}

body {
  font-family: var(--font-corps);
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
  background: var(--parchment);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

::selection { background: rgba(249, 115, 22, 0.22); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Grain — la même matière que le hero, prolongée sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  opacity: 0.028;
  pointer-events: none;
  z-index: 60;
}

/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  /* Figtree Light : c'est la graisse 300 qui donne l'allure voulue dans les
     grands corps. En dessous de ~1.7rem elle devient trop fragile, d'ou le
     retour a 400 sur les petits niveaux. */
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Échelle : fort contraste entre titres et corps, c'est ce qui fait le premium */
.t-h1      { font-size: clamp(2.1rem, 4.8vw, 3.6rem);  line-height: 1.08; }
.t-h2      { font-size: clamp(1.8rem, 3.6vw, 2.9rem);  line-height: 1.14; }

/* Mot mis en avant dans un titre. C'est le seul relief typographique des titres :
   ni gras (Marcellus n'a qu'une graisse), ni italique (il n'en a pas non plus,
   le navigateur la fabriquerait de travers) — juste la couleur.
   L'ember est le seul orange du jeu qui tienne sur fond clair : 6,2:1 sur le
   parchemin, au-dessus du seuil AA. Sur fond sombre il s'effondre, d'où la
   bascule vers l'orange vif, à 6,8:1 sur l'encre. */
.t-em { color: var(--ember); }
.pagehero .t-em,
.section--ink .t-em,
.section--espresso .t-em,
.cta .t-em { color: var(--orange); }
.t-h4      { font-size: clamp(1.08rem, 1.5vw, 1.2rem); line-height: 1.35; font-weight: 400; }

/* Sur-titre : petite capitale trackée, signature typographique de la marque */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-corps);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ember);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--orange);
  flex: none;
}
.eyebrow--nolead::before { display: none; }
.eyebrow--dark { color: var(--orange); }
/* Variante signature : bas de casse et interlettrage large, au lieu des
   capitales de l'eyebrow standard. Elle suit la police des titres, pas la
   script du logo, qui reste reservee au mot-symbole. */
.eyebrow--brand {
  font-family: var(--font-titre);
  font-size: 0.92rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.22em;
}

.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 60ch;
}
.lead--dark { color: var(--on-dark-mid); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
              border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }

/* Primaire : aplat orange + texte encre = 6.7:1. Le blanc sur orange serait illisible.
   Au survol on ne change QUE le fond : passer le texte en clair donnerait 3,35:1,
   et comme le sélecteur couvre :focus-visible, ce serait l'état de lecture au
   clavier qui deviendrait le moins lisible. L'encre sur #ea580c reste à 5,5:1. */
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--orange-dk); }

.btn--dark { background: var(--ink); color: var(--parchment); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--espresso); }

.btn--outline { border-color: var(--line-strong); color: var(--text); }
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--ink); background: rgba(20, 16, 11, 0.04); }

.btn--outline-light { border-color: var(--line-dark); color: var(--on-dark); }
.btn--outline-light:hover, .btn--outline-light:focus-visible { border-color: var(--parchment); background: rgba(242, 235, 221, 0.07); }

.btn--lg    { padding: 1.2rem 2.2rem; font-size: 0.78rem; }

/* white-space: nowrap + un libellé long donnent au bouton une largeur mini-
   contenu de ~330 px. Dans une grille, cette largeur devient un plancher pour
   tout le conteneur : le formulaire refusait de descendre sous 390 px et se
   faisait rogner sur les écrans de 320 et 375 px. Un bouton pleine largeur n'a
   aucune raison d'interdire le retour à la ligne. */
.btn--block { width: 100%; white-space: normal; }

/* Sur petits écrans, le crénage large coûte plus qu'il ne rapporte. */
@media (max-width: 480px) {
  .btn     { padding: 0.95rem 1.25rem; letter-spacing: 0.14em; }
  .btn--lg { padding: 1.05rem 1.4rem; letter-spacing: 0.14em; }
}

/* Lien fléché — micro-signature de fin de bloc */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ember);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(154, 52, 18, 0.28);
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease), gap 0.35s var(--ease);
}
.arrow-link:hover, .arrow-link:focus-visible { border-bottom-color: var(--ember); gap: 0.95rem; }
.arrow-link svg { flex: none; }

/* --------------------------------------------------------------------------
   Étiquettes
   -------------------------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.34rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Apparition au défilement — pilotée par assets/js/ui.js
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--reveal-ease), transform 0.9s var(--reveal-ease);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   Utilitaires
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.85rem 1.5rem;
  background: var(--ink);
  color: var(--parchment);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.text-center { text-align: center; }
.mx-auto     { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}