/* =============================================================================
   beeMob TAD — Base                                           assets/css/base.css
   -----------------------------------------------------------------------------
   Reset moderne, typographie, liens, champs de formulaire de base, focus,
   sélection, barres de défilement et utilitaires (ARCHITECTURE.md §6 base.css).

   Conventions
   - Mobile-first. Points de rupture de référence (repris dans tous les CSS) :
       sm 640px · md 768px · lg 1024px · xl 1280px
   - Les styles d'éléments susceptibles de gêner un composant sont enveloppés
     dans :where() (spécificité nulle) : components.css l'emporte toujours.
   - Les utilitaires d'espacement, d'alignement et d'affichage portent
     !important : posés dans le HTML, ils doivent toujours gagner.
   - Uniquement des tokens (assets/css/tokens.css), aucune couleur en dur.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Les ancres et le lien d'évitement ne passent pas sous l'en-tête collant. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  /* Barre de défilement de la page : couleur discrète (héritée partout). */
  scrollbar-color: var(--border-strong) transparent;
}

/* Marges par défaut supprimées sur les éléments de flux ; l'espacement se fait
   avec .stack / .cluster / .mt-* / .mb-* ou dans les composants.
   (dialog n'est volontairement pas listé : il garde son centrage natif.) */
body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol, pre, fieldset {
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip; /* aucun défilement horizontal parasite (décors du héros…) */
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(img, picture, video, canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(button, input, select, textarea, optgroup) {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Bouton nu : les composants (.btn, .chip, .toast-close…) le stylent. */
:where(button) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

:where(button, [role="button"], summary, select, label[for],
       input[type="checkbox"], input[type="radio"], input[type="file"]) {
  cursor: pointer;
}

:where(button, input, select, textarea):where(:disabled),
:where([aria-disabled="true"]) {
  cursor: not-allowed;
}

:where(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
}

:where(legend) {
  padding: 0;
}

/* Les listes « composants » (avec une classe) perdent puces et retrait ;
   les listes de contenu gardent leur rendu natif. */
:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

:where(th) {
  font-weight: var(--fw-semibold);
  text-align: start;
}

:where(hr) {
  height: 0;
  border: 0;
  border-top: 1px solid var(--border);
  color: inherit;
}

:where(b, strong) {
  font-weight: var(--fw-semibold);
}

:where(small) {
  font-size: .875em;
}

:where(code, kbd, samp, pre) {
  font-family: var(--font-mono);
  font-size: .9em;
}

:where(abbr[title]) {
  text-decoration: underline dotted;
  text-underline-offset: .15em;
  cursor: help;
}

/* [hidden] l'emporte sur tout display posé par une classe
   (sauf hidden="until-found", géré par le navigateur). */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}


/* -----------------------------------------------------------------------------
   2. Typographie
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(var(--fs-2xl), 1.35rem + 1.6vw, var(--fs-3xl));
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
}

h2 {
  font-size: clamp(var(--fs-xl), 1.2rem + 1vw, var(--fs-2xl));
  line-height: var(--lh-tight);
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -.01em;
}

:where(p, li, dd, figcaption, blockquote) {
  text-wrap: pretty;
}

/* Titre héros : très grand, serré, graisse 800. */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* Sur-titre : petites capitales espacées, couleur de marque (4,6:1 sur --bg). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Chapeau : texte d'introduction plus grand et adouci. */
.lead {
  color: var(--text-muted);
  font-size: clamp(var(--fs-md), 1rem + .45vw, var(--fs-lg));
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

.text-muted {
  color: var(--text-muted);
}

.text-subtle {
  color: var(--text-subtle);
}

/* Chiffres à chasse fixe : heures, compteurs, montants, colonnes de tableau. */
.tabular {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
  font-size: .925em;
  letter-spacing: 0;
}


/* -----------------------------------------------------------------------------
   3. Liens
   Couleur de marque partout ; soulignés dans le texte courant pour ne pas
   reposer sur la seule couleur (WCAG 1.4.1). Les liens-composants (avec une
   classe : .btn, .site-nav-link…) gèrent leur propre apparence.
   -------------------------------------------------------------------------- */
:where(a) {
  color: var(--primary);
  text-decoration: none;
  text-decoration-thickness: from-font;
  text-underline-offset: .2em;
  transition:
    color var(--dur-fast) var(--ease-standard),
    text-decoration-color var(--dur-fast) var(--ease-standard);
}

:where(a:hover) {
  color: var(--primary-hover);
}

:where(p, dd, blockquote, figcaption) :where(a:not([class])) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

:where(p, dd, blockquote, figcaption) :where(a:not([class]):hover) {
  text-decoration-color: currentColor;
}


/* -----------------------------------------------------------------------------
   4. Focus, sélection, barres de défilement
   -------------------------------------------------------------------------- */

/* Anneau de focus clavier global (≥ 3:1). Les composants peuvent l'adapter
   (rayon, décalage) mais ne doivent jamais le supprimer. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection {
  background-color: color-mix(in srgb, var(--primary) 24%, transparent);
}

/* Conteneurs défilants internes (tableaux, tiroirs, listes) : barre fine.
   La couleur est héritée de html (voir §1). */
:where(body *) {
  scrollbar-width: thin;
}


/* -----------------------------------------------------------------------------
   5. Champs de formulaire de base
   input « texte » (tous types sauf cases, boutons, fichier, couleur, curseur),
   select, textarea et .input. Hauteur ≥ 44px (cible tactile), 16px de police
   (pas de zoom automatique sur iOS), contour ≥ 3:1, halo de focus animé.
   Spécificité nulle (:where) : les composants affinent sans surenchère.
   -------------------------------------------------------------------------- */
:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
) {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: var(--surface);
  /* 2e ombre « vide » : point de départ de l'animation du halo de focus. */
  box-shadow: var(--shadow-xs), 0 0 0 0 transparent;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-out);
}

:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
)::placeholder {
  color: var(--text-subtle);
  opacity: 1;
}

:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
):where(:hover:not(:disabled, [readonly], :focus)) {
  border-color: var(--text-subtle);
}

/* Focus : bordure de marque + halo qui s'ouvre (0 → 4px).
   Spécificité (0,1,0), déclaré après :focus-visible global : remplace
   l'anneau par le halo ; l'outline transparent reste visible en mode
   contraste forcé (Windows). */
:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
):focus {
  border-color: var(--primary);
  outline: 2px solid transparent;
  box-shadow: var(--shadow-xs), 0 0 0 4px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}

/* Erreur : aria-invalid posé par le serveur / JS, ou :user-invalid
   (après interaction, amélioration progressive). */
:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
):where([aria-invalid="true"], :user-invalid) {
  border-color: var(--danger);
}

:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
):where([aria-invalid="true"], :user-invalid):focus {
  border-color: var(--danger);
  box-shadow: var(--shadow-xs), 0 0 0 4px color-mix(in srgb, var(--danger) 20%, transparent);
}

:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
):where([readonly]) {
  background-color: var(--surface-2);
}

:where(
  .input,
  textarea,
  select,
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"],
             [type="hidden"], [type="submit"], [type="reset"], [type="button"], [type="image"])
):where(:disabled) {
  border-color: var(--border);
  background-color: var(--surface-2);
  box-shadow: none;
  color: var(--text-subtle);
  -webkit-text-fill-color: var(--text-subtle);
  opacity: 1;
}

:where(textarea) {
  min-height: 7.5rem;
  padding-block: var(--sp-3);
  resize: vertical;
}

/* Liste déroulante : chevron dessiné en CSS (suit la couleur du thème). */
:where(select:not([multiple], [size]), select[size="1"]) {
  padding-inline-end: calc(var(--sp-3) + 1.5rem);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

:where(select[multiple], select[size]:not([size="1"])) {
  padding-block: var(--sp-2);
}

:where(option, optgroup) {
  background-color: var(--surface);
  color: var(--text);
}

/* Date et heure : alignement à gauche sur iOS, icône cliquable. */
:where(input[type="date"], input[type="time"], input[type="datetime-local"],
       input[type="month"], input[type="week"]) {
  min-width: 0;
}

:where(input)::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: start;
}

:where(input)::-webkit-calendar-picker-indicator {
  border-radius: var(--radius-xs);
  cursor: pointer;
  opacity: .75;
}

:where(input[type="search"])::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Cases à cocher, boutons radio, curseurs : couleur de marque native. */
:where(input[type="checkbox"], input[type="radio"]) {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
}

:where(input[type="range"], progress) {
  accent-color: var(--primary);
}

/* Sélecteur de fichier natif (repli de la zone de dépôt). */
:where(input[type="file"]) {
  max-width: 100%;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}

:where(input[type="file"]):hover::file-selector-button {
  background-color: var(--surface-3);
}


/* -----------------------------------------------------------------------------
   6. Utilitaires de mise en page
   -------------------------------------------------------------------------- */

/* Conteneurs centrés. Gouttières : 16px mobile → 24px (≥ 640) → 32px (≥ 1024),
   et jamais sous les zones sûres (encoche, viewport-fit=cover).
   La largeur de contenu reste exactement --container / --container-narrow. */
.container,
.container-narrow {
  --_gutter: var(--sp-4);
  width: 100%;
  max-width: calc(var(--container) + var(--_gutter) * 2);
  margin-inline: auto;
  padding-left: max(var(--_gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--_gutter), env(safe-area-inset-right, 0px));
}

.container-narrow {
  max-width: calc(var(--container-narrow) + var(--_gutter) * 2);
}

@media (min-width: 640px) {
  .container,
  .container-narrow {
    --_gutter: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .container,
  .container-narrow {
    --_gutter: var(--sp-8);
  }
}

/* Pile verticale. Écart réglable sur l'élément lui-même :
   style="--stack-gap: var(--sp-6)" (défaut --sp-4 ; -sm --sp-2 ; -lg --sp-8). */
.stack,
.stack-sm,
.stack-lg {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}

.stack {
  --stack-gap: var(--sp-4);
}

.stack-sm {
  --stack-gap: var(--sp-2);
}

.stack-lg {
  --stack-gap: var(--sp-8);
}

/* Groupe horizontal qui passe à la ligne (boutons, badges, puces).
   Écart réglable : --cluster-gap (défaut --sp-3, cible tactile confortable). */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--sp-3));
}

/* Ligne « titre à gauche / actions à droite », repliable. */
.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
}

/* Grilles responsives : 1 colonne → 2 (≥ 640) → 3 (≥ 1024) / 4 (≥ 1280).
   Écart réglable : --grid-gap (défaut --sp-4, puis --sp-6 dès 1024px). */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-gap, var(--sp-4));
}

@media (min-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    gap: var(--grid-gap, var(--sp-6));
  }

  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* -----------------------------------------------------------------------------
   7. Accessibilité
   -------------------------------------------------------------------------- */

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

/* Lien d'évitement « Aller au contenu » : hors écran, glisse à la prise de focus. */
.skip-link {
  position: fixed;
  top: max(var(--sp-3), env(safe-area-inset-top, 0px));
  left: max(var(--sp-3), env(safe-area-inset-left, 0px));
  z-index: calc(var(--z-tooltip) + 1);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-pill);
  background-color: var(--surface-inverse);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  translate: 0 calc(-100% - var(--sp-8));
  transition: translate var(--dur-base) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  translate: 0 0;
}


/* -----------------------------------------------------------------------------
   8. Visibilité selon l'écran et l'impression
   mobile < 768px ≤ bureau
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none !important;
  }
}

@media print {
  .no-print {
    display: none !important;
  }
}

/* .print-only garde son display normal à l'impression. */
@media not print {
  .print-only {
    display: none !important;
  }
}


/* -----------------------------------------------------------------------------
   9. Utilitaires ponctuels
   -------------------------------------------------------------------------- */
.w-full {
  width: 100% !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.nowrap {
  white-space: nowrap !important;
}

.truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Marges verticales (échelle --sp-*) */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-6 { margin-top: var(--sp-6) !important; }
.mt-8 { margin-top: var(--sp-8) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-6 { margin-bottom: var(--sp-6) !important; }
.mb-8 { margin-bottom: var(--sp-8) !important; }