/* Helena Ona — feuille de style commune à toutes les pages */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italique-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Charte : fond blanc, beiges, or antique en accent, noir encre pour le texte et les boutons */
:root {
  --blanc: #ffffff;
  --creme: #faf6ee;
  --beige-clair: #f5efe4;
  --beige: #f0e4ce;
  --sable: #ede2c8;
  --filet: #e8dcc2;
  --or: #a68b5c;
  --or-clair: #d4b88a;
  --or-brun: #8b7355;
  --brun: #5c4a32;
  --brun-fonce: #3a2e20;
  --encre: #1a1a1a;
  --nuit: #1f1a16;
  --nuit-profonde: #15110f;

  --titre: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --texte: "Jost", "Century Gothic", "Segoe UI", system-ui, sans-serif;

  --largeur: 72rem;
  --marge: 1.25rem;
}

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

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

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  /* Chiffres alignés : par défaut, le serif des titres dessine des chiffres « à l'ancienne » où le 1 ressemble à un I */
  font-variant-numeric: lining-nums;
}

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

/* Un élément masqué par l'attribut hidden le reste, même si une règle lui donne un display */
[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--titre);
  font-weight: 400;
  line-height: 1.05;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.9rem, 6.2vw, 4.9rem);
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  letter-spacing: -0.01em;
}

h3 {
  color: var(--brun-fonce);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Le mot mis en valeur dans un titre : italique doré */
h1 em,
h2 em {
  color: var(--or);
  font-style: italic;
}

p {
  margin: 0 0 1.1rem;
}

a {
  color: var(--encre);
  text-decoration-color: var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

a:hover {
  color: var(--or-brun);
}

:focus-visible {
  outline: 2px solid var(--or-brun);
  outline-offset: 3px;
}

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

.etroit {
  max-width: 46rem;
}

.conteneur.etroit {
  max-width: 48.5rem;
}

.lien-evitement {
  position: absolute;
  left: -999rem;
}

.lien-evitement:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--blanc);
  padding: 0.5rem 1rem;
}

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

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  flex-wrap: wrap;
}

.marque {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--encre);
  text-decoration: none;
}

.marque:hover {
  color: var(--encre);
}

/* Le logo complet (soleil et nom), le même que dans le pied de page */
.marque-logo {
  width: auto;
  height: 7.75rem;
}

.menu-bouton {
  display: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--encre);
  padding: 0.6rem 1rem;
  color: var(--encre);
  cursor: pointer;
}

.menu ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu a {
  position: relative;
  display: block;
  padding: 0.35rem 0;
  color: var(--encre);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Le soulignement du menu se déploie depuis la gauche au survol */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.2em;
  bottom: 0;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.menu a:hover::after,
.menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

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

.bouton {
  display: inline-block;
  padding: 1.05rem 1.7rem;
  border: 1px solid var(--encre);
  background: var(--encre);
  color: var(--blanc);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0.6rem 1.4rem -0.6rem rgba(26, 26, 26, 0.45);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.bouton:hover {
  background: var(--brun-fonce);
  border-color: var(--brun-fonce);
  color: var(--blanc);
  transform: translateY(-2px);
}

.bouton-clair {
  background: transparent;
  color: var(--encre);
  box-shadow: none;
}

.bouton-clair:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.actions.centre {
  justify-content: center;
}

/* Un bouton <button> ne reprend pas la police de la page par défaut */
button.bouton {
  font-family: inherit;
  cursor: pointer;
}

/* ---------- Bandeau de cookies ---------- */

.bandeau-cookies {
  position: fixed;
  z-index: 30;
  right: var(--marge);
  bottom: var(--marge);
  left: var(--marge);
  max-width: 34rem;
  margin-left: auto;
  padding: 1.5rem 1.6rem;
  background: var(--creme);
  border: 1px solid var(--filet);
  box-shadow: 0 1rem 2.5rem -1rem rgba(26, 26, 26, 0.45);
  font-size: 0.95rem;
  line-height: 1.6;
}

.bandeau-cookies[hidden] {
  display: none;
}

.bandeau-cookies-titre {
  margin: 0 0 0.5rem;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.5rem;
  line-height: 1.2;
}

.bandeau-cookies .actions {
  margin-top: 1.1rem;
}

/* Accepter et refuser : deux boutons de même taille, aussi faciles l'un que l'autre */
.bandeau-cookies .bouton {
  flex: 1;
  padding: 0.9rem 1rem;
}

/* Lien « Gérer les cookies » du pied de page : un bouton qui a l'allure des autres liens */
.lien-cookies {
  padding: 0;
  border: 0;
  background: none;
  color: var(--creme);
  font: inherit;
  cursor: pointer;
}

.lien-cookies:hover {
  color: var(--or-clair);
  text-decoration: underline;
}

/* ---------- Fil d'Ariane ---------- */

.fil {
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--brun);
}

.fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fil li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--or);
}

/* ---------- Ouverture de page ---------- */

.ouverture {
  padding: 2.5rem 0 4.5rem;
  overflow: hidden;
}

.ouverture .conteneur {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Petite étiquette en capitales espacées, suivie d'un court filet doré */
.surtitre {
  margin-bottom: 1.75rem;
  color: var(--or-brun);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.surtitre::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 1px;
  margin-top: 1.5rem;
  background: var(--or);
}

/* Le chapeau : en serif, avec un filet doré à gauche */
.chapeau {
  margin: 1.75rem 0 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--or);
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.42rem;
  line-height: 1.5;
}

.arche-cadre {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 30rem;
}

/* Contour de l'arche : le dessin déborde de 36 unités autour d'une photo de 400 × 500 */
.contour {
  position: absolute;
  top: -7.2%;
  left: -9%;
  width: 118%;
  height: 114.4%;
  overflow: visible;
  pointer-events: none;
}

.contour-trait,
.contour-halo {
  fill: none;
  stroke: var(--or);
  stroke-width: 1.2;
}

.contour-halo {
  stroke: url(#contour-fondu);
}

.contour stop {
  stop-color: var(--or);
}

/* La lune : elle suit le filet de l'arche grâce à un <animateMotion> placé dans le SVG de chaque page
   (un tour en 80 secondes). Si le visiteur demande moins d'animations, site.js l'arrête sur le côté gauche. */
.lune-fond {
  fill: var(--blanc);
}

.lune-moitie {
  fill: var(--encre);
}

.lune-terminateur {
  fill: var(--blanc);
  transform: scaleX(0.55);
}

.lune-bord {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1;
}

.pastille {
  position: absolute;
  left: -0.75rem;
  bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8.25rem;
  height: 8.25rem;
  margin: 0;
  padding: 0.5rem;
  border-radius: 50%;
  background: var(--or);
  color: var(--encre);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-7deg);
  box-shadow: 0 0.75rem 1.5rem -0.75rem rgba(26, 26, 26, 0.6);
}

.pastille strong {
  font-family: var(--titre);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

/* L'arche reprend les deux demi-cercles de l'emblème */
.arche {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 2px 2px;
  overflow: hidden;
  background: var(--sable);
}

.arche img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Photo pleine largeur entre deux sections : affichée en entier, sans rognage.
   Sur les écrans très larges, la hauteur est plafonnée et c'est le haut qui est rogné,
   pour que le sujet (en bas de l'image) reste toujours visible. */
.bande-photo {
  margin: 0;
}

.bande-photo img {
  width: 100%;
  height: auto;
  max-height: 46rem;
  object-fit: cover;
  object-position: center bottom;
}

/* Une photo en portrait, affichée en entier, à côté d'un bloc de texte ou de cartes.
   Sur mobile, la photo passe au-dessus, réduite pour ne pas occuper tout l'écran. */
.photo-texte {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-top: 2.25rem;
}

.photo-texte figure {
  margin: 0 auto;
  max-width: 22rem;
}

.photo-texte img {
  width: 100%;
  height: auto;
}

.photo-texte .cartes {
  grid-template-columns: 1fr;
  margin-top: 0;
}

@media (min-width: 56rem) {
  .photo-texte {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
  }

  .photo-texte figure {
    max-width: none;
  }
}

/* Trois photos côte à côte, au même format, affichées en entier */
.trio-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 2vw, 1.5rem);
  list-style: none;
  margin: 0 0 5rem;
  padding: 0;
}

.trio-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Sections et bandes ---------- */

.section {
  padding: 4.5rem 0;
}

/* Un court filet doré au-dessus de chaque titre de section */
.section h2::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 1px;
  margin-bottom: 1.6rem;
  background: var(--or);
}

.section > .conteneur > h2 {
  margin-bottom: 1.75rem;
}

/* Sur toutes les pages, les titres de section sont centrés, comme « Ce que nous travaillons »,
   avec leur filet doré et le paragraphe d'introduction qui les suit. Le texte courant reste
   aligné à gauche pour la lecture. */
.section h2 {
  text-align: center;
}

.section h2::before {
  margin-left: auto;
  margin-right: auto;
}

.section .conteneur > h2 + p.etroit,
.tableau + .note,
.communes + .note {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.communes {
  justify-content: center;
}

/* Les intertitres des articles et des pages légales sont centrés eux aussi */
.texte-long > h3 {
  text-align: center;
}

/* Seule exception : un titre de carte dans une liste d'articles reste aligné sur sa carte */
.section h2.h3 {
  text-align: left;
}

/* Photo au milieu d'un texte long : centrée, avec sa légende */
.texte-long > .article-photo {
  text-align: center;
}

.texte-long > .article-photo img {
  margin: 0 auto;
}

.bande-sable {
  background: var(--sable);
}

.bande-beige {
  background: var(--beige);
}

.bande-beige-clair {
  background: var(--beige-clair);
}

.bande-nuit {
  background: var(--nuit);
  color: var(--creme);
}

.bande-nuit h2 {
  color: var(--creme);
}

.bande-nuit h2 em {
  color: var(--or-clair);
}

/* Liens dans une bande foncée (hors boutons) : clairs, soulignés d'or */
.bande-nuit a:not(.bouton) {
  color: var(--creme);
  text-decoration-color: var(--or-clair);
}

.bande-nuit a:not(.bouton):hover {
  color: var(--or-clair);
}

/* ---------- Texte long (récit, article) ---------- */

.texte-long > p {
  font-size: 1.12rem;
}

/* Dans un article, chaque intertitre prend de l'air au-dessus */
.texte-long > h2:not(:first-child) {
  margin-top: 4rem;
}

.texte-long > h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}

.texte-long > .liste {
  font-size: 1.12rem;
}

/* En-tête d'article : catégorie, titre, chapeau, auteur et dates */
.article-entete {
  padding: 2.5rem 0 1rem;
}

.article-entete h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
}

.article-infos {
  margin: 1.75rem 0 0;
  color: var(--brun);
  font-size: 0.9rem;
}

.article-photo {
  margin: 2.5rem 0 0;
}

/* Photo affichée en entier, sans rognage : les portraits restent étroits */
.article-photo img {
  width: auto;
  max-height: 34rem;
}

.texte-long > .article-photo {
  margin: 2.5rem 0;
}

.article-photo figcaption {
  margin-top: 0.75rem;
  color: var(--brun);
  font-size: 0.9rem;
}

/* Texte poétique : serif italique, une strophe par paragraphe */
.poeme {
  margin: 2rem 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--or);
}

.poeme p {
  margin: 0 0 1.1rem;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.5;
}

.poeme strong {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Liste d'articles du blog */
.article-date {
  margin: 0 0 0.6rem;
  color: var(--or-brun);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Citation en exergue : serif italique, filet doré à gauche */
.citation {
  margin: 2.75rem 0 0;
  padding-left: 1.4rem;
  border-left: 1px solid var(--or);
}

.citation p {
  margin: 0 0 0.75rem;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-style: italic;
  line-height: 1.35;
}

.citation cite {
  color: var(--or-brun);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* Séparateur : le demi-soleil de l'emblème entre deux filets */
.separateur {
  width: min(30rem, 100% - 2.5rem);
  height: 3.25rem;
  margin: 0 auto;
  border: 0;
  background: url("../img/separateur.svg") center / contain no-repeat;
}

.section:not(.bande):has(+ .separateur) {
  padding-bottom: 3.5rem;
}

/* Après une bande de couleur, le séparateur prend de l'air au-dessus */
.bande + .separateur {
  margin-top: 4.5rem;
}

.separateur + .section {
  padding-top: 3.5rem;
}

/* Le séparateur remplace le court filet doré du titre qui le suit */
.separateur + .section h2::before {
  display: none;
}

/* ---------- L'essentiel (sur bande foncée) ---------- */

.essentiel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: 2.25rem 0;
  margin: 2.5rem 0 0;
}

.essentiel div {
  padding: 0.25rem 1.5rem;
  border-left: 1px solid rgba(212, 184, 138, 0.35);
}

.essentiel dt {
  margin-bottom: 0.7rem;
  color: var(--or-clair);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.essentiel dd {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.6rem;
  line-height: 1.2;
  /* Colonnes étroites : un mot long peut se couper plutôt que de déborder sur la voisine */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Variante sur fond clair, à côté d'un texte : deux colonnes, filets dorés */
.essentiel-clair {
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
}

.essentiel-clair div {
  border-left-color: var(--or);
}

.essentiel-clair dt {
  color: var(--or-brun);
}

/* ---------- Tableau des tarifs ---------- */

.deux-colonnes {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.deux-colonnes h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

.tableau {
  overflow-x: auto;
  background: var(--creme);
  border: 1px solid var(--filet);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

caption {
  padding: 1rem 1.25rem;
  color: var(--brun);
  font-size: 0.9rem;
  text-align: left;
  caption-side: bottom;
  border-top: 1px solid var(--filet);
}

th,
td {
  padding: 0.95rem 1.25rem;
  text-align: right;
  border-bottom: 1px solid var(--filet);
}

th:first-child,
td:first-child {
  text-align: left;
}

thead th {
  background: var(--sable);
  color: var(--brun-fonce);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

tbody th {
  font-weight: 400;
  white-space: nowrap;
}

td.fort {
  color: var(--or-brun);
  font-family: var(--titre);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
}

.note {
  color: var(--brun);
  font-size: 0.95rem;
}

.tableau + .note {
  margin-top: 1.5rem;
}

.centre {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Planning ---------- */

.section > .conteneur > .tableau {
  margin-top: 2rem;
}

.planning th,
.planning td {
  text-align: left;
}

.planning tbody th {
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.35rem;
  line-height: 1.2;
}

.planning td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* État des inscriptions : petite étiquette en capitales */
.etat {
  color: var(--brun);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.etat-ouvert {
  padding: 0.35rem 0.7rem;
  background: var(--encre);
  color: var(--blanc);
}

/* Sur mobile, chaque ligne du planning devient un petit bloc */
@media (max-width: 44rem) {
  .planning thead {
    display: none;
  }

  .planning tr {
    display: block;
    padding: 1.1rem 1.1rem 1.2rem;
    border-bottom: 1px solid var(--filet);
  }

  .planning tbody tr:last-child {
    border-bottom: 0;
  }

  .planning th,
  .planning td {
    display: block;
    padding: 0.1rem 0;
    border: 0;
  }

  .planning tbody th {
    white-space: normal;
  }

  .planning td:last-child {
    margin-top: 0.6rem;
    text-align: left;
  }
}

/* ---------- Piliers d'une séance ---------- */

.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.25rem;
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 0;
}

.piliers li {
  padding-top: 1.25rem;
  border-top: 1px solid var(--or);
}

.piliers h3 {
  margin-bottom: 0.6rem;
}

.piliers p {
  margin: 0;
  font-size: 1rem;
}

@media (min-width: 72rem) {
  .piliers {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.75rem;
  }

  /* Trois ou six éléments : rangées de trois */
  .piliers-trois,
  .piliers-six {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.75rem 2.5rem;
  }
}

.note.suite {
  margin-top: 2rem;
}

/* Encadré qui renvoie vers une autre offre (ex. : yoga en entreprise depuis les cours collectifs) */
.encadre {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 1.75rem 2rem;
  background: var(--creme);
  border: 1px solid var(--filet);
  text-align: center;
}

.encadre h3 {
  margin-bottom: 0.5rem;
}

.encadre p:last-child {
  margin-bottom: 0;
}
/* ---------- Étapes ---------- */

.etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: etape;
}

/* Le filet du haut est un fond, pour pouvoir le faire se tracer à l'apparition */
.etapes li {
  counter-increment: etape;
  padding-top: 1.25rem;
  background: linear-gradient(var(--or), var(--or)) left top / 100% 1px no-repeat;
}

.etapes li::before {
  content: counter(etape);
  display: block;
  margin-bottom: 0.4rem;
  color: var(--or);
  font-family: var(--titre);
  font-size: 3.4rem;
  font-style: italic;
  line-height: 1;
}

.etapes p:last-child {
  margin-bottom: 0;
}

/* ---------- Cartes ---------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.cartes li {
  background: var(--creme);
  border: 1px solid var(--filet);
  padding: 1.75rem;
}

.cartes p:last-child {
  margin-bottom: 0;
}

/* Six cartes : deux rangées de trois sur grand écran */
@media (min-width: 56rem) {
  .cartes-trois {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Cinq cartes : trois en haut, deux plus larges en dessous */
  .cartes-trois-deux {
    grid-template-columns: repeat(6, 1fr);
  }

  .cartes-trois-deux li {
    grid-column: span 2;
  }

  .cartes-trois-deux li:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Cartes dont le titre est un lien vers une autre page : toute la carte est cliquable */
.cartes-liens li {
  position: relative;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.cartes-liens li:hover {
  border-color: var(--or);
  transform: translateY(-3px);
}

/* Un titre de niveau 2 qui doit avoir l'allure d'un titre de carte (liste d'articles) */
.section h2.h3 {
  color: var(--brun-fonce);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.2;
}

.section h2.h3::before {
  display: none;
}

.cartes-liens :is(h2, h3) a {
  color: inherit;
  text-decoration: none;
}

.cartes-liens :is(h2, h3) a::before {
  content: "";
  position: absolute;
  inset: 0;
}

.cartes-liens :is(h2, h3) a::after {
  content: "→";
  margin-left: 0.4em;
  color: var(--or);
}

/* ---------- Listes ---------- */

.liste {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}

.liste li {
  margin-bottom: 0.4rem;
}

.liste li::marker {
  color: var(--or);
}

.communes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 1.75rem 0;
  padding: 0;
}

.communes li {
  background: var(--beige-clair);
  border: 1px solid var(--filet);
  padding: 0.4rem 1rem;
  font-size: 0.95rem;
}

/* ---------- Présentation ---------- */

.presentation {
  display: grid;
  gap: 2rem;
  align-items: start;
}

.presentation img {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
}

/* ---------- Témoignages ---------- */

.temoignages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.temoignage {
  margin: 0;
  background: var(--creme);
  border: 1px solid var(--filet);
  padding: 2.25rem;
}

.temoignage blockquote {
  margin: 0 0 1.25rem;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.4;
}

.temoignage blockquote p {
  margin: 0;
}

.temoignage figcaption {
  color: var(--or-brun);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Un seul témoignage, centré dans une bande */
.temoignage-seul {
  margin: 0;
  text-align: center;
}

.temoignage-seul blockquote {
  margin: 0 0 1.5rem;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-style: italic;
  line-height: 1.35;
}

.temoignage-seul blockquote p {
  margin: 0;
}

.temoignage-seul figcaption {
  color: var(--brun);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Questions fréquentes ---------- */

.questions {
  border-top: 1px solid var(--filet);
}

.questions article {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--filet);
}

.questions h3 {
  margin-bottom: 0.5rem;
}

.questions p:last-child {
  margin-bottom: 0;
}

/* ---------- Formulaire de contact ---------- */

.formulaire {
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--creme);
  border: 1px solid var(--filet);
}

.formulaire .champ {
  display: grid;
  gap: 0.45rem;
}

.formulaire label {
  color: var(--brun-fonce);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--filet);
  border-radius: 0;
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
}

.formulaire textarea {
  min-height: 9rem;
  resize: vertical;
}

.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible {
  outline: 2px solid var(--or-brun);
  outline-offset: 0;
  border-color: var(--or-brun);
}

.formulaire .bouton {
  justify-self: start;
  cursor: pointer;
}

.formulaire .note {
  margin: 0;
}

/* Champ piège pour les robots : invisible pour les visiteurs et les lecteurs d'écran */
.formulaire .piege {
  position: absolute;
  left: -999rem;
}

/* ---------- Demande d'appel : calendrier ---------- */

.prise-rdv fieldset {
  margin: 0;
  min-width: 0;
}

.prise-rdv legend {
  float: left;
  width: 100%;
  margin-bottom: 0.5rem;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.6rem;
  line-height: 1.2;
}

.prise-rdv legend + * {
  clear: both;
}

.champ-erreur {
  margin: 0.4rem 0 0;
  color: #9a3412;
  font-size: 0.9rem;
}

.formulaire [aria-invalid="true"] {
  border-color: #9a3412;
}

.calendrier-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.calendrier-mois {
  margin: 0;
  color: var(--brun-fonce);
  font-family: var(--titre);
  font-size: 1.45rem;
  text-transform: capitalize;
}

.calendrier-nav {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.calendrier-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.calendrier-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.calendrier-semaine {
  padding-bottom: 0.25rem;
  color: var(--or-brun);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-align: center;
}

.calendrier-jour {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 0.95rem;
}

button.calendrier-jour {
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

button.calendrier-jour:hover {
  border-color: var(--or);
}

.calendrier-jour-ferme {
  border-color: transparent;
  background: none;
  color: #b8ad9c;
}

.calendrier-jour[aria-pressed="true"],
.calendrier-heure[aria-pressed="true"] {
  border-color: var(--encre);
  background: var(--encre);
  color: var(--blanc);
}

.calendrier-titre-heures {
  margin: 1.25rem 0 0.6rem;
  color: var(--brun);
  font-size: 0.9rem;
}

.calendrier-heures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.calendrier-heure {
  min-width: 4.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--filet);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.calendrier-heure:hover {
  border-color: var(--or);
}

.calendrier-choix {
  min-height: 1.6em;
  margin: 1rem 0 0;
}

/* Message affiché après une erreur d'envoi */
.alerte {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--or-brun);
  background: var(--beige-clair);
}

.alerte[hidden] {
  display: none;
}

/* Coordonnées à côté du formulaire */
.coordonnees {
  display: grid;
  gap: 1.75rem;
  margin: 0;
}

.coordonnees dt {
  margin-bottom: 0.35rem;
  color: var(--or-brun);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.coordonnees dd {
  margin: 0;
  font-family: var(--titre);
  font-size: 1.45rem;
  line-height: 1.35;
}

/* Texte encore à fournir par la cliente : bien visible tant qu'il n'est pas remplacé */
.a-completer {
  padding: 0 0.3em;
  background: #fff1b8;
  color: #6b4e00;
}

/* ---------- Pages légales ---------- */

.texte-legal h2 {
  margin-top: 3rem;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.texte-legal h2::before {
  display: none;
}

.texte-legal > h2:first-child {
  margin-top: 0;
}

/* Sous un en-tête d'article ou de page simple, le texte suit sans grand vide */
.article-entete + .section {
  padding-top: 2.5rem;
}

.texte-legal p,
.texte-legal li {
  font-size: 1rem;
}

/* ---------- Appel final (bande foncée) ---------- */

.appel {
  text-align: center;
}

.appel h2::before {
  width: 6rem;
  height: 2.6rem;
  margin-bottom: 1.25rem;
  background: url("../img/demi-soleil-clair.svg") center / contain no-repeat;
}

.appel p {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.appel .actions {
  justify-content: center;
}

.bande-nuit .bouton {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--encre);
}

.bande-nuit .bouton:hover {
  background: var(--or-clair);
  border-color: var(--or-clair);
  color: var(--encre);
}

.bande-nuit .bouton-clair {
  background: transparent;
  border-color: var(--or-clair);
  color: var(--creme);
  box-shadow: none;
}

.bande-nuit .bouton-clair:hover {
  background: var(--creme);
  border-color: var(--creme);
  color: var(--encre);
}

/* ---------- Pied de page ---------- */

.pied {
  background: var(--nuit-profonde);
  color: #cfc6b8;
  padding: 3.5rem 0 2rem;
  font-size: 0.95rem;
}

.pied a {
  color: var(--creme);
  text-decoration: none;
}

.pied a:hover {
  color: var(--or-clair);
  text-decoration: underline;
}

.pied .conteneur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem;
}

.pied h2 {
  margin-bottom: 1rem;
  color: var(--or-clair);
  font-family: var(--texte);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pied-logo {
  width: 9rem;
  height: auto;
  margin: 0 0 1.25rem;
}

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

.pied li {
  margin-bottom: 0.4rem;
}

.pied .legal {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(212, 184, 138, 0.2);
  font-size: 0.85rem;
}

/* ---------- Barre de contact sur mobile ---------- */

.barre-contact {
  display: none;
}

/* ---------- Écrans larges ---------- */

@media (min-width: 56rem) {
  .ouverture .conteneur {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem;
  }

  .deux-colonnes {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .presentation {
    grid-template-columns: auto 1fr;
    gap: 3rem;
  }

  .section {
    padding: 6.5rem 0;
  }
}

/* Menu déployé : liens séparés par une barre oblique dorée.
   L'en-tête n'est plus fixe : avec le logo complet, il prendrait trop de hauteur à l'écran. */
@media (min-width: 72rem) {
  .menu li + li::before {
    content: "/";
    margin: 0 0.6rem 0 0.4rem;
    color: var(--or);
    font-size: 0.8rem;
  }

  .menu li {
    display: flex;
    align-items: center;
  }
}

/* ---------- Menu replié ---------- */

@media (max-width: 71.99rem) {
  .js .menu-bouton {
    display: block;
  }

  .menu {
    flex-basis: 100%;
  }

  .js .menu {
    display: none;
  }

  .js .menu.ouvert {
    display: block;
  }

  .menu ul {
    flex-direction: column;
    align-items: stretch;
  }

  .menu a {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--filet);
  }

  .menu a::after {
    display: none;
  }

  .menu a[aria-current="page"] {
    color: var(--or-brun);
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 55.99rem) {
  th,
  td {
    padding: 0.8rem 0.75rem;
  }

  thead th {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  .chapeau {
    font-size: 1.3rem;
  }

  .marque-logo {
    height: 6.5rem;
  }

  /* Laisse la place au contour au-dessus de l'arche, sous les boutons */
  .arche-cadre {
    width: 90%;
    margin-top: 2.25rem;
  }

  .pastille {
    left: 0.5rem;
    bottom: 1rem;
    width: 7rem;
    height: 7rem;
    font-size: 0.58rem;
  }

  .pastille strong {
    font-size: 2rem;
  }

  .essentiel div {
    padding: 0.25rem 1rem;
  }

  body {
    padding-bottom: 4.75rem;
  }

  .barre-contact {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.6rem var(--marge);
    background: var(--blanc);
    border-top: 1px solid var(--filet);
  }

  .barre-contact .bouton {
    padding: 0.9rem 0.5rem;
    box-shadow: none;
  }

  /* Le bandeau de cookies se place au-dessus de la barre Appeler / WhatsApp */
  .bandeau-cookies {
    bottom: 5.25rem;
  }

  /* Boutons d'ouverture de page centrés */
  .ouverture .actions {
    justify-content: center;
  }

  /* Photo de présentation (« Qui suis-je », « Qui vous donne le cours ») centrée */
  .presentation img {
    justify-self: center;
  }

  /* Pied de page : logo et texte centrés sur toute la largeur,
     puis les colonnes Contact et Le site côte à côte, et le copyright centré */
  .pied .conteneur {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  .pied .conteneur > div:first-child,
  .pied .legal {
    grid-column: 1 / -1;
    text-align: center;
  }

  .pied-logo {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- Animations ----------
   Elles ne jouent que si le visiteur n'a pas demandé à réduire les animations.
   Sans JavaScript, tout le contenu reste visible : seule l'ouverture s'anime. */

@keyframes monte {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@keyframes devoile {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes recule {
  from {
    transform: scale(1.08);
  }
}

@keyframes pose {
  from {
    opacity: 0;
    transform: rotate(-7deg) scale(0.6);
  }
}

@keyframes trace {
  from {
    stroke-dashoffset: 1;
  }
}

/* Phases de la lune, sur un cycle : nouvelle lune, premier quartier, pleine lune, dernier quartier.
   Le terminateur est un disque qui s'aplatit jusqu'au quartier puis s'élargit ; il prend la
   couleur du fond pendant les croissants et la couleur éclairée pendant les lunes gibbeuses. */
@keyframes phase-forme {
  0%,
  50%,
  100% {
    transform: scaleX(1);
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }

  25%,
  75% {
    transform: scaleX(0);
    animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
  }
}

@keyframes phase-teinte {
  0%,
  75% {
    fill: var(--blanc);
  }

  25% {
    fill: var(--encre);
  }
}

/* Le côté éclairé passe de droite (lune croissante) à gauche (lune décroissante) */
@keyframes phase-cote {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(-1);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ouverture .conteneur > div:first-child > * {
    animation: monte 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .ouverture .conteneur > div:first-child > :nth-child(2) {
    animation-delay: 0.1s;
  }

  .ouverture .conteneur > div:first-child > :nth-child(3) {
    animation-delay: 0.2s;
  }

  .ouverture .conteneur > div:first-child > :nth-child(4) {
    animation-delay: 0.3s;
  }

  .arche {
    animation: devoile 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }

  .arche img {
    animation: recule 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }

  /* Le filet se trace au chargement */
  .contour-trait {
    stroke-dasharray: 1;
    animation: trace 2.2s ease 0.4s both;
  }

  /* Un cycle complet de phases en 32 secondes, en commençant par un fin croissant */
  .lune-terminateur {
    animation: phase-forme 32s -4s infinite, phase-teinte 32s step-end -4s infinite;
  }

  .lune-moitie {
    animation: phase-cote 32s step-end -4s infinite;
  }

  .pastille {
    animation: pose 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 0.9s both;
  }

  /* Blocs révélés au défilement : la classe est posée par site.js */
  .a-reveler {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), background-size 0.9s ease;
  }

  .a-reveler.visible {
    opacity: 1;
    transform: none;
  }

  .etapes li.a-reveler:not(.visible) {
    background-size: 0 1px;
  }
}

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

  .bouton:hover {
    transform: none;
  }
}