/* 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-accent: #DB6F55;
  --couleur-bord: #CFDAD8;
  --couleur-bord-2: #DFE8E6;
  --couleur-ligne-sombre: #2E4547;
  /* 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: #DCEFD8; --suivi-a-venir-bord: #2F6B2A;
  --suivi-pas-venu-fond: #F6DAD7; --suivi-pas-venu-bord: #B3261E;
  --suivi-annule-fond: #E4DCEE; --suivi-annule-bord: #5E4A8C;

  --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; }
.prose blockquote {
  margin: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--couleur-principale-claire);
  color: var(--couleur-texte-2); font-family: var(--police-titres); font-size: 20px;
}
.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 { flex: 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; }
.ligne-therapeute__accroche { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.etiquettes--petites { gap: 6px; }
.etiquettes--petites span, .etiquettes--petites a { 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: #8A2A20; 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; }
.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; }
/* 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; }
.cases-competences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.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; }
.etiquettes span, .etiquettes a {
  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;
}

.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 { 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; }
}