/* ==========================================================================
   Base — éléments HTML, gabarit, accessibilité
   ========================================================================== */

body {
    background: var(--c-bg);
    color: var(--c-body);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--fs-body-lh);
    font-synthesis-weight: none; /* pas de fausse graisse : la variable les a toutes */
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Titres
   `text-wrap: pretty` évite les mots orphelins en fin de titre — demandé
   explicitement par le handoff, et utile sur un H1 de 8 mots en 390 px.
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--c-heading);
    text-wrap: pretty;
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--fs-h1-lh);
    letter-spacing: var(--fs-h1-ls);
}

h2 {
    font-size: var(--fs-h2);
    line-height: 1.2;
}

h3 {
    font-size: var(--fs-h3);
    line-height: 1.25;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--c-blue);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--c-orange);
}

strong,
b {
    font-weight: 700;
    color: var(--c-heading);
}

hr {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Focus
   `:focus-visible` seul : pas d'anneau au clic souris, anneau systématique au
   clavier. Valeurs imposées par le handoff.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
    border-radius: 2px;
}

/* Sur fond bleu foncé, l'anneau bleu serait invisible : on passe en blanc. */
.on-dark :focus-visible,
.on-dark:focus-visible {
    outline-color: #ffffff;
}

/* --------------------------------------------------------------------------
   Champs de formulaire
   16 px sur mobile : c'est la règle d'accessibilité du projet, et c'est aussi
   ce qui empêche iOS de zoomer automatiquement à la mise au point d'un champ.
   -------------------------------------------------------------------------- */
input,
textarea,
select {
    font-size: max(16px, var(--fs-body));
}

/* --------------------------------------------------------------------------
   Gabarit
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--section-px);
}

.section {
    padding-block: var(--section-py);
}

.section--surface {
    background: var(--c-surface);
    border-block: 1px solid var(--c-border);
}

/* Micro-label majuscule qui ouvre chaque section */
.section-label {
    font-size: var(--fs-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-label);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Réserve de scroll sous la barre d'action fixe (mobile, pages publiques).
   Sans elle, la barre masque la fin du footer.
   `env(safe-area-inset-bottom)` gère la barre gestuelle des iPhone récents.
   -------------------------------------------------------------------------- */
.has-action-bar {
    padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 768px) {
    .has-action-bar {
        padding-bottom: 0; /* la barre fixe disparaît en desktop */
    }
}

/* --------------------------------------------------------------------------
   Lien d'évitement — première tabulation de chaque page
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 100;
    padding: var(--sp-11) var(--sp-18);
    background: var(--c-blue);
    color: #ffffff;
    font-weight: 700;
    border-radius: 0 0 var(--r-8) 0;
}

.skip-link:focus {
    left: 0;
    top: 0;
    color: #ffffff;
}

/* Masqué à l'écran, restitué par les lecteurs d'écran */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}