/* ═══════════════════════════════════════════════════════════════════════════
   🕯️ LE SALON DE SOIN — dans le chat de la Giri Family (21/08/2026)
   Ordre de Maha : « cela doit être contenu DANS LE CHAT dans la communauté et
   pas un pop up ». Ce n'est donc plus une fenêtre par-dessus l'app : c'est un
   salon, à la place des messages, avec sa propre barre de dépôt en bas.

   ⛔ POURQUOI DES VARIABLES À MOI, ET AUCUNE DE LA FAMILY :
   `communaute.html` empile plusieurs jeux de --g / --bg / --gg selon le thème
   actif (violet, or, marbre…), avec des !important partout. S'y accrocher, c'est
   accepter que le Salon change de couleur sans prévenir — c'est exactement le
   piège « feuille sombre servie sous un marbre clair ». Tout est donc fixé ici,
   en marbre lumineux, la charte de la maison.

   ⛔ MATIÈRES RÉELLES (loi 4 du studio) : l'or des lingots est la photo
   gold-ecrin.jpg, la boule est le vrai logo. Aucun dégradé CSS n'imite l'or.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 🌿 LA SÈVE — charte du 23/08/2026 ═══════════════════════════════════════
   ⛔ Maha, deux fois : « on est sur un thème marron, ça le fait pas trop » (21/08),
   puis « la charte est sur du marron mais je ne suis pas fan » (23/08). La première
   fois, on a répondu en retravaillant l'OR. C'était la mauvaise réponse : le marron
   ne venait pas d'un mauvais or, il venait de ce qu'il n'y avait QUE de l'or —
   l'encre brune, les cartes crème, les boutons bronze, l'axe doré. Un camaïeu chaud
   sans contrepoint, ça s'appelle du marron, quelle que soit la qualité de l'or.

   La réponse, cette fois : L'ÉMERAUDE ENTRE, ET L'OR DEVIENT RARE.
   · l'émeraude parce que ce lieu s'appelle l'Arbre et qu'on y soigne — c'est la
     couleur du vivant qui se répare, et aucun autre univers Giri n'est vert :
     le Salon se reconnaît désormais en un coup d'œil ;
   · l'or ne disparaît pas, il se raréfie — la Flamme, le sceau Giri, UN seul lingot
     par écran. Un or partout n'est plus de l'or, c'est du beige.
   · l'améthyste remplace le rose des appels : deux mondes se font face, ils ne
     peuvent pas être deux nuances du même chaud.
   · L'ENCRE PASSE DU BRUN AU VERT-NUIT. C'est le geste qui tue le marron : les
     3 000 mots de l'écran étaient écrits en #2e2a22, un brun. Tout le reste suit.
   Le marbre clair, lui, ne bouge pas : c'est la maison. ═══════════════════════ */
.sso, .sso-depot {
  --sso-ivoire:      #fdfaf2;
  --sso-ivoire-2:    #f3f7f4;
  --sso-encre:       #13251f;   /* vert-nuit : le texte, jamais plus clair que ça */
  --sso-encre-doux:  #55665f;
  --sso-or:          #c1901f;   /* RARE — la Flamme, le sceau, le lingot unique */
  --sso-or-lisible:  #6b4d0c;
  --sso-or-clair:    #e8c86a;
  --sso-emeraude:    #0e6b52;   /* la couleur vivante : titres, actions, l'Axe */
  --sso-emeraude-f:  #073d2f;   /* les profondeurs — encre sur fond jade */
  --sso-jade:        #3fa88a;
  --sso-jade-voile:  #e8f4ef;   /* le fond des mains qui soignent */
  --sso-jade-bord:   rgba(14,107,82,.34);
  --sso-amethyste:   #6b4a8f;   /* l'autre monde : celles et ceux qui appellent */
  --sso-amethyste-f: #4a2f68;
  --sso-amethyste-v: #f2ecf9;
  --sso-amethyste-b: rgba(107,74,143,.34);
  --sso-vert:        #2f9e6b;   /* la présence : « ici, maintenant » */
  --sso-ombre:       0 2px 10px rgba(11,48,38,.10);
  --sso-ombre-lift:  0 10px 28px rgba(11,48,38,.20);
  --sso-serif:       'Cormorant Garamond', 'Georgia', serif;
  --sso-sans:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* ⛔ compat : d'anciennes règles nomment encore le rose. Elles pointent sur
     l'améthyste, le temps qu'elles soient toutes réécrites — jamais deux vérités. */
  --sso-rose:        var(--sso-amethyste-v);
  --sso-rose-bord:   var(--sso-amethyste-b);
}

/* ── Le salon prend la place des messages ────────────────────────────────── */
.sso {
  /* ⛔ DANS LE FLUX, pas en absolu : le Salon prend exactement la place que les
     messages occupaient dans la colonne du chat (#mainChat est un flex vertical).
     En `position:absolute` il aurait recouvert l'en-tête et la barre du bas — donc
     redevenu, de fait, la fenêtre par-dessus l'app que Maha ne veut plus. */
  position: relative; flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--sso-ivoire) url('/arbre/img/marbre.webp') center/cover no-repeat;
  color: var(--sso-encre);
  font-family: var(--sso-sans);
  overflow: hidden;
  z-index: 2;
}
/* voile ivoire : le marbre est une matière, pas un fond de lecture — les veines
   dorées mangent l'encre si on écrit dessus à nu (piège payé sur /arbre/comment) */
.sso::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,250,242,.90) 0%, rgba(253,250,242,.82) 45%, rgba(253,250,242,.92) 100%);
  pointer-events: none;
}
.sso > * { position: relative; z-index: 2; }
.sso > .sso-poussiere { z-index: 1; }

/* ── La barre du haut : les filtres du croisement + la Flamme ────────────── */
.sso-barre {
  /* ⛔ 11 pastilles en `wrap` mangeaient TROIS lignes de haut d'écran et faisaient
     tomber la Flamme d'Or toute seule en dessous. Les zones défilent maintenant sur
     une seule ligne ; la Flamme garde sa place, à droite, en vis-à-vis. */
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px 9px;
  border-bottom: 1px solid rgba(14,107,82,.20);
  background: rgba(253,250,242,.74);
  backdrop-filter: blur(6px);
  flex-wrap: nowrap;
}
.sso-filtres {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  flex: 1 1 auto; min-width: 0; overflow-x: auto; padding-bottom: 3px;
  scrollbar-width: thin;
}
.sso-filtres::-webkit-scrollbar { height: 5px; }
.sso-filtres::-webkit-scrollbar-thumb { background: rgba(14,107,82,.28); border-radius: 5px; }
.sso-chip, .sso-budget { flex: 0 0 auto; }
.sso-filtre-label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sso-encre-doux); font-weight: 600; margin-right: 2px;
}

/* Les pastilles de zone — le geste de choix le plus fréquent de l'écran */
.sso-chip {
  appearance: none; border: 1px solid var(--sso-jade-bord);
  background: rgba(255,255,255,.78); color: var(--sso-encre);
  font: 600 14px/1 var(--sso-sans);
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  white-space: nowrap;
}
.sso-chip:hover { transform: translateY(-1px); box-shadow: var(--sso-ombre); }
.sso-chip[aria-pressed="true"] {
  background: linear-gradient(180deg, #12866b 0%, #0e6b52 100%);
  color: #f2fbf7; border-color: rgba(4,40,31,.45); font-weight: 700;
  text-shadow: 0 1px 1px rgba(4,32,24,.3);
  box-shadow: inset 0 1px 0 rgba(160,235,208,.4), var(--sso-ombre);
}
.sso-chip-x { margin-left: 6px; opacity: .75; font-weight: 700; }

/* Le budget : un vrai champ, pas une liste déroulante grise */
.sso-budget {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--sso-jade-bord); background: rgba(255,255,255,.82);
  border-radius: 999px; padding: 5px 6px 5px 14px;
}
.sso-budget label { font-size: 13px; color: var(--sso-encre-doux); font-weight: 600; }
.sso-budget select {
  appearance: none; border: 0; background: transparent; color: var(--sso-encre);
  font: 700 15px/1 var(--sso-sans); padding: 5px 26px 5px 6px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sso-emeraude) 50%),
                    linear-gradient(135deg, var(--sso-or-lisible) 50%, transparent 50%);
  background-position: right 12px top 12px, right 7px top 12px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* La Flamme d'Or — le pot des soins offerts d'avance */
.sso-flamme {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 9px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,252,244,.95), rgba(247,238,216,.95));
  border: 1px solid rgba(193,144,31,.7); box-shadow: none;
  font-size: 14px; color: var(--sso-encre); white-space: nowrap;
}
.sso-flamme b { font-size: 17px; color: var(--sso-or-lisible); font-variant-numeric: lining-nums tabular-nums; }
.sso-flamme-feu { width: 15px; height: 20px; position: relative; flex: 0 0 auto; }
.sso-flamme-feu i {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; display: block;
  animation: ssoDanse 1.9s ease-in-out infinite;
}
.sso-flamme-feu i:nth-child(1) { width: 13px; height: 19px; background: #f3b63c; opacity: .55; }
.sso-flamme-feu i:nth-child(2) { width: 9px;  height: 14px; background: #ffd979; animation-delay: -.5s; }
.sso-flamme-feu i:nth-child(3) { width: 5px;  height: 8px;  background: #fffaf0; animation-delay: -1s; }
@keyframes ssoDanse {
  0%,100% { transform: translateX(-50%) scaleY(1)    skewX(0deg); }
  35%     { transform: translateX(-50%) scaleY(1.13) skewX(-4deg); }
  70%     { transform: translateX(-50%) scaleY(.94)  skewX(3deg); }
}

/* ── La scène : deux mondes qui se font face ─────────────────────────────── */
.sso-scene {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0;
}
/* ⛔⛔ 23/08 — C'EST LA COLONNE ENTIÈRE QUI SE CENTRE, TITRE COMPRIS.
   Premier essai : seule la liste était centrée. Les deux titres — « Mains qui soignent »,
   « Qui appelle » — restaient collés au plafond pendant que leurs cartes flottaient
   250 px plus bas : un titre séparé de ce qu'il titre ne titre plus rien.
   ⛔ `safe` est obligatoire : un `center` nu coupe le HAUT du contenu dès que ça
   déborde, et le rend inatteignable au défilement. */
.sso-col {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  justify-content: center;              /* repli des navigateurs sans `safe` */
  justify-content: safe center;
}
.sso-col-tete {
  flex: 0 0 auto; padding: 14px 18px 8px;
  display: flex; align-items: baseline; gap: 10px;
}
.sso-col-titre {
  font-family: var(--sso-serif); font-size: 22px; font-weight: 700;
  color: var(--sso-emeraude); letter-spacing: .01em;
}
/* ⛔ 23/08 — les deux colonnes portaient EXACTEMENT le même titre doré : rien, à
   l'écran, ne disait qu'on regardait deux mondes différents. Chacun prend la couleur
   du sien. C'est gratuit, et c'est ce qui rend la scène lisible en une seconde. */
.sso-col-appels .sso-col-titre { color: var(--sso-amethyste); }
.sso-col-compte {
  font-size: 13px; color: var(--sso-encre-doux); font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
}
/* ⛔⛔ 23/08 — LE DÉFAUT QUI FAISAIT « PAS ABOUTI » : 45 % DE L'ÉCRAN ÉTAIT BLANC.
   Deux cartes collées en haut d'une colonne de 1 000 px, et un grand trou en dessous :
   ce n'est pas de la sobriété, c'est un salon qui a l'air mort. Quand le contenu est
   court, il se CENTRE — l'air au-dessus et en dessous devient voulu, et c'est exactement
   ce qui fait le haut de gamme (« l'air fait partie du haut de gamme », règle maison).
   ⛔ `safe` est obligatoire : un `center` nu, dès que la liste déborde, coupe le HAUT
   de la première carte et la rend inatteignable au défilement. */
.sso-liste {
  /* ⛔ `0 1 auto` et non `1 1 auto` : la liste ne prend que la hauteur dont elle a
     besoin (donc la colonne peut la centrer), mais elle sait rétrécir et défiler
     dès qu'il y a du monde. Avec `1 1 auto` elle mangeait toute la colonne et
     rien ne pouvait plus se centrer. */
  flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 20px;
}
/* ⛔ le repli ci-dessus ne doit jamais manger le haut : dès que ça déborde, on repart
   du haut. `safe center` le fait seul là où il existe ; ailleurs, cette règle protège. */
@supports not (justify-content: safe center) {
  .sso-col { justify-content: flex-start; }
}
.sso-col-appels .sso-liste { padding-left: 18px; }

/* ── L'AXE — l'élément héros : la colonne d'or de l'Arbre, dressée dans le salon ──
   ⛔ C'était un filet de 3 px : impossible d'y poser une matière, donc impossible que
   « ça pète ». On reprend la recette éprouvée de l'Arbre du 19/08 : la VRAIE photo d'or
   bruni, ramenée vers l'or chaud de la boule, dont on ne montre que la moitié claire
   (la texture porte son propre dégradé clair→sombre), plus une géométrie sacrée gravée
   dans le métal — double tracé : une ombre décalée, un trait de lumière par-dessus. */
.sso-axe { position: relative; }
.sso-axe-fut {
  /* ⛔⛔ 23/08 — L'AXE N'EST PLUS UNE COLONNE D'OR : C'EST UNE VEINE DE SÈVE.
     Le 21/08 on avait répondu au « c'est marron » en cherchant un meilleur or ; l'axe
     doré au milieu d'un écran doré ne pouvait pas sauver l'écran, il en était le centre.
     Ici, la même recette d'éclairage — bord très sombre, montée rapide, cœur presque
     clair, redescente — mais en émeraude : ce qui fait lire « matière vivante », ce
     n'est pas la teinte, c'est LE MODELÉ SUR LA LARGEUR. Aucune photo étirée (elle perd
     son grain sur 900 px et redevient un aplat) : un modelé franc, assumé. */
  position: absolute; top: calc(52px + var(--sso-axe-top, 0px)); left: 50%; width: 16px;
  height: calc(var(--sso-axe-h, 100%) - 62px);
  transform: translateX(-50%); border-radius: 9px; overflow: hidden;
  background-image: linear-gradient(90deg,
    #04241c 0%,   #063528 11%,  #0a5741 26%,
    #17886a 41%,  #6ad3b0 50%,  #17886a 59%,
    #0a5741 74%,  #063528 89%,  #04241c 100%);
  box-shadow: 0 0 14px rgba(23,136,106,.36), 0 0 36px rgba(23,136,106,.15),
              inset 0 1px 0 rgba(214,247,236,.45);
}
/* ⛔ LE MOMENT SIGNATURE — LE SALON RESPIRE.
   La sève monte le long de la veine au rythme d'un soin guidé : une inspiration franche
   (≈4 s), une suspension, une expiration longue (≈6 s). Le lieu est vivant même quand
   personne n'y est — c'est ce qui change tout dans un salon encore peu peuplé : un
   écran vide devient un lieu qui attend, au lieu d'un échec affiché. */
.sso-axe-fut::after {
  content: ''; position: absolute; left: 0; right: 0; height: 26%;
  background: linear-gradient(180deg, transparent, rgba(196,255,233,.72), transparent);
  mix-blend-mode: screen; animation: ssoSeveMonte 10s cubic-bezier(.42,0,.3,1) infinite;
}
@keyframes ssoSeveMonte {
  0%   { top: 100%;  opacity: 0; }
  7%   { opacity: .95; }
  40%  { top: 20%;   opacity: 1; }     /* l'inspiration, franche */
  48%  { top: 15%;   opacity: .95; }   /* la suspension */
  93%  { top: -26%;  opacity: .22; }   /* l'expiration, longue */
  100% { top: -26%;  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sso-axe-fut::after { animation: none; opacity: .35; top: 30%; }
}

/* ⛔⛔ 23/08 (2ᵉ passe, retour de Maha : « les dessins sur la colonne sont décalés
   de la colonne elle-même »). Deux fautes, dont une que j'ai introduite le jour même :
   1. HORIZONTALEMENT — `left:0; right:0` étalait chaque gravure sur toute la largeur
      de la COLONNE (~40 px) alors que la veine n'en fait que 16 : les motifs
      débordaient de part et d'autre au lieu d'être gravés dedans.
   2. VERTICALEMENT — leurs `top` étaient des pourcentages du conteneur ENTIER. Tant
      que la veine partait du plafond, ça tombait juste ; depuis qu'elle descend avec
      le contenu centré (`--sso-axe-top`), elles sont restées en arrière, dans le vide.
   ⛔ LA LEÇON : un décor posé en frère d'un élément doit être ancré sur LA GÉOMÉTRIE
   de cet élément — jamais sur celle du parent, ou il se désolidarise au premier
   déplacement, sans que rien ne casse ni n'alerte. Les trois positions se calculent
   donc dans le même repère que le fût : même origine, même hauteur, même largeur. */
.sso-axe-gravure {
  /* ⛔ LE REPÈRE : les gravures sont ENFANTS DU FÛT (pas de la colonne). Leur origine
     est donc déjà le haut de la veine — lui ré-ajouter `52px + --sso-axe-top` ajoutait
     le décalage UNE SECONDE FOIS et les poussait hors du tube, où `overflow:hidden`
     les avalait en silence. Un pourcentage pur suffit, et suit la veine partout.
     Largeur : celle du fût, ni plus ni moins — un décor gravé ne déborde pas de sa
     matière. Le SVG (viewBox 40×40) s'y inscrit seul, centré. */
  position: absolute; left: 0; right: 0; width: auto; transform: none;
  height: 16px; opacity: .58;
}
.sso-gravure-1 { top: 16%; }
.sso-gravure-2 { top: 46%; }
.sso-gravure-3 { top: 76%; }
/* le motif tient dans 18 px : sans épaissir le trait, la gravure disparaît */
.sso-axe-gravure use { fill: none; stroke-width: 1.7; }
.sso-gr-ombre   { stroke: rgba(3,26,20,.8); transform: translate(0.7px, 0.7px); }
.sso-gr-lumiere { stroke: rgba(206,251,234,.9); }

/* les nœuds de la veine — là où la sève se resserre, pas des bagues de métal */
.sso-axe-bague {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 23px; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #052e23 0%, #0e6b52 26%, #7ee0bd 50%, #0e6b52 74%, #052e23 100%);
  box-shadow: inset 0 1px 0 rgba(214,247,236,.7), 0 2px 6px rgba(4,40,31,.42);
}
.sso-bague-h { top: calc(52px + var(--sso-axe-top, 0px)); }
.sso-bague-b { top: calc(52px + var(--sso-axe-top, 0px) + var(--sso-axe-h, 100%) - 72px); }

.sso-axe-boule {
  position: absolute; top: calc(8px + var(--sso-axe-top, 0px)); left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: url('/arbre/img/golden-ball.png') center/contain no-repeat;
  filter: drop-shadow(0 4px 12px rgba(150,110,20,.5));
  animation: ssoSouffle 7s ease-in-out infinite;
  z-index: 2;
}
@keyframes ssoSouffle { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }

/* le halo respire autour de la boule — la lumière de la maison */
.sso-axe-halo {
  position: absolute; top: calc(-14px + var(--sso-axe-top, 0px)); left: 50%; transform: translateX(-50%);
  width: 72px; height: 72px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,225,150,.34) 0%, rgba(255,215,130,.10) 42%, transparent 68%);
  animation: ssoHalo 7s ease-in-out infinite;
}
@keyframes ssoHalo { 0%,100% { opacity: .55; transform: translateX(-50%) scale(1); }
                     50%     { opacity: .95; transform: translateX(-50%) scale(1.14); } }

/* le faisceau : l'or de la boule descend, la sève verte le relaie — la maison en haut,
   le vivant en bas. C'est le seul endroit où les deux couleurs se touchent vraiment. */
.sso-axe-rayon {
  position: absolute; top: calc(34px + var(--sso-axe-top, 0px)); left: 50%; width: 44px;
  height: calc(var(--sso-axe-h, 100%) - 34px);
  transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,231,166,.26) 0%, rgba(150,225,197,.16) 30%,
    rgba(63,168,138,.09) 60%, transparent 85%);
  filter: blur(10px);
}

/* ── La poussière d'or ──────────────────────────────────────────────────────── */
.sso-poussiere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.sso-grain {
  position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,226,150,1), rgba(198,148,44,.75) 55%, rgba(198,148,44,0) 74%);
  box-shadow: 0 0 7px rgba(224,178,74,.75);
  animation-name: ssoMonte; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes ssoMonte {
  0%   { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
  12%  { opacity: .85; }
  70%  { opacity: .6; }
  100% { transform: translateY(-88vh) translateX(24px) scale(1.15); opacity: 0; }
}

/* ── Les fils tendus : LE MOMENT SIGNATURE ───────────────────────────────────
   Toucher quelqu'un tend un fil d'or vers ceux qui lui correspondent, et le
   prix est écrit sur le fil. Le croisement cesse d'être un calcul caché.       */
.sso-fils { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: visible; }
.sso-fil { fill: none; stroke: var(--sso-or); stroke-width: 2.2; opacity: 0; stroke-linecap: round;
           filter: drop-shadow(0 0 5px rgba(224,178,74,.75)); }
.sso-fil.on { animation: ssoTendre .55s cubic-bezier(.22,.9,.3,1) forwards; }
@keyframes ssoTendre { from { opacity: 0; stroke-dashoffset: var(--len); } to { opacity: .95; stroke-dashoffset: 0; } }
.sso-fil-seve { stroke: #d9fff0; stroke-width: 1.1; stroke-dasharray: 3 13; opacity: 0; }
.sso-fil-seve.on { opacity: .9; animation: ssoSeve 2.4s linear infinite; }
@keyframes ssoSeve { to { stroke-dashoffset: -160; } }
.sso-fil-prix {
  font: 700 13px var(--sso-sans); fill: #3a2a06;
  paint-order: stroke; stroke: rgba(255,251,240,.95); stroke-width: 4px; stroke-linejoin: round;
}

/* ── Les cartes ──────────────────────────────────────────────────────────── */
.sso-carte {
  /* ⛔ Refonte 21/08 (critique de Maha) : la carte d'un être humain pesait autant
     qu'un encart d'aide, et le prix se noyait au milieu des étiquettes de zone.
     Trois zones franches, désormais : LE VISAGE · CE QU'IL EST · SON PRIX. */
  position: relative; width: 100%; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px;
  border: 0; cursor: pointer; font-family: inherit;
  padding: 16px 18px; margin-bottom: 12px; border-radius: 18px;
  transition: transform .16s ease, box-shadow .16s ease, opacity .2s ease;
}
.sso-corps { min-width: 0; }
.sso-carte:hover { transform: translateY(-2px); box-shadow: var(--sso-ombre-lift); }
.sso-carte.sso-eteinte { opacity: .34; filter: grayscale(.55); }   /* hors filtre : montré, jamais caché */
.sso-carte.sso-choisie { box-shadow: 0 0 0 2px var(--sso-emeraude), var(--sso-ombre-lift); }

/* côté mains : le jade clair — celles et ceux qui donnent le soin.
   ⛔ 23/08 : c'était un crème doré sur un marbre doré, donc rien. Une carte doit se
   détacher de son fond, sinon la personne qu'elle porte n'existe pas à l'écran. */
.sso-carte-main {
  background: linear-gradient(180deg, #ffffff 0%, var(--sso-jade-voile) 100%);
  border: 1.5px solid var(--sso-jade-bord);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.65),
              0 3px 12px rgba(11,48,38,.10);
}
.sso-carte-main:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.75),
                                    0 12px 30px rgba(11,48,38,.20), 0 0 22px rgba(63,168,138,.30); }
/* côté appels : l'améthyste — celles et ceux qui appellent.
   ⛔ Le rose du 19/08 partait du même chaud que l'or : deux mondes qui se font face ne
   peuvent pas être deux nuances de la même chaleur, ou l'œil ne voit qu'une seule scène. */
.sso-carte-appel {
  background: linear-gradient(180deg, #ffffff 0%, var(--sso-amethyste-v) 100%);
  border: 1.5px solid var(--sso-amethyste-b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.65),
              0 3px 12px rgba(60,35,90,.10);
}
.sso-carte-appel:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
                                     0 12px 30px rgba(60,35,90,.18), 0 0 22px rgba(107,74,143,.24); }

/* ⛔ LE MOMENT QU'ON NE VOIT PAS VENIR : une lumière glisse sur la carte au survol.
   C'est le geste rare du studio — un seul, et il ne se déclenche qu'à l'approche. */
.sso-carte::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,250,230,.72) 48%, transparent 60%);
  transform: translateX(-120%); opacity: 0;
}
.sso-carte:hover::after { animation: ssoLueur .85s ease-out forwards; }
@keyframes ssoLueur {
  0%   { transform: translateX(-120%); opacity: 0; }
  22%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* le médaillon — ⛔ il MONTE, il ne se centre pas : centré, il passait par-dessus
   le nom dès qu'il tenait sur deux lignes (bulle de Maha illisible, 20/08) */
.sso-medaillon {
  width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sso-serif); font-size: 23px; font-weight: 700; color: var(--sso-emeraude-f);
  background: url('/arbre/img/marbre.webp') center/cover, #f6efdf;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8),
              0 0 0 2px var(--sso-jade-bord), 0 0 0 3px rgba(255,255,255,.9),
              0 2px 6px rgba(11,48,38,.18);
}
.sso-carte-appel .sso-medaillon { color: var(--sso-amethyste-f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 2px var(--sso-amethyste-b),
              0 0 0 3px rgba(255,255,255,.9), 0 2px 6px rgba(60,35,90,.18); }

.sso-nom {
  /* ⛔⛔ 24/08, Maha : « ça se marche dessus ». Le sceau débordait de sa colonne et
     passait SOUS le lingot du prix. Un texte plus court ne suffit pas à garantir ça :
     le jour où quelqu'un aura un nom long, ça recommencera. La ligne du nom est donc
     bornée (`min-width:0` + `max-width:100%`), et le sceau ne peut plus s'échapper —
     il se coupe proprement plutôt que d'aller marcher sur le voisin. */
  font-family: var(--sso-serif); font-size: 23px; font-weight: 700; line-height: 1.18;
  color: var(--sso-encre); display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  min-width: 0; max-width: 100%;
}
.sso-quoi { font-size: 16px; color: var(--sso-encre-doux); margin-top: 4px; line-height: 1.42; display: block; }
.sso-quoi-vide { font-style: italic; opacity: .6; }
.sso-pied { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* La zone à traiter — la donnée qui rend le croisement possible */
/* ⛔ Les zones prenaient TROIS lignes de pastilles et pesaient autant que le nom.
   Ce sont des métadonnées : elles s'écrivent en filet, elles ne se déguisent plus. */
.sso-zones-txt {
  display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600;
  color: var(--sso-emeraude); opacity: .92; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sso-carte-appel .sso-zones-txt { color: var(--sso-amethyste); }
.sso-zone {
  font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px;
  background: rgba(255,255,255,.85); border: 1px solid var(--sso-jade-bord);
  color: var(--sso-emeraude);
}
.sso-carte-appel .sso-zone { background: rgba(255,255,255,.9); border-color: var(--sso-amethyste-b); color: var(--sso-amethyste); }

/* LE PRIX — le sujet de cet écran, donc le plus gros caractère de la carte.
   Côté mains : un lingot de vraie matière. Côté appels : une pastille claire. */
.sso-prix {
  flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; min-width: 74px; align-self: center;
}
/* « offert » mérite un lingot lui aussi — c'est un DON, pas une absence de prix.
   Même moule, même biseau, mais l'or y est clair : un lingot de lumière. */
.sso-prix-offert {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 76px; padding: 13px 15px;
  border-radius: 7px / 9px;
  font: 800 16px/1 var(--sso-sans); color: #3a2705; letter-spacing: .01em;
  background-image: linear-gradient(135deg,#FDF0C4 0%,#F6E2A6 42%,#E8CD86 72%,#D2B36A 100%);
  border: 0;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,252,.98), inset 0 -2px 0 rgba(160,122,38,.34),
    inset 0 0 0 1px rgba(184,146,60,.5),
    0 3px 8px rgba(120,90,20,.22);
  text-shadow: 0 1px 0 rgba(255,254,242,.9);
}
/* ⛔ 23/08 — LE PRIX D'UNE MAIN QUI NE PEUT PAS ENCORE ENCAISSER.
   Ni un lingot (il promet une caisse ouverte), ni rien (on cacherait le tarif) : le prix
   reste lisible, en creux, et le mot « bientôt » dit ce qui manque. Un tarif qu'on ne peut
   pas régler doit se voir comme tel AVANT qu'on s'engage, pas après avoir tout rempli. */
/* ⛔ « BIENTÔT » — c'est LE MÊME LINGOT, pas un autre objet : le prix est vrai, c'est la
   caisse qui n'est pas ouverte. Un pointillé terne disait « ce tarif n'est pas sérieux » ;
   ici on garde l'or, on le met simplement en sourdine (le métal n'a pas encore sa
   lumière), et un bandeau émeraude dit ce qui manque. Le désir reste, l'attente est dite. */
.sso-prix-bientot {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 76px; padding: 9px 16px 7px;
  border-radius: 7px / 9px;
  /* le même or, une nuance plus douce — pas un or éteint : un or qui attend */
  background-image: linear-gradient(135deg,#F7E2AE 0%,#EFD199 42%,#D8B879 72%,#B99A5F 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,253,242,.95), inset 0 -2px 0 rgba(120,90,30,.34),
    inset 0 0 0 1px rgba(150,116,44,.45),
    0 2px 6px rgba(84,58,8,.20);
  font: 800 24px/1 var(--sso-sans); color: #23180a;
  text-shadow: 0 1px 0 rgba(255,250,230,.8);
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-prix-bientot small { font-size: 12px; font-weight: 700; opacity: .8; }
/* ⛔ 24/08, Maha : « le vert sur doré, ça ne va pas ». Juste — l'émeraude et l'or sont
   deux matières nobles, mais l'une POSÉE SUR l'autre fait tache : le vert devient une
   étiquette collée sur un lingot. Deux matières se font FACE (les deux colonnes du
   salon), elles ne s'empilent pas. Le mot se grave donc DANS l'or : encre sombre,
   fond en creux, liseré clair — comme une frappe dans le métal. */
.sso-prix-bientot b {
  display: block; margin-top: 5px; padding: 3px 9px; border-radius: 999px;
  font: 800 9.5px/1.35 var(--sso-sans); letter-spacing: .1em; text-transform: uppercase;
  color: #4a3505;
  background: rgba(120,88,22,.16);
  box-shadow: inset 0 1px 1px rgba(96,68,12,.30), 0 1px 0 rgba(255,250,228,.6);
  text-shadow: 0 1px 0 rgba(255,250,230,.55);
}
.sso-prix-flamme { font: 700 15px/1.3 var(--sso-sans); color: var(--sso-or-lisible); }
.sso-prix-flamme small { font-size: 11.5px; font-weight: 700; }
/* ═══ LE LINGOT — 23/08, demande de Maha : « crée un meilleur bouton de trente euro,
   il faut mettre les boutons en lingot ». Ce n'est plus une pastille dorée : c'est un
   OBJET. Ce qui fait lire « lingot », ce n'est pas la couleur, c'est le BISEAU — quatre
   arêtes éclairées différemment, comme un métal coulé dans un moule :
     · l'arête du haut prend la lumière (liseré presque blanc),
     · les flancs la perdent progressivement,
     · l'arête du bas est dans son ombre propre,
     · et l'objet pose une ombre portée SOUS lui, jamais autour.
   ⛔ La matière reste la vraie photo `gold-ecrin.jpg` (loi 4 du studio : aucun dégradé
   CSS n'imite l'or). Le voile clair par-dessus ne sert qu'à garder l'encre lisible :
   la lumière se pose sur la MATIÈRE, jamais sur l'élément (`filter:brightness` éclaircit
   aussi le texte — piège déjà payé le 21/08). ═══════════════════════════════════════ */
.sso-lingot {
  position: relative;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 76px; padding: 11px 17px 10px;
  border-radius: 7px / 9px;
  /* ⛔⛔ 24/08, Maha : « ces boutons sont moches, la couleur grise ne va pas ».
     Il avait raison, et c'était ma faute : j'avais posé un voile clair PAR-DESSUS la
     photo d'or pour garder l'encre lisible… et le voile a lavé l'or. À 60 % d'opacité,
     une photo dorée devient un beige gris. J'ai protégé la lisibilité en tuant la matière.
     ⛔ LA LEÇON : on ne rend pas un or lisible en l'éteignant. On prend l'or FRANC de la
     maison — le dégradé validé qui sert déjà aux pastilles et au bouton « Entrer en
     cercle » — et on assure la lecture par l'ENCRE (presque noire) et par un liseré clair
     sous les lettres. L'or reste de l'or, le texte reste net. */
  background-image: linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  border: 0;
  box-shadow:
    inset 0 1.5px 0 rgba(255,251,232,.95),      /* l'arête du haut, sous la lumière */
    inset 1.5px 0 0 rgba(255,243,206,.42),      /* le flanc gauche */
    inset -1.5px 0 0 rgba(140,100,20,.30),      /* le flanc droit, qui s'éteint */
    inset 0 -2px 0 rgba(104,72,10,.55),         /* l'arête du bas, dans son ombre */
    inset 0 0 0 1px rgba(120,86,16,.55),        /* le trait du moule */
    0 3px 7px rgba(84,58,8,.30),                /* l'ombre portée : dessous, pas autour */
    0 1px 2px rgba(84,58,8,.22);
  font: 800 26px/1 var(--sso-sans); color: #23180a;
  text-shadow: 0 1px 0 rgba(255,247,214,.85);
  font-variant-numeric: lining-nums tabular-nums;
  transition: transform .14s ease, box-shadow .14s ease;
}
/* l'éclat du poli : une bande claire en travers, immobile — un lingot ne scintille pas */
.sso-lingot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,250,.55) 0%, rgba(255,253,240,.16) 24%,
                              transparent 42%, rgba(120,84,14,.10) 100%);
}
.sso-carte:hover .sso-lingot {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,254,246,.98), inset 1.5px 0 0 rgba(255,247,218,.55),
    inset -1.5px 0 0 rgba(140,100,20,.28), inset 0 -2px 0 rgba(104,72,10,.5),
    inset 0 0 0 1px rgba(120,86,16,.5),
    0 6px 14px rgba(84,58,8,.34), 0 1px 2px rgba(84,58,8,.22);
}
.sso-lingot small { font-size: 12.5px; font-weight: 700; opacity: .85; margin-top: 1px; }
.sso-budget-max {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 10px 15px; border-radius: 10px;
  background: rgba(255,255,255,.96); border: 1.5px solid var(--sso-amethyste-b);
  font: 800 24px/1 var(--sso-sans); color: var(--sso-amethyste-f);
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-budget-max small { font-size: 12px; font-weight: 700; color: var(--sso-amethyste); }

/* « Je n'ai pas d'argent » — une réponse digne et prévue, jamais un défaut.
   Décision Maha 21/08 : c'est la Flamme d'Or qui répond. */
.sso-sans-moyens {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 8px;
  background: linear-gradient(180deg, #fffaf0, #f8edd4);
  border: 1px solid rgba(193,144,31,.5);
  font: 700 14px/1 var(--sso-sans); color: var(--sso-or-lisible);
}

/* Le sceau des thérapeutes de l'École */
.sso-sceau {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 12.5px/1 var(--sso-sans); letter-spacing: .04em; text-transform: uppercase;
  /* ⛔⛔ 23/08 — C'ÉTAIT LE DERNIER GROS BLOC KAKI DE L'ÉCRAN : un lingot plein posé
     juste à côté du nom, qui passait sur DEUX LIGNES sur téléphone et repoussait le
     soin en dessous. Un sceau atteste, il ne pavoise pas : l'or passe dans le TRAIT
     et dans la lettre, plus dans la masse. Il en devient plus précieux, pas moins. */
  padding: 4px 10px; border-radius: 999px; color: var(--sso-or-lisible);
  background: rgba(255,252,244,.96);
  border: 1px solid rgba(193,144,31,.75);
  white-space: nowrap; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.sso-carte-certifiee { box-shadow: 0 0 0 1px rgba(193,144,31,.5), 0 0 20px rgba(224,178,74,.3), var(--sso-ombre); }

/* Le voyant de présence */
.sso-led { width: 9px; height: 9px; border-radius: 50%; background: #cfc7b8; flex: 0 0 auto; }
.sso-led.on { background: var(--sso-vert); box-shadow: 0 0 0 3px rgba(47,158,107,.22); animation: ssoBat 2.4s ease-in-out infinite; }
@keyframes ssoBat { 0%,100% { box-shadow: 0 0 0 3px rgba(47,158,107,.22); } 50% { box-shadow: 0 0 0 6px rgba(47,158,107,.05); } }
.sso-en-ligne { font-size: 12.5px; color: var(--sso-vert); font-weight: 700; }

/* La raison du rapprochement — ⛔ si la distance ne s'explique pas, elle ment */
.sso-raisons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sso-raison {
  font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: rgba(14,107,82,.10); color: var(--sso-emeraude); border: 1px solid rgba(14,107,82,.26);
}
.sso-raison.sso-hors-budget { background: rgba(190,52,52,.1); color: #a32f2f; border-color: rgba(190,52,52,.35); }

/* Le vide, dit avec dignité — jamais de faux « exemple » (retirés le 21/08) */
.sso-vide { text-align: center; padding: 22px 18px; background: none; border: 0; }
.sso-vide-titre { font-family: var(--sso-serif); font-size: 21px; color: var(--sso-emeraude); font-weight: 700; }
.sso-vide-txt { font-size: 15px; color: var(--sso-encre-doux); margin-top: 7px; line-height: 1.55; }

/* ── La barre de dépôt : la barre d'écriture du chat, devenue le geste du Salon ── */
.sso-depot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-top: 1px solid rgba(14,107,82,.22);
  background: linear-gradient(180deg, rgba(253,250,242,.94), rgba(240,247,243,.97));
  font-family: var(--sso-sans);
}
.sso-depot-champ {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid var(--sso-jade-bord); border-radius: 999px;
  padding: 11px 18px; cursor: text; color: var(--sso-encre-doux); font-size: 15.5px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sso-depot-champ:hover { border-color: var(--sso-emeraude); box-shadow: var(--sso-ombre); }
/* ⛔⛔ 23/08 — LA RAISON N°1 DU « MARRON » : LE LINGOT D'OR ÉTAIT SUR TOUS LES BOUTONS.
   « Proposer », « Offrir », « Je soigne », les onglets, les filtres : six lingots par
   écran. Un or qu'on voit six fois n'est plus de l'or, c'est du bronze — et l'écran
   entier vire au kaki. L'action courante passe donc en émeraude pleine ; l'or est
   gardé pour UN SEUL bouton par écran, celui de la barre du bas (voir plus bas).
   C'est la loi du studio : le luxe n'est pas l'absence de geste, c'est sa RARETÉ. */
.sso-btn {
  appearance: none; cursor: pointer; font-family: var(--sso-sans);
  font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 999px;
  color: #f2fbf7; white-space: nowrap;
  background-image: linear-gradient(180deg, #12866b 0%, #0e6b52 55%, #0a5741 100%);
  border: 1px solid rgba(4,40,31,.5);
  box-shadow: inset 0 1px 0 rgba(160,235,208,.42), 0 2px 8px rgba(7,61,47,.28);
  text-shadow: 0 1px 1px rgba(4,32,24,.35);
  transition: transform .14s ease, box-shadow .14s ease;
}
.sso-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(160,235,208,.5), 0 6px 18px rgba(7,61,47,.36); }
.sso-btn-nu {
  background: rgba(255,255,255,.9); background-image: none; color: var(--sso-emeraude);
  border: 1.5px solid var(--sso-jade-bord); filter: none; text-shadow: none;
  box-shadow: var(--sso-ombre);
}
.sso-btn-nu:hover { background: #ffffff; border-color: var(--sso-emeraude); }

/* ⛔ 23/08 (2ᵉ passe) — J'AVAIS GARDÉ UN LINGOT D'OR ICI, MAHA L'A TRANCHÉ :
   « t'as laissé le bouton marron ». Mon raisonnement — un or rare redevient précieux —
   tenait sur le papier ; à l'écran, ce bouton restait le seul bloc chaud d'une scène
   devenue froide, donc il ne lisait pas « précieux », il lisait « oublié ».
   ⛔ Une exception esthétique qui doit s'expliquer n'est pas une exception : c'est
   un reste. Le geste principal prend l'émeraude comme tous les autres — et l'or
   ne subsiste plus que là où il n'est pas un bouton : le prix, le sceau, la Flamme.
   Le geste principal se distingue par sa TAILLE et sa PLACE, pas par sa couleur. */
.sso-depot .sso-btn:not(.sso-btn-nu) {
  padding: 13px 24px; font-size: 15.5px;
  box-shadow: inset 0 1px 0 rgba(160,235,208,.45), 0 3px 12px rgba(7,61,47,.30);
}
.sso-depot .sso-btn:not(.sso-btn-nu):hover {
  box-shadow: inset 0 1px 0 rgba(160,235,208,.55), 0 7px 20px rgba(7,61,47,.38);
}

/* ── Le panneau (dépôt, rendez-vous, paiement) — DANS le salon, jamais par-dessus l'app ── */
.sso-panneau {
  position: absolute; inset: 0; z-index: 6;
  background: rgba(253,250,242,.97); backdrop-filter: blur(3px);
  display: flex; flex-direction: column; overflow: hidden;
}
.sso-panneau-tete {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid rgba(14,107,82,.22);
}
.sso-panneau-titre { font-family: var(--sso-serif); font-size: 23px; font-weight: 700; color: var(--sso-emeraude-f); flex: 1 1 auto; }
.sso-fermer {
  appearance: none; border: 1px solid var(--sso-jade-bord); background: rgba(255,255,255,.85);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 19px;
  color: var(--sso-encre); line-height: 1;
}
.sso-panneau-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; }
/* ⛔ Vu sur téléphone : la dernière phrase était tranchée net par le bord du panneau,
   sans que rien ne dise qu'il y avait une suite. Ce voile de bas de page le dit. */
.sso-panneau { position: absolute; }
.sso-panneau::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px;
  background: linear-gradient(rgba(253,250,242,0), rgba(253,250,242,.96));
  pointer-events: none;
}

.sso-champ { margin-bottom: 16px; }
.sso-champ label { display: block; font-size: 14.5px; font-weight: 700; color: var(--sso-encre); margin-bottom: 7px; }
.sso-champ .sso-aide { font-weight: 500; color: var(--sso-encre-doux); font-size: 13.5px; }
.sso-champ input[type=text], .sso-champ input[type=email], .sso-champ input[type=number], .sso-champ textarea, .sso-champ select {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--sso-jade-bord); border-radius: 12px;
  background: #fff; color: var(--sso-encre);
  font: 500 16px/1.45 var(--sso-sans); padding: 12px 14px;
}
.sso-champ textarea { min-height: 92px; resize: vertical; }
.sso-champ input:focus, .sso-champ textarea:focus, .sso-champ select:focus {
  outline: none; border-color: var(--sso-emeraude); box-shadow: 0 0 0 3px rgba(14,107,82,.16);
}
.sso-zones-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.sso-serment {
  margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--sso-encre-doux);
  background: rgba(255,255,255,.75); border-left: 3px solid var(--sso-jade);
  padding: 11px 14px; border-radius: 0 10px 10px 0;
}
.sso-erreur {
  background: rgba(190,52,52,.09); border: 1px solid rgba(190,52,52,.35); color: #a32f2f;
  padding: 11px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; margin-bottom: 14px;
}
.sso-succes {
  background: rgba(47,158,107,.1); border: 1px solid rgba(47,158,107,.4); color: #1d7a50;
  padding: 11px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 600; margin-bottom: 14px;
}

/* Les créneaux de rendez-vous */
.sso-jour { margin-bottom: 16px; }
.sso-jour-titre { font-family: var(--sso-serif); font-size: 18px; font-weight: 700; color: var(--sso-emeraude); margin-bottom: 8px; text-transform: capitalize; }
.sso-heures { display: flex; flex-wrap: wrap; gap: 8px; }
.sso-heure {
  appearance: none; cursor: pointer; font: 700 16px/1 var(--sso-sans);
  padding: 11px 16px; border-radius: 12px; min-width: 74px;
  background: #fff; border: 1.5px solid var(--sso-jade-bord); color: var(--sso-encre);
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-heure[aria-pressed="true"] {
  background: linear-gradient(180deg, #12866b 0%, #0e6b52 100%); color: #f2fbf7;
  border-color: rgba(4,40,31,.45); box-shadow: inset 0 1px 0 rgba(160,235,208,.4);
}



/* Les listes défilent chacune de leur côté sur grand écran, la page jamais */
.sso-liste::-webkit-scrollbar { width: 9px; }
.sso-liste::-webkit-scrollbar-thumb { background: rgba(14,107,82,.28); border-radius: 9px; }
.sso-liste::-webkit-scrollbar-track { background: transparent; }


/* ── L'invitation en pied de colonne (21/08) ──────────────────────────────────
   Une colonne presque vide sous un axe d'or de 800 px ne dit qu'une chose :
   « il n'y a personne ». Cette carte occupe la place ET sert le seul but qui
   compte aujourd'hui — faire venir des mains, et faire parler ceux qui souffrent. */
/* ⛔ Sept cadres identiques à l'écran : la carte d'un humain avait le même poids
   qu'un encart d'aide. Tout ce qui n'est pas une personne perd sa matière — plus de
   fond, plus de liseré : du texte posé sur le marbre. Seuls les êtres gardent le relief. */
.sso-invite {
  margin: 10px 0 14px; padding: 4px 4px 4px 2px; border-radius: 0;
  background: none; border: 0; border-top: 1px solid rgba(14,107,82,.22);
  padding-top: 14px; display: flex; align-items: center; gap: 14px;
}
.sso-invite-txt { flex: 1 1 auto; min-width: 0; }
.sso-invite-titre { font-family: var(--sso-serif); font-size: 19px; font-weight: 700; color: var(--sso-emeraude); }
.sso-invite-sous { font-size: 14px; color: var(--sso-encre-doux); margin-top: 3px; line-height: 1.45; }



/* ── LA PORTE DANS LA BARRE LATÉRALE ────────────────────────────────────────
   Discrète, à la façon des autres cartes de la Family (Arbre à Liens, MAHA TV),
   mais elle porte ce qui s'y passe VRAIMENT : « 2 personnes attendent · 3 mains ».
   Une porte qui annonce du monde derrière elle donne envie de l'ouvrir. */
.sso-porte {
  display: flex; align-items: center; gap: 11px; width: calc(100% - 24px);
  margin: 8px 12px; padding: 10px 13px; border-radius: 14px; cursor: pointer;
  background: rgba(255,253,247,.94); border: 1px solid rgba(178,138,60,.4);
  box-shadow: 0 1px 6px rgba(70,52,16,.07); text-align: left;
  font-family: 'Cormorant Garamond', Georgia, serif;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.sso-porte:hover { background: #fffdf4; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(70,52,16,.14); }
.sso-porte-boule {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: url('/arbre/img/golden-ball.png') center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(122,84,10,.35));
}
.sso-porte-txt { flex: 1 1 auto; min-width: 0; }
.sso-porte-nom { display: block; font-size: 18px; font-weight: 600; color: var(--sso-encre); line-height: 1.15; }
.sso-porte-sous {
  display: block; font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px; color: #55665f; margin-top: 2px; line-height: 1.3;
}
.sso-porte-pastille {
  flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 700; color: #231703;
  background: linear-gradient(135deg, #F4D58A, #E8C078 42%, #C9A253 72%, #A07840);
  border: 1px solid rgba(160,120,64,.6);
}
.sso-porte-pastille[hidden] { display: none; }


/* ── « Votre rencontre » — le chemin de retour, toujours visible ───────────── */
.sso-miennes { flex: 0 0 auto; padding: 10px 18px 2px; display: flex; flex-direction: column; gap: 8px; }
.sso-mienne {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: 14px; font-family: var(--sso-sans);
  background: linear-gradient(180deg, #ffffff, var(--sso-jade-voile));
  border: 1.5px solid var(--sso-jade-bord); box-shadow: var(--sso-ombre);
}
.sso-mienne:hover { box-shadow: var(--sso-ombre-lift); transform: translateY(-1px); }
.sso-mienne-p { font-family: var(--sso-serif); font-size: 18px; font-weight: 700; color: var(--sso-encre); flex: 0 0 auto; }
.sso-mienne-q { font-size: 14px; color: var(--sso-emeraude); font-weight: 600; flex: 1 1 auto; }
.sso-mienne-fl { font-size: 22px; color: var(--sso-jade); flex: 0 0 auto; }
/* ⛔⛔ 23/08 (2ᵉ passe) — LA BASCULE ÉTAIT TROP BASSE : 900 px.
   Entre 900 et ~1300 px (tablette en paysage, fenêtre de navigateur réduite sur un
   grand écran), on gardait DEUX colonnes face à face dans ~250 px chacune : le prix
   recouvrait le nom, « offert » passait par-dessus le sceau, les cartes se
   chevauchaient. Personne ne l'avait vu parce qu'on ne teste que 390 et 1920 —
   les largeurs du milieu n'existaient pour personne. Elle passe à 1150 px.
   ⛔ Le JS porte le MÊME seuil (les fils d'or ne se tendent qu'en deux colonnes) :
   les deux doivent bouger ensemble, sinon on tend des fils dans une vue empilée. */
@media (max-width: 1150px) {
  .sso-mienne { flex-wrap: wrap; }
  .sso-mienne-q { flex: 1 1 100%; }
}


/* ── L'aide, dans le salon ─────────────────────────────────────────────────── */
.sso-aide-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--sso-jade-bord); background: rgba(255,255,255,.9);
  font: 700 17px/1 var(--sso-sans); color: var(--sso-emeraude);
}
.sso-aide-btn:hover { background: #fffdf4; box-shadow: var(--sso-ombre); }
.sso-aide-bloc {
  background: rgba(252,254,253,.9); border: 1px solid rgba(14,107,82,.24);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 14px;
}
.sso-aide-titre { font-family: var(--sso-serif); font-size: 21px; font-weight: 700; color: var(--sso-emeraude); margin-bottom: 8px; }
.sso-pas { margin: 0 0 10px; padding-left: 22px; }
.sso-pas li { font-size: 15.5px; line-height: 1.55; color: var(--sso-encre); margin-bottom: 6px; }
.sso-aide-p { font-size: 15px; line-height: 1.55; color: var(--sso-encre-doux); margin: 0; }
a.sso-btn { text-decoration: none; display: inline-block; }


/* ── La bascule Mains / Qui appelle (téléphone seulement) ─────────────────── */
.sso-bascule { display: none; }


/* ── Les 3 pas : ce qui occupe la place quand il n'y a encore personne ────── */
.sso-trois { margin: 4px 0 14px; padding: 2px; background: none; border: 0; }
.sso-trois-t {
  font-family: var(--sso-serif); font-size: 18px; font-weight: 700;
  color: var(--sso-emeraude); margin-bottom: 8px;
}
.sso-trois-l { margin: 0; padding-left: 20px; }
.sso-trois-l li { font-size: 14px; line-height: 1.5; color: var(--sso-encre-doux); opacity: .9; margin-bottom: 5px; }
.sso-trois-l b { color: var(--sso-encre); font-weight: 700; }
/* deux longueurs pour un même mot : la place n'est pas la même sur un téléphone */
.sso-depot-court { display: none; }


/* ── Le garde-mots à l'écran ──────────────────────────────────────────────────
   Il n'accuse pas : il explique ce que le mot coûte, et propose autre chose
   à un geste. Une mise en garde qui ne propose rien est un reproche. */
.sso-mots { margin-top: 10px; padding: 12px 14px; border-radius: 12px; }
.sso-mots-prudence { background: rgba(193,144,31,.10); border: 1px solid rgba(193,144,31,.45); }
.sso-mots-interdit { background: rgba(190,52,52,.09); border: 1px solid rgba(190,52,52,.45); }
.sso-mots-t { font: 700 15px/1.3 var(--sso-sans); margin-bottom: 5px; }
.sso-mots-prudence .sso-mots-t { color: var(--sso-or-lisible); }
.sso-mots-interdit .sso-mots-t { color: #a32f2f; }
.sso-mots-m { font-size: 14px; line-height: 1.55; color: var(--sso-encre); }
.sso-mots-alt { margin-top: 9px; font-size: 13.5px; color: var(--sso-encre-doux); }
.sso-mots-b {
  appearance: none; cursor: pointer; margin: 4px 4px 0 0;
  padding: 6px 12px; border-radius: 999px; font: 600 13.5px/1 var(--sso-sans);
  background: rgba(255,255,255,.9); border: 1px solid rgba(193,144,31,.5); color: var(--sso-or-lisible);
}
.sso-mots-b:hover { background: #fffdf4; box-shadow: var(--sso-ombre); }


/* ── Offrir un soin : la Flamme d'Or devient un geste ────────────────────── */
.sso-flamme { cursor: pointer; font-family: var(--sso-sans); }
.sso-flamme:hover { box-shadow: var(--sso-ombre-lift); }
/* ⛔ 23/08 — « Offrir » était le 3ᵉ lingot plein de l'écran de téléphone. L'or
   plein ne reste que sur DEUX choses : le prix d'un soin, et le geste principal de
   la barre du bas. Ici, le trait suffit — et le don n'y perd rien. */
.sso-flamme-plus {
  margin-left: 8px; padding: 4px 11px; border-radius: 999px;
  font: 700 12.5px/1 var(--sso-sans); color: var(--sso-or-lisible);
  background-image: none; background-color: rgba(255,252,244,.96);
  border: 1px solid rgba(107,77,12,.45);
}
.sso-don-tete { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.sso-don-tete .sso-flamme-feu { width: 26px; height: 34px; flex: 0 0 auto; }
.sso-don-tete .sso-flamme-feu i:nth-child(1) { width: 22px; height: 32px; }
.sso-don-tete .sso-flamme-feu i:nth-child(2) { width: 15px; height: 24px; }
.sso-don-tete .sso-flamme-feu i:nth-child(3) { width: 8px;  height: 13px; }
.sso-don-t { font-family: var(--sso-serif); font-size: 23px; font-weight: 700; color: var(--sso-or-lisible); }
.sso-don-s { font-size: 15px; line-height: 1.55; color: var(--sso-encre); margin-top: 4px; }
.sso-dons { display: flex; flex-wrap: wrap; gap: 9px; }
.sso-don-m { font-size: 16px; font-weight: 800; padding: 11px 16px; }
.sso-don-m small { font-weight: 600; font-size: 12.5px; opacity: .8; }
.sso-carte-bancaire {
  background: #fff; border: 1.5px solid var(--sso-jade-bord);
  border-radius: 12px; padding: 14px; margin-top: 6px;
}
/* ⛔ Vu à l'écran : une bande blanche vide s'affichait avant même qu'on ait cliqué
   « Offrir ». Un cadre sans contenu inquiète — le guichet n'apparaît qu'au moment
   où il a quelque chose à demander. */
.sso-carte-bancaire:empty { display: none; }


/* ── ⛔ LES CHAMPS DE SAISIE, REPRIS DE FORCE (21/08, vu sur téléphone) ───────
   Sur téléphone, mes `input` s'affichaient TRANSLUCIDES : le marbre passait au
   travers et le texte tapé devenait illisible. La Family applique ses propres
   règles de formulaire, plus spécifiques que les miennes — exactement le piège
   « feuille servie sous un marbre injecté » déjà payé sur l'espace pro.
   On reprend la main avec une spécificité qui gagne, et `-webkit-text-fill-color`
   qui est la seule arme contre un texte repeint ailleurs. */
body .sso .sso-champ input[type="text"],
body .sso .sso-champ input[type="email"],
body .sso .sso-champ input[type="number"],
body .sso .sso-champ textarea,
body .sso .sso-champ select {
  background: #ffffff !important;
  color: var(--sso-encre) !important;
  -webkit-text-fill-color: var(--sso-encre) !important;
  border: 1.5px solid rgba(193,144,31,.45) !important;
  opacity: 1 !important;
  -webkit-appearance: none;
}
body .sso .sso-champ input::placeholder,
body .sso .sso-champ textarea::placeholder {
  color: #9a9186 !important; -webkit-text-fill-color: #9a9186 !important; opacity: 1 !important;
}


/* La barre réduite à l'essentiel tant qu'il n'y a personne à trier */
.sso-barre-nue {
  justify-content: flex-end; gap: 9px; padding: 8px 18px 0;
  background: none; backdrop-filter: none; border-bottom: 0;
}
.sso-barre-nue .sso-flamme {
  background: none; border: 1px solid rgba(193,144,31,.32); box-shadow: none;
  font-size: 13.5px; padding: 5px 12px 5px 8px;
}
.sso-barre-nue .sso-flamme b { font-size: 15px; }
.sso-barre-nue .sso-aide-btn { width: 30px; height: 30px; font-size: 15px; background: none; }


/* le voyant et son mot ne se séparent jamais, même quand la ligne passe à la suivante */
.sso-presence { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }


/* Ceux qui ont déjà offert — la gratitude commence par être visible */
.sso-don-gens { margin: 14px 0 4px; }
.sso-don-gens-t {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sso-encre-doux); font-weight: 700; margin-bottom: 7px;
}
.sso-don-g {
  display: inline-block; margin: 0 6px 6px 0; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.85); border: 1px solid rgba(193,144,31,.4);
  font-size: 14px; color: var(--sso-encre);
}
.sso-don-g b { color: var(--sso-or-lisible); font-variant-numeric: lining-nums tabular-nums; }


.sso-zone-plus { background: rgba(193,144,31,.16); font-weight: 800; }


/* ── « De quel côté suis-je ? » ───────────────────────────────────────────────
   La première personne réelle a rempli le mauvais formulaire : elle a écrit son
   soin dans le champ des gens qui cherchent. Les deux panneaux étaient identiques
   à un titre près. Chacun porte maintenant la couleur de SA colonne et le dit. */
.sso-qui {
  padding: 12px 15px; border-radius: 13px; margin-bottom: 16px;
  font-size: 14.5px; line-height: 1.5; color: var(--sso-encre);
}
.sso-qui b { font-weight: 800; }
.sso-qui-main  { background: linear-gradient(180deg,#ffffff,var(--sso-jade-voile)); border: 1.5px solid var(--sso-jade-bord); }
.sso-qui-appel { background: linear-gradient(180deg,#ffffff,var(--sso-amethyste-v)); border: 1.5px solid var(--sso-amethyste-b); }
/* le panneau entier prend la teinte de son côté : on sait où on est d'un coup d'œil */
.sso-panneau-main  { background: linear-gradient(180deg, rgba(255,253,247,.98), rgba(252,247,236,.98)); }
.sso-panneau-appel { background: linear-gradient(180deg, rgba(255,252,253,.98), rgba(253,246,249,.98)); }
.sso-panneau-appel .sso-panneau-titre { color: var(--sso-amethyste-f); }
.sso-panneau-appel::after { background: linear-gradient(rgba(253,246,249,0), rgba(253,246,249,.96)); }

/* ══ TÉLÉPHONE — DERNIÈRE feuille du fichier, pour qu'elle gagne toujours ══════
   ⛔ Règle payée le 20/08 : à spécificité égale, la dernière règle gagne.

   Vu à l'écran le 21/08 (2ᵉ passe, retour de Maha « sur mobile ça ne va pas ») :
   · « Qui appelle » était HORS ÉCRAN, sans que rien n'indique son existence
     → deux onglets, on bascule d'un monde à l'autre ;
   · le « ? » traînait seul sur une ligne → il rejoint la Flamme ;
   · l'invitation en 5 lignes volait la vedette à la vraie carte → une seule ligne ;
   · le bas mangeait 21 % de l'écran avec DEUX boutons qui disaient la même chose
     → un champ + un bouton court, sur une seule ligne. ═════════════════════════ */
@media (max-width: 1150px) {
  /* la scène : un seul monde à la fois */
  .sso-scene { grid-template-columns: 1fr; grid-template-rows: 1fr; overflow: hidden; }
  .sso-axe, .sso-fils { display: none; }        /* rien ne se fait face : ni axe, ni fils */
  .sso-col { overflow: hidden; }
  .sso-liste { overflow-y: auto; padding: 4px 13px 14px; -webkit-overflow-scrolling: touch; }
  .sso-col-tete { display: none; }              /* les onglets portent déjà le titre et le compte */
  .sso-scene[data-vuetel="mains"]  .sso-col-appels { display: none; }
  .sso-scene[data-vuetel="appels"] .sso-col-mains  { display: none; }

  /* ⛔ L'ordre comptait : on proposait de FILTRER avant même d'avoir choisi
     quel monde on regarde. Le choix du monde passe donc en premier. */
  .sso-miennes { order: 1; }
  .sso-bascule { order: 2; display: flex; gap: 8px; flex: 0 0 auto; padding: 10px 13px 4px; }
  .sso-barre   { order: 3; border-bottom: 0; border-top: 1px solid rgba(14,107,82,.18); }
  .sso-scene   { order: 4; }
  /* un point gris tout seul ne dit rien à personne : hors ligne, on n'affiche rien */
  .sso-led:not(.on) { display: none; }
  .sso-bsc {
    flex: 1 1 0; appearance: none; cursor: pointer; padding: 11px 8px; border-radius: 13px;
    font: 600 15.5px/1 var(--sso-sans); color: var(--sso-encre);
    background: rgba(255,255,255,.85); border: 1.5px solid var(--sso-jade-bord);
  }
  .sso-bsc b { font-weight: 800; color: var(--sso-emeraude); margin-left: 3px; }
  /* ⛔ 23/08 : c'étaient DEUX gros lingots d'or côte à côte en haut du téléphone —
     à eux seuls, l'écran devenait kaki. Un onglet dit « vous êtes ici », il ne se
     célèbre pas : aplat émeraude, franc, et l'or n'y est plus. */
  .sso-bsc[aria-pressed="true"] {
    background: linear-gradient(180deg, #12866b 0%, #0e6b52 100%);
    border-color: rgba(4,40,31,.45); color: #f2fbf7; font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(160,235,208,.4), 0 2px 8px rgba(7,61,47,.22);
  }
  .sso-bsc[aria-pressed="true"] b { color: #bff0dd; }

  /* la barre du haut : une seule ligne utile */
  .sso-barre { padding: 8px 13px 6px; gap: 8px; flex-wrap: wrap; }
  .sso-filtre-label { display: none; }
  /* la ligne était vide à gauche : la Flamme s'y installe, l'aide tient l'autre bord */
  .sso-flamme { order: 1; margin-right: auto; padding: 5px 10px 5px 7px; font-size: 12.5px; }
  .sso-flamme-plus { margin-left: 6px; padding: 3px 8px; font-size: 11.5px; }
  .sso-don-m { flex: 1 1 44%; }
  .sso-flamme b { font-size: 15px; }
  .sso-aide-btn { order: 2; width: 44px; height: 44px; font-size: 18px; }   /* 25/08 : un rond, pas un ovale */
  .sso-filtres { order: 3; flex: 1 1 100%; }
  .sso-chip { padding: 8px 13px; font-size: 13.5px; }

  /* les cartes : un cran plus sobre, pour en voir plus d'une */
  .sso-carte { padding: 11px 13px 11px 58px; margin-bottom: 9px; }
  .sso-medaillon { width: 34px; height: 34px; left: 12px; top: 12px; font-size: 15px; }
  .sso-nom { font-size: 17.5px; }
  .sso-quoi { font-size: 14.5px; }
  /* ⛔ 23/08 — sur téléphone, les zones se coupaient à « Dos & nuque · T… » : une
     ellipse après UN mot n'informe personne, elle dit juste « il y a autre chose ».
     Deux lignes pleines valent mieux qu'une ligne tronquée. */
  .sso-zones-txt {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; line-height: 1.35;
  }
  /* sur téléphone le lingot reste un lingot : on réduit sa taille, jamais son relief */
  .sso-lingot { font-size: 20px; padding: 8px 13px 7px; min-width: 64px; }
  .sso-lingot small { font-size: 11px; }
  .sso-prix-bientot { font-size: 19px; padding: 7px 12px 5px; min-width: 64px; }
  .sso-prix-bientot b { font-size: 8.5px; letter-spacing: .07em; padding: 2px 6px; }
  .sso-prix-offert { font-size: 14px; padding: 11px 12px; min-width: 64px; }
  /* ⛔ 24/08 — « Formé·e à la Giri Académie » est plus long que « Thérapeute Giri » :
     à 11,5 px il touchait le lingot. Il tient sur une ligne, un cran plus fin. */
  .sso-sceau { font-size: 10.5px; padding: 3px 8px; letter-spacing: .03em; }

  /* l'invitation : une ligne, pas un panneau */
  .sso-invite { padding: 12px 13px; gap: 10px; }
  .sso-invite-titre { font-size: 16.5px; }
  .sso-invite-sous { display: none; }           /* le bouton dit déjà quoi faire */
  .sso-invite .sso-btn { padding: 10px 15px; font-size: 14px; }

  /* la barre du bas : une seule ligne */
  .sso-depot { flex-wrap: nowrap; gap: 8px; padding: 9px 12px; }
  .sso-depot-champ { flex: 1 1 auto; padding: 11px 14px; font-size: 14.5px; white-space: nowrap;
                     overflow: hidden; text-overflow: ellipsis; }
  .sso-depot-long { display: none; }
  .sso-depot-court { display: inline; }
  /* ⛔ 23/08 — sur téléphone, le mode d'emploi se faisait TRANCHER en plein milieu
     d'une phrase (« … et à partir de quel prix ») par le bord de la liste : les trois
     pas ne tenaient pas. Un mode d'emploi coupé en deux n'apprend rien à personne.
     On resserre l'air perdu au-dessus, et les trois pas rentrent en entier. */
  /* ⛔ 23/08 — la liste tranchait sa dernière ligne NET, au ras du bord : sur une
     capture, ça se lit « c'est cassé », alors que ça défile très bien. Le contenu
     s'estompe désormais sur les 26 derniers pixels — il DIT qu'il continue.
     ⛔ Un masque, pas un voile posé par-dessus : un voile de la couleur du fond se
     verrait sur le marbre même quand la liste est courte et qu'il n'y a rien à cacher. */
  .sso-liste {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .sso-invite { margin: 6px 0 6px; padding-top: 10px; }
  .sso-trois { padding: 2px 2px 0; margin: 0 0 4px; }
  .sso-trois-t { font-size: 15.5px; margin-bottom: 5px; }
  .sso-trois-l { padding-left: 18px; }
  .sso-trois-l li { font-size: 13px; line-height: 1.42; margin-bottom: 3px; }
  .sso-btn { flex: 0 0 auto; padding: 11px 15px; font-size: 14.5px; }
  body[data-sso="on"] .sso-depot { margin-bottom: 94px; padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); }

  .sso-miennes { padding: 8px 13px 0; }
  .sso-mienne { flex-wrap: wrap; padding: 10px 13px; }
  .sso-mienne-p { font-size: 16.5px; }
  .sso-mienne-q { flex: 1 1 100%; font-size: 13.5px; }
  .sso-panneau-corps { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
  .sso-vide { padding: 22px 16px; }
  .sso-vide-titre { font-size: 18.5px; }
  .sso-vide-txt { font-size: 14.5px; }
}


/* ═══ 🕯️ LE VOILE D'ENTRÉE ═══════════════════════════════════════════════════
   Il couvre TOUT (z-index au-dessus du tiroir de l'Arbre à Liens, qui monte à
   99951 — le plus haut de la maison). Marbre de la maison, l'orbe qui respire,
   une phrase. Il ne se pose que si un salon a été demandé, et il se lève seul
   au bout de 5 s même si rien ne vient. ⛔ `pointer-events` reste actif : sans
   ça on toucherait les écrans du dessous sans les voir. ══════════════════════ */
#ssoVoile {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: #fdfaf2 url('/arbre/img/marbre.webp') center/cover no-repeat;
  opacity: 1; transition: opacity .45s ease;
}
#ssoVoile::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(253,250,242,.88), rgba(240,247,243,.94));
}
#ssoVoile > * { position: relative; }
.sso-voile-part { opacity: 0; pointer-events: none; }
.sso-voile-orbe {
  width: 76px; height: 76px;
  background: url('/arbre/img/golden-ball.png') center/contain no-repeat;
  filter: drop-shadow(0 6px 18px rgba(150,110,20,.42));
  animation: ssoVoileSouffle 2.6s ease-in-out infinite;
}
@keyframes ssoVoileSouffle {
  0%,100% { transform: scale(1);    opacity: .92; }
  50%     { transform: scale(1.07); opacity: 1; }
}
.sso-voile-mot {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px; font-weight: 600; letter-spacing: .01em;
  color: #0e6b52;
}
@media (prefers-reduced-motion: reduce) { .sso-voile-orbe { animation: none; } }

/* ═══ 📜 LA CHARTE DU SALON ═══════════════════════════════════════════════════
   Elle se lit une fois, elle engage longtemps : elle a donc droit à de l'air et à
   une vraie typographie. ⛔ Les articles mis en avant pour le rôle concerné portent
   un filet d'émeraude à gauche — on ne cache pas les autres, on guide l'œil. */
.sso-charte { display: flex; flex-direction: column; gap: 2px; }
.sso-art {
  padding: 13px 15px; border-radius: 12px;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,.55);
}
.sso-art + .sso-art { margin-top: 6px; }
.sso-art-fort {
  border-left-color: var(--sso-emeraude);
  background: rgba(232,244,239,.75);
}
.sso-art-t {
  font-family: var(--sso-serif); font-size: 18.5px; font-weight: 700;
  color: var(--sso-emeraude-f); margin-bottom: 4px; line-height: 1.2;
}
.sso-art-p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--sso-encre); }
.sso-charte-mention {
  margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--sso-encre-doux);
}
@media (max-width: 1150px) {
  .sso-art { padding: 11px 12px; }
  .sso-art-t { font-size: 17px; }
  .sso-art-p { font-size: 14.5px; line-height: 1.52; }
}

/* ═══ 👤 LA FICHE DU THÉRAPEUTE ═══════════════════════════════════════════════
   On y confie son corps ou sa peine : elle a droit à un vrai portrait et à de l'air. */
.sso-fiche-lien {
  display: inline-block; margin-top: 8px;
  font: 600 13.5px/1 var(--sso-sans); color: var(--sso-emeraude);
  border-bottom: 1px solid rgba(14,107,82,.35); padding-bottom: 2px; cursor: pointer;
}
.sso-fiche-lien:hover { color: var(--sso-emeraude-f); border-bottom-color: var(--sso-emeraude); }

.sso-fiche-tete { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.sso-fiche-photo {
  width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  background: url('/arbre/img/marbre.webp') center/cover;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 2px var(--sso-jade-bord),
              0 0 0 3px rgba(255,255,255,.9), 0 4px 12px rgba(11,48,38,.18);
}
.sso-fiche-photo-vide {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sso-serif); font-size: 34px; font-weight: 700; color: var(--sso-emeraude-f);
}
.sso-fiche-id { min-width: 0; }
.sso-fiche-quoi { font-size: 16.5px; color: var(--sso-encre); margin-top: 6px; line-height: 1.42; }
.sso-fiche-bloc { margin-bottom: 18px; }
.sso-fiche-t {
  font-family: var(--sso-serif); font-size: 19px; font-weight: 700;
  color: var(--sso-emeraude); margin-bottom: 7px;
}
.sso-fiche-p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--sso-encre); }
.sso-fiche-liste { margin: 0; padding-left: 20px; }
.sso-fiche-liste li { font-size: 15px; line-height: 1.55; color: var(--sso-encre); margin-bottom: 3px; }
/* ⛔ la mention qui donne sa valeur au parcours : il est relevé, pas raconté */
.sso-fiche-note { margin: 7px 0 0; font-size: 12.5px; color: var(--sso-encre-doux); font-style: italic; }
.sso-fiche-pied {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 16px; border-top: 1px solid rgba(14,107,82,.22);
}
.sso-fiche-pied .sso-btn { flex: 1 1 auto; min-width: 180px; }
@media (max-width: 1150px) {
  .sso-fiche-photo { width: 72px; height: 72px; }
  .sso-fiche-photo-vide { font-size: 27px; }
  .sso-fiche-t { font-size: 17.5px; }
  .sso-fiche-liste li, .sso-fiche-p { font-size: 14.5px; }
}

/* ═══ ✍️ L'ENGAGEMENT, DANS LE FORMULAIRE ════════════════════════════════════
   Il ne doit ni faire peur, ni se faire oublier : discret, mais lisible et présent
   au moment exact où l'on s'engage. */
.sso-engage {
  margin: 4px 0 2px; padding: 13px 15px; border-radius: 12px;
  background: rgba(232,244,239,.6); border-left: 3px solid var(--sso-emeraude);
}
.sso-engage-t {
  font: 700 14px/1.35 var(--sso-sans); color: var(--sso-emeraude-f); margin-bottom: 6px;
}
.sso-engage-l { margin: 0; padding-left: 18px; }
.sso-engage-l li { font-size: 13.5px; line-height: 1.5; color: var(--sso-encre); margin-bottom: 2px; }
.sso-engage-lien {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 6px 0 0;
  font: 600 13px/1 var(--sso-sans); color: var(--sso-emeraude);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ⛔ 24/08 — onze pastilles occupaient CINQ lignes sur téléphone : on ne voyait plus
   ni le champ du dessous, ni le bouton. Elles se resserrent, sans jamais descendre
   sous la cible tactile de 40 px (règle de la maison sur la cliquabilité). */
.sso-zones-menu .sso-choix-zone { font-size: 13.5px; padding: 9px 13px; }
@media (max-width: 1150px) {
  .sso-zones-choix { gap: 6px; }
  .sso-zones-menu .sso-choix-zone { font-size: 13px; padding: 9px 11px; min-height: 40px; }
}

/* ═══ 🚪 LA PREMIÈRE SECONDE ══════════════════════════════════════════════════
   Deux portes qu'on ne peut pas manquer. Elles occupent l'écran : c'est le seul
   moment de tout le Salon où l'on ne demande qu'UNE chose. */
.sso-accueil {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px 22px 34px; gap: 4px;
}
.sso-accueil-orbe {
  width: 72px; height: 72px; margin-bottom: 6px;
  background: url('/arbre/img/golden-ball.png') center/contain no-repeat;
  filter: drop-shadow(0 6px 18px rgba(150,110,20,.4));
}
.sso-accueil-t {
  font-family: var(--sso-serif); font-size: 34px; font-weight: 700; line-height: 1.1;
  color: var(--sso-encre); margin: 0;
}
.sso-accueil-p {
  font-size: 16.5px; line-height: 1.58; color: var(--sso-encre-doux);
  max-width: 480px; margin: 10px 0 0;
}
.sso-accueil-q {
  font-family: var(--sso-serif); font-size: 21px; font-weight: 700;
  color: var(--sso-emeraude); margin: 24px 0 12px;
}
.sso-accueil-portes {
  display: flex; gap: 14px; width: 100%; max-width: 720px; align-items: stretch;
}
.sso-porte-choix {
  /* ⛔ 24/08 — LES DEUX PORTES SE CHEVAUCHAIENT, texte par-dessus texte.
     `flex: 1 1 0` donne une base de ZÉRO : côte à côte c'est ce qu'on veut (deux
     colonnes égales), mais une fois EMPILÉES sur téléphone, chaque porte se
     comprimait à zéro et son sous-titre débordait par-dessus la suivante.
     La base ne vaut 0 que quand elles sont en ligne — voir la media query plus bas. */
  flex: 1 1 0; appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 7px; min-height: 0; height: auto;
  padding: 20px 20px 22px; border-radius: 18px; font-family: var(--sso-sans);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sso-porte-choix:hover { transform: translateY(-2px); box-shadow: var(--sso-ombre-lift); }
.sso-porte-recevoir {
  background: linear-gradient(180deg,#ffffff,var(--sso-amethyste-v));
  border: 1.5px solid var(--sso-amethyste-b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 12px rgba(60,35,90,.12);
}
.sso-porte-donner {
  background: linear-gradient(180deg,#ffffff,var(--sso-jade-voile));
  border: 1.5px solid var(--sso-jade-bord);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 12px rgba(11,48,38,.12);
}
.sso-porte-h {
  font-family: var(--sso-serif); font-size: 24px; font-weight: 700; line-height: 1.15;
  color: var(--sso-encre);
}
.sso-porte-recevoir .sso-porte-h { color: var(--sso-amethyste-f); }
.sso-porte-donner  .sso-porte-h { color: var(--sso-emeraude-f); }
.sso-porte-s { font-size: 14.5px; line-height: 1.5; color: var(--sso-encre-doux); }
.sso-accueil-passer {
  appearance: none; border: 0; background: none; cursor: pointer; margin-top: 20px;
  font: 600 14.5px/1 var(--sso-sans); color: var(--sso-encre-doux);
  text-decoration: underline; text-underline-offset: 4px; padding: 8px 12px;
}
.sso-accueil-passer:hover { color: var(--sso-emeraude); }
@media (max-width: 1150px) {
  .sso-accueil { padding: 18px 16px 26px; justify-content: flex-start; padding-top: 26px; }
  .sso-accueil-t { font-size: 27px; }
  .sso-accueil-p { font-size: 15.5px; }
  .sso-accueil-q { font-size: 19px; margin: 20px 0 10px; }
  /* ⛔ empilées, jamais côte à côte : deux portes de 160 px de large ne se lisent pas */
  .sso-accueil-portes { flex-direction: column; gap: 11px; }
  /* ⛔ empilées, chaque porte prend la hauteur de son contenu — jamais une base de 0 */
  .sso-porte-choix { flex: 0 0 auto; padding: 16px 16px 18px; }
  .sso-porte-h { font-size: 21px; }
  .sso-porte-s { font-size: 14px; }
}

/* ═══ ✋ LE SOIN TOUT DE SUITE ════════════════════════════════════════════════ */
/* la ligne vivante : elle ne s'affiche QUE si quelqu'un est vraiment là */
.sso-live {
  flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  margin: 0 18px 4px; padding: 9px 14px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(232,244,239,.9), rgba(214,238,228,.85));
  border: 1px solid var(--sso-jade-bord);
  font: 500 14px/1.35 var(--sso-sans); color: var(--sso-encre);
}
.sso-live b { font-weight: 800; color: var(--sso-emeraude-f); }
.sso-live-pt {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sso-vert); box-shadow: 0 0 0 3px rgba(47,158,107,.22);
  animation: ssoBat 2.2s ease-in-out infinite;
}
@keyframes ssoBat { 0%,100% { box-shadow: 0 0 0 3px rgba(47,158,107,.22); }
                    50%     { box-shadow: 0 0 0 6px rgba(47,158,107,.10); } }
.sso-live-l { color: var(--sso-emeraude); font-weight: 700; cursor: pointer;
              text-decoration: underline; text-underline-offset: 3px; }

/* le geste, sur la carte de quelqu'un qui est là */
.sso-mnt {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; margin-left: 14px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg,#12866b 0%,#0e6b52 100%); color: #f2fbf7;
  font: 700 13.5px/1 var(--sso-sans);
  border: 1px solid rgba(4,40,31,.45);
  box-shadow: inset 0 1px 0 rgba(160,235,208,.4), 0 2px 7px rgba(7,61,47,.26);
}
.sso-mnt b { font-size: 14px; }
.sso-mnt:hover { box-shadow: inset 0 1px 0 rgba(160,235,208,.5), 0 5px 14px rgba(7,61,47,.34); }

/* l'attente — ⛔ elle a un compte à rebours VISIBLE : on sait toujours combien il reste */
.sso-attente { display: flex; flex-direction: column; align-items: center; text-align: center;
               padding: 26px 18px 10px; gap: 4px; }
.sso-attente-orbe {
  width: 66px; height: 66px; margin-bottom: 10px;
  background: url('/arbre/img/golden-ball.png') center/contain no-repeat;
  filter: drop-shadow(0 6px 16px rgba(150,110,20,.4));
  animation: ssoVoileSouffle 2.2s ease-in-out infinite;
}
.sso-attente-t { font-family: var(--sso-serif); font-size: 22px; font-weight: 700; color: var(--sso-encre); }
.sso-attente-c {
  font: 800 46px/1 var(--sso-sans); color: var(--sso-emeraude); margin-top: 14px;
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-attente-s { font-size: 14px; color: var(--sso-encre-doux); }
@media (max-width: 1150px) {
  .sso-live { margin: 0 13px 4px; font-size: 13.5px; padding: 8px 12px; }
  .sso-mnt { margin-left: 0; font-size: 13px; padding: 8px 13px; }
  .sso-attente-c { font-size: 40px; }
}

/* ══ 🏦 LE GUICHET — l'étape qu'on ne pouvait pas deviner (24/08/2026) ═══════════
   Maha : « à quel endroit Danyele est invitée à configurer son guichet de paiement ?
   le système n'est pas facile à comprendre ! » Réponse mesurée ce jour-là : nulle part
   depuis le Salon. Le bandeau se pose donc EN TÊTE, et ne parle qu'à qui il concerne.

   ⛔ Ni rouge ni alarme : on est dans un salon de soin, pas dans un tableau de bord
   d'incidents. C'est l'OR qui appelle — parce que c'est d'argent qu'il s'agit — sur le
   marbre de la maison. L'or reste rare : un seul liseré, une seule pastille.
   ⛔ Le bouton reste ÉMERAUDE (le geste standard de la maison) : le lingot est réservé
   à la barre du bas. Deux ors sur un même écran, et l'or ne veut plus rien dire.        */
.sso-guichet {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 10px 18px 2px; padding: 15px 18px; border-radius: 16px;
  font-family: var(--sso-sans);
  background:
    linear-gradient(180deg, rgba(255,252,244,.97), rgba(250,243,228,.97));
  border: 1.5px solid rgba(193,144,31,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 16px rgba(11,48,38,.13);
  position: relative; overflow: hidden;
}
/* le liseré d'or : le seul geste doré du bandeau, à gauche, comme un signet */
.sso-guichet::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--sso-or-clair), var(--sso-or), var(--sso-or-lisible));
}
.sso-guichet-txt { flex: 1 1 340px; min-width: 0; }
.sso-guichet-titre {
  font-family: var(--sso-serif); font-size: 21px; font-weight: 700; line-height: 1.25;
  color: var(--sso-or-lisible); margin-bottom: 5px;
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-guichet-sous {
  font-size: 14.5px; line-height: 1.55; color: var(--sso-encre);
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-guichet-sous b { color: var(--sso-or-lisible); }
.sso-guichet .sso-btn { flex: 0 0 auto; padding: 13px 26px; font-size: 15.5px; }
.sso-guichet-alerte {
  flex: 1 1 100%; margin-top: 4px; font-size: 14px; line-height: 1.5;
  color: #7a2f2f; background: rgba(160,60,60,.07);
  border: 1px solid rgba(160,60,60,.22); border-radius: 10px; padding: 9px 12px;
}

/* ── La même vérité, dite dans le panneau « Ma main », juste sous le tarif ──────
   ⛔ Écrire « 30 € » sans dire qu'on ne peut pas encore les encaisser, c'est laisser
   croire que c'est fait. L'état vit À CÔTÉ du champ qu'il concerne, jamais ailleurs. */
.sso-guichet-ligne {
  margin: 16px 0 4px; padding: 14px 16px; border-radius: 14px;
  font-family: var(--sso-sans); font-size: 14.5px; line-height: 1.55;
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-gl-ok {
  color: var(--sso-emeraude-f); background: var(--sso-jade-voile);
  border: 1px solid var(--sso-jade-bord);
}
.sso-gl-ok b { color: var(--sso-emeraude); }
.sso-gl-suite {
  color: var(--sso-encre); background: rgba(255,252,244,.9);
  border: 1px solid rgba(193,144,31,.34);
}
.sso-gl-suite b { color: var(--sso-or-lisible); }
.sso-gl-non {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  color: var(--sso-encre); background: rgba(255,252,244,.95);
  border: 1.5px solid rgba(193,144,31,.45);
}
.sso-gl-t {
  font-family: var(--sso-serif); font-size: 19px; font-weight: 700;
  color: var(--sso-or-lisible); line-height: 1.25;
}
.sso-gl-s { color: var(--sso-encre-doux); }
.sso-gl-non .sso-btn { margin-top: 3px; }

/* ── L'écran d'après-dépôt : ce qui est fait, puis ce qui reste ────────────────
   ⛔ Un parcours ne se termine jamais sur un félicitations quand il reste une étape
   obligatoire — c'est exactement ce qui a fait croire à Danyele que c'était fini.   */
.sso-etape2 { font-family: var(--sso-sans); }
.sso-etape2-fait {
  display: inline-block; font-size: 14.5px; font-weight: 700;
  color: var(--sso-emeraude); background: var(--sso-jade-voile);
  border: 1px solid var(--sso-jade-bord); border-radius: 999px;
  padding: 8px 16px; margin-bottom: 18px;
}
.sso-etape2-titre {
  font-family: var(--sso-serif); font-size: 25px; font-weight: 700; line-height: 1.22;
  color: var(--sso-or-lisible); margin-bottom: 10px;
}
.sso-etape2-txt {
  font-size: 15.5px; line-height: 1.62; color: var(--sso-encre);
  font-variant-numeric: lining-nums tabular-nums;
}
.sso-etape2-txt b { color: var(--sso-or-lisible); }
.sso-etape2-boutons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* ⛔ Sur téléphone le bandeau passe en colonne — un bouton coincé à droite d'un texte
   de trois lignes dans 360 px se retrouve à 40 px de large, illisible et intouchable. */
@media (max-width: 700px) {
  .sso-guichet { flex-direction: column; align-items: stretch; gap: 12px; margin: 8px 12px 2px; }
  /* ⛔ Sans ça, le `flex-grow` du texte l'étire sur toute la hauteur libre : huit lignes,
     puis un trou de 300 px, puis le bouton — et le salon repoussé hors de l'écran. */
  .sso-guichet-txt { flex: 0 1 auto; }
  .sso-guichet .sso-btn { width: 100%; }
  .sso-guichet-plus { display: none; }
  .sso-guichet-titre { font-size: 19px; }
  .sso-etape2-titre { font-size: 22px; }
  .sso-etape2-boutons .sso-btn { flex: 1 1 100%; }
}

/* ⚖️ LA MENTION DE BIEN-ÊTRE (24/08/2026, avis Thémis) ───────────────────────────
   « Caché dans les CGV il ne vaut presque rien ; visible à l'endroit où l'on paie il pèse
   réellement. » Elle est donc lisible — pas une ligne grise de 10 px qu'on saute.
   ⛔ Sobre malgré tout : une mention qui crie devient une bannière, et une bannière s'ignore. */
.sso-mention-be {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  font-family: var(--sso-sans); font-size: 13.5px; line-height: 1.55;
  color: var(--sso-encre-doux); background: rgba(14,107,82,.055);
  border: 1px solid rgba(14,107,82,.20);
}
.sso-mention-be b { color: var(--sso-emeraude-f); font-weight: 700; }

/* ══════════ 🌿 LES TROIS MONDES DU SALON — 25/08/2026 ══════════════════════════
   Charte « la Sève » : l'émeraude porte le choix, l'or reste rare (le prix seul).
   ⛔ Trois cartes qui se ressemblent ne sont pas un choix : chacune porte son signe,
   son verbe et sa conséquence — on doit pouvoir décider sans lire deux fois.        */
.sso-modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px;
}
.sso-mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 13px 13px 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(19, 37, 31, .14); border-radius: 13px;
  color: #13251f; font: inherit; transition: border-color .18s, background .18s, transform .12s;
}
.sso-mode:hover { border-color: rgba(14, 107, 82, .45); transform: translateY(-1px); }
.sso-mode-e { font-size: 20px; line-height: 1; }
.sso-mode-t { font-weight: 700; font-size: 14.5px; letter-spacing: .1px; }
.sso-mode-s { font-size: 12.4px; line-height: 1.42; color: rgba(19, 37, 31, .66); }
/* ⛔ le choix retenu ne se signale pas par une simple teinte : sur un marbre clair, une
   teinte pâle ne se voit pas. Il prend la couleur pleine du Salon et une barre à gauche. */
.sso-mode-on {
  background: #e8f4ef; border-color: #0e6b52; box-shadow: inset 3px 0 0 #0e6b52;
}
.sso-mode-on .sso-mode-t { color: #0b5240; }
.sso-mode-on .sso-mode-s { color: rgba(11, 82, 64, .8); }

/* la carte d'une main qui s'entraîne : une pousse, pas un prix */
.sso-prix-entrainement {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 11px; border-radius: 11px;
  background: #eaf6ee; border: 1px solid rgba(20, 120, 70, .3);
  color: #14684a; font-weight: 700; font-size: 15px; line-height: 1;
}
.sso-prix-entrainement small { font-size: 10.2px; font-weight: 600; letter-spacing: .3px; text-transform: none; }
.sso-carte-entrainement { border-color: rgba(20, 120, 70, .34); }

@media (max-width: 760px) {
  /* ⛔ trois colonnes sur un téléphone rendent chaque carte illisible et son texte à
     quatre lignes d'un mot : on empile, et le choix reste lisible d'un coup d'œil. */
  .sso-modes { grid-template-columns: 1fr; gap: 8px; }
  .sso-mode { flex-direction: row; align-items: center; flex-wrap: wrap; padding: 11px 12px; }
  .sso-mode-e { font-size: 17px; }
  .sso-mode-t { font-size: 14px; }
  .sso-mode-s { flex: 1 0 100%; font-size: 12px; }
}
/* l'or de la maison porte le prix — un emoji « billets » sortait en rectangle bleu */
.sso-mode-eur{
  display:inline-block;font-style:normal;font-family:Georgia,"Times New Roman",serif;
  font-size:21px;line-height:1;color:#8b6914;font-weight:700;letter-spacing:-.5px;
}
.sso-mode-on .sso-mode-eur{color:#7a5c10}

/* la vérité sur l'agenda de la personne — jamais un gris fantôme */
.sso-heures-defaut{margin:0 0 14px;padding:10px 12px;border-radius:10px;
  background:#f3efe2;border:1px solid rgba(138,101,18,.26);color:#4a3a1d;
  font-size:13.4px;line-height:1.5;}
.sso-heures-defaut b{color:#3b2e12;}

/* ⛔ LE VERROU DU PRIX — la caisse avant le tarif (25/08, ordre de Maha).
   Une carte verrouillée doit se LIRE comme fermée, sans devenir illisible : on garde
   l'encre pleine (le texte reste une information), on retire seulement l'invitation. */
.sso-mode-verrou{
  background:#f4f1ea;border-style:dashed;border-color:rgba(19,37,31,.22);cursor:pointer;
}
.sso-mode-verrou:hover{ border-color:rgba(138,101,18,.5); transform:none; }
.sso-mode-verrou .sso-mode-t{ color:rgba(19,37,31,.62); }
.sso-mode-verrou .sso-mode-s{ color:rgba(138,101,18,.9); font-weight:600; }
.sso-mode-verrou .sso-mode-eur{ color:rgba(138,101,18,.42); }
.sso-mode-cadenas{ font-style:normal; font-size:12px; margin-left:6px; vertical-align:1px; }

.sso-verrou-mot{
  margin-top:10px;padding:13px 14px;border-radius:12px;
  background:#f6f2e6;border:1px solid rgba(138,101,18,.3);
  color:#4a3a1d;font-size:13.6px;line-height:1.55;
}
.sso-verrou-mot b{ display:block; color:#3b2e12; margin-bottom:3px; }
.sso-verrou-mot .sso-btn{ margin-top:12px; }
/* quand on tape sur la carte fermée, le mot se signale — sinon le clic semble mort */
.sso-verrou-attire{ animation:ssoVerrouBat 1.3s ease; }
@keyframes ssoVerrouBat{
  0%,100%{ box-shadow:0 0 0 0 rgba(138,101,18,0); }
  25%    { box-shadow:0 0 0 5px rgba(138,101,18,.22); }
  60%    { box-shadow:0 0 0 2px rgba(138,101,18,.12); }
}
@media (max-width:760px){
  .sso-verrou-mot{ font-size:13px; padding:12px; }
  .sso-verrou-mot .sso-btn{ width:100%; }
}

/* ═══════ 💎📱 TOUR AU MILLIMÈTRE — 25/08/2026 ═══════════════════════════════
   Trois défauts mesurés sur iPhone SE / iPhone 14 / Galaxy S24, identiques partout. */

/* ⛔ 1. LE « ? » ÉTAIT UNE CIBLE DE 30 px DE LARGE.
   Un pouce couvre ~9 mm : sous 44 px, on tape à côté une fois sur trois — et sur un écran
   où ce bouton est la SEULE porte vers le mode d'emploi, rater c'est renoncer. */
.sso-aide-btn { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

/* ⛔ 2. « BIENTÔT » ÉTAIT ÉCRIT EN 8,5 px SUR TÉLÉPHONE.
   C'est pourtant l'information la plus importante de cette carte : cette personne ne peut
   pas encore être réglée. Une information vitale écrite plus petit que tout le reste est
   une information qu'on a décidé de ne pas donner. */
.sso-prix-bientot b { font-size: 11px; letter-spacing: .06em; padding: 4px 10px; }

@media (max-width: 760px) {
  /* la règle mobile ramenait la pastille à 8,5 px : elle remonte à un seuil lisible */
  .sso-prix-bientot { font-size: 19px; padding: 8px 12px 6px; min-width: 68px; }
  .sso-prix-bientot b { font-size: 10.5px; margin-top: 4px; padding: 3px 8px; }
  .sso-prix-bientot small { font-size: 11px; }
  /* la cible d'aide reste confortable même quand la barre se resserre */
  .sso-aide-btn { width: 44px; height: 44px; min-width: 44px; }
}

/* ═══════ 💎🖥️ LE TOUR AU MILLIMÈTRE, CÔTÉ ORDINATEUR — 25/08/2026 ═══════════
   Deux défauts que le téléphone ne pouvait pas montrer. */

/* ⛔⛔ 1. J'AI FABRIQUÉ UN OVALE EN VOULANT AGRANDIR UN ROND.
   `.sso-aide-btn { width:44px; height:44px; min-width:44px }` a été ajouté SANS toucher
   la règle plus spécifique `.sso-barre-nue .sso-aide-btn { width:30px; height:30px }` :
   le `min-width` gagnait la largeur, l'ancienne règle gardait la hauteur → 44×30 avec un
   `border-radius:50%`, soit un ovale. Une valeur ajoutée par-dessus n'annule pas une règle
   plus spécifique : il faut aller la corriger LÀ OÙ ELLE EST. */
.sso-barre-nue .sso-aide-btn { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }

/* ⛔⛔ 2. LA RÉPARATION DU 23/08 SUR LES ZONES N'AVAIT ÉTÉ FAITE QU'EN MOBILE.
   « Détente du dos · Relâcher la tête · Repo… » : sur ordinateur, le texte tenait sur UNE
   ligne coupée à 142 px pour 477 px de contenu — on lisait moins d'un tiers de ce que la
   personne accompagne. Même remède que sur téléphone : deux lignes pleines. */
.sso-zones-txt {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; line-height: 1.35;
}

@media (max-width: 760px) {
  .sso-barre-nue .sso-aide-btn { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
}

/* ⛔ 25/08 — « LIRE LA CHARTE EN ENTIER » ÉTAIT UNE CIBLE DE 19 px DE HAUT.
   C'est le lien vers le texte qui ENGAGE la personne : il doit se viser sans effort, à la
   souris comme au doigt. Le coussin s'ajoute sous le texte, pas autour du soulignement —
   la ligne reste collée au mot, la zone cliquable grandit. */
.sso-engage-lien { padding: 8px 2px 10px; line-height: 1.3; }
@media (max-width: 760px) {
  /* au doigt, on vise large : 44 px de haut, pleine largeur de la carte */
  .sso-engage-lien { display: block; width: 100%; text-align: left; padding: 12px 2px 12px; }
}

/* ⛔⛔ 25/08 — UN ROND SE DÉFEND SUR SES DEUX DIMENSIONS.
   Sur téléphone, la Giri Family impose (à raison) `min-height: 48px` à tous les boutons :
   ma largeur de 44 px donnait donc 44×48, un ovale. On ne lutte pas contre une règle
   tactile saine — on s'aligne dessus. 48×48 au doigt, 44×44 à la souris.
   ⚠️ `min-width` ET `width` : sans les deux, la barre en flex peut encore le comprimer. */
@media (max-width: 760px) {
  .sso-aide-btn,
  .sso-barre-nue .sso-aide-btn {
    width: 48px; min-width: 48px; height: 48px; min-height: 48px; font-size: 19px;
  }
}


/* ═══ 🕯️ 05/09 — « METTRE EN GRATUIT » DEPUIS L'ÉCRAN OÙ L'ON EST ═══════════════
   Danyele (1280 × 551) : le bandeau n'offrait qu'une porte (le guichet), le champ tarif
   était caché, le bouton Enregistrer dormait sous vingt lignes de formulaire. */
.sso-guichet-actions { flex: 0 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.sso-guichet-actions .sso-btn { flex: 0 1 auto; }
.sso-guichet-actions .sso-btn-nu { padding: 10px 18px; font-size: 14.5px; }
@media (max-width: 1150px) { .sso-guichet-actions { width: 100%; } }

.sso-pied-colle { margin-top: 18px; }
/* sur un écran bas, le bouton qui enregistre reste sous les yeux (bureau seulement :
   sur téléphone, le bas du panneau est déjà réservé à la barre de la Family) */
@media (min-width: 1151px) {
  .sso-pied-colle {
    position: sticky; bottom: -18px; z-index: 3;
    margin: 18px -18px -18px; padding: 12px 18px 16px;
    background: linear-gradient(180deg, rgba(253,250,242,0), rgba(253,250,242,.97) 32%);
  }
  .sso-panneau-main .sso-pied-colle {
    background: linear-gradient(180deg, rgba(252,247,236,0), rgba(252,247,236,.97) 32%);
  }
  .sso-panneau:has(.sso-pied-colle)::after { display: none; }
}
.sso-mode-conseil { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sso-encre); }
.sso-mode-conseil b { color: var(--sso-emeraude-f); }


/* ═══ 🕯️💶 05/09 — DEUX OFFRES SUR UNE MÊME MAIN ══════════════════════════════
   Un lingot ET un badge « 3 offerts » peuvent vivre côte à côte sur une carte. */
.sso-prix-groupe { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; align-self: center; flex: 0 0 auto; }
.sso-carte-main .sso-prix-groupe { justify-self: end; }
.sso-prix-comptes { font-size: 14px; padding: 11px 12px; white-space: nowrap; }
.sso-prix-epuise {
  background-image: none; background: rgba(19,37,31,.07); color: rgba(19,37,31,.62);
  box-shadow: none; text-shadow: none; font-size: 12.5px; padding: 10px 11px; white-space: nowrap;
}
.sso-offres { grid-template-columns: 1fr 1fr; }
.sso-offerts-etat { margin-top: 7px; font-size: 13px; line-height: 1.5; color: var(--sso-encre-doux); }
.sso-offerts-etat b { color: var(--sso-emeraude-f); }
.sso-offerts-etat button {
  appearance: none; background: none; border: 1px solid var(--sso-jade-bord); border-radius: 999px;
  padding: 4px 11px; margin: 0 4px; font: 700 12.5px var(--sso-sans); color: var(--sso-emeraude-f); cursor: pointer;
}
.sso-offerts-etat button[aria-pressed="true"] { background: var(--sso-emeraude); color: #fff; border-color: var(--sso-emeraude); }
@media (max-width: 760px) { .sso-offres { grid-template-columns: 1fr; } }


/* ═══ 🕰️ MES HEURES DANS LE SALON (05/09) — plusieurs plages par jour ═══════════ */
.sso-heures { display: grid; gap: 10px; margin-top: 4px; }
.sso-jour { padding: 10px 12px 9px; border: 1.5px solid rgba(19,37,31,.13); border-radius: 13px; background: rgba(255,255,255,.92); }
.sso-jour-off { background: rgba(255,255,255,.55); }
.sso-jour-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14.5px; margin-bottom: 4px; text-transform: capitalize; }
.sso-jour-tete .sso-aide { text-transform: none; }
.sso-plage { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.sso-plage input[type="time"] { font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid rgba(19,37,31,.16); background: #fff; min-width: 108px; max-width: 150px; box-sizing: border-box; }
.sso-plage-sep { color: var(--sso-encre-doux); }
.sso-plage-x { appearance: none; border: 0; background: none; cursor: pointer; color: rgba(19,37,31,.55); font-size: 15px; padding: 4px 8px; border-radius: 999px; }
.sso-plage-x:hover { background: rgba(160,60,60,.09); color: #7a2f2f; }
.sso-plage-plus { appearance: none; background: none; border: 1px dashed var(--sso-jade-bord); border-radius: 999px; padding: 5px 12px; margin-top: 4px; font: 700 12.5px var(--sso-sans); color: var(--sso-emeraude-f); cursor: pointer; }
.sso-plage-plus:hover { background: rgba(14,107,82,.07); }
.sso-vers-heures { margin: 4px 0 10px; }
.sso-mnt-moi { cursor: default; opacity: .85; }
.sso-fiche-moi { font-size: 13.5px; line-height: 1.5; color: var(--sso-encre-doux); flex: 1 1 200px; }


/* 📱 05/09 — la porte du Salon en tête de la liste des salons (le tiroir du téléphone) */
#channelList .sso-porte-liste { display: flex; width: calc(100% - 16px); margin: 6px 8px 10px; box-sizing: border-box; }
@media (min-width: 1151px) { #channelList .sso-porte-liste { display: none; }   /* sur bureau, la carte de navigation suffit */ }


/* 👤📱 05/09 — le bouton « Sauvegarder » du profil, en bas du formulaire sur téléphone (béquille) */
/* sur une coque d'appli (barre du bas), la même règle vaut à toute largeur */
/* ⛔ 05/09 — PLUS RIEN NE FLOTTE AU-DESSUS DES CHAMPS. Une bande collée au bas de l'écran
   vole les taps de tout champ qui passe dessous : Marie ne pouvait plus écrire dans
   « Ma transformation », puis seulement dans le dernier. Le bouton vit dans le flux,
   après le dernier champ, et l'écran le dit déjà (« Sauvegarder tout en bas »). */
#profileModal.sso-profil-coque .sso-profil-pied { position: static; padding: 12px 0 6px; margin-top: 16px; background: none; }
#profileModal.sso-profil-coque #profileSaveBtn.sso-profil-save { position: static !important; width: 100% !important; margin: 0 !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; }
@media (max-width: 1150px) {
  .sso-profil-pied { position: static; padding: 12px 0 6px; margin-top: 16px; background: none; }
  #profileModal #profileSaveBtn.sso-profil-save { position: static !important; width: 100% !important; margin: 0 !important;
    left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; transform: none !important; }
}

/* 📱 05/09 — un style de la Family éteint tout bouton étranger dans la liste : on gagne la cascade */
@media (max-width: 1150px) {
  html body .sidebar #channelList button#ssoPorteListe.sso-porte-liste { display: flex !important; visibility: visible !important; height: auto !important; opacity: 1 !important; }
}


/* de l'air sous le bouton, pour que le dernier geste ne frôle pas la barre du bas */
#profileModal .sso-profil-pied { padding-bottom: 18px; }
#profileModal.sso-profil-coque, #profileModal { scroll-padding-bottom: 120px; }