/* ==========================================================================
   Immersions Thermales, feuille de styles principale
   Conseil National des Établissements Thermaux (CNETh)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices auto-hébergées (RGPD : aucun appel à un CDN tiers)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Jetons de design
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs relevées sur la maquette */
  --navy: #102f76;
  --navy-dark: #0b2258;
  --teal: #317ca3;
  --teal-dark: #2a6b8c;
  --mint: #d1f4f0;
  --mint-soft: #e6f9f7;
  --brick: #aa3826;
  --brick-dark: #8e2d1e;
  --ink: #111c2d;
  --text: #032f2b;
  --text-soft: #5e6b74;
  --line: #dfe6ea;
  --line-bleu: #75b5e6;   /* filet de l'avertissement médical, relevé maquette */
  --white: #fff;
  --green: #0bbf5c;
  --pin: #1654ba;   /* bleu des repères de la carte, relevé sur la maquette */
  --red: #e5342f;

  /* Rythme */
  /* Corps du texte courant relevé sur la maquette : 21 px à 1440. */
  --corps: clamp(1.0625rem, .95rem + .55vw, 1.3125rem);
  --wrap: 1278px;
  --gutter: 26px;
  --radius-sm: 10px;
  --radius: 12px;
  --radius-lg: 14px;
  --shadow: 0 18px 40px -22px rgba(16, 47, 118, .35);
  --shadow-lg: 0 30px 60px -30px rgba(16, 47, 118, .45);
  --header-h: 112px;
}

/* --------------------------------------------------------------------------
   3. Réinitialisation
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Les composants ci-dessous redéfinissent `display`, ce qui masquerait l'effet
   de l'attribut [hidden] géré en JavaScript (quiz, messages de formulaire). */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--mint);
  color: var(--text);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

/* La maquette ne resserre pas l'interlettrage : on garde la chasse native
   d'Outfit, sinon les titres tombent 10 px trop court sur une ligne. */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0;
}

/* Cotes relevees sur la maquette a 1440 px : h1 et h2 de section a 56 px
   (interligne 62), titre de carte a 40 px (interligne 49). */
h1 { font-size: clamp(2rem, 1.15rem + 2.9vw, 3.5rem); line-height: 1.11; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem); line-height: 1.22; }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }

:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. Utilitaires de mise en page
   -------------------------------------------------------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section { padding: clamp(48px, 6vw, 92px) 0; }
.section--tight { padding: clamp(32px, 4vw, 56px) 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Surtitre : 12 px capitales, interlettrage .09 em (releve maquette). */
.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--text);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Chapo : 24 px gras bleu marine a 1440, interligne 1.3. */
.lead {
  color: var(--navy);
  font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
}
/* Sur fond sombre (bannieres interieures) le chapo reste clair. */
.hero--inner .lead { color: inherit; }

.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 56px);
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 29px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brick);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  background: var(--brick-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(170, 56, 38, .8);
}
.btn:active { transform: translateY(0); }

.btn--sm { padding: 14px 29px; font-size: 1.0625rem; }

/* Grands appels a l'action de l'accueil : 24 px gras, interligne 32. */
.btn--lg {
  padding: 15px 28px;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.5rem);
  line-height: 1.33;
}
.btn--block { display: flex; width: 100%; }

.btn--navy { background: var(--navy); }
.btn--navy:hover { background: var(--navy-dark); box-shadow: 0 10px 22px -12px rgba(16, 47, 118, .8); }

.btn--ghost {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 0 0 2px var(--navy);
}
.btn--ghost:hover { background: var(--navy); color: #fff; box-shadow: none; }

/* --------------------------------------------------------------------------
   6. En-tête / navigation
   -------------------------------------------------------------------------- */
/* Le bandeau reste visible pendant le défilement (pastille flottante). */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: 22px 0;
  transition: padding .22s ease;
}

/* Pages sans visuel plein cadre : la première section absorbe la hauteur du
   bandeau, pour que son fond remonte jusqu'en haut de l'écran. */
/* La maquette pose le titre 224 px sous le haut de page, la pastille de
   navigation flottant par-dessus le bandeau turquoise. */
.site-header--solid ~ main > .hero--inner:first-child {
  padding-top: calc(var(--header-h) + clamp(16px, 7.8vw, 112px));
}
.site-header--solid ~ main > .section:first-child {
  padding-top: calc(var(--header-h) + clamp(24px, 3vw, 48px));
}

/* Au défilement, la pastille se rapproche du bord haut et se détache du fond. */
.site-header.is-stuck { padding: 10px 0; }
.site-header.is-stuck .nav-bar { box-shadow: 0 14px 34px -18px rgba(3, 18, 52, .85); }

.nav-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px 12px 26px;
  border-radius: var(--radius);
  background: var(--navy);
  box-shadow: var(--shadow);
}

.nav-logo { flex: 0 0 auto; margin-right: auto; }
.nav-logo img { width: 150px; }

.nav-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu a {
  display: block;
  padding: 9px 13px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .9);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.nav-menu a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.nav-menu a[aria-current='page'] {
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .85);
  border-radius: 8px 8px 0 0;
}

.nav-cta { margin-left: 8px; }

.nav-toggle {
  display: none;
  width: 46px; height: 42px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: #fff;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-bar { padding: 12px 14px; }
  .nav-collapse {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    border-radius: var(--radius);
    background: var(--navy);
    box-shadow: var(--shadow-lg);
  }
  .nav-collapse.is-open { display: flex; }
  .nav-collapse { max-height: calc(100vh - 140px); overflow-y: auto; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-menu a { padding: 12px 14px; font-size: 1rem; }
  .nav-menu a[aria-current='page'] { background: rgba(255, 255, 255, .12); box-shadow: none; border-radius: 8px; }
  .nav-cta { margin: 8px 0 0; }
  .nav-cta .btn { width: 100%; }
}

.nav-wrapper { position: relative; }

/* --------------------------------------------------------------------------
   7. Séparateur en vague
   Forme relevée au point près dans la maquette (tracé de 3 courbes de Bézier,
   116,2 pt de haut sur 1446 de large). Elle sépare chaque bannière de la
   section suivante : le menthe recouvre le bas du visuel en suivant la vague.
   -------------------------------------------------------------------------- */
:root {
  --wave-h: clamp(40px, 7vw, 116px);
  /* Vague « descendante » : le menthe remplit sous la courbe. */
  --wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1446 116.2' preserveAspectRatio='none'%3E%3Cpath fill='%23D1F4F0' d='M398 14.1C218.8 0 80 30.1 0 52.2v64h1446V34.5c-127.3 9.4-318 35.3-464 35.3s-360-38-584-55.7Z'/%3E%3C/svg%3E");
  /* Même courbe, remplie au-dessus en turquoise : le bandeau de la médecine
     thermale retombe ainsi sur la photo pleine largeur. */
  --wave-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1446 116.2' preserveAspectRatio='none'%3E%3Cpath fill='%23317CA3' d='M398 14.1C218.8 0 80 30.1 0 52.2V0h1446v34.5c-127.3 9.4-318 35.3-464 35.3s-360-38-584-55.7Z'/%3E%3C/svg%3E");
  /* Même courbe miroir : le menthe remplit au-dessus. */
  --wave-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1446 116.2' preserveAspectRatio='none'%3E%3Cpath fill='%23D1F4F0' d='M398 102.1C218.8 116.2 80 86.1 0 64V0h1446v81.7c-127.3-9.4-318-35.3-464-35.3s-360 38-584 55.7Z'/%3E%3C/svg%3E");
}

.hero--home .hero-visual::after,
.hero--band::after,
.hero--wave::after,
.band-visual::after,
.rdv::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: var(--wave-h);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.hero--home .hero-visual::after,
.hero--band::after,
.hero--wave::after,
.band-visual::after,
.rdv::after {
  bottom: -1px;
  background-image: var(--wave-down);
}

/* --------------------------------------------------------------------------
   8. Bannières
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--teal);
  isolation: isolate;
}

/* Accueil : illustration pleine largeur, carte à cheval sur la vague.

   Cotes relevées sur la maquette (page de 1440 px de large) :
     bannière visible   0 -> 679   (la vague menthe couvre 562 -> 679)
     carte            555 -> 916, largeur 408, bord droit à 1256
   La bannière garde donc un rapport 1440/679, et la carte remonte de 158 px
   sur elle depuis le haut de la colonne de droite. */
.hero--home { position: relative; padding: 0; background: var(--mint); }

.hero--home .hero-visual {
  position: relative;
  aspect-ratio: 1440 / 679;
  overflow: hidden;
  background: #b9dcec;
}

/* « top » et non un cadrage centré : la maquette montre le haut de
   l'illustration, le bas étant recouvert par la section suivante. */
.hero--home .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* La section d'introduction démarre au ras de la vague. */
.section--intro {
  padding-top: clamp(16px, 1.7vw, 24px);
  padding-bottom: clamp(48px, 7.6vw, 110px);
}

/* Sections propres à l'accueil : les hauteurs viennent de la maquette. */
.section--programme { padding: clamp(48px, 9.1vw, 131px) 0 0; }
.section--organisateur { padding: clamp(32px, 4.9vw, 71px) 0 clamp(56px, 15vw, 217px); }
.section--organisateur .card { max-width: 1074px; margin-inline: auto; padding: clamp(28px, 4.5vw, 65px); }

/* Cotes internes relevées sur la maquette (carte de 400 x 352) :
     marges  74 en haut, 25 sur les côtés, 58 en bas
     logo    340 de large, puis 24 d'écart
     date    28 px, puis 25 d'écart
     bouton  61 de haut, pleine largeur                                       */
.hero-card {
  position: relative;
  z-index: 6; /* au-dessus du séparateur en vague */
  width: min(400px, 100%);
  /* Remontée sur la bannière, et retrait droit repris de la maquette. */
  margin: clamp(-158px, -11vw, -70px) clamp(0px, 7.5vw, 108px) 0 auto;
  padding: 74px 25px 58px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.hero-card img { width: min(340px, 100%); margin: 0 auto 24px; }
.hero-card .hero-date {
  margin-bottom: 25px;
  color: var(--teal);
  font-size: clamp(1.4rem, 1.15rem + .7vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
}
.hero-card .btn {
  width: 100%;
  padding: 15px 20px;
}

@media (max-width: 760px) {
  /* Bannière plus haute : l'illustration reste lisible sur un écran étroit. */
  .hero--home .hero-visual { aspect-ratio: 5 / 4; }
}

@media (max-width: 600px) {
  .hero-card { padding: 40px 24px 36px; }
  .hero-card .btn { padding: 15px 18px; }
}

/* Bannière intérieure : titre à gauche, visuel à droite */
.hero--inner {
  padding: clamp(52px, 7vw, 96px) 0;
  color: #fff;
}
.hero--inner.pre-overlap {
  padding-bottom: clamp(52px, 12vw, 192px);
}
.hero--inner h1 { color: #fff; }
.hero--inner p { color: rgba(255, 255, 255, .92); }
/* Colonnes relevées sur la maquette : 780 à gauche, 456 à droite, 42 d'écart.
   C'est cette largeur qui coupe le titre en trois lignes. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 780fr) minmax(0, 456fr);
  gap: clamp(24px, 2.9vw, 42px);
  align-items: start;
}
.hero-grid h1 { max-width: 700px; }
/* Même corps que le texte courant de l'accueil : 21 px, interligne 32. */
.hero-grid p {
  margin-bottom: 24px;
  font-size: var(--corps);
  line-height: 1.52;
}
/* Visuel de bannière : 400 px de large sur les trois pages, mais une hauteur
   propre à chacune (relevé maquette). */
.hero-figure {
  width: min(100%, 400px);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.hero-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.hero-figure--portrait img { aspect-ratio: 400 / 642; }

/* Bannière dont le visuel déborde de 149 px pour chevaucher la photo pleine
   largeur qui suit (page « La médecine thermale »). */
.hero--debord { padding-bottom: 0; }
/* 630 px : c'est cette largeur qui renvoie « à vivre. » sur une troisième ligne. */
.hero--debord .hero-grid h1 { max-width: 630px; }
.hero--debord .hero-figure { margin: 26px 0 clamp(-149px, -10.3vw, -40px); }
.hero--inner .btn { margin-top: 10px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; max-width: 420px; }
  /* Empilé, le visuel repasse au format paysage et ne déborde plus : sinon il
     occuperait tout l'écran avant même le titre. */
  .hero-figure--portrait img { aspect-ratio: 4 / 3; }
  .hero--debord { padding-bottom: clamp(52px, 7vw, 96px); }
  .hero--debord .hero-figure { margin: 0 0 24px; }
}

/* Bannière simple (FAQ, mentions…) : illustration en fond + carte blanche */
.hero--band {
  position: relative;
  min-height: 420px;
  padding: 0;
}
.hero--band .hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero--band .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.hero--band .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 47, 118, .34), rgba(16, 47, 118, .05) 45%, rgba(209, 244, 240, 0));
}

/* Carte de contenu qui chevauche la bannière */
.overlap {
  position: relative;
  z-index: 5;
  margin-top: -140px;
  padding-bottom: clamp(48px, 6vw, 92px);
}
.overlap.big-overlap {
  margin-top: -240px;
}
.overlap .card { padding: clamp(32px, 4.5vw, 64px); }

/* --------------------------------------------------------------------------
   8. Accueil
   -------------------------------------------------------------------------- */
/* Quatre éléments, deux colonnes égales (relevé maquette à 1440 px :
   88 | 622 | 44 | 622 | 88).
     rangée 1 : titre + chapô à gauche, carte blanche à droite
     rangée 2 : collage à gauche, texte courant à droite
   Le texte de droite est centré verticalement sur le collage, comme dans la
   maquette ; « start » ailleurs, pour que la carte remonte sur la vague. */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 615fr);
  column-gap: clamp(28px, 2.3vw, 33px);
  row-gap: clamp(20px, 2vw, 29px);
  align-items: start;
}
.intro-grid > .intro-titre   { grid-column: 1; grid-row: 1; }
.intro-grid > .hero-card     { grid-column: 2; grid-row: 1; }
.intro-grid > .intro-collage { grid-column: 1; grid-row: 2; }
.intro-grid > .intro-texte   { grid-column: 2; grid-row: 2; align-self: center; }

/* Le chapô suit le titre de près (8 px sur la maquette). */
.intro-titre h1 { margin-bottom: 8px; }

/* Texte courant de l'accueil : 21 px, interligne 32, 20 px entre paragraphes. */
.intro-texte {
  font-size: var(--corps);
  line-height: 1.52;
}
.intro-texte p { margin-bottom: 20px; }

/* Collage : la grande image tient 69,9 % de la largeur sur toute la hauteur,
   la petite 54,6 %, décalée de 45,4 % à droite et de 22,2 % vers le bas. */
.intro-collage {
  position: relative;
  /* 615 x 612 sur la maquette : le collage ne remplit pas toute la colonne. */
  width: min(100%, 615px);
  aspect-ratio: 615 / 612;
}
.intro-collage img {
  position: absolute;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  object-fit: cover;
}
.intro-collage img:first-child { left: 0;     top: 0;     width: 69.9%; height: 100%; }
.intro-collage img:last-child  { left: 45.4%; top: 22.2%; width: 54.6%; height: 55.6%; }

@media (max-width: 820px) {
  .intro-grid { grid-template-columns: 1fr; }

  /* Les quatre blocs s'empilent, carte en tête. Les sélecteurs reprennent ceux
     du placement en deux colonnes : à spécificité égale, c'est la règle la
     plus tardive qui l'emporte. */
  .intro-grid > .intro-titre,
  .intro-grid > .hero-card,
  .intro-grid > .intro-collage,
  .intro-grid > .intro-texte {
    grid-column: 1;
    grid-row: auto;
  }
  /* Empilée, la carte se centre et remonte moins sur la bannière. */
  .intro-grid > .hero-card {
    order: -1;
    width: min(400px, 100%);
    margin: clamp(-120px, -9vw, -56px) auto 30px;
  }
}

/* Bandeau « Un rendez-vous partout en France » */
.rdv {
  position: relative;
  padding: clamp(60px, 13.7vw, 198px) 0 clamp(60px, 14.8vw, 213px);
  isolation: isolate;
}
.rdv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Vague menthe au ras du haut, puis l'illustration des flots en dessous. */
  background:
    var(--wave-up) top center / 100% var(--wave-h) no-repeat,
    url('../img/fond-vagues.jpg') center / cover no-repeat;
}
/* Carte de 1074 x 329 sur la maquette, colonne de texte de 383 px :
   c'est cette largeur qui coupe le paragraphe en deux et fait passer le
   bouton sur deux lignes. */
.rdv .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 383px);
  gap: clamp(24px, 3.5vw, 50px);
  align-items: center;
  max-width: 1074px;
  margin-inline: auto;
  padding: clamp(28px, 3.2vw, 46px) clamp(24px, 5.7vw, 82px)
           clamp(28px, 3.2vw, 46px) clamp(24px, 6.9vw, 99px);
}
.rdv h2 { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); margin: 0; }
.rdv h2 svg { flex: 0 0 auto; }

/* Colonne de droite : 17,6 px, interligne 24, 20 px entre paragraphes. */
.rdv-texte { font-size: clamp(1rem, .95rem + .35vw, 1.1rem); line-height: 1.37; }
.rdv-texte p { margin-bottom: 20px; }
.rdv-texte .btn { width: 100%; }

@media (max-width: 760px) {
  .rdv .card { grid-template-columns: 1fr; }
}

/* Programme */
.programme-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 3.5vw, 50px);
}
/* La maquette fixe la largeur du bouton, ce qui le coupe en deux lignes, et
   aligne la mention comme le bouton sur le texte de la liste (retrait 42 px). */
.programme-grid .btn--lg { max-width: 322px; padding-inline: 22px; margin-left: 42px; }
.programme-grid .note { margin-left: 42px; }

/* Colonne de gauche centrée : intitulé, titre puis pastille, empilés. */
.programme-grid > div:first-child { text-align: center; }
/* Sur la maquette ce titre de section est au corps du h1. */
.programme-grid h2 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 1.15rem + 2.9vw, 3.5rem);
  line-height: 1.11;
}
.programme-grid .eyebrow { margin-bottom: 25px; }
/* Pastille ronde bleu marine (Ø 250 px dans la maquette), centrée sous le
   titre du programme. */
.gratuit-box {
  display: grid;
  align-content: center;
  width: min(100%, 250px);
  aspect-ratio: 1;
  margin: 24px auto 0;
  /* 250 − 2×37 = 176 px de colonne de texte, comme dans la maquette */
  padding: 0 37px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.gratuit-box strong { display: block; margin-bottom: 18px; font-size: 2rem; font-weight: 700; }

/* 21 px, interligne 25 : le même découpage en quatre lignes que la maquette
   dans la colonne de 176 px. */
.gratuit-box span { font-size: 1.3125rem; line-height: 1.19; }

/* Très petits écrans : le disque garde sa taille, on resserre le texte pour
   qu'il reste inscrit dans le cercle. */
@media (max-width: 400px) {
  .gratuit-box { padding: 0 26px; }
  .gratuit-box strong { margin-bottom: 10px; font-size: 1.5rem; }
  .gratuit-box span { font-size: 1.0625rem; line-height: 1.25; }
}

/* Liste à puces cochées du programme et de la page « médecine thermale ».
   Relevé maquette : intitulé 23 px turquoise (interligne 26), description
   17 px (interligne 25), 11 px entre deux items. */
.check-list { margin: 0 0 26px; padding: 0; list-style: none; font-size: 1.0625rem; line-height: 1.47; color: var(--ink); }
.check-list li {
  position: relative;
  margin-bottom: 11px;
  padding-left: 42px;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102f76' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m7.6 12.2 3 3 5.8-6.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.check-list b {
  display: block;
  color: var(--teal);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.13;
}

/* Variante compacte : une seule ligne par item, sans intitulé en gras. */
.check-list--compact li { margin-bottom: 10px; }

.note { color: var(--text-soft); font-size: .9375rem; }

/* Avertissement médical : filet bleu clair et texte à la couleur courante,
   comme sur la maquette, et non le gris des mentions secondaires. */
.note--encadre {
  max-width: 730px;
  margin-inline: auto;
  padding: 16px 24px;
  border: 1px solid var(--line-bleu);
  border-radius: var(--radius-sm);
  color: var(--text);
}

@media (max-width: 860px) {
  .programme-grid { grid-template-columns: 1fr; }
}

/* Bloc organisateur CNETh */
.organisateur {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 50px);
  align-items: center;
  line-height: 1.41;
}
.organisateur img { width: 100%; max-width: 290px; margin-inline: auto; }
/* La maquette enchaîne les paragraphes sans blanc, sauf après le chapô. */
.organisateur p { margin-bottom: 0; }
.organisateur p:first-child { margin-bottom: 18px; color: var(--teal); }
@media (max-width: 720px) { .organisateur { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. Où participer, carte + liste
   -------------------------------------------------------------------------- */
.finder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.map-panel { position: relative; }
#map {
  height: 620px;
  border-radius: var(--radius);
  background: #e8eef0;
  z-index: 1;
}
.leaflet-container { font: inherit; border-radius: var(--radius); }

.finder-controls {
  width: min(100%, 420px);
  margin: 0 auto 26px;
}

/* Recherche libre, posée au-dessus de la liste des résultats. */
.recherche {
  position: relative;
  margin-bottom: 16px;
}
.recherche-icone {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--teal);
  pointer-events: none;
}
/* Sélecteur à deux classes : .input, déclarée plus bas, pose un `padding`
   raccourci qui écraserait sinon ces deux retraits. */
.recherche .recherche-champ {
  width: 100%;
  padding-left: 46px;
  padding-right: 42px;
}
/* Safari dessine sa propre croix dans les champs de type search : on la retire
   pour ne garder que la nôtre, qui reste accessible au clavier. */
.recherche-champ::-webkit-search-decoration,
.recherche-champ::-webkit-search-cancel-button { -webkit-appearance: none; }

.recherche-vider {
  position: absolute;
  top: 50%;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: var(--mint-soft);
  color: var(--ink);
  cursor: pointer;
}
.recherche-vider:hover { background: var(--mint); color: var(--navy); }

.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
}

/* Précision ajoutée à un intitulé, ex. « (plusieurs choix possibles) » */
.field-precision { font-weight: 400; }

.select,
.input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111c2d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder { color: #9aa4ad; }
.select:focus,
.input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(49, 124, 163, .18);
  outline: none;
}

.results-head {
  margin-bottom: 18px;
  color: var(--navy);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.results {
  max-height: 620px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
}
.results::-webkit-scrollbar { width: 6px; }
.results::-webkit-scrollbar-thumb { background: #c3d6dd; border-radius: 3px; }

.zone-title {
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mint);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.zone-title:first-child { margin-top: 0; }

/* Fiche établissement : une simple ligne séparée par un filet, sans carte
   ni ombre. Le bouton reste un lien d'inscription ; toute la ligne est
   cliquable pour recentrer la carte. */
.etab {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  width: 100%;
  padding: 20px 4px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color .18s ease;
}
.etab:first-of-type { border-top: 0; }
.etab:hover,
.etab.is-active { background: var(--mint-soft); }

/* Le visuel est enveloppé dans un <picture> : c'est lui l'élément de grille,
   il doit donc être un bloc pour occuper sa colonne. */
.etab picture { display: block; }

/* Établissement dont la photo n'est pas encore fournie : cadre neutre aux
   couleurs de l'évènement, plutôt qu'une vue d'un autre établissement. */
.etab-visuel--attente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background: var(--mint-soft);
  color: var(--teal);
}
.etab-visuel--attente svg { width: 26px; height: 26px; }
.etab-visuel--attente span { font-size: .78rem; font-weight: 500; letter-spacing: .02em; }
.etab img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  object-fit: cover;
}
.etab-meta {
  margin-bottom: 6px;
  color: var(--text-soft);
  font-size: .82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.35;
}
.etab-name {
  margin: 0 0 8px;
  color: var(--teal);
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
}
.etab-dates { margin-bottom: 4px; font-size: .9rem; }
.etab-tel { margin-bottom: 12px; color: var(--ink); font-size: .95rem; }

/* Pilule contourée « Plus d'infos sur l'établissement » */
.etab-link {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}
.etab-link:hover { border-color: var(--teal); color: var(--teal); }

@media (max-width: 480px) {
  .etab { grid-template-columns: 1fr; gap: 14px; }
}

.results-empty {
  padding: 34px 18px;
  border-radius: var(--radius);
  background: var(--mint-soft);
  color: var(--text-soft);
  text-align: center;
}

/* Repère cartographique : goutte blanche cerclée de bleu, reprise de la
   maquette. Le SVG est inséré par carte.js, on ne gère ici que la taille et
   la couleur, portée par currentColor. */
.map-pin {
  display: block;
  width: 30px;
  height: 40px;
  color: var(--pin);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28));
  transition: color .18s ease, transform .18s ease;
}
.map-pin svg { display: block; width: 100%; height: 100%; }

/* Repère survolé ou correspondant à la fiche sélectionnée. */
.leaflet-marker-icon.is-active .map-pin,
.map-pin:hover {
  color: var(--brick);
  transform: translateY(-2px);
}

/* Crédit cartographique replié derrière un bouton « © », pour ne pas barrer
   le bas de la carte d'un bandeau de texte. */
.carte-credit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 8px 8px 0 !important;
  padding: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  font-size: .72rem;
}

.carte-credit-bouton {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-soft);
  font: inherit;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
}
.carte-credit-bouton:hover { color: var(--navy); }

.carte-credit-texte {
  padding-right: 8px;
  color: var(--text-soft);
  white-space: nowrap;
}
.carte-credit-texte a { color: var(--text-soft); }
.carte-credit-texte a:hover { color: var(--navy); }

@media (max-width: 420px) {
  .carte-credit-texte { white-space: normal; max-width: 60vw; }
}

.leaflet-popup-content-wrapper { border-radius: var(--radius-sm); }
.leaflet-popup-content { margin: 14px 16px; font: inherit; }
.leaflet-popup-content strong { display: block; color: var(--navy); }

@media (max-width: 980px) {
  .finder { grid-template-columns: 1fr; }
  #map { height: 420px; }
  .results { max-height: none; overflow: visible; }
}

/* Partenaires */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 30px;
  align-items: center;
  justify-items: center;
}
.partners img { width: 130px; opacity: .85; }

/* --------------------------------------------------------------------------
   10. Médecine thermale
   -------------------------------------------------------------------------- */
/* Photo pleine largeur : 1440 x 946 sur la maquette, coiffée de la vague
   turquoise du bandeau et recouverte en partie basse par la carte suivante. */
.band-visual {
  position: relative;
  aspect-ratio: 1440 / 946;
  overflow: hidden;
}
.band-visual img { width: 100%; height: 100%; object-fit: cover; }
.band-visual::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: clamp(36px, 6.5vw, 93px);
  background: var(--wave-teal) no-repeat center / 100% 100%;
  pointer-events: none;
}

/* La carte des pathologies chevauche le bas de la photo. Elle réunit, comme
   sur la maquette, les pathologies, les bénéfices et « Pourquoi ça marche ». */
.section--patho {
  position: relative;
  z-index: 5;
  margin-top: clamp(-358px, -24.9vw, -100px);
  padding-top: 0;
}
.section--patho .card { padding: clamp(28px, 7vw, 100px); }

/* Respiration entre les trois blocs de la carte (58 px sur la maquette). */
.bloc-detache { margin-top: clamp(34px, 4vw, 58px); }

.patho-grid {
  display: grid;
  grid-template-columns: minmax(0, 376px) minmax(0, 1fr);
  gap: clamp(26px, 6.8vw, 97px);
}
.patho-grid > div:first-child { text-align: center; }
.patho-cols {
  columns: 2;
  column-gap: 52px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.patho-cols li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 20px;
  break-inside: avoid;
}
.patho-cols li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text);
}
@media (max-width: 860px) { .patho-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .patho-cols { columns: 1; } }

.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
  margin: 36px 0 30px;
  text-align: center;
}
.benefits figure { margin: 0; }
.benefits .picto {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
}
.benefits .picto img { height: 96px; width: auto; }
/* Pastille « validé » reprise de la maquette, superposée en bas du pictogramme */
.benefits .picto::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 34px; height: 34px;
  transform: translateX(-50%);
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.4' fill='%23fff' stroke='%236dc536' stroke-width='2.2'/%3E%3Cpath d='m7.4 12.3 3.1 3.1 6.1-6.5' fill='none' stroke='%236dc536' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.benefits figcaption { color: var(--ink); font-size: .96rem; font-weight: 500; }

.callout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: #e6f0fd;
  color: var(--navy);
}
.callout svg { flex: 0 0 auto; }
.callout p { margin: 0 0 6px; }

.quiz-teaser { text-align: center; }
/* Le fichier porte une marge transparente : affiché à 280 px, le dessin lui-même
   fait les 161 px de la maquette. */
.quiz-teaser img { width: min(100%, 280px); margin: 0 auto 28px; }
.quiz-teaser p {
  max-width: 660px;
  margin-inline: auto;
  font-size: var(--corps);
  line-height: 1.52;
}

/* --------------------------------------------------------------------------
   11. Vrai / faux, quiz
   -------------------------------------------------------------------------- */
.quiz-titre {
  margin-bottom: .5em;
  text-align: center;
}

.quiz-chapo {
  max-width: 760px;
  margin: 0 auto 38px;
  color: var(--text);
  text-align: center;
}

/* Panneau de jeu : encart clair centré dans la carte blanche. */
.quiz {
  width: min(100%, 748px);
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px) clamp(20px, 4vw, 56px) clamp(28px, 4vw, 48px);
  border: 1px solid #e8f1fa;
  border-radius: var(--radius);
  background: #fbfcfe;
}

/* Compteur + barre de progression, sur une même ligne. */
.quiz-tete {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.quiz-compteur {
  flex: 0 0 auto;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 600;
}
.quiz-barre {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 99px;
  background: #eaf4ff;
  overflow: hidden;
}
.quiz-barre i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 99px;
  background: #d7ecff;
  transition: width .35s ease;
}

.quiz-question {
  min-height: 2.6em;
  margin-bottom: 26px;
  color: var(--navy);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem);
  font-weight: 700;
  line-height: 1.35;
}

/* Deux choix de largeur égale, en colonne sur mobile. */
.quiz-choix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 520px) {
  .quiz-choix { grid-template-columns: 1fr; }
}

.btn-choix {
  padding: 15px 20px;
  border: 1px solid #dceaf7;
  border-radius: var(--radius-sm);
  background: #fbfbfd;
  color: var(--navy);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.btn-choix:hover {
  border-color: var(--teal);
  background: #fff;
  transform: translateY(-1px);
}

/* Explication affichée après la réponse. */
.quiz-retour {
  padding: 22px 24px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--teal);
  background: #fff;
}
.quiz-retour[data-etat='bon'] { border-left-color: var(--green); }
.quiz-retour[data-etat='mauvais'] { border-left-color: var(--red); }
.quiz-retour b {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 1.05rem;
}
.quiz-retour b span { font-weight: 500; opacity: .75; }
.quiz-retour p { margin: 0; font-size: .98rem; }

.quiz-suite { margin: 24px 0 0; }
.quiz-suite .btn { width: 100%; }

/* Écran de fin. */
.quiz-resultat { text-align: center; }
.quiz-score {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
}
.quiz-score-libelle {
  margin: 6px 0 18px;
  color: var(--navy);
  font-weight: 600;
}
/* Conclusion du quiz : même corps que le texte courant, dans une colonne qui
   garde une longueur de ligne confortable. */
.quiz-conclusion {
  max-width: 560px;
  margin-inline: auto;
  font-size: clamp(1.0625rem, .98rem + .4vw, 1.2rem);
  line-height: 1.5;
}

.quiz-actions-fin {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin: 28px 0 0;
}

/* --------------------------------------------------------------------------
   12. FAQ, accordéon
   -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 14px; }

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 26px;
  color: var(--ink);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 3px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111c2d' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform .22s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--mint-soft); }
.faq-answer { padding: 0 26px 24px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   13. Formulaire d'inscription
   -------------------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 26px;
}
.form-field { display: flex; flex-direction: column; }
.form-field--full { grid-column: 1 / -1; }

.req { color: var(--red); }

.error-msg {
  margin-top: 6px;
  color: var(--red);
  font-size: .85rem;
  font-weight: 500;
}

/* Tant qu'il n'y a pas d'erreur, le paragraphe ne doit pas creuser d'espace
   entre les champs ni entre les cases à cocher. */
.error-msg:empty { display: none; }
.input[aria-invalid='true'],
.select[aria-invalid='true'] { border-color: var(--red); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-size: .96rem;
  line-height: 1.5;
  cursor: pointer;
}
.checkbox input {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 1px 0 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  accent-color: var(--teal);
}

.form-legal {
  margin-top: 46px;
  color: var(--text-soft);
  font-size: .8rem;
  line-height: 1.65;
}
.form-legal h2 { color: var(--ink); font-size: .95rem; margin-bottom: .6em; }

.form-status {
  margin-top: 22px;
  padding: 18px 22px;
  border-radius: var(--radius-sm);
  background: var(--mint-soft);
  color: var(--navy);
  font-weight: 500;
}

/* Souhaits de participation à gauche, date souhaitée à droite : les deux
   premières colonnes de la grille au-dessus, comme sur la maquette. */
.form-souhaits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 26px;
  margin-top: 26px;
}
.souhaits { margin: 0; padding: 0; border: 0; }
.souhaits .field-label { margin-bottom: 12px; }
.souhaits .checkbox { margin-bottom: 10px; margin-left: 14px; }

.note--souhaits { margin-top: 6px; max-width: 420px; }

.form-consentements { margin-top: 30px; }
/* Témoin de la vérification anti-robot. Trois états : au repos, pendant le
   calcul, une fois résolu. */
.verif {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  background: var(--mint-soft);
  color: var(--teal);
  font-size: .9375rem;
}
.verif-icone { flex: 0 0 auto; }
.verif .verif-coche { opacity: 0; transition: opacity .2s ease; }
.verif[data-etat='encours'] { color: var(--navy); }
.verif[data-etat='encours'] .verif-icone { animation: verif-pulse 1.1s ease-in-out infinite; }
.verif[data-etat='fait'] { color: #0b7a3b; background: #eaf7ef; }
.verif[data-etat='fait'] .verif-coche { opacity: 1; }

@keyframes verif-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .verif[data-etat='encours'] .verif-icone { animation: none; }
}

.form-envoi { margin-top: 20px; }
.form-suite { margin-top: 20px; }

/* L'erreur d'une case à cocher s'aligne sur le texte, pas sur la case. */
.error-msg--case { margin-left: 36px; }

/* Champ leurre anti-robot : retiré du flux et de l'arbre d'accessibilité. */
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mention-obligatoire {
  margin-top: 14px;
  color: var(--red);
  font-size: .85rem;
  font-weight: 600;
}

/* Page de confirmation : titre et texte centrés dans la carte. */
.carte-merci { text-align: center; }
.carte-merci h1 {
  max-width: 760px;
  margin: 0 auto .6em;
  font-size: clamp(1.6rem, 1.15rem + 1.7vw, 2.5rem);
  line-height: 1.16;
}
.carte-merci p { max-width: 900px; margin-inline: auto; }
.merci-retour { margin-top: 32px; }

/* Titres centrés des pages à carte unique (inscription, FAQ, 404). */
.titre-centre { text-align: center; }
.titre-centre--aere { margin-bottom: 1.2em; }
.chapo-centre { max-width: 680px; margin: 0 auto 42px; text-align: center; }

/* Utilitaires repris des styles en ligne : la politique de sécurité du serveur
   (style-src 'self') interdit l'attribut style, ils vivent donc ici. */
.wrap--etroit { max-width: 700px; }
.wrap--texte { max-width: 860px; }
.carte-centree { text-align: center; }
.boutons-centres {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}
.texte-turquoise { color: var(--teal); }
.note--detachee { margin-top: 32px; text-align: center; }
.bouton-detache { margin-top: 20px; }
.presse-date--claire { color: rgba(255, 255, 255, .82); }
.titre-encadre { font-size: 1.1rem; }

/* Information que le client doit encore fournir : visible, pour ne pas partir
   en production sans s'en apercevoir. */
.a-completer {
  padding: 1px 8px;
  border-radius: 4px;
  background: #fdecea;
  color: var(--brick);
  font-size: .92em;
  font-style: italic;
}
.lien-courriel { font-size: .86rem; word-break: break-word; }

@media (max-width: 900px) {
  .form-grid,
  .form-souhaits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .form-grid,
  .form-souhaits { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   14. Presse
   -------------------------------------------------------------------------- */
.presse-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
.presse-date { color: var(--text-soft); font-size: .92rem; }

/* Communiqué : chapô de 19 px, intertitres en gras de 18, corps resserré.
   La maquette descend le corps à 13,5 px ; 15 px reste plus lisible pour une
   colonne de cette longueur. */
.presse-body { font-size: .9375rem; line-height: 1.6; }
.presse-body .lead {
  margin-bottom: 1.6em;
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1.68;
}
.presse-intertitre {
  margin-top: 2em;
  margin-bottom: .8em;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.45;
}
.presse-body h2 { font-size: 1.22rem; margin-top: 2em; }
.presse-body h2:first-child { margin-top: 0; }

.presse-side { position: sticky; top: 24px; display: grid; gap: 26px; }
.contact-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.contact-card img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.contact-card b { display: block; color: var(--navy); }
.contact-card span { display: block; color: var(--text-soft); font-size: .88rem; }

.dl-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-weight: 500;
  text-decoration: none;
}
.dl-link:hover { background: var(--mint-soft); }

@media (max-width: 880px) {
  .presse-grid { grid-template-columns: 1fr; }
  .presse-side { position: static; }
}

/* --------------------------------------------------------------------------
   15. Contenu éditorial long (mentions, RGPD)
   -------------------------------------------------------------------------- */
.prose h2 { margin-top: 1.8em; font-size: 1.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; font-size: 1.1rem; color: var(--ink); }
.prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }

/* --------------------------------------------------------------------------
   16. Pied de page
   -------------------------------------------------------------------------- */
 /* Bandeau de réassurance : 54 px de haut, mention de gauche en gras et
    mention de droite en romaine, comme sur la maquette. */
.reassurance {
  padding: 16px 0;
  background: var(--teal);
  color: #fff;
}
.reassurance .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.reassurance div {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: .9375rem;
  line-height: 1.4;
}
.reassurance div:first-child { font-weight: 700; }
.reassurance div:last-child { font-weight: 400; }
.reassurance svg { flex: 0 0 auto; }

/* Pied de page : liens alignés à gauche, sans logo ni filet (relevé maquette :
   65 px au-dessus des liens, 64 px entre les liens et la ligne de bas de page). */
.site-footer {
  padding: clamp(40px, 4.6vw, 65px) 0 25px;
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
  font-size: .72rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 6.4vw, 92px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-nav a {
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
}
.footer-nav a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 30px;
  margin-top: clamp(34px, 4.5vw, 64px);
}
.footer-bottom p { margin: 0; }

/* --------------------------------------------------------------------------
   17. Impression
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .reassurance, .site-footer, .btn, #map { display: none !important; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; }
}