/* =============================================================================
   DEH | AVOCATS — Feuille de style unique
   -----------------------------------------------------------------------------
   Socle visuel de tout le site. Aucune classe utilitaire dans le HTML : on
   n'emploie que les classes sémantiques définies ici.

   SOMMAIRE
     1. Variables de la charte (:root)
     2. Polices auto-hébergées (@font-face)
     3. Reset moderne
     4. Styles de base (body, titres, texte, liens, listes)
     5. Mise en page (.conteneur, .section)
     6. Composants (.eyebrow, .filet-or, .btn-or, .lien-or, .carte,
        .grille-*, .champ, .image-sombre)
     7. En-tête / pied — habillage PROVISOIRE (remplacé en Phase 3)
     8. Accessibilité
     9. Responsive — mobile-first : 600px, 900px, 1280px

   Échelle typographique retenue (normalisée depuis l'export Stitch) :
     12 · 14 · 16 · 18 · 24 · 32 · 48 · 64 px
     (le 24px est ajouté à la charte Stitch pour hiérarchiser h1→h4 ;
      tout le reste vient de modern_prestige/DESIGN.md.)
   ============================================================================= */


/* 1. VARIABLES DE LA CHARTE ================================================== */

:root {

    /* Couleurs — à respecter au pixel */
    --navy-950: #01101F;   /* fond principal            */
    --navy-900: #061729;   /* fond de section alterné   */
    --navy-800: #0E2038;   /* cartes, panneaux          */
    --navy-700: #16304E;   /* bordures « fantômes »     */
    --gold-500: #C9A063;   /* filets, labels, boutons   */
    --gold-400: #E0A94F;   /* icônes, états actifs      */
    --white:    #FFFFFF;   /* titres                    */
    --gray-200: #C7CCD6;   /* texte courant             */
    --gray-400: #8C98A8;   /* texte secondaire          */

    /* Familles */
    --f-titre:  "Playfair Display", Georgia, "Times New Roman", serif;
    --f-corps:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-label:  "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Tailles de police */
    --fs-nav:      11px;
    --fs-label:    12px;
    --fs-sm:       14px;
    --fs-base:     16px;
    --fs-lg:       18px;
    --fs-h3:       24px;
    --fs-h2:       32px;
    --fs-h1:       48px;
    --fs-display:  64px;

    /* Interlignes */
    --lh-corps:  1.75;
    --lh-titre:  1.2;

    /* Rythme vertical — base 8px */
    --esp-1:   8px;
    --esp-2:  16px;
    --esp-3:  24px;
    --esp-4:  32px;
    --esp-5:  40px;
    --esp-6:  48px;
    --esp-8:  64px;
    --esp-10: 80px;
    --esp-15: 120px;

    /* Grille */
    --conteneur-max: 1280px;
    --gouttiere:     32px;
    --marge-mobile:  20px;

    /* Filets et rayons */
    --filet:        1px;
    --rayon:        2px;   /* défaut (boutons, champs)          */
    --rayon-carte:  4px;   /* cartes — léger « fini fraisé »    */

    /* Transitions */
    --transition: 0.3s ease;
}


/* 2. POLICES AUTO-HÉBERGÉES ================================================== */
/*
   Fichiers .woff2 à placer dans /assets/fonts/ (voir instructions de la Phase 2).
   Sous-ensembles latin + latin-ext (couverture du français : œ, accents, …).
   Les chemins sont relatifs à CE fichier (assets/css/) -> ../fonts/.
*/

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/montserrat-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* 3. RESET MODERNE ========================================================== */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    min-height: 100vh;
    line-height: var(--lh-corps);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
    color: inherit;
}

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

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 400; }

:focus-visible {
    outline: 2px solid var(--gold-500);
    outline-offset: 3px;
}


/* 4. STYLES DE BASE ======================================================== */

body {
    background-color: var(--navy-950);
    color: var(--gray-200);
    font-family: var(--f-corps);
    font-size: var(--fs-base);
    font-weight: 400;
}

/* Titres — Playfair Display, graisse normale, jamais en majuscules */
h1, h2, h3, h4 {
    font-family: var(--f-titre);
    color: var(--white);
    line-height: var(--lh-titre);
    text-transform: none;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.3; }
h3 { font-size: var(--fs-h3); line-height: 1.4; }
h4 { font-size: var(--fs-lg); line-height: 1.4; }

/* Titre de héros — la seule occurrence du 64px */
.titre-hero {
    font-size: var(--fs-display);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

p { max-width: 68ch; }

a { transition: color var(--transition); }
a:hover { color: var(--gold-500); }

strong, b { font-weight: 600; color: var(--white); }

/* Sélection */
::selection {
    background-color: rgba(201, 160, 99, 0.25);
    color: var(--white);
}


/* 5. MISE EN PAGE ========================================================== */

.conteneur {
    width: 100%;
    max-width: var(--conteneur-max);
    margin-inline: auto;
    padding-inline: var(--marge-mobile);
}

/* Bande verticale de contenu : 120px de respiration */
.section {
    padding-block: var(--esp-8);
}

.section--alt {
    background-color: var(--navy-900);
    border-block: var(--filet) solid rgba(22, 48, 78, 0.6);
}

.section--compacte { padding-block: var(--esp-6); }

/* Titre d'ouverture de section */
.section__intro {
    max-width: 60ch;
    margin-bottom: var(--esp-6);
}


/* 6. COMPOSANTS =========================================================== */

/* --- Label or en majuscules (eyebrow) ------------------------------------ */
.eyebrow {
    display: inline-block;
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-500);
    line-height: 1;
}

/* --- Filet or 40 x 1px -------------------------------------------------- */
.filet-or {
    display: block;
    width: 40px;
    height: 1px;
    border: 0;
    background-color: var(--gold-500);
}
.filet-or--large { width: 64px; }

/* Filet structurel vertical (rappel du monogramme), 1px or à 30 % */
.filet-vertical {
    width: 1px;
    align-self: stretch;
    background-color: rgba(201, 160, 99, 0.3);
}

/* --- Bouton à contour or ---------------------------------------------- */
.btn-or {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-4);
    border: var(--filet) solid var(--gold-500);
    border-radius: var(--rayon);
    background-color: transparent;
    color: var(--gold-500);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    transition: background-color var(--transition), color var(--transition);
}
.btn-or:hover,
.btn-or:focus-visible {
    background-color: var(--gold-500);
    color: var(--navy-950);
}
/* Flèche → : léger décalage au survol */
.btn-or svg { width: 1em; height: 1em; transition: transform var(--transition); }
.btn-or:hover svg { transform: translateX(4px); }

/* --- Lien or, filet qui se déploie à l'apparition ------------------- */
.lien-or {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-1);
    color: var(--gold-500);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.lien-or::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background-color: var(--gold-500);
    transition: width var(--transition);
}
.lien-or:hover { color: var(--gold-500); }
.lien-or:hover::after,
.lien-or:focus-visible::after { width: 100%; }

/* --- Carte ---------------------------------------------------------- */
.carte {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--esp-5);
    background-color: var(--navy-800);
    border: var(--filet) solid var(--navy-700);
    border-radius: var(--rayon-carte);
    overflow: hidden;
    transition: border-color var(--transition);
}
.carte:hover { border-color: var(--gold-500); }

/* Filet or en haut à gauche, qui s'étend au survol de la carte */
.carte::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 1px;
    background-color: var(--gold-500);
    transition: width var(--transition);
}
.carte:hover::before { width: 100%; }

.carte__titre { margin-bottom: var(--esp-2); }
.carte__texte { color: var(--gray-200); font-size: var(--fs-sm); line-height: 1.6; }
.carte > * + * { margin-top: var(--esp-2); }

/* --- Grilles ------------------------------------------------------- */
.grille-2,
.grille-3,
.grille-5 {
    display: grid;
    gap: var(--gouttiere);
    grid-template-columns: 1fr;
}

/* --- Formulaire : pile verticale de champs ---------------------- */
.formulaire { display: flex; flex-direction: column; gap: var(--esp-4); }
.formulaire .grille-2 { gap: var(--esp-4); }

/* --- Champ de formulaire (souligné) ------------------------------ */
.champ-groupe {
    display: flex;
    flex-direction: column;
    gap: var(--esp-1);
}
.champ-groupe label {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-500);
}
.champ {
    width: 100%;
    padding: var(--esp-1) 0;
    border: 0;
    border-bottom: var(--filet) solid var(--navy-700);
    background-color: transparent;
    color: var(--white);
    font-family: var(--f-corps);
    font-size: var(--fs-base);
    transition: border-color var(--transition);
}
.champ::placeholder { color: var(--gray-400); }
.champ:focus { outline: none; border-bottom-color: var(--gold-500); }
textarea.champ { resize: vertical; min-height: 7rem; }

/* Sélecteur : chevron or en SVG inline (pas de dépendance) */
select.champ {
    appearance: none;
    padding-right: 2rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23C9A063' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.25rem center;
    background-size: 1.25em 1.25em;
}
select.champ option { background-color: var(--navy-800); color: var(--white); }

/* --- Voile sombre sur les photos ------------------------------- */
.image-sombre {
    position: relative;
    overflow: hidden;
}
.image-sombre > img { width: 100%; height: 100%; object-fit: cover; }
.image-sombre::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--navy-950);
    opacity: 0.65;
    pointer-events: none;
}

/* Portrait circulaire cerclé d'or (fondateur) */
.portrait-or {
    width: 16rem;
    height: 16rem;
    padding: var(--esp-1);
    border: var(--filet) solid var(--gold-500);
    border-radius: 50%;
    background-color: var(--navy-800);
}
.portrait-or > img,
.portrait-or > picture {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(1);
    opacity: 0.9;
    color: transparent; /* masque le texte alt si l'image est absente */
}
.portrait-or > picture > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Portrait non fourni : monogramme or centré (placeholder digne) */
.portrait-or--vide {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 38%, var(--navy-700) 0%, var(--navy-900) 70%);
}
.portrait-or--vide > span {
    font-family: var(--f-titre);
    font-size: 3.25rem;
    letter-spacing: 0.06em;
    color: var(--gold-500);
}


/* 7. EN-TÊTE, NAVIGATION, MENU MOBILE, PIED ========================= */

/* --- Logo (image de marque, ou repli typographique) ---------------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    color: var(--white);
    line-height: 1;
}
.logo__img {
    display: block;
    height: 40px;
    width: auto;
}
.entete.est-reduite .logo__img { height: 34px; transition: height var(--transition); }
.logo--pied .logo__img { height: 44px; }

.logo__mono {
    font-family: var(--f-titre);
    font-size: var(--fs-h3);
    letter-spacing: 0.06em;
    color: var(--gold-500);
}
.logo__filet {
    width: 1px;
    height: 1.4em;
    background-color: rgba(201, 160, 99, 0.5);
}
.logo__mot {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--white);
}

/* --- En-tête collant ---------------------------------------------- */
.entete {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background-color: rgba(1, 16, 31, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(22, 48, 78, 0.9);
    transition: background-color var(--transition), border-color var(--transition);
}
.entete.est-reduite {
    background-color: rgba(1, 16, 31, 0.92);
    border-bottom-color: rgba(201, 160, 99, 0.4);
}
/* Sur les pages à héros, l'en-tête est totalement transparent en haut de page
   et ne prend son fond qu'au défilement. */
body.a-hero .entete:not(.est-reduite) {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
}
.entete__grille {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-4);
    padding-block: var(--esp-3);
    transition: padding-block var(--transition);
}
.entete.est-reduite .entete__grille { padding-block: 14px; }

/* Corps des pages : compensation de l'en-tête fixe (sauf pages à héros) */
body { padding-top: 84px; }
body.a-hero { padding-top: 0; }

.entete__actions {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
}

/* --- Navigation bureau ----------------------------------------- */
.nav { display: none; }
.nav__liste {
    display: flex;
    align-items: center;
    gap: 18px;
}
.nav__lien {
    font-family: var(--f-label);
    font-size: var(--fs-nav);
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gray-200);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: color var(--transition), border-color var(--transition);
}
@media (min-width: 1180px) {
    .nav__liste { gap: var(--esp-3); }
    .nav__lien { letter-spacing: 0.16em; }
}
.nav__lien:hover { color: var(--gold-500); }
.nav__lien.est-actif { color: var(--gold-500); border-bottom-color: var(--gold-500); }

/* --- Sélecteur de langue ------------------------------------- */
.langue {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.1em;
}
.langue__lien { color: var(--gray-400); }
.langue__lien:hover { color: var(--gold-500); }
.langue__actif { color: var(--gold-500); }
.langue > * + *::before {
    content: "/";
    margin-right: 6px;
    color: var(--navy-700);
}

/* Filet or terminal, en écho à la maquette */
.entete__filet {
    display: none;
    width: 56px;
    height: 1px;
    background-color: var(--gold-500);
    opacity: 0.85;
}

/* --- Bouton menu (mobile) ---------------------------------- */
.menu-bouton {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 6px;
    align-items: flex-end;
}
.menu-bouton__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.menu-bouton__trait {
    display: block;
    width: 26px;
    height: 1.5px;
    background-color: var(--gold-500);
    transition: transform var(--transition), opacity var(--transition), width var(--transition);
}
.menu-bouton.est-actif .menu-bouton__trait:first-of-type {
    transform: translateY(6.5px) rotate(45deg);
    width: 26px;
}
.menu-bouton.est-actif .menu-bouton__trait:last-of-type {
    transform: translateY(-6.5px) rotate(-45deg);
    width: 26px;
}

/* --- Menu mobile plein écran ---------------------------- */
.menu-mobile {
    position: fixed;
    inset: 0;
    z-index: 95;
    background-color: var(--navy-950);
    padding-top: 96px;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition), transform var(--transition);
}
.menu-mobile.est-ouvert { opacity: 1; transform: translateY(0); }
body.menu-ouvert { overflow: hidden; }

.menu-mobile__liste { border-top: 1px solid var(--navy-700); }
.menu-mobile__lien {
    display: block;
    padding: var(--esp-3) 0;
    border-bottom: 1px solid var(--navy-700);
    font-family: var(--f-titre);
    font-size: var(--fs-h3);
    color: var(--white);
}
.menu-mobile__lien.est-actif,
.menu-mobile__lien:hover { color: var(--gold-500); }
.menu-mobile__lien--contact {
    color: var(--gold-500);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.menu-mobile__langue {
    display: flex;
    gap: var(--esp-2);
    margin-top: var(--esp-5);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.1em;
}
.menu-mobile__langue a { color: var(--gray-400); }
.menu-mobile__langue a:hover { color: var(--gold-500); }
.menu-mobile__langue span { color: var(--gold-500); }

/* --- Pied de page --------------------------------------- */
.pied {
    position: relative;
    margin-top: var(--esp-15);
    padding-block: var(--esp-8) var(--esp-5);
    background-color: var(--navy-900);
    border-top: 1px solid var(--navy-700);
    overflow: hidden;
}
.pied__radar {
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 280px;
    height: 280px;
    color: var(--gold-500);
    opacity: 0.1;
    pointer-events: none;
}
.pied__grille {
    position: relative;
    display: grid;
    gap: var(--esp-6) var(--gouttiere);
    grid-template-columns: 1fr;
}
.pied__col--marque { max-width: 34ch; }
.logo--pied { margin-bottom: var(--esp-2); }
.pied__baseline { color: var(--gray-400); font-size: var(--fs-sm); }
.pied__titre {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin-bottom: var(--esp-2);
}
.pied__col ul { display: flex; flex-direction: column; gap: 10px; }
.pied__col a { color: var(--gray-200); font-size: var(--fs-sm); }
.pied__col a:hover { color: var(--gold-500); }
.pied__coord li { color: var(--gray-200); font-size: var(--fs-sm); }
.pied__bas {
    position: relative;
    margin-top: var(--esp-6);
    padding-top: var(--esp-3);
    border-top: 1px solid var(--navy-700);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--esp-2);
    color: var(--gray-400);
    font-size: var(--fs-sm);
}


/* 7bis. COMPOSITIONS DE PAGES (Phases 4 et 6) ====================== */

/* --- Héros de page ---------------------------------------------- */
.hero {
    position: relative;
    padding-block: var(--esp-8) var(--esp-10);
    overflow: hidden;
    border-bottom: 1px solid var(--navy-700);
}
@media (min-width: 900px) {
    .hero { padding-block: var(--esp-10) var(--esp-15); }
}
/* Page à héros visuel : le fond bleu passe sous l'en-tête transparent (comme
   l'accueil) ; on rétablit le dégagement du titre sous l'en-tête fixe et on
   donne au bloc une présence proche de l'accueil (sans occuper tout l'écran). */
body.a-hero .hero {
    display: flex;
    align-items: center;
    min-height: 56vh;
    padding-top: calc(84px + var(--esp-4));
}
body.a-hero .hero > .conteneur { width: 100%; }
@media (min-width: 900px) {
    body.a-hero .hero {
        min-height: 64vh;
        padding-top: calc(84px + var(--esp-6));
    }
}
.hero__fond {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: var(--navy-950);
}
.hero__fond picture { display: block; width: 100%; height: 100%; }
.hero__fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    color: transparent; /* masque l'icône d'image cassée tant que le visuel n'est pas fourni */
}
/* Voile de lisibilité : présent sous le texte (à gauche), il s'efface vers la
   droite pour laisser voir le visuel — même logique que le héros d'accueil. */
.hero__fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(1, 16, 31, 0.82) 0%,
            rgba(1, 16, 31, 0.58) 34%,
            rgba(1, 16, 31, 0.26) 64%,
            rgba(1, 16, 31, 0.08) 100%),
        linear-gradient(0deg, rgba(1, 16, 31, 0.34) 0%, rgba(1, 16, 31, 0) 34%);
}
@media (max-width: 700px) {
    /* texte pleine largeur : voile homogène mais léger */
    .hero__fond::after {
        background:
            linear-gradient(180deg,
                rgba(1, 16, 31, 0.70) 0%,
                rgba(1, 16, 31, 0.62) 45%,
                rgba(1, 16, 31, 0.78) 100%);
    }
}
.hero > .conteneur { position: relative; z-index: 1; }
.hero__inner { max-width: 60ch; }
.hero .eyebrow { margin-bottom: var(--esp-3); }
.hero__titre { margin-bottom: var(--esp-3); }
.hero__sous {
    color: var(--gray-200);
    font-size: var(--fs-lg);
    margin-bottom: var(--esp-4);
}
.hero .filet-or { margin-top: var(--esp-2); }

/* --- Héros de l'accueil : texte à gauche, visuel à droite ----------- */
.accueil-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 88vh;
    padding-block: 132px var(--esp-8);
    overflow: hidden;
    background-color: var(--navy-950);
}

/* Visuel d'architecture : pleine hauteur, fondu vers le bleu nuit à gauche */
.accueil-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.accueil-hero__media picture { display: block; width: 100%; height: 100%; }
.accueil-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 45%;
    color: transparent;
}
/* voile : opaque à gauche (lisibilité du texte), transparent à droite */
.accueil-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(1,16,31,0.92) 0%, rgba(1,16,31,0) 22%),
        linear-gradient(90deg,
            var(--navy-950) 0%,
            var(--navy-950) 40%,
            rgba(1,16,31,0.90) 49%,
            rgba(1,16,31,0.42) 64%,
            rgba(1,16,31,0.22) 100%);
}

.accueil-hero__conteneur { position: relative; z-index: 1; }
.accueil-hero__texte { max-width: 36rem; }

.accueil-hero__titre {
    font-size: clamp(2rem, 3.9vw, 3.3rem);
    line-height: 1.16;
    letter-spacing: -0.012em;
    color: var(--white);
    text-wrap: balance;
}
.accueil-hero__filet { margin: var(--esp-4) 0 var(--esp-3); }
.accueil-hero__accroche {
    font-family: var(--f-titre);
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    line-height: 1.4;
    color: var(--gold-500);
    margin-bottom: var(--esp-3);
}
.accueil-hero__corps {
    color: var(--gray-200);
    max-width: 46ch;
    margin-bottom: var(--esp-5);
}
.accueil-hero__cta { padding: var(--esp-2) var(--esp-4); }

/* --- Rythme interne d'une section de contenu ------------------- */
.bloc + .bloc { margin-top: var(--esp-8); }
.mesure { max-width: 68ch; }
.mesure > * + * { margin-top: var(--esp-3); }
.pre-titre { margin-bottom: var(--esp-2); }
.section__titre { margin-bottom: var(--esp-5); max-width: 24ch; }

/* --- Liste de principes numérotés ---------------------------- */
.principes { border-top: 1px solid var(--navy-700); }
.principe {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--esp-2) var(--esp-4);
    padding-block: var(--esp-3);
    border-bottom: 1px solid var(--navy-700);
    transition: border-color var(--transition);
}
.principe:hover { border-bottom-color: rgba(201, 160, 99, 0.5); }
.principe__num {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--gold-500);
}
.principe__texte { font-size: var(--fs-lg); color: var(--white); font-family: var(--f-titre); line-height: 1.4; }

/* --- Étapes (méthodologie) ---------------------------------- */
.etapes { counter-reset: etape; display: grid; gap: var(--gouttiere); }
.etape { position: relative; padding-left: var(--esp-8); }
.etape::before {
    counter-increment: etape;
    content: counter(etape, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--gold-500);
    border-radius: 50%;
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--gold-500);
}
.etape__titre { margin-bottom: 6px; }
.etape__texte { color: var(--gray-200); font-size: var(--fs-sm); }

/* --- Liste à puces or / à flèches --------------------------- */
.liste-or { display: flex; flex-direction: column; gap: 10px; }
.liste-or li {
    position: relative;
    padding-left: var(--esp-3);
    color: var(--gray-200);
}
.liste-or li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 7px;
    height: 1px;
    background-color: var(--gold-500);
}

/* --- Bande d'appel à l'action ------------------------------- */
.cta-bande {
    text-align: center;
    background-color: var(--navy-900);
    border-block: 1px solid var(--navy-700);
    padding-block: var(--esp-10);
}
.cta-bande h2 { margin-bottom: var(--esp-4); }
.cta-bande .filet-or { margin: 0 auto var(--esp-5); }

/* --- Bloc fondateur --------------------------------------- */
.fondateur { display: grid; gap: var(--esp-5); }
.fondateur__portrait { justify-self: center; }
.fondateur__meta {
    display: grid;
    gap: var(--esp-4);
    margin-top: var(--esp-5);
    padding-top: var(--esp-4);
    border-top: 1px solid var(--navy-700);
}
.fondateur__meta h3 {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin-bottom: var(--esp-2);
    font-weight: 600;
}
.fondateur__meta li { color: var(--gray-200); font-size: var(--fs-sm); padding-block: 3px; }

/* --- Barre de valeurs (accueil) --------------------------- */
.valeurs {
    position: relative;
    border-block: 1px solid var(--navy-700);
    background-color: var(--navy-950);
    overflow: hidden;
}
/* Radar décoratif, débordant par la gauche */
.valeurs__radar {
    position: absolute;
    left: -118px;
    top: 50%;
    transform: translateY(-50%);
    width: 286px;
    height: 286px;
    color: var(--gold-500);
    opacity: 0.62;
    pointer-events: none;
}
.valeurs__grille {
    position: relative;
    display: grid;
    gap: var(--esp-5);
    padding-block: var(--esp-6);
}
.valeur__icone {
    width: 30px;
    height: 30px;
    color: var(--gold-500);
    margin-bottom: var(--esp-2);
}
.valeur__titre {
    font-family: var(--f-label);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 10px;
}
.valeur__texte { color: var(--gray-400); font-size: var(--fs-sm); line-height: 1.85; }

/* --- Fil d'ariane (Phase 6) ------------------------------ */
.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--f-label);
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: var(--esp-4);
}
.fil-ariane a { color: var(--gray-400); }
.fil-ariane a:hover { color: var(--gold-500); }
.fil-ariane span[aria-hidden] { color: var(--navy-700); }

/* --- Étiquette de catégorie (Phase 6) ------------------- */
.etiquette {
    display: inline-block;
    font-family: var(--f-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gray-400);
    border: 1px solid var(--navy-700);
    padding: 6px 10px;
}
.etiquette--or { color: var(--gold-500); border-color: rgba(201,160,99,0.4); }

/* --- Messages (formulaire, flash) ---------------------- */
.message {
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--navy-700);
    border-left-width: 2px;
    font-size: var(--fs-sm);
    margin-bottom: var(--esp-4);
}
.message--succes { border-left-color: var(--gold-500); color: var(--white); }
.message--erreur { border-left-color: var(--error, #ff8a80); color: #ffd7d0; }
.champ.est-invalide { border-bottom-color: #ff8a80; }
.champ-erreur { color: #ffb4a8; font-size: var(--fs-sm); margin-top: 4px; }

/* --- Article de publication (Phase 6) ----------------- */
.pub-carte { display: flex; flex-direction: column; }
.pub-carte__media { aspect-ratio: 3 / 2; background-color: var(--navy-900); }
.pub-carte__corps { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); flex: 1; }
.pub-carte__meta {
    margin-top: auto;
    padding-top: var(--esp-2);
    border-top: 1px solid var(--navy-700);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--gray-400);
}
.pub-carte__titre { font-size: var(--fs-h3); }

/* --- Accueil : section « Publications » -----------------------------
   Deux colonnes (éditorial / index des analyses), rose de plan en fond,
   entrée animée au défilement (voir site.js + [data-anime]). Reste
   entièrement lisible au repos. */

.pub-accueil {
    position: relative;
    overflow: clip;
    background-color: var(--navy-900);
    border-block: 1px solid var(--navy-700);
    padding-block: var(--esp-10);
}
.pub-accueil__rose {
    position: absolute;
    right: -18%;
    top: 50%;
    width: min(56vw, 540px);
    aspect-ratio: 1;
    transform: translateY(-50%);
    color: var(--gold-500);
    opacity: 0.08;
    pointer-events: none;
    animation: pub-rose 96s linear infinite;
}
.pub-accueil__grille {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--esp-6);
}
.pub-accueil__edito {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--esp-3);
}
.pub-accueil__edito h2 {
    font-size: var(--fs-h2);
    line-height: 1.16;
    color: var(--white);
    text-wrap: balance;
    max-width: 20ch;
}
.pub-accueil__edito .filet-or { width: 56px; margin-block: 2px; transform-origin: left center; }
.pub-accueil__edito .mesure { color: var(--gray-200); }
.pub-accueil__edito .btn-or { margin-top: var(--esp-3); }
.pub-accueil__vide {
    color: var(--gray-400);
    font-family: var(--f-titre);
    font-style: italic;
    font-size: var(--fs-lg);
}

/* Index des dernières analyses */
.liste-pub { border-top: 1px solid var(--navy-700); }
.liste-pub__lien {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-block: var(--esp-3);
    border-bottom: 1px solid var(--navy-700);
    color: inherit;
}
.liste-pub__lien::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background-color: var(--gold-400);
    transition: width 0.45s cubic-bezier(.2, .7, .2, 1);
}
.liste-pub__lien:hover::after,
.liste-pub__lien:focus-visible::after { width: 100%; }
.liste-pub__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.liste-pub__date {
    font-family: var(--f-label);
    font-size: var(--fs-nav);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
    font-variant-numeric: tabular-nums;
}
.liste-pub__titre {
    font-family: var(--f-titre);
    font-size: var(--fs-h3);
    line-height: 1.32;
    color: var(--white);
    text-wrap: balance;
    transition: color var(--transition), transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.liste-pub__lien:hover .liste-pub__titre,
.liste-pub__lien:focus-visible .liste-pub__titre { color: var(--gold-500); }
.liste-pub__lien:hover .liste-pub__titre { transform: translateX(6px); }
.liste-pub__lien:hover .etiquette { border-color: rgba(224, 169, 79, 0.7); }
.liste-pub__extrait { font-size: var(--fs-sm); color: var(--gray-400); max-width: 52ch; }
.liste-pub__lien--une { padding-bottom: var(--esp-4); }
.liste-pub__lien--une .liste-pub__titre { font-size: clamp(22px, 2.4vw, 26px); }

.pub-accueil__tout {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--esp-4);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-500);
}
.pub-accueil__tout::after {
    content: "";
    width: 22px;
    height: 1px;
    background-color: var(--gold-500);
    transition: width var(--transition);
}
.pub-accueil__tout:hover::after { width: 40px; }

/* Entrée animée — état AU REPOS = visible ; l'animation ne fait qu'accompagner */
.pub-accueil[data-anime="1"] .pub-accueil__edito > *:not(.filet-or),
.pub-accueil[data-anime="1"] .liste-pub__lien,
.pub-accueil[data-anime="1"] .pub-accueil__tout {
    animation: pub-entre 620ms cubic-bezier(.2, .7, .2, 1) both;
}
.pub-accueil[data-anime="1"] .pub-accueil__edito .filet-or {
    animation: pub-filet 520ms cubic-bezier(.65,0,.35,1) 140ms both;
}
.pub-accueil[data-anime="1"] .pub-accueil__edito > *:nth-child(2) { animation-delay: 90ms; }
.pub-accueil[data-anime="1"] .pub-accueil__edito > *:nth-child(4) { animation-delay: 220ms; }
.pub-accueil[data-anime="1"] .pub-accueil__edito > *:nth-child(5) { animation-delay: 300ms; }
.pub-accueil[data-anime="1"] .pub-accueil__edito > *:nth-child(6) { animation-delay: 360ms; }
.pub-accueil[data-anime="1"] .liste-pub__lien:nth-child(1) { animation-delay: 260ms; }
.pub-accueil[data-anime="1"] .liste-pub__lien:nth-child(2) { animation-delay: 360ms; }
.pub-accueil[data-anime="1"] .liste-pub__lien:nth-child(3) { animation-delay: 460ms; }
.pub-accueil[data-anime="1"] .pub-accueil__tout { animation-delay: 540ms; }

@keyframes pub-entre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pub-filet { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pub-rose  { to { transform: translateY(-50%) rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pub-accueil__rose { animation: none; }
    .pub-accueil[data-anime="1"] * { animation-duration: 1ms !important; animation-delay: 0s !important; }
    .liste-pub__lien:hover .liste-pub__titre { transform: none; }
}

.pub-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
    border-bottom: 1px solid var(--navy-700);
    padding-bottom: var(--esp-2);
    margin-bottom: var(--esp-6);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.pub-filtre { color: var(--gray-400); padding-bottom: 8px; border-bottom: 2px solid transparent; }
.pub-filtre:hover { color: var(--white); }
.pub-filtre.est-actif { color: var(--gold-500); border-bottom-color: var(--gold-500); }

.pagination { display: flex; gap: var(--esp-2); justify-content: center; margin-top: var(--esp-8); }
.pagination a, .pagination span {
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    border: 1px solid var(--navy-700);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    color: var(--gray-200);
}
.pagination a:hover { border-color: var(--gold-500); color: var(--gold-500); }
.pagination .est-actif { background-color: var(--gold-500); color: var(--navy-950); border-color: var(--gold-500); }

.etat-vide {
    text-align: center;
    padding: var(--esp-10) var(--esp-4);
    border: 1px dashed var(--navy-700);
    color: var(--gray-400);
}

.encart-dl {
    border: 1px solid var(--navy-700);
    background-color: var(--navy-800);
    padding: var(--esp-4);
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
}
.encart-dl__nom { color: var(--white); }
.encart-dl__poids { color: var(--gray-400); font-size: var(--fs-sm); }

.prose > * + * { margin-top: var(--esp-3); }
.prose h2 { margin-top: var(--esp-6); font-size: var(--fs-h3); }
.prose ul { display: flex; flex-direction: column; gap: 8px; padding-left: var(--esp-3); }
.prose ul li { list-style: disc; color: var(--gray-200); }


/* 7ter. PRÉCHARGEUR DU LOGO ======================================= */
/* Surcouche du premier chargement de session. Le CSS critique minimal est
   aussi en ligne dans le <head> (anti-flash) ; retrait géré par site.js. */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background-color: var(--navy-950);
}
html.preloader-off .preloader { display: none; }
body.menu-ouvert .preloader { display: none; }

.preloader__scene {
    position: relative;
    width: min(70vw, 340px);
    color: var(--gold-500);
}
.preloader__svg,
.preloader__logo {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.preloader__logo { opacity: 0; transform: scale(0.94); }

.preloader__d {
    fill: none;
    stroke: var(--gold-500);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
}
.preloader__e { fill: var(--white); opacity: 0; }
.preloader__h { fill: var(--gold-500); opacity: 0; }
.preloader__filet { fill: var(--gold-500); transform: scaleY(0); transform-origin: 202px 12px; }
.preloader__mot tspan { fill: var(--gold-500); opacity: 0; }

.preloader__lueur {
    position: absolute;
    inset: -10% -5%;
    background: linear-gradient(105deg, transparent 42%, rgba(224, 169, 79, 0.5) 50%, transparent 58%);
    mix-blend-mode: screen;
    transform: translateX(-135%);
    pointer-events: none;
}

.preloader__progres {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: rgba(201, 160, 99, 0.16);
    overflow: hidden;
}
.preloader__progres::after {
    content: "";
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--gold-400);
}

/* Séquence — jouée d'emblée sauf si .preloader-off */
.preloader__d       { animation: pl-trace 620ms cubic-bezier(.7,0,.3,1) 60ms forwards; }
.preloader__e       { animation: pl-appar 380ms ease 430ms forwards; }
.preloader__h       { animation: pl-appar 380ms ease 520ms forwards; }
.preloader__filet   { animation: pl-filet 460ms cubic-bezier(.7,0,.3,1) 560ms forwards; }
.preloader__lueur   { animation: pl-lueur 780ms cubic-bezier(.5,0,.4,1) 360ms forwards; }
.preloader__logo    { animation: pl-logo 560ms cubic-bezier(.5,0,.3,1) 80ms forwards; }
.preloader__mot tspan { animation: pl-lettre 340ms ease forwards; }
.preloader__mot tspan:nth-child(1) { animation-delay: 690ms; }
.preloader__mot tspan:nth-child(2) { animation-delay: 730ms; }
.preloader__mot tspan:nth-child(3) { animation-delay: 770ms; }
.preloader__mot tspan:nth-child(4) { animation-delay: 810ms; }
.preloader__mot tspan:nth-child(5) { animation-delay: 850ms; }
.preloader__mot tspan:nth-child(6) { animation-delay: 890ms; }
.preloader__mot tspan:nth-child(7) { animation-delay: 930ms; }
.preloader__mot tspan:nth-child(8) { animation-delay: 970ms; }
.preloader__mot tspan:nth-child(9) { animation-delay: 1010ms; }
.preloader__progres::after { animation: pl-progres 1150ms cubic-bezier(.4,0,.2,1) 60ms forwards; }

/* Retrait (classe posée par site.js) */
.preloader.est-fini { animation: pl-sortie 600ms cubic-bezier(.6,0,.2,1) forwards; }

@keyframes pl-trace  { to { stroke-dashoffset: 0; } }
@keyframes pl-appar  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pl-filet  { to { transform: scaleY(1); } }
@keyframes pl-lueur  { from { transform: translateX(-135%); } to { transform: translateX(135%); } }
@keyframes pl-logo   { to { opacity: 1; transform: none; } }
@keyframes pl-lettre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pl-progres{ to { inset: 0 0 0 0; } }
@keyframes pl-sortie { to { opacity: 0; transform: translateY(-12px); visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
    .preloader__d { stroke-dashoffset: 0; animation: none; }
    .preloader__e, .preloader__h, .preloader__mot tspan,
    .preloader__logo { opacity: 1; transform: none; animation: none; }
    .preloader__filet { transform: scaleY(1); animation: none; }
    .preloader__lueur { display: none; }
    .preloader__progres::after { inset: 0; animation: none; opacity: 0.4; }
    .preloader.est-fini { animation: pl-sortie-douce 260ms ease forwards; }
    @keyframes pl-sortie-douce { to { opacity: 0; visibility: hidden; } }
}


/* 8. ACCESSIBILITÉ ================================================== */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
}
.skip-link:focus {
    left: var(--marge-mobile);
    top: var(--marge-mobile);
    padding: var(--esp-1) var(--esp-2);
    background-color: var(--gold-500);
    color: var(--navy-950);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Réservé aux lecteurs d'écran */
.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;
}

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


/* 9. RESPONSIVE — mobile-first ==================================== */

/* --- ≥ 600px : petites tablettes -------------------------------- */
@media (min-width: 600px) {

    .grille-2 { grid-template-columns: repeat(2, 1fr); }
    .grille-5 { grid-template-columns: repeat(2, 1fr); }

    .section          { padding-block: var(--esp-10); }
    .section--compacte { padding-block: var(--esp-8); }
}

@media (min-width: 600px) {
    .pied__grille { grid-template-columns: repeat(2, 1fr); }
    .valeurs__grille { grid-template-columns: repeat(2, 1fr); gap: var(--esp-6); }
    .etapes { grid-template-columns: repeat(3, 1fr); }
    .fondateur__meta { grid-template-columns: repeat(3, 1fr); }
}

/* Le radar n'apparaît qu'à partir du moment où il ne gêne plus la lecture */
@media (max-width: 1099px) {
    .valeurs__radar { display: none; }
}

/* --- ≥ 900px : tablettes / petits portables -------------------- */
@media (min-width: 900px) {

    .conteneur { padding-inline: var(--gouttiere); }

    .grille-3 { grid-template-columns: repeat(3, 1fr); }
    .grille-5 { grid-template-columns: repeat(5, 1fr); }

    h1            { font-size: var(--fs-h1); }
    .titre-hero   { font-size: var(--fs-display); }

    .pied__grille { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gouttiere); }
    .valeurs__grille { grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); }
    .valeurs__grille > * + * { border-left: 1px solid rgba(201,160,99,0.28); padding-left: var(--esp-4); }

    .fondateur { grid-template-columns: 18rem 1fr; gap: var(--esp-8); align-items: start; }
    .fondateur__portrait { justify-self: start; }

    .deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-8); }
    .deux-colonnes--decale { grid-template-columns: 5fr 7fr; }

    .pub-accueil__grille {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(40px, 6vw, 80px);
        align-items: start;
    }
    .contact-grille { display: grid; grid-template-columns: 7fr 5fr; gap: var(--esp-8); align-items: start; }
}

/* --- ≥ 1024px : navigation complète dans l'en-tête ------------- */
@media (min-width: 1024px) {
    .nav            { display: block; }
    .entete__filet  { display: block; }
    .menu-bouton    { display: none; }
    .menu-mobile    { display: none; }
}

/* --- ≥ 1100px : la grille des valeurs dégage la place du radar --- */
@media (min-width: 1100px) {
    .valeurs__grille { padding-left: 140px; }
}

/* --- ≥ 1280px : grands écrans --------------------------------- */
@media (min-width: 1280px) {

    .section          { padding-block: var(--esp-15); }
    .section--compacte { padding-block: var(--esp-10); }
}

/* -----------------------------------------------------------------
   MOBILE (< 900px) : le héros et les gros titres sont réduits.
   Déclaré après coup en max-width pour ne pas alourdir le socle.
   ----------------------------------------------------------------- */
@media (max-width: 899px) {
    .titre-hero { font-size: var(--fs-h2); line-height: 1.2; }
    h1          { font-size: var(--fs-h1); }

    /* Accueil : le visuel passe en fond assombri, le texte se superpose */
    .accueil-hero { min-height: auto; padding-block: 128px var(--esp-8); }
    .accueil-hero__media img { object-position: 62% 50%; }
    .accueil-hero__media::after {
        background:
            linear-gradient(180deg, rgba(1,16,31,0.94) 0%, rgba(1,16,31,0.74) 40%, rgba(1,16,31,0.93) 100%);
    }
}

@media (max-width: 599px) {
    h1          { font-size: var(--fs-h2); }
    h2          { font-size: var(--fs-h3); }
    .titre-hero { font-size: var(--fs-h2); }

    /* Les libellés longs des boutons tiennent sur une ligne */
    .btn-or {
        padding: var(--esp-2) var(--esp-3);
        letter-spacing: 0.1em;
        gap: var(--esp-1);
    }
}