/* =============================================================================
   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:       40px; /* réduit de 48px (2026-09-11, demande utilisateur) */
    --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;
}

/* Défilement fluide vers les ancres internes (2026-09-14, boutons du héros
   de cabinet.php → #presentation / #fondateur) — respecte prefers-reduced-
   motion (saut direct plutôt qu'une animation pour qui la désactive). */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
/* Dégagement sous l'en-tête fixe (84px, même valeur que `body { padding-top }`
   plus bas) pour que le titre de la section visée ne soit pas masqué. */
#presentation,
#fondateur {
    scroll-margin-top: calc(84px + var(--esp-3));
}


/* 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;
    /* 2026-09-11 : `text-align: justify` essayé puis retiré — sur un grand
       titre à 2-3 mots par ligne, le navigateur n'a que 1-2 espaces à
       étirer sur toute la largeur, d'où des trous énormes entre les mots
       (visible sur l'accueil, capture utilisateur à l'appui). `text-wrap:
       balance` est l'outil fait pour les titres : il équilibre la longueur
       des lignes (évite une ligne longue + une très courte) SANS étirer
       les espaces. Remplace aussi les `text-wrap: balance` locaux qui
       existaient déjà sur certains titres (accueil-hero__titre,
       liste-pub__titre) — redondant maintenant mais inoffensif de les
       garder, la règle est la même. */
    text-wrap: balance;
}

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;
}

/* Texte justifié (2026-09-15, demande utilisateur « justifier le texte de
   toutes les paragraphes »). Contrairement aux titres (h1-h4, voir plus haut)
   où `justify` avait été essayé puis abandonné — trop peu de mots par ligne,
   des trous énormes entre eux — un paragraphe de corps de texte a largement
   assez de mots par ligne pour que la justification reste propre.
   `hyphens: auto` coupe les mots en fin de ligne pour réduire les écarts
   entre mots (fonctionne car `lang` est posé dynamiquement sur `<html>`,
   fr/en, donc le bon dictionnaire de césure s'applique dans les 2 langues).
   Sans effet visible sur les `<p>` d'une seule ligne (eyebrow, crédit de
   pied de page, etc.) : `justify` ne change rien tant qu'il n'y a pas de
   retour à la ligne. */
p {
    max-width: 68ch;
    text-align: justify;
    hyphens: auto;
}

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); }

/* --- Cartes en accordéon (2026-09-14, page Domaines) -------------------
   <details>/<summary> natif plutôt qu'un accordéon en JS : ouverture au
   clic ET au clavier, état "ouvert/fermé" annoncé nativement par les
   lecteurs d'écran, aucune dépendance. .carte garde son fond/bordure/
   glow au survol tels quels (composant partagé, pas touché) ; seul le
   padding passe de la carte au résumé/à la liste pour ménager l'espace
   du chevron. */
.carte--accordeon { padding: 0; }
.carte--accordeon > * + * { margin-top: 0; }
/* Dégagement sous l'en-tête fixe (même valeur que #presentation/#fondateur sur
   cabinet.php) : ces cartes sont des cibles d'ancre réelles depuis le nouveau
   comportement d'ouverture par hash (#domaine-N) de site.js — sans ça, le
   résumé visé se retrouve caché sous l'en-tête au défilement. */
.carte--accordeon { scroll-margin-top: calc(84px + var(--esp-3)); }
.carte__resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: var(--esp-5);
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
}
.carte__resume::-webkit-details-marker { display: none; }
.carte--accordeon .carte__titre { margin-bottom: 0; }
.carte__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--gold-500);
    transition: transform var(--transition);
}
.carte--accordeon[open] .carte__chevron { transform: rotate(180deg); }
.carte--accordeon .carte__liste { padding: 0 var(--esp-5) var(--esp-5); }

/* --- 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 {
    /* Voisin d'une nav large : sans cela le conteneur flex ecrase l'image a 0. */
    flex-shrink: 0;
}
.logo__img {
    display: block;
    height: 40px;
    width: auto;
    flex-shrink: 0;
}
.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: 12px; /* resserré (2026-09-11), voir .nav__liste ; revient à
                  var(--esp-3) à 1280px, une fois le filet réaffiché. */
}
@media (min-width: 1280px) {
    .entete__actions { gap: var(--esp-3); }
}

/* --- Navigation bureau ----------------------------------------- */
.nav { display: none; }
.nav__liste {
    display: flex;
    align-items: center;
    gap: 8px; /* resserré (2026-09-11) pour faire tenir 6 entrées dès 1024px ;
                 redevient var(--esp-3) à 1280px où l'espace ne manque plus. */
}
.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: 1280px) {
    .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;
}
/* Différé à 1280px (2026-09-11, corrigé après test — 1180 débordait encore
   de 40px) : à 1024-1279px la place manque pour le caser sans déborder,
   même avec le nav resserré (voir le bloc ≥1024px de la nav complète, plus
   bas). Doit rester APRÈS la règle de base ci-dessus pour gagner la
   cascade (même spécificité, l'ordre de source tranche). */
@media (min-width: 1280px) {
    .entete__filet { display: block; }
}

/* --- 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;
}

/* --- Photo de fond en filigrane (facultative — voir asset_existe()) --- */
.pied__fond { position: absolute; inset: 0; z-index: 0; }
.pied__fond img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
/* Voile : plus dense côté marque/navigation, plus léger côté balance de la
   justice (droite) pour la laisser deviner sans nuire à la lisibilité. */
.pied__fond::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(6, 23, 41, 0.94) 0%,
            rgba(6, 23, 41, 0.86) 45%,
            rgba(6, 23, 41, 0.72) 100%),
        linear-gradient(180deg,
            rgba(6, 23, 41, 0.30) 0%,
            rgba(6, 23, 41, 0) 30%,
            rgba(6, 23, 41, 0.45) 100%);
}
@media (max-width: 700px) {
    .pied__fond::after {
        background: linear-gradient(180deg,
            rgba(6, 23, 41, 0.82) 0%,
            rgba(6, 23, 41, 0.90) 55%,
            rgba(6, 23, 41, 0.94) 100%);
    }
}
.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);
    color: var(--gray-400);
    font-size: var(--fs-sm);
}
.pied__bas__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--esp-2);
}

/* --- Retour en haut (2026-09-15, demande utilisateur — bouton flottant,
   pas un élément statique du pied de page : « bouton qui flotte ») — fixe
   en bas à droite du viewport, sur TOUTE page (pas seulement en bas de
   page), masqué au repos et révélé après un peu de défilement par
   `site.js` (classe `.est-visible`). `<a href="#contenu">` plutôt qu'un
   gestionnaire de clic : `<main id="contenu">` existe déjà sur les 13
   pages qui chargent ce pied de page, et hérite du défilement fluide déjà
   posé sur `html` (`scroll-behavior: smooth`, sous `prefers-reduced-motion:
   no-preference`) — le JS ne gère que l'apparition/disparition, pas le
   défilement lui-même. `z-index: 40`, sous l'en-tête (100) et le menu
   mobile plein écran (95) : le menu, quand il est ouvert, passe devant. */
.retour-haut {
    position: fixed;
    right: var(--esp-4);
    bottom: var(--esp-4);
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--navy-950);
    border: var(--filet) solid var(--gold-500);
    border-radius: 50%;
    color: var(--gold-500);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    touch-action: manipulation;
    transition: opacity var(--transition), transform var(--transition),
        background-color var(--transition), color var(--transition);
}
.retour-haut.est-visible { opacity: 1; visibility: visible; transform: none; }
.retour-haut:hover { background-color: var(--gold-500); color: var(--navy-950); }
.retour-haut svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
    .retour-haut { transition: opacity var(--transition); transform: none; }
}
@media (max-width: 599px) {
    .retour-haut { right: var(--esp-3); bottom: var(--esp-3); }
}

/* --- Signature d'agence, sur sa propre ligne sous le bandeau légal ---
   max-width: none annule la limite de lecture globale « p { max-width: 68ch } » :
   ce <p> est une barre centrée pleine largeur, pas un paragraphe de texte. */
.pied__credit {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--esp-2);
    padding-top: var(--esp-2);
    border-top: 1px solid var(--navy-700);
}
.pied__credit a { color: var(--gray-200); }
.pied__credit a:hover { color: var(--gold-500); }
.pied__coeur {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--gold-500);
    animation: coeur-battement 1.4s ease-in-out infinite;
}
@keyframes coeur-battement {
    0%, 28%, 100% { transform: scale(1); }
    14% { transform: scale(1.3); }
    42% { transform: scale(1.18); }
    56% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .pied__coeur { animation: none; }
}


/* 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 {
    /* Autosuffisant en style (2026-09-11) : sur les 8 pages à héros, ce
       texte est désormais porté par un <p> (le <h1> de chaque page est
       l'eyebrow — voir plus bas) — il ne peut donc plus compter sur la
       règle partagée `h1,h2,h3,h4 { font-family; color; line-height;
       text-wrap }` pour son apparence. Dupliqué ici explicitement plutôt
       que de dépendre implicitement du tag. Le `font-size` ci-dessous est
       un repli théorique : en pratique `.hero__inner .hero__titre`
       (plus bas) le réduit toujours à `--fs-label`, .hero__titre n'étant
       jamais utilisé hors de ce contexte. */
    font-family: var(--f-titre);
    color: var(--white);
    line-height: var(--lh-titre);
    text-wrap: balance;
    font-size: var(--fs-h1);
    margin-bottom: var(--esp-3);
}
.hero__sous {
    color: var(--gray-200);
    font-size: var(--fs-lg);
    margin-bottom: var(--esp-4);
}

/* --- Héros des pages intérieures : rôles ET tailles échangés (2026-09-11) -
   Essayé d'abord sur Philosophie seule (scopé `body.page-philosophie`),
   puis étendu à `.hero__inner` en général (2026-09-11, demande utilisateur
   « appliqué sur toutes les pages ») : sur les 8 pages à héros (philosophie,
   cabinet, domaines, contentieux, methodologie, publications, contact,
   accompagnement), le nom de la page (l'eyebrow) est maintenant le <h1> de
   la page, et l'ancien <h1> (la grande accroche) un simple <p> — voir les
   PHP respectifs. Sans ce bloc, le <h1> restait visuellement le plus petit
   texte du groupe (12px) et le <p> le plus grand (40px), contre-intuitif.
   Scopé à `.hero__inner` (pas juste `.eyebrow` tout court) : .eyebrow sert
   aussi ailleurs (rôle du fondateur sur cabinet.php, bloc coordonnées sur
   contact.php) et ne doit pas être agrandi là-bas. L'accueil (index.php)
   n'a pas cette paire eyebrow/h1 — structure différente, rien à échanger. */
.hero__inner .eyebrow {
    font-size: var(--fs-h1);
}
.hero__inner .hero__titre {
    font-size: var(--fs-label);
}
@media (max-width: 599px) {
    .hero__inner .eyebrow { font-size: var(--fs-h2); }
}
.hero .filet-or { margin-top: var(--esp-2); }

/* --- Boutons CTA du héros (2026-09-14, page /cabinet) -----------------
   Deux .btn-or (composant existant, inchangé) côte à côte ; enveloppe
   dédiée pour l'espacement et le passage en pile sur petit écran. Générique
   (pas scopée à .page-cabinet) au cas où une autre page héros voudrait le
   même motif plus tard — rien d'autre ne la référence aujourd'hui. */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-1);
    margin-top: var(--esp-2);
}
/* Padding resserré (var(--esp-4) → var(--esp-3) par côté) : les 2 libellés
   dépassent de justesse les 605px de .hero__inner (max-width: 60ch, pensé
   pour la lecture du paragraphe, pas pour une rangée de boutons) — mesuré
   en navigateur (646px de boutons pour 605px de large). Scopé à
   .hero__actions .btn-or, le composant .btn-or partagé ailleurs sur le
   site n'est pas touché. */
.hero__actions .btn-or { padding: var(--esp-2) var(--esp-3); }
@media (max-width: 599px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn-or { justify-content: center; }
}

/* --- Héros de l'accueil : texte à gauche, visuel à droite ----------- */
.accueil-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 79vh;
    padding-block: 112px 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 : mêmes valeurs que .hero__fond::after (héros des pages intérieures,
   dont contentieux) — opaque à gauche pour le texte, transparent à droite ;
   dégradé du haut conservé pour la lisibilité de l'en-tête transparent. */
.accueil-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(1,16,31,0.82) 0%, rgba(1,16,31,0) 22%),
        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%);
}

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

.accueil-hero__titre {
    font-size: clamp(1.75rem, 3.3vw, 2.75rem); /* réduit (2026-09-11), ratio ~0.83
        conservé avec --fs-h1 : 32→28px, 52.8→44px */
    line-height: 1.16;
    letter-spacing: -0.012em;
    color: var(--white);
    text-wrap: balance;
}
.accueil-hero__filet {margin: var(--esp-2) 0 var(--esp-2);}
.accueil-hero__accroche {
    font-family: var(--f-titre);
    font-size: clamp(1.1rem, 2.1vw, 1.3rem);
    line-height: 1.4;
    color: var(--gold-500);
    margin-bottom: var(--esp-2);
}
.accueil-hero__corps {
    color: var(--gray-200);
    max-width: 46ch;
    margin-bottom: var(--esp-3);
}
.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; }

/* --- Cabinet : citation dans la colonne gauche de Présentation ---------
   (2026-09-14) — cette colonne (deux-colonnes--decale, 5fr) ne contenait
   que l'eyebrow "Présentation" au-dessus d'un grand vide. Comble l'espace
   avec une citation reprise mot pour mot du corps du texte (cabinet_p2,
   voir fr.php/en.php) plutôt que d'inventer du contenu — registre
   éditorial (grand serif italique, filet d'accent à gauche) cohérent avec
   le traitement déjà utilisé sur Philosophie (.philo-essentiel). */
/* .deux-colonnes--decale étire les 2 colonnes à hauteur égale (grid,
   align-items:stretch par défaut) — la citation ne remplit qu'une partie
   de cette hauteur (la colonne de droite a 3 paragraphes) ; centrer
   verticalement répartit le vide au lieu de le laisser tout en bas. */
.presentation-accroche { display: flex; flex-direction: column; justify-content: center; }
.presentation-accroche .filet-or { margin: var(--esp-4) 0; }
.presentation-accroche__citation {
    font-family: var(--f-titre);
    font-size: var(--fs-h3);
    font-style: italic;
    line-height: 1.45;
    color: var(--white);
    border-left: 2px solid var(--gold-500);
    padding-left: var(--esp-4);
    margin: 0;
}

/* --- 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; }

/* --- Philosophie : intro + principes réunis dans une seule section ----
   (2026-09-11) Auparavant deux <section> empilées (texte, puis bandeau
   section--alt avec les 5 principes) ; fusionnées en une seule section à
   deux colonnes — le texte à gauche pose le contexte, les principes à
   droite en tirent la synthèse. Le numéro passe du petit label Montserrat
   au gros chiffre serif Playfair semi-transparent (registre éditorial,
   plus proche d'une manchette de magazine que d'une liste de formulaire),
   et les puces perdent le filet du haut (superflu, la section a déjà sa
   propre bordure implicite via l'espacement). */
.philo-essentiel__texte .filet-or { margin-bottom: var(--esp-4); }
.philo-essentiel__principes .eyebrow { margin-bottom: var(--esp-3); }

.principes--compact { border-top: none; }
.principes--compact .principe { grid-template-columns: 2.75rem 1fr; padding-block: var(--esp-2); }
.principes--compact .principe__num {
    font-family: var(--f-titre);
    font-size: var(--fs-h2);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    color: var(--gold-500);
    opacity: 0.7; /* 0.55 mesurait 3.04:1 sur navy — trop juste sous le seuil
        AA « grand texte » (3:1) ; 0.7 donne de la marge (vérifié en direct). */
}
.principes--compact .principe__texte { font-size: var(--fs-base); line-height: 1.6; }

/* --- É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: -58px; /* remonté depuis -118px (2026-09-11, demande utilisateur) */
    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 -------------
   Seuil redescendu de 1280 à 1024px le 2026-09-11 (demande utilisateur).
   Mesuré en navigateur : à 1024px, logo + nav (6 entrées) + langue + filet
   dépassaient de 112px l'espace réel (1121px nécessaires pour 1009px
   disponibles). Corrigé en resserrant (voir plus bas) plutôt qu'en
   remontant le seuil : `.nav__liste` passe à un gap de 8px (16 avant) et
   `.entete__actions` à 12px (24 avant) sur 1024-1279px ; le filet or
   décoratif, lui, reste différé — 1ère tentative à 1180px encore testée
   en trop de 40px, repoussé à **1280px** (seuil où gap/letter-spacing de
   la nav redeviennent généreux aussi, jamais vérifié plus tôt que ça).
   Toute la plage 1024→1280 re-testée en navigateur (0 débordement). */
@media (min-width: 1024px) {
    .nav            { 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); }
    /* .hero__titre ne suit plus automatiquement `h1` sur Philosophie (voir
       plus haut, porté par un <p>) : même repli manuel qu'ailleurs. */
    .hero__titre { 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);
    }
}

/* =============================================================================
   Méthodologie — la chaîne de 5 étapes (deck client, p. 4)
   Le compteur et la pastille sont déjà portés par `.etape` ; ce modificateur
   ne change que la disposition : 5 jalons alignés, reliés par un filet or.
   ============================================================================= */
@media (min-width: 600px) {
    .etapes--chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
    .etapes--chaine { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-4); }
    .etapes--chaine .etape {
        padding-left: 0;
        padding-top: calc(3rem + var(--esp-3));
    }
    .etapes--chaine .etape::before { top: 0; }
    /* En 5 colonnes, le corps h2 par defaut (32px) deborde : on descend
       d'un cran et on autorise la cesure des mots longs. */
    .etapes--chaine .etape__titre {
        font-size: var(--fs-lg);
        line-height: 1.25;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    /* Filet de liaison d'un jalon au suivant */
    .etapes--chaine .etape::after {
        content: "";
        position: absolute;
        top: 1.5rem;
        left: calc(3rem + 10px);
        right: -22px;
        height: 1px;
        background: rgba(201, 160, 99, 0.28);
    }
    .etapes--chaine .etape:last-child::after { content: none; }
}

/* =============================================================================
   Accompagnement — les cinq niveaux d'intervention (deck client, p. 8)
   Liste ordonnée : la numérotation encode une progression réelle d'engagement,
   du plus ponctuel (revue d'une décision) au plus continu (défense).
   ============================================================================= */
.offres {
    counter-reset: offre;
    display: grid;
    border-top: 1px solid var(--navy-700);
}
.offre {
    counter-increment: offre;
    position: relative;
    display: grid;
    gap: var(--esp-2);
    padding: var(--esp-5) 0 var(--esp-5) var(--esp-6);
    border-bottom: 1px solid var(--navy-700);
}
.offre::before {
    content: counter(offre, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: calc(var(--esp-5) + 4px);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--gold-500);
}
.offre__titre { font-size: var(--fs-h3); margin: 0; }
.offre__objet {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-top: 8px;
}
.offre__texte { color: var(--gray-200); margin-bottom: var(--esp-3); }
.offre:hover::before { color: var(--gold-400); }

@media (min-width: 900px) {
    .offre {
        grid-template-columns: 1fr 1.25fr;
        gap: var(--gouttiere);
        align-items: start;
        padding-left: var(--esp-8);
    }
}

/* --- La progression qui relie les cinq niveaux ------------------- */
.progression {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-3);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-500);
}
.progression__jalon { display: inline-flex; align-items: center; gap: var(--esp-3); }
.progression__jalon:not(:first-child)::before {
    content: "\2192";
    color: rgba(201, 160, 99, 0.55);
    letter-spacing: 0;
}

/* --- Signature de marque au pied de page (deck client, p. 10) ---- */
.pied__signature {
    margin-top: var(--esp-3);
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-500);
}

/* =============================================================================
   Référentiel d'analyse — 5 dimensions côte à côte (deck client, p. 5)
   La simultanéité est l'argument : les 5 axes doivent se lire d'un coup d'œil,
   séparés par des filets or, comme dans le tableau du deck.
   ============================================================================= */
.referentiel { display: grid; gap: var(--esp-5); }

@media (min-width: 600px) {
    .referentiel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
    .referentiel { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
    .referentiel__axe { padding-inline: var(--esp-3); }
    .referentiel__axe + .referentiel__axe { border-left: 1px solid rgba(201, 160, 99, 0.28); }
    .referentiel__axe:first-child { padding-left: 0; }
    .referentiel__axe:last-child  { padding-right: 0; }
}

.referentiel__titre {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin: 0 0 var(--esp-2);
}
.referentiel__lead {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--white);
    margin: 0 0 var(--esp-3);
}
.referentiel__points { display: flex; flex-direction: column; gap: 9px; }
.referentiel__points li {
    position: relative;
    padding-left: 14px;
    color: var(--gray-200);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.referentiel__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 1px;
    background-color: var(--gold-500);
}

/* =============================================================================
   Contentieux — les 5 types de différends (texte officiel client, 2026-09-14)
   Remplace l'ancienne grille titre/texte (.types-contentieux) : le texte
   officiel ne donne plus de description par type — les 5 phrases qui
   comblaient chaque ligne étaient rédigées hors source et jamais validées
   par le cabinet, elles disparaissent avec le nouveau texte. Ce sont des
   catégories nommées, pas une progression : pas de numérotation. Prototypé
   en 3 traitements dans un artifact (badges / liste éditoriale / tuiles à
   glyphe) — la liste éditoriale retenue : chaque ligne porte un « § »,
   le symbole réel utilisé en citation juridique pour désigner un article,
   plutôt qu'un chiffre qui laisserait croire à un ordre entre catégories.
   ============================================================================= */
.categories-contentieux { border-top: 1px solid var(--navy-700); }
.categories-contentieux__item {
    display: flex;
    align-items: baseline;
    gap: var(--esp-4);
    padding: var(--esp-4) 0;
    border-bottom: 1px solid var(--navy-700);
    transition: padding-left var(--transition);
}
.categories-contentieux__item:hover { padding-left: var(--esp-2); }
.categories-contentieux__repere {
    flex-shrink: 0;
    width: 1.6ch;
    font-family: var(--f-titre);
    font-style: italic;
    font-size: var(--fs-h3);
    color: var(--gold-500);
    opacity: 0.75;
    line-height: 1;
}
.categories-contentieux__item span:last-child { font-size: var(--fs-h3); color: var(--white); }
@media (max-width: 599px) {
    .categories-contentieux__item span:last-child { font-size: var(--fs-lg); }
}

/* --- Contentieux : photo d'accent + padding resserré (2026-09-14, suite
   immédiate, demande utilisateur) — la section ne contenait que du texte
   dans une large colonne 68ch, laissant tout le reste du conteneur vide.
   Reprend le crop « hero-publications » (même colonnade que le héros de
   cette page, cadrage différent — cf. CLAUDE.md sur les 5 photos sources
   réutilisées en plusieurs recadrages) en colonne étroite à côté du texte
   plutôt qu'un nouveau visuel. .section--compacte (déjà existant, 48px)
   remplace le padding-block standard (120px) pour resserrer l'affichage. */
.contentieux-photo {
    position: relative;
    overflow: hidden;
    border-radius: var(--rayon-carte);
    border: var(--filet) solid var(--navy-700);
    aspect-ratio: 4 / 3;
}
.contentieux-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 55% 40%;
}
@media (min-width: 900px) {
    .contentieux-photo { height: 100%; aspect-ratio: auto; }
}

/* --- Domaines : listes sémantiques dans les cartes ---------------- */
.carte__liste { display: flex; flex-direction: column; gap: 7px; }
.carte__liste li {
    position: relative;
    padding-left: 14px;
    color: var(--gray-200);
    font-size: var(--fs-sm);
    line-height: 1.45;
}
/* Le .docx liste les items en minuscules a la suite du premier ; en puces,
   on releve la capitale par presentation, sans toucher au contenu stocke. */
.carte__liste li::first-letter { text-transform: uppercase; }
.carte__liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 1px;
    background-color: var(--gold-500);
}

/* --- Accueil : bandeau de périmètre sous l'accroche --------------- */
.perimetre {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin-top: var(--esp-3);
    /* max-width: none annule la limite de lecture globale « p { max-width:
       68ch } » : à cette taille/tracking elle vaut ~549px, quasi égale à la
       largeur naturelle du texte (549px), ce qui forçait un retour à la
       ligne sur « Contentieux ». Même piège que .pied__credit. */
    max-width: none;
    white-space: nowrap; /* reste sur une ligne en desktop (2026-09-11) */
}
@media (max-width: 899px) {
    .perimetre { white-space: normal; } /* peut se répartir sur mobile */
}

/* --- Progression de l'accompagnement : entrée en cascade ----------
   Même principe que la section Publications de l'accueil : l'état AU REPOS
   est visible, l'animation ne fait qu'accompagner. Le décalage horizontal
   suit le sens de lecture de la chaîne. */
.progression[data-anime="1"] .progression__jalon {
    animation: prog-entre 500ms cubic-bezier(.2, .7, .2, 1) both;
}
.progression[data-anime="1"] .progression__jalon:nth-child(2) { animation-delay: 110ms; }
.progression[data-anime="1"] .progression__jalon:nth-child(3) { animation-delay: 220ms; }
.progression[data-anime="1"] .progression__jalon:nth-child(4) { animation-delay: 330ms; }
.progression[data-anime="1"] .progression__jalon:nth-child(5) { animation-delay: 440ms; }

@keyframes prog-entre { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .progression[data-anime="1"] .progression__jalon {
        animation-duration: 1ms !important;
        animation-delay: 0s !important;
    }
}

/* =============================================================================
   Bibliothèque — fonds documentaire en accès libre
   Même vocabulaire que .offre (rangée + filet), sans numérotation : ce sont
   des documents indépendants, pas une progression.
   ============================================================================= */
.documents {
    display: grid;
    border-top: 1px solid var(--navy-700);
    margin-top: var(--esp-6);
}
.document {
    display: grid;
    gap: var(--esp-3);
    padding: var(--esp-5) 0;
    border-bottom: 1px solid var(--navy-700);
    align-items: start;
}
@media (min-width: 800px) {
    .document {
        grid-template-columns: 1fr auto;
        gap: var(--gouttiere);
        align-items: center;
    }
}
.document__titre { font-size: var(--fs-h3); margin: 0 0 var(--esp-2); }
.document__resume {
    color: var(--gray-200);
    font-size: var(--fs-sm);
    line-height: 1.6;
    margin: 0 0 var(--esp-2);
    max-width: 62ch;
}
.document__meta {
    font-family: var(--f-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0;
}
.document__action { justify-self: start; }
@media (min-width: 800px) { .document__action { justify-self: end; } }