/*
 * Design tokens, reset et typographie de base.
 *
 * Les tokens ci-dessous sont la transcription 1:1 des variables Figma de la maquette
 * Beligne (fichier QaIi9PxHXBj5q9nNPGVxN2). Les noms numériques de la maquette sont
 * conservés tels quels (primary-50, secondary-900, spacing/l...) pour que la
 * correspondance code <-> design reste vérifiable sans table de traduction.
 *
 * Aucun style de composant ici : les sections et les partials se stylisent eux-mêmes
 * dans leur propre dossier (voir docs/architecture.md).
 */

:root {
    /* ---- Couleurs : Primary ---- */
    --color-primary-5: #f1f2f2;
    --color-primary-50: #e7eaee;
    --color-primary-100: #dce3e9;
    --color-primary-200: #c1d1e0;
    --color-primary-300: #96b9d8;
    --color-primary-400: #5d9bd4;
    --color-primary-600: #2063a0;
    --color-primary-800: #16344f;
    --color-primary-900: #0f1c28;
    --color-primary-950: #080c11;
    --color-primary: #16344f; /* Primary/Main/primary-main */

    /* Primary en alpha — utilisés par les dégradés du hero et des cartes d'équipe */
    --color-primary-alpha-0: #16344f00;
    --color-primary-alpha-5: #16344f0d;
    --color-primary-alpha-10: #16344f1a;
    --color-primary-alpha-20: #16344f33;
    --color-primary-alpha-90: #16344fe5;

    /* ---- Couleurs : Secondary ---- */
    --color-secondary-100: #f5f4f2;
    --color-secondary-200: #e6e4dd;
    --color-secondary-300: #d4cfbc;
    --color-secondary-400: #c2b691;
    --color-secondary-500: #b09f66;
    --color-secondary-700: #76693f;
    --color-secondary-800: #564d31;
    --color-secondary-900: #373223;
    --color-secondary-950: #222018;
    --color-secondary: #d4cfbc; /* Secondary/Main/secondary-main */

    /* ---- Couleurs : Neutral ---- */
    --color-neutral-25: #fcfcfc;
    --color-neutral-50: #f7f7f7;
    --color-neutral-200: #dbdbdb;
    --color-neutral-300: #c3c3c3;
    --color-neutral-600: #707070;
    --color-neutral-700: #545454;
    --color-neutral-800: #393939;
    --color-neutral-900: #1e1e1e;

    /* Neutral en alpha — fond de survol et d'ouverture des entrées de F.A.Q. */
    --color-neutral-alpha-10: #8d8d8d1a;

    /* ---- Rôles sémantiques ---- */
    --color-text: var(--color-primary-950);
    --color-text-muted: var(--color-neutral-600);
    --color-text-invert: #ffffff;
    /* Le fond de page n'est pas blanc : c'est le beige clair sur lequel se détachent tous
       les panneaux (hero, à propos, chiffres clés, univers). Confirmé côté design. Il n'a
       pas de token « background » dédié dans la maquette, il correspond à
       Secondary/Main/secondary-200 — d'où l'alias plutôt qu'une valeur brute. */
    --color-surface: var(--color-secondary-200);
    --color-surface-muted: var(--color-primary-5);

    /* ---- Typographie ----
     * Orbital (titres) et Basic Sans (courant) sont sous licence. Voir
     * docs/performance.md#polices pour les deux façons de les servir.
     *
     * Chaque pile cite la police sous deux formes : le nom humain ("Orbital"), qui sera
     * celui des @font-face si on passe à l'auto-hébergement, et le slug minuscule
     * ("orbital"), la forme servie par le kit Adobe Fonts — vérifié sur le kit oxg1jjc,
     * qui déclare bien "orbital" et "basic-sans".
     *
     * En CSS, les noms de familles se comparent SANS tenir compte de la casse : "Orbital"
     * suffirait donc à cibler le kit. Le slug reste cité explicitement pour que la
     * correspondance avec Adobe soit lisible, et par sécurité si un futur kit servait un
     * nom réellement différent — Adobe prévient que ce nom peut varier d'un kit à l'autre
     * et qu'il ne faut pas le déduire du nom de la police. Commande de contrôle dans
     * docs/performance.md#polices.
     *
     * Tant qu'aucune des deux voies n'est en place, les repli (serif display / sans
     * humaniste) tiennent la mise en page mais le rendu n'est PAS conforme à la maquette.
     */
    --font-family-heading: "Orbital", "orbital", Georgia, "Times New Roman", serif;
    --font-family-body: "Basic Sans", "basic-sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --font-size-xl: 4.75rem;   /* 76px */
    --font-size-h2: 3.0625rem; /* 49px */
    --font-size-h3: 2.4375rem; /* 39px */
    --font-size-h6: 1.25rem;   /* 20px */
    --font-size-p: 1rem;       /* 16px */
    --font-size-small: 0.8125rem; /* 13px */

    --line-height-heading: 1.3;
    --line-height-body: 1.625; /* 26px sur 16px */
    --line-height-tight: 1.2;

    /* ---- Espacements ---- */
    --space-micro: 4px;
    --space-compact: 8px;
    --space-s: 12px;
    --space-m: 16px;
    --space-l: 20px;
    --space-list: 24px;
    --space-bloc: 32px;
    --space-section: 40px;
    --space-xl: 48px;
    --space-page: 56px;
    --space-hero: 64px;
    --space-large: 80px;
    --space-big-hero: 96px;
    --space-big-page: 128px;

    /*
     * Marge haute et basse de CHAQUE section, et donc l'écart entre deux sections (le double).
     * Un seul réglage pour tout le site : les sections posaient chacune 96 à 128, soit 192 à
     * 224px de vide entre deux blocs — jugé trop aéré. Adapté à l'écran plus bas.
     */
    --section-space: var(--space-hero);

    /* ---- Rayons ---- */
    --radius-xxxs: 2px;
    --radius-xxs: 4px;
    --radius-xs: 8px;
    --radius-full: 99999px;

    /* ---- Grille ----
     * La maquette est cadrée sur 1920 : contenu 1792 (marge 64 de chaque côté) et
     * colonne de texte 1490 centrée.
     */
    --container-max-width: 1792px;
    --container-content-width: 1490px;
    --container-gutter: var(--space-hero);

    /* ---- Alias temporaires ----
     * Ce qui reste du squelette de démonstration consomme encore les anciens noms de
     * tokens. Ces alias les gardent d'aplomb en attendant la réécriture d'après la
     * maquette. Composants concernés à ce jour :
     *   - sections/cta, sections/logos
     *   - partials/post-card
     *   - content/post/archive, content/post/single
     * À supprimer au fur et à mesure : quand plus aucun `var(--space-md)` etc. ne
     * subsiste dans template-parts/, ce bloc doit disparaître.
     */
    --space-sm: var(--space-compact);
    --space-md: var(--space-m);
    --space-lg: var(--space-bloc);
    --font-size-lg: var(--font-size-h3);
    --radius-md: var(--radius-xxs);
}

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

body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-family-body);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-family-heading);
    font-weight: 400;
    line-height: var(--line-height-heading);
    /*
     * Un titre ne fait jamais déborder la page horizontalement.
     *
     * Les titres de section sont en 49px : un mot long et insécable — « Agroalimentaire », un
     * nom de marque composé — dépasse à lui seul la largeur d'un téléphone, et poussait
     * réellement la page. La coupure ne s'applique QUE dans ce cas, elle ne change rien aux
     * titres qui tiennent.
     */
    overflow-wrap: break-word;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

/*
 * Durée et courbe communes à TOUS les retours au survol et au focus : fond, couleur, bordure,
 * soulignement. Une seule paire de valeurs, pour que rien ne réagisse à un rythme différent du
 * voisin.
 *
 * Sous prefers-reduced-motion, la durée tombe à 1ms : chaque règle qui utilise le token devient
 * instantanée d'un coup, sans avoir à lister les sélecteurs composant par composant ni à sortir
 * un !important.
 */
:root {
    --hover-dur: 200ms;
    --hover-ease: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --hover-dur: 1ms;
    }
}

/*
 * Tout ce qui se clique réagit en douceur, une fois pour toutes.
 *
 * Une seule règle plutôt qu'une transition recopiée dans chaque composant : couleur, fond,
 * bordure, couleur de soulignement et opacité s'animent partout où un survol les change. Un
 * composant qui veut sa propre durée n'a qu'à déclarer sa transition — sa feuille est chargée
 * après celle-ci et l'emporte.
 *
 * Le soulignement demande en plus la technique décrite juste en dessous : sans trait au repos,
 * il n'y a rien à interpoler.
 */
a,
button,
summary {
    transition:
        color var(--hover-dur) var(--hover-ease),
        background-color var(--hover-dur) var(--hover-ease),
        border-color var(--hover-dur) var(--hover-ease),
        text-decoration-color var(--hover-dur) var(--hover-ease),
        opacity var(--hover-dur) var(--hover-ease);
}

/*
 * Soulignement animable. text-decoration ne s'anime pas, mais text-decoration-color si : le trait
 * est donc toujours là, transparent au repos, et c'est sa couleur qui apparaît. Sans ça, tout
 * soulignement au survol surgit d'un coup au milieu d'une transition par ailleurs fluide.
 */
.link-underline {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--hover-dur) var(--hover-ease);
}

.link-underline:hover,
.link-underline:focus-visible,
.link-underline[aria-current] {
    text-decoration-color: currentColor;
}

/*
 * Défilement animé pour toute navigation par ancre — le « revenir en haut » du pied de page en
 * premier lieu, qui n'a ainsi pas besoin d'une ligne de JavaScript. Posé sur html seulement :
 * scroll-behavior ne s'hérite pas, les bandes défilantes des carrousels ne sont donc pas
 * touchées (elles s'en passent volontairement, voir scroll-dots/script.js).
 */
/*
 * La gouttière de la barre de défilement est réservée en permanence.
 *
 * Sans ça, tout ce qui bloque le défilement de la page — la modale de recherche, qui pose
 * overflow:hidden sur le body, et le menu mobile, où c'est le navigateur qui le fait pour une
 * <dialog> modale — fait disparaître la barre, la page gagne une quinzaine de pixels et TOUT le
 * contenu se décale d'un coup. C'est la propriété native prévue pour ça, et elle règle les deux
 * cas d'un seul endroit, sans mesurer la largeur de la barre en JavaScript.
 *
 * Contrepartie assumée : sur une page trop courte pour défiler, la gouttière reste visible.
 */
html {
    scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Cible de focus visible unique pour tout le site — jamais supprimée par un composant. */
:focus-visible {
    outline: 2px solid var(--color-secondary-400);
    outline-offset: 2px;
}

.container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.site-header__inner {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding: var(--space-m);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Masque un élément visuellement en le laissant lisible par les lecteurs d'écran. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Rythme vertical des sections, resserré avec l'écran (voir --section-space). */
@media (max-width: 1200px) {
    :root {
        --section-space: var(--space-page);
    }
}

@media (max-width: 768px) {
    :root {
        --section-space: var(--space-xl);
    }
}