/* =============================================================================
   feti'i — Pages vitrine publiques
   Créée le 22/09/2026, d'après design/maquettes-pages-vitrine/onglet-pages.html

   Feuille séparée, servie telle quelle : elle est identique pour tous les
   studios, donc mise en cache une fois par visiteur plutôt que répétée dans
   chaque page. Palette et typographie reprises de app/index.php sans écart.
   ============================================================================= */

:root{
  --bg:#f5ebdd; --card:#fffcf7; --ink:#1f2541; --muted:#7a6f62;
  --primary:#244d4b; --primary-d:#162e2d; --accent:#c5613f;
  --line:#e3d7c4; --ok:#2d7a6b; --ok-bg:#dceae4; --r:18px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1020px;margin:0 auto;padding:0 22px}

/* ---------- bandeau d'aperçu, jamais vu par un visiteur ---------- */
.apercu{
  background:#5a4810;color:#fdf2da;font-size:.9rem;
  padding:11px 22px;text-align:center;
}
.apercu strong{color:#fff}
.apercu a{color:#fdf2da;margin-left:10px}

/* ---------- en-tête ---------- */
.site-head{background:var(--primary);color:#f5ebdd}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:66px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.site-head .nom{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.015em;
  font-size:1.42rem;color:#f5ebdd;text-decoration:none;margin-right:auto;
}
.site-head nav{display:flex;gap:4px;flex-wrap:wrap}
.site-head nav a{text-decoration:none;font-size:.95rem;font-weight:600;padding:7px 13px;border-radius:999px;color:#d8e2df}
.site-head nav a.on{background:rgba(245,235,221,.14);color:#fff}
.site-head nav a:focus-visible,.site-head .nom:focus-visible{outline:2px solid #f5ebdd;outline-offset:2px}

/* ---------- titres ---------- */
.hero{padding:36px 0 0}
.hero h1{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.015em;
  font-size:clamp(2.1rem,5vw,3.2rem);color:var(--primary);margin:0;line-height:1.06;
  text-wrap:balance;
}
.hero .accroche{font-size:clamp(1.1rem,2.2vw,1.3rem);max-width:640px;margin:20px 0 0;font-weight:500}

section{padding:34px 0 0}
h2{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.45rem,3vw,1.9rem);color:var(--primary);margin:0 0 6px;text-wrap:balance;
}
h3{font-size:1.5rem;color:var(--primary);margin:0 0 10px;line-height:1.25;
   font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.015em}
.sous{color:var(--muted);font-size:.96rem;margin:0 0 20px}
.sect{padding:34px 0 0}

.prose{max-width:680px;font-size:1.06rem}
.prose p{margin:0 0 15px}
.prose p:last-child{margin-bottom:0}

/* ---------- photos ---------- */
.ph{border-radius:var(--r);border:1px solid var(--line);background:#e6ddc9;width:100%;object-fit:cover}
.hero-ph{margin-top:26px;max-height:330px}
.acces-ph{margin-top:26px;max-height:240px}
.cote{display:grid;grid-template-columns:1.45fr 1fr;gap:28px;align-items:start}
.cote-ph{max-height:340px}
.bande{display:flex;gap:13px;margin-top:26px}
.bande .ph{flex:1 1 0;min-width:0;aspect-ratio:16/9}

/* ---------- planning ---------- */
.rythme{
  margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:2px 18px;display:grid;grid-template-columns:96px 1fr;
}
.rythme dt{
  font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--primary);padding:9px 0;align-self:center;
}
.rythme dd{margin:0;padding:9px 0;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.rythme dt:not(:first-of-type),
.rythme dt:not(:first-of-type) + dd{border-top:1px solid var(--line)}
.rythme dd span{font-variant-numeric:tabular-nums;font-size:.93rem;white-space:nowrap}
.rythme dd span + span::before{content:"·";margin-right:9px;color:var(--line);font-weight:800}

/* ---------- tarifs ---------- */
/* ⚠️ CHAQUE INFORMATION A SA PROPRE RANGÉE, PARTAGÉE PAR TOUTES LES CARTES
   (23/09/2026, demande de CE). Avant : chaque carte empilait ses éléments pour
   son compte, si bien qu'un libellé sur deux lignes — « Séance découverte
   (1 fois) » — poussait SON prix vers le bas pendant que les voisins restaient
   en haut. Les chiffres ne s'alignaient plus, et c'est précisément ce qu'on
   vient comparer sur une grille de tarifs.

   `subgrid` fait que les trois rangées appartiennent à la GRILLE DU DESSUS :
   la rangée des libellés prend la hauteur du plus long, et les prix tombent
   tous au même endroit, quoi qu'il arrive au-dessus d'eux. */
.tarifs{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.tarif{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:19px;
  display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:0}
/* ⚠️ `gap:0` est indispensable : sans lui, la carte hériterait des 13 px de
   gouttière de la grille parente et les ferait passer ENTRE son libellé, son
   prix et son détail. L'espacement interne reste porté par les marges. */
@supports not (grid-template-rows: subgrid){
  /* Repli pour un navigateur sans subgrid : on réserve deux lignes au libellé,
     ce qui aligne les prix dans tous les cas observés. Un libellé de trois
     lignes décalerait à nouveau, mais il n'y en a pas et la grille reste
     lisible. */
  .tarif{display:block}
  .tarif .t{min-height:2.5em}
}
.tarif .t{font-weight:800;font-size:1.02rem;line-height:1.25}
.tarif .p{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.8rem;color:var(--primary);margin:5px 0 0;
}
.tarif .d{color:var(--muted);font-size:.88rem;margin:8px 0 0}

/* ---------- adresse ---------- */
.lieu{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.lieu .n{font-weight:800;font-size:1.04rem;color:var(--primary)}
.lieu .a{color:var(--muted);font-size:.96rem;margin-top:2px}
.lieu .q{color:var(--muted);font-size:.89rem;margin-top:7px;max-width:460px}
.lieu .yaller{
  background:var(--primary);color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;
  padding:13px 20px;border-radius:12px;white-space:nowrap;
}
.lieu .yaller::before{content:"➤";margin-right:8px}
.lieu .yaller:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Signalement : présent et trouvable, mais discret. Il s'adresse au visiteur
   qui cherche à qui écrire, pas à celui qui lit la page. */
.pied .signaler{opacity:.72}
.pied .signaler:hover{opacity:1}

/* ---------- écrire au studio (22/09/2026) ---------- */
.ecrire{margin-top:34px}
.ecrire .recu,.ecrire .rate{
  border-radius:12px;padding:12px 16px;font-size:.95rem;line-height:1.5;margin:0 0 16px;
}
.ecrire .recu{background:#dceae4;color:#1d5548;border:1px solid #b6d4c9}
.ecrire .rate{background:#f3dcd2;color:#7a2e1d;border:1px solid #e6b3a4}
.ec-f{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
/* Le libellé AU-DESSUS de sa case, et une seule règle pour toutes les cases :
   même hauteur, même arrondi, même bordure. Sur la première version, chaque
   champ prenait la taille de son contenu et aucun ne ressemblait à son voisin. */
.ec-f label{display:block;font-weight:700;font-size:.92rem;margin:0 0 18px;color:var(--primary)}
.ec-f .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ec-f input,.ec-f textarea{
  display:block;width:100%;box-sizing:border-box;margin-top:7px;
  font:inherit;font-weight:400;font-size:1rem;line-height:1.5;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 15px;resize:vertical;
}
.ec-f input{height:50px}                 /* la même, quel que soit le contenu */
.ec-f textarea{min-height:130px}
.ec-f input::placeholder,.ec-f textarea::placeholder{color:#b0a493}
.ec-f input:focus,.ec-f textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,77,75,.12);
}
.ec-f .oblig{font-weight:700;font-size:.7rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.05em;margin-left:4px}
.ec-b{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:4px}
.ec-b .rgpd{color:var(--muted);font-size:.86rem}
.ec-f button{
  background:var(--primary);color:#fff;border:none;border-radius:12px;
  min-height:50px;padding:0 34px;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
}
.ec-f button:hover{background:var(--primary-d)}
/* ⚠️ Le pot de miel doit rester DANS le document et focalisable par un robot,
   donc pas de `display:none` que certains détectent. Il sort de l'écran. */
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:620px){ .ec-f .duo{grid-template-columns:1fr} }

/* ============================================================================
   RÉSERVATION D'UNE SÉANCE D'ESSAI (23/09/2026)
   Le formulaire reprend `.ec-f` : mêmes champs, mêmes hauteurs, même bouton.
   Seule la liste des séances lui est propre.
   ============================================================================ */
.es-f{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.es-f label{display:block;font-weight:700;font-size:.92rem;margin:0 0 18px;color:var(--primary)}
.es-f .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.es-f input[type=text],.es-f input[type=email]{
  display:block;width:100%;box-sizing:border-box;margin-top:7px;height:50px;
  font:inherit;font-weight:400;font-size:1rem;line-height:1.5;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;
}
.es-f input::placeholder{color:#b0a493}
.es-f input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(36,77,75,.12)}
.es-f .oblig{font-weight:700;font-size:.7rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.05em;margin-left:4px}
.es-f button{
  background:var(--primary);color:#fff;border:none;border-radius:12px;
  min-height:50px;padding:0 34px;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;
}
.es-f button:hover{background:var(--primary-d)}

/* Des cases, comme le kiosque : chacune tient seule et se touche au doigt.
   ⚠️ `auto-fill` et pas `auto-fit` : avec deux séances seulement, `auto-fit`
   les étirerait sur toute la largeur et chacune ferait 400 px de large pour
   trois mots. */
.es-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;margin:0 0 22px}
/* Le bouton radio sort de l'écran plutôt que de disparaître : un `display:none`
   le rendrait inatteignable au clavier et aux lecteurs d'écran. */
.es-c input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.es-c{display:block;margin:0;cursor:pointer}
.es-b{display:block;background:#fff;border:1.5px solid var(--line);border-radius:14px;
  padding:13px 15px;transition:border-color .12s,background .12s}
.es-c:hover .es-b{border-color:#cdbfa8}
/* Sélection : bordure épaissie ET fond teinté. La couleur seule ne suffit pas,
   elle serait invisible pour qui ne distingue pas le vert du beige. */
.es-c input:checked + .es-b{border-color:var(--primary);border-width:2px;
  background:rgba(36,77,75,.05);padding:12px 14px}
.es-c input:focus-visible + .es-b{box-shadow:0 0 0 3px rgba(36,77,75,.2)}
.es-q{display:block;font-weight:800;font-size:.95rem;color:var(--primary)}
.es-h{display:block;font-weight:700;font-size:.92rem;color:var(--ink);margin-top:1px}
.es-t{display:block;font-size:.86rem;color:var(--ink);margin-top:5px}
.es-l{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
/* Les places ne s'affichent qu'à trois ou moins : « 12 places » ne presse
   personne, « 2 places » fait décider. Au-delà, le chiffre est du bruit. */
.es-p{display:inline-block;margin-top:7px;font-size:.74rem;font-weight:700;
  color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px}
.es-cgv{margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted)}

/* Panneau « Votre réservation », affiché quand on arrive avec son code.
   Filet à gauche plutôt que fond coloré : il se distingue du formulaire sans
   prendre le registre d'une alerte. */
.es-mien{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:var(--r);padding:20px 22px;margin:0 0 14px}
.es-mien-t{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.es-mien-q{margin:5px 0 0;font-size:1.12rem;font-weight:800;color:var(--primary);line-height:1.3}
.es-mien-a{margin:10px 0 0;font-size:.9rem;line-height:1.55;color:var(--ink)}
@media(max-width:620px){ .es-f .duo{grid-template-columns:1fr} .es-f{padding:20px 18px} }

/* Page de démonstration : l'itinéraire est remplacé par une mention, pas par un
   bouton mort. Elle se lit comme une information, pas comme un lien en panne. */
.yaller.inerte{
  background:transparent;color:var(--muted);border:1px dashed var(--line);
  cursor:default;font-weight:600;
}

/* ---------- renvois entre pages ----------
   Les deux autres pages, en bas de chacune. Marge haute plus généreuse : ces
   blocs closent la lecture, ils ne doivent pas sembler faire partie de la
   dernière section. (22/09 : avant, la page « Venir » ne renvoyait nulle part
   et le lecteur arrivait dans un cul-de-sac au moment précis où il avait fini
   de lire, c'est-à-dire au meilleur moment pour l'emmener ailleurs.) */
.renvois{display:block;margin-top:38px;padding-top:6px;border-top:1px solid var(--line)}
.renvoi{
  margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--accent);border-radius:var(--r);padding:22px 24px;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.renvoi b{
  display:block;font-size:1.14rem;color:var(--primary);
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
}
.renvoi p{margin:5px 0 0;color:var(--muted);max-width:500px}
.renvoi a{color:var(--primary);font-weight:800;text-decoration:none;white-space:nowrap}
.renvoi a:hover{text-decoration:underline}

/* ---------- pied ---------- */
.pied{margin-top:60px;background:var(--primary-d);color:#a9bdb8;padding:32px 0}
.pied .wrap{display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap;font-size:.9rem}
.pied a{color:#d8e2df}
.pied .par{text-align:right}
.pied .w{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
  color:#f5ebdd;font-size:1.02rem;text-decoration:none;
}
.pied .reprise{display:block;margin-top:4px;font-size:.82rem;color:#8aa5a0}

@media (max-width:760px){
  .cote{grid-template-columns:1fr;gap:20px}
  .cote-ph{max-height:none}
  /* Sur téléphone la bande défile au doigt : empilées, trois photos font un
     tunnel qu'il faut traverser avant d'atteindre la suite de la page. */
  .bande{
    overflow-x:auto;scroll-snap-type:x mandatory;gap:11px;
    margin-inline:-22px;padding:0 22px 4px;scrollbar-width:none;
  }
  .bande::-webkit-scrollbar{display:none}
  .bande .ph{flex:0 0 76%;scroll-snap-align:start}
  .pied .par{text-align:left}
}
@media (max-width:620px){
  .rythme{grid-template-columns:1fr;padding:4px 16px}
  .rythme dt{padding:12px 0 0;border-top:1px solid var(--line)}
  .rythme dt:first-of-type{border-top:0}
  .rythme dt + dd,
  .rythme dt:not(:first-of-type) + dd{border-top:0;padding-top:5px}
  .site-head .nom{width:100%;font-size:1.2rem;margin-bottom:2px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}