/* =============================================================================
   Bozkurt Construction — 02-base.css (repris tel quel de Nataly Fit / Nataly Compta)
   -----------------------------------------------------------------------------
   Reset doux + styles de base des éléments HTML. Mobile-first.
   S'appuie sur les tokens de 01-tokens.css (à charger AVANT ce fichier).
   Aucun composant ici : uniquement les balises brutes et quelques utilitaires
   sobres (conteneur, espacements, accessibilité).
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  color-scheme: light; /* contrôles natifs (barres de défilement, selects, cases) en clair */
  background-color: var(--couleur-fond); /* évite une bande blanche au rebond de défilement */
  -webkit-text-size-adjust: 100%; /* pas de zoom auto du texte en paysage iOS */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--couleur-fond); /* repli plat si le dégradé n'est pas rendu */
  /* Dégradé lavande → rose de la maquette. `fixed` : il couvre la fenêtre et ne
     défile pas, donc pas de répétition disgracieuse sur les pages longues. */
  background-image: var(--degrade-fond);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--couleur-texte);
  font-family: var(--police-corps);
  font-size: var(--taille-base);
  font-weight: var(--graisse-normale);
  line-height: var(--interligne-corps);
  letter-spacing: var(--lettrage-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  display: flex;
  flex-direction: column;
}

/* --- Titres — Fraunces ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--police-titre);
  font-weight: var(--graisse-semi);
  line-height: var(--interligne-titre);
  letter-spacing: var(--lettrage-titre);
  color: var(--couleur-texte);
  text-wrap: balance;
}

h1 {
  font-size: clamp(var(--taille-2xl), 6vw + 1rem, var(--taille-4xl));
  line-height: var(--interligne-serre);
  font-weight: var(--graisse-semi);
}
h2 {
  font-size: clamp(var(--taille-xl), 3.5vw + 0.5rem, var(--taille-2xl));
}
h3 {
  font-size: var(--taille-lg);
}
h4 {
  font-size: var(--taille-md);
}
h5, h6 {
  font-size: var(--taille-base);
}

/* --- Paragraphes et texte ------------------------------------------------- */
p {
  text-wrap: pretty;
}

p + p {
  margin-top: var(--espace-4);
}

small {
  font-size: var(--taille-sm);
  color: var(--couleur-texte-secondaire);
}

strong, b {
  font-weight: var(--graisse-semi);
}

/* --- Liens ---------------------------------------------------------------- */
a {
  color: var(--couleur-accent-texte);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--couleur-accent-texte) 45%, transparent);
  transition: color var(--transition-douce),
              text-decoration-color var(--transition-douce);
}

/* Survol : on va jusqu'au texte principal, pour le contraste maximal (16,3:1 sur
   le fond lavande). Le rose foncé --couleur-accent-fort tiendrait lui aussi AA
   (5,45:1 sur le fond, 6,0:1 sur blanc) : ce n'est pas une question de seuil,
   c'est que le quasi-noir marque bien mieux l'état survolé sur fond clair. */
a:hover {
  color: var(--couleur-texte);
  text-decoration-color: currentColor;
}

/* --- Focus visible très net (accessibilité WCAG AA) ----------------------- */
:focus {
  outline: none; /* on ne montre le focus qu'au clavier via :focus-visible */
}

:focus-visible {
  outline: var(--focus-epaisseur) solid var(--focus-anneau);
  outline-offset: var(--focus-decalage);
  border-radius: var(--rayon-sm);
}

/* --- Sélection ------------------------------------------------------------ */
/* Le voile rose (--couleur-accent-voile) est désormais presque blanc : posé sur
   une carte il ne se détache qu'à 1,18:1, et sur le lilas des champs à 1,005:1
   — la sélection y est invisible. On dilue donc l'accent PLEIN dans la surface.
   Mélange OPAQUE volontaire (et non une teinte translucide) : une couleur à
   alpha se recomposerait avec ce qu'il y a dessous, et le texte quasi-noir de
   la sélection tomberait à 1,24:1 sur le voile prune du héros ou 3,95:1 sur un
   bouton rose plein. Ici c'est toujours #F7BACC → 11,0:1 avec --couleur-texte. */
::selection {
  background-color: color-mix(in srgb, var(--couleur-accent) 30%, var(--couleur-surface));
  color: var(--couleur-texte);
}

/* --- Médias responsives --------------------------------------------------- */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  fill: none;
  stroke: currentColor; /* iconographie fine au trait */
}

/* --- Formulaires : héritage de la typo ------------------------------------ */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

:disabled {
  cursor: not-allowed;
}

label {
  display: inline-block;
}

/* --- Listes sobres -------------------------------------------------------- */
ul, ol {
  padding-left: 1.2em;
}

li + li {
  margin-top: var(--espace-2);
}

/* Listes de navigation / mise en page : sans puce (à opter via .liste-nue) */
.liste-nue {
  list-style: none;
  padding-left: 0;
}
.liste-nue li + li {
  margin-top: 0;
}

hr {
  border: none;
  border-top: var(--trait-fin) solid var(--couleur-bordure);
  margin-block: var(--espace-6);
}

/* --- Tableaux (défilement horizontal si trop larges) ---------------------- */
table {
  border-collapse: collapse;
  width: 100%;
}

/* =============================================================================
   MISE EN PAGE — conteneur, structure de page
   ========================================================================== */

/* Le contenu principal pousse le pied de page en bas (body en flex-column). */
.zone-principale {
  flex: 1 0 auto;
  width: 100%;
}

/* Conteneur centré à largeur lisible */
.contenu {
  width: 100%;
  max-width: var(--largeur-contenu);
  margin-inline: auto;
  padding-inline: var(--espace-4);
}

@media (min-width: 48rem) {
  .contenu {
    padding-inline: var(--espace-6);
  }
}

/* Variantes de largeur */
.contenu--texte   { max-width: var(--largeur-texte); }
.contenu--etroit  { max-width: var(--largeur-etroite); }

/* Rythme vertical d'une section */
.section {
  padding-block: var(--espace-7);
}
@media (min-width: 48rem) {
  .section {
    padding-block: var(--espace-8);
  }
}

/* =============================================================================
   UTILITAIRES sobres
   ========================================================================== */

/* Espacements verticaux ponctuels (échelle 4/8) */
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--espace-2); }
.mt-3 { margin-top: var(--espace-3); }
.mt-4 { margin-top: var(--espace-4); }
.mt-5 { margin-top: var(--espace-5); }
.mt-6 { margin-top: var(--espace-6); }
.mt-7 { margin-top: var(--espace-7); }

.mb-2 { margin-bottom: var(--espace-2); }
.mb-3 { margin-bottom: var(--espace-3); }
.mb-4 { margin-bottom: var(--espace-4); }
.mb-6 { margin-bottom: var(--espace-6); }

/* Pile verticale à espacement régulier */
.pile      { display: flex; flex-direction: column; gap: var(--espace-4); }
.pile--sm  { gap: var(--espace-2); }
.pile--lg  { gap: var(--espace-6); }

/* Alignements de texte */
.texte-centre  { text-align: center; }
.texte-secondaire { color: var(--couleur-texte-secondaire); }
.texte-intro   { font-size: var(--taille-md); color: var(--couleur-texte-secondaire); line-height: var(--interligne-corps); }
.surtitre {
  font-size: var(--taille-sm);
  text-transform: uppercase;
  letter-spacing: var(--lettrage-majuscule);
  font-weight: var(--graisse-semi);
  color: var(--couleur-accent-texte); /* AA sur ivoire, blanc ET sable */
}

/* Masquage accessible : invisible à l'écran, lu par les lecteurs d'écran */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Masquage total (état géré par le JS) */
[hidden] { display: none !important; }

/* Lien d'évitement : passe au contenu (accessibilité clavier) */
.lien-evitement {
  position: absolute;
  left: var(--espace-2);
  top: -4rem;
  z-index: var(--z-toast);
  background-color: var(--couleur-surface);
  color: var(--couleur-texte);
  padding: var(--espace-2) var(--espace-4);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-md);
  text-decoration: none;
  transition: top var(--transition-douce);
}
.lien-evitement:focus {
  top: var(--espace-2);
}

/* Anti-clignotement i18n : tant que le moteur n'a pas hydraté la page, le
   <html> ne porte pas la classe `i18n-pret`. On peut masquer sélectivement les
   nœuds marqués [data-attente] jusqu'à ce que les traductions soient posées.
   (Nom volontairement SANS préfixe `data-i18n-`, réservé aux clés de traduction
   d'attributs par le moteur i18n.) */
html:not(.i18n-pret) [data-attente] { visibility: hidden; }