/*
 | La base : remise à zéro, typographie, conteneurs.
 |
 | Aucune valeur brute ici — tout vient de `tokens.css`, relevé dans le Figma.
 | La seule exception est ce qui n'est pas une décision de design : une largeur
 | de contour de focus, une durée de transition.
 */

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

body {
    margin: 0;
    background: var(--bt-fond);
    color: var(--bt-encre);
    font-family: var(--bt-texte);
    font-size: var(--bt-corps-md);
    letter-spacing: var(--bt-corps-lettres);
    line-height: var(--bt-corps-interligne);
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* ── Titres ──────────────────────────────────────────────────────────────── */

/*
 | Le serif pour tous les niveaux, aux corps du Figma. L'interlettrage négatif
 | est en `em` : exprimé en pourcentage dans la maquette, il doit suivre le corps
 | plutôt que rester figé en pixels — sans quoi un titre mobile serait trop
 | serré et un titre desktop trop lâche.
 */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    color: inherit;
    font-family: var(--bt-titre);
    font-weight: 400;
    letter-spacing: var(--bt-titre-lettres);
    line-height: var(--bt-titre-interligne);
}

h1 { font-size: var(--bt-h1); }
h2 { font-size: var(--bt-h2); }
h3 { font-size: var(--bt-h3); }
h4 { font-size: var(--bt-h4); }
h5 { font-size: var(--bt-h5); }
h6 { font-size: var(--bt-h6); }

/*
 | L'italique de fin de titre — « Bien plus qu'un dîner / *dans Paris* ». La
 | maquette la met sur sa propre ligne et **resserre l'interligne à 90 %**, ce
 | qui rapproche les deux lignes au lieu de les laisser flotter.
 */
.bt-titre em,
h1 em, h2 em, h3 em {
    display: block;
    font-style: italic;
    line-height: var(--bt-titre-italique-interligne);
}

p {
    margin: 0 0 1em;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
}

/* ── Surtitres ───────────────────────────────────────────────────────────── */

/*
 | Le petit texte en capitales espacées qui coiffe chaque section. La casse est
 | posée ici : on saisit « Pourquoi nous choisir » dans l'administration, on n'a
 | pas à crier dans le champ.
 */
.bt-surtitre {
    margin: 0;
    font-size: var(--bt-corps-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ── Conteneurs ──────────────────────────────────────────────────────────── */

.bt-contenu {
    display: block;
}

/*
 | La gouttière du Figma : 48 px en grand écran, 16 en petit. Elle est portée par
 | une variable, si bien qu'une section qui déborde volontairement — un ruban de
 | logos, une bande d'images — n'a qu'à ne pas s'en servir.
 */
.bt-section {
    padding-right: var(--bt-gouttiere);
    padding-left: var(--bt-gouttiere);
}

.bt-centre {
    max-width: var(--bt-largeur);
    margin: 0 auto;
}

/* ── Accessibilité ───────────────────────────────────────────────────────── */

/*
 | `hidden` doit gagner, toujours.
 |
 | Le navigateur pose `[hidden] { display: none }` dans sa feuille par defaut —
 | c'est-a-dire avec la specificite la plus faible qui soit. La moindre regle
 | d'auteur qui donne un `display` a l'element l'emporte, et un panneau marque
 | `hidden` s'affiche quand meme. C'est arrive ici : le menu plein ecran, pose en
 | `display: flex`, recouvrait la page sur grand ecran.
 */
[hidden] {
    display: none !important;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 | Le lien d'évitement : caché tant qu'il n'a pas le focus, puis posé en haut à
 | gauche. Sans lui, atteindre le contenu au clavier demande de traverser tout
 | l'en-tête à chaque page.
 */
.bt-evitement {
    position: absolute;
    top: -100px;
    left: var(--bt-gouttiere);
    z-index: 100;
    padding: 0.75em 1.25em;
    border-radius: 0 0 8px 8px;
    background: var(--bt-fond-clair);
    color: var(--bt-encre);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease;
}

.bt-evitement:focus {
    top: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Une section dont le plugin manque : visible des seuls éditeurs. */
.bt-section-absente {
    margin: 0;
    padding: 1.5rem var(--bt-gouttiere);
    border: 1px dashed #c9a227;
    background: #fffbe6;
    color: #6b5900;
    font-size: var(--bt-corps-sm);
    text-align: center;
}

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