/* ==========================================================================
   Maison Ose — feuille de style unique
   --------------------------------------------------------------------------
   Le lieu est une maison bordelaise : moulures, parquet, rideaux terracotta,
   lumière chaude. La page tient de la revue plutôt que du gabarit de spa —
   grandes garaldes, marges franches, photographies à fond perdu, et une
   arche reprise des miroirs cintrés du lieu pour coiffer les images.

   Trois régimes se succèdent pour que le défilement ne soit pas une suite de
   blocs identiques : les pages claires (crème), les respirations
   photographiques pleine largeur, et deux ruptures colorées — l'encre du
   yoga, la terre cuite de la carte cadeau.

   Les textes sont ceux de l'ancien site, repris mot pour mot ; le dessin
   sert à les rendre lisibles, jamais à les paraphraser.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Caractères — servis avec le site (voir outils/polices.sh)
   Cormorant Garamond pour les titres : la même garalde à contraste marqué
   que le « Maison Ose » gravé dans le logo. Jost pour le texte : géométrique,
   lisible en petit corps, proche du Montserrat de l'ancien site.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Titres'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/titres-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Titres'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/titres-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Texte'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/texte-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Texte'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url('../fonts/texte-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Jetons — palette relevée sur les photographies du lieu : la crème des murs,
   la terre cuite des rideaux, l'ocre des suspensions en rotin.
   Les associations servies pour du texte tiennent au-dessus de 4,5 : 1 ;
   l'ocre, qui n'y arrive pas, ne sert qu'aux filets et aux aplats.
   -------------------------------------------------------------------------- */
:root {
  --creme:       #FAF5ED;
  --creme-creux: #F3EADC;
  --sable:       #E7DAC7;
  --terre:       #A24E30;   /* 5,27 : 1 sur la crème */
  --terre-fonce: #8C4227;   /* 6,62 : 1 */
  --ocre:        #C08A3E;   /* filets et aplats seulement */
  --encre:       #2C2320;   /* 14,1 : 1 */
  --encre-doux:  #5C4C44;   /*  7,5 : 1 */
  --filet:       #E0D2BE;

  --titres: 'Titres', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --texte:  'Texte', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --p1: 0.5rem;  --p2: 0.875rem; --p3: 1.375rem; --p4: 2.25rem;
  --p5: 3.5rem;  --p6: clamp(3.5rem, 8vw, 6.5rem); --p7: clamp(5rem, 12vw, 10rem);

  --colonne: 38rem;
  --large:   82rem;
  --marge:   clamp(1.25rem, 5vw, 5rem);
  --entete-hauteur: 4.5rem;

  /* L'arche : le motif du lieu — miroirs cintrés, portes-fenêtres
     bordelaises, disque du logo. Deux valeurs, parce qu'une seule ne peut
     pas convenir : le rayon vertical est un pourcentage de la HAUTEUR, et
     pour qu'un cintre soit demi-circulaire il doit valoir la moitié de la
     largeur — 40 % sur un portrait 4:5, 16 % sur une image couchée. */
  --arche:       50% 50% 6px 6px / 40% 40% 6px 6px;
  --arche-large: 50% 50% 6px 6px / 16% 16% 6px 6px;

  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.75;
  overflow-x: hidden;
}

/* Grain — une trame fine posée sur toute la page. Sans elle, les aplats
   crème d'un écran paraissent plastiques ; avec, ils tiennent du papier. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27g%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url%28%2523g%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 160px 160px;
  opacity: 0.045; mix-blend-mode: multiply;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titres); font-weight: 400; line-height: 1.08; margin: 0; }
p { margin: 0 0 var(--p3); }
ul { margin: 0; padding: 0; list-style: none; }

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

.pictos { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saut {
  position: absolute; top: -100%; left: var(--marge); z-index: 50;
  background: var(--encre); color: var(--creme);
  padding: var(--p2) var(--p3); text-decoration: none;
}
.saut:focus { top: var(--p2); }

/* --------------------------------------------------------------------------
   En-tête — crème dès le départ : l'accueil n'est plus une photographie
   plein écran mais une double page, et une barre transparente sur du texte
   ne tiendrait pas. La prise de rendez-vous y reste visible en permanence.
   -------------------------------------------------------------------------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 2rem);
  min-height: var(--entete-hauteur);
  padding: var(--p2) var(--marge);
  background: rgba(250, 245, 237, 0.86);
  backdrop-filter: blur(10px);
  transition: box-shadow 0.4s var(--sortie), background 0.4s var(--sortie);
}
.entete.posee {
  background: rgba(250, 245, 237, 0.97);
  box-shadow: 0 1px 0 var(--filet);
}

.marque {
  display: flex; align-items: center; gap: var(--p2);
  margin-right: auto; text-decoration: none;
  font-family: var(--titres); font-size: 1.05rem; letter-spacing: 0.3em;
  text-transform: uppercase; white-space: nowrap;
}
.marque img { width: 2.4rem; height: 2.4rem; object-fit: contain; }

.navigation ul { display: flex; align-items: center; gap: clamp(0.7rem, 1.5vw, 1.4rem); }
.navigation a {
  display: inline-block; padding: 0.4rem 0; position: relative;
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase;
  text-decoration: none; color: var(--encre-doux);
  transition: color 0.3s var(--sortie);
}
.navigation a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--terre);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--sortie);
}
.navigation a:hover, .navigation a:focus-visible,
.navigation a[aria-current="true"] { color: var(--encre); }
.navigation a:hover::after,
.navigation a:focus-visible::after,
.navigation a[aria-current="true"]::after { transform: scaleX(1); }

.entete-rdv {
  order: 3;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  padding: 0.6rem 1.25rem; border: 1px solid var(--terre); border-radius: 999px;
  color: var(--terre);
  transition: background 0.3s var(--sortie), color 0.3s var(--sortie);
}
.entete-rdv:hover, .entete-rdv:focus-visible { background: var(--terre); color: var(--creme); }

.bascule {
  display: none; order: 4; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0.4rem; cursor: pointer;
  color: inherit; font: inherit;
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase;
}
.bascule-traits { display: grid; gap: 4px; width: 22px; }
.bascule-traits i {
  display: block; height: 1px; background: currentColor;
  transition: transform 0.35s var(--sortie), opacity 0.2s linear;
}
.bascule[aria-expanded="true"] .bascule-traits i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bascule[aria-expanded="true"] .bascule-traits i:nth-child(2) { opacity: 0; }
.bascule[aria-expanded="true"] .bascule-traits i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 68rem) {
  .bascule { display: inline-flex; }
  .navigation {
    position: fixed; inset: var(--entete-hauteur) 0 auto; order: 5;
    background: var(--creme); color: var(--encre);
    max-height: 0; overflow: hidden;
    transition: max-height 0.45s var(--sortie);
  }
  /* Le filet n'apparaît qu'ouvert : sur un menu replié (hauteur nulle,
     débordement masqué) il se dessinerait quand même. */
  .navigation.ouverte {
    max-height: min(78vh, 36rem); overflow-y: auto;
    border-bottom: 1px solid var(--filet);
  }
  .navigation ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--p2) var(--marge) var(--p4); }
  .navigation li + li { border-top: 1px solid var(--filet); }
  .navigation a { padding: 0.95rem 0; font-size: 0.8rem; }
}
@media (max-width: 30rem) {
  .entete-rdv { display: none; }   /* la place manque : le bouton reste dans la page */
}

/* --------------------------------------------------------------------------
   Rail — le numéro de section, posé dans la marge et tenu au défilement.
   C'est de la typographie, pas du texte : aria-hidden, rien à annoncer.
   -------------------------------------------------------------------------- */
/* Le rail est posé en absolu, hors du flux : dans une section en grille, un
   élément ordinaire prendrait une colonne et décalerait toute la
   composition. Il n'apparaît qu'à partir de 80 rem, là où la marge est
   assez large pour l'accueillir sans mordre sur le texte. */
.rail { display: none; }

@media (min-width: 80rem) {
  .section, .hero { position: relative; }
  .rail {
    display: block; position: absolute;
    left: clamp(0.9rem, 2.2vw, 2.25rem); top: var(--p6);
    font-family: var(--texte); font-size: 0.68rem; letter-spacing: 0.32em;
    color: var(--terre); opacity: 0.75;
    writing-mode: vertical-rl;
  }
  .hero .rail { top: calc(var(--entete-hauteur) + var(--p5)); }
  .rail::after {
    content: ''; display: block; width: 1px; height: 3.5rem;
    background: currentColor; opacity: 0.45;
    margin: 0.9rem auto 0;
  }
}
.section-sombre .rail, .section-terre .rail { color: var(--creme); }

/* --------------------------------------------------------------------------
   Accueil — une double page : les mots à gauche sur la crème, la
   photographie à droite, à fond perdu, du haut au bas de l'écran. Le texte
   n'est jamais posé sur l'image : le salon est crème et beige, aucun voile
   n'y tiendrait les 4,5 : 1.
   -------------------------------------------------------------------------- */
.hero {
  display: grid; align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-top: calc(var(--entete-hauteur) + var(--p5));
  padding-bottom: var(--p6);
}
.hero-mots {
  padding-inline: var(--marge);
  max-width: 44rem; margin-inline: auto;
}
.hero-titre { margin: 0 0 var(--p4); }
.hero-logo { width: clamp(8.5rem, 20vw, 12.5rem); height: auto; }

.hero-texte { max-width: 32rem; color: var(--encre-doux); }
/* La première phrase dit ce qu'est la maison : elle est traitée comme un
   chapeau de revue, en garalde et en grand, pas comme du texte courant. */
.hero-texte-premier {
  font-family: var(--titres); font-size: clamp(1.55rem, 1.05rem + 2vw, 2.55rem);
  line-height: 1.24; color: var(--encre); margin-bottom: var(--p4);
  /* Mesure large : à 20 caractères, la phrase d'accueil tombait en cinq
     lignes courtes, entassées. Étalée sur 27, elle en fait trois et respire. */
  max-width: 27ch; text-wrap: pretty;
}
.hero .bouton { margin-top: var(--p2); }

.hero-image { position: relative; overflow: hidden; }
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--arche);
}

/* display:flex et non inline-flex : sinon le repère se range sur la même
   ligne que le bouton qui le précède. */
.hero-suite {
  display: flex; width: fit-content; align-items: center; gap: 0.8rem;
  margin-top: var(--p5); text-decoration: none;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--encre-doux);
}
.hero-suite-trait {
  display: block; width: 3.5rem; height: 1px; background: var(--terre);
  transform-origin: left; transition: transform 0.4s var(--sortie);
}
.hero-suite:hover .hero-suite-trait { transform: scaleX(1.45); }

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: 1fr minmax(0, 47%);
    align-items: stretch;
    min-height: 100svh;
    /* La photographie monte jusqu'au bord haut, sous la barre translucide :
       c'est ce qui fait la double page. Le retrait de l'en-tête passe donc
       sur la colonne de texte, pas sur la section. */
    padding-top: 0; padding-bottom: 0;
  }
  .hero-mots {
    align-self: center; margin-inline: 0;
    padding-block: calc(var(--entete-hauteur) + var(--p5)) var(--p6);
    padding-left: max(var(--marge), calc((100vw - var(--large)) / 2));
    padding-right: clamp(2rem, 4vw, 4rem);
  }
  /* Pas d'arche ici : à fond perdu sur toute la hauteur, l'image vaut mieux
     nette. Le cintre reste aux portraits et aux galeries. */
  .hero-image img { border-radius: 0; }
}
/* Sur un téléphone, la photographie passe devant : une page qui s'ouvre sur
   cinq lignes de texte n'a rien à montrer avant le premier défilement. Elle
   est servie à fond perdu, bord à bord, et son bas est arrondi en coupole —
   l'arche du site, vue par en dessous. */
@media (max-width: 61.99rem) {
  .hero { padding-top: var(--entete-hauteur); padding-bottom: var(--p5); gap: var(--p5); }
  .hero-image { order: -1; padding-inline: 0; }
  .hero-image img {
    width: 100%; height: 46svh; min-height: 17rem; object-fit: cover;
    border-radius: 0 0 50% 50% / 0 0 9% 9%;
  }
  /* Le logo est centré sous la coupole : c'est le sommet de la courbe, et
     rien d'autre ne dispute la place à cette hauteur. */
  .hero-mots { text-align: center; }
  .hero-logo { width: clamp(6.5rem, 26vw, 9rem); margin-inline: auto; }
  .hero-texte, .hero-texte-premier { margin-inline: auto; }
  .hero-texte-premier { max-width: none; }   /* toute la largeur de l'écran */
  .hero .bouton, .hero-suite { margin-inline: auto; }
  .hero-texte-premier { margin-bottom: var(--p3); }
  .hero-suite { margin-top: var(--p4); }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--p7); scroll-margin-top: var(--entete-hauteur); }
.section-creuse { background: var(--creme-creux); }

.dedans { width: min(var(--large), 100%); margin-inline: auto; padding-inline: var(--marge); }
.dedans-etroit { width: min(48rem, 100%); }
.dedans-deux { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .dedans-deux { grid-template-columns: 1fr 1fr; align-items: center; }
  .dedans-inverse > :first-child { order: 2; }
}

.section-entete { max-width: var(--colonne); margin-bottom: var(--p6); }
.section-entete .bouton { margin-top: var(--p2); }

.titre {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.6rem);
  letter-spacing: -0.005em; margin-bottom: var(--p3);
  text-wrap: balance;
}
.titre-geant {
  font-size: clamp(3.25rem, 1.5rem + 8vw, 7rem);
  letter-spacing: -0.02em; margin-bottom: var(--p3);
}
.titre::after, .titre-geant::after {
  content: ''; display: block; width: 3.25rem; height: 1px;
  background: var(--terre); opacity: 0.55; margin-top: var(--p3);
}
.sur-titre {
  font-family: var(--texte); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--terre);
  margin-bottom: var(--p2);
}
/* Le chapeau est en garalde, mais Playfair a plus de chair que Cormorant :
   au même corps, sept lignes de chapeau faisaient un bloc trop sombre. */
.chapeau {
  font-family: var(--titres);
  font-size: clamp(1.25rem, 1.02rem + 0.95vw, 1.7rem);
  line-height: 1.32; color: var(--encre); max-width: 26ch;
  text-wrap: pretty;   /* évite le mot — ou les points de suspension — seuls en fin de bloc */
}
p, .liste-tirets { color: var(--encre-doux); max-width: var(--colonne); }
.mention { font-size: 0.92rem; font-style: italic; }

.liste-tirets { margin: 0 0 var(--p3); }
.liste-tirets li { position: relative; padding-left: 1.4rem; margin-bottom: var(--p1); }
.liste-tirets li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 0.7rem; height: 1px; background: currentColor; opacity: 0.6;
}

.signature { font-family: var(--titres); font-style: italic; font-size: 2rem; color: var(--encre); margin-top: var(--p4); }
.merci { letter-spacing: 0.24em; }

/* En-têtes en deux colonnes — sur une page large, un chapeau seul sous son
   titre laisse une demi-page vide. */
.section-entete-double { max-width: none; }
.section-entete-double .entete-texte > :last-child { margin-bottom: 0; }
.section-entete-double .bouton { margin-top: var(--p3); }
@media (min-width: 62rem) {
  .section-entete-double {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .section-entete-double .entete-titre { position: sticky; top: calc(var(--entete-hauteur) + var(--p4)); }
  .section-entete-double .titre { margin-bottom: 0; }
}

/* Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none;
  background: var(--terre); color: var(--creme);
  padding: 1rem 1.9rem; border: 1px solid var(--terre); border-radius: 999px;
  font-family: var(--texte); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer;
  transition: background 0.3s var(--sortie), color 0.3s var(--sortie),
              border-color 0.3s var(--sortie), transform 0.3s var(--sortie);
}
.bouton::after {
  content: ''; width: 1.4rem; height: 1px; background: currentColor;
  transition: width 0.3s var(--sortie);
}
.bouton:hover, .bouton:focus-visible {
  background: var(--terre-fonce); border-color: var(--terre-fonce); transform: translateY(-2px);
}
.bouton:hover::after, .bouton:focus-visible::after { width: 2.1rem; }
.bouton-creux { background: transparent; color: var(--terre); }
.bouton-creux:hover, .bouton-creux:focus-visible { background: var(--terre); color: var(--creme); }
.paire-boutons { display: flex; flex-wrap: wrap; gap: var(--p2); }

.lien-souligne {
  text-decoration: none; border-bottom: 1px solid var(--terre);
  padding-bottom: 1px; color: var(--encre);
  transition: color 0.25s var(--sortie), border-color 0.25s var(--sortie);
}
.lien-souligne:hover, .lien-souligne:focus-visible { color: var(--terre); }

/* --------------------------------------------------------------------------
   Le lieu — colonne de texte tenue au défilement, mosaïque décalée.
   -------------------------------------------------------------------------- */
.section-lieu .dedans { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 62rem) {
  .section-lieu .dedans { grid-template-columns: minmax(18rem, 26rem) 1fr; align-items: start; }
  .lieu-mots { position: sticky; top: calc(var(--entete-hauteur) + var(--p4)); }
}
.lieu-mots .bouton { margin-top: var(--p2); }

.galerie { display: grid; gap: clamp(0.7rem, 1.5vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.galerie figure { margin: 0; overflow: hidden; background: var(--sable); }
.galerie img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4;
  border-radius: 4px; cursor: zoom-in;
  transition: transform 0.9s var(--sortie);
}
.galerie img:hover { transform: scale(1.04); }
.galerie figure:first-child img { border-radius: var(--arche); }
/* La galerie de la location montre des photographies prises pendant les
   ateliers, presque toutes debout : le format couché les aurait toutes
   étêtées. */
.galerie-large img { aspect-ratio: 4 / 5; }

@media (min-width: 62rem) {
  .section-lieu .galerie { grid-template-columns: repeat(2, 1fr); }
  .section-lieu .galerie figure:nth-child(1) { grid-row: span 2; }
  .section-lieu .galerie figure:nth-child(1) img { aspect-ratio: auto; height: 100%; }
  .section-lieu .galerie figure:nth-child(even) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

  .galerie-large { grid-template-columns: repeat(3, 1fr); }
  .galerie-large figure:nth-child(3n + 2) { margin-top: clamp(1.5rem, 4vw, 3rem); }
  .galerie-large figure:nth-child(1) img,
  .galerie-large figure:nth-child(5) img,
  .galerie-large figure:nth-child(9) img { border-radius: var(--arche); }
}

/* --------------------------------------------------------------------------
   Les thérapeutes — vingt fiches, portraits cintrés, rangées décalées.
   Le décalage se fait à la marge et non par transform : les apparitions au
   défilement se servent déjà de transform, les deux se contrarieraient.
   -------------------------------------------------------------------------- */
/* Deux colonnes dès le téléphone : vingt fiches en colonne unique font un
   défilement interminable, et un portrait de 160 px reste lisible. */
.equipe { display: grid; gap: clamp(1.5rem, 3.5vw, 3.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 46rem) { .equipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .equipe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fiche { display: flex; flex-direction: column; }
.fiche img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--sable); margin-bottom: var(--p3);
  border-radius: var(--arche); filter: saturate(0.94);
  transition: filter 0.5s var(--sortie), transform 0.8s var(--sortie);
}
.fiche:hover img { filter: saturate(1); transform: translateY(-4px); }
.fiche h3 { display: grid; gap: 0.2rem; margin-bottom: var(--p2); }
.fiche .prenom { font-family: var(--texte); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.24em; color: var(--terre); }
.fiche .nom { font-size: clamp(1.45rem, 1.2rem + 0.6vw, 1.8rem); letter-spacing: -0.005em; }
.fiche ul { margin-bottom: var(--p3); }
.fiche li { font-size: 0.94rem; color: var(--encre-doux); line-height: 1.5; padding-left: 0.95rem; position: relative; }
.fiche li::before { content: ''; position: absolute; left: 0; top: 0.68em; width: 4px; height: 1px; background: var(--ocre); }
.fiche > a {
  margin-top: auto; align-self: flex-start; position: relative;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--terre); padding-bottom: 4px;
}
.fiche > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--terre); transform: scaleX(0.35); transform-origin: left;
  transition: transform 0.4s var(--sortie);
}
.fiche:hover > a::after, .fiche > a:focus-visible::after { transform: scaleX(1); }
@media (min-width: 62rem) {
  .equipe .fiche:nth-child(even) { margin-top: clamp(1.75rem, 3.5vw, 3.25rem); }
}

/* --------------------------------------------------------------------------
   Les ateliers — les affiches viennent des intervenantes, à des formats
   tous différents. Elles sont donc posées entières dans un cadre de même
   taille, sur la crème, plutôt que recadrées : une affiche rognée perd sa
   date et son tarif.
   -------------------------------------------------------------------------- */
.affiches { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.affiche {
  position: relative; display: block; padding: clamp(0.6rem, 1.2vw, 1rem);
  background: var(--creme); border: 1px solid var(--filet);
  transition: transform 0.4s var(--sortie), box-shadow 0.4s var(--sortie);
}
.affiche img {
  width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: contain;
  background: var(--creme-creux); border-radius: 2px;
}
a.affiche:hover, a.affiche:focus-visible {
  transform: translateY(-5px); box-shadow: 0 16px 38px rgba(44, 35, 32, 0.15);
}
a.affiche::before {
  content: ''; position: absolute; right: 0.9rem; bottom: 0.9rem;
  width: 2.5rem; height: 2.5rem; background: var(--terre); border-radius: 50%;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.35s var(--sortie), transform 0.35s var(--sortie);
}
a.affiche::after {
  content: ''; position: absolute; right: 1.85rem; bottom: 1.85rem;
  width: 0.55rem; height: 0.55rem;
  border-top: 1px solid var(--creme); border-right: 1px solid var(--creme);
  transform: rotate(45deg); opacity: 0;
  transition: opacity 0.35s var(--sortie), transform 0.35s var(--sortie);
}
a.affiche:hover::before, a.affiche:focus-visible::before { opacity: 1; transform: scale(1); }
a.affiche:hover::after, a.affiche:focus-visible::after { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }

/* --------------------------------------------------------------------------
   Yoga — la rupture sombre de la page.
   -------------------------------------------------------------------------- */
.section-sombre { background: var(--encre); color: var(--creme); }
.section-sombre p, .section-sombre .cours-quand { color: rgba(250, 245, 237, 0.82); }
.section-sombre .titre { color: var(--creme); }
.section-sombre .titre::after { background: var(--ocre); opacity: 0.9; }
.section-sombre .cours li { border-color: rgba(250, 245, 237, 0.18); }
.section-sombre .lien-souligne { color: var(--creme); border-bottom-color: var(--ocre); }
.section-sombre .lien-souligne:hover, .section-sombre .lien-souligne:focus-visible { color: var(--ocre); }

.cours { display: grid; gap: var(--p3); margin-top: var(--p5); }
.cours li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p3);
  justify-content: space-between;
  border-top: 1px solid var(--filet); padding-top: var(--p3);
}
.cours li:last-child { border-bottom: 1px solid var(--filet); padding-bottom: var(--p3); }
.cours-quand { margin: 0; color: var(--encre); font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase; }
.cours-quand span {
  display: block; font-family: var(--titres); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem);
  letter-spacing: -0.01em; text-transform: none; margin-top: 0.35rem; color: var(--creme);
}

/* --------------------------------------------------------------------------
   Carte cadeau — la seconde rupture, en terre cuite.
   -------------------------------------------------------------------------- */
.section-terre { background: var(--terre); color: var(--creme); }
.section-terre p, .section-terre .liste-tirets { color: rgba(250, 245, 237, 0.88); }
.section-terre .titre { color: var(--creme); }
.section-terre .titre::after { background: rgba(250, 245, 237, 0.7); opacity: 1; }
.section-terre .merci { color: var(--creme); }
.section-terre .bouton {
  background: var(--creme); color: var(--terre); border-color: var(--creme);
}
.section-terre .bouton:hover, .section-terre .bouton:focus-visible {
  background: var(--encre); border-color: var(--encre); color: var(--creme);
}
.cadeau-visuel { margin: 0; }
/* La carte est posée droite et ne bouge pas : c'est plus sobre, et une
   carte cadeau n'a pas à faire l'article. */
.cadeau-visuel img {
  border-radius: 3px;
  box-shadow: 0 30px 70px rgba(30, 18, 12, 0.35);
}

/* --------------------------------------------------------------------------
   Bandeaux — deux respirations photographiques pleine largeur. L'image est
   plus haute que sa fenêtre et se déplace doucement au défilement : la
   parallaxe est posée par main.js, et jamais sous « moins d'animations ».
   -------------------------------------------------------------------------- */
.bandeau { position: relative; overflow: hidden; height: clamp(16rem, 34vw, 30rem); }
.bandeau-court { height: clamp(13rem, 26vw, 22rem); }
.bandeau img {
  width: 100%; height: 130%; object-fit: cover;
  position: absolute; inset: 0; margin: auto;
  will-change: transform;
}
.bandeau::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(44, 30, 22, 0.2), rgba(44, 30, 22, 0.32));
}
/* --------------------------------------------------------------------------
   À propos — portrait cintré adossé à un aplat sable.
   -------------------------------------------------------------------------- */
.portrait-fondatrice { position: relative; margin: 0; }
.portrait-fondatrice::before {
  content: ''; position: absolute; left: -1.25rem; bottom: -1.25rem;
  width: 58%; height: 52%; background: var(--sable);
}
.portrait-fondatrice img { position: relative; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--arche); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.formulaire { max-width: 32rem; }
.champ { display: grid; gap: 0.35rem; margin-bottom: var(--p3); }
.champ label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--encre-doux); }
.champ label span { color: var(--terre); }
.champ input, .champ textarea {
  font: inherit; color: var(--encre); background: transparent;
  border: 0; border-bottom: 1px solid var(--filet); border-radius: 0;
  padding: 0.7rem 0; transition: border-color 0.3s var(--sortie);
}
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--terre); }
.champ textarea { resize: vertical; }
.pot-a-miel { position: absolute; left: -9999px; }
.retour-formulaire { margin-top: var(--p3); font-size: 0.95rem; color: var(--terre); }

.coordonnees p { max-width: none; }
.adresse { font-family: var(--titres); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); color: var(--encre); line-height: 1.45; }
.reseaux { display: flex; flex-wrap: wrap; gap: var(--p3); }

/* --------------------------------------------------------------------------
   Le plan, pleine largeur, comme une dernière fenêtre avant le pied.

   Il est dessiné (voir outils/plan.py) et non chargé en tuiles : pas de
   connexion tierce, pas de cookie, pas de gris Google au milieu d'une page
   crème. Le SVG est inséré dans la page plutôt que servi en fichier, ce qui
   lui donne les polices et les couleurs du site — un <img> n'aurait ni
   l'une ni l'autre.
   -------------------------------------------------------------------------- */
.plan { position: relative; border-top: 1px solid var(--filet); background: var(--creme); }
/* Sur un téléphone, la bande est plus haute : le dessin étant servi en
   « slice », une bande basse revient à s'éloigner, et le quartier devient
   illisible. Plus haute, elle rapproche au contraire la maison. */
.plan-dessin { display: block; width: 100%; height: clamp(17rem, 33vw, 27rem); }
@media (max-width: 46rem) { .plan-dessin { height: 21rem; } }

.plan-fond   { fill: var(--creme); }
.plan-jardin { fill: #E3E4D1; }            /* le seul vert du site, très rompu */
.plan-eau    { fill: #DBE3E5; }
.plan-rue    { fill: none; stroke: var(--sable); stroke-linecap: round; stroke-linejoin: round; }
.plan-tram   { fill: none; stroke: rgba(92, 76, 68, 0.3); stroke-width: 2; stroke-dasharray: 9 7; }
.plan-cible  { fill: none; stroke: var(--terre); stroke-width: 6.5; stroke-linecap: round; opacity: 0.9; }

/* Les noms sont cerclés de crème (paint-order) : sans cela, ils se
   confondraient avec les rues qu'ils traversent. */
.plan-nom {
  font-family: var(--texte); font-size: 11.5px; letter-spacing: 0.14em;
  fill: #8A7A6E; text-anchor: middle;
  paint-order: stroke; stroke: var(--creme); stroke-width: 4px; stroke-linejoin: round;
}
.plan-nom-cible { fill: var(--terre); }

.plan-marque { color: var(--terre); }       /* le soleil du logo hérite currentColor */
.plan-halo      { fill: rgba(162, 78, 48, 0.13); }
.plan-pastille  { fill: var(--creme); stroke: var(--terre); stroke-width: 1.5; }
.plan-ici {
  font-family: var(--titres); font-size: 30px; fill: var(--encre); text-anchor: middle;
  paint-order: stroke; stroke: var(--creme); stroke-width: 5px; stroke-linejoin: round;
}

.plan-ici-rue {
  font-family: var(--texte); font-size: 12.5px; letter-spacing: 0.2em;
  text-transform: uppercase; fill: var(--encre-doux); text-anchor: middle;
  paint-order: stroke; stroke: var(--creme); stroke-width: 4px; stroke-linejoin: round;
}

.plan-nord path { fill: none; stroke: var(--encre-doux); stroke-width: 1.5; stroke-linecap: round; opacity: 0.45; }
.plan-nord text { font-family: var(--texte); font-size: 20px; letter-spacing: 0.1em; fill: var(--encre-doux); text-anchor: middle; opacity: 0.55; }

/* Le dessin se fond dans la page par ses deux bords. */
.plan::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--creme), rgba(250, 245, 237, 0) 12%,
                              rgba(250, 245, 237, 0) 88%, var(--creme));
}

/* Le plan cliquable — la pastille d'invite n'apparaît qu'au survol, et
   jamais au doigt : sur un écran tactile il n'y a pas de survol, et une
   étiquette posée en permanence sur le dessin l'encombrerait. */
.plan-lien { display: block; position: relative; text-decoration: none; }
.plan-pastille-lien {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2rem); translate: -50% 0;
  background: var(--creme); color: var(--terre);
  padding: 0.7rem 1.4rem; border: 1px solid var(--terre); border-radius: 999px;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap; box-shadow: 0 10px 30px rgba(44, 35, 32, 0.14);
  opacity: 0; translate: -50% 8px;
  transition: opacity 0.35s var(--sortie), translate 0.35s var(--sortie);
}
.plan-lien:hover .plan-pastille-lien,
.plan-lien:focus-visible .plan-pastille-lien { opacity: 1; translate: -50% 0; }
@media (hover: none) { .plan-pastille-lien { display: none; } }

.plan-actions { display: flex; gap: var(--p3); }

.plan-legende {
  display: flex; flex-wrap: wrap; gap: var(--p1) var(--p3);
  justify-content: space-between; align-items: baseline;
  width: min(var(--large), 100%); margin: 0 auto; padding: var(--p3) var(--marge);
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre-doux); max-width: none;
}
.plan-credits { letter-spacing: 0.04em; text-transform: none; opacity: 0.75; }
.plan-legende a { color: var(--terre); text-decoration: none; border-bottom: 1px solid var(--filet); }
.plan-credits a { color: inherit; }
.plan-legende a:hover, .plan-legende a:focus-visible { border-color: var(--terre); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { position: relative; overflow: hidden; background: var(--encre); color: var(--creme); padding-block: var(--p6) var(--p4); }
.pied-soleil { position: absolute; right: -4rem; top: -3rem; width: 20rem; height: 20rem; color: rgba(192, 138, 62, 0.14); }
.pied p { margin: 0 0 var(--p1); color: rgba(250, 245, 237, 0.8); max-width: none; }
.pied a { text-decoration: none; }
.pied a:hover, .pied a:focus-visible { color: var(--ocre); }

.pied-haut {
  position: relative;
  display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  grid-template-columns: 1fr;
  padding-bottom: var(--p5);
}
@media (min-width: 56rem) {
  .pied-haut { grid-template-columns: 1.1fr 1fr 1fr; }
}
.pied-marque img {
  width: 5.5rem; height: auto; margin-bottom: var(--p3);
  opacity: 0.95;   /* déjà repeint en crème par outils/images.py */
}
.pied-adresse { font-family: var(--titres); font-size: 1.25rem; line-height: 1.5; color: var(--creme) !important; }

.pied-nav ul { display: grid; gap: 0.55rem; }
.pied-nav a { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250, 245, 237, 0.8); }

.pied-joindre .bouton { margin-top: var(--p3); color: var(--creme); border-color: rgba(250, 245, 237, 0.55); }
.pied-joindre .bouton:hover, .pied-joindre .bouton:focus-visible { background: var(--creme); color: var(--encre); border-color: var(--creme); }
.pied-reseaux { display: flex; gap: var(--p3); }

.pied-bas {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--p2) var(--p4);
  align-items: baseline; justify-content: space-between;
  padding-top: var(--p3); border-top: 1px solid rgba(250, 245, 237, 0.16);
}
.pied-mentions { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; }
.pied-copie { font-size: 0.82rem; opacity: 0.7; }

/* --------------------------------------------------------------------------
   Visionneuse
   -------------------------------------------------------------------------- */
.visionneuse {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(22, 15, 11, 0.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.visionneuse[hidden] { display: none; }
.visionneuse img { max-width: min(100%, 68rem); max-height: 86svh; object-fit: contain; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.visionneuse button {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: #FFF; font-size: 2.5rem; line-height: 1; padding: 0.4rem 0.9rem;
  opacity: 0.8; transition: opacity 0.25s var(--sortie);
}
.visionneuse button:hover { opacity: 1; }
.visionneuse-fermer { top: 0.6rem; right: 0.9rem; font-size: 2.2rem; }
.visionneuse-precedent { left: 0.3rem; }
.visionneuse-suivant { right: 0.3rem; }

/* --------------------------------------------------------------------------
   Apparitions — les textes montent en fondu, les photographies se dévoilent
   par un volet : sur une image, un fondu se lit comme un défaut de
   chargement.

   Le volet est posé sur l'IMAGE et non sur le cadre observé. Un élément
   entièrement rogné par son propre clip-path a une aire d'intersection
   nulle : l'observateur ne le voit jamais entrer dans l'écran, et il reste
   invisible pour toujours.
   -------------------------------------------------------------------------- */
.apparition {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.8s var(--sortie), transform 0.8s var(--sortie);
  transition-delay: var(--retard, 0s);
}
.apparition.vue { opacity: 1; transform: none; }

.galerie figure.apparition, .affiche.apparition,
.cadeau-visuel.apparition, .portrait-fondatrice.apparition { opacity: 1; transform: none; }
.galerie figure.apparition > img, .affiche.apparition > img,
.cadeau-visuel.apparition > img, .portrait-fondatrice.apparition > img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.95s var(--sortie);
  transition-delay: var(--retard, 0s);
}
.galerie figure.apparition.vue > img, .affiche.apparition.vue > img,
.cadeau-visuel.apparition.vue > img, .portrait-fondatrice.apparition.vue > img { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .apparition { opacity: 1; transform: none; }
  .galerie figure.apparition > img, .affiche.apparition > img,
  .cadeau-visuel.apparition > img, .portrait-fondatrice.apparition > img { clip-path: none; }
}