/* =====================================================
   STYLE COMMUN À TOUTES LES PAGES
   ===================================================== */


/* ----- Polices (hébergées dans le dossier "polices", pas besoin d'internet) ----- */
@font-face {
  font-family: "Amiri";
  src: url("polices/amiri-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  src: url("polices/amiri-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  src: url("polices/amiri-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  src: url("polices/amiri-arabic-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri";
  src: url("polices/amiri-arabic-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Jost";
  src: url("polices/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("polices/jost-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* ----- Palette tirée des photos (change une couleur ici = elle change partout) ----- */
:root {
  --lin: #F3EDE4;        /* rideaux en lin, fond principal */
  --sable: #E8DCCB;      /* lin plus foncé, fond secondaire */
  --sauge: #8E9B86;      /* abaya vert sauge */
  --vert: #2F3A2C;       /* robe vert profond : textes et fonds sombres */
  --taupe: #6E5A4B;      /* hijab taupe : textes secondaires */
  --miel: #B8874F;       /* lampe en rotin : le fil et les détails */
  --bordeaux: #6E1F2D;   /* hijab bordeaux : accent */

  --police-titre: "Amiri", Georgia, serif;
  --police-texte: "Jost", "Segoe UI", sans-serif;

  --douceur: cubic-bezier(0.2, 0.7, 0.2, 1);
  --glisse: cubic-bezier(0.65, 0, 0.35, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

html.bloque {
  overflow: hidden;
}

/* Le fond glisse d'une couleur à l'autre en descendant (calculé par script.js grâce aux data-theme) */
body {
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--vert);
  background-color: var(--lin);
  transition: color 0.5s;
  -webkit-font-smoothing: antialiased;
}

/* Rien ne dépasse sur les côtés (photos qui zooment, mots qui arrivent de côté) */
main {
  overflow-x: clip;
}

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

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--miel);
  outline-offset: 4px;
}

/* Grain très léger sur toute la page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.2 0 0 0 0 0.15 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Même teinte douce sur toutes les photos, pour qu'elles forment une série */
.photo {
  filter: saturate(0.9) sepia(0.08) contrast(1.02);
}

h1, h2, h3 {
  font-family: var(--police-titre);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

h3 {
  font-weight: 700;
}

.grand-titre {
  font-size: clamp(2.8rem, 6.4vw, 5.6rem);
  line-height: 1.04;
}

.titre {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  margin-bottom: 22px;
}

.intro {
  max-width: 50ch;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.6;
}

.texte p + p {
  margin-top: 16px;
}

.texte p {
  max-width: 60ch;
}

.conteneur {
  width: min(1180px, 100% - 64px);
  margin-inline: auto;
}

.section {
  position: relative;
  padding: clamp(110px, 15vw, 190px) 0;
}

.centre {
  text-align: center;
}

.centre .intro,
.centre .texte p {
  margin-inline: auto;
}

/* Champ à compléter : bien visible pour ne pas l'oublier (cherche "À COMPLÉTER" dans le code) */
.a-completer {
  font-style: italic;
  opacity: 0.75;
  text-decoration: underline dashed;
  text-underline-offset: 4px;
}

/* Réglages de Lenis (défilement fluide) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}


/* =====================================================
   RIDEAU : transition en arche entre deux pages
   ===================================================== */
.rideau {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vert);
  color: var(--lin);
  pointer-events: none;
  visibility: hidden;
  clip-path: inset(100% 0 0 0 round 50vw 50vw 0 0);
}

.rideau-titre {
  font-family: var(--police-titre);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  opacity: 0;
}

/* Départ : l'arche monte et recouvre la page */
html.part .rideau {
  visibility: visible;
  pointer-events: all;
  animation: rideau-monte 0.75s var(--glisse) forwards;
}

html.part .rideau-titre {
  animation: titre-rideau 0.5s 0.35s var(--douceur) forwards;
}

/* Arrivée : la page est couverte, puis l'arche continue de monter et la découvre */
html.arrivee .rideau {
  visibility: visible;
  clip-path: inset(0);
  animation: rideau-sort 0.95s 0.3s var(--glisse) forwards;
}

html.arrivee .rideau-titre {
  opacity: 1;
  animation: titre-rideau-sort 0.5s 0.15s ease forwards;
}

@keyframes rideau-monte {
  from { clip-path: inset(100% 0 0 0 round 50vw 50vw 0 0); }
  to   { clip-path: inset(0 0 0 0 round 0 0 0 0); }
}

@keyframes rideau-sort {
  from { clip-path: inset(0 0 0 0 round 0 0 0 0); }
  to   { clip-path: inset(0 0 100% 0 round 0 0 50vw 50vw); visibility: hidden; }
}

@keyframes titre-rideau {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes titre-rideau-sort {
  to { opacity: 0; transform: translateY(-16px); }
}


/* =====================================================
   MENU
   ===================================================== */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 200;
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(243, 237, 228, 0.25);
  background: rgba(47, 58, 44, 0.74);
  color: var(--lin);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(30, 36, 28, 0.18);
  transform: translateX(-50%);
  transition: opacity 0.9s var(--douceur), transform 0.9s var(--douceur);
}

/* Sur l'accueil, le menu arrive après l'ouverture de la porte */
.anime .nav:not(.pret) {
  opacity: 0;
  transform: translate(-50%, -24px);
}

.nav-nom {
  display: none;
  padding: 0 14px 0 16px;
  font-family: var(--police-titre);
  font-size: 1.15rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav-liens {
  position: relative;
  display: flex;
  gap: 2px;
}

.nav-liens a {
  position: relative;
  z-index: 1;
  padding: 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.45s;
}

.nav-liens a.sous-pastille {
  color: var(--vert);
}

/* Pastille qui glisse sous la page en cours, et suit la souris */
.nav-pastille {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--lin);
  transition: left 0.55s var(--glisse), width 0.55s var(--glisse);
}

.nav-menu {
  display: none;
  padding: 10px 18px;
  border: none;
  border-radius: 999px;
  background: var(--lin);
  color: var(--vert);
  font: 500 0.76rem var(--police-texte);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Menu plein écran (téléphone) */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 90px 32px 48px;
  background: var(--vert);
  color: var(--lin);
  clip-path: inset(0 0 100% 0 round 0 0 50vw 50vw);
  visibility: hidden;
  transition: clip-path 0.8s var(--glisse), visibility 0s 0.8s;
}

.menu-mobile.ouvert {
  clip-path: inset(0 0 0 0 round 0);
  visibility: visible;
  transition: clip-path 0.8s var(--glisse), visibility 0s;
}

.menu-mobile a {
  font-family: var(--police-titre);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  line-height: 1.25;
  text-decoration: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s, transform 0.7s var(--douceur);
}

.menu-mobile.ouvert a {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.25s + var(--i) * 0.06s);
}

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

.menu-fermer {
  position: absolute;
  top: 22px;
  right: 22px;
  padding: 10px 18px;
  border: 1px solid rgba(243, 237, 228, 0.4);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: 500 0.76rem var(--police-texte);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}


/* =====================================================
   BOUTONS ET LIENS
   ===================================================== */

/* Bouton plein : la couleur se remplit de gauche à droite au survol */
.bouton {
  display: inline-block;
  padding: 16px 32px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left / 0% 100% no-repeat;
  transition: background-size 0.6s var(--glisse);
}

.bouton span {
  position: relative;
  transition: color 0.4s;
}

.bouton:hover {
  background-size: 100% 100%;
}

.bouton:hover span {
  color: var(--fond, var(--lin)); /* prend la couleur du fond de la page (calculée par script.js) */
}

.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

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

/* Lien avec un trait qui se dessine au survol */
.lien {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size 0.45s var(--douceur);
}

.lien:hover {
  background-size: 100% 1px;
}

/* Bouton rond "magnétique" : il suit un peu la souris */
.magnetique {
  display: inline-block;
  padding: 44px;
}

.bouton-rond {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: var(--lin);
  color: var(--bordeaux);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: transform 0.7s var(--douceur), background-color 0.4s, color 0.4s;
}

.bouton-rond span {
  max-width: 9ch;
  transition: transform 0.7s var(--douceur);
}

.bouton-rond:hover {
  background: var(--miel);
  color: var(--lin);
}


/* =====================================================
   ACCUEIL — OUVERTURE
   La photo s'ouvre comme une porte, se replie en arche
   avec la Bismillah, puis est aspirée dans un point.
   ===================================================== */
.scene-cadre {
  position: relative;
}

.scene-photo {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scene-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 40%;
}

.scene-voile {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at center, rgba(20, 24, 18, 0.45), transparent),
    linear-gradient(rgba(20, 24, 18, 0.3), rgba(20, 24, 18, 0.12) 45%, rgba(20, 24, 18, 0.35));
}

.scene-ombre {
  position: absolute;
  inset: 0;
  background: rgba(30, 30, 22, 0.4);
  opacity: 0;
}

.scene-titre {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  color: var(--lin);
  text-align: center;
  pointer-events: none;
}

.nom {
  font-size: clamp(3.2rem, 10vw, 8rem);
  line-height: 1.05;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3);
}

.trait {
  display: block;
  width: 70px;
  height: 2px;
  margin: 22px auto 18px;
  background: var(--miel);
}

.metier {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.scene-defiler {
  position: absolute;
  left: 50%;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--lin);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scene-defiler i {
  position: relative;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: rgba(243, 237, 228, 0.3);
}

.scene-defiler i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--lin);
  animation: goutte 2s var(--glisse) infinite;
}

@keyframes goutte {
  to { top: 100%; }
}

/* Sans animation : la Bismillah s'affiche sous la photo */
.bismillah {
  padding: 80px 24px 0;
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 3.6vw, 2.4rem);
  line-height: 1.6;
  text-align: center;
}

.scene-point {
  display: none;
}

/* ----- Version animée ----- */
.anime .scene {
  height: 360vh;
}

.anime .scene-cadre {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.anime .scene-photo {
  position: absolute;
  inset: 0;
  height: auto;
  clip-path: inset(22vh 39vw 14vh 39vw round 11vw 11vw 0 0);
  will-change: clip-path;
}

.anime .scene-photo img {
  will-change: transform;
}

.anime .scene-defiler {
  opacity: 0;
}

.anime .bismillah {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0;
  white-space: nowrap;
  color: var(--lin);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.anime .scene-point {
  display: block;
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--miel);
  box-shadow: 0 0 0 6px rgba(184, 135, 79, 0.2);
  transform: scale(0);
  pointer-events: none;
}

.anime .scene-titre .trait {
  transform: scaleX(0);
  transition: transform 1.1s var(--douceur) 0.7s;
}

.anime .scene-titre .metier {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s var(--douceur) 0.9s, transform 1s var(--douceur) 0.9s;
}

.anime .scene-titre.visible .trait {
  transform: scaleX(1);
}

.anime .scene-titre.visible .metier {
  opacity: 1;
  transform: none;
}


/* =====================================================
   EN-TÊTE DES PAGES (À propos, Consultations, Contact)
   La photo occupe le haut de l'écran et se fond dans la page ;
   le titre se pose sur la partie fondue.
   ===================================================== */
.entete-immersive {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 32px 8vh;
  text-align: center;
}

.entete-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 84vh;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 22%, transparent 80%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 22%, transparent 80%), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}

.entete-photo img {
  position: absolute;
  top: -6%;
  left: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  will-change: transform;
}

.entete-contenu {
  position: relative;
  z-index: 5;
  max-width: 980px;
}

/* Halo doux de la couleur de la page derrière le titre, pour qu'il se lise toujours bien */
.entete-contenu::before {
  content: "";
  position: absolute;
  inset: -12% -14% -6%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--fond, var(--lin)) 45%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

.entete-immersive .grand-titre {
  font-size: clamp(3.4rem, 9vw, 8.4rem);
  line-height: 1;
}

.entete-immersive .intro {
  margin: 24px auto 0;
}

.entete-immersive .boutons {
  justify-content: center;
  margin-top: 30px;
}

/* Apparition : la photo se dévoile du haut vers le bas et recule doucement */
.anime .entete-photo {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.8s var(--glisse) 0.15s;
}

.anime .entete-immersive.visible .entete-photo {
  clip-path: inset(0 0 0 0);
}

.anime .entete-photo img {
  scale: 1.14;
  transition: scale 2.6s var(--douceur) 0.15s;
}

.anime .entete-immersive.visible .entete-photo img {
  scale: 1;
}


/* =====================================================
   EN-TÊTE AVEC PHOTO DÉCALÉE (Consultations)
   La photo est sur la droite, légèrement rognée en bas (la personne reçue reste
   au premier plan) ; le titre vient la chevaucher.
   ===================================================== */
.entete-entiere {
  --photo: min(40vw, 560px); /* largeur de la photo */
  position: relative;
  display: grid;
  grid-template-columns: max-content calc(var(--photo) * 0.75);
  justify-content: center;
  align-items: start;
  padding: 120px 5vw clamp(70px, 10vh, 120px);
}

.entete-entiere-texte {
  position: relative;
  z-index: 5;
  margin-top: clamp(50px, 10vh, 120px);
}

/* Halo doux de la couleur de la page derrière le texte */
.entete-entiere-texte::before {
  content: "";
  position: absolute;
  inset: -18% -8% -14% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--fond, var(--lin)) 55%, transparent);
  opacity: 0.8;
  pointer-events: none;
}

.entete-entiere .grand-titre {
  font-size: clamp(3.4rem, 9vw, 8.4rem);
  line-height: 1;
  white-space: nowrap;
}

.entete-entiere .intro {
  max-width: 30ch;
  margin-top: 24px;
}

/* La photo glisse d'un quart sous la fin du titre */
.seance {
  position: relative;
  width: var(--photo);
  margin: 0 0 0 calc(var(--photo) * -0.25);
}

/* Fin contour doré décalé, comme les arches du site */
.seance::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid var(--miel);
  border-radius: 50% 50% 18px 18px / 12% 12% 18px 18px;
  transform: translate(16px, 16px);
  pointer-events: none;
}

/* Halo très doux autour du cadre : la même photo, floutée */
.seance-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 170%;
  height: 115%;
  object-fit: cover;
  filter: blur(70px) saturate(0.8);
  opacity: 0.3;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.seance-cadre {
  position: relative;
  z-index: 4; /* au-dessus du fil */
  aspect-ratio: 3 / 4; /* la photo fait 2/3 : on en garde le haut, le bas est un peu rogné */
  overflow: hidden;
  border-radius: 50% 50% 18px 18px / 12% 12% 18px 18px;
  box-shadow: 0 50px 90px -50px rgba(47, 58, 44, 0.55);
}

.seance-cadre img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%; /* on rogne seulement par le bas */
}

/* Apparition : la photo se dévoile de haut en bas, puis le contour et le halo arrivent */
.anime .seance-cadre {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.8s var(--glisse) 0.2s;
}

.anime .seance-cadre img {
  scale: 1.12;
  transition: scale 2.6s var(--douceur) 0.2s;
}

.anime .seance::before {
  opacity: 0;
  transform: none;
  transition: opacity 1s var(--douceur) 1.3s, transform 1.4s var(--douceur) 1.3s;
}

.anime .seance-aura {
  opacity: 0;
  transition: opacity 2s var(--douceur) 1s;
}

.anime .seance.visible .seance-cadre {
  clip-path: inset(0 0 0 0);
}

.anime .seance.visible .seance-cadre img {
  scale: 1;
}

.anime .seance.visible::before {
  opacity: 1;
  transform: translate(16px, 16px);
}

.anime .seance.visible .seance-aura {
  opacity: 0.3;
}


/* Photo dans une arche, avec un fin contour doré décalé */
.arche {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
}

.arche-photo {
  position: relative;
  z-index: 4; /* au-dessus du fil */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 18px 18px;
}

.arche-photo img {
  position: absolute;
  top: -4%;
  left: 0;
  width: 100%;
  height: 108%;
  object-fit: cover;
  will-change: transform;
}

.arche-contour {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  overflow: visible;
  pointer-events: none;
  transform: translate(16px, -16px);
}

.arche-contour path {
  fill: none;
  stroke: var(--miel);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* Apparition : l'arche s'ouvre du bas vers le haut, puis le contour se dessine */
.anime .arche-photo {
  clip-path: inset(100% 0 0 0 round 999px 999px 18px 18px);
  transition: clip-path 1.5s var(--glisse) 0.35s;
}

.anime .arche.visible .arche-photo {
  clip-path: inset(0 0 0 0 round 999px 999px 18px 18px);
}

.anime .arche-photo img {
  scale: 1.18;
  transition: scale 2.2s var(--douceur) 0.35s;
}

.anime .arche.visible .arche-photo img {
  scale: 1;
}

.anime .arche-contour path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s var(--douceur) 1s;
}

.anime .arche.visible .arche-contour path {
  stroke-dashoffset: 0;
}

/* En-tête sombre avec une photo de fond (page Approche) */
.entete-sombre {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 130px 32px 90px;
  overflow: hidden;
  text-align: center;
}

.entete-sombre .intro {
  margin: 28px auto 0;
}


/* =====================================================
   PHOTOS DE FOND (teintées par la couleur de la page)
   ===================================================== */
.fond-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  filter: brightness(0.8) contrast(0.9);
  opacity: 0.3;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent 4%, #000 30%, #000 70%, transparent 96%);
  mask-image: linear-gradient(transparent 4%, #000 30%, #000 70%, transparent 96%);
}

.anime .fond-photo {
  opacity: 0;
  will-change: opacity, transform;
}

.avec-fond {
  position: relative;
  overflow: hidden;
}

.avec-fond > :not(.fond-photo) {
  position: relative;
}


/* =====================================================
   TEXTE QUI S'ALLUME MOT PAR MOT (citations)
   ===================================================== */
.allumage-cadre {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 24px;
}

.citation-grande {
  max-width: 26ch;
  font-family: var(--police-titre);
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.25;
  text-align: center;
}

.citation-auteur {
  margin-top: 28px;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0.8;
}

.anime .allumage {
  height: 260vh;
}

.anime .allumage-cadre {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0 24px;
}

.mot-allume {
  opacity: 0.18;
  transition: opacity 0.5s;
}

.mot-allume.allume {
  opacity: 1;
}


/* Grande phrase d'introduction (page À propos) */
.texte-lead {
  max-width: 30ch;
  margin-inline: auto;
  font-family: var(--police-titre);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.35;
  text-wrap: balance;
}


/* =====================================================
   ACCUEIL — ACCROCHE ET MOTS
   ===================================================== */
.accroche .grand-titre {
  max-width: 17ch;
  margin-inline: auto;
}

.accroche .intro {
  margin-top: 30px;
}

/* Petits repères pratiques sous l'accroche */
.reperes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 48px;
  margin-top: 70px;
  padding-top: 28px;
  list-style: none;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 1rem;
}

/* Les cinq mots, en zigzag : le fil passe entre eux */
.mots-liste {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: clamp(28px, 6vh, 70px);
  margin-top: 70px;
  list-style: none;
}

.mots-liste li {
  font-family: var(--police-titre);
  font-size: clamp(3rem, 8.5vw, 7.6rem);
  line-height: 1;
}

.mots-liste li:nth-child(1) { grid-column: 2 / 8; }
.mots-liste li:nth-child(2) { grid-column: 7 / 13; text-align: right; color: var(--taupe); }
.mots-liste li:nth-child(3) { grid-column: 3 / 9; }
.mots-liste li:nth-child(4) { grid-column: 6 / 12; text-align: right; color: var(--taupe); }
.mots-liste li:nth-child(5) { grid-column: 4 / 10; text-align: center; }

.anime .mots-liste li {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1.1s var(--douceur), transform 1.4s var(--douceur);
}

.anime .mots-liste li:nth-child(even) {
  transform: translateX(60px);
}

.anime .mots-liste li.visible {
  opacity: 1;
  transform: none;
}


/* =====================================================
   ACCUEIL — FAIRE CONNAISSANCE
   Au survol d'un titre, sa photo remplit tout le fond.
   ===================================================== */
.decouvrir {
  position: relative;
}

/* Les photos restent collées à l'écran pendant que la liste défile par-dessus */
.decouvrir-fonds {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  margin-bottom: -100vh;
  margin-bottom: -100svh;
  overflow: hidden;
  pointer-events: none;
}

.decouvrir-fonds img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.08;
  transition: opacity 0.9s var(--douceur), scale 1.8s var(--douceur);
}

.decouvrir-fonds img.actif {
  opacity: 1;
  scale: 1;
}

.decouvrir-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(24, 29, 22, 0.8), rgba(24, 29, 22, 0.45) 60%, rgba(24, 29, 22, 0.25));
  opacity: 0;
  transition: opacity 0.9s var(--douceur);
}

.decouvrir.survol .decouvrir-voile {
  opacity: 1;
}

.decouvrir-contenu {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 16vh 0;
  transition: color 0.7s;
}

.decouvrir.survol .decouvrir-contenu {
  color: var(--lin);
}

.decouvrir-liste {
  margin-top: 5vh;
  list-style: none;
}

.decouvrir-liste a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 4vw;
  padding: 2.6vh 0;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  text-decoration: none;
  transition: opacity 0.6s;
}

.decouvrir-liste li:last-child a {
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.decouvrir-titre {
  font-family: var(--police-titre);
  font-size: clamp(2.8rem, 7.4vw, 7rem);
  line-height: 1.02;
  transition: transform 0.8s var(--douceur);
}

.decouvrir-texte {
  max-width: 32ch;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.6s, transform 0.8s var(--douceur);
}

.decouvrir.survol .decouvrir-liste a:not(.actif) {
  opacity: 0.35;
}

.decouvrir-liste a.actif .decouvrir-titre {
  transform: translateX(28px);
}

.decouvrir-liste a.actif .decouvrir-texte {
  opacity: 1;
  transform: none;
  transition-delay: 0.12s;
}

/* Écrans tactiles (tablette, téléphone) : la phrase passe sous le titre */
@media (hover: none), (pointer: coarse) {
  .decouvrir-liste a {
    flex-direction: column;
    align-items: flex-start;
  }

  .decouvrir-texte {
    transform: none;
  }

  .decouvrir-liste a.actif .decouvrir-titre {
    transform: none;
  }
}


/* =====================================================
   PRENDRE RENDEZ-VOUS (bas des pages)
   Photo dans une arche, titre posé sur le bas de la photo.
   ===================================================== */
.appel-centre .arche {
  width: min(70vw, 320px);
  margin: 0 auto;
}

/* Le bas de la photo se fond dans la couleur de la page */
.appel-centre .arche-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(transparent, var(--fond, var(--bordeaux)));
}

.appel-titre {
  position: relative;
  z-index: 5;
}

.appel-centre .arche + .appel-titre {
  margin-top: -0.55em;
}

.appel-centre .intro {
  margin: 24px auto 0;
}


/* =====================================================
   COLONNES (formation, références, infos pratiques)
   ===================================================== */
.colonnes {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  margin-top: 64px;
  list-style: none;
}

.colonne {
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.colonne h3 {
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.colonne p {
  max-width: 40ch;
}

.colonne .petit {
  margin-bottom: 6px;
  font-size: 0.92rem;
  opacity: 0.85;
}

.colonne .grand {
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
}


/* =====================================================
   PAGE SUIVANTE (lien en bas de page)
   ===================================================== */
.suite {
  padding: 140px 0 110px;
  text-align: center;
}

.suite-petit {
  margin-bottom: 10px;
  font-size: 1rem;
  opacity: 0.8;
}

.suite-lien {
  display: inline-block;
  font-family: var(--police-titre);
  font-size: clamp(3rem, 8vw, 6.6rem);
  line-height: 1.05;
  text-decoration: none;
  background: linear-gradient(var(--miel), var(--miel)) left 92% / 0% 2px no-repeat;
  transition: background-size 0.8s var(--glisse);
}

.suite-lien:hover {
  background-size: 100% 2px;
}


/* =====================================================
   ÉTAPES QUI S'ALLUMENT (page Approche)
   ===================================================== */
.etapes-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 7vw;
  align-items: start;
}

.etapes-liste {
  display: flex;
  flex-direction: column;
  gap: 38px;
  list-style: none;
}

.etape {
  position: relative;
  padding-left: 30px;
}

.etape::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  bottom: 0.2em;
  width: 2px;
  background: var(--miel);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.9s var(--douceur);
}

.etape h3 {
  margin-bottom: 8px;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

.etape p {
  max-width: 52ch;
}

.anime [data-etape] {
  opacity: 0.18;
  transition: opacity 0.9s var(--douceur);
}

.anime [data-etape].allume {
  opacity: 1;
}

.anime .etape.allume::before {
  transform: scaleY(1);
}

/* Le nœud en fond : il reste à l'écran pendant toute la section */
.etapes-section {
  position: relative;
}

.etapes-collant {
  position: relative;
  z-index: 1;
}

.noeud {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}

.noeud-svg {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: visible;
  opacity: 0.6;
}

.noeud-svg path {
  fill: none;
  stroke: var(--miel);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Aux croisements, le brin du dessus "efface" un peu celui du dessous */
.noeud-svg .noeud-halo {
  stroke: var(--fond, var(--lin));
  stroke-width: 13;
  stroke-linecap: butt;
}

@media (min-width: 801px) {
  .anime .etapes-section {
    height: 280vh;
    padding: 0;
  }

  .anime .etapes-section .etapes-collant {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100vh;
    padding-top: 50px;
  }
}


/* =====================================================
   MES RÉFÉRENCES : deux grands panneaux pleine largeur
   ===================================================== */
.references {
  position: relative;
  padding-top: clamp(100px, 12vw, 160px);
}

.references-titre {
  width: min(1180px, 100% - 64px);
  margin: 0 auto 56px;
}

.references-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.reference {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 82vh;
  padding: clamp(36px, 5vw, 80px);
  overflow: hidden;
  background: #253023;
  color: var(--lin);
}

.reference-b {
  background: var(--bordeaux);
}

/* Voile en bas du panneau : le texte reste lisible sur la photo */
.reference::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, #253023 0%, rgba(37, 48, 35, 0.82) 38%, rgba(37, 48, 35, 0) 78%);
  pointer-events: none;
}

.reference-b::after {
  background: linear-gradient(to top, #5E1A26 0%, rgba(94, 26, 38, 0.82) 38%, rgba(94, 26, 38, 0) 78%);
}

/* La photo prend la couleur du panneau */
.reference img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.4;
  scale: 1.08;
  transition: opacity 1s var(--douceur), scale 1.8s var(--douceur);
}

.reference:hover img {
  opacity: 0.62;
  scale: 1;
}

/* Fin trait doré qui s'étire au survol */
.reference-contenu::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-bottom: 26px;
  background: var(--miel);
  transition: width 0.9s var(--douceur);
}

.reference:hover .reference-contenu::before {
  width: 140px;
}

.reference h3 {
  max-width: 14ch;
  margin-bottom: 18px;
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  font-weight: 400;
  line-height: 1.04;
}

.reference p {
  max-width: 38ch;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
}

/* Définition claire de chaque approche */
.reference-def {
  display: grid;
  gap: 6px;
  max-width: 46ch;
}

.reference-def dt {
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #DDB585; /* miel éclairci, bien lisible sur le vert et le bordeaux */
}

.reference-def dt:first-child {
  margin-top: 0;
}

.reference-def dd {
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.6;
}

.reference-def dd + dd {
  margin-top: 10px;
}


/* =====================================================
   POUR QUI, ET POUR QUOI
   ===================================================== */
.pourqui {
  overflow: hidden;
}

.pourqui-phrase {
  max-width: 20ch;
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 5.8vw, 5.6rem);
  line-height: 1.08;
}

.pourqui-sous {
  margin: 64px 0 10px;
  font-size: 1.05rem;
  opacity: 0.85;
}

/* Les motifs qui défilent en boucle */
.defile {
  overflow: hidden;
  padding: 0.6vh 0;
}

.defile-piste {
  display: flex;
  width: max-content;
  will-change: transform;
}

.defile-piste span {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding-right: 0.55em;
  font-family: var(--police-titre);
  font-size: clamp(2.6rem, 6.2vw, 6rem);
  line-height: 1.2;
  white-space: nowrap;
}

/* Petit trait doré entre deux motifs */
.defile-piste span::after {
  content: "";
  width: 0.5em;
  height: 2px;
  background: var(--miel);
}

.defile-inverse .defile-piste span {
  font-style: italic;
  color: var(--taupe);
}

/* Texte lu par les lecteurs d'écran, mais invisible */
.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


/* =====================================================
   FORMATS (page Consultations)
   ===================================================== */
.formats {
  margin-top: 60px;
  list-style: none;
}

.format {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: 32px;
  align-items: baseline;
  padding: 40px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.format:last-child {
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.format h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 400;
}

.format-prix {
  text-align: right;
}

.format-prix strong {
  display: block;
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 400;
  line-height: 1.1;
}


/* Déroulement en 3 étapes */
.deroule {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  margin-top: 70px;
  list-style: none;
}

.deroule-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1;
  color: var(--miel);
}

.deroule h3 {
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
}


/* =====================================================
   QUESTIONS FRÉQUENTES
   ===================================================== */
.faq {
  max-width: 860px;
  margin: 56px auto 0;
}

.faq details {
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.faq details:last-child {
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.faq summary {
  position: relative;
  display: block;
  padding: 26px 56px 26px 0;
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* Le "+" devient "−" à l'ouverture */
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--miel);
  transition: transform 0.5s var(--douceur);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq-reponse {
  overflow: hidden;
}

.faq-reponse p {
  max-width: 64ch;
  padding-bottom: 28px;
}


/* =====================================================
   AGENDA DE RÉSERVATION (page Contact)
   ===================================================== */
.conditions {
  max-width: 820px;
  margin: 56px auto 0;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 24px;
}

.conditions h3 {
  margin-bottom: 18px;
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

.conditions ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 1.2em;
}

.conditions li::marker {
  font-family: var(--police-titre);
  color: var(--miel);
}

.accepter {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font-weight: 500;
  cursor: pointer;
}

.accepter input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--miel);
  cursor: pointer;
}

/* L'agenda est verrouillé tant que les conditions ne sont pas acceptées */
.agenda {
  max-width: 1000px;
  margin: 40px auto 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
  transition: border-color 0.6s;
}

/* Choix de la séance (individuelle / couple) au-dessus de l'agenda */
.choix-seance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0;
  border: 0;
}

.choix-seance legend {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  font-family: var(--police-titre);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  text-align: center;
}

.choix {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px 20px 58px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 18px;
  cursor: pointer;
  transition: border-color 0.4s, background-color 0.4s;
}

.choix:hover {
  border-color: var(--miel);
}

/* Petit rond qui se remplit quand la séance est choisie */
.choix input {
  position: absolute;
  top: 50%;
  left: 24px;
  width: 20px;
  height: 20px;
  margin: 0;
  transform: translateY(-50%);
  accent-color: var(--bordeaux);
}

.choix:has(input:checked) {
  border-color: var(--bordeaux);
  background: color-mix(in srgb, var(--bordeaux) 7%, transparent);
}

.choix:has(input:focus-visible) {
  outline: 2px solid var(--miel);
  outline-offset: 3px;
}

.choix-nom {
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  line-height: 1.2;
}

.choix-detail {
  font-size: 0.92rem;
  opacity: 0.8;
}

.choix-seance + .agenda {
  margin-top: 18px;
}

@media (max-width: 600px) {
  .choix-seance {
    grid-template-columns: 1fr;
  }
}

.agenda-verrou {
  padding: 70px 28px;
  text-align: center;
  font-family: var(--police-titre);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  opacity: 0.75;
}

.agenda.ouvert {
  border-style: solid;
  background: #fff;
}

.agenda iframe {
  display: block;
  width: 100%;
  height: 760px; /* ajusté automatiquement par Calendly quand c'est possible */
  border: 0;
}

.agenda-lien {
  margin-top: 14px;
  text-align: center;
  font-size: 0.95rem;
}


/* =====================================================
   CONTACT
   ===================================================== */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}

.infos {
  list-style: none;
}

.infos li {
  padding: 18px 0;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.infos .petit {
  display: block;
  margin-bottom: 4px;
  font-size: 0.92rem;
  opacity: 0.85;
}

.infos .grand {
  font-family: var(--police-titre);
  font-size: 1.45rem;
  line-height: 1.3;
}

.formulaire {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.champ.large {
  grid-column: 1 / -1;
}

.champ label {
  font-size: 0.95rem;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 14px 4px;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  background: transparent;
  color: inherit;
  font: inherit;
  transition: border-color 0.3s;
}

.champ textarea {
  min-height: 150px;
  resize: vertical;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--miel);
}

.champ select option {
  color: var(--vert);
}

.case {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.95rem;
}

.case input {
  margin-top: 6px;
  accent-color: var(--miel);
}

.erreur {
  min-height: 1.2em;
  font-size: 0.85rem;
  color: var(--bordeaux);
}

.formulaire-bas {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
}

.formulaire-bas button {
  font: inherit;
  font-weight: 500;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
}

.formulaire-note {
  font-size: 0.9rem;
  opacity: 0.85;
}

.urgence {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.urgence h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 14px;
}


/* =====================================================
   MENTIONS LÉGALES
   ===================================================== */
.legal {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  margin: 56px 0 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.legal p + p {
  margin-top: 12px;
}


/* =====================================================
   PIED DE PAGE
   ===================================================== */
.pied {
  position: relative;
  padding: 30px 0 36px;
}

.pied-colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  padding-top: 48px;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.pied-nom {
  font-family: var(--police-titre);
  font-size: 2rem;
  line-height: 1.2;
}

.pied h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.pied ul {
  list-style: none;
}

.pied a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 0% 1px no-repeat;
  transition: background-size 0.4s var(--douceur);
}

.pied a:hover {
  background-size: 100% 1px;
}

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-top: 56px;
  font-size: 0.9rem;
  opacity: 0.85;
}


/* =====================================================
   FIL : un fil doré qui se dessine en descendant
   (son tracé est calculé par script.js à partir des data-fil)
   ===================================================== */
.fil {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.fil path {
  fill: none;
  stroke: var(--miel);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.fil circle {
  fill: var(--miel);
}


/* =====================================================
   APPARITIONS
   ===================================================== */

/* Titres découpés en lettres ou en mots qui montent */
.mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.14em 0.03em 0.1em;
  margin: -0.14em -0.03em -0.1em;
}

.lettre {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1.1s var(--douceur);
  transition-delay: calc(var(--i) * 45ms);
}

.visible .lettre {
  transform: none;
}

/* Éléments qui apparaissent quand on arrive dessus */
.anime [data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--douceur), transform 1.1s var(--douceur);
  transition-delay: var(--delai, 0s);
}

.anime [data-reveal].visible {
  opacity: 1;
  transform: none;
}


/* =====================================================
   TABLETTE ET TÉLÉPHONE
   ===================================================== */
@media (max-width: 1024px) {
  .entete-entiere {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    padding: 130px 32px 90px;
  }

  .entete-entiere-texte {
    margin: 0 0 44px;
  }

  .entete-entiere .grand-titre {
    white-space: normal;
  }

  .seance {
    justify-self: end;
    width: min(100%, 600px);
    margin: 0;
  }
}

@media (max-width: 600px) {
  .entete-entiere {
    padding: 120px 24px 80px;
  }

  .seance {
    width: 100%;
  }
}
@media (max-width: 980px) {
  .nav-liens a {
    padding: 10px 14px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 860px) {
  .nav {
    left: 16px;
    right: 16px;
    justify-content: space-between;
    transform: none;
  }

  .anime .nav:not(.pret) {
    transform: translateY(-24px);
  }

  .nav-nom,
  .nav-menu {
    display: block;
  }

  .nav-liens {
    display: none;
  }
}

@media (max-width: 800px) {
  .conteneur {
    width: auto;
    margin-inline: 32px 24px;
  }

  .mots-liste li:nth-child(n) {
    grid-column: 1 / -1;
  }

  .mots-liste li {
    font-size: clamp(2.8rem, 13vw, 4rem);
  }

  .mots-liste li:nth-child(odd) {
    padding-left: 6%;
  }

  .contact-grille,
  .etapes-grille,
  .references-grille {
    grid-template-columns: 1fr;
  }

  .entete-immersive {
    padding: 0 24px 7vh;
  }

  .entete-photo {
    height: 70vh;
    -webkit-mask-image: linear-gradient(#000 35%, transparent 90%);
    mask-image: linear-gradient(#000 35%, transparent 90%);
  }

  .reference {
    min-height: 70vh;
  }

  .noeud-svg {
    opacity: 0.38;
  }

  /* Faire connaissance : sur téléphone, la photo change en descendant */
  .decouvrir-liste a {
    padding: 9vh 0;
  }

  .decouvrir-texte {
    transform: none;
  }

  .decouvrir-liste a.actif .decouvrir-titre {
    transform: none;
  }

  .agenda iframe {
    height: 1080px;
  }

  .colonnes,
  .deroule {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .format {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }

  .format-prix {
    text-align: left;
  }

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

  .pied-colonnes {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .anime .scene-photo {
    clip-path: inset(26vh 30vw 20vh 30vw round 20vw 20vw 0 0);
  }
}


/* =====================================================
   SI LA PERSONNE A DEMANDÉ "MOINS D'ANIMATIONS"
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }

  .rideau {
    display: none;
  }
}