/* =============================================================================
   Céline Mouton — Cours particuliers à Troyes
   Feuille de style unique
   -----------------------------------------------------------------------------
   Sommaire
   01. Variables et base
   02. Éléments réutilisables (conteneur, titres, boutons, listes, cartes)
   03. En-tête et navigation
   04. Accueil
   05. Bandeau de repères
   06. Qui est Céline
   07. Les cours
   08. Bande photo
   09. Stages
   10. Tarifs
   11. FAQ
   12. Contact et formulaire
   13. Pied de page
   14. Animations et accessibilité
   ============================================================================= */


/* =============================================================================
   01. VARIABLES ET BASE
   ============================================================================= */

:root {
  /* Couleurs de la charte */
  --encre:        #19364D;
  --encre-fonce:  #0E2334;
  --encre-clair:  #2E5471;
  --ciel:         #81C3D7;
  --ciel-pale:    #E3F1F7;
  --ciel-brume:   #F0F8FB;
  --ciel-fonce:   #2E7E9B;

  /* Neutres */
  --papier:       #F5F9FB;
  --blanc:        #FFFFFF;
  --texte:        #3B4C5A;
  --texte-doux:   #64798A;
  --bordure:      #DCE8EF;

  /* Accent, usage volontairement rare : stylo rouge du cahier */
  --rouge-copie:  #C8503C;

  /* Typographie */
  --titre:  'Fraunces', Georgia, 'Times New Roman', serif;
  --corps:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --main:   'Caveat', 'Segoe Script', cursive;

  /* Rythme */
  --largeur-max:   1180px;
  --gouttiere:     clamp(1.15rem, 4vw, 2.5rem);
  --espace-section: clamp(3.75rem, 8vw, 6.5rem);

  /* Habillage */
  --rayon:         14px;
  --rayon-petit:   8px;
  --ombre-douce:   0 2px 6px rgba(25, 54, 77, .05), 0 12px 30px rgba(25, 54, 77, .07);
  --ombre-nette:   0 4px 10px rgba(25, 54, 77, .08), 0 22px 48px rgba(25, 54, 77, .13);
  --transition:    .3s cubic-bezier(.22, .61, .36, 1);

  /* Motif « cahier Seyes », signature graphique du site */
  --seyes:
    linear-gradient(to right, transparent 0 33px, rgba(200, 80, 60, .38) 33px 34px, transparent 34px),
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(25, 54, 77, .13) 23px 24px),
    repeating-linear-gradient(to right, transparent 0 23px, rgba(129, 195, 215, .30) 23px 24px);
}

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--papier);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--encre); }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--encre);
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.15;
  font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 40;
  letter-spacing: -.015em;
}

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

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

strong { color: var(--encre); font-weight: 700; }

::selection { background: var(--ciel); color: var(--encre); }


/* =============================================================================
   02. ÉLÉMENTS RÉUTILISABLES
   ============================================================================= */

.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section {
  padding-block: var(--espace-section);
  scroll-margin-top: 84px;
}

.section--claire { background: var(--blanc); }

.section--sombre {
  background: linear-gradient(165deg, var(--encre) 0%, var(--encre-fonce) 100%);
}

.section__intro {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* Surtitres --------------------------------------------------------------- */
.surtitre {
  margin: 0 0 .9rem;
  color: var(--encre-clair);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

.surtitre::before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-right: .7rem;
  vertical-align: .28em;
  background: var(--ciel);
}

.surtitre--clair { color: var(--ciel); }

/* Titres ------------------------------------------------------------------ */
.titre-section {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  margin-bottom: .5em;
}

.titre-section--clair,
.titre-mineur--clair { color: var(--blanc); }

.titre-mineur {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem);
  margin-bottom: 1.1em;
}

.chapo {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem);
  line-height: 1.65;
  color: var(--texte);
}

.chapo--clair { color: rgba(255, 255, 255, .82); }

/* Mot souligné à la main -------------------------------------------------- */
.souligne {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 22 1, 38 9, 60 5 S 98 1, 118 6' fill='none' stroke='%2381C3D7' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .3em;
  padding-bottom: .1em;
}

/* Annotation manuscrite --------------------------------------------------- */
.annotation {
  margin: 0;
  color: var(--rouge-copie);
  font-family: var(--main);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem);
  line-height: 1.25;
  transform: rotate(-2.5deg);
}

/* Boutons ----------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--corps);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), background-color var(--transition),
              color var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.bouton--plein {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
  box-shadow: 0 10px 22px rgba(25, 54, 77, .18);
}

.bouton--plein:hover,
.bouton--plein:focus-visible {
  background: var(--encre-fonce);
  border-color: var(--encre-fonce);
  transform: translateY(-2px);
}

.bouton--contour {
  background: transparent;
  border-color: var(--encre);
  color: var(--encre);
}

.bouton--contour:hover,
.bouton--contour:focus-visible {
  background: var(--encre);
  color: var(--blanc);
  transform: translateY(-2px);
}

.bouton--tel {
  flex-direction: column;
  gap: .1rem;
  padding: .7rem 1.6rem;
  background: var(--blanc);
  border-color: var(--ciel);
  color: var(--encre);
}

.bouton--tel:hover,
.bouton--tel:focus-visible {
  background: var(--ciel-pale);
  transform: translateY(-2px);
}

.bouton__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-clair);
}

.bouton__numero {
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

.bouton--large { width: 100%; }

/* Listes ------------------------------------------------------------------ */
.liste-coches li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .65rem;
}

.liste-coches li:last-child { margin-bottom: 0; }

.liste-coches li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .45em;
  width: 1.15rem;
  height: .6rem;
  border-left: 2.5px solid var(--ciel);
  border-bottom: 2.5px solid var(--ciel);
  transform: rotate(-45deg);
}

.liste-points li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .6rem;
}

.liste-points li:last-child { margin-bottom: 0; }

.liste-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ciel);
}

.liste-points--clair { color: rgba(255, 255, 255, .82); }

/* Cartes ------------------------------------------------------------------ */
.carte {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  box-shadow: var(--ombre-douce);
}

.carte__titre {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  margin-bottom: .7em;
}

.carte__intro {
  color: var(--texte-doux);
  margin-bottom: 1.15em;
}

.carte__note {
  margin: 1.35rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--bordure);
  font-size: .92rem;
  color: var(--texte-doux);
}

/* Photos encadrées -------------------------------------------------------- */
.cadre-photo {
  position: relative;
  z-index: 1;
  padding: 10px;
  background: var(--blanc);
  border-radius: 6px;
  box-shadow: var(--ombre-nette);
  transform: rotate(-1.6deg);
  transition: transform var(--transition);
}

.cadre-photo img {
  width: 100%;
  border-radius: 3px;
}

.cadre-photo:hover { transform: rotate(-0.6deg) scale(1.01); }

.cadre-photo--droit { transform: rotate(1.4deg); }
.cadre-photo--droit:hover { transform: rotate(.5deg) scale(1.01); }

/* Lien d'évitement -------------------------------------------------------- */
.lien-evitement {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: .9rem 1.4rem;
  background: var(--encre);
  color: var(--blanc);
  border-radius: 0 0 var(--rayon-petit) 0;
  font-weight: 700;
  text-decoration: none;
}

.lien-evitement:focus {
  left: 0;
  top: 0;
}


/* =============================================================================
   03. EN-TÊTE ET NAVIGATION
   ============================================================================= */

.entete {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
  transition: box-shadow var(--transition), padding var(--transition);
}

.entete--reduite { box-shadow: 0 6px 24px rgba(25, 54, 77, .09); }

.entete__grille {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
  transition: padding var(--transition);
}

.entete--reduite .entete__grille { padding-block: .55rem; }

/* Marque ------------------------------------------------------------------ */
.marque {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}

.marque__monogramme {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  background: var(--encre);
  color: var(--blanc);
  border-radius: 50%;
  font-family: var(--titre);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.marque__texte {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.marque__nom {
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--encre);
}

.marque__role {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--texte-doux);
}

/* Bouton menu ------------------------------------------------------------- */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 11px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  cursor: pointer;
}

.burger__barre {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--encre);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.menu-ouvert .burger__barre:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-ouvert .burger__barre:nth-child(2) { opacity: 0; }
.menu-ouvert .burger__barre:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation -------------------------------------------------------------- */
.navigation {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
  box-shadow: 0 18px 34px rgba(25, 54, 77, .12);
  transform: translateY(-115%);
  visibility: hidden;
  transition: transform var(--transition), visibility var(--transition);
}

.menu-ouvert .navigation {
  transform: translateY(0);
  visibility: visible;
}

.navigation__liste {
  display: flex;
  flex-direction: column;
  padding: .6rem var(--gouttiere) 1.4rem;
}

.navigation__liste a {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--bordure);
  color: var(--encre);
  font-weight: 600;
  text-decoration: none;
}

.navigation__liste a.navigation__cta {
  margin-top: 1rem;
  padding: .9rem 1.5rem;
  border: none;
  border-radius: 999px;
  background: var(--encre);
  color: var(--blanc);
  text-align: center;
}

@media (min-width: 900px) {
  .burger { display: none; }

  .navigation {
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    transform: none;
    visibility: visible;
  }

  .navigation__liste {
    flex-direction: row;
    align-items: center;
    gap: clamp(.9rem, 1.9vw, 1.9rem);
    padding: 0;
  }

  .navigation__liste a {
    position: relative;
    padding: .35rem 0;
    border: none;
    font-size: .96rem;
    font-weight: 600;
    color: var(--texte);
    transition: color var(--transition);
  }

  .navigation__liste a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--ciel);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }

  .navigation__liste a:hover,
  .navigation__liste a.est-actif { color: var(--encre); }

  .navigation__liste a:hover::after,
  .navigation__liste a.est-actif::after { transform: scaleX(1); }

  .navigation__liste a.navigation__cta {
    margin: 0;
    padding: .7rem 1.4rem;
    color: var(--blanc);
    box-shadow: 0 8px 18px rgba(25, 54, 77, .18);
  }

  .navigation__liste a.navigation__cta::after { display: none; }

  .navigation__liste a.navigation__cta:hover { background: var(--encre-fonce); }
}


/* =============================================================================
   04. ACCUEIL
   ============================================================================= */

.accueil {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 6vw, 5rem) clamp(3.25rem, 7vw, 5.5rem);
  background:
    radial-gradient(760px 460px at 88% 8%, var(--ciel-brume) 0%, transparent 62%),
    var(--blanc);
  scroll-margin-top: 84px;
}

.accueil__grille {
  display: grid;
  gap: clamp(2.75rem, 6vw, 4.5rem);
  align-items: center;
}

.accueil__titre {
  font-size: clamp(2.05rem, 1.35rem + 3vw, 3.4rem);
  font-weight: 600;
  margin-bottom: .55em;
}

.accueil__accroche {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  max-width: 34rem;
  color: var(--texte);
}

.accueil__points {
  margin: 1.75rem 0;
  font-weight: 600;
  color: var(--encre);
}

.accueil__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

/* Visuel avec fond cahier ------------------------------------------------- */
.accueil__visuel {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  padding: 1.5rem 1.5rem 4.25rem;
}

.accueil__visuel::before {
  content: '';
  position: absolute;
  inset: 0 0 2.9rem;
  background-color: var(--blanc);
  background-image: var(--seyes);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  transform: rotate(2.2deg);
  box-shadow: 0 8px 24px rgba(25, 54, 77, .07);
}

.annotation--accueil {
  position: absolute;
  left: .5rem;
  bottom: .25rem;
  z-index: 2;
}

@media (min-width: 980px) {
  .accueil__grille { grid-template-columns: 1.06fr .94fr; }
  .accueil__visuel { margin-inline: 0 auto; }
}


/* =============================================================================
   05. BANDEAU DE REPÈRES
   ============================================================================= */

.bandeau { background: var(--encre); }

.bandeau__grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  padding-block: 0;
}

.bandeau__item {
  padding: 1.5rem .4rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.bandeau__item:nth-child(2n) { border-right: none; }
.bandeau__item:nth-child(n+3) { border-bottom: none; }

.bandeau__item strong {
  display: block;
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.25;
}

.bandeau__item span {
  display: block;
  margin-top: .3rem;
  color: var(--ciel);
  font-size: .84rem;
  line-height: 1.4;
}

@media (min-width: 760px) {
  .bandeau__grille { grid-template-columns: repeat(4, 1fr); }
  .bandeau__item { border-bottom: none; }
  .bandeau__item:nth-child(2n) { border-right: 1px solid rgba(255, 255, 255, .12); }
  .bandeau__item:last-child { border-right: none; }
}


/* =============================================================================
   06. QUI EST CÉLINE
   ============================================================================= */

.section__grille {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: start;
}

.section__contenu { max-width: 40rem; }

.section__aside {
  display: grid;
  gap: 1.25rem;
}

.carte--parcours { background: var(--ciel-brume); border-color: var(--ciel-pale); }

.parcours__etape {
  position: relative;
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 1rem;
  padding-bottom: 1.35rem;
}

.parcours__etape::before {
  content: '';
  position: absolute;
  left: 3.55rem;
  top: 1.7rem;
  bottom: 0;
  width: 2px;
  background: var(--ciel);
  opacity: .5;
}

.parcours__etape:last-child { padding-bottom: 0; }
.parcours__etape:last-child::before { display: none; }

.parcours__annee {
  font-family: var(--titre);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--encre);
}

.parcours__texte {
  font-size: .96rem;
  line-height: 1.55;
}

.carte--approche { background: var(--blanc); }

@media (min-width: 980px) {
  .section__grille { grid-template-columns: 1.35fr .95fr; }
}


/* =============================================================================
   07. LES COURS
   ============================================================================= */

.matieres {
  display: grid;
  gap: 1.35rem;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.carte--matiere { border-top: 4px solid var(--ciel); }

.seance {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}

.etapes__item {
  display: grid;
  grid-template-columns: 2.9rem 1fr;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}

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

.etapes__item h4 {
  margin-bottom: .25em;
  font-size: 1.08rem;
  font-weight: 600;
}

.etapes__item p {
  margin: 0;
  font-size: .96rem;
  color: var(--texte-doux);
}

.etapes__numero {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  background: var(--ciel-pale);
  border-radius: 50%;
  color: var(--encre);
  font-family: var(--titre);
  font-size: 1.15rem;
  font-weight: 700;
}

.seance__note {
  margin-top: 1.9rem;
  padding: 1.15rem 1.35rem;
  background: var(--ciel-brume);
  border-left: 3px solid var(--ciel);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-size: .97rem;
}

.seance__visuel { max-width: 460px; margin-inline: auto; }

@media (min-width: 720px) {
  .matieres { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .seance { grid-template-columns: 1.1fr .9fr; }
}


/* =============================================================================
   08. BANDE PHOTO
   ============================================================================= */

.bande-photo {
  position: relative;
  height: clamp(190px, 30vw, 320px);
  overflow: hidden;
}

.bande-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.bande-photo__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(25, 54, 77, .92) 0%, rgba(25, 54, 77, .68) 42%, rgba(25, 54, 77, .12) 100%);
}

.bande-photo__phrase {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  margin: 0;
  padding-inline: var(--gouttiere);
  max-width: var(--largeur-max);
  margin-inline: auto;
  color: var(--blanc);
  font-family: var(--titre);
  font-size: clamp(1.35rem, 1rem + 2vw, 2.15rem);
  font-weight: 600;
  letter-spacing: .01em;
}


/* =============================================================================
   09. STAGES
   ============================================================================= */

.stages {
  display: grid;
  gap: 1.35rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.carte--stage {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
}

.carte--stage .carte__titre { color: var(--blanc); }

.carte__periode {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .3rem .85rem;
  background: var(--ciel);
  border-radius: 999px;
  color: var(--encre);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.carte__objectif {
  margin: 1.35rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: var(--ciel);
  font-style: italic;
  font-size: .95rem;
}

.organisation {
  padding: clamp(1.6rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--rayon);
}

.organisation__liste {
  display: grid;
  gap: 1.35rem;
}

.organisation__liste strong {
  display: block;
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.08rem;
  font-weight: 600;
}

.organisation__liste span {
  display: block;
  margin-top: .2rem;
  color: rgba(255, 255, 255, .72);
  font-size: .93rem;
  line-height: 1.5;
}

.organisation__note {
  margin: 1.9rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .82);
  font-size: .97rem;
}

.lien-clair {
  color: var(--ciel);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.lien-clair:hover { color: var(--blanc); }

@media (min-width: 760px) {
  .stages { grid-template-columns: repeat(2, 1fr); }
  .organisation__liste { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

@media (min-width: 1000px) {
  .organisation__liste { grid-template-columns: repeat(4, 1fr); }
}


/* =============================================================================
   10. TARIFS
   ============================================================================= */

.tarifs {
  display: grid;
  gap: 1.35rem;
}

.carte--tarif { display: flex; flex-direction: column; }

.carte--tarif-phare {
  position: relative;
  border-color: var(--ciel);
  border-width: 2px;
  box-shadow: var(--ombre-nette);
}

.etiquette {
  position: absolute;
  top: -.85rem;
  left: clamp(1.5rem, 3vw, 2.15rem);
  margin: 0;
  padding: .3rem .95rem;
  background: var(--ciel);
  border-radius: 999px;
  color: var(--encre);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.tarifs__sous-titre {
  margin: 1.6rem 0 .65rem;
  color: var(--encre-clair);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tarifs__sous-titre:first-of-type { margin-top: .6rem; }

.grille-prix li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--bordure);
}

.grille-prix li:last-child { border-bottom: none; }

.grille-prix__label {
  font-weight: 600;
  color: var(--encre);
}

.grille-prix__label em {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  font-style: normal;
  color: var(--texte-doux);
}

.grille-prix__valeur {
  font-family: var(--titre);
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--encre);
  white-space: nowrap;
}

.grille-prix__valeur s {
  margin-right: .35rem;
  color: var(--rouge-copie);
  font-size: .92rem;
  font-weight: 500;
  opacity: .75;
}

.grille-prix__unite {
  margin-left: .3rem;
  font-family: var(--corps);
  font-size: .82rem;
  font-weight: 500;
  color: var(--texte-doux);
}

.carte--tarif-stage {
  justify-content: center;
  background: var(--ciel-brume);
  border-color: var(--ciel-pale);
}

.carte--tarif-stage .bouton { align-self: flex-start; margin-top: .5rem; }

@media (min-width: 760px) {
  .tarifs { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

@media (min-width: 1000px) {
  .tarifs { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================================
   11. FAQ
   ============================================================================= */

.faq {
  max-width: 52rem;
  display: grid;
  gap: .85rem;
}

.faq__item {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 0 clamp(1.15rem, 3vw, 1.75rem);
  box-shadow: var(--ombre-douce);
  transition: border-color var(--transition);
}

.faq__item[open] { border-color: var(--ciel); }

.faq__question {
  position: relative;
  display: block;
  padding: 1.2rem 2.75rem 1.2rem 0;
  color: var(--encre);
  font-family: var(--titre);
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

.faq__question::before,
.faq__question::after {
  content: '';
  position: absolute;
  right: .35rem;
  top: 50%;
  background: var(--encre);
  transition: transform var(--transition), opacity var(--transition);
}

.faq__question::before {
  width: 15px;
  height: 2px;
  margin-top: -1px;
}

.faq__question::after {
  width: 2px;
  height: 15px;
  margin-top: -7.5px;
  right: calc(.35rem + 6.5px);
}

.faq__item[open] .faq__question::after { transform: rotate(90deg); opacity: 0; }

.faq__reponse {
  padding-bottom: 1.4rem;
  max-width: 44rem;
  color: var(--texte);
  font-size: .99rem;
}

.faq__reponse p { margin: 0; }


/* =============================================================================
   12. CONTACT ET FORMULAIRE
   ============================================================================= */

.section--contact {
  background:
    radial-gradient(620px 420px at 12% 12%, rgba(129, 195, 215, .18) 0%, transparent 68%),
    linear-gradient(165deg, var(--encre) 0%, var(--encre-fonce) 100%);
}

.contact__grille {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.75rem);
  align-items: start;
}

.coordonnees {
  display: grid;
  gap: 1.15rem;
  margin-top: 2.25rem;
}

.coordonnees li {
  display: grid;
  gap: .15rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .84);
}

.coordonnees li:last-child { border-bottom: none; padding-bottom: 0; }

.coordonnees__label {
  color: var(--ciel);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.coordonnees a {
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
  justify-self: start;
}

.coordonnees a:hover { border-bottom-color: var(--ciel); }

.annotation--contact {
  margin-top: 2.25rem;
  color: var(--ciel);
}

/* Carte du formulaire ----------------------------------------------------- */
.contact__formulaire {
  background: var(--blanc);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--ombre-nette);
}

.message {
  margin-bottom: 1.5rem;
  padding: 1rem 1.2rem;
  border-radius: var(--rayon-petit);
  font-size: .95rem;
  line-height: 1.6;
}

.message ul {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  list-style: disc;
}

.message--succes {
  background: var(--ciel-pale);
  border-left: 4px solid var(--ciel);
  color: var(--encre);
}

.message--erreur {
  background: #FCEDEA;
  border-left: 4px solid var(--rouge-copie);
  color: #8A2F1F;
}

.formulaire { display: grid; gap: 1.15rem; }

.champ { display: grid; gap: .4rem; }

.champ label {
  color: var(--encre);
  font-size: .89rem;
  font-weight: 700;
}

.champ label span { color: var(--rouge-copie); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--papier);
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon-petit);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1rem;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.champ textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%2319364D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 13px;
  padding-right: 2.6rem;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  background: var(--blanc);
  border-color: var(--ciel);
  box-shadow: 0 0 0 4px rgba(129, 195, 215, .28);
}

.champ input::placeholder,
.champ textarea::placeholder { color: #9AAAB6; }

.champ-double { display: grid; gap: 1.15rem; }

.champ--case {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .7rem;
  margin-top: .25rem;
}

.champ--case input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .18rem;
  padding: 0;
  accent-color: var(--encre);
}

.champ--case label {
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--texte);
}

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__mention {
  margin: .35rem 0 0;
  color: var(--texte-doux);
  font-size: .86rem;
  text-align: center;
}

@media (min-width: 520px) {
  .champ-double { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px) {
  .contact__grille { grid-template-columns: .92fr 1.08fr; }
}


/* =============================================================================
   13. PIED DE PAGE
   ============================================================================= */

.pied {
  background: var(--encre-fonce);
  color: rgba(255, 255, 255, .72);
  padding-top: clamp(2.75rem, 5vw, 4rem);
  font-size: .94rem;
}

.pied__grille {
  display: grid;
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}

.pied__marque {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  max-width: 26rem;
}

.pied__marque p { margin: 0; line-height: 1.6; }
.pied__marque strong { color: var(--blanc); font-size: 1.02rem; }

.pied .marque__monogramme { background: var(--ciel); color: var(--encre); }

.pied__liens {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.pied__liens a,
.pied__contact a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  transition: color var(--transition);
}

.pied__liens a:hover,
.pied__contact a:hover { color: var(--ciel); }

.pied__contact {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-family: var(--titre);
  font-size: 1.06rem;
}

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .86rem;
}

.pied__bas p { margin: 0; }
.pied__bas a { color: rgba(255, 255, 255, .72); }
.pied__bas a:hover { color: var(--ciel); }

@media (min-width: 760px) {
  .pied__grille { grid-template-columns: 1.6fr 1fr 1fr; gap: 3rem; }
}


/* =============================================================================
   14. ANIMATIONS ET ACCESSIBILITÉ
   ============================================================================= */

.a-reveler {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
}

.est-revele {
  opacity: 1;
  transform: none;
}

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

.section--sombre :focus-visible,
.section--contact :focus-visible,
.pied :focus-visible { outline-color: var(--ciel); }

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .a-reveler { opacity: 1; transform: none; }
  .cadre-photo:hover { transform: rotate(-1.6deg); }
}

@media print {
  .entete, .burger, .navigation, .bande-photo, .contact__formulaire { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
}


/* =============================================================================
   15. PAGE MENTIONS LÉGALES
   ============================================================================= */

.page-legale { max-width: 44rem; }

.page-legale h1 { margin-bottom: .5em; }

.page-legale .titre-mineur {
  margin-top: 2.6rem;
  margin-bottom: .7em;
}

.page-legale a:not(.bouton) {
  color: var(--encre);
  font-weight: 600;
  text-decoration-color: var(--ciel);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.page-legale .bouton { margin-top: 2.25rem; }

/* Sécurité petits écrans : les adresses email longues ne débordent pas */
.coordonnees a,
.pied__contact a { word-break: break-word; }

@media (max-width: 380px) {
  .coordonnees a { font-size: 1.05rem; }
}


/* =============================================================================
   16. LIEN FACEBOOK
   ============================================================================= */

.lien-facebook {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.icone-facebook {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: currentColor;
}

.pied__contact .lien-facebook {
  margin-top: .4rem;
  font-family: var(--corps);
  font-size: .94rem;
  font-weight: 600;
}

@media (min-width: 900px) {
  .navigation__liste .lien-facebook { padding: .35rem 0; }
  .navigation__liste .lien-facebook__texte { display: none; }
  .navigation__liste .lien-facebook::after { display: none; }
  .navigation__liste .lien-facebook:hover { color: var(--ciel); }
}


/* =============================================================================
   17. PREMIER COURS OFFERT (accueil)
   ============================================================================= */

.accueil__offre {
  margin: 1.75rem 0 0;
  padding: 1rem 1.35rem;
  background: var(--ciel-brume);
  border-left: 3px solid var(--ciel);
  border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0;
  font-size: 1.02rem;
  max-width: 34rem;
}

.accueil__offre strong { color: var(--encre); }


/* =============================================================================
   18. TARIFS : PRIX NET ET ENCADRÉ CRÉDIT D'IMPÔT
   ============================================================================= */

.grille-prix__valeur--net { color: var(--ciel-fonce); }

.carte--tarif-phare .grille-prix li:last-child {
  margin-top: .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--bordure);
  border-bottom: none;
}

.credit-impot {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 2.35rem);
  background: var(--ciel-brume);
  border: 1px solid var(--ciel-pale);
  border-left: 4px solid var(--ciel);
  border-radius: var(--rayon);
}

.credit-impot__titre {
  margin-bottom: .8em;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
}

.credit-impot p { font-size: .99rem; }

.credit-impot__resultat {
  margin-top: 1.35rem;
  padding: .9rem 1.2rem;
  background: var(--blanc);
  border-radius: var(--rayon-petit);
  font-size: 1.06rem;
}

.credit-impot__reserve {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ciel-pale);
  font-size: .91rem;
  color: var(--texte-doux);
}


/* =============================================================================
   19. PAGE AVANCE IMMÉDIATE
   ============================================================================= */

.fil-ariane {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-bottom: 2rem;
  font-size: .88rem;
  color: var(--texte-doux);
}

.fil-ariane a {
  color: var(--encre);
  font-weight: 600;
  text-decoration-color: var(--ciel);
  text-underline-offset: 3px;
}

.fil-ariane span[aria-hidden] { color: var(--ciel); }

.etapes--page {
  margin: 1.75rem 0 2.5rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--ciel-brume);
  border-radius: var(--rayon);
}

.etapes--page h3 {
  margin-bottom: .25em;
  font-size: 1.06rem;
  font-weight: 600;
}

.etapes--page .etapes__numero { background: var(--blanc); }

.page-legale .seance__note { margin: 2rem 0; }
.page-legale .seance__note p { margin: 0; }

/* Mention d'éligibilité dans les tarifs */
.carte__note a {
  color: var(--encre);
  font-weight: 600;
  text-decoration-color: var(--ciel);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.credit-impot__reserve-en-ligne {
  font-size: .88rem;
  color: var(--texte-doux);
  white-space: nowrap;
}

.credit-impot .bouton { margin-top: 1.6rem; }


/* =============================================================================
   20. MENTIONS D'ENTREPRISE EN PIED DE PAGE
   ============================================================================= */

.pied__legal {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .58);
}

.pied__legal li { margin: 0; }