@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

/* EMDR — design system « Présence humaine » (thème clair par défaut, sombre secondaire). */

:root {
  /* Fonds / surfaces */
  --color-white:#FFFFFF; --color-background:#FFFFFF; --color-background-soft:#FBFAF8;
  --color-surface:#FFFFFF; --color-surface-warm:#FDF9F6;
  /* FOND DE PAGE DU BACKOFFICE, distinct du blanc des surfaces.

     Pourquoi un jeton de plus plutôt que changer --color-background : celui-ci
     peint aussi .emdr-stage — l'écran que regarde le patient pendant que le point
     balaie — et le site public. Un gris derrière la stimulation n'aurait aucun
     sens, et la page d'accueil n'a pas demandé à changer. Le nouveau jeton n'est
     appliqué qu'à body.bo (assets/app.css) : la séparation entre la barre, les
     cartes et la page s'arrête exactement là où commence le reste du produit.

     #F2EEEA se tient sur la même famille chaude que --color-border (#E8E1DC) : le
     fond n'est pas un gris neutre posé sur une palette qui ne l'est pas. */
  --color-app-bg:#EDE7E1;
  /* Aubergine (fonctionnel principal) */
  --color-primary:#4D4254; --color-primary-hover:#403747; --color-primary-active:#352D3B; --color-primary-soft:#EEEAF1;
  /* Lavande / corail / sable / sauge */
  --color-lavender:#AAA0BC; --color-lavender-light:#E9E5EF; --color-lavender-soft:#F5F2F7;
  --color-coral:#D8A7A0; --color-coral-hover:#CA928A; --color-coral-light:#F2DEDA; --color-coral-soft:#FCF3F1;
  --color-sand:#E8D8C8; --color-sand-light:#F5ECE3;
  --color-sage:#A8BEB1; --color-sage-light:#E5EEE9;
  /* Texte / bordures */
  --color-text:#39363C; --color-text-secondary:#777078; --color-text-muted:#918E9C;
  --color-border:#E8E1DC; --color-border-light:#F0EBE7; --color-divider:#EEE9E5;
  /* Statuts */
  --color-success:#78998A; --color-success-background:#E8F1EC;
  --color-warning:#C2955D; --color-warning-background:#F8EFE2;
  --color-error:#B96F68;   --color-error-background:#F8E8E6;
  --color-info:#81749B;    --color-info-background:#EEEAF4;

  /* ── Statuts, seconde génération : le triplet fond / bordure / texte ───────
     On reprend de Vuesy la STRUCTURE (-bg-subtle, -border-subtle,
     -text-emphasis) et rien d'autre. Le template travaille à
     $min-contrast-ratio: 1.7 et pose du blanc sur son jaune #f7cc53, soit
     environ 1,8:1 ; sur un produit qui manipule des données de santé, c'est
     non. Les valeurs ci-dessous sont donc recalculées, pas recopiées :

       · -bg-subtle CLAIR reprend à l'identique les fonds doux déjà à l'écran
         (--color-*-background, --color-primary-soft). Adopter le triplet ne
         déplace donc aucun badge existant : c'est une extension, pas un
         remplacement.
       · -text-emphasis CLAIR est la teinte pleine ramenée à L = 32 % en HSL,
         saturation × 1,35 — le MÊME geste pour les cinq rôles, d'où une
         famille qui se tient au lieu de cinq arbitrages séparés.
       · en SOMBRE, -bg-subtle et -text-emphasis ÉCHANGENT leurs valeurs.
         L'échange est littéral, pas analogue : le ratio mesuré est par
         construction le MÊME dans les deux thèmes, et aucune règle dédiée
         n'est nécessaire pour qu'un badge reste lisible de nuit. C'est le
         meilleur acquis du template, et EMDR ne l'avait qu'à moitié (fonds
         inversés, mais couleurs de texte laissées en teinte pleine).

     Texte sur fond, mesuré (identique clair et sombre) : primaire 7,43 ·
     succès 5,94 · avertissement 5,50 · danger 7,75 · information 7,96.
     Plancher visé : 4,5:1. Le plus juste, l'avertissement, garde 22 % de
     marge — de quoi survivre à un réglage de teinte sans repasser sous la
     barre. Les -border-subtle sont des bordures, pas du texte : elles ne
     sont pas soumises au 4,5:1. */
  --color-primary-bg-subtle:#EEEAF1; --color-primary-border-subtle:#A6A1AA; --color-primary-text-emphasis:#55445F;
  --color-success-bg-subtle:#E8F1EC; --color-success-border-subtle:#B4C6BE; --color-success-text-emphasis:#426153;
  --color-warning-bg-subtle:#F8EFE2; --color-warning-border-subtle:#DEC6A6; --color-warning-text-emphasis:#835720;
  --color-error-bg-subtle:#F8E8E6;   --color-error-border-subtle:#D9B1AD;   --color-error-text-emphasis:#7A3029;
  --color-info-bg-subtle:#EEEAF4;    --color-info-border-subtle:#BAB3C9;    --color-info-text-emphasis:#4C4064;

  /* ── Les trois variables fantômes, enfin déclarées ────────────────────────
     Elles étaient APPELÉES sans être définies nulle part.

     --color-text-soft : cinq appels SANS valeur de repli (quatre dans
     app.css, un dans un style en ligne de admin/users.php). Un var() qui ne
     résout pas rend la déclaration invalide à la valeur calculée : `color`
     retombe alors sur l'héritage, et ces textes s'affichaient donc en
     --color-text, pleine force, là où on voulait les adoucir. Le dépôt
     l'avait remarqué sans le corriger (voir la note de admin/journal.php).
     On la DÉCLARE plutôt que de la supprimer : les cinq appels vivent dans
     des fichiers qui ne sont pas de ce lot, et l'intention — un gris entre
     --color-text et --color-text-secondary — est juste. 6,71:1 sur blanc.

     --color-accent et --color-surface-sunken : appelées AVEC repli, donc
     invisibles à l'œil. On les déclare pour la raison inverse : le repli
     était figé en dur (#AAA0BC, rgba(77,66,84,…)), donc identique dans les
     deux thèmes — une barre de progression et un bandeau qui ne savaient pas
     qu'il existait un mode sombre. --color-accent pointe sur --color-lavender
     et --color-surface-sunken a sa valeur de nuit : le rendu de jour ne bouge
     pas, celui de nuit cesse d'être un accident. Au passage,
     --color-surface-sunken était appelée avec DEUX replis différents (.10 et
     .06) pour un même jeton : une seule valeur tranche.

     Note pour le lot des écrans : --color-accent sur --color-surface-sunken
     mesure 2,10:1. C'est en dessous du 3:1 attendu d'un objet graphique
     porteur de sens (WCAG 1.4.11), et c'était DÉJÀ le cas avec les replis en
     dur. Corriger demande de changer la couleur de la barre de complétude,
     décision d'écran : signalée ici, pas tranchée ici. */
  --color-text-soft:#5F5A63;
  --color-surface-sunken:#EDEBF0;
  --color-accent:var(--color-lavender);

  /* Liens. Mêmes valeurs qu'aujourd'hui : déclarer le jeton ne change rien à
     l'écran, mais donne enfin un nom à ce que la règle `a` applique en dur. */
  --color-link:var(--color-primary); --color-link-hover:var(--color-primary-hover);

  /* Typographie */
  --font-family-primary:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-weight-light:300; --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;
  --font-size-xs:.75rem; --font-size-sm:.875rem; --font-size-base:1rem; --font-size-md:1.125rem; --font-size-lg:1.375rem; --font-size-xl:1.75rem; --font-size-2xl:2.25rem;
  --line-height-tight:1.2; --line-height-heading:1.3; --line-height-normal:1.5; --line-height-relaxed:1.65;

  /* Formes / ombres / transitions */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;
  --shadow-xs:0 1px 3px rgba(77,66,84,.04); --shadow-sm:0 4px 14px rgba(77,66,84,.05); --shadow-md:0 10px 30px rgba(77,66,84,.07); --shadow-lg:0 18px 50px rgba(77,66,84,.08);
  --transition-fast:140ms ease; --transition-normal:200ms ease; --transition-slow:280ms ease;
  --shadow-inset:inset 0 1px 2px rgba(77,66,84,.07);

  /* ── Échelle d'espacement ─────────────────────────────────────────────────
     Elle manquait entièrement, et c'en est la conséquence mécanique : 388
     attributs style= subsistent dans 40 fichiers, dont 196 — la moitié — ne
     règlent qu'une marge, un remplissage ou une gouttière. Sans échelle,
     chaque écran réinvente ses distances, et il n'existe aucune valeur qu'on
     puisse citer plutôt que retaper.

     Sept crans, en rem pour suivre le zoom navigateur. Le pas est volontaire :
     ×2 en bas de l'échelle où l'œil distingue 4 px de 8 px, ×1,5 en haut où
     il ne distingue plus 40 px de 44 px.

       --space-1  4px  espace intérieur d'un badge, écart texte/pastille
       --space-2  8px  gouttière entre deux contrôles voisins d'une même ligne
       --space-3 12px  remplissage d'un champ de saisie, d'un bouton compact
       --space-4 16px  gouttière de grille, remplissage d'une carte : le cran
                       par défaut, celui qu'on prend quand on hésite
       --space-5 24px  remplissage d'un panneau, écart entre deux cartes
       --space-6 32px  écart entre deux blocs d'une même page
       --space-7 48px  respiration entre deux sections de nature différente

     Ce que l'échelle N'A PAS : de cran sous 4 px (un décalage d'1 px se règle
     par une bordure, pas par une marge) et de cran au-delà de 48 px (au-delà,
     c'est une mise en page, elle se décide à la grille). */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;  --space-7:3rem;

  /* Largeurs de bordure. Trois crans suffisent : le filet ordinaire, le trait
     d'état (carte courante, onglet actif) et le liseré porteur que le dépôt
     pose déjà en `inset 3px 0 0` pour marquer une ligne de tableau. */
  --border-width:1px; --border-width-2:2px; --border-width-3:3px;

  /* Anneau de focus. Voir la note posée sur la règle :focus-visible plus bas :
     l'anneau lavande d'origine mesurait 2,48:1 sur blanc, sous le 3:1 exigé
     d'un indicateur de focus (WCAG 1.4.11). L'aubergine en donne 9,45. */
  --focus-ring-width:2px; --focus-ring-offset:2px;
  --focus-ring-color:var(--color-primary);
  --focus-ring-shadow:0 0 0 3px rgba(170,160,188,.18);

  /* Alias LEGACY (compat des styles inline existants) */
  --bg:var(--color-background);
  --panel:var(--color-surface);
  --panel-2:var(--color-background-soft);
  --border:var(--color-border);
  --text:var(--color-text);
  --muted:var(--color-text-secondary);
  --accent:var(--color-primary);
  --accent-2:var(--color-success);
  --danger:var(--color-error);
  --radius:var(--radius-lg);
}

/* Mode sombre (secondaire) */
:root[data-theme="dark"] {
  --color-background:#19171D; --color-background-soft:#211E26; --color-surface:#24212A; --color-surface-warm:#29242C;
  /* De nuit, la page descend SOUS les surfaces, comme de jour elle passe dessous
     en clarté : dans les deux thèmes, une carte est plus proche de la lumière que
     le fond qui la porte. C'est ce rapport, et non la valeur, qui fait lire le
     relief. */
  --color-app-bg:#131117;
  --color-primary:#C5B9D2; --color-primary-hover:#D3C9DC; --color-primary-active:#D8CFE0; --color-primary-soft:#2E2836;
  --color-lavender:#B8ADD0; --color-lavender-light:#2C2636; --color-lavender-soft:#241F2B;
  --color-coral:#E0AAA3; --color-coral-light:#3A2E33; --color-coral-soft:#2A2430;
  --color-sage:#AFC8BA; --color-sage-light:#1D2A24;
  --color-text:#F7F4F8; --color-text-secondary:#BBB3BF; --color-text-muted:#918994;
  --color-border:#39333E; --color-border-light:#302B35; --color-divider:#39333E;
  --color-success-background:#1D2A24; --color-warning-background:#2E2820; --color-error-background:#2E2024; --color-info-background:#241F2B;

  /* L'ÉCHANGE : -bg-subtle prend la valeur d'emphase du thème clair, et
     -text-emphasis prend son fond doux. Les cinq couples conservent donc au
     mot près le ratio mesuré de jour. Les -border-subtle, elles, ne
     s'échangent pas — une bordure doit rester entre son fond et la page,
     jamais à l'opposé : elles sont éclaircies vers la teinte pleine. */
  --color-primary-bg-subtle:#55445F; --color-primary-border-subtle:#6E5E7B; --color-primary-text-emphasis:#EEEAF1;
  --color-success-bg-subtle:#426153; --color-success-border-subtle:#5A7A6C; --color-success-text-emphasis:#E8F1EC;
  --color-warning-bg-subtle:#835720; --color-warning-border-subtle:#9F733B; --color-warning-text-emphasis:#F8EFE2;
  --color-error-bg-subtle:#7A3029;   --color-error-border-subtle:#964C45;   --color-error-text-emphasis:#F8E8E6;
  --color-info-bg-subtle:#4C4064;    --color-info-border-subtle:#64577D;    --color-info-text-emphasis:#EEEAF4;

  --color-text-soft:#B0A8B6;
  --color-surface-sunken:#2E2A33;
  /* --color-accent et --color-link suivent --color-lavender / --color-primary,
     qui basculent déjà plus haut : rien à redéclarer ici. */
  --shadow-inset:inset 0 1px 2px rgba(0,0,0,.35);
  --focus-ring-shadow:0 0 0 3px rgba(197,185,210,.22);
  --shadow-xs:0 1px 3px rgba(0,0,0,.30); --shadow-sm:0 4px 14px rgba(0,0,0,.35); --shadow-md:0 10px 30px rgba(0,0,0,.45); --shadow-lg:0 18px 50px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--color-background); color: var(--color-text);
  font-family: var(--font-family-primary); line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-link); }
/* Pas de `a:hover` global ici : --color-link-hover existe pour que le lot de la
   coquille s'en serve là où il maîtrise le contexte. Poser la règle maintenant
   repeindrait au survol des dizaines de liens du backoffice qui n'en demandent
   pas — un jeton qu'on ajoute ne doit rien changer tant que personne ne
   l'appelle. */

/* SEUL changement visible de ce lot, et c'est une correction : l'anneau était
   en --color-lavender, soit 2,48:1 sur blanc, sous le 3:1 qu'un indicateur de
   focus doit atteindre (WCAG 1.4.11) — sur un produit de santé, un utilisateur
   au clavier doit voir où il est. En --color-primary, 9,45:1 de jour et 9,52:1
   de nuit. Ne se voit qu'au clavier : la souris ne déclenche pas
   :focus-visible. Les champs de saisie, eux, posent `outline: none` et gardent
   leur bordure lavande — leur propre indicateur reste sous la barre, mais le
   corriger touche à la forme des formulaires, qui est du lot des écrans. */
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }

/* ---------- Scène de stimulation (aperçu ET plein écran) ---------- */
.emdr-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--color-background); }
.emdr-stage::before, .emdr-stage::after { content: none; } /* JAMAIS de rail/trajectoire sur la vue patient */
.emdr-dot { position: absolute; top: 50%; left: 0; will-change: transform; transform: translate3d(0, -50%, 0); backface-visibility: hidden; }

/* ---------- En-tête POC (legacy) ---------- */
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.app-header h1 { font-size: 16px; margin: 0; font-weight: var(--font-weight-semibold); letter-spacing: .2px; }
.app-header .sub { color: var(--color-text-secondary); font-size: 13px; }
.badge-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--color-lavender-soft); color: var(--color-primary); padding: 3px 10px; border-radius: var(--radius-sm); font-size: 14px; letter-spacing: 2px; }

/* ---------- Layout praticien (séance live) ---------- */
.grid { display: grid; grid-template-columns: 360px 1fr; gap: 18px; padding: 18px; align-items: start; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow-sm); }
.panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--color-text-secondary); margin: 0 0 14px; }

/* ---------- Contrôles ---------- */
.field { margin-bottom: 18px; }
.field > label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 8px; color: var(--color-text); font-weight: var(--font-weight-medium); }
.field .val { color: var(--color-primary); font-variant-numeric: tabular-nums; font-size: 13px; }
.field .hint { color: var(--color-text-secondary); font-size: 11px; font-weight: var(--font-weight-regular); }

input[type="range"] { width: 100%; accent-color: var(--color-primary); height: 22px; }
input[type="color"] { width: 100%; height: 40px; padding: 2px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
select { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); font-family: inherit; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-lavender); box-shadow: 0 0 0 3px rgba(170,160,188,.18); }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* ---------- Le socle du bouton ----------
 *
 * Le socle NE POSE PLUS `width: 100%`. Cette déclaration venait du POC, où
 * tout bouton vivait empilé dans un panneau de séance ; app.css ne la
 * rétablissait jamais, elle survivait donc sur TOUS les écrans, et le dépôt la
 * défaisait ensuite à la main : six règles `.préfixe-* .btn { width: auto }`
 * dans app.css, une septième dans landing.css, et quinze attributs
 * style="width:auto" dans les gabarits — dont douze sur des boutons.
 *
 * Le symptôme était mesurable : dans un `.actions` (flex + wrap), deux boutons
 * demandant chacun 100 % de la ligne ne tiennent pas ensemble et s'empilent
 * verticalement, chacun sur toute la largeur. La cellule d'actions d'un
 * tableau devenait une colonne. C'est ce que ces vingt-deux rustines
 * corrigeaient, une par une, sans jamais toucher la cause.
 *
 * La pleine largeur reste possible — elle se DEMANDE, désormais : .btn-block. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 15px; font-weight: var(--font-weight-semibold); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast); }
.btn:hover { border-color: var(--color-lavender); }
.btn:active { transform: scale(.99); }
.btn-lg { padding: 18px; font-size: 17px; }
.btn-run { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-run:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-stop { background: var(--color-coral-soft); color: var(--color-error); border-color: var(--color-coral-light); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.btn-secondary { background: var(--color-surface); color: var(--color-primary); }

/* Le modificateur explicite : un bouton qui occupe sa ligne parce qu'on l'a
   décidé, et non parce qu'un socle de 2023 l'imposait à tout le monde. */
.btn-block { width: 100%; }

/* Pont transitoire — à retirer, pas à étendre.
 *
 * Deux endroits attendent la pleine largeur et ne peuvent pas encore réclamer
 * .btn-block : app/session_live.php est hors périmètre absolu de ce chantier,
 * et les écrans d'authentification appartiennent au lot des écrans. Sans ces
 * deux lignes, le gros bouton « Démarrer » de la séance et le bouton de
 * connexion rétréciraient à la largeur de leur texte — une régression visible,
 * là où tout le reste du retrait est un gain.
 *
 * Elles disparaissent dès que les deux gabarits portent .btn-block. */
.panel > .field > .btn,
.auth .actions > .btn { width: 100%; }

/* ---------- Aperçu / partage / statut ---------- */
.preview-stage { height: 340px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.share { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.share input { flex: 1 1 240px; min-width: 0; padding: 11px 12px; border-radius: var(--radius-sm); background: var(--color-background-soft); border: 1px solid var(--color-border); color: var(--color-text); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
/* Le `width: auto` qui figurait ici n'a plus d'objet : le socle ne force plus
   rien. Restent les seuls réglages propres à la barre de partage. */
.share .btn { padding: 11px 14px; font-size: 13px; }
.status { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; }
.status .k { color: var(--color-text-secondary); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.status .v { font-size: 18px; font-variant-numeric: tabular-nums; }
.dot-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-muted); margin-right: 7px; vertical-align: middle; }
.dot-led.on { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-background); }
.dot-led.off { background: var(--color-error); }

/* ---------- Vue patient ---------- */
.patient-body { overflow: hidden; background: var(--color-background); }
.patient-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; }
.overlay-wait { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--color-text-secondary); text-align: center; pointer-events: none; transition: opacity .4s ease; }
.overlay-wait .big { font-size: 20px; color: var(--color-text); font-weight: var(--font-weight-medium); }
.overlay-wait .small { font-size: 13px; }
.overlay-wait.hidden { opacity: 0; }
.fs-btn { position: fixed; top: 16px; right: 16px; z-index: 5; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; cursor: pointer; transition: opacity .4s ease; opacity: .55; box-shadow: var(--shadow-xs); }
.fs-btn:hover { opacity: 1; }
.debug { position: fixed; left: 12px; bottom: 12px; z-index: 5; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--color-text-secondary); background: var(--color-background-soft); border: 1px solid var(--color-border); padding: 6px 10px; border-radius: var(--radius-sm); display: none; }
.debug.on { display: block; }

/* ---------- Landing / cartes centrales ---------- */
.landing { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.landing .card { max-width: 560px; width: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 40px; text-align: center; box-shadow: var(--shadow-md); }
.landing .brand-logo { height: 40px; margin: 0 auto 18px; display: block; }
.landing h1 { font-size: 26px; margin: 0 0 6px; font-weight: var(--font-weight-semibold); }
.landing p { color: var(--color-text-secondary); line-height: var(--line-height-relaxed); margin: 0 0 26px; }
/* `.landing` est du code MORT : aucun gabarit ne porte class="landing" depuis
   que index.php a été refait sur .lp / assets/landing.css. On garde le bloc
   intact — le nettoyer n'est pas de ce lot — mais la règle redevient cohérente
   avec un socle sans largeur imposée. */
.landing .btn { width: 100%; max-width: 320px; margin: 0 auto; }
.landing .join { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.landing .join .row { max-width: 340px; margin: 12px auto 0; }
.landing input.code-in { padding: 12px; border-radius: var(--radius-sm); background: var(--color-background-soft); border: 1px solid var(--color-border); color: var(--color-text); text-transform: uppercase; letter-spacing: 3px; text-align: center; font-family: ui-monospace, Menlo, monospace; font-size: 16px; width: 100%; }
.muted { color: var(--color-text-secondary); }
.hint { color: var(--color-text-secondary); }

/* ---------- Sélecteur de langue ---------- */
.lang-select { display: inline-flex; align-items: center; gap: 5px; margin: 0; line-height: 1; }
.lang-select .lang-globe { display: block; opacity: .65; flex: none; transition: opacity .2s ease; }
.lang-select:hover .lang-globe, .lang-select:focus-within .lang-globe { opacity: 1; }
.lang-select select {
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 6px 26px 6px 10px; font-size: 13px; line-height: 1.2;
  cursor: pointer; font-family: inherit; max-width: 150px;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777078' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
[dir="rtl"] .lang-select select { padding: 6px 10px 6px 26px; background-position: left 9px center; }

/* Barre discrète en haut à droite (pages plein écran : patient) */
.patient-topbar { position: fixed; top: 16px; right: 16px; z-index: 6; display: flex; align-items: center; gap: 8px; opacity: .55; transition: opacity .3s ease; }
.patient-topbar:hover { opacity: 1; }
[dir="rtl"] .patient-topbar { right: auto; left: 16px; }
.patient-topbar select, .patient-topbar button { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-xs); }

/* Marque du praticien (STUDIO) sur l'écran patient */
.patient-brand { position: fixed; top: 16px; left: 18px; z-index: 6; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-text); opacity: .92; }
.patient-brand img { max-height: 34px; max-width: 140px; }
[dir="rtl"] .patient-brand { left: auto; right: 18px; }
.patient-powered { position: fixed; bottom: 12px; left: 0; right: 0; text-align: center; z-index: 5; font-size: 11px; color: var(--color-text-muted); opacity: .7; pointer-events: none; letter-spacing: .3px; }

/* ---------- RTL (arabe) ---------- */
[dir="rtl"] .landing .card, [dir="rtl"] .auth .card { text-align: right; }
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea { text-align: right; }