/* ==========================================================================
   styles-base.css : réglages de document et classes partagées.

   Les couleurs, la police, les espacements, les rayons et le mouvement ne
   vivent PLUS ici : ils sont dans public/design-tokens.css, chargé juste
   avant ce fichier sur toutes les pages. Ce fichier ne contient donc plus
   aucun code couleur en dur.

   Rappel : extension/popup.css recopie ces règles (une extension navigateur
   ne peut pas charger une feuille du site). Toute modification ici doit y
   être reportée.
   ========================================================================== */

/* Un utilisateur qui a demandé moins d'animations n'en reçoit aucune : la DA
   dit "animations discrètes", pas "animations imposées". */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Réglages de document ---------- */

* { box-sizing: border-box; }

/* L'attribut hidden doit toujours gagner. Sans cette ligne, le moindre
   display:flex ou display:grid pose sur un element le rend visible malgre
   hidden : c'est une source de bugs silencieux, et le lecteur d'ecran, lui,
   continue de le considerer comme cache. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--police-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Les titres portent la police de titre et un interlignage serré : sans ça,
   Plus Jakarta Sans en grande taille paraît lâche et perd sa présence. */
h1, h2, h3, h4 {
  font-family: var(--police-titre);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Chiffres à chasse fixe partout : un compteur ne doit pas "danser" quand il
   passe de 8 à 11, ni les colonnes d'un tableau se décaler. */
table, .tabulaire { font-variant-numeric: tabular-nums; }

/* ---------- Accessibilité clavier ----------
   Un seul anneau de focus pour tout le produit, visible sur fond clair
   comme sur une carte blanche. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Lien d'évitement : obligatoire pour la navigation au clavier, invisible
   tant qu'il n'a pas le focus. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--card);
  color: var(--text);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--radius-xs);
  box-shadow: var(--ombre-portee);
  font-weight: 600;
  text-decoration: none;
}
.saut-contenu:focus {
  left: var(--esp-2);
  top: var(--esp-2);
}

/* ---------- Texte réservé aux lecteurs d'écran ----------
   Visible pour une synthèse vocale, invisible à l'œil. Sert à nommer ce que
   le dessin dit déjà sans mots : un état de chargement, une icône seule.

   La règle vivait dans styles-landing.css, où seule la landing pouvait s'en
   servir ; elle a disparu avec la refonte de cette page. Sa place est ici,
   avec les autres classes partagées. */
.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;
}

/* ---------- Carte : le composant de base de tout le produit ----------
   Fond blanc, bordure très légère, coins de 16 px, aucune ombre au repos. */
.carte {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  padding: var(--esp-3);
}

/* ---------- Boutons ----------
   Trois niveaux seulement : primaire (bleu plein), secondaire (contour),
   tertiaire (texte seul). Au-delà, la page ne dit plus où cliquer. */
.btn-primaire,
.btn-secondaire,
.btn-tertiaire {
  font-family: var(--police-texte);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  /* Un bouton peut être un <a> quand il mène ailleurs : sans cette ligne,
     il porte le soulignement des liens et n'a plus l'air d'un bouton. */
  text-decoration: none;
  /* 999 px : la charte veut des boutons en gélule (CHARTE.md § 5). Ils
     valaient 10 px avant la Phase 1, hérités de l'ancienne charte « papier
     chaud ». Corrigé ici, donc partout d'un coup. */
  border-radius: var(--r-bouton);
  padding: 12px var(--esp-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1);
  /* Jamais "all" : seules les propriétés composées, pour rester fluide. */
  transition: background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.btn-primaire {
  background: var(--accent);
  color: var(--sur-bleu);
  border: 1px solid var(--accent);
}
.btn-secondaire {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--divider);
}
.btn-tertiaire {
  background: none;
  border: 1px solid transparent;
  color: var(--accent);
  padding-left: var(--esp-1);
  padding-right: var(--esp-1);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
  .btn-secondaire:hover { background: var(--survol); border-color: var(--metal); }
  .btn-tertiaire:hover { background: var(--accent-doux); }
}
/* Enfoncement de 1 px : le bouton répond physiquement au doigt, sans rebond. */
.btn-primaire:active,
.btn-secondaire:active,
.btn-tertiaire:active { transform: translateY(1px); }

/* ---------- Champs de formulaire ----------
   Label au-dessus, champ blanc, contour gris, focus bleu. Rien d'autre. */
.champ-libelle {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.champ-saisie {
  width: 100%;
  font-family: var(--police-texte);
  font-size: 14px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.champ-saisie::placeholder { color: var(--text-tertiaire); }
.champ-saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ombre-focus);
}

/* ---------- Apparition en fondu ----------
   Utilisée à l'arrivée sur une page, jamais en boucle. */
@keyframes apparition {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.apparait { animation: apparition var(--dur-lent) var(--ease-out) both; }

/* ---------- Interrupteur à segments ----------
   Deux ou trois choix qui s'excluent, dans un même cadre : un seul objet à
   comprendre, pas deux boutons qui se disputent l'attention.

   Partagé par la fenêtre de connexion et par le formulaire d'ajout d'une
   offre. Avant la Phase 1, le tableau de bord empruntait les classes de la
   connexion (.auth-tabs) : supprimer la connexion cassait le tableau de bord.
   Le composant vit désormais ici, les deux s'en servent.

   L'état actif se lit sur aria-selected, jamais sur la seule classe : ce que
   voit un lecteur d'écran et ce que voit l'œil disent alors la même chose. */

.bascule {
  display: flex;
  gap: var(--esp-0-5);
  padding: var(--esp-0-5);
  background: var(--surface-creuse);
  border-radius: var(--r-bouton);
}

.bascule-option {
  flex: 1;
  min-height: 44px;   /* cible tactile : 44 px, jamais moins */
  font-family: var(--police);
  font-size: var(--t-interface);
  font-weight: var(--graisse-moyen);
  color: var(--muted);
  background: none;
  border: none;
  border-radius: var(--r-bouton);
  cursor: pointer;
  transition: background-color var(--dur-court) var(--ease-sortie),
              color var(--dur-court) var(--ease-sortie);
}

.bascule-option[aria-selected="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--ombre-douce);
}

.bascule-option:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}