/* ==========================================================================
   base.css — myOptions Refonte 2026
   Reset moderne + règles typographiques de base.
   Consomme tokens.css. Ne doit PAS être chargé sans.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Reset
   Adapté de Josh Comeau + Andy Bell. Corrige les défauts navigateur.
   -------------------------------------------------------------------------- */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* Retire les marges par défaut sur les éléments d'entête et paragraphe. */
  html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre {
    margin: 0;
  }

  /* Listes avec role="list" perdent leur puce par défaut. */
  ul[role="list"], ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  /* Empêche les tailles de police d'être ajustées par iOS au rotate. */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  /* body pleine hauteur de viewport + rendu typographique propre. */
  body {
    min-height: 100vh;
    line-height: var(--leading-loose);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Les formulaires doivent hériter de la typo du body. */
  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  /* Médias responsive par défaut. */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  /* Coupe les mots longs au lieu de casser la mise en page. */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Donne un peu d'air aux ancres de scroll. */
  :target {
    scroll-margin-block: 5ex;
  }
}


/* --------------------------------------------------------------------------
   Base typographique
   Ces règles s'appliquent à TOUS les templates refondus.
   Tant qu'un template utilise du legacy, les règles legacy le surchargeront.
   -------------------------------------------------------------------------- */

@layer base {

  body {
    font-family: var(--font-primary);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
    background-color: var(--bg-primary);
  }

  /* Titres — Stack Sans Headline pour H1-H2, Stack Sans Text pour H3-H4.
     L'idée : H1-H2 portent de l'éditorial (grands formats), H3-H4 sont de l'UI. */
  h1, h2 {
    font-family: var(--font-secondary);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    color: var(--ink-900);
    line-height: var(--leading-snug);
  }
  h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    color: var(--ink-900);
    line-height: var(--leading-normal);
  }

  h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-snug);
  }
  h2 {
    font-size: var(--text-h2);
  }
  h3 {
    font-size: var(--text-h3);
  }
  h4 {
    font-size: var(--text-h4);
  }

  /* Paragraphes — espacement naturel entre blocs. */
  p {
    margin-block-end: var(--space-4);
    max-width: 68ch;
  }
  p:last-child {
    margin-block-end: 0;
  }

  /* Liens — parti-pris v2 : pas d'underline (faux ou vrai).
     Les composants liens introduisent leur propre signal hover (chevron L1,
     bleuet ponctuel L2, fond hover sur dropdown, etc.). */
  a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
  }
  a:focus-visible {
    outline: 2px solid var(--ink-900);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px var(--cream-50);
  }

  /* Emphases — strong en médium, em en Fraunces italique (moments éditoriaux). */
  strong, b {
    font-weight: var(--weight-medium);
    color: var(--ink-900);
  }
  em, i {
    font-family: var(--font-exception);
    font-style: italic;
    font-weight: var(--weight-medium);
  }

  /* Code — mono système, pas de famille chargée en plus. */
  code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background-color: var(--cream-100);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
  }
  pre {
    padding: var(--space-4);
    overflow-x: auto;
  }
  pre > code {
    background: none;
    padding: 0;
  }

  /* Blockquote — éditorial, serif italique. */
  blockquote {
    font-family: var(--font-exception);
    font-style: italic;
    font-size: var(--text-body-lg);
    line-height: var(--leading-relaxed);
    color: var(--ink-900);
    border-left: 2px solid var(--bronze-500);
    padding-left: var(--space-6);
    margin: var(--space-8) 0;
  }

  /* Boutons natifs (non stylés) — restent neutres, components.css fera le reste. */
  button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
  }

  /* Champs de formulaire natifs. Les composants surchargeront pour une finition spécifique. */
  input, textarea, select {
    color: var(--text-primary);
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-strong);
    padding: var(--space-3) 0;
    transition: border-color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease);
  }
  /* Focus state — géré par composant (.mo-form__field, etc.). Pas de rule
     globale, pour éviter les effets "double border" qui se cumulent avec
     les border-bottom des inputs spec v2 (validé 28/04). */
  input:focus, textarea:focus, select:focus {
    outline: none;
  }

  /* Labels — sentence case (parti-pris v2 28/04, pas d'uppercase auto). */
  label {
    display: block;
    font-size: var(--text-caption);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    margin-block-end: var(--space-2);
  }

  /* Listes — espacement discret. */
  ul, ol {
    padding-inline-start: var(--space-6);
    margin-block-end: var(--space-4);
  }
  li {
    margin-block-end: var(--space-1);
  }

  /* Séparateurs discrets. */
  hr {
    border: none;
    border-top: 0.5px solid var(--border-subtle);
    margin: var(--space-8) 0;
  }

  /* Tables — cellules aérées, chiffres tabulaires par défaut. */
  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums lining-nums;
  }
  th {
    text-align: start;
    font-size: var(--text-micro);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-2);
    border-bottom: 0.5px solid var(--border-subtle);
  }
  td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 0.5px solid var(--cream-100);
    vertical-align: baseline;
  }

  /* Sélection de texte — nuance bronze discrète. */
  ::selection {
    background-color: var(--bronze-200);
    color: var(--ink-900);
  }

  /* Focus clavier global — toujours visible, sur fond clair comme sur fond
     encre (halo cream-50 sous le contour ink-900, B3 du 13/10/2026). */
  :focus-visible {
    outline: 2px solid var(--ink-900);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px var(--cream-50);
  }

}


/* --------------------------------------------------------------------------
   Utilitaires typographiques minimaux
   Les vraies classes utilitaires vivent dans utilities.css (chantier C4).
   Ces 3 là sont si fréquentes qu'on les pose ici.
   -------------------------------------------------------------------------- */

@layer base {

  /* Chiffres tabulaires — à poser sur tout conteneur de chiffres alignés. */
  .tabular-nums, .nums {
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* Italique Fraunces ponctuel — pour un mot ou une locution.
     Exemple : <span class="u-italic">simplicité</span> */
  .u-italic {
    font-family: var(--font-exception);
    font-style: italic;
    font-weight: var(--weight-medium);
  }

  /* Texte masqué accessible (screen reader only). */
  .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;
  }
}


/* Lien d'évitement (B4, 13/10/2026) : visible au focus seulement. Hors @layer
   pour l'emporter sur les feuilles historiques non layerées (pages admin). */
.mo-skip-link {
  position: absolute !important;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  background: var(--ink-900);
  color: var(--cream-50) !important;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  transform: translateY(-300%);
}
.mo-skip-link:focus,
.mo-skip-link:focus-visible {
  transform: none;
}
main:focus {
  outline: none;
}