/* theragenda — feuille de style unique, écrite à la main.
   Charte : doc/charte-graphique.md (piste D5 « Océan et corail »).
   Les valeurs de la charte sont les variables ci-dessous : on change ici, pas dans les gabarits. */

/* ---------- Polices (hébergées sur le site, sous-ensembles latin et latin étendu, SIL OFL) ---------- */

@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("../fonts/fraunces-latin.069cb90e11a3.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: "Fraunces"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("../fonts/fraunces-latin-ext.a04d353989ad.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/nunito-sans-latin.e010923d59d4.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: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/nunito-sans-latin-ext.9359f35055cf.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --couleur-fond: #F4F8F7;
  --couleur-surface: #FFFFFF;
  --couleur-encre: #13282A;
  --couleur-texte-2: #43585A;
  --couleur-principale: #1D6A69;
  --couleur-principale-claire: #D3E6E4;
  --couleur-principale-pale: #C3E0DD;
  --couleur-principale-moyenne: #9CC6C2; /* étiquettes des thérapies, plus foncées que les compétences */
  --couleur-accent: #DB6F55;
  --couleur-accent-fonce: #B4513A; /* texte corail du contenu : contraste suffisant sur fond clair */
  --couleur-accent-pale: #F8E3DC;
  --couleur-bord: #CFDAD8;
  --couleur-bord-2: #DFE8E6;
  --couleur-ligne-sombre: #2E4547;
  --couleur-alerte: #8A2A20; /* rouge foncé : erreurs des formulaires, titre « Actions à prendre » */
  /* Teintes des cabinets dans le calendrier du thérapeute (fond, bord). */
  --agenda-1-fond: #D3E6E4; --agenda-1-bord: #1D6A69;
  --agenda-2-fond: #F8DDD5; --agenda-2-bord: #DB6F55;
  --agenda-3-fond: #F3E7C9; --agenda-3-bord: #B8912E;
  --agenda-4-fond: #E4DCEE; --agenda-4-bord: #6F5A9E;
  --agenda-5-fond: #D9E4F0; --agenda-5-bord: #3F6E99;
  --agenda-conge-fond: #E6ECEB;
  /* Suivi des rendez-vous (page « Patients ») : à venir vert, pas venu rouge, annulé violet. */
  --suivi-a-venir-fond: #D9ECD9; --suivi-a-venir-bord: #2B6A31;
  --suivi-pas-venu-fond: #F6DAD7; --suivi-pas-venu-bord: #B3261E;
  --suivi-annule-fond: #E4DCEE; --suivi-annule-bord: #5E4A8C;
  /* Validation d'une fiche (équipe) : retiré surligné en rouge, nouveau surligné en jaune. */
  --comparaison-retrait-fond: #F8CBC5;
  --comparaison-ajout-fond: #FFE98A;

  --police-titres: Fraunces, Georgia, serif;
  --police-texte: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon-carte: 12px;  /* cartes, encarts */
  --rayon-bloc: 8px;    /* champs, photos, petits blocs */
  --rayon-pilule: 8px;  /* boutons, puces, étiquettes : coins doux, plus de pilules */
  --ombre-flottante: 0 16px 40px rgba(19, 40, 42, 0.10);
  --largeur-contenu: 1160px;
  --espace-section: 72px;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 17px;
  line-height: 1.6;
  color: var(--couleur-encre);
  background: var(--couleur-fond);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: var(--police-titres);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
}
h1 { font-size: 56px; letter-spacing: -1px; line-height: 1.05; }
h2 { font-size: 40px; }
h3 { font-size: 22px; }
p { margin: 0; }

a { color: var(--couleur-principale); text-decoration: none; }
a:hover { color: var(--couleur-encre); text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--couleur-principale);
  outline-offset: 2px;
}

.texte-2 { color: var(--couleur-texte-2); }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Lien d'évitement : visible seulement au clavier. */
.evitement {
  position: absolute; left: 16px; top: -60px; z-index: 10;
  padding: 10px 16px; border-radius: var(--rayon-pilule);
  background: var(--couleur-encre); color: var(--couleur-fond); font-weight: 700;
}
.evitement:focus { top: 16px; }

/* ---------- Mise en page ---------- */

.contenu { max-width: var(--largeur-contenu); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--espace-section) 0; }
.section--blanche { background: var(--couleur-surface); }
.section--principale { background: var(--couleur-principale); color: var(--couleur-fond); }
.section--principale h2 { color: var(--couleur-fond); }

.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.pile--serree { gap: 10px; }
.ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.entre { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.centre { text-align: center; align-items: center; }

.surtitre {
  font-size: 14px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--couleur-principale);
}
.section--principale .surtitre, .bloc-sombre .surtitre { color: var(--couleur-principale-pale); }

/* ---------- Boutons et liens ---------- */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px; border: 1.5px solid var(--couleur-principale);
  border-radius: var(--rayon-pilule); background: var(--couleur-principale);
  color: var(--couleur-surface); font-weight: 700; font-size: 16px; text-decoration: none;
}
.bouton:hover { background: var(--couleur-encre); border-color: var(--couleur-encre); color: var(--couleur-surface); text-decoration: none; }
.bouton--secondaire { background: transparent; border-color: var(--couleur-bord); color: var(--couleur-encre); }
.bouton--secondaire:hover { background: var(--couleur-surface); border-color: var(--couleur-encre); color: var(--couleur-encre); }
.bouton--inverse { background: var(--couleur-fond); border-color: var(--couleur-fond); color: var(--couleur-encre); }
.bouton--inverse:hover { background: var(--couleur-surface); border-color: var(--couleur-surface); color: var(--couleur-encre); }
.bouton--contour-clair { background: transparent; border-color: var(--couleur-fond); color: var(--couleur-fond); }
.bouton--contour-clair:hover { background: var(--couleur-fond); color: var(--couleur-encre); }
.bouton--grand { min-height: 52px; padding: 0 28px; }

.lien-souligne {
  color: var(--couleur-encre); font-weight: 700;
  border-bottom: 2px solid var(--couleur-accent); padding-bottom: 1px;
}
.lien-souligne:hover { text-decoration: none; color: var(--couleur-principale); }

/* ---------- En-tête ---------- */

.entete { position: relative; background: var(--couleur-fond); }
.entete__barre {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px;
}
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--police-titres); font-weight: 600; font-size: 28px; letter-spacing: -0.5px;
  color: var(--couleur-encre);
}
.logo:hover { text-decoration: none; color: var(--couleur-encre); }
.logo__pastille {
  display: inline-flex; width: 36px; height: 36px; border-radius: 50%;
  background: var(--couleur-principale); color: var(--couleur-fond);
  align-items: center; justify-content: center;
}
.logo--pied { font-size: 24px; }

.nav-principale { display: flex; gap: 32px; align-items: center; font-weight: 600; font-size: 16px; }
.nav-principale a { color: var(--couleur-encre); }
.nav-principale a[aria-current="page"] { color: var(--couleur-principale); }

.entete__actions { display: flex; align-items: center; gap: 16px; }
.lien-therapeute {
  font-weight: 700; font-size: 14px; color: var(--couleur-encre); white-space: nowrap;
  border-bottom: 2px solid var(--couleur-accent); padding-bottom: 2px;
}

.langues {
  display: flex; gap: 2px; padding: 3px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--couleur-bord); border-radius: var(--rayon-pilule);
}
.langues a { padding: 5px 10px; border-radius: var(--rayon-pilule); color: var(--couleur-texte-2); }
.langues a[aria-current="page"] { background: var(--couleur-encre); color: var(--couleur-fond); }
.langues a:hover { text-decoration: none; color: var(--couleur-encre); }
.langues a[aria-current="page"]:hover { color: var(--couleur-fond); }

/* Menu mobile : un <details>, donc pas de JavaScript. */
.menu-mobile { display: none; }
.menu-mobile summary {
  list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--couleur-bord);
  border-radius: var(--rayon-pilule); font-weight: 700; font-size: 14px;
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary .libelle { display: inline; }
.menu-mobile__panneau {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; padding: 12px 24px 20px;
  background: var(--couleur-fond); border-top: 1px solid var(--couleur-bord-2);
  border-bottom: 1px solid var(--couleur-bord-2);
}
.menu-mobile__panneau a { padding: 10px 0; font-weight: 600; color: var(--couleur-encre); }
.menu-mobile__panneau .langues { align-self: flex-start; margin-top: 8px; }
.menu-mobile__panneau .langues a { padding: 5px 10px; }

/* ---------- Accroche ---------- */

.accroche { padding: 48px 0 56px; }
.accroche h1 { max-width: 14ch; }
.chiffres { display: flex; gap: 32px; flex-wrap: wrap; padding-top: 4px; }
.chiffres__valeur { font-family: var(--police-titres); font-weight: 600; font-size: 32px; line-height: 1; }
.chiffres__libelle { font-size: 14px; font-weight: 600; color: var(--couleur-texte-2); }

.illustration { position: relative; height: 420px; }
.illustration__fond {
  position: absolute; inset: 0 40px 40px 0;
  border-radius: 200px 200px 12px 12px; background: var(--couleur-principale-claire);
}
.illustration svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Recherche ---------- */

.recherche {
  margin-top: 44px; background: var(--couleur-surface); border-radius: var(--rayon-pilule);
  padding: 8px 8px 8px 24px; box-shadow: var(--ombre-flottante);
}
.recherche__champs { display: flex; gap: 8px; align-items: stretch; }
.recherche__champ { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.recherche__champ + .recherche__champ { padding-left: 16px; }
.recherche__champ svg { flex: none; color: var(--couleur-texte-2); }
.recherche__champ input {
  flex: 1; min-width: 0; height: 56px; border: 0; background: transparent; font-size: 17px;
}
.recherche__champ input::placeholder { color: var(--couleur-texte-2); }
.recherche__separateur { width: 1px; background: var(--couleur-bord-2); margin: 10px 0; }
.recherche .bouton { height: 56px; padding: 0 30px; }

.frequent { margin-top: 18px; font-size: 14px; color: var(--couleur-texte-2); }
.frequent a { color: var(--couleur-encre); font-weight: 600; border-bottom: 1px solid var(--couleur-bord); }
.frequent a:hover { text-decoration: none; border-color: var(--couleur-encre); }

/* ---------- Étapes ---------- */

.etape { display: flex; flex-direction: column; gap: 14px; border-top: 2px solid var(--couleur-encre); padding-top: 20px; }
.etape__numero { font-family: var(--police-titres); font-weight: 600; font-size: 40px; line-height: 1; color: var(--couleur-accent); }

/* ---------- Régions et cartes thérapeutes ---------- */

.puces { display: flex; flex-wrap: wrap; gap: 10px; }
.puces a, .puces button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border: 1px solid var(--couleur-bord); border-radius: var(--rayon-pilule);
  background: transparent; color: var(--couleur-encre); font-weight: 700; font-size: 16px;
}
.puces a:hover { text-decoration: none; border-color: var(--couleur-encre); }
.puces [aria-pressed="true"], .puces [aria-current="page"] {
  background: var(--couleur-encre); border-color: var(--couleur-encre); color: var(--couleur-fond);
}

.carte-therapeute {
  display: flex; flex-direction: column; gap: 18px; padding: 28px;
  background: var(--couleur-surface); border-radius: var(--rayon-carte);
}
.carte-therapeute h3 { font-size: 24px; }
.carte-therapeute__sous-titre { color: var(--couleur-texte-2); font-size: 15px; font-weight: 600; margin-top: 4px; }
.carte-therapeute p { color: var(--couleur-texte-2); font-size: 15px; line-height: 1.55; }
.carte-therapeute__pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; }

.initiales {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 180px;
  border-radius: var(--rayon-bloc); font-family: var(--police-titres); font-weight: 600; font-size: 40px;
  background: var(--couleur-principale-claire); color: var(--couleur-principale);
}
.initiales--chaude { background: #F6DDD3; color: #9A3F28; }
.initiales--neutre { background: #DCE3E6; color: #34506B; }
.initiales--grande { height: 320px; font-size: 72px; }
.carte-therapeute__photo { width: 100%; height: 180px; object-fit: cover; border-radius: var(--rayon-bloc); }
.fiche__photo { width: 100%; height: 320px; object-fit: cover; border-radius: var(--rayon-bloc); }

/* ---------- Problématiques ---------- */

.tuile {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 20px; border: 1.5px solid var(--couleur-bord-2); border-radius: var(--rayon-bloc);
  background: var(--couleur-fond); color: var(--couleur-encre); font-weight: 700; font-size: 16px;
}
.tuile:hover { text-decoration: none; border-color: var(--couleur-principale); color: var(--couleur-encre); }
.tuile__nombre { color: var(--couleur-texte-2); font-weight: 600; font-size: 13px; }
.tuile--pleine { background: var(--couleur-principale); border-color: var(--couleur-principale); color: var(--couleur-surface); }
.tuile--pleine:hover { background: var(--couleur-encre); border-color: var(--couleur-encre); color: var(--couleur-surface); }

/* ---------- Abécédaire ---------- */

.lettres { display: flex; flex-wrap: wrap; gap: 8px; }
.lettres a, .lettres span {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--rayon-bloc); font-family: var(--police-titres); font-weight: 600; font-size: 20px;
}
.lettres a { background: var(--couleur-surface); color: var(--couleur-encre); border: 1.5px solid var(--couleur-bord-2); }
.lettres a:hover { background: var(--couleur-principale); border-color: var(--couleur-principale); color: var(--couleur-surface); text-decoration: none; }
.lettres span { color: var(--couleur-bord); }

.section--blanche .lettres a, .en-tete-page .lettres a { background: var(--couleur-fond); }
/* Lettre active (filtre du blog) : après les règles de fond, pour les primer. */
.lettres a[aria-current="page"], .en-tete-page .lettres a[aria-current="page"] {
  background: var(--couleur-encre); border-color: var(--couleur-encre); color: var(--couleur-fond);
}

/* ---------- Témoignages ---------- */

.temoignage {
  margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 32px;
  background: var(--couleur-surface); border-radius: var(--rayon-carte);
}
.temoignage__guillemet { font-family: var(--police-titres); font-size: 56px; line-height: 0.6; color: var(--couleur-accent); }
.temoignage p { font-family: var(--police-titres); font-weight: 500; font-size: 20px; line-height: 1.45; }
.temoignage footer { font-size: 14px; color: var(--couleur-texte-2); }
.temoignage footer strong { color: var(--couleur-encre); }

/* ---------- Bloc sombre (appel aux thérapeutes) ---------- */

.bloc-sombre {
  background: var(--couleur-encre); color: var(--couleur-fond);
  border-radius: 16px; padding: 56px;
}
.bloc-sombre h2 { color: var(--couleur-fond); font-size: 38px; }
.bloc-sombre p { color: var(--couleur-principale-claire); }
.liste-coches li {
  display: flex; gap: 14px; align-items: center; padding: 18px 0; font-weight: 600;
  border-bottom: 1px solid var(--couleur-ligne-sombre);
}
.liste-coches li:last-child { border-bottom: 0; }
.liste-coches svg { flex: none; color: var(--couleur-principale-pale); }

/* ---------- Pages intérieures ---------- */

.fil-ariane { font-size: 14px; color: var(--couleur-texte-2); display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 0; }
.fil-ariane a { color: var(--couleur-texte-2); }
.fil-ariane [aria-current="page"] { color: var(--couleur-encre); font-weight: 600; }

.en-tete-page { padding: 24px 0 40px; }
.en-tete-page h1 { font-size: 48px; max-width: 20ch; }

.fiche { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.fiche__cote { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
/* Fiche thérapeute : les problématiques restent collées à l'en-tête (écart de la pile : 40 px). */
.fiche__entete + .fiche__etiquettes { margin-top: -24px; }
.encart {
  background: var(--couleur-surface); border-radius: var(--rayon-carte); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.encart h2, .encart h3 { font-size: 22px; }
.encart dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 15px; }
.encart dt { color: var(--couleur-texte-2); font-weight: 600; }
.encart dd { margin: 0; }

.prose { display: flex; flex-direction: column; gap: 20px; font-size: 18px; max-width: 70ch; }
.prose h2 { font-size: 32px; margin-top: 24px; }
.prose h3 { font-size: 22px; margin-top: 8px; }
.prose ul { list-style: disc; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }

.prose img { border-radius: var(--rayon-bloc); height: auto; }
/* Encadré : la citation Markdown (« > »), bouton « Encadré » de l'éditeur de contenu. */
.prose blockquote {
  margin: 0; padding: 16px 20px; border-radius: var(--rayon-bloc);
  background: var(--couleur-principale-claire); border-left: 4px solid var(--couleur-principale);
  display: flex; flex-direction: column; gap: 12px;
}
/* Couleurs du contenu (boutons « Texte corail » / « Texte vert » de l'éditeur). */
.prose .texte-corail { color: var(--couleur-accent-fonce); }
.prose .texte-vert { color: var(--couleur-principale); }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--couleur-bord-2); }
.prose h1 { font-size: 32px; margin-top: 24px; }
.prose hr { border: 0; border-top: 1px solid var(--couleur-bord-2); margin: 8px 0; }
.prose ol { padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }

.avis {
  display: inline-block; padding: 10px 16px; border-radius: var(--rayon-bloc);
  background: var(--couleur-principale-claire); color: var(--couleur-encre); font-weight: 600; font-size: 15px;
}

/* ---------- Thérapeutes : vue liste et bascule ---------- */

.bascule-vue { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--couleur-bord); border-radius: var(--rayon-pilule); padding: 3px; gap: 2px; font-size: 14px; }
.bascule-vue a { padding: 6px 14px; border-radius: var(--rayon-pilule); color: var(--couleur-texte-2); font-weight: 600; }
.bascule-vue a:hover { text-decoration: none; color: var(--couleur-encre); }
.bascule-vue a[aria-current="true"] { background: var(--couleur-encre); color: var(--couleur-fond); }
.liste-therapeutes { display: flex; flex-direction: column; gap: 20px; }
.ligne-therapeute {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: 28px;
  padding: 24px; background: var(--couleur-surface); border: 1px solid var(--couleur-bord-2); border-radius: var(--rayon-carte);
}
.ligne-therapeute__qui { display: flex; gap: 20px; align-items: flex-start; min-width: 0; }
.ligne-therapeute__qui picture, .ligne-therapeute__photo { flex: none; }
.ligne-therapeute__photo, .carte-therapeute__lien-photo { display: block; }
.ligne-therapeute__photo:hover, .carte-therapeute__lien-photo:hover { text-decoration: none; }
.ligne-therapeute__qui .carte-therapeute__photo, .ligne-therapeute__qui .initiales { width: 96px; height: 96px; flex: none; border-radius: var(--rayon-bloc); object-fit: cover; }
.ligne-therapeute h3 { font-size: 22px; }
/* Présentation courte (elle fait l'accroche, liste et cartes) : 4 lignes au plus, retours à la
   ligne gardés ; un texte plus long (écran étroit, début du Bonjour) est coupé avec « … ». */
.ligne-therapeute__courte, .carte-therapeute__courte {
  margin: 0; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
/* Fiche thérapeute : thérapies pratiquées, au-dessus des problématiques, en contour. */
.fiche__etiquettes { gap: 10px; }
.etiquettes--petites { gap: 6px; }
.etiquettes--petites > span, .etiquettes--petites > a, .etiquettes--petites .etiquettes__plus > summary { min-height: 28px; padding: 0 10px; font-size: 13px; }
.ligne-therapeute__cabinets { display: flex; flex-direction: column; gap: 16px; padding-left: 28px; border-left: 1px solid var(--couleur-bord-2); }
.ligne-therapeute__cabinet { display: flex; flex-direction: column; gap: 12px; }
.ligne-therapeute__cabinet + .ligne-therapeute__cabinet { padding-top: 16px; border-top: 1px dashed var(--couleur-bord-2); }
.ligne-therapeute__lieu { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ligne-therapeute__cabinet .bouton { align-self: flex-start; min-height: 40px; padding: 0 18px; font-size: 15px; }
.dispos { display: flex; flex-direction: column; gap: 8px; }
.dispos__titre { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--couleur-texte-2); }
.dispos__jours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dispos__jour {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1.5px solid var(--couleur-principale); border-radius: 8px;
  background: var(--couleur-principale-claire); color: var(--couleur-encre); text-decoration: none; line-height: 1.2;
}
.dispos__jour strong { font-size: 14px; }
.dispos__jour small { font-size: 12px; color: var(--couleur-texte-2); }
.dispos__jour:hover { background: var(--couleur-principale); color: var(--couleur-surface); text-decoration: none; }
.dispos__jour:hover small { color: var(--couleur-principale-claire); }

/* ---------- Blog ---------- */

.liste-articles { align-items: stretch; }
.carte-article {
  display: flex; flex-direction: column; gap: 12px; padding: 28px;
  background: var(--couleur-fond); border-radius: var(--rayon-carte);
}
.carte-article h2 { font-size: 24px; }
.carte-article h2 a { color: var(--couleur-encre); }
.carte-article h2 a:hover { color: var(--couleur-principale); text-decoration: none; }
.carte-article p { font-size: 15px; line-height: 1.55; flex: 1; }
.carte-article .lien-souligne { align-self: flex-start; font-size: 15px; }

/* ---------- Formulaires ---------- */

.formulaire { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-weight: 700; font-size: 15px; }
.champ input, .champ textarea {
  width: 100%; padding: 12px 16px; border: 1.5px solid var(--couleur-bord);
  border-radius: var(--rayon-bloc); background: var(--couleur-fond); font-size: 17px;
}
.champ textarea { resize: vertical; min-height: 160px; }
.champ input:focus, .champ textarea:focus { outline: 3px solid var(--couleur-principale); outline-offset: 0; border-color: var(--couleur-principale); }
.champ--erreur input, .champ--erreur textarea { border-color: #B23A2E; }
.champ__erreur, .erreur { color: var(--couleur-alerte); font-weight: 600; font-size: 15px; }
.erreur ul { padding: 0; }
.formulaire .bouton { align-self: flex-start; }

/* ---------- Espace thérapeute ---------- */

.barre-espace { background: var(--couleur-encre); color: #fff; font-size: 15px; }
.barre-espace__barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; flex-wrap: wrap; }
.barre-espace__qui { opacity: 0.9; }
.barre-espace__liens { display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap; }
.barre-espace a, .barre-espace .lien-bouton { color: #fff; text-decoration: none; font-weight: 600; opacity: 0.85; }
.barre-espace a:hover, .barre-espace a[aria-current="page"], .barre-espace .lien-bouton:hover { opacity: 1; text-decoration: underline; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--couleur-principale); cursor: pointer; text-decoration: underline; }
.espace { padding: 40px 0 var(--espace-section); }
/* Équipe : colonne des thérapeutes à gauche, l'espace du thérapeute choisi à droite. */
.espace--equipe { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
.espace__principal { min-width: 0; }
.controle { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px; border-radius: var(--rayon-bloc); background: var(--couleur-surface); border: 1px solid var(--couleur-bord-2); }
.controle__titre { font-size: 13px; font-family: var(--police-texte); text-transform: uppercase; letter-spacing: 0.06em; color: var(--couleur-texte-2); margin-bottom: 10px; }
.controle__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.controle__choix { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; color: var(--couleur-encre); }
.controle__choix span { font-weight: 700; font-size: 15px; }
.controle__choix small { font-size: 12px; color: var(--couleur-texte-2); }
.controle__choix:hover { background: var(--couleur-fond); }
.controle__choix[aria-current="true"] { background: var(--couleur-principale-claire); box-shadow: inset 3px 0 0 var(--couleur-principale); }
.barre-espace--controle { background: var(--couleur-accent); color: var(--couleur-encre); }
.barre-espace--controle a, .barre-espace--controle .lien-bouton { color: var(--couleur-encre); }
.tableau { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--couleur-texte-2); padding: 8px 12px; border-bottom: 1.5px solid var(--couleur-bord); }
.tableau td { padding: 12px; border-bottom: 1px solid var(--couleur-bord-2); vertical-align: top; }
.champ__aide { color: var(--couleur-texte-2); font-size: 14px; }
.champ--case label { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.champ--case input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--couleur-principale); }
.champ select { width: 100%; padding: 12px 16px; border: 1.5px solid var(--couleur-bord); border-radius: var(--rayon-bloc); background: var(--couleur-fond); font-size: 17px; }

/* Calendrier hebdomadaire : une grille CSS par jour, une ligne = le pas du thérapeute (15, 20 ou 30 min), --ligne de haut. */
.semaine-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.semaine-nav .bouton { min-height: 40px; padding: 0 16px; font-size: 15px; }
.semaine-nav__filtre { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; font-size: 15px; }
.legende { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; font-size: 14px; color: var(--couleur-texte-2); }
.legende__item { display: inline-flex; align-items: center; gap: 8px; }
.legende .plage { position: static; display: inline-block; width: 18px; height: 14px; padding: 0; min-height: 0; }
.semaine { --ligne: 11px; display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 0 4px; }
.jour__entete {
  height: 48px; margin: 0; display: flex; align-items: baseline; justify-content: center; gap: 6px;
  font-family: var(--police-texte); font-size: 14px; font-weight: 600; color: var(--couleur-texte-2);
}
.jour__numero { font-family: var(--police-titres); font-size: 24px; color: var(--couleur-encre); }
.jour--aujourdhui .jour__numero { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 50%; background: var(--couleur-encre); color: var(--couleur-fond); font-size: 20px; }
.jour__grille {
  display: grid; grid-template-rows: repeat(var(--lignes), var(--ligne));
  grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr)); gap: 0 2px;
  background: repeating-linear-gradient(to bottom, var(--couleur-bord-2) 0 1px, transparent 1px calc(var(--ligne) * var(--par-heure, 4)));
  border-top: 1px solid var(--couleur-bord);
}
.jour--passe .jour__grille { opacity: 0.75; }
.semaine__heures .jour__grille { background: none; border-top-color: transparent; }
.semaine__heure { font-size: 12px; color: var(--couleur-texte-2); transform: translateY(-7px); text-align: right; padding-right: 6px; }
.plage {
  position: relative; display: flex; flex-direction: column; gap: 1px; min-height: 0; overflow: hidden;
  margin: 1px 0; padding: 3px 6px; border-radius: 4px; font-size: 12px; line-height: 1.25;
  background: var(--fond, var(--agenda-1-fond)); border-left: 3px solid var(--bord, var(--agenda-1-bord)); color: var(--couleur-encre);
}
.plage--cabinet-1 { --fond: var(--agenda-1-fond); --bord: var(--agenda-1-bord); }
.plage--cabinet-2 { --fond: var(--agenda-2-fond); --bord: var(--agenda-2-bord); }
.plage--cabinet-3 { --fond: var(--agenda-3-fond); --bord: var(--agenda-3-bord); }
.plage--cabinet-4 { --fond: var(--agenda-4-fond); --bord: var(--agenda-4-bord); }
.plage--cabinet-5 { --fond: var(--agenda-5-fond); --bord: var(--agenda-5-bord); }
.plage--reservee, .plage--complete { background: var(--bord); color: var(--couleur-surface); }
.plage--complete { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.18) 6px 12px); }
.plage--conge { background: var(--agenda-conge-fond); border-left-color: var(--couleur-bord); color: var(--couleur-texte-2); background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(19, 40, 42, 0.05) 8px 16px); }
.plage--passee { opacity: 0.55; }
.plage--coupe-avant { border-top-left-radius: 0; border-top-right-radius: 0; }
.plage--coupe-apres { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.plage__heure { font-weight: 700; white-space: nowrap; }
.plage__texte { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plage__places, .plage__cabinet { opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plage__supprimer { position: absolute; top: 1px; right: 2px; margin: 0; }
.plage__supprimer button {
  width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.plage:hover .plage__supprimer button, .plage__supprimer button:focus-visible { opacity: 0.85; }
.plage__supprimer button:hover { background: rgba(19, 40, 42, 0.12); opacity: 1; }
.actions-agenda { margin-top: 40px; align-items: start; }
/* Calendrier vu par l'équipe : résumé de la fiche (thérapies | compétences), entre le
   calendrier et les outils. */
.resume-therapeute { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 40px; }
.resume-therapeute + .actions-agenda { margin-top: 24px; }
.resume-therapeute__colonne { padding: 20px; gap: 10px; }
.resume-therapeute__colonne h2 { font-size: 20px; }
.resume-therapeute__colonne .texte-2 { font-size: 14px; }
.formulaire-agenda { display: flex; flex-direction: column; gap: 14px; }
.formulaire-agenda h2 { font-size: 22px; }
.formulaire-agenda .texte-2 { font-size: 14px; }
.formulaire-agenda .champ input, .formulaire-agenda .champ select { font-size: 16px; padding: 10px 14px; }
.formulaire-agenda .bouton { align-self: flex-start; margin-top: 6px; }
.formulaire-agenda .bouton[disabled] { opacity: 0.5; cursor: not-allowed; }
/* « Séance en groupe » : une case présentée en bouton ; le nombre de places n'apparaît que coché. */
.bascule {
  position: relative; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  min-height: 40px; padding: 0 16px; border: 1.5px solid var(--couleur-bord); border-radius: var(--rayon-pilule);
  font-weight: 700; font-size: 15px; cursor: pointer; background: transparent; color: var(--couleur-encre);
}
.bascule input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.bascule span::before { content: "+"; display: inline-block; width: 1em; font-weight: 700; }
.bascule:hover { border-color: var(--couleur-encre); }
.bascule:has(input:checked) { background: var(--couleur-principale); border-color: var(--couleur-principale); color: var(--couleur-surface); }
.bascule:has(input:checked) span::before { content: "✓"; }
.bascule:has(input:focus-visible) { outline: 3px solid var(--couleur-principale); outline-offset: 2px; }
.champ--groupe:not(:has(input:checked)) + .champ--places { display: none; }
.jour__grille { position: relative; cursor: crosshair; }
.selection { position: absolute; left: 0; right: 0; z-index: 2; border: 2px dashed var(--couleur-principale); border-radius: 4px; background: rgba(29, 106, 105, 0.12); pointer-events: none; font-size: 12px; font-weight: 700; color: var(--couleur-principale); padding: 2px 6px; }
.jour__plus { display: none; }
@media (max-width: 900px) { .jour__plus { display: inline-flex; margin-left: auto; font-size: 14px; font-weight: 700; } .jour__grille { cursor: default; } }
.plage a { color: inherit; text-decoration: none; }
.plage a:hover { text-decoration: underline; }
/* Tableau de bord de l'équipe : navigation par jour, tableaux de chiffres, actions à prendre. */
.inline { display: inline; }
.bouton--petit { min-height: 36px; padding: 0 14px; }
.tableau--chiffres td:not(:first-child), .tableau--chiffres th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tableau__total td { border-top: 1.5px solid var(--couleur-bord); border-bottom: 0; }
.actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.actions li { padding: 12px 16px; border-radius: var(--rayon-bloc); background: var(--couleur-surface); border: 1px solid var(--couleur-bord-2); border-left: 4px solid var(--couleur-accent); }
.actions a { font-weight: 600; }
.titre-alerte { color: var(--couleur-alerte); }
/* Fiche publique du thérapeute : un bloc de textes par langue, un par cabinet ; comparaison publié / proposé. */
.formulaire--large { max-width: 760px; }
.bloc, .bloc-langue, .bloc-cabinet { border: 1px solid var(--couleur-bord-2); border-radius: var(--rayon-bloc); padding: 16px; margin: 0; display: flex; flex-direction: column; gap: 16px; background: var(--couleur-surface); }
.bloc legend, .bloc-langue legend, .bloc-cabinet legend { font-weight: 700; padding: 0 6px; }
.bloc-langue[hidden] { display: none; } /* langue décochée : son bloc disparaît (fiche.js) */
.photo-actuelle { width: 120px; height: 120px; object-fit: cover; border-radius: var(--rayon-bloc); display: block; }
.comparaison td:not(:first-child) { max-width: 40ch; }
.comparaison img { border-radius: var(--rayon-bloc); object-fit: cover; }
/* Publié / proposé : ce qui disparaît est surligné en rouge, ce qui est nouveau en jaune, sans
   soulignement ni barré (demande du 05/11/2026 : `del` et `ins` en auraient par défaut) ; la
   colonne et la légende disent ce que la couleur signifie. */
.comparaison__retrait, .comparaison__ajout {
  color: var(--couleur-encre); border-radius: 3px; padding: 0 2px; text-decoration: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.comparaison__retrait { background: var(--comparaison-retrait-fond); }
.comparaison__ajout { background: var(--comparaison-ajout-fond); }
.comparaison__resume { margin: 6px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--couleur-texte-2); }
.comparaison__legende { font-size: 14px; margin-bottom: 12px; }
.cases-competences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
/* Liste des thérapeutes : filtres repliés (un bouton chacun), le panneau s'ouvre en dessous. */
.filtres { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.filtre { min-width: 0; }
.filtre[open] { flex: 1 1 100%; }
.filtre__bouton { list-style: none; cursor: pointer; }
.filtre__bouton::-webkit-details-marker { display: none; }
.filtre__bouton::after { content: "▾"; font-size: 13px; transition: transform 0.15s; }
.filtre[open] > .filtre__bouton::after { transform: rotate(180deg); }
.filtre[open] > .filtre__bouton { border-color: var(--couleur-encre); }
.filtre__nombre {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 11px; background: var(--couleur-principale); color: var(--couleur-surface); font-size: 13px;
}
.filtre__panneau {
  margin: 12px 0 0; padding: 20px; border: 1px solid var(--couleur-bord); border-radius: var(--rayon-carte);
  background: var(--couleur-surface); display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.filtre__titre { font-weight: 700; font-size: 15px; padding: 0; }
.filtre__aide { font-size: 14px; margin: 0; }
/* Choix d'un filtre : de vraies cases à cocher (formulaire, clavier, lecteurs d'écran), mais
   c'est le bouton entier qui se touche ; la case elle-même est invisible (demande du 05/11/2026). */
.choix-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-bouton { position: relative; display: inline-flex; max-width: 100%; }
.choix-bouton input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* Intensité volontairement plus faible que le bouton plein « Appliquer le filtre », qui doit
   rester le plus visible du panneau : choisi = fond pâle, bord et ✓ de la couleur principale. */
.choix-bouton span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--couleur-bord); border-radius: var(--rayon-pilule);
  background: var(--couleur-surface); color: var(--couleur-texte-2); font-weight: 500; font-size: 15px;
  line-height: 1.3; user-select: none;
}
.choix-bouton:hover span { border-color: var(--couleur-principale); color: var(--couleur-encre); }
.choix-bouton input:checked + span { background: var(--couleur-principale-claire); border-color: var(--couleur-principale); color: var(--couleur-encre); }
.choix-bouton input:checked + span::before { content: "✓"; font-weight: 700; color: var(--couleur-principale); }
.choix-bouton input:focus-visible + span { outline: 3px solid var(--couleur-principale); outline-offset: 2px; }
.filtre__actions { gap: 16px; align-items: center; padding-top: 16px; border-top: 1px solid var(--couleur-bord-2); }
.filtres__actifs { font-size: 15px; margin: 0; }
.case-competence { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 500; }
.case-competence input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--couleur-principale); }
.chiffres__libelle a { color: inherit; }
.historique { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--couleur-texte-2); }
.historique time { color: var(--couleur-encre); font-weight: 600; }
.nuancier { border: 0; padding: 0; margin: 0; }
.nuancier legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.nuancier__teintes { display: flex; gap: 10px; }
.nuancier__teinte { position: relative; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; background: var(--fond); border-left: 6px solid var(--bord); box-shadow: inset 0 0 0 1px var(--couleur-bord-2); }
.nuancier__teinte input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.nuancier__teinte:has(input:checked) { outline: 3px solid var(--couleur-encre); outline-offset: 2px; }
.nuancier__teinte:has(input:focus-visible) { outline: 3px solid var(--couleur-principale); outline-offset: 2px; }

.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }
/* Étiquettes : les enfants directs de la rangée (les <span> internes du bouton « + n autres »
   ne sont pas des étiquettes). */
.etiquettes > span, .etiquettes > a, .etiquettes__plus > summary {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: var(--rayon-pilule); background: var(--couleur-principale-claire);
  color: var(--couleur-encre); font-weight: 600; font-size: 14px;
}
/* Thérapies : même teinte que les compétences, fond plus foncé (demande du 05/11/2026). Après la
   règle générale ci-dessus, sinon son fond l'emporterait (même spécificité). */
.etiquettes--therapies > span, .etiquettes--therapies > a, .etiquettes--therapies .etiquettes__plus > summary { background: var(--couleur-principale-moyenne); }
/* « + n autres » (liste des thérapeutes) : déplie sur place les étiquettes cachées, sans script
   (<details> + :has) ; toujours en fin de rangée ; « Réduire » une fois ouvert. */
.etiquettes > .etiquettes__suite { display: none; }
.etiquettes:has(> .etiquettes__plus[open]) > .etiquettes__suite { display: inline-flex; }
.etiquettes__plus { order: 1; }
.etiquettes__plus > summary { list-style: none; cursor: pointer; border: 1px dashed var(--couleur-principale); }
.etiquettes__plus > summary::-webkit-details-marker { display: none; }
.etiquettes__plus > summary:hover { border-style: solid; }
.etiquettes__plus[open] .etiquettes__plus-ferme, .etiquettes__plus:not([open]) .etiquettes__plus-ouvert { display: none; }

.agenda-provisoire {
  border: 2px dashed var(--couleur-bord); border-radius: var(--rayon-bloc); padding: 24px;
  text-align: center; color: var(--couleur-texte-2); font-size: 15px;
}

/* Agenda public d'un cabinet : les créneaux d'un jour, en pastilles. */
.jour-creneaux { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--couleur-bord-2); }
.jour-creneaux h3 { font-size: 20px; }
.jour-creneaux h3::first-letter { text-transform: uppercase; }
.creneaux { display: flex; flex-wrap: wrap; gap: 10px; }
.creneau {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 84px; min-height: 48px;
  padding: 6px 14px; border: 1.5px solid var(--couleur-principale); border-radius: var(--rayon-bloc);
  background: var(--couleur-principale-claire); color: var(--couleur-encre); font-weight: 700; font-size: 17px; line-height: 1.2; text-decoration: none;
}
.creneau small { font-size: 12px; font-weight: 600; color: var(--couleur-texte-2); }
a.creneau:hover { background: var(--couleur-principale); color: var(--couleur-surface); text-decoration: none; }
a.creneau:hover small { color: var(--couleur-principale-claire); }
.creneau--complet { border-color: var(--couleur-bord); background: var(--couleur-fond); color: var(--couleur-texte-2); text-decoration: line-through; }
.creneau--complet small { text-decoration: none; }
/* Vue calendrier : des semaines de lundi à dimanche, chaque colonne listant les séances du
   jour, les semaines les unes sous les autres. Sous 640 px, une semaine devient une pile de jours
   et les jours sans séance disparaissent. */
.semaine-publique { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--couleur-bord-2); }
.semaine-publique h3 { font-size: 20px; }
.semaine-publique__jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.semaine-publique__jour { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.semaine-publique__jour h4 { display: flex; gap: 6px; align-items: baseline; font-size: 14px; font-weight: 600; color: var(--couleur-texte-2); }
.semaine-publique__jour h4::first-letter { text-transform: uppercase; }
.semaine-publique__numero { font-size: 18px; font-weight: 700; color: var(--couleur-encre); }
.semaine-publique__jour--aujourdhui .semaine-publique__numero { color: var(--couleur-principale); }
.semaine-publique__jour--passe { opacity: 0.45; }
.semaine-publique__creneaux { display: flex; flex-direction: column; gap: 6px; }
.semaine-publique .creneau { min-width: 0; min-height: 40px; padding: 4px 6px; font-size: 15px; }
.semaine-publique__tiret { color: var(--couleur-bord); font-size: 18px; }
.recap { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 16px; }
.recap dt { color: var(--couleur-texte-2); font-weight: 600; }
.recap dd { margin: 0; }
/* Page « Patients » de l'espace : une fiche par patient, ses rendez-vous en étiquettes colorées
   (la couleur double un libellé écrit : elle ne porte jamais seule l'information). */
.fiche-patient { padding: 20px 0; border-top: 1px solid var(--couleur-bord-2); }
.fiche-patient__nom { font-size: 22px; }
.fiche-patient__contact { font-size: 15px; margin: 2px 0 12px; overflow-wrap: anywhere; }
.suivi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.suivi__rdv {
  display: inline-flex; gap: 6px; align-items: baseline; min-height: 32px; padding: 5px 10px;
  border: 1px solid var(--couleur-bord); border-radius: var(--rayon-pilule);
  background: var(--couleur-surface); color: var(--couleur-encre); font-size: 14px;
}
a.suivi__rdv:hover, button.suivi__rdv:hover { text-decoration: none; border-color: var(--couleur-encre); }
button.suivi__rdv { font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.suivi__rdv .suivi__qui { font-style: normal; font-weight: 600; font-size: 13px; color: var(--couleur-encre); }
.fiche-patient__therapeute { margin-top: 10px; }
.fiche-patient__qui { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
/* Page « Patients » de l'équipe classée par thérapeute : une section par thérapeute. */
.section-therapeute { margin-top: 32px; }
.section-therapeute__nom { font-size: 26px; margin-bottom: 4px; }
.section-therapeute__nom .lien-bouton { font-weight: inherit; }
.section-therapeute__nom .texte-2 { font-size: 18px; font-weight: 600; }
.section-therapeute .fiche-patient__nom { font-size: 20px; }
.suivi__rdv span { color: var(--couleur-texte-2); font-size: 13px; }
.suivi__rdv--a_venir { background: var(--suivi-a-venir-fond); border-color: var(--suivi-a-venir-bord); }
.suivi__rdv--pas_venu { background: var(--suivi-pas-venu-fond); border-color: var(--suivi-pas-venu-bord); }
.suivi__rdv--annule { background: var(--suivi-annule-fond); border-color: var(--suivi-annule-bord); }
.suivi__rdv--a_venir span { color: var(--suivi-a-venir-bord); }
.suivi__rdv--pas_venu span { color: var(--suivi-pas-venu-bord); }
.suivi__rdv--annule span { color: var(--suivi-annule-bord); }

/* Bandeau d'aperçu d'une fiche non publiée (visible par l'équipe seulement). */
.bandeau-prototype {
  background: var(--couleur-accent); color: var(--couleur-encre); font-weight: 700; font-size: 14px;
  text-align: center; padding: 8px 16px;
}

/* ---------- Bandeau de consentement ---------- */

.consentement {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 16px 0;
  background: var(--couleur-surface); border-top: 1px solid var(--couleur-bord-2);
  box-shadow: 0 -8px 30px rgba(19, 40, 42, 0.12); font-size: 15px;
}
.consentement[hidden] { display: none; }
.consentement__boite { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.consentement p { color: var(--couleur-texte-2); margin-top: 4px; max-width: 70ch; }
.consentement__boutons { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Pied de page ---------- */

.pied { border-top: 1px solid var(--couleur-bord-2); padding: 48px 0 32px; color: var(--couleur-texte-2); font-size: 14px; }
.pied__colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.pied__colonne { display: flex; flex-direction: column; gap: 8px; }
.pied__titre { font-weight: 700; color: var(--couleur-encre); }
.pied a { color: var(--couleur-texte-2); }
.pied__bas {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--couleur-bord-2); padding-top: 20px; margin-top: 32px;
}

/* Tableaux sur téléphone : une ligne devient une fiche, chaque valeur précédée de son intitulé
   (attribut data-label des cellules). */
@media (max-width: 640px) {
  .semaine-publique__jours { grid-template-columns: 1fr; }
  .semaine-publique__jour { flex-direction: row; align-items: flex-start; gap: 12px; }
  .semaine-publique__jour h4 { min-width: 76px; padding-top: 8px; }
  .semaine-publique__jour--vide, .semaine-publique__jour--passe { display: none; }
  .semaine-publique__creneaux { flex-direction: row; flex-wrap: wrap; }
  .semaine-publique .creneau { min-width: 76px; }
  .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: 100%; }
  .tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tableau tr { padding: 10px 14px; margin-bottom: 10px; border: 1px solid var(--couleur-bord-2); border-radius: var(--rayon-bloc); background: var(--couleur-surface); }
  .tableau td { padding: 4px 0; border: 0; overflow-wrap: anywhere; }
  .tableau td[data-label] { position: relative; padding-left: 124px; min-height: 1.6em; }
  .tableau td[data-label]::before {
    content: attr(data-label); position: absolute; left: 0; top: 6px; width: 116px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--couleur-texte-2);
  }
  .tableau td:not([data-label]) { padding-top: 8px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  :root { --espace-section: 48px; }
  h1 { font-size: 36px; }
  h2 { font-size: 30px; }
  .en-tete-page h1 { font-size: 34px; }
  .grille-3, .grille-2, .fiche, .resume-therapeute { grid-template-columns: 1fr; }
  .grille-2 { gap: 32px; }
  .grille-4, .pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-principale, .lien-therapeute { display: none; }
  .menu-mobile { display: block; }
  .entete__barre { min-height: 68px; gap: 12px; }
  .entete__actions { gap: 8px; }
  .logo { font-size: 24px; }
  .accroche { padding: 24px 0 40px; }
  .accroche h1 { max-width: none; }
  .illustration { height: 300px; }
  .recherche { border-radius: var(--rayon-carte); padding: 12px; }
  .recherche__champs { flex-direction: column; }
  .recherche__champ { padding: 0 12px; }
  .recherche__champ + .recherche__champ { padding-left: 12px; border-top: 1px solid var(--couleur-bord-2); }
  .recherche__separateur { display: none; }
  .recherche .bouton { width: 100%; }
  .bloc-sombre { padding: 32px 24px; border-radius: var(--rayon-carte); }
  .bloc-sombre h2 { font-size: 28px; }
  .fiche__cote { position: static; }
  .ligne-therapeute { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .ligne-therapeute__cabinets { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--couleur-bord-2); }
  .ligne-therapeute__qui .carte-therapeute__photo, .ligne-therapeute__qui .initiales { width: 72px; height: 72px; }
  /* Équipe sur petit écran : les thérapeutes en bandeau défilant au-dessus de l'espace. */
  .espace--equipe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .controle { position: static; max-height: none; padding: 10px; }
  .controle__liste { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .controle__choix { white-space: nowrap; width: auto; }
  /* Fiche thérapeute, colonnes empilées : le nom, puis photo et réservation, puis problématiques et textes.
     La colonne principale se fond dans la grille pour que son en-tête passe devant le panneau. */
  .fiche--cote-d-abord { gap: 32px; }
  .fiche--cote-d-abord > .fiche__principal { display: contents; }
  .fiche--cote-d-abord .fiche__entete { order: -2; }
  .fiche--cote-d-abord > .fiche__cote { order: -1; }
  .fiche--cote-d-abord .fiche__etiquettes { margin-top: 0; }
  .temoignage, .carte-therapeute, .encart { padding: 24px; }
  /* Calendrier : un jour sous l'autre, les plages en liste. */
  .semaine { display: flex; flex-direction: column; gap: 20px; }
  .semaine__heures { display: none; }
  .jour__entete { height: auto; justify-content: flex-start; padding-bottom: 6px; }
  .jour__grille { display: flex; flex-direction: column; gap: 4px; background: none; padding-top: 6px; }
  .jour__grille:empty::after { content: "—"; color: var(--couleur-texte-2); font-size: 14px; }
  .plage { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 32px 8px 10px; font-size: 14px; }
  .plage__supprimer { top: 6px; right: 6px; }
  .plage__supprimer button { opacity: 0.7; width: 24px; height: 24px; }
  .semaine-nav__filtre { margin-left: 0; }
}

@media (max-width: 480px) {
  .grille-4, .pied__colonnes { grid-template-columns: 1fr; }
  .chiffres { gap: 20px; }
  /* Sur téléphone, les langues passent dans le menu ; le bouton Menu n'a plus que son icône. */
  .entete__actions > .langues { display: none; }
  .menu-mobile summary { padding: 0 11px; }
  .menu-mobile summary .libelle { display: none; }
}

/* ---------- Stats (équipe) : menu déroulant, graphiques en barres, tableaux ---------- */

/* Menu déroulant « Stats » de la navigation de l'équipe : un <details>, pas de script. */
.menu-deroulant { position: relative; }
.menu-deroulant > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--couleur-encre); }
.menu-deroulant > summary::-webkit-details-marker { display: none; }
.menu-deroulant > summary.menu-deroulant__actif, .menu-deroulant[open] > summary { color: var(--couleur-principale); }
.menu-deroulant__fleche { font-size: 12px; transition: transform 0.15s; }
.menu-deroulant[open] .menu-deroulant__fleche { transform: rotate(180deg); }
.menu-deroulant__panneau {
  position: absolute; top: 100%; left: -16px; z-index: 6; min-width: 200px; margin-top: 10px; padding: 8px 0;
  display: flex; flex-direction: column; background: var(--couleur-surface); border: 1px solid var(--couleur-bord);
  border-radius: var(--rayon-bloc); box-shadow: var(--ombre-flottante);
}
.menu-deroulant__panneau a { padding: 10px 16px; font-weight: 600; color: var(--couleur-encre); white-space: nowrap; }
.menu-deroulant__panneau a:hover { background: var(--couleur-fond); text-decoration: none; }
.menu-deroulant__panneau a[aria-current="page"] { color: var(--couleur-principale); }

/* Graphique en barres : deux barres par période, hauteur en pourcentage du maximum (--hauteur). */
.barres { margin: 0; }
.barres__zone {
  display: flex; align-items: flex-end; gap: 4px; height: 220px; padding-bottom: 26px; box-sizing: border-box;
  border-bottom: 1px solid var(--couleur-bord);
}
.barres__groupe { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.barres__barre { flex: 1 1 0; max-width: 18px; height: var(--hauteur, 0%); min-height: 1px; border-radius: 3px 3px 0 0; background: var(--couleur-principale); }
.barres__barre--visites { background: var(--couleur-principale-moyenne); }
.barres__libelle { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; text-align: center; font-size: 11px; color: var(--couleur-texte-2); white-space: nowrap; overflow: hidden; }
.barres__legende { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--couleur-texte-2); }
.barres__puce { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--couleur-principale); vertical-align: middle; }
.barres__puce--visites { background: var(--couleur-principale-moyenne); }

.stats-section { margin-top: 40px; }
.stats-chiffres { gap: 24px 40px; }
.stats-chiffres .chiffres__libelle { max-width: 14em; }
.stats-detail > summary { cursor: pointer; display: inline-block; font-size: 15px; }
.stats-detail > summary::-webkit-details-marker { display: none; }
.stats-detail[open] > summary { margin-bottom: 12px; }
.stats-tableau { font-size: 14px; }
.stats-tableau td { padding: 8px 12px; }
.stats-tableau--etroit { max-width: 420px; }
.stats-chemin { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; }
.stats-lent { color: var(--couleur-accent); font-weight: 700; }
.stats-aide { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; max-width: 80ch; }
@media (max-width: 640px) {
  .barres__zone { height: 160px; }
  .barres__groupe:nth-child(even) .barres__libelle { visibility: hidden; }  /* 31 jours : un libellé sur deux */
  .stats-tableau--etroit { max-width: none; }
}

/* ---------- Éditeur de contenu (équipe, Toast UI Editor) ---------- */
.contenu-langues { display: flex; flex-wrap: wrap; gap: 6px; }
.contenu-langue {
  display: inline-block; min-width: 40px; padding: 4px 8px; text-align: center; font-size: 14px; font-weight: 700;
  border-radius: var(--rayon-pilule); background: var(--couleur-principale-claire); color: var(--couleur-encre);
}
.contenu-langue--absente { background: transparent; border: 1.5px dashed var(--couleur-bord); color: var(--couleur-texte-2); text-decoration: line-through; }
.contenu-langue:hover { background: var(--couleur-principale); color: var(--couleur-surface); text-decoration: none; }
/* Arborescence du site au-dessus des tableaux : un numéro par texte, repris dans les tableaux. */
.arbre, .arbre ul { list-style: none; margin: 0; padding: 0; }
.arbre ul { margin-left: 10px; padding-left: 20px; border-left: 1px solid var(--couleur-bord); }
.arbre li { position: relative; padding: 3px 0; }
.arbre ul > li::before { content: ""; position: absolute; left: -20px; top: 15px; width: 14px; border-top: 1px solid var(--couleur-bord); }
.arbre__noeud { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--couleur-encre); font-size: 15px; }
.arbre__noeud code, .contenu-slug { font-size: 14px; overflow-wrap: anywhere; }
a.arbre__noeud:hover { text-decoration: none; }
a.arbre__noeud:hover code { text-decoration: underline; color: var(--couleur-principale); }
.arbre__noeud--fixe { color: var(--couleur-texte-2); }
.arbre__numero {
  display: inline-block; min-width: 30px; padding: 1px 6px; text-align: center; font-size: 13px; font-weight: 800;
  border-radius: var(--rayon-pilule); background: var(--couleur-principale-claire); color: var(--couleur-encre);
}
.contenu-slug { color: var(--couleur-texte-2); }
/* Ligne visée depuis l'arbre (#contenu-N) : mise en évidence, sous l'en-tête. */
.tableau tr[id^="contenu-"], #contenu-blog { scroll-margin-top: 96px; }
.tableau tr:target > td { background: var(--couleur-principale-claire); }
.editeur-formulaire { max-width: 1000px; }
.editeur-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.editeur-actions .bouton { align-self: auto; }
.champ .editeur { width: 100%; }
/* Le texte dans l'éditeur ressemble à la page publiée : polices, couleurs, encadré. */
.editeur .toastui-editor-contents { font-family: var(--police-texte); font-size: 17px; color: var(--couleur-encre); }
.editeur .toastui-editor-contents h1, .editeur .toastui-editor-contents h2, .editeur .toastui-editor-contents h3 {
  font-family: var(--police-titres); color: var(--couleur-encre); border-bottom: 0;
}
.editeur .toastui-editor-contents blockquote {
  padding: 12px 16px; border-radius: var(--rayon-bloc);
  background: var(--couleur-principale-claire); border-left: 4px solid var(--couleur-principale);
}
.editeur .toastui-editor-contents blockquote p { color: var(--couleur-encre); }
.editeur .toastui-editor-contents .texte-corail { color: var(--couleur-accent-fonce); }
.editeur .toastui-editor-contents .texte-vert { color: var(--couleur-principale); }
.editeur .toastui-editor-toolbar-icons.editeur-outil, .editeur .editeur-outil {
  background: none; width: auto; min-width: 32px; padding: 0 6px; font-family: var(--police-texte);
  font-size: 17px; font-weight: 800; line-height: 1; color: var(--couleur-encre);
}
.editeur .editeur-outil--corail { color: var(--couleur-accent-fonce); }
.editeur .editeur-outil--vert { color: var(--couleur-principale); }
.editeur .editeur-outil--sans-couleur { text-decoration: line-through; }
.editeur .editeur-outil--encadre { font-size: 20px; color: var(--couleur-principale); }
/* Changements d'un enregistrement et différences du banc d'essai. */
.diff {
  margin: 0; padding: 12px; overflow-x: auto; max-height: 420px; font-size: 13px; line-height: 1.5;
  background: var(--couleur-surface); border: 1px solid var(--couleur-bord); border-radius: var(--rayon-bloc);
  white-space: pre-wrap; word-break: break-word;
}
.diff span { display: block; }
.diff__ajout { background: var(--couleur-principale-claire); }
.diff__retrait { background: var(--couleur-accent-pale); }
.diff__repere { color: var(--couleur-texte-2); }
.editeur-diff { margin-bottom: 20px; }

/* ---------- Plans du site en HTML (/sitemap.html) ---------- */
.plans { padding: 40px 0 64px; }
.plans > a { align-self: flex-start; }
.plans .arbre__noeud a { overflow-wrap: anywhere; }
.plans__adresses { margin: 4px 0 8px; font-size: 14px; }
.plans__adresses > summary { display: inline-block; cursor: pointer; }
.plans__adresses ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.plans__adresses a { color: var(--couleur-encre); overflow-wrap: anywhere; }

/* ---------- Mode maintenance (Réglages du site) ---------- */
.maintenance, .page-seule { min-height: 100vh; justify-content: center; gap: 20px; padding: 48px 0; max-width: 640px; }
.maintenance h1, .page-seule h1 { font-size: 40px; }
.maintenance__texte, .page-seule__texte { font-size: 19px; margin: 0; }
.bandeau-maintenance {
  padding: 10px 16px; text-align: center; font-size: 15px; font-weight: 700;
  background: var(--couleur-accent-fonce); color: var(--couleur-surface);
}
.bandeau-maintenance a { color: var(--couleur-surface); text-decoration: underline; margin-left: 8px; }

/* ---------- Auteur d'un article ---------- */
.article__signature { margin: 0; font-size: 16px; }
.article__signature a { color: inherit; text-decoration: underline; }
.auteur-encadre {
  display: flex; gap: 20px; align-items: flex-start; padding: 20px 24px; max-width: 70ch;
  background: var(--couleur-surface); border: 1px solid var(--couleur-bord-2); border-radius: var(--rayon-carte);
}
.auteur-encadre__photo { flex: none; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.auteur-encadre__texte { font-size: 16px; gap: 12px; }
.auteur-encadre__liens { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 15px; }
@media (max-width: 480px) { .auteur-encadre { flex-direction: column; } }
.carte-auteur__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.auteur-entete { display: flex; gap: 32px; align-items: center; }
.auteur-entete__photo { flex: none; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
@media (max-width: 640px) { .auteur-entete { flex-direction: column; align-items: flex-start; } .auteur-entete__photo { width: 112px; height: 112px; } }
/* Arborescence des adresses (Site › Arborescence du site). */
.arbre--adresses { font-size: 15px; }
.arbre--adresses .arbre__noeud code { font-size: 14px; }
.arbre__langues { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--couleur-principale); border: 1px solid var(--couleur-principale-claire); border-radius: var(--rayon-pilule); padding: 1px 6px; }

/* ---------- Plan du site public (/plan-du-site/) ---------- */
.plan-site, .plan-site ul { list-style: none; margin: 0; padding: 0; }
.plan-site > li { margin-bottom: 20px; }
.plan-site > li > a { font-family: var(--police-titres); font-size: 22px; font-weight: 600; }
.plan-site ul { margin: 8px 0 0 12px; padding-left: 20px; border-left: 2px solid var(--couleur-principale-claire); display: flex; flex-direction: column; gap: 6px; }
.plan-site ul ul { margin-top: 6px; }
.plan-site a { color: var(--couleur-encre); }
.plan-site a:hover { color: var(--couleur-principale); }
.plan-site__note { font-size: 14px; }
/* Titre de chaque cabinet dans « Texte de présentation » : bien visible (demande du 06/11/2026). */
.bloc-cabinet > legend { font-weight: 700; font-size: 18px; color: var(--couleur-principale); }