/* ============================================================
   Ruralink Normandie — Feuille de style principale
   ============================================================ */

/* --- Import Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* --- Variables de la charte graphique Ruralink --- */
:root {
  /* Couleurs principales — Nouvelle charte Normandie Mentorat */
  --bordeaux:       #152638;  /* Bleu Nuit Royal */
  --bordeaux-clair: #1e3a52;  /* Bleu Nuit clair */
  --bordeaux-prof:  #0d1f2d;  /* Bleu Nuit profond */
  --orange:         #C5A258;  /* Or Sablé */
  --orange-clair:   #d4b872;  /* Or Sablé clair */
  --dore:           #C5A258;  /* Or Sablé (identique) */
  --dore-clair:     #d4b872;  /* Or Sablé clair */
  --vert-sauge:     #2C7A5B;  /* Vert Émeraude Doux */
  --creme:          #E5E1D0;  /* Gris Perle */
  --creme-fonce:    #d8d3c4;  /* Gris Perle foncé */
  --charbon:        #333333;
  --blanc:          #FFFFFF;

  /* Transparences utiles */
  --bordeaux-a10:   rgba(21,38,56,0.10);
  --bordeaux-a20:   rgba(21,38,56,0.20);

  /* Typographie */
  --font-titre: 'Playfair Display', Georgia, serif;
  --font-corps: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Espacements */
  --section-py:    clamp(4rem, 8vw, 7rem);
  --container-max: 1200px;
  --container-px:  clamp(1.25rem, 5vw, 2.5rem);

  /* Rayons & ombres */
  --radius:    12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --ombre-xs:  0 2px 8px rgba(21,38,56,0.08);
  --ombre-sm:  0 4px 20px rgba(21,38,56,0.10);
  --ombre-md:  0 10px 40px rgba(21,38,56,0.15);
  --ombre-lg:  0 20px 60px rgba(21,38,56,0.22);

  /* Transitions */
  --transition:      all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-lent: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-corps);
  color: var(--charbon);
  background-color: var(--blanc);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

address {
  font-style: normal;
}

/* Accessibilité — focus visible */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   Utilitaires
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-px);
}

/* Animation au scroll via Intersection Observer */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0s),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0s);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   Boutons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.875rem;
  border-radius: 50px;
  font-family: var(--font-corps);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  border: 2px solid transparent;
}

.btn--primaire {
  background: var(--orange);
  color: var(--blanc);
  box-shadow: 0 4px 20px rgba(197,162,88,0.38);
}

.btn--primaire:hover,
.btn--primaire:focus-visible {
  background: var(--orange-clair);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(197,162,88,0.5);
}

.btn--secondaire {
  background: rgba(255,255,255,0.12);
  color: var(--blanc);
  border-color: rgba(255,255,255,0.35);
  backdrop-filter: blur(12px);
}

.btn--secondaire:hover,
.btn--secondaire:focus-visible {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.65);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: var(--bordeaux);
  border-color: var(--bordeaux);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--bordeaux);
  color: var(--blanc);
  transform: translateY(-2px);
  box-shadow: var(--ombre-sm);
}

.btn--grand {
  padding: 1rem 2.625rem;
  font-size: 1.0625rem;
}

/* Bouton pleine largeur */
.btn--bloc {
  width: 100%;
}

/* ============================================================
   En-têtes de section communs
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  background: rgba(197,162,88,0.1);
  padding: 0.35rem 1.125rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}

.section-label--dore {
  color: var(--dore);
  background: rgba(197,162,88,0.18);
}

.section-titre {
  font-family: var(--font-titre);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  color: var(--bordeaux);
  line-height: 1.18;
  margin-bottom: 1rem;
}

.section-titre em {
  font-style: italic;
  color: var(--orange);
}

.section-titre--clair {
  color: var(--creme);
}

.section-titre--clair em {
  color: var(--dore);
}

.section-sous-titre {
  font-size: 1.0625rem;
  color: #666;
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.72;
  font-weight: 300;
}

.section-sous-titre--clair {
  color: rgba(255,251,237,0.72);
}

.section-header--clair .section-label,
.section-header--clair .section-titre,
.section-header--clair .section-sous-titre {
  /* Héritage des variantes claires */
}

/* ============================================================
   Navigation
   ============================================================ */
#header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  transition: var(--transition);
}

.nav {
  padding-block: 1.375rem;
  transition: var(--transition);
}

/* Effet glassmorphism au défilement */
#header.scrolled .nav {
  background: rgba(13,31,45,0.93);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 30px rgba(0,0,0,0.22);
  padding-block: 0.875rem;
}

.nav__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}

.nav__logo:hover {
  opacity: 0.82;
}

.nav__logo-img {
  height: 50px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.1);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.nav__link {
  padding: 0.5rem 0.9375rem;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  transition: var(--transition);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--blanc);
  background: rgba(255,255,255,0.09);
}

.nav__link--cta {
  margin-left: 0.5rem;
  padding: 0.5rem 1.375rem;
  background: var(--orange);
  color: var(--blanc) !important;
  font-weight: 600;
  border-radius: 50px;
  box-shadow: 0 3px 14px rgba(197,162,88,0.4);
}

.nav__link--cta:hover,
.nav__link--cta:focus-visible {
  background: var(--orange-clair) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(197,162,88,0.5);
}

/* Indicateur de lien actif */
.nav__link.actif {
  color: var(--dore);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  border-radius: 9px;
  transition: var(--transition);
}

.nav__hamburger:hover {
  background: rgba(255,255,255,0.1);
}

.nav__hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--blanc);
  border-radius: 2px;
  transform-origin: center;
  transition: var(--transition);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile plein écran */
.nav__mobile {
  position: fixed;
  inset: 0;
  background: var(--bordeaux-prof);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem var(--container-px);
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.nav__mobile.ouvert {
  transform: translateX(0);
  pointer-events: all;
}

.nav__mobile-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: rgba(255,251,237,0.7);
  transition: var(--transition);
}

.nav__mobile-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--creme);
}

.nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav__mobile-link {
  display: block;
  font-family: var(--font-titre);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  color: rgba(255,251,237,0.75);
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: var(--transition);
}

.nav__mobile-link:hover,
.nav__mobile-link:focus-visible {
  color: var(--dore);
  padding-left: 0.75rem;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(7rem, 12vw, 10rem) var(--container-px) clamp(5rem, 8vw, 7rem);
}

/* Fond dégradé bordeaux profond */
.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 75% 30%, rgba(197,162,88,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 20% 70%, rgba(21,56,100,0.6) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(21,38,56,0.4) 0%, transparent 80%),
    linear-gradient(150deg, #0a1825 0%, var(--bordeaux) 45%, #050e18 100%);
  z-index: 0;
}

/* Orbes lumineuses animées */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.hero__orb--1 {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(197,162,88,0.22) 0%, transparent 70%);
  top: -15%;
  right: -8%;
  animation: orbe-flotte 9s ease-in-out infinite;
}

.hero__orb--2 {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(197,162,88,0.18) 0%, transparent 70%);
  bottom: -12%;
  left: 5%;
  animation: orbe-flotte 11s ease-in-out infinite reverse;
}

.hero__orb--3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(44,122,91,0.1) 0%, transparent 70%);
  top: 40%;
  right: 20%;
  animation: orbe-flotte 7s ease-in-out 2s infinite;
}

@keyframes orbe-flotte {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(18px, -25px) scale(1.06); }
  66%       { transform: translate(-12px, 18px) scale(0.94); }
}

/* Grille de fond style circuit */
.hero__grille {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,251,237,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,251,237,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 100%);
  pointer-events: none;
}

.hero__container {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

/* Badge */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--dore);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.45rem 1.125rem;
  border-radius: 50px;
  margin-bottom: 1.875rem;
  backdrop-filter: blur(12px);
  animation: monte-fondu 0.85s ease both;
}

.hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert-sauge);
  box-shadow: 0 0 0 3px rgba(44,122,91,0.3);
  animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(44,122,91,0.3); }
  50%       { box-shadow: 0 0 0 6px rgba(44,122,91,0.1); }
}

/* Titre hero */
.hero__titre {
  font-family: var(--font-titre);
  font-size: clamp(2.875rem, 7.5vw, 5.75rem);
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.08;
  margin-bottom: 1.625rem;
  animation: monte-fondu 0.85s ease 0.15s both;
  max-width: 720px;
}

.hero__titre em {
  display: block;
  font-style: italic;
  background: linear-gradient(90deg, var(--dore), var(--orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sous-titre */
.hero__sous-titre {
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  color: rgba(255,251,237,0.75);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 2.75rem;
  animation: monte-fondu 0.85s ease 0.3s both;
  font-weight: 300;
}

/* Boutons CTA hero */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 4.5rem;
  animation: monte-fondu 0.85s ease 0.45s both;
}

/* Chiffres clés */
.hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 2.25rem;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: 1.375rem 2.25rem;
  animation: monte-fondu 0.85s ease 0.6s both;
}

.hero__stat {
  text-align: center;
}

.hero__stat-nombre {
  display: block;
  font-family: var(--font-titre);
  font-size: 2rem;
  font-weight: 700;
  color: var(--dore);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.hero__stat-label {
  font-size: 0.8rem;
  color: rgba(255,251,237,0.58);
  line-height: 1.3;
  font-weight: 400;
}

.hero__stat-sep {
  width: 1px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* Indicateur de scroll */
.hero__scroll {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.hero__scroll:hover {
  opacity: 0.85;
}

.hero__scroll-mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255,251,237,0.5);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.hero__scroll-wheel {
  width: 4px;
  height: 8px;
  background: rgba(255,251,237,0.7);
  border-radius: 2px;
  animation: scroll-roue 2.2s ease-in-out infinite;
}

@keyframes scroll-roue {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes monte-fondu {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Section Stage Intensif
   ============================================================ */
.stage {
  padding-block: var(--section-py);
  background: var(--creme);
}

/* Grille des 3 piliers */
.stage__piliers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 5.5rem;
}

.pilier-card {
  background: var(--blanc);
  border: 1.5px solid var(--bordeaux-a10);
  border-radius: var(--radius-lg);
  padding: 2.125rem;
  transition: var(--transition);
  box-shadow: var(--ombre-xs);
  position: relative;
  overflow: hidden;
}

/* Bande de couleur en haut de chaque carte */
.pilier-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bordeaux), var(--orange));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pilier-card:hover {
  transform: translateY(-7px);
  box-shadow: var(--ombre-lg);
  border-color: transparent;
}

.pilier-card:hover::before {
  opacity: 1;
}

.pilier-card__icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--bordeaux-a10);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.375rem;
  transition: var(--transition);
}

.pilier-card:hover .pilier-card__icon-wrap {
  background: var(--bordeaux);
}

.pilier-card__icon {
  width: 30px;
  height: 30px;
  color: var(--bordeaux);
  transition: color 0.3s;
}

.pilier-card:hover .pilier-card__icon {
  color: var(--dore);
}

.pilier-card__titre {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 0.75rem;
}

.pilier-card__texte {
  font-size: 0.9375rem;
  color: #656565;
  line-height: 1.7;
}

/* Timeline */
.stage__timeline {
  max-width: 700px;
  margin-inline: auto;
}

.stage__timeline-titre {
  font-family: var(--font-titre);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--bordeaux);
  text-align: center;
  margin-bottom: 2.75rem;
}

.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--bordeaux), var(--orange));
}

.timeline__item {
  display: flex;
  gap: 2rem;
  padding-bottom: 2.5rem;
  position: relative;
  align-items: flex-start;
}

.timeline__item:last-child {
  padding-bottom: 0;
}

.timeline__num {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: var(--bordeaux);
  color: var(--creme);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 1.0625rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 5px var(--creme), 0 0 0 7px var(--bordeaux-a20);
}

.timeline__content {
  padding-top: 0.875rem;
}

.timeline__titre {
  font-family: var(--font-titre);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}

.timeline__texte {
  font-size: 0.9375rem;
  color: #656565;
  line-height: 1.7;
}

/* ============================================================
   Section Matières
   ============================================================ */
.matieres {
  padding-block: var(--section-py);
  background: var(--blanc);
  position: relative;
  overflow: hidden;
}

.matieres__deco {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,38,56,0.03) 0%, transparent 65%);
  top: -250px;
  right: -200px;
  pointer-events: none;
}

/* Grille auto-ajustée */
.matieres__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;
}

/* La 5e carte (sur une ligne à 2) : prend 2 colonnes et se centre */
.matieres__grid .matiere-card:last-child:nth-child(3n - 1) {
  grid-column: span 1;
}

.matiere-card {
  background: var(--blanc);
  border: 1.5px solid var(--bordeaux-a10);
  border-radius: var(--radius-lg);
  padding: 1.875rem;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: var(--transition-lent);
}

/* Numéro décoratif en fond */
.matiere-card__num {
  position: absolute;
  top: 0.875rem;
  right: 1.125rem;
  font-family: var(--font-titre);
  font-size: 3rem;
  font-weight: 700;
  color: var(--bordeaux-a10);
  line-height: 1;
  transition: var(--transition);
  user-select: none;
}

/* Fond animé au survol */
.matiere-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bordeaux), #1e3a52);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

.matiere-card:hover,
.matiere-card:focus-visible {
  border-color: var(--bordeaux);
  transform: translateY(-5px) scale(1.01);
  box-shadow: var(--ombre-lg);
}

.matiere-card:hover::after,
.matiere-card:focus-visible::after {
  opacity: 1;
}

/* Tous les enfants passent au-dessus du fond */
.matiere-card > * {
  position: relative;
  z-index: 1;
  transition: var(--transition);
}

.matiere-card:hover .matiere-card__num {
  color: rgba(255,255,255,0.08);
}

.matiere-card__icon {
  width: 44px;
  height: 44px;
  color: var(--bordeaux);
  margin-bottom: 1.125rem;
}

.matiere-card:hover .matiere-card__icon,
.matiere-card:focus-visible .matiere-card__icon {
  color: var(--dore);
}

.matiere-card__nom {
  font-family: var(--font-titre);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 0.625rem;
}

.matiere-card:hover .matiere-card__nom,
.matiere-card:focus-visible .matiere-card__nom {
  color: var(--blanc);
}

.matiere-card__desc {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.65;
  margin-bottom: 1.125rem;
}

.matiere-card:hover .matiere-card__desc,
.matiere-card:focus-visible .matiere-card__desc {
  color: rgba(255,251,237,0.8);
}

.matiere-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.matiere-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--bordeaux);
  background: var(--bordeaux-a10);
  padding: 0.2rem 0.75rem;
  border-radius: 50px;
  transition: var(--transition);
}

.matiere-card:hover .matiere-tag,
.matiere-card:focus-visible .matiere-tag {
  background: rgba(255,255,255,0.15);
  color: var(--dore);
}

/* ============================================================
   Section Tarifs
   ============================================================ */
.tarifs {
  padding-block: var(--section-py);
  background: var(--creme);
}

.tarifs__note {
  display: block;
  font-size: 0.875rem;
  color: var(--orange);
  font-weight: 500;
  margin-top: 0.5rem;
}

.tarifs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 4rem;
}

.tarif-card {
  background: var(--blanc);
  border: 1.5px solid var(--bordeaux-a10);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  transition: var(--transition);
  box-shadow: var(--ombre-xs);
}

.tarif-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-md);
  border-color: var(--bordeaux-a20);
}

/* Carte mise en avant */
.tarif-card--vedette {
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  transform: scale(1.035);
  box-shadow: var(--ombre-lg);
}

.tarif-card--vedette:hover {
  transform: scale(1.035) translateY(-5px);
}

.tarif-card__badge {
  display: inline-block;
  background: var(--orange);
  color: var(--blanc);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.875rem;
  border-radius: 50px;
  margin-bottom: 1.375rem;
}

.tarif-card__en-tete {
  margin-bottom: 1.625rem;
  padding-bottom: 1.625rem;
  border-bottom: 1px solid var(--bordeaux-a10);
}

.tarif-card--vedette .tarif-card__en-tete {
  border-bottom-color: rgba(255,255,255,0.12);
}

.tarif-card__nom {
  display: block;
  font-family: var(--font-titre);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 0.75rem;
}

.tarif-card--vedette .tarif-card__nom {
  color: var(--creme);
}

.tarif-card__prix {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.tarif-card__montant {
  font-family: var(--font-titre);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--bordeaux);
}

.tarif-card--vedette .tarif-card__montant {
  color: var(--dore);
}

.tarif-card__periode {
  font-size: 0.9375rem;
  color: #999;
}

.tarif-card--vedette .tarif-card__periode {
  color: rgba(255,251,237,0.55);
}

.tarif-card__liste {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 2rem;
}

.tarif-card__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--charbon);
}

.tarif-card--vedette .tarif-card__item {
  color: rgba(255,251,237,0.88);
}

/* Icône ✓ ou ✗ inline SVG via pseudo-element */
.tarif-card__item::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
}

.tarif-card__item--ok::before {
  background-color: var(--vert-sauge);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10l3.5 3.5L15 7' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

.tarif-card__item--non {
  opacity: 0.4;
}

.tarif-card__item--non::before {
  background-color: #ccc;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='white' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* Sessions disponibles */
.tarifs__sessions {
  text-align: center;
}

.tarifs__sessions-titre {
  font-family: var(--font-titre);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--bordeaux);
  margin-bottom: 1.375rem;
}

.sessions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

.session-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--blanc);
  border: 1.5px dashed rgba(21,38,56,0.3);
  color: var(--bordeaux);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.625rem 1.375rem;
  border-radius: 50px;
}

/* ============================================================
   Section Réservation
   ============================================================ */
.reservation {
  padding-block: var(--section-py);
  background: var(--bordeaux-prof);
  position: relative;
  overflow: hidden;
}

.reservation__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.reservation__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.reservation__orb--1 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(197,162,88,0.12) 0%, transparent 70%);
  top: -20%;
  right: -10%;
}

.reservation__orb--2 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(197,162,88,0.1) 0%, transparent 70%);
  bottom: -15%;
  left: -5%;
}

.reservation .container {
  position: relative;
  z-index: 1;
}

.reservation__wrapper {
  max-width: 820px;
  margin-inline: auto;
}

/* Formulaire — fond verre dépoli */
.reservation__form {
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5vw, 3.25rem);
}

/* Blocs fieldset */
.form__bloc {
  border: none;
  padding: 0;
  margin-bottom: 2.25rem;
}

.form__legende {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-titre);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--dore);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  width: 100%;
}

.form__legende-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(197,162,88,0.2);
  border: 1.5px solid rgba(197,162,88,0.35);
  border-radius: 50%;
  font-size: 0.875rem;
  font-family: var(--font-corps);
  font-weight: 700;
  color: var(--dore);
  flex-shrink: 0;
}

.form__ligne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form__groupe {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.125rem;
}

.form__groupe:last-child {
  margin-bottom: 0;
}

.form__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,251,237,0.82);
}

.form__requis {
  color: var(--orange);
  margin-left: 2px;
}

.form__opt {
  font-weight: 400;
  color: rgba(255,251,237,0.45);
  font-style: italic;
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}

/* Champs de saisie */
.form__input,
.form__textarea {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 0.8125rem 1.125rem;
  font-family: var(--font-corps);
  font-size: 0.9375rem;
  color: var(--creme);
  width: 100%;
  transition: var(--transition);
}

.form__input::placeholder,
.form__textarea::placeholder {
  color: rgba(255,251,237,0.3);
}

.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 4px rgba(197,162,88,0.18);
}

.form__input.erreur,
.form__textarea.erreur {
  border-color: #F87171;
  box-shadow: 0 0 0 4px rgba(248,113,113,0.15);
}

.form__textarea {
  resize: vertical;
  min-height: 110px;
}

/* Select personnalisé */
.form__select-wrap {
  position: relative;
}

.form__select {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  padding: 0.8125rem 3rem 0.8125rem 1.125rem;
  font-family: var(--font-corps);
  font-size: 0.9375rem;
  color: var(--creme);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: var(--transition);
}

.form__select option {
  background: var(--bordeaux-prof);
  color: var(--creme);
}

.form__select:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 4px rgba(197,162,88,0.18);
}

.form__select.erreur {
  border-color: #F87171;
}

.form__select-chevron {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,251,237,0.45);
  pointer-events: none;
}

/* Pills matières à cocher */
.form__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-bottom: 0.375rem;
}

.form__pill {
  cursor: pointer;
  user-select: none;
}

.form__pill input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form__pill span {
  display: inline-block;
  padding: 0.5625rem 1.125rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,251,237,0.7);
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.18);
  transition: var(--transition);
}

.form__pill:hover span {
  border-color: var(--orange);
  color: var(--blanc);
}

.form__pill input:checked + span {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--blanc);
  box-shadow: 0 3px 14px rgba(197,162,88,0.4);
}

.form__pill input:focus-visible + span {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* Boutons radio session (formulaire de réservation) */
.form__sessions-radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.375rem;
}

.form__radio-session {
  cursor: pointer;
  user-select: none;
  display: block;
}

.form__radio-session input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form__radio-session-corps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.25rem 1rem;
  border-radius: var(--radius-lg);
  border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.05);
  text-align: center;
  transition: var(--transition);
}

.form__radio-session:hover .form__radio-session-corps {
  border-color: var(--orange);
  background: rgba(197,162,88,0.08);
}

.form__radio-session input:checked + .form__radio-session-corps {
  border-color: var(--orange);
  background: rgba(197,162,88,0.15);
  box-shadow: 0 0 0 3px rgba(197,162,88,0.25);
}

.form__radio-session-label {
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blanc);
  display: block;
}

.form__radio-session-dates {
  font-size: 0.8rem;
  color: rgba(255,251,237,0.6);
  display: block;
}

.form__radio-session input:checked + .form__radio-session-corps .form__radio-session-dates {
  color: rgba(255,251,237,0.85);
}

.form__radio-session input:focus-visible + .form__radio-session-corps {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .form__sessions-radio {
    grid-template-columns: 1fr;
  }
}

/* Messages d'erreur */
.form__erreur {
  font-size: 0.8125rem;
  color: #FCA5A5;
  min-height: 1.2em;
  line-height: 1.3;
}

/* Zone d'envoi */
.form__envoi {
  margin-top: 2.25rem;
  text-align: center;
}

.form__rgpd {
  font-size: 0.8125rem;
  color: rgba(255,251,237,0.38);
  margin-top: 1rem;
  line-height: 1.55;
}

.form__lien {
  color: var(--dore);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Message de confirmation */
.form__succes {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: rgba(44,122,91,0.14);
  border: 1px solid rgba(44,122,91,0.35);
  border-radius: var(--radius);
  padding: 1.125rem 1.375rem;
  color: var(--creme);
  font-weight: 500;
  margin-top: 1.5rem;
}

.form__succes[hidden] {
  display: none;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--bordeaux-prof);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 4.5rem 0 2rem;
}

.footer__grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: 3.5rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.footer__logo {
  height: 62px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 1.125rem;
}

.footer__slogan {
  font-size: 0.9375rem;
  color: rgba(255,251,237,0.5);
  line-height: 1.65;
  margin-bottom: 1.625rem;
  max-width: 290px;
}

.footer__reseaux {
  display: flex;
  gap: 0.75rem;
}

.footer__reseau {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,251,237,0.55);
  transition: var(--transition);
}

.footer__reseau svg {
  width: 16px;
  height: 16px;
}

.footer__reseau:hover,
.footer__reseau:focus-visible {
  border-color: var(--orange);
  color: var(--orange);
  background: rgba(197,162,88,0.1);
  transform: translateY(-2px);
}

.footer__nav-titre {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 1.375rem;
}

.footer__nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}

.footer__lien {
  font-size: 0.9375rem;
  color: rgba(255,251,237,0.55);
  transition: var(--transition);
}

.footer__lien:hover,
.footer__lien:focus-visible {
  color: var(--creme);
  padding-left: 0.25rem;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.footer__adresse {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer__contact-ligne {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: rgba(255,251,237,0.55);
}

.footer__contact-ligne svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.footer__bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__copyright {
  font-size: 0.875rem;
  color: rgba(255,251,237,0.3);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 0.875rem;
  color: rgba(255,251,237,0.2);
}

.footer__lien-discret {
  font-size: 0.875rem;
  color: rgba(255,251,237,0.38);
  transition: var(--transition);
}

.footer__lien-discret:hover {
  color: rgba(255,251,237,0.7);
}

/* ============================================================
   Responsive — tablette large (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .stage__piliers {
    grid-template-columns: repeat(2, 1fr);
  }

  .matieres__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Annuler le positionnement spécial pour la 5e carte */
  .matieres__grid .matiere-card:last-child:nth-child(3n - 1) {
    grid-column: auto;
  }

  .tarifs__grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }

  .tarif-card--vedette {
    transform: none;
    order: -1;
  }

  .tarif-card--vedette:hover {
    transform: translateY(-5px);
  }

  .footer__grille {
    grid-template-columns: 1fr 1fr;
  }

  .footer__marque {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   Responsive — tablette (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-py: 3.5rem;
  }

  /* Cacher liens nav desktop, afficher hamburger */
  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Hero centré sur mobile */
  .hero {
    text-align: center;
  }

  .hero__ctas {
    justify-content: center;
  }

  .hero__stats {
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.375rem;
  }

  .hero__stat-sep {
    display: none;
  }

  /* Piliers en 1 colonne */
  .stage__piliers {
    grid-template-columns: 1fr;
  }

  /* Matières en 1 colonne */
  .matieres__grid {
    grid-template-columns: 1fr;
  }

  /* Formulaire — champs empilés */
  .form__ligne {
    grid-template-columns: 1fr;
  }

  /* Footer simplifié */
  .footer__grille {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .footer__marque {
    grid-column: auto;
  }

  .footer__bas {
    flex-direction: column;
    text-align: center;
  }

  /* Timeline */
  .timeline::before {
    left: 22px;
  }

  .timeline__num {
    width: 44px;
    height: 44px;
    font-size: 0.875rem;
  }

  .timeline__item {
    gap: 1.375rem;
  }
}

/* ============================================================
   Responsive — mobile (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  .hero__titre {
    font-size: 2.375rem;
  }

  .hero__ctas {
    flex-direction: column;
    align-items: center;
  }

  .hero__ctas .btn {
    width: 100%;
    max-width: 320px;
  }

  .hero__stats {
    padding: 1.125rem 1.375rem;
    gap: 0.875rem;
    width: 100%;
    justify-content: space-around;
  }

  .hero__stat-nombre {
    font-size: 1.625rem;
  }

  .tarif-card--vedette {
    transform: none;
  }

  .form__pills {
    gap: 0.5rem;
  }
}

/* ============================================================
   Bouton flottant de réservation (FAB)
   ============================================================ */
.fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 890;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--orange);
  color: var(--blanc);
  padding: 0.875rem 1.375rem;
  border-radius: 50px;
  font-family: var(--font-corps);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(197,162,88,0.52), 0 2px 8px rgba(0,0,0,0.15);
  transition: var(--transition);
  white-space: nowrap;
  animation: fab-apparait 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both;
}

.fab:hover,
.fab:focus-visible {
  background: var(--orange-clair);
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 36px rgba(197,162,88,0.6), 0 4px 12px rgba(0,0,0,0.18);
}

.fab:active {
  transform: scale(0.97);
}

.fab__icone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Bulle de notification (optionnel — pour futures alertes) */
.fab__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  background: var(--dore);
  border-radius: 50%;
  border: 2px solid var(--blanc);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--bordeaux);
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes fab-apparait {
  from { opacity: 0; transform: translateY(20px) scale(0.8); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Masquer le texte sur très petit mobile */
@media (max-width: 360px) {
  .fab__texte { display: none; }
  .fab { padding: 0.9375rem; border-radius: 50%; }
}

/* ============================================================
   Modale de réservation rapide
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.modal[hidden] {
  display: none;
}

/* Fond assombri */
.modal__fond {
  position: absolute;
  inset: 0;
  background: rgba(5,14,24,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fond-fondu 0.25s ease;
}

@keyframes fond-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Boîte centrale */
.modal__boite {
  position: relative;
  z-index: 1;
  background: var(--blanc);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--ombre-lg);
  animation: boite-monte 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes boite-monte {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__fermer {
  position: absolute;
  top: 1.125rem;
  right: 1.125rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  background: #f5f5f5;
  transition: var(--transition);
}

.modal__fermer:hover {
  background: var(--bordeaux);
  color: var(--blanc);
}

.modal__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.625rem;
}

.modal__titre {
  font-family: var(--font-titre);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--bordeaux);
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.modal__sous-titre {
  font-size: 0.9375rem;
  color: #777;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}

/* Champs de la modale (fond blanc, contraste sombre) */
.modal .form__input,
.modal .form__select {
  background: #f0f4f8;
  border-color: rgba(21,38,56,0.18);
  color: var(--charbon);
}

.modal .form__input::placeholder {
  color: #aaa;
}

.modal .form__input:focus,
.modal .form__select:focus {
  background: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(197,162,88,0.12);
}

.modal .form__label {
  color: var(--charbon);
  font-weight: 600;
}

.modal .form__erreur {
  color: #dc2626;
}

.modal__select-wrap {
  position: relative;
}

.modal__select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: #f0f4f8;
  border: 1.5px solid rgba(21,38,56,0.18);
  border-radius: var(--radius);
  padding: 0.8125rem 3rem 0.8125rem 1.125rem;
  font-family: var(--font-corps);
  font-size: 0.9375rem;
  color: var(--charbon);
  width: 100%;
  cursor: pointer;
  transition: var(--transition);
}

.modal__select-wrap select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(197,162,88,0.12);
}

.modal__select-wrap svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

.modal__separateur {
  text-align: center;
  color: #bbb;
  font-size: 0.875rem;
  margin: 1.375rem 0;
  position: relative;
}

.modal__separateur::before,
.modal__separateur::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: #eee;
}

.modal__separateur::before { left: 0; }
.modal__separateur::after  { right: 0; }

.modal__lien-complet {
  display: block;
  text-align: center;
  color: var(--bordeaux);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition);
}

.modal__lien-complet:hover {
  color: var(--orange);
}

/* ============================================================
   Hero intérieur (pages secondaires)
   ============================================================ */
.page-hero {
  padding: clamp(7rem, 14vw, 10rem) var(--container-px) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 70% 60% at 80% 30%, rgba(197,162,88,0.2) 0%, transparent 55%),
    linear-gradient(150deg, #0a1825 0%, var(--bordeaux) 50%, #050e18 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-hero__grille {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,251,237,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,251,237,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}

.page-hero__label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dore);
  background: rgba(197,162,88,0.18);
  padding: 0.35rem 1.125rem;
  border-radius: 50px;
  margin-bottom: 1.125rem;
  animation: monte-fondu 0.7s ease both;
}

.page-hero__titre {
  font-family: var(--font-titre);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.15;
  margin-bottom: 1rem;
  animation: monte-fondu 0.7s ease 0.12s both;
}

.page-hero__titre em {
  font-style: italic;
  color: var(--dore);
}

.page-hero__sous-titre {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: rgba(255,251,237,0.72);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.7;
  font-weight: 300;
  animation: monte-fondu 0.7s ease 0.24s both;
}

/* Fil d'Ariane */
.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255,251,237,0.45);
  margin-top: 1.5rem;
  animation: monte-fondu 0.7s ease 0.36s both;
}

.breadcrumb a {
  color: rgba(255,251,237,0.6);
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: var(--dore);
}

.breadcrumb__sep {
  color: rgba(255,251,237,0.25);
}

/* ============================================================
   Section CTA de conversion (réutilisable sur toutes les pages)
   ============================================================ */
.cta-section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  background: linear-gradient(135deg, var(--bordeaux) 0%, #1e3a52 50%, var(--bordeaux-prof) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,251,237,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,251,237,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-section__titre {
  font-family: var(--font-titre);
  font-size: clamp(1.75rem, 4vw, 2.875rem);
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.2;
  margin-bottom: 0.875rem;
}

.cta-section__titre em {
  font-style: italic;
  color: var(--dore);
}

.cta-section__texte {
  font-size: 1.0625rem;
  color: rgba(255,251,237,0.72);
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.7;
  margin-bottom: 2.25rem;
  font-weight: 300;
}

.cta-section__boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ============================================================
   Page Qui nous sommes
   ============================================================ */

/* Cartes portraits des deux frères */
.equipe__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

.portrait-card {
  background: var(--blanc);
  border: 1.5px solid var(--bordeaux-a10);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--ombre-xs);
}

.portrait-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ombre-lg);
  border-color: transparent;
}

.portrait-card__header {
  padding: 2.25rem 2.25rem 1.5rem;
  position: relative;
  background: linear-gradient(135deg, var(--bordeaux) 0%, #1e3a52 100%);
  overflow: hidden;
}

.portrait-card__header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--blanc);
  border-radius: 50%;
}

/* Variante orangée pour le second portrait */
.portrait-card--orange .portrait-card__header {
  background: linear-gradient(135deg, #8B3A00 0%, var(--orange) 100%);
}

.portrait-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 3px solid rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}

.portrait-card__initiales {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--blanc);
}

.portrait-card__prenom {
  font-family: var(--font-titre);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--blanc);
  display: block;
  position: relative;
  z-index: 1;
}

.portrait-card__age {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.65);
  position: relative;
  z-index: 1;
  margin-bottom: 0.5rem;
}

.portrait-card__role {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: var(--dore);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  position: relative;
  z-index: 1;
}

.portrait-card__corps {
  padding: 2.75rem 2.25rem 2.25rem;
}

.portrait-card__infos {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.625rem;
}

.portrait-info {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.portrait-info__icone {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bordeaux-a10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--bordeaux);
}

.portrait-card--orange .portrait-info__icone {
  background: rgba(197,162,88,0.1);
  color: var(--orange);
}

.portrait-info__icone svg {
  width: 16px;
  height: 16px;
}

.portrait-info__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bordeaux);
  display: block;
  margin-bottom: 0.2rem;
}

.portrait-card--orange .portrait-info__label {
  color: var(--orange);
}

.portrait-info__valeur {
  font-size: 0.9375rem;
  color: var(--charbon);
  line-height: 1.55;
}

/* Citation de chaque frère */
.portrait-card__citation {
  position: relative;
  background: var(--creme);
  border-left: 3px solid var(--bordeaux);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.125rem 1.25rem;
  margin-top: 1.5rem;
}

.portrait-card--orange .portrait-card__citation {
  border-left-color: var(--orange);
}

.portrait-card__citation-guillemet {
  font-family: var(--font-titre);
  font-size: 3rem;
  color: var(--bordeaux);
  line-height: 0.5;
  opacity: 0.25;
  position: absolute;
  top: 0.75rem;
  left: 0.875rem;
}

.portrait-card--orange .portrait-card__citation-guillemet {
  color: var(--orange);
}

.portrait-card__citation-texte {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.65;
  font-style: italic;
  padding-left: 1.5rem;
}

/* Section "Pourquoi nous faire confiance" */
.confiance {
  padding-block: var(--section-py);
  background: var(--bordeaux);
  position: relative;
  overflow: hidden;
}

.confiance::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,251,237,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,251,237,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.confiance .container {
  position: relative;
  z-index: 1;
}

.confiance__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.confiance-item {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  backdrop-filter: blur(10px);
  transition: var(--transition);
}

.confiance-item:hover {
  background: rgba(255,255,255,0.11);
  transform: translateY(-3px);
}

.confiance-item__icone {
  width: 44px;
  height: 44px;
  background: rgba(197,162,88,0.2);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--dore);
}

.confiance-item__icone svg {
  width: 22px;
  height: 22px;
}

.confiance-item__titre {
  font-family: var(--font-titre);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--creme);
  margin-bottom: 0.5rem;
}

.confiance-item__texte {
  font-size: 0.9375rem;
  color: rgba(255,251,237,0.65);
  line-height: 1.65;
}

/* ============================================================
   Page Le Stage — sections spécifiques
   ============================================================ */
.stage-page .stage {
  background: var(--blanc);
}

.stage-page .tarifs {
  background: var(--creme);
}

/* ============================================================
   Page Contact
   ============================================================ */
.contact-section {
  padding-block: var(--section-py);
  background: var(--blanc);
}

.contact__grille {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: start;
}

.contact__infos {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact__info-carte {
  background: var(--creme);
  border: 1.5px solid var(--bordeaux-a10);
  border-radius: var(--radius-lg);
  padding: 1.375rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: var(--transition);
}

.contact__info-carte:hover {
  border-color: var(--bordeaux-a20);
  box-shadow: var(--ombre-sm);
}

.contact__info-icone {
  width: 42px;
  height: 42px;
  background: var(--bordeaux);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--dore);
}

.contact__info-icone svg {
  width: 18px;
  height: 18px;
}

.contact__info-titre {
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 0.3rem;
}

.contact__info-valeur {
  font-size: 0.9375rem;
  color: var(--charbon);
  line-height: 1.5;
}

.contact__info-valeur a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Formulaire de contact (fond blanc, texte sombre) */
.contact__form-wrapper {
  background: var(--creme);
  border: 1.5px solid var(--bordeaux-a10);
  border-radius: var(--radius-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.contact__form-titre {
  font-family: var(--font-titre);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}

.contact__form-sous-titre {
  font-size: 0.9375rem;
  color: #777;
  margin-bottom: 1.75rem;
}

/* Champs de contact (fond clair) */
.contact__form .form__input,
.contact__form .form__textarea,
.contact__form .form__select {
  background: var(--blanc);
  border-color: rgba(21,38,56,0.15);
  color: var(--charbon);
}

.contact__form .form__input::placeholder,
.contact__form .form__textarea::placeholder {
  color: #bbb;
}

.contact__form .form__input:focus,
.contact__form .form__textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(197,162,88,0.1);
  background: var(--blanc);
}

.contact__form .form__label {
  color: var(--charbon);
  font-weight: 600;
}

.contact__form .form__erreur {
  color: #dc2626;
}

/* ============================================================
   Page Réserver — formulaire complet (fond bordeaux conservé)
   ============================================================ */
.reserver-page .reservation {
  padding-top: 3rem;
}

/* ============================================================
   Responsive — Qui nous sommes
   ============================================================ */
@media (max-width: 900px) {
  .equipe__grille {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .confiance__grille {
    grid-template-columns: 1fr;
  }
}

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

  .cta-section__boutons {
    flex-direction: column;
    align-items: center;
  }

  .cta-section__boutons .btn {
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 480px) {
  .portrait-card__corps {
    padding: 2.5rem 1.5rem 1.5rem;
  }

  .portrait-card__header {
    padding: 1.75rem 1.5rem 1.5rem;
  }
}

/* ============================================================
   Programme pédagogique
   ============================================================ */

.programme {
  background: var(--creme);
  padding: 5rem 0;
}

/* Organisation journalière matin / après-midi */
.programme__journee {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin: 3rem 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(77, 15, 60, 0.08);
}

.programme__demi {
  padding: 2.5rem 2rem;
}

.programme__demi--matin {
  background: var(--blanc);
}

.programme__demi--aprem {
  background: var(--blanc);
}

.programme__demi-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 1rem;
}

.programme__demi-header svg {
  flex-shrink: 0;
  color: var(--orange);
}

.programme__demi-titre {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 0.75rem;
}

.programme__demi-texte {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.7;
}

.programme__separateur {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(21,38,56,0.15), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.programme__separateur span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #aaa;
  background: var(--blanc);
  padding: 0.75rem 0.4rem;
}

/* Récapitulatif horaire */
.programme__recap {
  background: var(--bordeaux);
  border-radius: var(--radius-xl);
  padding: 2.5rem 3rem;
  margin-bottom: 2rem;
}

.programme__recap-titre {
  font-family: var(--font-titre);
  font-size: 1.2rem;
  color: var(--dore);
  margin-bottom: 2rem;
  font-weight: 700;
}

.programme__heures {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.heure-item {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: center;
  gap: 1rem;
}

.heure-item__matiere {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
}

.heure-item--accent .heure-item__matiere {
  color: var(--blanc);
  font-weight: 600;
}

.heure-item__barre {
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}

.heure-item__barre::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--largeur, 50%);
  background: rgba(255,255,255,0.3);
  border-radius: 99px;
  transition: width 0.8s ease;
}

.heure-item--accent .heure-item__barre::after {
  background: var(--orange);
}

.heure-item__volume {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blanc);
  text-align: right;
}

.programme__argument {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  border-left: 3px solid var(--orange);
  padding-left: 1.25rem;
  margin: 0;
}

/* Suivi parents */
.programme__suivi {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  background: var(--blanc);
  border: 1.5px solid rgba(197,162,88,0.25);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
}

.suivi__icone {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-clair));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanc);
}

.suivi__titre {
  font-family: var(--font-titre);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 0.5rem;
}

.suivi__texte {
  font-size: 0.93rem;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   Sessions & Tarif unique
   ============================================================ */

/* Sessions en blocs */
.sessions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.session-bloc {
  background: var(--blanc);
  border: 1.5px solid rgba(21,38,56,0.12);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  text-align: center;
}

.session-bloc--vedette {
  border-color: var(--orange);
  box-shadow: 0 6px 28px rgba(197,162,88,0.18);
}

.session-bloc__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--orange);
  color: var(--blanc);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 99px;
  white-space: nowrap;
}

.session-bloc__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bordeaux);
  opacity: 0.6;
  margin-bottom: 0.75rem;
}

.session-bloc__date {
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 0.25rem;
}

.session-bloc__detail {
  font-size: 0.85rem;
  color: #888;
}

.sessions-horaires {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #666;
  text-align: center;
  margin-bottom: 3rem;
}

.sessions-horaires svg {
  flex-shrink: 0;
  color: var(--orange);
}

/* Tarif unique */
.tarif-unique {
  max-width: 600px;
  margin: 0 auto;
  background: var(--blanc);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(21,38,56,0.12);
  overflow: hidden;
  text-align: center;
}

.tarif-unique__promo {
  background: linear-gradient(135deg, var(--bordeaux), #1e3a52);
  padding: 1.25rem 2rem;
}

.tarif-unique__promo-label {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 0.25rem;
}

.tarif-unique__promo-condition {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.tarif-unique__prix-bloc {
  padding: 2.5rem 2rem 1.5rem;
  border-bottom: 1px solid rgba(21,38,56,0.08);
}

.tarif-unique__ancien-prix {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.tarif-unique__barre {
  font-size: 1.1rem;
  color: #aaa;
  text-decoration: line-through;
  font-weight: 500;
}

.tarif-unique__economie {
  background: rgba(197,162,88,0.12);
  color: var(--orange);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.75rem;
  border-radius: 99px;
}

.tarif-unique__nouveau-prix {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tarif-unique__montant {
  font-family: var(--font-titre);
  font-size: 4rem;
  font-weight: 700;
  color: var(--bordeaux);
  line-height: 1;
}

.tarif-unique__detail {
  font-size: 0.85rem;
  color: #888;
  margin-top: 0.25rem;
}

.tarif-unique__inclus {
  list-style: none;
  padding: 2rem 2.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.tarif-unique__inclus li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  color: var(--charbon);
}

.tarif-unique__inclus li::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vert-sauge);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.tarif-unique .btn {
  margin: 0 2.5rem 2.5rem;
  width: calc(100% - 5rem);
}

/* Responsive programme */
@media (max-width: 768px) {
  .programme__journee {
    grid-template-columns: 1fr;
  }

  .programme__separateur {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(21,38,56,0.15), transparent);
  }

  .programme__separateur span {
    writing-mode: horizontal-tb;
    padding: 0.4rem 0.75rem;
  }

  .programme__recap {
    padding: 2rem 1.5rem;
  }

  .heure-item {
    grid-template-columns: 130px 1fr 50px;
    gap: 0.75rem;
  }

  .sessions-grid {
    grid-template-columns: 1fr;
  }

  .programme__suivi {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.5rem;
  }

  .tarif-unique__inclus {
    padding: 1.5rem;
  }

  .tarif-unique .btn {
    margin: 0 1.5rem 1.5rem;
    width: calc(100% - 3rem);
  }
}

@media (max-width: 480px) {
  .heure-item {
    grid-template-columns: 110px 1fr 44px;
    gap: 0.5rem;
  }

  .heure-item__matiere {
    font-size: 0.78rem;
  }

  .tarif-unique__montant {
    font-size: 3rem;
  }
}

/* ============================================================
   Mentions légales
   ============================================================ */

.legal__bloc {
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(77, 15, 60, 0.08);
}

.legal__bloc:last-of-type {
  border-bottom: none;
}

.legal__titre {
  font-family: var(--font-titre);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bordeaux);
  margin-bottom: 0.875rem;
}

.legal__bloc p {
  color: var(--charbon);
  line-height: 1.75;
  margin-bottom: 0.75rem;
}

.legal__liste {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.legal__liste li {
  color: var(--charbon);
  line-height: 1.6;
  padding-left: 1.25rem;
  position: relative;
}

.legal__liste li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}

.legal__lien {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__lien:hover {
  color: var(--bordeaux);
}

.legal__maj {
  font-size: 0.85rem;
  color: #888;
  margin-top: 2rem;
  font-style: italic;
}