/* =====================================================================
   STYLE « ANCIEN SITE » — couche visuelle posée sur site.css.
   Repris de archive/site-v1 : fond crème, halos jaunes, lignes de grille,
   grands titres condensés en capitales, sur-titres à trait jaune,
   bandeau défilant.

   Chargée selon CONFIG.STYLE_ANCIEN_PARTOUT (site/config.mjs) :
   false = accueil seulement (aperçu), true = toutes les pages.

   Contrastes (WCAG AA) sur crème #FAF7F0 :
     marine #0F1B33 → 16,4:1 · encre #14110E → 17,6:1 · texte-2 #55504A → 7,4:1
     texte-2 sur crème foncé #F2EDE1 → 6,8:1. Le jaune reste décoratif
     (traits, puces) ou en fond de bouton avec texte marine (9,3:1).
   ===================================================================== */

:root {
  --creme: #FAF7F0;
  --creme-fonce: #F2EDE1;
  --encre: #14110E;

  --fond: var(--creme);
  --fond-doux: var(--creme-fonce);
  --surface: #FFFFFF;
  --texte-2: #55504A;
  --filet: #E7DFCE;

  --police-titre: "Saira Condensed", "Arial Narrow", sans-serif;
  --halo: rgba(255, 199, 44, .16);
  --ligne-grille: rgba(15, 27, 51, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0A1326;
    --fond-doux: #0D182E;
    --surface: #0F1B33;
    --texte-2: #B8C2D6;
    --filet: #22304D;
    --encre: #FFFFFF;
    --halo: rgba(255, 199, 44, .07);
    --ligne-grille: rgba(255, 255, 255, .05);
  }
}

/* ---------- Grands titres condensés (H1/H2 uniquement) ---------- */
h1, h2 {
  font-family: var(--police-titre);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .95;
}
h1 { font-size: clamp(3rem, 1.4rem + 6vw, 5.6rem); }
@media (min-width: 900px) { .hero .hero-grille { grid-template-columns: 1.15fr .85fr; } }
h2 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.hero-simple h1 { font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem); }
@media (max-width: 719px) { .hero-simple.hero-service h1 { font-size: 2.3rem; } }
.creneaux h2, .prose h2, .section .carte h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
.pied h2 { font-family: var(--police); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; line-height: 1.4; }
.hero h1 .l1 { display: block; color: var(--encre); }
.hero h1 .l2 { display: block; color: var(--texte); }

@media (max-width: 479px) { .surtitre { letter-spacing: .14em; } }

/* ---------- Sur-titre : capitales espacées + trait jaune ---------- */
.surtitre { letter-spacing: .22em; align-items: flex-start; line-height: 1.6; color: var(--texte); font-weight: 600; }
.surtitre::before { flex: none; margin-top: .75em; width: 38px; height: 2px; border-radius: 2px; background: var(--jaune); }

/* ---------- En-tête : menu en capitales ---------- */
.nav-principale a, .nav-deroulant > button { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; }
.sous-menu a { text-transform: none; letter-spacing: 0; font-size: var(--t-s); font-weight: 600; }
.entete .btn-principal { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.logo span { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Fond : halos jaunes + lignes de grille ---------- */
.hero, .hero-simple:not(.hero-inverse) { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .hero-simple:not(.hero-inverse)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--ligne-grille), var(--ligne-grille)) 0 33% / 100% 1px no-repeat,
    linear-gradient(var(--ligne-grille), var(--ligne-grille)) 0 66% / 100% 1px no-repeat,
    linear-gradient(var(--ligne-grille), var(--ligne-grille)) 33% 0 / 1px 100% no-repeat,
    linear-gradient(var(--ligne-grille), var(--ligne-grille)) 66% 0 / 1px 100% no-repeat;
}
.hero::after, .hero-simple:not(.hero-inverse)::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 140%; height: 140%; left: -20%; top: -20%;
  background:
    radial-gradient(closest-side at 78% 22%, var(--halo), transparent),
    radial-gradient(closest-side at 12% 85%, var(--halo), transparent 80%);
  animation: halo 18s ease-in-out infinite alternate;
}
@keyframes halo { to { transform: translate3d(3%, -4%, 0) scale(1.05); } }
body { background-image: radial-gradient(60vw 60vw at 100% 0, var(--halo), transparent 70%); background-repeat: no-repeat; }

/* ---------- Bandeau défilant ---------- */
.bandeau { overflow: hidden; border-block: 1px solid var(--filet); background: var(--fond-doux); padding: 18px 0; }
.bandeau-piste { display: flex; width: max-content; animation: defile 32s linear infinite; }
.bandeau:hover .bandeau-piste { animation-play-state: paused; }
.bandeau-groupe { display: flex; }
.bandeau span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-2); }
.bandeau span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--jaune); }
@keyframes defile { to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .hero::after, .hero-simple::after { animation: none; }
  .bandeau-piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 8px; padding-inline: var(--gouttiere); }
  .bandeau-groupe[aria-hidden="true"] { display: none; }
  .bandeau-groupe { flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}

/* ---------- Boutons arrondis ---------- */
.btn { border-radius: 999px; }