/* La page d'une praticienne. Tout vient des jetons de la charte, définis dans
   global.css — aucune couleur nouvelle. */

.praticienne { --prat-portrait: clamp(140px, 22vw, 220px); }

.prat-fiche { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem); max-width: 58rem; }

/* ---------- L'en-tête : son visage et son nom ---------- */

.prat-tete { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 2.6rem); align-items: center; }

.prat-portrait {
  flex: 0 0 auto; width: var(--prat-portrait); height: var(--prat-portrait);
  border-radius: 50%; object-fit: cover; box-shadow: var(--shadow);
}
.prat-portrait--vide {
  display: grid; place-items: center; background: var(--cream);
  font: 700 clamp(3rem, 8vw, 5rem) var(--font-title); color: var(--terra);
}

.prat-tete__texte { flex: 1 1 18rem; min-width: 0; }
/* Son nom EST le sujet de la page : il occupe la place d'un titre de page,
   pas celle d'une entrée de liste. */
.prat-tete h1 { font-size: var(--step-4); max-width: none; margin: .1em 0 .25em; }
.prat-tete .eyebrow { margin: 0; }

.prat-situation { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0; color: var(--muted); font-size: var(--step-0); text-align: left; }
.prat-metier { font-weight: 600; color: var(--ink); }
.prat-ville { display: inline-flex; align-items: center; gap: .35rem; }
.prat-ville svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.prat-description {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding-left: 1.2rem;
  border-left: 3px solid var(--terra);
  font-size: var(--step-1); line-height: 1.65; color: var(--ink);
  text-align: left; max-width: 60ch;
}

/* ---------- La joindre ---------- */

.prat-contact { margin-top: clamp(2rem, 5vw, 3rem); }
.prat-contact h2 { font-size: var(--step-2); margin: 0 0 1rem; }
.prat-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: 34rem; }
.prat-contact li { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: 1rem; align-items: baseline; padding: .7rem .9rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.prat-contact__quoi { font-size: var(--step--1); color: var(--muted); }
.prat-contact a { color: var(--terra-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.prat-contact a:hover { text-decoration: underline; }
.prat-contact__note { margin: 1rem 0 0; font-size: var(--step--1); color: var(--muted); max-width: 62ch; text-align: left; }

@media (max-width: 520px) { .prat-contact li { grid-template-columns: 1fr; gap: .15rem; } }

/* ---------- Ce que veut dire sa certification ---------- */

.prat-certif { margin-top: clamp(2.4rem, 5vw, 3.4rem); padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
.prat-certif h2 { font-size: var(--step-2); margin: 0 0 .8rem; }
.prat-certif p { max-width: 64ch; font-size: var(--step--1); line-height: 1.7; color: var(--muted); }
.prat-liens { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 0 !important; }

/* ---------- Les voisines ----------
   Un maillage interne, et pas un ornement : ces liens font que Google découvre
   toutes les pages en partant de n'importe laquelle, et gardent la visiteuse
   sur le site quand la personne qu'elle regardait ne lui convient pas. */

.prat-voisines { padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); }
.prat-voisines h2 { font-size: var(--step-2); margin: 0 0 1.1rem; }
.prat-voisines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.prat-voisines a { display: grid; gap: .1rem; padding: .8rem 1rem; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.prat-voisines a:hover { border-color: var(--terra); }
.prat-voisines b { font: 700 var(--step-0)/1.3 var(--font-title); color: var(--ink); }
.prat-voisines small { font-size: var(--step--1); color: var(--muted); }

/* ---------- L'invitation ---------- */

.prat-devenir { padding-block: clamp(2.6rem, 6vw, 4.5rem); background: linear-gradient(135deg, var(--cream), var(--teinte-107) 48%, var(--teinte-108)); border-top: 1px solid var(--line); }
.prat-devenir h2 { margin: 0 0 .5em; max-width: 18ch; font-size: var(--step-3); }
.prat-devenir .lead { max-width: 58ch; margin-bottom: 1.8rem; }

.button-secondary { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--terra-text); border-radius: 999px; padding: .8rem 1.3rem; background: transparent; color: var(--terra-text); text-decoration: none; font: 600 var(--step--1) var(--font-body); }
.button-secondary:hover { background: var(--terra-text); color:var(--texte-sur-couleur); }

/* ---------- La demande de mise en relation ----------
   Ses coordonnées ne sont nulle part sur cette page : c'est d'ici qu'on lui
   écrit. Le formulaire est donc l'élément principal de la fiche, pas un ajout
   en bas — il porte le fond crème et la bordure terracotta qui le disent. */

.prat-demande { margin-top: clamp(2.4rem, 5vw, 3.4rem); padding: clamp(1.5rem, 4vw, 2.4rem); background: var(--white); border: 2px solid var(--terra); border-radius: var(--radius); }
.prat-demande h2 { font-size: var(--step-2); margin: 0 0 .6rem; }
.prat-demande__intro { max-width: 60ch; font-size: var(--step--1); line-height: 1.7; color: var(--muted); }
.prat-demande__intro strong { color: var(--terra-text); }

.prat-demande__ok { margin: 0; padding: 1rem 1.2rem; border-radius: 14px; background: #eef5ee; color: #2f6b34; font-size: var(--step--1); line-height: 1.65; text-align: left; }
.prat-demande__erreur { margin: 0 0 1.2rem; padding: 1rem 1.2rem; border-radius: 14px; background: #fdf1e3; color: var(--teinte-3); font-size: var(--step--1); text-align: left; }

.prat-demande__form { display: grid; gap: 1rem; margin-top: 1.4rem; }
.prat-demande__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .prat-demande__deux { grid-template-columns: 1fr; } }

.prat-demande label { display: grid; gap: .3rem; font-size: var(--step--1); }
.prat-demande label > span { font-weight: 600; color: var(--ink); }
.prat-demande label > span em { font-weight: 400; font-style: normal; color: var(--muted); }
.prat-demande label > em { font-style: normal; color: var(--muted); line-height: 1.55; }

/* SÉLECTEUR LONG, ET C'EST DÉLIBÉRÉ : resources/css/forms.css est chargé APRÈS
   la feuille du module et impose son propre rembourrage avec une spécificité de
   (0,3,1). Voir la note du champ de recherche de l'annuaire — même piège. */
.praticienne .prat-demande .prat-demande__form input[type="text"],
.praticienne .prat-demande .prat-demande__form input[type="email"],
.praticienne .prat-demande .prat-demande__form input[type="tel"],
.praticienne .prat-demande .prat-demande__form select,
.praticienne .prat-demande .prat-demande__form textarea {
  width: 100%; height: auto; padding: .75rem .9rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  font: 400 var(--step--1)/1.5 var(--font-body); color: var(--ink);
}
.prat-demande textarea { resize: vertical; min-height: 8rem; }

.prat-demande__compte { font-variant-numeric: tabular-nums; font-size: .78rem; color: var(--muted); justify-self: end; }
.prat-demande__compte.court, .prat-demande__compte.long { color: var(--teinte-3); font-weight: 700; }

.prat-demande__accord { grid-template-columns: auto 1fr; align-items: start; gap: .7rem; }
.prat-demande__accord input { margin: .2rem 0 0; }
.prat-demande__accord span { font-weight: 400; color: var(--muted); line-height: 1.6; }

.prat-demande .button { justify-self: start; }

.prat-demande__note { margin: .4rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--muted); max-width: 66ch; text-align: left; }

/* ── LES COORDONNÉES DE LA FONDATRICE ────────────────────────────────
   Ce bloc remplace le formulaire de mise en relation, et sur une seule
   fiche. Le doré encadre, il n'écrit rien : à 1,91 de contraste sur le
   crème il serait illisible. Les mots restent dans l'encre, le lien dans
   le terracotta souligné de la charte. */
.prat-direct { display: grid; gap: .55rem; margin: 1rem 0 0; padding: 1rem 1.15rem; list-style: none;
  border: 1px solid var(--gold, var(--gold)); border-radius: 20px 6px 20px 6px; background: #fffdf8; }
.prat-direct li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.prat-direct__quoi { min-width: 11ch; color: var(--teinte-18); font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; }
.prat-direct a { color: var(--terra-text, var(--terra-text)); text-decoration: underline; text-underline-offset: 2px;
  word-break: break-word; }
.prat-direct a:is(:hover, :focus-visible) { color: var(--teinte-109); }
@media (max-width: 520px) { .prat-direct__quoi { min-width: 0; flex: 0 0 100%; } }

/* LE BOUTON À DROITE, LE PAVÉ SUR TOUTE LA LARGEUR (2 septembre 2026).
   Le formulaire est une grille : sans consigne, le bouton s'alignait au bord
   gauche comme les champs. « justify-self: end » le pousse à droite sans
   l'étirer — un bouton pleine largeur aurait l'air d'un bandeau.

   Le pavé de mentions portait « max-width: 66ch », la mesure de confort de
   lecture. Léon le veut sur toute la largeur : à cette taille de texte et sur
   trois lignes, la ligne longue reste tenable. */
.prat-demande__form .button { justify-self: end; }
.prat-demande__note { max-width: none; }
@media (max-width: 560px) {
  /* Sur un téléphone, un bouton collé à droite se rate du pouce : il reprend
     toute la largeur, comme partout ailleurs sur le site. */
  .prat-demande__form .button { justify-self: stretch; }
}