/* ════════════════════════════════════════════════════════════
   FICHE — la page d'une pratique (single-pratique.php).
   Repris de _generation/gabarit.html et du CSS des blocs de contenu
   de _generation/generer.py. Chargé uniquement sur ces pages.
   ════════════════════════════════════════════════════════════ */

/* En-tête de fiche : portrait, identité, contacts, actions. */
.fiche{ background:linear-gradient(180deg,var(--bleu-brume) 0%,var(--blanc) 100%); }
.fiche__grille{ display:grid; gap:2rem; padding-block:2rem 3rem; }
@media (min-width:768px){
  .fiche__grille{ grid-template-columns:240px 1fr; gap:3rem; align-items:start; padding-block:2.5rem 3.5rem; }
}
.fiche__portrait{
  width:200px; height:200px; border-radius:50%; object-fit:cover;
  filter:grayscale(1);   /* le noir et blanc est la signature du centre */
  margin-inline:auto;
}
@media (min-width:768px){ .fiche__portrait{ width:240px; height:240px; margin-inline:0; } }

.fiche__categorie{
  display:inline-block; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bleu-moyen); border:1px solid var(--bleu-clair);
  padding:.3rem .8rem; border-radius:2px; margin-bottom:1rem;
  text-decoration:none; margin-right:.4rem;
}
a.fiche__categorie:hover{ background:var(--bleu-moyen); color:#fff; border-color:var(--bleu-moyen); text-decoration:none; }
.fiche h1{ font-family:var(--serif); font-size:clamp(1.9rem,4.5vw,2.6rem); color:var(--bleu); margin-bottom:1.75rem; }
/* L'intitulé vit DANS le h1 : rendu identique à l'ancien paragraphe (police du texte, même
   graisse, même interligne), mais il fait partie du titre que Google lit. */
.fiche__discipline{ display:block; font-family:var(--sans); font-weight:300; font-size:1.15rem;
  line-height:1.75; color:var(--gris); margin:.35rem 0 0; }
.fiche__precision{ font-size:.92rem; color:var(--gris); margin:-1.25rem 0 1.75rem; }

.coordonnees{ list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:.55rem; }
.coordonnees li{ display:flex; align-items:center; gap:.65rem; font-size:.98rem; }
.coordonnees svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--bleu-moyen); stroke-width:1.6; }
.fiche__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Corps de la présentation : mesure de lecture limitée, aligné à gauche.
   Sur l'ancien site ces textes étaient centrés sur toute la largeur,
   ce qui les rendait pénibles à lire. */
.presentation{ max-width:66ch; margin-inline:auto; }
.presentation h2{ font-family:var(--serif); font-size:1.5rem; color:var(--bleu); margin:2.5rem 0 1rem; }
.presentation h2:first-child{ margin-top:0; }
.presentation h3{ font-family:var(--serif); font-size:1.15rem; color:var(--bleu); margin:2rem 0 .75rem; }
.presentation p{ margin:0 0 1.25rem; }
.presentation p:last-child{ margin-bottom:0; }

/* Listes : un tiret pour les énumérations, un numéro cerclé pour les étapes. */
.presentation ul, .presentation ol{ margin:0 0 1.25rem; padding-left:0; list-style:none; }
.presentation li{ margin-bottom:.45rem; }
.presentation ul li{ display:flex; gap:.6rem; }
.presentation ul li::before{ content:"—"; color:var(--bleu-clair); flex:none; }
.presentation ol{ counter-reset:etape; }
.presentation ol li{ counter-increment:etape; display:flex; gap:.85rem; }
.presentation ol li::before{
  content:counter(etape); flex:none; width:1.6rem; height:1.6rem; margin-top:.25rem;
  border:1px solid var(--bleu-clair); border-radius:50%; color:var(--bleu-moyen);
  font-size:.8rem; display:grid; place-items:center;
}

/* Une longue énumération (les motifs de consultation de Nelly) se parcourt mieux sur deux colonnes. */
@media (min-width:640px){
  .presentation .motifs__liste{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem 2rem; }
  .presentation .motifs__liste li{ margin-bottom:0; font-size:.98rem; }
}

/* Citation — plusieurs praticiens en ont une dans leur texte. */
.citation{
  border-left:2px solid var(--bleu-clair); padding:.25rem 0 .25rem 1.5rem;
  margin:2rem 0; font-family:var(--serif); font-size:1.2rem;
  font-style:italic; color:var(--bleu);
}
.citation cite{ display:block; font-family:var(--sans); font-size:.85rem; font-style:normal; color:var(--gris); margin-top:.5rem; }

/* Blocs d'information dans le texte : horaires, tarifs, notes, signature. */
.infos-pratiques{
  background:var(--creme); border-left:2px solid var(--bleu-clair);
  padding:1rem 1.25rem; margin:0 0 1.25rem; font-size:.98rem; color:var(--gris);
}
.tarifs{ margin:0 0 1.5rem; display:grid; gap:.5rem; }
.tarifs div{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem;
  border-bottom:1px solid #e8eced; padding-bottom:.5rem; font-size:.98rem;
}
.tarifs dt{ margin:0; }
.tarifs dd{ margin:0; color:var(--bleu); text-align:right; }
.note{ font-size:.9rem; color:var(--gris); margin:-.5rem 0 1.5rem; }
.signature{ margin-top:2rem; color:var(--gris); }
.signature strong{ color:var(--encre); font-weight:500; }

/* Bandeau d'informations pratiques (fond crème). */
.motifs{ background:var(--creme); }

.titre-section{ font-size:clamp(1.5rem,3.2vw,2rem); }
.titre-section::after{ margin:1.25rem auto 2rem; }

/* Informations pratiques de la fiche : lieu, contact, mentions professionnelles. */
.infos-fiche{ display:grid; gap:2rem; max-width:900px; margin-inline:auto; }
@media (min-width:768px){ .infos-fiche{ grid-template-columns:1fr 1fr; gap:3rem; } }
.infos-fiche h3{ font-family:var(--serif); font-size:1.15rem; color:var(--bleu); margin-bottom:.75rem; }
.infos-fiche p{ margin:0 0 .5rem; }
.mentions-pro{ font-size:.9rem; color:var(--gris); }
.mentions-pro dt{ font-weight:400; color:var(--encre); }
.mentions-pro dd{ margin:0 0 .6rem; }

/* Retour vers la catégorie, pour ne pas laisser la fiche en cul-de-sac. */
.retour{ background:var(--bleu-brume); text-align:center; }
.retour p{ max-width:52ch; margin:0 auto 1.5rem; color:var(--gris); }