/* Baza — site public SEO. Direction artistique « Riviera Désir Moderne »
   (BAZA-S109C) : refonte image-first, chaleureuse et premium.
   Feuille UNIQUE, auto-hébergée : zéro police externe, zéro CDN, zéro JavaScript.
   Palette imposée : crème / champagne / pêche, corail comme accent du désir,
   émeraude comme couleur de confiance (CTA, confidentialité, footer), or en
   filet de détail, encre chaude pour le texte. Mobile-first. */

:root {
  --cream: #fff4e4;
  --champagne: #ffe7c7;
  --peach: #f8d7be;
  /* Corail décoratif : filets, dégradés, fonds translucides. N'est JAMAIS
     utilisé pour du texte ni pour un indicateur d'état (contraste insuffisant). */
  --coral: #e66f5c;
  /* BAZA-S236G — corail de TEXTE assombri #c9543f → #b8492f.
     #c9543f ne donnait que 4,00:1 sur le crème (#fff4e4) et 4,35:1 sur le blanc :
     sous le minimum WCAG AA de 4,5:1 pour du texte normal, alors que c'est la
     couleur de TOUS LES LIENS du site (`a { color: var(--coral-deep) }`).
     #b8492f donne 4,79:1 sur crème et 5,21:1 sur blanc (vérifié par la gate
     `check:web-s236g-a11y-contrast`). Teinte volontairement proche : ajustement
     minimal, direction artistique conservée. */
  --coral-deep: #b8492f;
  --green: #087a37;
  --green-mid: #0a8f41;
  --green-deep: #064b2a;
  --gold: #d7a84f;
  --gold-soft: #e6c37e;
  --ink: #211612;
  --text: #3a2a20;
  --muted: #6f5a4e;

  --surface: #fffdf7;
  --surface-2: #fdefdc;
  --line: rgba(215, 168, 79, 0.36);
  --line-soft: rgba(33, 22, 18, 0.1);
  --cream-tint: rgba(255, 244, 228, 0.86);

  --shadow-soft: 0 18px 44px -28px rgba(120, 66, 38, 0.55);
  --shadow-card: 0 26px 60px -32px rgba(120, 60, 34, 0.6);
  --radius: 28px;
  --radius-sm: 16px;
  --container: 70rem;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(60rem 40rem at 88% -8%, rgba(230, 111, 92, 0.16), transparent 58%),
    radial-gradient(52rem 38rem at -10% 10%, rgba(8, 122, 55, 0.08), transparent 52%),
    linear-gradient(174deg, var(--cream) 0%, var(--champagne) 46%, var(--peach) 100%);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection {
  background: rgba(230, 111, 92, 0.28);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--coral-deep);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* BAZA-S236G — indicateur de focus clavier.
   Il portait `var(--coral)` (#e66f5c) : 2,84:1 sur le crème, sous le minimum de
   3:1 exigé pour un composant d'interface (WCAG 1.4.11). Il passe au corail de
   texte (4,79:1) et à 3px pour rester repérable au clavier. */
a:focus-visible,
.btn:focus-visible,
summary:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  color: var(--ink);
  text-wrap: balance;
}

/* Sur-titre : petit label or en capitales espacées, filet corail. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 0.7em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--coral), var(--gold));
}

.eyebrow--on-photo {
  color: var(--gold-soft);
}

.eyebrow--on-green {
  color: var(--gold-soft);
}

/* ---------- En-tête ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream-tint);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  box-shadow: 0 12px 30px -28px rgba(120, 60, 34, 0.7);
}

:target {
  scroll-margin-top: 92px;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
  flex-wrap: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Le logo PNG (bulle B) porte une marge transparente à droite. En S109H le
     retrait négatif (-6px) est allé TROP loin : le B « mangeait » le « a »
     (recette Philippe). Correctif S109I : gap nul + retrait négatif LÉGER
     seulement, calé pour laisser 2–4 px d'air réel entre le B visible et le
     « a », header ET footer, SANS jamais chevaucher le B. On doit lire « Baza »
     d'un seul tenant. Réglages header/footer distincts (tailles de logo
     différentes) — voir `.brand .brand-word` et `.footer-brand-row .brand-word`. */
  gap: 0;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

/* Le logo porte déjà le B : le wordmark n'affiche que "aza", en encre pleine.
   Pas d'accent ::first-letter — il colorerait un "a", le B vit dans l'image. */
.brand-word {
  font-family: var(--font-display);
  font-size: 1.78rem; /* ~28–30px, accordé au logo */
  font-weight: 700;
  letter-spacing: 0; /* pas de tracking positif : « aza » collé au B */
  line-height: 1;
  color: var(--ink);
}

/* BAZA-S219A : le nouveau logo.png (source Philippe, extérieur transparent)
   porte ~11 % de marge transparente sûre de chaque côté (pointe de bulle jamais
   coupée). L'ancien retrait NÉGATIF (-2px, S109I) « mangeait » le « a » avec ce
   logo (recette IMG_2023). On passe à 0 : l'air réel entre le B visible et le
   « a » (~4px au rendu) vient de la marge du PNG — jamais de chevauchement.
   L'ancienne règle S109I est conservée dans l'historique et annotée. */
.brand .brand-word {
  margin-left: 0;
}

.brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  filter: drop-shadow(0 3px 8px rgba(120, 60, 34, 0.28));
}

.site-nav {
  display: flex;
  gap: clamp(10px, 2.5vw, 22px);
  flex-wrap: wrap;
  margin-right: auto;
}

.site-nav a {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 5px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
  /* BAZA-S236G — le soulignement de la page courante est un indicateur d'ÉTAT :
     il passe au corail de texte pour atteindre 3:1 (WCAG 1.4.11). L'état reste
     par ailleurs porté par `aria-current` et par la couleur d'encre. */
  border-bottom-color: var(--coral-deep);
}

/* Groupe d'actions à droite du header (CTA + hamburger mobile). */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Le CTA du header a deux libellés : « Ouvrir l'application » (desktop) et
   « Ouvrir » (mobile, pour tenir sur une ligne avec le hamburger, sans scroll
   horizontal). Le libellé court est aria-hidden : les lecteurs d'écran lisent
   toujours le libellé complet. */
.header-cta__short {
  display: none;
}

/* ---------- Menu mobile (hamburger) — BAZA-S109I, 100 % CSS ----------
   Élément natif <details>/<summary> : aucun JavaScript. Masqué sur desktop
   (la nav texte suffit), affiché sous 760px. Panneau plein écran, liens
   inter-pages (la navigation recharge la page → le menu se referme seul). */
.m-nav {
  display: none;
}

.m-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

/* Masque le chevron natif du <summary> (WebKit + Firefox). */
.m-nav__toggle::-webkit-details-marker {
  display: none;
}

.m-nav__toggle::marker {
  content: "";
}

/* Icône hamburger : 3 barres (barre centrale + ::before/::after). */
.m-nav__bars,
.m-nav__bars::before,
.m-nav__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.m-nav__bars {
  position: relative;
}

.m-nav__bars::before,
.m-nav__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.m-nav__bars::before {
  top: -6px;
}

.m-nav__bars::after {
  top: 6px;
}

/* Ouvert : les barres deviennent une croix (X) de fermeture. */
.m-nav[open] .m-nav__bars {
  background: transparent;
}

.m-nav[open] .m-nav__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.m-nav[open] .m-nav__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.m-nav__panel {
  display: none;
}

.m-nav__eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

.m-nav__eyebrow--sub {
  margin-top: 22px;
  color: var(--muted);
}

.m-nav__links {
  display: flex;
  flex-direction: column;
}

.m-nav__links a {
  display: block;
  padding: 13px 4px;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}

.m-nav__links a:hover {
  text-decoration: none;
  color: var(--coral-deep);
}

.m-nav__links a[aria-current="page"] {
  color: var(--coral-deep);
}

.m-nav__links--cities {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.m-nav__links--cities a {
  padding: 8px 15px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, filter 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.btn:hover {
  text-decoration: none;
}

/* CTA de marque : émeraude profond, jamais fluo. */
.btn-primary {
  background: linear-gradient(152deg, var(--green-mid), var(--green) 52%, var(--green-deep));
  color: #fbf7ec;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 30px -16px rgba(8, 75, 42, 0.7);
}

.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn-ghost {
  border-color: rgba(33, 22, 18, 0.22);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}

.btn-ghost:hover {
  border-color: var(--coral);
  color: var(--coral-deep);
  background: rgba(230, 111, 92, 0.08);
}

.btn-ghost--on-photo {
  border-color: rgba(255, 244, 228, 0.55);
  color: #fff4e4;
  background: rgba(33, 22, 18, 0.24);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-ghost--on-photo:hover {
  border-color: #fff4e4;
  color: #fff;
  background: rgba(33, 22, 18, 0.4);
}

/* ---------- Badge « 100 % gratuit » (BAZA-S109J) ----------
   VRAI composant HTML/CSS (jamais une image) : texte net et indexable, petit
   pictogramme SVG local. Premium, discret : fond champagne + vert doux, bord fin.
   Jamais d'effet promo criard. */
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--green-deep);
  background: linear-gradient(120deg, rgba(255, 231, 199, 0.66), rgba(8, 122, 55, 0.12));
  border: 1px solid rgba(8, 122, 55, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.free-badge__icon {
  flex: 0 0 auto;
  color: var(--green);
}

/* Variante pied de page (fond vert profond) : texte crème, filet doré discret. */
.free-badge--on-green {
  color: #fff4e4;
  background: rgba(255, 244, 228, 0.08);
  border-color: rgba(215, 168, 79, 0.42);
  box-shadow: none;
}

.free-badge--on-green .free-badge__icon {
  color: var(--gold-soft);
}

/* Espacements contextuels selon l'emplacement. */
.home-hero__text .free-badge {
  margin: 0 0 1.2em;
}

.home-final .free-badge {
  margin: 1.4em auto 0;
}

.hero .free-badge {
  margin-top: 22px;
}

.footer-brand .free-badge {
  margin-top: 0.9em;
}

main {
  display: block;
}

/* ============================================================
   ACCUEIL IMAGE-FIRST (BAZA-S109C)
   ============================================================ */

/* ---------- Hero split (desktop ≥ 900px) / colonne (mobile < 900px) ----------
   Fond chaud dégradé, texte en encre sur fond clair, image dans une carte
   arrondie et lumineuse. Aucun texte blanc sur les visages, aucun plein cadre
   sombre derrière le titre (BAZA-S109D). */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(40rem 30rem at 92% 4%, rgba(230, 111, 92, 0.16), transparent 60%),
    radial-gradient(34rem 26rem at -6% 98%, rgba(8, 122, 55, 0.1), transparent 58%),
    linear-gradient(168deg, var(--cream) 0%, var(--champagne) 58%, var(--peach) 100%);
  border-bottom: 1px solid var(--line);
}

.home-hero__inner {
  max-width: 76rem; /* ~1215px : hero un peu plus large que le corps */
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  padding-top: clamp(40px, 7vw, 104px);
  padding-bottom: clamp(40px, 7vw, 104px);
}

@media (min-width: 900px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

.home-hero__text {
  min-width: 0;
}

.home-hero h1 {
  margin: 0 0 0.4em;
  color: var(--ink);
  font-size: clamp(2.3rem, 5.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.home-hero__lead {
  margin: 0 0 1.5em;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  max-width: 40ch;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 1.6em;
}

.home-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 1.2em;
  padding: 0;
  list-style: none;
}

.home-proofs li {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-deep);
  background: rgba(8, 122, 55, 0.08);
  border: 1px solid rgba(8, 122, 55, 0.24);
}

.home-hero__note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

.home-hero__media {
  position: relative;
  isolation: isolate;
}

.home-hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

@media (min-width: 900px) {
  .home-hero__img {
    aspect-ratio: 5 / 4;
    max-height: 540px;
  }
}

.home-hero__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -7% 2% -11% 2%;
  background: radial-gradient(58% 56% at 60% 42%, rgba(8, 122, 55, 0.14), transparent 72%);
}

/* ---------- Trois cartes visuelles ---------- */

.home-cards {
  padding-top: clamp(40px, 7vw, 78px);
  padding-bottom: clamp(8px, 2vw, 18px);
}

.home-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.6vw, 26px);
}

@media (min-width: 780px) {
  .home-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 70px -30px rgba(120, 60, 34, 0.62);
}

.home-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.home-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-card__body {
  padding: clamp(18px, 2.4vw, 26px);
}

.home-card__body h2 {
  margin: 0 0 0.4em;
  font-size: clamp(1.2rem, 2.4vw, 1.42rem);
  color: var(--ink);
}

.home-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- Parcours en trois étapes ---------- */

.home-steps {
  padding-top: clamp(44px, 7vw, 82px);
  padding-bottom: clamp(20px, 3vw, 30px);
  text-align: center;
}

.home-steps > .eyebrow {
  justify-content: center;
}

.home-steps > h2 {
  margin: 0 0 clamp(24px, 4vw, 44px);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.home-steps__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  text-align: left;
}

@media (min-width: 760px) {
  .home-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.home-step__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral-deep);
  background: rgba(230, 111, 92, 0.12);
  border: 1px solid rgba(230, 111, 92, 0.32);
}

.home-step__body h3 {
  margin: 0.35em 0 0.3em;
  font-size: 1.14rem;
  color: var(--ink);
}

.home-step__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
}

/* ---------- Bandes image + texte (local & installation) ---------- */

.home-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(20px, 3vw, 32px);
}

@media (min-width: 860px) {
  .home-band {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  }

  .home-band--reverse .home-band__media {
    order: 2;
  }
}

.home-band__media {
  position: relative;
  isolation: isolate;
}

.home-band__img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

.home-band__img--phone {
  display: block;
  width: auto;
  max-width: 300px;
  margin: 0 auto;
  border: 0;
  border-radius: calc(var(--radius) + 8px);
  box-shadow: none;
}

.home-band__media::after {
  content: "";
  position: absolute;
  z-index: -1;
  /* Bleed uniquement vertical : jamais au-delà des bords latéraux (anti-scroll horizontal). */
  inset: -8% 2% -12% 2%;
  background: radial-gradient(58% 56% at 62% 42%, rgba(8, 122, 55, 0.14), transparent 72%);
}

.home-band__text h2 {
  margin: 0 0 0.5em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

.home-band__text p {
  margin: 0;
  color: var(--muted);
  max-width: 46ch;
}

.home-band__actions {
  margin: 1.4em 0 0 !important;
}

/* ---------- Bande installation : VRAIE capture Baza en carte claire (S109I) ----------
   Remplace la maquette HTML/CSS inventée de S109H (refusée par Philippe). La
   capture réelle (iPhone tenu en main, écran de messagerie de démonstration
   Baza) est posée dans une carte crème/champagne PREMIUM et lumineuse — jamais
   de fond sombre lourd derrière un mockup (défaut #7). */

.home-band__media--phone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 3.4vw, 38px);
  border-radius: var(--radius);
  background:
    radial-gradient(64% 58% at 50% 24%, rgba(255, 255, 255, 0.72), transparent 72%),
    linear-gradient(158deg, var(--surface) 0%, var(--surface-2) 62%, var(--champagne) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* Le glow vert par défaut de `.home-band__media` est superflu derrière la carte
   claire de l'installation. */
.home-band__media--phone::after {
  display: none;
}

.home-band__media--phone .home-band__img--phone {
  filter: drop-shadow(0 22px 38px rgba(120, 60, 34, 0.3));
}

/* ---------- Bande confidentialité (fond émeraude profond) ---------- */

.home-privacy {
  margin: clamp(40px, 6vw, 74px) 0;
  padding: clamp(44px, 7vw, 82px) 0;
  background:
    radial-gradient(38rem 22rem at 82% -20%, rgba(215, 168, 79, 0.18), transparent 60%),
    radial-gradient(30rem 20rem at 6% 120%, rgba(230, 111, 92, 0.16), transparent 58%),
    linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  border-top: 1px solid rgba(215, 168, 79, 0.3);
  border-bottom: 1px solid rgba(215, 168, 79, 0.3);
}

.home-privacy__inner {
  max-width: 56rem;
  text-align: center;
}

.home-privacy .eyebrow {
  justify-content: center;
}

.home-privacy h2 {
  margin: 0 0 0.5em;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem);
  color: #fff6ea;
}

.home-privacy p {
  margin: 0 auto;
  max-width: 52ch;
  color: rgba(255, 244, 228, 0.9);
  font-size: 1.05rem;
}

/* ---------- Rappel final (bande chaleureuse, SANS photo plein cadre) ----------
   Template Riviera Premium §11 : jamais de poster photo plein cadre, jamais de
   texte sur un visage. Fond crème/champagne lumineux, accents corail + or,
   texte en encre, CTA émeraude — pendant clair de la bande confidentialité. */

.home-final {
  margin: clamp(24px, 4vw, 40px) 0 0;
  padding: clamp(46px, 7vw, 84px) 0;
  background:
    radial-gradient(34rem 20rem at 84% -18%, rgba(230, 111, 92, 0.16), transparent 60%),
    radial-gradient(30rem 20rem at 8% 118%, rgba(215, 168, 79, 0.18), transparent 60%),
    linear-gradient(162deg, var(--surface) 0%, var(--surface-2) 62%, var(--peach) 100%);
  border-top: 1px solid var(--line);
}

.home-final__inner {
  max-width: 56rem;
  text-align: center;
}

.home-final .eyebrow {
  justify-content: center;
}

.home-final h2 {
  margin: 0 auto 0.45em;
  max-width: 20ch;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--ink);
}

.home-final p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.home-final__actions {
  margin: 1.6em auto 0 !important;
}

.home-final__note {
  margin: 1.5em auto 0 !important;
  font-size: 0.84rem;
  color: var(--muted) !important;
}

/* ============================================================
   PAGES DE CONTENU GÉNÉRIQUES (sous-pages, locales, légales)
   ============================================================ */

.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 78px) clamp(16px, 4vw, 32px) clamp(18px, 2.6vw, 30px);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  max-width: 20ch;
  color: var(--ink);
}

.lead {
  font-size: 1.14rem;
  color: var(--muted);
  max-width: 60ch;
}

.page-general .hero .lead,
.page-local .hero .lead {
  max-width: 58ch;
}

/* Filet or de clôture sous le hero des sous-pages. */
.page-general .hero::after,
.page-local .hero::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: clamp(22px, 3vw, 34px);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--coral), var(--gold) 40%, transparent 78%);
}

.hero .hero-actions {
  margin-top: 26px;
}

.content-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px) clamp(16px, 4vw, 32px);
}

.content-section h2 {
  font-size: clamp(1.3rem, 2.7vw, 1.7rem);
  font-weight: 700;
  margin: 0.3em 0 0.5em;
  color: var(--green-deep);
  letter-spacing: 0.005em;
}

.content-section h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--coral), var(--gold));
}

.content-section p {
  max-width: 68ch;
  margin: 0 0 1em;
  color: var(--text);
  /* BAZA-S228 (2026-07-24) : casse UNIQUEMENT les jetons techniques qui
     déborderaient (empreinte SHA-256 64 caractères, URL longue) — le texte
     normal reste inchangé. Corrige le SCROLL HORIZONTAL de /android/ sur mobile
     (critère de refus du verrou design S109E). Même primitive que .win-hash. */
  overflow-wrap: anywhere;
}

.content-section ul {
  max-width: 68ch;
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.content-section li {
  margin-bottom: 0.45em;
  overflow-wrap: anywhere;
}

.content-section li::marker {
  color: var(--coral-deep);
}

/* Bande éditoriale « texte + image » (figure unique). */
.content-media-text {
  min-width: 0;
}

@media (min-width: 900px) {
  .content-media {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(30px, 4vw, 56px);
    align-items: center;
  }

  .content-media-text p,
  .content-media-text ul {
    max-width: none;
  }

  .content-media .figure-single {
    margin: 0;
  }
}

.figure-single,
.figure-grid {
  margin: clamp(18px, 2.6vw, 28px) 0 8px;
}

.figure-single {
  text-align: center;
}

.figure-single .content-figure {
  display: inline-block;
  max-width: 100%;
}

.figure-single .content-figure img {
  margin: 0 auto;
  width: auto;
  max-height: min(70vh, 600px);
}

.figure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  align-items: start;
}

@media (min-width: 620px) {
  .figure-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .figure-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.content-figure {
  margin: 0;
}

.content-figure img {
  display: block;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  background: var(--surface);
}

.figure-grid .content-figure img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

.content-figure figcaption {
  margin-top: 9px;
  font-size: 0.87rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.45;
}

.figure-grid .content-figure figcaption {
  text-align: center;
  font-style: normal;
  font-size: 0.82rem;
}

/* Bloc CTA générique (sous-pages). */
.cta-block {
  max-width: var(--container);
  margin: clamp(30px, 5vw, 56px) auto;
  padding: clamp(32px, 5vw, 50px) clamp(22px, 4vw, 42px);
  background:
    radial-gradient(28rem 16rem at 88% -10%, rgba(8, 122, 55, 0.12), transparent 60%),
    radial-gradient(22rem 14rem at 6% 112%, rgba(230, 111, 92, 0.14), transparent 60%),
    linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--shadow-card);
}

.cta-block h2 {
  font-size: clamp(1.4rem, 3.1vw, 1.95rem);
  margin: 0 0 0.5em;
  color: var(--ink);
}

.cta-block p {
  max-width: 56ch;
  margin: 0 auto 1.5em;
  color: var(--muted);
}

.cta-adults {
  font-size: 0.85rem;
  margin-top: 1.6em;
  color: var(--muted);
}

/* Maillage interne. */
.related {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px) clamp(44px, 6vw, 68px);
}

.related h2 {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: var(--font-body);
}

.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related li a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 500;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.related li a:hover {
  border-color: var(--coral);
  background: rgba(230, 111, 92, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
}

/* Pages légales / erreurs. */
.legal-hero h1 {
  max-width: none;
}

.legal-updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 1em;
}

.legal-notice,
.legal-adults {
  max-width: 68ch;
  padding: 12px 16px;
  border-left: 3px solid var(--coral);
  background: rgba(230, 111, 92, 0.08);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  color: var(--text);
}

.error-hero {
  min-height: 46vh;
}

/* ---------- Footer (émeraude profond) ---------- */

.site-footer {
  margin-top: clamp(28px, 5vw, 60px);
  background:
    radial-gradient(30rem 18rem at 90% -30%, rgba(215, 168, 79, 0.14), transparent 60%),
    linear-gradient(180deg, var(--green-deep) 0%, #05381f 100%);
  border-top: 1px solid rgba(215, 168, 79, 0.34);
  color: rgba(255, 244, 228, 0.86);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(20px, 4vw, 44px);
  padding-top: clamp(34px, 5vw, 54px);
  padding-bottom: clamp(20px, 3vw, 32px);
}

.footer-brand p {
  margin: 0 0 0.6em;
  color: rgba(255, 244, 228, 0.78);
  max-width: 32ch;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  /* Même exigence qu'au header (S109I) : « Baza » d'un seul tenant, 2–4 px d'air,
     sans chevaucher le B. Logo footer plus petit (32px) → retrait plus faible. */
  gap: 0;
}

/* BAZA-S219A : idem header — marge nulle, l'air vient de la marge transparente
   du nouveau logo.png (jamais de retrait négatif qui mange « aza »). */
.footer-brand-row .brand-word {
  margin-left: 0;
}

.footer-logo {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.footer-brand .brand-word {
  font-size: 1.35rem;
  color: #fff4e4;
}

/* Guides locaux en chips compactes (jamais une longue colonne). */
.footer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-chips li {
  margin: 0;
}

.footer-chips li a {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 244, 228, 0.07);
  border: 1px solid rgba(215, 168, 79, 0.3);
  color: rgba(255, 244, 228, 0.9);
  font-size: 0.9rem;
}

.footer-chips li a:hover {
  border-color: var(--gold-soft);
  text-decoration: none;
}

.footer-adults {
  font-size: 0.85rem;
  color: var(--gold-soft) !important;
}

.footer-title {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
  margin: 0 0 0.9em;
  font-family: var(--font-body);
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li {
  margin-bottom: 0.55em;
}

.site-footer li a {
  color: rgba(255, 244, 228, 0.86);
  font-size: 0.96rem;
}

.site-footer li a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-note {
  margin: 0.9em 0 0;
  max-width: 34ch;
  color: rgba(255, 244, 228, 0.66);
  font-size: 0.82rem;
  line-height: 1.5;
}

.footer-bottom {
  border-top: 1px solid rgba(215, 168, 79, 0.24);
  padding-top: 18px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom));
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 244, 228, 0.66);
  font-size: 0.85rem;
}

/* ---------- Mobile (< 760px) : header une ligne, footer compact ---------- */

@media (max-width: 759px) {
  /* Header mobile = une seule ligne : logo à gauche, CTA + hamburger à droite.
     Statique (jamais sticky) pour ne pas se superposer dans les captures longues.
     On RETIRE le backdrop-filter sur mobile : inutile (header non collant, rien
     ne défile dessous) et surtout il piège le `position: fixed` du panneau de
     menu — un ancêtre filtré devient le bloc conteneur des descendants fixes,
     ce qui bornait le panneau à la hauteur du header. Sans lui, le panneau
     couvre bien tout l'écran. */
  .site-header {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 60px;
  }

  /* Nav texte masquée sur mobile : remplacée par le hamburger (menu S109I).
     Les liens restent aussi dans le footer — jamais de mots coupés. */
  .site-nav {
    display: none;
  }

  /* CTA compact « Ouvrir » sur mobile : tient sur une ligne à côté du hamburger,
     aucun scroll horizontal même sur les petits écrans (~320px). */
  .header-cta {
    padding: 11px 16px; /* CTA ~44px */
    font-size: 0.94rem;
  }

  .header-cta__full {
    display: none;
  }

  .header-cta__short {
    display: inline;
  }

  /* Hamburger visible à droite (après le CTA). */
  .m-nav {
    display: block;
  }

  /* Panneau ouvert : plein écran, clair, premium — la croix (le <summary>)
     passe au-dessus en position fixe pour rester cliquable. */
  .m-nav[open] .m-nav__toggle {
    position: fixed;
    top: 12px;
    right: clamp(16px, 4vw, 32px);
    z-index: 60;
    background: rgba(255, 253, 247, 0.92);
  }

  .m-nav[open] .m-nav__panel {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    padding: 80px clamp(22px, 7vw, 38px) calc(40px + env(safe-area-inset-bottom));
    background:
      radial-gradient(38rem 26rem at 92% 2%, rgba(230, 111, 92, 0.16), transparent 60%),
      linear-gradient(168deg, var(--cream) 0%, var(--champagne) 58%, var(--peach) 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: m-nav-fade 0.18s ease both;
  }

  .brand-logo {
    width: 36px;
    height: 36px;
  }

  .brand-word {
    font-size: 1.66rem;
  }

  /* Footer compact : marque + chips guides sur toute la largeur, MAIS les deux
     colonnes de liens (Découvrir / Informations légales) côte à côte pour éviter
     une colonne interminable (template Riviera Premium §14). `grid-auto-flow:
     dense` fait remonter la colonne légale à droite de Découvrir. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    column-gap: 18px;
    row-gap: 22px;
    padding-top: 28px;
    padding-bottom: 20px;
  }

  .footer-brand,
  .footer-col--locations {
    grid-column: 1 / -1;
  }

  .footer-note {
    display: none;
  }

  .site-footer li {
    margin-bottom: 0.34em;
  }

  .site-footer li a {
    font-size: 0.92rem;
  }

  .footer-title {
    margin-bottom: 0.6em;
  }
}

/* ---------- Hero colonne (< 900px) : titre borné, CTA plein largeur plafonné ---------- */

@media (max-width: 899px) {
  .home-hero h1 {
    font-size: clamp(2.3rem, 11vw, 2.9rem); /* 42–46px max, jamais 60+ */
  }

  .home-hero__lead {
    font-size: clamp(1.05rem, 4.4vw, 1.2rem); /* 18–20px max */
  }

  .home-hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin-bottom: 1.5em;
  }

  .home-hero .hero-actions .btn {
    width: 100%;
    min-height: 54px; /* 52–56px */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* CTA plein largeur des sous-pages / bandes sur petit écran. */
@media (max-width: 560px) {
  .hero-actions .btn,
  .home-band__actions .btn,
  .home-final__actions .btn {
    width: 100%;
    max-width: 340px;
    text-align: center;
  }
}

/* ---------- Recette S109H : rythme vertical mobile resserré + guides locaux ----------
   Réduction ~25–35 % des grands blancs verticaux sur mobile, sans tasser ni
   toucher le desktop (defect #5). Guides locaux recadrés « national d'abord »
   (defect #6) : le chapô national redevient visible, les villes restent des
   points de départ. */
@media (max-width: 759px) {
  .home-hero__inner {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .home-cards {
    padding-top: 26px;
  }

  .home-steps {
    padding-top: 30px;
    padding-bottom: 12px;
  }

  .home-band {
    gap: 20px;
    padding-top: 26px;
    padding-bottom: 14px;
  }

  .home-privacy {
    margin: 30px 0;
    padding: 34px 0;
  }

  .home-final {
    padding: 36px 0;
  }

  .hero {
    padding-top: 30px;
    padding-bottom: 12px;
  }

  .content-section {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .cta-block {
    margin: 26px auto;
    padding: 30px 22px;
  }

  .figure-single,
  .figure-grid {
    margin-top: 14px;
  }

  /* Chapô national visible (le `.footer-note` générique reste masqué mobile). */
  .footer-note--lead {
    display: block;
    max-width: none;
    margin: 0 0 0.8em;
  }
}

/* Ouverture douce du panneau de menu mobile. */
@keyframes m-nav-fade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .home-card,
  .related li a,
  .m-nav__bars,
  .m-nav__bars::before,
  .m-nav__bars::after {
    transition: none;
  }

  .m-nav[open] .m-nav__panel {
    animation: none;
  }
}

/* =====================================================================
 * BAZA-S226 — Page « Baza pour Windows » (FR/EN/ES).
 * Composants additifs cohérents avec la charte (tokens existants, aucune
 * ressource externe, aucun JavaScript). Sélecteur de langue, boutons de
 * téléchargement, cartes de détails (taille/SHA-256/signature), tutoriel.
 * ===================================================================== */

.lang-switch {
  max-width: var(--container);
  margin: clamp(14px, 2.4vw, 22px) auto 0;
  padding: 0 clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lang-switch__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green-deep);
  margin-right: 2px;
}

.lang-switch a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid rgba(8, 122, 55, 0.28);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  background: #fff;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.lang-switch a:hover {
  background: var(--cream);
}

.lang-switch a[aria-current="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.win-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.win-dl-btn {
  min-width: 0;
}

.win-compat {
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--muted, #6a5a4d);
}

.win-dl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.4vw, 22px);
  margin-top: 12px;
}

@media (min-width: 720px) {
  .win-dl-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.win-dl-card {
  border: 1px solid rgba(8, 122, 55, 0.18);
  border-radius: var(--radius-sm);
  background: var(--cream-tint, rgba(255, 244, 228, 0.86));
  padding: clamp(16px, 2.4vw, 22px);
}

.win-dl-card__name {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--green-deep);
  word-break: break-word;
}

.win-details {
  margin: 0;
  display: grid;
  gap: 8px;
}

.win-details > div {
  display: grid;
  grid-template-columns: minmax(70px, 32%) 1fr;
  gap: 10px;
  align-items: baseline;
}

.win-details dt {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-deep);
}

.win-details dd {
  margin: 0;
  color: var(--text);
  min-width: 0;
}

.win-details__hash {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
}

.win-hash {
  display: block;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(33, 22, 18, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.win-steps {
  max-width: 72ch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
  display: grid;
  gap: 14px;
}

.win-step {
  padding: 14px 16px;
  border-left: 3px solid var(--coral);
  background: rgba(255, 244, 228, 0.55);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.win-step h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--green-deep);
}

.win-step p {
  margin: 0;
  color: var(--text);
}

/* ==========================================================================
   BAZA-S236G — Lien d'évitement « Aller au contenu » (WCAG 2.4.1)
   Le site n'en avait aucun : un utilisateur au clavier ou au lecteur d'écran
   devait traverser toute la navigation (jusqu'à 15 liens) sur CHAQUE page avant
   d'atteindre le contenu.
   Il est masqué visuellement au repos SANS être retiré de l'ordre de tabulation
   (jamais `display:none` ni `visibility:hidden`, qui le rendraient inatteignable),
   et devient pleinement visible au focus clavier — première cible tabulable.
   ========================================================================== */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  /* Hors écran au repos, mais focusable. */
  transform: translateY(-120%);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--green-deep);
  color: #fff4e4;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Respect de « Réduire les animations » : apparition instantanée, jamais de
   glissement (le lien doit être immédiatement lisible). */
@media (prefers-reduced-motion: no-preference) {
  .skip-link {
    transition: transform 0.15s ease;
  }
}

/* La cible du lien reçoit le focus programmatique : pas de contour parasite,
   mais un décalage de défilement pour ne pas coller sous l'en-tête. */
#contenu {
  scroll-margin-top: 12px;
}