/* ==========================================================================
   CLINIQUE SOLUTIONS AUDITIVES — PROTOTYPE ACCUEIL
   HTML5 / CSS3 / JS vanilla. Aucune dépendance.
   1 base · 2 utilitaires · 3 composants · 4 sections · 5 motion · 6 responsive
   ========================================================================== */

/* ==========================================================================
   1. BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* les ancres ne doivent pas atterrir sous l'en-tête collant */
  scroll-padding-top: calc(var(--csa-header-h) + 1rem);
}

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

body {
  margin: 0;
  background: var(--csa-creme);
  color: var(--csa-vert);
  font-family: var(--csa-font-texte);
  font-size: var(--csa-texte);
  line-height: var(--csa-lh-texte);
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : overflow-x:hidden casserait position:sticky sur l'en-tête */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--csa-font-titre);
  font-weight: 800;
  line-height: var(--csa-lh-titre);
  letter-spacing: var(--csa-ls-titre);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--csa-esp-3); max-width: var(--csa-mesure); }
p:last-child { margin-bottom: 0; }

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--csa-violet);
  outline-offset: 3px;
  border-radius: 4px;
}
.csa-hero :focus-visible,
.csa-succ :focus-visible,
.csa-footer :focus-visible,
.csa-header :focus-visible,
.csa-bandeau :focus-visible { outline-color: var(--csa-lime); }

.csa-skip {
  position: absolute;
  left: var(--csa-esp-2);
  top: -100px;
  z-index: 999;
  background: var(--csa-vert);
  color: var(--csa-creme);
  padding: var(--csa-esp-2) var(--csa-esp-3);
  border-radius: var(--csa-r-capsule);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--csa-dur-rapide) var(--csa-ease);
}
.csa-skip:focus { top: var(--csa-esp-2); }

/* ==========================================================================
   2. UTILITAIRES
   ========================================================================== */

.csa-surtitre {
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  margin: 0 0 var(--csa-esp-3);
  max-width: none;
}
.csa-surtitre--creme { color: var(--csa-creme); }
.csa-surtitre--vert  { color: var(--csa-vert); }
.csa-surtitre--lime  { color: var(--csa-lime); }

.csa-aconfirmer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--csa-esp-2);
  font-size: var(--csa-texte-petit);
  color: var(--csa-vert);
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 10px,
    rgba(0, 68, 53, 0.05) 10px, rgba(0, 68, 53, 0.05) 20px);
  border: 2px dashed rgba(0, 68, 53, 0.35);
  border-radius: 12px;
  padding: var(--csa-esp-2) var(--csa-esp-3);
  max-width: none;
}
.csa-aconfirmer__badge {
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--csa-violet);
  color: var(--csa-creme);
  padding: 4px 10px;
  border-radius: var(--csa-r-capsule);
}

/* ==========================================================================
   3. COMPOSANTS
   ========================================================================== */

/* ---------- Boutons : aplats pleins, sans contour rapporté ---------- */
.csa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--csa-cta-h);
  padding: 0 var(--csa-esp-4);
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;          /* un CTA ne passe jamais sur deux lignes */
  border: var(--csa-trait) solid transparent;
  border-radius: var(--csa-r-capsule);
  cursor: pointer;
  transition: transform var(--csa-dur-rapide) var(--csa-ease),
              box-shadow var(--csa-dur-rapide) var(--csa-ease),
              filter var(--csa-dur-rapide) var(--csa-ease);
}
.csa-btn--lg { min-height: var(--csa-cta-h-lg); font-size: 1.1875rem; padding: 0 var(--csa-esp-5); }
.csa-btn--xl { min-height: 72px; font-size: clamp(1.1875rem, 2vw, 1.5rem); padding: 0 var(--csa-esp-5); }

.csa-btn--lavande { background: var(--csa-lavande); color: var(--csa-vert); }
.csa-btn--lime    { background: var(--csa-lime);    color: var(--csa-vert); }
.csa-btn--violet  { background: var(--csa-violet);  color: var(--csa-creme); }
.csa-btn--vert    { background: var(--csa-vert);    color: var(--csa-creme); }
.csa-btn--contour-creme { background: transparent; color: var(--csa-creme); border-color: var(--csa-creme); }

.csa-btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: var(--csa-ombre-collage); }
.csa-btn--contour-creme:hover { background: rgba(255, 247, 236, 0.12); filter: none; box-shadow: none; }
.csa-btn:active { transform: translateY(0); box-shadow: none; }

/* ---------- Lien flèche ---------- */
.csa-lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--csa-esp-1);
  min-height: var(--csa-cible-min);
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--csa-vert);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.csa-lien-fleche--creme { color: var(--csa-creme); }
.csa-lien-fleche__icone { width: 22px; height: 22px; flex: none; transition: transform var(--csa-dur-rapide) var(--csa-ease); }
.csa-lien-fleche:hover .csa-lien-fleche__icone { transform: translateX(4px); }

/* ---------- Bandeau supérieur : vert forêt ---------- */
.csa-bandeau {
  background: var(--csa-vert);
  color: var(--csa-creme);
  font-size: 0.9375rem;
  border-bottom: 1px solid rgba(255, 247, 236, 0.16);
}
.csa-bandeau__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-large));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--csa-esp-2);
}
.csa-bandeau p { margin: 0; max-width: none; }
.csa-bandeau a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
  font-weight: 500;
  color: var(--csa-creme);
}
.csa-bandeau a:hover { color: var(--csa-lime); text-decoration: underline; }
.csa-bandeau__sep { margin: 0 var(--csa-esp-1); opacity: 0.45; }
.csa-bandeau__villes { color: rgba(255, 247, 236, 0.82); }
.csa-bandeau__compte { font-weight: 600; color: var(--csa-lime); }

/* ---------- En-tête : collant, transparent au-dessus du héro ----------
   Le margin négatif fait passer le héro sous l'en-tête, pour que le motif
   d'oreille remonte jusqu'en haut de l'écran. */
.csa-header {
  position: sticky;
  top: 0;
  z-index: var(--csa-z-header);
  margin-bottom: calc(var(--csa-header-h) * -1);
  /* fond plein par défaut : sans JS, l'en-tête passerait transparent
     au-dessus des sections crème et son texte deviendrait illisible */
  background: var(--csa-vert);
  color: var(--csa-creme);
  transition: background-color var(--csa-dur-moyen) var(--csa-ease),
              box-shadow var(--csa-dur-moyen) var(--csa-ease);
}
/* La transparence au-dessus du héro n'est offerte que si le JS peut
   reposer le fond vert au défilement. */
.csa-js .csa-header { background: transparent; }
.csa-js .csa-header.is-colle,
.csa-header.is-colle {
  background: var(--csa-vert);
  box-shadow: 0 6px 28px rgba(0, 49, 38, 0.32);
}
.csa-header__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-large));
  margin-inline: auto;
  min-height: var(--csa-header-h);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
}

.csa-logo { display: block; flex: none; line-height: 0; }
.csa-logo img { width: clamp(150px, 14vw, 195px); height: auto; }

/* Navigation : liens nus, pas de capsule. L'état actif se lit à la couleur
   ET au soulignement, jamais à la couleur seule. */
.csa-nav { margin-inline: auto; }
.csa-nav__liste {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
}
.csa-nav__lien {
  display: inline-flex;
  align-items: center;
  min-height: var(--csa-cible-min);
  padding: 0 var(--csa-esp-2);
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: 1.0625rem;
  white-space: nowrap;
  color: var(--csa-creme);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color var(--csa-dur-rapide) var(--csa-ease),
              border-color var(--csa-dur-rapide) var(--csa-ease);
}
.csa-nav__lien:hover { color: var(--csa-lime); border-bottom-color: var(--csa-lime); }
.csa-nav__lien.is-actif { color: var(--csa-lavande); border-bottom-color: var(--csa-lavande); }
.csa-nav__mobile-actions { display: none; }

.csa-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.csa-header__tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--csa-cible-min);
  font-family: var(--csa-font-titre);
  font-weight: 800;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  white-space: nowrap;
  color: var(--csa-lime);
  text-decoration: none;
}
.csa-header__tel:hover { text-decoration: underline; text-underline-offset: 4px; }
.csa-header__cta { min-height: 50px; font-size: 1rem; padding: 0 var(--csa-esp-3); }

.csa-burger { display: none; }

/* ==========================================================================
   4. SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — HERO
   Composition entièrement typographique. Sans mascotte, le motif d'oreille
   et le titre portent seuls l'identité.
   -------------------------------------------------------------------------- */
.csa-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(560px, 92vh, 980px);
  padding: calc(var(--csa-header-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(4rem, 8vw, 7rem);
  background: var(--csa-vert);
  color: var(--csa-creme);
  overflow: hidden;
}

.csa-hero__motif {
  position: absolute;
  inset: -12% -18%;
  z-index: -1;
  background: url("../images/motifs/motif-vert.svg") center / cover no-repeat;
  will-change: transform;
}

.csa-hero__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.5rem);
}

/* La mascotte occupe la colonne de droite et déborde légèrement. */
.csa-hero__mascotte {
  margin: 0;
  justify-self: center;
  width: min(100%, 580px);
  margin-right: clamp(-3rem, -3vw, 0rem);
}

.csa-hero__titre {
  display: grid;
  font-size: clamp(3.25rem, 7.6vw, 7.5rem);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
/* « Mieux entendre » en crème : c'est le texte qui domine, pas la couleur. */
.csa-hero__titre-l1 { color: var(--csa-creme); }
.csa-hero__titre-l2 { color: var(--csa-creme); margin-left: 0.1em; }
.csa-hero__titre-l3 {
  color: var(--csa-lime);
  font-size: clamp(1.5rem, 3.6vw, 3.25rem);
  margin-top: 0.4em;
  margin-left: 0.12em;
}

.csa-hero__texte {
  font-size: var(--csa-texte-grand);
  max-width: 52ch;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  color: rgba(255, 247, 236, 0.92);
}

.csa-hero__actions { display: flex; flex-wrap: wrap; gap: var(--csa-esp-2); }

/* Flèche d'appel au défilement : discrète, cliquable, jamais clignotante. */
.csa-hero__suite {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2.5rem);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(255, 247, 236, 0.45);
  border-radius: 50%;
  color: var(--csa-creme);
  transition: background-color var(--csa-dur-rapide) var(--csa-ease),
              border-color var(--csa-dur-rapide) var(--csa-ease);
}
.csa-hero__suite svg { width: 24px; height: 24px; }
.csa-hero__suite:hover { background: rgba(255, 247, 236, 0.14); border-color: var(--csa-creme); }

/* --------------------------------------------------------------------------
   02 — INTRODUCTION
   -------------------------------------------------------------------------- */
.csa-intro {
  background: var(--csa-creme);
  padding: var(--csa-section-y) 0 0;
  overflow: hidden;
}
.csa-intro__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.csa-intro__titre { font-size: var(--csa-h2); color: var(--csa-vert); }
.csa-intro__accroche {
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: var(--csa-h4);
  color: var(--csa-violet);
  margin: var(--csa-esp-3) 0 var(--csa-esp-4);
}
.csa-intro__texte > .csa-lien-fleche { margin-top: var(--csa-esp-2); }

.csa-intro__mascotte {
  margin: 0;
  justify-self: end;
  width: clamp(180px, 26vw, 340px);
  margin-bottom: -6px;
}

/* --------------------------------------------------------------------------
   03 — SERVICES
   Trois blocs de tailles, couleurs et positions différentes.
   -------------------------------------------------------------------------- */
.csa-services {
  background: var(--csa-creme);
  padding: var(--csa-section-y) 0;
  overflow: hidden;
}
.csa-services__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
}
.csa-services__entete { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.csa-services__titre { font-size: var(--csa-h2); color: var(--csa-vert); }

.csa-services__grille {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}

.csa-service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--csa-esp-3);
  padding: clamp(1.75rem, 3vw, 2.75rem);
}
.csa-service__num {
  font-family: var(--csa-font-titre);
  font-weight: 800;
  font-size: clamp(2.5rem, 4vw, 3.75rem);
  line-height: 1;
  margin: 0;
}
.csa-service__titre { font-size: var(--csa-h4); }
.csa-service__texte { margin: 0; font-size: var(--csa-texte); }
.csa-service > .csa-lien-fleche { margin-top: auto; }

.csa-service--a {
  grid-column: 1 / 7;
  grid-row: 1;
  background: var(--csa-vert);
  color: var(--csa-creme);
  border-radius: var(--csa-r-bloc) var(--csa-r-bloc) 64px var(--csa-r-bloc);
  min-height: 380px;
}
.csa-service--a .csa-service__num { color: var(--csa-lime); }

.csa-service--b {
  grid-column: 7 / 13;
  grid-row: 1;
  background: var(--csa-lavande);
  color: var(--csa-noir);
  border-radius: 64px var(--csa-r-bloc) var(--csa-r-bloc) var(--csa-r-bloc);
  margin-top: clamp(2rem, 5vw, 5rem);
  transform: rotate(-1.5deg);
  padding-bottom: clamp(4.5rem, 8vw, 6.5rem);
}
.csa-service--b .csa-service__num { color: var(--csa-vert); }
.csa-service--b .csa-lien-fleche { color: var(--csa-vert); }

.csa-service__mascotte {
  position: absolute;
  right: -6%;
  bottom: -10%;
  width: clamp(130px, 15vw, 210px);
  margin: 0;
  pointer-events: none;
}

/* Bloc 03 : deuxième rangée, décalé et légèrement incliné.
   Largeur maintenue confortable : la lisibilité prime sur la composition. */
.csa-service--c {
  grid-column: 3 / 11;
  grid-row: 2;
  background: var(--csa-creme);
  color: var(--csa-vert);
  border: var(--csa-trait) solid var(--csa-vert);
  border-radius: var(--csa-r-bloc) 64px var(--csa-r-bloc) var(--csa-r-bloc);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  transform: rotate(1deg);
}
.csa-service--c .csa-service__num { color: var(--csa-violet); }

/* --------------------------------------------------------------------------
   04 — POURQUOI CONSULTER
   Lavande dominante, un seul accent : le violet. Le titre passe en noir
   pour calmer la section, qui devenait multicolore.
   -------------------------------------------------------------------------- */
.csa-signes {
  background: var(--csa-lavande);
  color: var(--csa-noir);
  padding: var(--csa-section-y) 0;
  border-radius: 64px 64px 0 0;
  margin-top: calc(var(--csa-section-y) * -0.1);
  overflow: hidden;
}
.csa-signes__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.csa-signes__titre { font-size: var(--csa-h2); color: var(--csa-noir); }

.csa-signes__liste {
  margin: clamp(2rem, 4vw, 3rem) 0 var(--csa-esp-4);
  display: grid;
  gap: var(--csa-esp-3);
}
.csa-signes__liste li {
  position: relative;
  padding-left: 2.25rem;
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.1vw, 1.75rem);
  line-height: 1.25;
  color: var(--csa-noir);
}
/* Pastilles pleines, sans contour, dans le violet du bouton. */
.csa-signes__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 16px;
  height: 16px;
  background: var(--csa-violet);
  border-radius: 50%;
}
.csa-signes__note { font-size: var(--csa-texte); margin-bottom: var(--csa-esp-4); }

.csa-signes__duo {
  margin: 0;
  justify-self: center;
  width: min(100%, 560px);
}
.csa-signes__duo img { width: 100%; }

/* --------------------------------------------------------------------------
   05 — SUCCURSALES
   Liste typographique : ville, adresse, horaire. Aucune carte.
   -------------------------------------------------------------------------- */
.csa-succ {
  position: relative;
  isolation: isolate;
  background: var(--csa-vert);
  color: var(--csa-creme);
  padding: var(--csa-section-y) 0;
  overflow: hidden;
}
.csa-succ__motif {
  position: absolute;
  inset: -15% -25%;
  z-index: -1;
  background: url("../images/motifs/motif-vert.svg") center / cover no-repeat;
  opacity: 0.9;
  will-change: transform;
}
.csa-succ__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
}
.csa-succ__entete { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.csa-succ__titre { font-size: var(--csa-h2); color: var(--csa-creme); }

.csa-succ__liste { border-top: 2px solid rgba(255, 247, 236, 0.24); }
.csa-succ__item { border-bottom: 2px solid rgba(255, 247, 236, 0.24); }

.csa-succ__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csa-esp-3);
  min-height: 96px;
  padding: var(--csa-esp-3) 0;
  text-decoration: none;
  color: var(--csa-creme);
  transition: padding-left var(--csa-dur-moyen) var(--csa-ease),
              color var(--csa-dur-rapide) var(--csa-ease);
}
.csa-succ__bloc { display: grid; gap: 6px; }
.csa-succ__ville {
  font-family: var(--csa-font-titre);
  font-weight: 800;
  font-size: clamp(1.625rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: var(--csa-ls-titre);
}
.csa-succ__alias { font-size: 0.5em; font-weight: 700; opacity: 0.7; }
.csa-succ__adresse {
  font-family: var(--csa-font-texte);
  font-size: var(--csa-texte-petit);
  color: rgba(255, 247, 236, 0.8);
}
/* Horaire en lime : 6,1:1 sur vert forêt. */
.csa-succ__horaire {
  font-family: var(--csa-font-texte);
  font-size: var(--csa-texte-petit);
  font-weight: 600;
  line-height: 1.4;
  color: var(--csa-lime);
}
.csa-succ__horaire--attente {
  color: rgba(255, 247, 236, 0.72);
  font-weight: 400;
  font-style: italic;
}

.csa-succ__fleche {
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  flex: none;
  color: var(--csa-lime);
  transition: transform var(--csa-dur-rapide) var(--csa-ease);
}
.csa-succ__lien:hover { padding-left: var(--csa-esp-2); }
.csa-succ__lien:hover .csa-succ__ville { color: var(--csa-lime); }
.csa-succ__lien:hover .csa-succ__fleche { transform: translateX(6px); }

.csa-succ__cta { margin-top: clamp(2rem, 4vw, 3rem); }

/* --------------------------------------------------------------------------
   06 — APPROCHE / CONFIANCE
   -------------------------------------------------------------------------- */
.csa-confiance {
  background: var(--csa-creme);
  padding: var(--csa-section-y) 0;
  overflow: hidden;
}
.csa-confiance__inner {
  position: relative;
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
}
.csa-confiance__titre { font-size: var(--csa-h2); color: var(--csa-vert); }
.csa-confiance__texte {
  margin: var(--csa-esp-4) auto;
  max-width: 45ch;
  font-size: var(--csa-texte-grand);
}
.csa-confiance__mascotte {
  position: absolute;
  right: 0;
  bottom: calc(var(--csa-section-y) * -0.9);
  width: clamp(150px, 18vw, 260px);
  margin: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   07 — FAQ
   -------------------------------------------------------------------------- */
.csa-faq { background: var(--csa-creme); padding: 0 0 var(--csa-section-y); }
.csa-faq__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), 900px);
  margin-inline: auto;
}
.csa-faq__titre { font-size: var(--csa-h2); color: var(--csa-vert); margin-bottom: clamp(2rem, 4vw, 3rem); }

.csa-accordeon { border-top: 2px solid rgba(0, 68, 53, 0.2); }
.csa-accordeon__item { border-bottom: 2px solid rgba(0, 68, 53, 0.2); }
.csa-accordeon__item h3 { margin: 0; font-size: inherit; }

.csa-accordeon__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--csa-esp-3);
  width: 100%;
  min-height: 72px;
  padding: var(--csa-esp-3) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--csa-vert);
}
.csa-accordeon__btn:hover { color: var(--csa-violet); }

.csa-accordeon__plus {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border: var(--csa-trait) solid var(--csa-vert);
  border-radius: 50%;
  transition: background-color var(--csa-dur-moyen) var(--csa-ease);
}
.csa-accordeon__plus::before,
.csa-accordeon__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  background: var(--csa-vert);
  transform: translate(-50%, -50%);
  transition: transform var(--csa-dur-moyen) var(--csa-ease);
}
.csa-accordeon__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.csa-accordeon__btn[aria-expanded="true"] .csa-accordeon__plus { background: var(--csa-lime); }
.csa-accordeon__btn[aria-expanded="true"] .csa-accordeon__plus::after { transform: translate(-50%, -50%) rotate(0deg); }

.csa-accordeon__panneau { padding: 0 0 var(--csa-esp-4); }

.csa-faq__pied { margin-top: var(--csa-esp-4); font-size: var(--csa-texte); }
.csa-faq__pied a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: var(--csa-vert);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   08 — CTA FINAL
   -------------------------------------------------------------------------- */
.csa-final {
  background: var(--csa-lime);
  color: var(--csa-vert);
  padding: var(--csa-section-y) 0;
  border-radius: 64px 64px 0 0;
  overflow: hidden;
}
.csa-final__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.csa-final__titre { font-size: clamp(3rem, 7vw, 6.5rem); color: var(--csa-vert); }
.csa-final__sous {
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: var(--csa-h3);
  margin: var(--csa-esp-3) 0 var(--csa-esp-5);
  color: var(--csa-vert);
}
.csa-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--csa-esp-4); }
.csa-final__tel { display: grid; text-decoration: none; min-height: var(--csa-cible-min); align-content: center; }
.csa-final__tel-etiq { font-size: 1rem; }
.csa-final__tel-num {
  font-family: var(--csa-font-titre);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.csa-final__mascotte {
  margin: 0;
  justify-self: center;
  width: clamp(180px, 26vw, 380px);
}

/* --------------------------------------------------------------------------
   09 — FOOTER
   -------------------------------------------------------------------------- */
.csa-footer { background: var(--csa-vert); color: var(--csa-creme); padding: var(--csa-section-y) 0 var(--csa-esp-4); }
.csa-footer__inner {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 0.9fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.csa-footer__logo { width: clamp(180px, 18vw, 240px); height: auto; margin-bottom: var(--csa-esp-3); }
.csa-footer__coord a {
  display: inline-flex;
  align-items: center;
  min-height: var(--csa-cible-min);
  font-family: var(--csa-font-titre);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--csa-lime);
  text-decoration: none;
}
.csa-footer__coord a:hover { text-decoration: underline; text-underline-offset: 4px; }

.csa-footer__titre {
  font-family: var(--csa-font-titre);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--csa-lime);
  margin: 0 0 var(--csa-esp-2);
}
.csa-footer__liste li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--csa-cible-min);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.csa-footer__liste li a:hover { border-bottom-color: var(--csa-creme); }

.csa-footer__bas {
  width: min(100% - (var(--csa-gouttiere) * 2), var(--csa-contenu));
  margin: var(--csa-esp-6) auto 0;
  padding-top: var(--csa-esp-3);
  border-top: 1px solid rgba(255, 247, 236, 0.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--csa-esp-2);
  font-size: 0.9375rem;
}
.csa-footer__bas p { margin: 0; max-width: none; }
.csa-footer__legal { display: flex; flex-wrap: wrap; align-items: center; }
.csa-footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 0 var(--csa-esp-1);
}

/* ==========================================================================
   5. MOTION
   Trois familles seulement :
   1. révélation douce à la première entrée en vue, une fois, jamais en boucle
   2. dérive lente des motifs d'oreille
   3. l'en-tête qui se pose en fond vert dès que la page défile
   Tout est neutralisé sous prefers-reduced-motion.
   ========================================================================== */

/* La révélation passe par `translate`, pas par `transform` : les rotations
   des blocs collage restent intactes. */
.csa-js [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition: opacity var(--csa-dur-reveal) var(--csa-ease),
              translate var(--csa-dur-reveal) var(--csa-ease);
  transition-delay: calc(var(--csa-delai, 0) * 80ms);
}
.csa-js [data-reveal].is-vu { opacity: 1; translate: 0 0; }

.csa-hero__motif,
.csa-succ__motif { transform: translate3d(var(--csa-motif-x, 0px), 0, 0); }

@media (prefers-reduced-motion: reduce) {
  .csa-js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .csa-hero__motif,
  .csa-succ__motif { transform: none !important; }
  .csa-btn:hover { transform: none; }
  .csa-header { transition: none; }
}

/* ==========================================================================
   6. RESPONSIVE
   Le mobile n'est pas une réduction du desktop.
   ========================================================================== */

/* ---------- 1180 px et moins ---------- */
@media (max-width: 1180px) {
  .csa-bandeau__villes { display: none; }
  .csa-header__tel { display: none; }   /* le téléphone reste dans le bandeau */
}

/* ---------- 1024 px et moins ---------- */
@media (max-width: 1024px) {
  .csa-service--a { grid-column: 1 / 7;  grid-row: 1; min-height: 0; }
  .csa-service--b { grid-column: 7 / 13; grid-row: 1; margin-top: 0; transform: none; }
  .csa-service--c { grid-column: 1 / 13; grid-row: 2; margin-top: 0; transform: none; }
  .csa-service__mascotte { right: -6%; width: clamp(100px, 14vw, 150px); }

  .csa-confiance__mascotte { position: static; margin-top: var(--csa-esp-5); }
}

/* ---------- 900 px et moins : navigation mobile ---------- */
@media (max-width: 900px) {

  :root { --csa-header-h: 74px; }

  .csa-header__inner { flex-wrap: wrap; gap: var(--csa-esp-2); padding: var(--csa-esp-2) 0; }
  .csa-logo img { width: clamp(130px, 34vw, 170px); }
  .csa-header__actions { margin-left: auto; }
  .csa-header__cta { display: none; }   /* repris en pleine largeur dans le panneau */
  .csa-header__tel {
    display: inline-flex;
    font-size: 1.0625rem;
  }
  /* l'en-tête ouvert se pose toujours sur du vert, jamais sur le héro */
  .csa-header.is-ouvert { background: var(--csa-vert); }

  .csa-burger {
    display: inline-flex;
    align-items: center;
    gap: var(--csa-esp-1);
    min-height: var(--csa-cible-min);
    padding: 0 var(--csa-esp-3);
    background: var(--csa-lavande);
    color: var(--csa-vert);
    border: 0;
    border-radius: var(--csa-r-capsule);
    font-family: var(--csa-font-titre);
    font-weight: 700;
    font-size: 1.0625rem;
    cursor: pointer;
  }
  .csa-burger__barres {
    position: relative;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
  }
  .csa-burger__barres::before,
  .csa-burger__barres::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--csa-dur-moyen) var(--csa-ease);
  }
  .csa-burger__barres::before { top: -7px; }
  .csa-burger__barres::after  { top: 7px; }
  .csa-burger[aria-expanded="true"] .csa-burger__barres { background: transparent; }
  .csa-burger[aria-expanded="true"] .csa-burger__barres::before { transform: translateY(7px) rotate(45deg); }
  .csa-burger[aria-expanded="true"] .csa-burger__barres::after  { transform: translateY(-7px) rotate(-45deg); }

  .csa-nav {
    display: none;
    order: 4;
    width: 100%;
    margin: 0;
    padding-bottom: var(--csa-esp-3);
  }
  .csa-nav.is-ouvert { display: block; }
  .csa-nav__liste { flex-direction: column; align-items: stretch; gap: 2px; }
  .csa-nav__liste li { display: block; }
  .csa-nav__lien {
    width: 100%;          /* le filet de séparation court sur toute la largeur */
    min-height: 56px;
    font-size: 1.1875rem;
    justify-content: flex-start;
    padding: 0 var(--csa-esp-2);
    border-bottom: 1px solid rgba(255, 247, 236, 0.16);
  }
  .csa-nav__lien.is-actif { border-bottom-color: var(--csa-lavande); }
  .csa-nav__mobile-actions { display: grid; gap: var(--csa-esp-2); margin-top: var(--csa-esp-3); }
  .csa-nav__mobile-actions .csa-btn { width: 100%; }
}

/* ---------- 768 px et moins : recomposition complète ---------- */
@media (max-width: 768px) {

  :root { --csa-texte: 1.125rem; }

  .csa-hero { min-height: 0; padding-top: calc(var(--csa-header-h) + 2.5rem); }
  .csa-hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--csa-esp-4); }
  .csa-hero__mascotte { width: min(100%, 420px); justify-self: center; margin-right: 0; }
  .csa-hero__titre-l2 { margin-left: 0; }
  .csa-hero__titre-l3 { margin-left: 0; }
  .csa-hero__actions { width: 100%; }
  .csa-hero__suite { display: none; }   /* décoration secondaire retirée */

  .csa-intro__inner,
  .csa-signes__inner,
  .csa-final__inner,
  .csa-footer__inner { grid-template-columns: minmax(0, 1fr); }

  .csa-intro__mascotte { justify-self: center; width: clamp(150px, 38vw, 220px); }
  .csa-signes__duo { width: min(100%, 420px); margin-top: var(--csa-esp-4); }
  .csa-final__mascotte { justify-self: center; width: clamp(150px, 40vw, 240px); margin-top: var(--csa-esp-4); }

  .csa-service--a,
  .csa-service--b,
  .csa-service--c { grid-column: 1 / 13; grid-row: auto; }
  .csa-service--b { padding-bottom: clamp(1.75rem, 3vw, 2.75rem); }
  .csa-service__mascotte { display: none; }

  .csa-hero__motif,
  .csa-succ__motif { inset: -5%; opacity: 0.75; }

  .csa-succ__lien { min-height: 84px; align-items: flex-start; }
  .csa-succ__fleche { margin-top: 0.35em; }
  .csa-signes { border-radius: 40px 40px 0 0; }
  .csa-final  { border-radius: 40px 40px 0 0; }

  .csa-footer__bas { flex-direction: column; }
}

/* ---------- 560 px et moins : CTA pleine largeur ---------- */
@media (max-width: 560px) {

  .csa-bandeau__inner { justify-content: center; text-align: center; }

  .csa-btn { width: 100%; }
  .csa-burger { width: auto; }
  .csa-hero__actions,
  .csa-final__actions { display: grid; width: 100%; gap: var(--csa-esp-2); }
  .csa-final__actions { justify-items: start; }
  .csa-final__tel { width: 100%; }

  .csa-succ__ville { font-size: clamp(1.375rem, 6.5vw, 1.875rem); }
  .csa-succ__adresse,
  .csa-succ__horaire { font-size: 1rem; }

  .csa-service { padding: var(--csa-esp-4) var(--csa-esp-3); }
  .csa-accordeon__btn { font-size: 1.125rem; }

  .csa-header__tel { display: none; }   /* le téléphone est dans le panneau */
}