/* ════════════════════════════════════════════════════════════════════
   SENTINELLE DUARTÉ — layout.css
   Conteneurs, en-tête, navigation, pied de page, hero, grilles.
   Mobile-first : règles smartphone d'abord, puis @media min-width.
   ════════════════════════════════════════════════════════════════════ */

/* ─── CONTAINERS ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

@media (min-width: 768px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

/* ════════════════════════════════════════════════════════════════════
   EN-TÊTE PRINCIPAL
   ════════════════════════════════════════════════════════════════════ */
.site-header {
  background: var(--navy);
  color: #fff;
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid rgba(197, 155, 42, 0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Logo / titre site */
.site-brand {
  display: flex;
  flex-direction: column;
  border-bottom: none;
  color: #fff;
  flex-shrink: 0;
}
.site-brand:hover { color: var(--gold); }
.site-brand .brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}
.site-brand .brand-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
}

/* Bouton burger (mobile uniquement) */
.nav-toggle {
  background: transparent;
  border: 1px solid rgba(197, 155, 42, 0.4);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-toggle:hover { background: rgba(197, 155, 42, 0.1); }
.nav-toggle .burger {
  width: 18px;
  height: 14px;
  position: relative;
  display: inline-block;
}
.nav-toggle .burger::before,
.nav-toggle .burger::after,
.nav-toggle .burger span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}
.nav-toggle .burger::before { top: 0; }
.nav-toggle .burger span    { top: 6px; }
.nav-toggle .burger::after  { top: 12px; }
.nav-toggle[aria-expanded="true"] .burger::before { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger span    { opacity: 0; }
.nav-toggle[aria-expanded="true"] .burger::after  { top: 6px; transform: rotate(-45deg); }

/* ────────────────────────────────────────────────────────────────
   Menu principal — comportement mobile
   ----------------------------------------------------------------
   - Panneau aside qui occupe 80% de l'écran (max 360px)
   - Glisse depuis la droite
   - Backdrop noir semi-transparent derrière (créé par main.js)
   - Bouton de fermeture en haut à droite dans l'aside
   ──────────────────────────────────────────────────────────────── */

/* Backdrop : voile noir qui apparaît derrière l'aside.
   Créé dynamiquement par main.js, présent dans le DOM mais
   invisible tant que data-open != "true". */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  /* Au-dessus du header (100), du contenu et du footer fixe (1000),
     mais SOUS l'aside (1200) pour que celle-ci reste lisible. */
  z-index: 1100;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.nav-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* Panneau aside : 80% de la largeur (limité à 360px sur grands mobiles) */
.site-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  /* 80% strict de la largeur du viewport, quelle que soit la taille
     d'écran (smartphone ou tablette en mode portrait). Les 20%
     restants à gauche laissent voir le backdrop noir → l'utilisateur
     comprend que l'aside est déplié par-dessus la page. */
  width: 80%;
  background: var(--navy);
  /* Padding-bottom dimensionné pour laisser respirer les icônes
     réseaux au-dessus du footer fixe. Les mentions légales sont
     en position absolute sur le côté droit, donc elles n'occupent
     plus d'espace vertical. Composition :
     - var(--footer-mobile-h) ≈ 64px : hauteur du footer fixe
     - 64px : marge de respiration sous le filet OR
     - safe-area iOS */
  padding: 72px 28px calc(var(--footer-mobile-h, 64px) + 64px + env(safe-area-inset-bottom, 0px)) 28px;
  transform: translateX(100%);
  transition: transform 0.32s ease;
  /* L'aside doit passer DEVANT le header (z-header = 100) ET DEVANT
     le footer fixe mobile (z-index 1000 défini dans components.css).
     Sans ça, l'aside s'ouvre mais reste cachée derrière le header
     ou tronquée par le footer fixe → effet "ne s'ouvre pas". */
  z-index: 1200;
  overflow-y: auto;
  /* Flex column : permet à .site-nav-extras (margin-top:auto)
     de se coller en bas de l'aside, sous le nav. */
  display: flex;
  flex-direction: column;
  /* Ombre douce sur la tranche gauche pour détacher du voile noir */
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
}
.site-nav[data-open="true"] { transform: translateX(0); }

/* Bouton de fermeture (croix) — injecté en haut à droite de l'aside */
.nav-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(197, 155, 42, 0.4);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-close:hover,
.nav-close:focus-visible {
  background: rgba(197, 155, 42, 0.12);
  border-color: var(--gold);
  outline: none;
}
.nav-close:active { transform: scale(0.92); }
.nav-close svg {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

/* ─── Liste de navigation (aside ouvert sur mobile) ──────────────
   Présentation soignée : chaque item est ligne pleine largeur,
   avec icône à gauche, libellé + chevron à droite, et une fine
   séparation dorée entre chaque item. Effet hover sobre mais
   marquant : glissement latéral, accent OR, et barre verticale
   gauche qui s'étire. */
.site-nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Bordure haute pour que le 1er item ait aussi un séparateur */
  border-top: 1px solid rgba(197, 155, 42, 0.18);
  /* Ne pas s'étirer dans le flex column de l'aside —
     laisse la place aux extras (réseaux + légal) en bas. */
  flex: 0 0 auto;
}
.site-nav li {
  margin: 0;
  padding: 0;
}
.site-nav a {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  /* Layout en ligne : icône | libellé | chevron */
  display: flex;
  align-items: center;
  gap: 14px;
  /* Padding-left constant à 22px : pas de glissement au hover.
     La barre verticale ::before (3px) s'inscrit dans cet espace
     sans pousser le contenu — pas de saut horizontal. */
  padding: 14px 14px 14px 22px;
  /* Séparateur fin OR à 18% entre les items */
  border-bottom: 1px solid rgba(197, 155, 42, 0.18);
  position: relative;
  /* Transitions sur couleur + fond uniquement (plus de padding) */
  transition: color 0.25s ease,
              background-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Icône SVG (injectée par main.js) — taille fixe, hérite la couleur */
.site-nav a .nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);             /* icône toujours dorée pour ancrer l'œil */
  /* Transition limitée à la couleur — pas de transform → pas de décalage */
  transition: color 0.25s ease;
}
.site-nav a .nav-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Libellé : pousse le chevron à droite */
.site-nav a .nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Chevron à droite — apparaît au hover/focus pour signaler le clic */
.site-nav a .nav-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0;
  transform: translateX(-4px);
  color: var(--gold);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.site-nav a .nav-chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Barre verticale gauche — invisible au repos, s'étire au hover.
   Restreinte aux items du nav principal (.site-nav ul a) pour ne pas
   polluer les liens sociaux / légaux qui n'ont rien à voir avec le nav. */
.site-nav ul a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--gold);
  transform: translateY(-50%);
  transition: height 0.28s ease;
  border-radius: 0 2px 2px 0;
}

/* ─── Effet hover / focus / page courante (NAV PRINCIPAL UNIQUEMENT) ─
   Restreint à .site-nav ul a pour ne pas affecter les liens sociaux
   ni les liens légaux, qui ont leur propre style en bas de l'aside.
   Sobre mais marquant :
   - libellé en or
   - glissement latéral léger (4px)
   - barre verticale gauche qui s'étire à pleine hauteur
   - chevron qui apparaît à droite
   - icône qui se décale légèrement
   - fond très léger pour matérialiser la zone tactile */
.site-nav ul a:hover,
.site-nav ul a:focus-visible,
.site-nav ul a[aria-current="page"] {
  color: var(--gold);
  background-color: rgba(197, 155, 42, 0.06);
  /* Pas de changement de padding au hover → aucun saut horizontal.
     L'effet de glissement est porté par la barre ::before qui
     s'étire en hauteur, sans toucher au layout du contenu. */
  /* Surcharge la bordure héritée (a { border-bottom: 1px solid var(--gold) }) */
  border-bottom: 1px solid rgba(197, 155, 42, 0.18);
  outline: none;
}
.site-nav ul a:hover::before,
.site-nav ul a:focus-visible::before,
.site-nav ul a[aria-current="page"]::before {
  height: 70%;
}
.site-nav ul a:hover .nav-chevron,
.site-nav ul a:focus-visible .nav-chevron,
.site-nav ul a[aria-current="page"] .nav-chevron {
  opacity: 1;
  transform: translateX(0);
}
/* Icône colorée en or au hover (pas de translation pour éviter
   tout décalage visuel — l'effet repose sur la couleur uniquement). */
.site-nav ul a:hover .nav-icon,
.site-nav ul a:focus-visible .nav-icon {
  color: var(--gold);
}

/* ─── Zone basse de l'aside : réseaux sociaux + liens légaux ─────
   Injectée par main.js après le <ul> du nav, en dehors du nav lui-même.
   Ordre visuel (haut → bas) :
     1. Réseaux Facebook / LinkedIn (au-dessus du séparateur)
     2. Filet OR fin de séparation
     3. Liens légaux discrets
   Les réseaux n'appartiennent PAS au nav (pas de barre verticale,
   pas de chevron, pas de hover de glissement). Effet hover :
   GLOW doré multicouches — high-tech sobre, dans l'esprit du
   FAB central du footer mobile. */
/* Le bloc extras est poussé vers le bas de l'aside par margin-top:auto.
   Contient désormais uniquement les icônes réseaux (le bloc légal
   est extrait du flux et ancré à droite en vertical via position:absolute).
   Le gap reste utile au cas où d'autres enfants seraient ajoutés. */
.site-nav-extras {
  margin-top: auto;        /* pousse au bas de l'aside */
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bloc social — rangée d'icônes centrée, au-dessus du séparateur */
.site-nav-social {
  display: flex;
  gap: 14px;
  justify-content: center;
  /* Aération généreuse au-dessus + écart marqué (80px) avant le
     séparateur HR — donne aux icônes une zone de respiration nette
     dans l'aside et les détache visuellement du filet OR. */
  padding: 8px 0 80px;
  /* Filet OR placé en bas : sépare les réseaux du bloc légal qui
     suivait avant le passage en vertical à droite. Le filet est
     conservé comme repère visuel décoratif. */
  border-bottom: 1px solid rgba(197, 155, 42, 0.18);
}
.site-nav-social a {
  /* Mobile : icônes généreuses (52×52) pour mieux remplir
     l'espace disponible et constituer un repère visuel fort.
     Surface tactile bien au-delà du WCAG (≥ 44px). */
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(197, 155, 42, 0.45);
  color: var(--gold);
  text-decoration: none;
  /* Surcharge stricte de la règle globale a { border-bottom:1px solid gold } */
  border-bottom: 1px solid rgba(197, 155, 42, 0.45);
  padding: 0;
  position: relative;            /* support pour le glow ::after */
  /* Transitions douces : couleur + glow (box-shadow), aucun transform */
  transition: background 0.30s ease,
              border-color 0.30s ease,
              color 0.30s ease,
              box-shadow 0.30s ease;
  -webkit-tap-highlight-color: transparent;
}
.site-nav-social a svg {
  width: 24px;       /* SVG agrandi en proportion (24×24 vs 19×19) */
  height: 24px;
  display: block;
  pointer-events: none;
  transition: filter 0.30s ease;
}

/* ─── Effet HOVER : GLOW doré multicouches ─────────────────────────
   Inspiré du FAB du footer mobile (triple anneau + halo diffus).
   Trois couches additives :
   - anneau OR plein 2px immédiat (présence)
   - halo OR semi-dense à 6px (chaleur)
   - halo OR diffus à 12px (rayonnement high-tech)
   Plus une légère lueur intérieure pour matérialiser la profondeur. */
.site-nav-social a:hover,
.site-nav-social a:focus-visible {
  color: #ffffff;
  background: rgba(197, 155, 42, 0.14);
  border-color: var(--gold);
  border-bottom-color: var(--gold);
  box-shadow:
    0 0 0 2px rgba(197, 155, 42, 0.55),
    0 0 12px 1px rgba(197, 155, 42, 0.55),
    0 0 24px 4px rgba(197, 155, 42, 0.25),
    inset 0 0 12px rgba(197, 155, 42, 0.20);
  outline: none;
}
/* Léger éclat de l'icône au hover — drop-shadow OR pour booster la
   sensation lumineuse sans aller dans le kitch (intensité modérée) */
.site-nav-social a:hover svg,
.site-nav-social a:focus-visible svg {
  filter: drop-shadow(0 0 4px rgba(197, 155, 42, 0.65));
}
/* Feedback tap léger sans transform : juste un atténuement */
.site-nav-social a:active {
  background: rgba(197, 155, 42, 0.22);
}

/* Bloc légal — liens très discrets sous les réseaux */
/* ─── Mentions légales en VERTICAL sur le côté droit ────────────
   Style "tranche de prospectus" : les deux liens sont ancrés en
   position absolue contre le bord droit de l'aside, pivotés à 90°
   (lecture de bas en haut). Le bloc commence proche du footer fixe
   (ancré par `bottom`) plutôt que centré, pour laisser respirer le
   haut de l'aside et concentrer les mentions près du footer. */
/* Position du texte vertical à droite. Géométrie après rotation
   -90° avec transform-origin: right bottom :
   - le point d'ancrage (bottom right) reste fixe ;
   - le texte se déploie HORIZONTALEMENT vers la gauche AVANT rotation,
     ce qui après rotation place la fin du texte (« Confidentialité »)
     EN HAUT et le début (« Mentions légales ») EN BAS du bloc vertical.
   - le texte mesure ~210px de long en 9px monospace, donc on doit
     réserver cette hauteur entre le footer fixe et le sommet du texte.
   Solution : ancrer le bloc avec `bottom` suffisamment élevé pour
   que TOUT le texte tienne au-dessus du footer fixe. */
.site-nav-legal {
  position: absolute;
  /* Décalage du bord droit : 18px laisse la place au texte vertical
     (~13px de hauteur de ligne + 5px de respiration) sans qu'il soit
     coupé par le bord de l'aside. La rotation autour de right bottom
     fait que le texte se trouve LARGEMENT à gauche de ce point. */
  right: 18px;
  /* Position verticale : CENTRÉE au niveau des icônes réseaux sociaux
     plutôt qu'au niveau du footer fixe.
     Calcul depuis le bas de l'aside :
     - padding-bottom de l'aside ≈ 128px (footer-h + 64px + safe-area)
     - padding-bottom du bloc social (80px) qui s'achève sur le filet OR
     - centre des icônes 52×52 ≈ +26px au-dessus du filet
     Total ≈ 234px → on règle `bottom` pour atterrir vers ce point. */
  bottom: calc(var(--footer-mobile-h, 64px) + 170px + env(safe-area-inset-bottom, 0px));
  /* Centre le bloc vertical sur la hauteur `bottom`. La rotation
     -90° autour de right center fait pivoter le texte autour de
     son milieu vertical droit — pratique pour l'aligner avec un
     élément voisin (les icônes réseaux). */
  transform: translateY(50%) rotate(-90deg);
  transform-origin: right center;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: var(--font-mono);
  /* Taille réduite pour discrétion maximale (au lieu de 9px) */
  font-size: 7.5px;
  letter-spacing: 0.07em;
  color: rgba(255, 255, 255, 0.32);
  z-index: 1;
  pointer-events: auto;
}
.site-nav-legal a {
  color: rgba(255, 255, 255, 0.32);
  text-decoration: none;
  border-bottom: none;       /* neutralise la règle globale */
  padding: 2px 3px;
  transition: color 0.22s ease;
}
.site-nav-legal a:hover,
.site-nav-legal a:focus-visible {
  /* Hover gris clair (au lieu de l'or) — pour rester très discret
     et ne pas concurrencer visuellement les autres éléments dorés
     du nav. Le texte s'éclaircit suffisamment pour signaler le hover. */
  color: rgba(255, 255, 255, 0.85);
  border-bottom: none;
  outline: none;
}
/* Séparateur · entre les deux liens — un peu plus net que les liens
   eux-mêmes pour bien se voir, mais reste dans la tonalité discrète */
.site-nav-legal .sep {
  display: inline-block;
  color: rgba(197, 155, 42, 0.5);  /* teinte OR atténuée */
  font-weight: 600;
  user-select: none;
  /* Petit ajustement vertical pour mieux aligner le · sur la baseline */
  line-height: 1;
  transform: translateY(-1px);
}

/* Respect "réduire les animations" — coupe les transitions et les
   glissements latéraux du nav. Le glow doré des réseaux reste actif
   (c'est un effet visuel statique, pas une animation). */
@media (prefers-reduced-motion: reduce) {
  .site-nav ul a,
  .site-nav ul a::before,
  .site-nav ul a::after,
  .site-nav ul a .nav-icon,
  .site-nav ul a .nav-chevron,
  .site-nav-social a,
  .site-nav-social a svg,
  .site-nav-legal a {
    transition: none;
  }
  /* Underline desktop : on l'affiche directement sans animation
     pour les utilisateurs préférant ne pas voir d'animation. */
  .site-nav ul a:hover::after,
  .site-nav ul a:focus-visible::after,
  .site-nav ul a[aria-current="page"]::after {
    transition: none;
  }
}

/* Desktop : nav inline, pas de burger, pas de backdrop */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-close  { display: none; }   /* la croix n'a pas lieu d'être en desktop */
  .nav-backdrop { display: none; } /* le voile non plus */
  .site-nav {
    position: static;
    top: auto;
    bottom: auto;
    right: auto;
    width: auto;
    background: transparent;
    padding: 0;
    transform: none;
    overflow: visible;
    z-index: auto;
    box-shadow: none;
    /* Bascule en flex horizontal pour aligner items + réseaux
       côte à côte dans la barre desktop. Annule le flex-column
       du mobile. */
    flex-direction: row;
    align-items: center;
  }
  .site-nav ul {
    flex-direction: row;
    gap: 2px;                /* marges réduites : les liens se touchent presque
                                (l'air vient du padding interne 8px 18px) */
    align-items: center;
    /* Pas de bordure horizontale sur la barre desktop */
    border-top: none;
  }
  /* ─── Items du nav desktop ─────────────────────────────────────
     Refonte du hover : underline animée qui s'étire depuis le centre
     + transition de couleur ivoire → OR + léger glow doré sur le
     libellé. Aucun changement de padding ou de bordure native →
     zéro décalage horizontal. La règle globale `a { border-bottom:
     1px solid var(--gold) }` est neutralisée ici, l'underline est
     portée par ::after pour permettre l'animation depuis le centre. */
  .site-nav ul a {
    font-size: 16px;                 /* +1px : meilleure lisibilité */
    font-family: var(--font-serif);
    font-weight: 600;                /* +100 : libellés plus francs sur navy */
    letter-spacing: 0.015em;
    /* Padding latéral réduit de moitié (18px → 9px) : libellés plus
       rapprochés. Identique au repos et au hover → pas de saut. */
    padding: 8px 9px;
    display: inline-block;
    /* Neutralise la bordure globale a { border-bottom: 1px solid gold } */
    border-bottom: none;
    background: transparent;
    color: #FFFFFF;                  /* blanc plein → contraste maximal */
    /* Ombre douce qui détache nettement le libellé du fond navy */
    text-shadow: 0 1px 2px rgba(11, 18, 38, 0.60);
    position: relative;
    /* Fade DOUX et progressif (couleur + lueur) : ~0.45s avec une courbe
       ease souple → l'apparition/disparition de la lueur n'est jamais brute. */
    transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                text-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Underline animée — barre OR de 1.5px sous le libellé, qui s'étire
     depuis le centre (scaleX 0 → 1). Inactive (scaleX 0) au repos. */
  .site-nav ul a::after {
    content: '';
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 1.5px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    /* Léger glow vertical pour le côté high-tech (subtil) */
    box-shadow: 0 0 6px rgba(197, 155, 42, 0.45);
  }

  /* Hover / focus / page courante : couleur OR clair + LUEUR dorée
     multicouche sur le texte (même esprit lumineux que les icônes
     réseaux sociaux). Le fade est porté par la transition de base. */
  .site-nav ul a:hover,
  .site-nav ul a:focus-visible,
  .site-nav ul a[aria-current="page"] {
    color: var(--gold-light);
    text-shadow:
      0 0 6px  rgba(232, 201, 106, 0.65),   /* halo proche, dense    */
      0 0 14px rgba(197, 155, 42, 0.55),    /* halo moyen, chaud      */
      0 0 26px rgba(197, 155, 42, 0.30);    /* rayonnement diffus     */
    background: transparent;
    outline: none;
  }
  .site-nav ul a:hover::after,
  .site-nav ul a:focus-visible::after,
  .site-nav ul a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* Cacher les éléments décoratifs réservés au mobile */
  .site-nav ul a::before,
  .site-nav ul a .nav-icon,
  .site-nav ul a .nav-chevron { display: none; }

  /* ─── Desktop : bloc extras (réseaux + légal) ─────────────────
     En desktop, l'aside n'existe pas. On garde uniquement les
     icônes sociales, alignées à droite des items du menu dans
     le header. Les liens légaux sont masqués (réservés à l'aside
     mobile pour éviter la surcharge visuelle du header desktop). */
  .site-nav-extras {
    /* Annule le margin-top:auto + flex-column + gap du mobile ;
       en desktop la zone suit naturellement le <ul> dans la barre
       horizontale */
    margin-top: 0;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .site-nav-legal { display: none; }   /* réservé au mobile uniquement */

  /* Réseaux : visibles dans le header, alignés horizontalement,
     pas de filet de séparation (réservé à l'aside vertical) */
  .site-nav-social {
    border-bottom: none;
    margin-bottom: 0;
    padding: 0;
    gap: 10px;
    margin-left: var(--space-md);  /* respiration vs items du nav */
  }
  /* Icônes réseaux desktop : agrandies pour la lisibilité (et surface
     tactile confortable), tout en conservant le style + le glow doré
     cohérents avec le mobile. */
  .site-nav-social a {
    width: 42px;
    height: 42px;
  }
  .site-nav-social a svg {
    width: 22px;
    height: 22px;
  }
  /* Le hover glow doré est hérité du bloc mobile — aucune surcharge
     nécessaire ici, l'effet reste identique. */
}

/* ════════════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════════════ */
.hero {
  background: var(--navy);
  color: #fff;
  padding: var(--space-xl) 0 var(--space-xl);
  overflow: hidden;
  position: relative;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(197, 155, 42, 0.18);
  pointer-events: none;
}
.hero::before {
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
}
.hero::after {
  bottom: -80px;
  right: 80px;
  width: 220px;
  height: 220px;
  border-color: rgba(197, 155, 42, 0.12);
}

/* Conteneur intérieur du hero — centré horizontalement.
   Le texte est aligné au centre (titre, sous-titre, eyebrow, gold-rule,
   CTAs) pour une présentation symétrique sur toutes les pages. */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.hero h1 {
  color: #fff;
  font-size: var(--fs-hero);
  line-height: 1.12;
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.hero h1 em {
  color: var(--gold);
  font-style: italic;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  /* Centré sous le titre quand .hero-inner est en text-align: center */
  margin: 0 auto;
}
/* Le filet doré et la rangée de CTAs s'alignent sur le contenu centré */
.hero .gold-rule {
  margin-left: auto;
  margin-right: auto;
}
.hero .home-cta-row {
  justify-content: center;
}

/* Variante : hero secondaire (pages internes), plus compact */
.hero--page {
  padding: var(--space-lg) 0 var(--space-lg);
}
.hero--page h1 {
  font-size: var(--fs-h1);
}

/* ════════════════════════════════════════════════════════════════════
   FIL D'ARIANE
   ════════════════════════════════════════════════════════════════════ */
.breadcrumbs {
  padding: var(--space-sm) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.breadcrumbs li::after {
  content: '/';
  margin-left: 6px;
  color: var(--gold);
}
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a {
  color: var(--muted);
  border-bottom: none;
  text-transform: uppercase;
}
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs [aria-current="page"] {
  color: var(--navy);
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   SECTIONS DE PAGE
   ════════════════════════════════════════════════════════════════════ */
.section {
  padding: var(--space-xl) 0;
}
.section--narrow { padding: var(--space-lg) 0; }
.section--alt    { background: rgba(31, 47, 90, 0.03); }
.section--dark   {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.88);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }

.section-head {
  margin-bottom: var(--space-lg);
}
.section-head h2 {
  margin-bottom: var(--space-sm);
}
.section-head p {
  color: var(--muted);
  max-width: 60ch;
}

/* ════════════════════════════════════════════════════════════════════
   GRILLES
   ════════════════════════════════════════════════════════════════════ */
.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER INSTITUTIONNEL
   ════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--space-xl) 0 var(--space-md);
  margin-top: var(--space-2xl);
  font-size: var(--fs-small);
}
.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(197, 155, 42, 0.35);
}
.site-footer a:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.footer-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-lg);
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.footer-col h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-md);
  font-weight: 500;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col p  { margin-bottom: 8px; color: rgba(255, 255, 255, 0.7); }

.footer-brand h2 {
  color: #fff;
  font-size: 22px;
  margin-bottom: 6px;
}
.footer-brand p {
  font-size: 13px;
  line-height: 1.6;
}

.footer-bottom {
  border-top: 1px solid rgba(197, 155, 42, 0.18);
  padding-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: none;
}
.footer-bottom a:hover { color: var(--gold); }