/* ============================================================================
   L'Univers (`about`) — la feuille du module, à côté de `about.js`.
   Ce que seul ce module emploie ; ce qui sert à plusieurs pages reste dans
   `site.css`. Chargée par le site public après `site.css`, dans l'ordre des
   modules (`tests/admin/shell.spec.js`) : découpée de `site.css` au lot 6 sans
   changer l'ordre de la cascade, éprouvée contre l'ancienne feuille unique
   (`tools/comparer-styles.mjs`).
   ============================================================================ */
.prat-card{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:150px 150px 20px 20px;
  overflow:hidden;display:flex;flex-direction:column;text-align:center;
  transition:transform .3s,box-shadow .3s;
}
/* ⚠️ **La teinte de la pratique passe dans un filet, pas dans l'aplat.**
   L'aplat est un **emplacement de photo** : il disparaîtra le jour où Delphine
   fournira les siennes, et l'identité de couleur avec lui. Le filet, lui, reste
   sous l'image.
   ⚠️ Et il porte la couleur **pleine**, pas la douce — la même leçon qu'à
   `.seance` et `.reco-c`, qui portent déjà ce filet de 4 px : sur l'aplat pâle,
   le Yin et le prénatal ne se séparent que de ΔE 1,17, soit rien pour un œil.
   Sur la teinte pleine, 4,76.
   ⚠️ **Sous l'image et non à gauche** : la carte est une arche
   (`border-radius:150px 150px`), un rail latéral suivrait la courbe du haut. */
.prat-visuel{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  /* ⚠️ **Le filet fait le tour, et il épouse l'arche.** Il ne portait que le bas,
     du temps où l'aplat tenait l'identité de couleur ; une bordure suit un
     `border-radius` toute seule, donc le rayon est répété ici — 146 px, soit les
     150 de la carte moins son trait et l'épaisseur du filet, pour que les deux
     courbes restent concentriques.
     ⚠️ **Le bas est conservé** : c'est là que le filet se lit le mieux — 2,17:1
     contre le blanc de la carte, quand l'arc longe le plafond des photographies
     et n'y atteint que 1,81. Le supprimer aurait affaibli exactement ce que ce
     filet existe pour porter, et retiré la séparation entre l'image et le texte. */
  border:4px solid var(--sc,var(--sauge));
  border-radius:146px 146px 0 0;
  /* La carte est une arche : sans cela, les coins carrés de la photo dépassent. */
  overflow:hidden;
}
.prat-visuel svg{width:56px;height:56px}
.prat-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:6px}
.prat-card h3{font-size:26px}
.prat-card p{font-size:13px;color:var(--encre-60);flex:1;margin-top:4px;margin-bottom:10px}
/* ─── Une famille de pratiques : une case de la grille, un carrousel ───
   ⚠️ **Le cadre ne défile pas, son contenu si** (Delphine, 28 septembre 2026).
   L'article est une `.prat-card` ordinaire — arche, bordure, élévation au
   survol — et seule la piste glisse dedans. Le filet de teinte, qui vit
   d'ordinaire sur le visuel de chaque carte, partirait avec la diapositive :
   il est rendu transparent là, et redessiné une fois par `.prat-famille-cadre`,
   aux mêmes cotes que `.prat-visuel`.
   ⚠️ **Rien ne s'ajoute AU-DESSUS ni AU-DESSOUS de la carte** : flèches et
   points sont posés SUR l'image. Une barre de navigation rendrait la case plus
   haute que ses voisines, et la grille étirerait le Pilates autour d'un vide.
   ⚠️ **Le visuel fait les trois quarts de la LARGEUR (4:3)** : ce qui s'y pose
   se place en unités de largeur du conteneur (`cqw`). Un pourcentage de `top`
   se rapporte à la hauteur, qui varie avec la longueur du texte. */
.prat-famille{position:relative;container-type:inline-size}
.prat-famille-piste{
  display:flex;flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;transition:opacity .22s;
}
.prat-famille-piste::-webkit-scrollbar{display:none}
.prat-famille-diapo{flex:0 0 100%;min-width:0;display:flex;flex-direction:column;scroll-snap-align:start;scroll-snap-stop:always}
.prat-famille-cadre{
  position:absolute;top:0;left:0;width:100%;aspect-ratio:4/3;pointer-events:none;z-index:1;
  border:4px solid var(--sc,var(--sauge));border-radius:146px 146px 0 0;
}
/* ⚠️ **Sans pastille blanche, la flèche doit se tenir seule sur une photo** —
   claire ou sombre selon la pratique, et sur l'aplat pâle des pratiques pas
   encore photographiées. Un trait blanc épais, cerné d'une ombre portée, se lit
   sur les deux ; un trait d'encre disparaîtrait sur les photos sombres. */
.prat-famille-fleche{
  position:absolute;top:37.5cqw;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  filter:drop-shadow(0 1px 2px rgba(34,34,33,.55)) drop-shadow(0 0 6px rgba(34,34,33,.25));
  transition:transform .2s;
}
.prat-famille-fleche svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.prat-famille-points{
  position:absolute;left:0;right:0;top:calc(75cqw - 34px);z-index:2;
  display:flex;justify-content:center;align-items:center;gap:2px;pointer-events:none;
}
.prat-famille-point,.prat-famille-pause{
  pointer-events:auto;width:20px;height:24px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(34,34,33,.5));
}
.prat-famille-point::before{
  content:"";width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.6);
  transition:width .3s,background .3s;
}
.prat-famille-point[aria-current]{width:28px}
.prat-famille-point[aria-current]::before{width:18px;background:#fff}
.prat-famille-pause{margin-left:6px;color:#fff}
.prat-famille-pause svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.prat-famille-pause.arrete .ic-pause{display:none}
.prat-famille-pause.arrete .ic-lecture{display:inline}
@media (prefers-reduced-motion: reduce){
  .prat-famille-piste,.prat-famille-fleche,.prat-famille-point::before{transition:none}
}

/* vignette professeure sur une fiche pratique */
.pr-mini{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--creme);border:none;border-radius:14px;padding:11px 13px;
  margin-bottom:9px;transition:.2s;
}
.pr-mini-av{
  width:44px;height:44px;border-radius:50%;flex:none;color:var(--blanc);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-size:18px;font-weight:600;
}
.pr-mini-txt{flex:1;min-width:0}
.pr-mini-txt b{display:block;font-size:14px;font-weight:600}
.pr-mini-txt em{display:block;font-style:normal;font-size:11.5px;color:var(--encre-60);margin-top:1px}
.pr-mini-fl{flex:none;color:var(--terracotta);font-size:15px}
.pr-mini-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pr-mini-av:has(img){overflow:hidden}
/* « Hatha • Vinyasa • Yin • Hatha Flow » : la ligne des pratiques d'une carte. */
.pr-mini-prat{display:block;font-size:10.5px;letter-spacing:.04em;color:var(--terracotta-2);margin-top:3px}
.pr-mini-sig{display:block;font-size:10.5px;color:var(--encre-60);margin-top:2px}
/* La signature d'une intervenante sous ses pratiques, sur la grille de l'équipe. */
.prof-sig{font-size:11.5px;color:var(--encre-60);margin:-4px 0 12px}
.pf-transmet{
  font-style:italic;font-size:14px;line-height:1.65;color:var(--terracotta-2);
  padding-left:14px;border-left:2px solid var(--rose);
}
.pr-note{font-size:11.5px;color:var(--terracotta-2);margin-top:12px;padding-left:10px;border-left:2px solid var(--rose);line-height:1.5}

/* ---------- Fiche publique d'une professeure ---------- */
/* les deux colonnes se terminent à la même hauteur */
.pf-cols{align-items:stretch}
.pf-fill{flex:1;display:flex;flex-direction:column}
/* Les deux gestes de l'en-tête : voir ses cours, réserver le prochain. Ils se
   replient sur téléphone plutôt que de pousser la page. */
.pf-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pf-accroche{font-family:var(--font-serif);font-size:19px;line-height:1.45;margin-top:12px;max-width:56ch}
.pf-galerie-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}
.pf-galerie-grille img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;display:block}
.pf-cta{width:100%;margin-top:auto;padding-top:11px;padding-bottom:11px}
@media(max-width:900px){
  .pf-fill{flex:none}
}
.prof-card{
  background:var(--blanc);border:1px solid rgba(34,34,33,.08);border-radius:120px 120px 18px 18px;
  padding:0 0 22px;text-align:center;overflow:hidden;transition:transform .25s,box-shadow .25s;
  /* ⚠️ **Cinq rangées partagées avec les cartes voisines** (`subgrid`) :
     portrait, nom, rôle, pratiques, bouton. Une colonne flex mettait le bouton
     au bas de la carte, mais un rôle sur DEUX lignes décalait encore les
     pratiques de sa seule carte (5 octobre 2026). Chaque rangée prend la hauteur de la plus haute de la ligne.
     Le patron de la grille de l'équipe dans /admin. */
  display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:0;margin-bottom:20px;
}
.prof-photo{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:relative;
  flex:none;min-height:0;overflow:hidden}
/* ⚠️ **La photo ne dimensionne pas son cadre** : posée en `absolute`, elle
   remplit le 4:5 sans y contribuer. Dans une carte en colonne flex, Safari
   laissait la hauteur NATURELLE de l'image l'emporter sur `aspect-ratio` — le
   portrait d'Émilie et d'Élodie descendait sous les aplats de leurs voisines,
   et nom, rôle et pratiques avec lui (Delphine, 4 octobre 2026). */
.prof-photo img{position:absolute;inset:0}
/* ⚠️ Un portrait dans un conteneur à `aspect-ratio` **se déforme** sans
   `object-fit` : le rapport de la photo n'est pas forcément celui du cadre — le
   fichier d'origine était en 3:4 quand la vignette est en 4:5. `cover` recadre,
   il n'étire pas. La photo garde ses coins arrondis avec sa carte, d'où
   `overflow:hidden` porté par la carte elle-même. */
/* ⚠️ La photographie d'une pratique est en 4:3, comme son gabarit — aucun
   recadrage. `object-fit:cover` reste, parce qu'une photo suivante pourrait ne
   pas l'être, et parce qu'un cadre qui étire se remarque bien plus tard qu'un
   cadre qui rogne. */
.prat-visuel img,
.prof-photo img,.page-hero-visuel img,.fond-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;
}
/* ⚠️ **Les salles se cadrent au centre, pas à 22 % du haut.** Ce décalage sert
   les portraits, où le visage est en haut ; sur une pièce il coupe le sol et
   garde le plafond. */
.esp-photo img,.mat-photo img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
/* ⚠️ Un `border-radius` ne rogne pas un enfant : sans `overflow`, les coins
   carrés de la photo dépassent de l'arrondi de la carte. */
.esp-photo,.mat-photo{overflow:hidden}
.prof-initiale{font-family:var(--font-serif);font-size:56px;color:rgba(255,255,255,.9)}
/* ⚠️ L'initiale est plus grande dans le rond de la fiche que dans la vignette.
   La taille venait d'une classe utilitaire posée dans le gabarit ; en factorisant
   le portrait, elle est tombée et l'initiale a rétréci sans que rien ne le dise.
   Elle appartient au contexte, pas à l'appel. */
.page-hero-visuel .prof-initiale{font-size:64px}
.prof-card h3{font-size:23px;margin:16px 0 2px}
.prof-prats{font-size:11.5px;color:var(--terracotta-2);margin-bottom:14px;font-weight:500}
.prof-role{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta);font-weight:600}
/* ⚠️ **Un `border-radius` ne rogne pas un enfant** : sans `overflow:hidden` les
   coins carrés de la photo dépassaient du rond. Le défaut a déjà été commis sur
   la fiche d'intervenante, et il est resté invisible tant que le bloc n'était
   qu'un dégradé. */
.page-hero-visuel img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero-visuel{
  width:180px;height:180px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* ⚠️ Sans `overflow:hidden`, les coins carrés d'une photo débordent du rond :
     le `border-radius` du parent ne rogne pas un enfant. Invisible tant que le
     bloc n'était qu'un dégradé. */
  overflow:hidden;
}
/* ⚠️ **Le filet de teinte, en anneau.** Sur la vignette de pratique il épouse
   une arche ; ici le visuel est un **rond**, donc le même vocabulaire de 4 px
   fait le tour complet — une bordure suit le `border-radius` toute seule.
   ⚠️ `--sc` est posé sur `.page-hero` par `data-sc`, pas écrit en dur : la teinte
   d'une pratique est une **donnée**, éditable depuis /admin.
   ⚠️ Le repli `var(--sc, transparent)` compte : la fiche d'une **intervenante**
   emprunte la même classe et ne pose pas `--sc`. Un repli sur une couleur de la
   charte lui aurait donné un anneau qui ne veut rien dire. */
.page-hero-visuel{border:4px solid var(--sc,transparent)}
.page-hero-visuel svg{width:74px;height:74px}

/* ---------- Découvrir : les espaces ---------- */
/* ⚠️ **Une carte par espace : image, nom et description ensemble.** Ils étaient
   séparés — une mosaïque en haut, une liste en bas — et il fallait retrouver
   dans le texte le nom de la photo qu'on venait de regarder. Une fois les
   vraies photos posées, les cartouches disparaîtront et plus rien ne les
   relierait. */
.lieu-h{font-family:var(--font-serif);font-weight:400;font-size:30px;margin:34px 0 18px}
.espaces-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 30px}
.espace-c h4{
  font-family:var(--font-serif);font-weight:400;font-size:22px;margin:16px 0 4px;
}
.espace-c p{margin:0;font-size:14.5px;color:var(--encre-60);max-width:52ch}
.esp-photo{
  aspect-ratio:3/2;border-radius:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(34,34,33,.07);
}
.esp-photo svg{width:62px;height:62px;opacity:.55}

/* Le matériel n'est pas un espace : son image et sa phrase vont ensemble. */
.lieu-materiel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:34px;align-items:center;margin-top:46px;
}
.mat-photo{
  aspect-ratio:3/2;border-radius:18px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(34,34,33,.07);
}
.mat-photo svg{width:62px;height:62px;opacity:.55}
.mat-txt h4{font-family:var(--font-serif);font-weight:400;font-size:24px;margin:0 0 8px}
.mat-txt p{margin:0;font-size:15px;color:var(--encre-60);max-width:60ch}
.fond-photo{
  aspect-ratio:4/5;border-radius:20px;display:flex;align-items:center;justify-content:center;
  /* Une photo aux coins carrés déborderait du rayon sans cela. */
  overflow:hidden;
}
.fond-txt h3{font-size:36px;margin:10px 0 6px;line-height:1.1}
.fond-cit{
  font-family:var(--font-serif);font-style:italic;font-size:26px;
  color:var(--terracotta-2);margin:14px 0 20px;line-height:1.35;
  padding-left:20px;border-left:2px solid var(--rose);
}
.fond-txt p{font-size:14.5px;color:var(--encre-60);margin-bottom:10px;max-width:640px}

/* Premiers pas */
.premiers-pas{
  display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;
  background:var(--accent-soft);border-radius:24px;padding:32px 36px;margin-top:34px;
}
.premiers-pas h3{font-size:28px;margin:8px 0 8px;line-height:1.15}
.premiers-pas p{font-size:14px;color:var(--encre-60);max-width:620px}

/* Nos valeurs */
.valeurs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px}
.val-cle{
  font-size:13.5px !important;font-weight:600;color:var(--terracotta-2) !important;
  margin-bottom:9px;line-height:1.4;
}

@media(max-width:1000px){
  .espaces-grille{grid-template-columns:1fr;gap:28px}
  .lieu-materiel{grid-template-columns:1fr;gap:20px}
}
@media(max-width:1000px){
  .fond-photo{max-width:250px;margin:0 auto}
  .valeurs-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .premiers-pas{padding:26px 22px;gap:20px}
  .valeurs-grid{grid-template-columns:1fr}
  .fond-txt h3{font-size:30px}
  .fond-cit{font-size:20px;padding-left:0;border-left:none;border-top:2px solid var(--rose);padding-top:14px}
}

.faq-groupe{margin-bottom:26px}
.faq-groupe:last-child{margin-bottom:0}
.faq-cat{
  font-family:var(--font-sans);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:600;color:var(--terracotta);
  margin-bottom:6px;padding-bottom:8px;border-bottom:1px solid rgba(196,122,83,.25);
}
.faq-item{border-bottom:1px solid rgba(34,34,33,.1)}
.faq-item:last-child{border:none}
.faq-btn{
  width:100%;text-align:left;background:none;border:none;padding:15px 30px 15px 0;
  font-family:var(--font-serif);font-size:19px;position:relative;
}
.faq-btn::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--terracotta);font-family:var(--font-sans);font-size:18px}
.faq-rep{display:none;font-size:13.5px;color:var(--encre-60);padding:0 0 16px}
@media(max-width:680px){
  .page-hero-visuel{width:120px;height:120px}
  .page-hero-visuel svg{width:52px;height:52px}
}
/* Les liens d'une fiche de professeure — Instagram, son site. */
.pf-lien{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pf-lien:hover{color:var(--terracotta-2)}