/* ==========================================================================
   sonolie.css : jetons et composants de base de la charte Sonolie
   (direction « Papier et encre », peau « Lac et pierre », carte « Ronds dans l'eau »).
   Chargée par app/page.html et app/praticien.html (<link> avant leur <style>),
   servie par /assets/sonolie/<nom>. Ne contient que @font-face, jetons --so-* et
   composants .so-* : jamais de sélecteur d'élément ni de classe de l'app (.chip,
   .btn...). Chaque gabarit lit ces jetons (ses anciens noms --paper, --ink... en
   sont des alias par rôle).

   JETONS (contraste WCAG mesuré sur leurs fonds d'usage)
   Surfaces
     --so-papier       #F8F4E8  fond de page
     --so-carte        #FDFCF4  cartes, réponses, lignes, champs (brief #FDFBF4 :
                                à 8,9 du fond d'alerte, sous le seuil 9 ; #FDFCF4 : 9,7)
     --so-creux        #EFE9D6  surfaces en retrait : pastille de numéro, réglages ;
                                surface chaude, donc jamais le fond d'une aide de crise
     --so-fond-chaud   #F3EEDD  surface chaude neutre (jamais un état)
     --so-blanc        #FFFEF9  texte sur pilule noire
   Encre (sur papier : 14,9 / 8,2 / 5,7:1)
     --so-encre        #15202E  texte principal, pilule noire, réponse choisie
     --so-encre-2      #3E4A5A  texte secondaire
     --so-encre-3      #566170  mentions ; jamais sur --so-lac ni --so-eau
   Traits
     --so-trait        #E2DCC8  filets décoratifs (non porteurs de sens)
     --so-trait-fort   #857F6C  bord de tout contrôle cliquable (>= 3:1)
   Lac, l'accent unique : « elle parle », karaoké, carte « Ronds dans l'eau »
     --so-lac          #C9DDE8  surligneur du mot lu
     --so-lac-pale     #E4EEF3  état « elle parle » (bandeau, pastille), valeur du brief
                                lac encre 7,3:1, encre-3 5,3:1, trait-fort 3,4:1
     --so-ronds-fond   #E4EEF3  fond de la carte « Ronds dans l'eau » (valeur du
                                brief ; la carte n'est pas un état)
     --so-lac-encre    #24506B  texte et icône sur lac pâle, traits des ronds
   Eau : « elle écoute », « prêt », « c'est terminé », toast « J'ai noté »
     --so-eau          #CFE3DF
     --so-eau-pale     #CCF0EC  fond des ÉTATS seulement (bandeau « à vous », « prêt »,
                                « c'est terminé », toast) ; jamais le fond d'une carte
                                « fait », qui reste sur --so-carte (bord --so-trait) : seules
                                sa coche en eau encre et le mot « fait » disent l'état.
                                encre 13,5:1, encre-2 7,4:1, encre-3 5,2:1, eau encre 6,5:1,
                                lac encre 7,1:1, trait-fort 3,3:1
   CHOIX DE PEAU (les deux fonds d'état). Le lac pâle reprend la valeur exacte du
   brief (#E4EEF3). Le brief exige ΔE00 >= 10 entre les fonds pâles « parle » et
   « écoute » et permet d'écarter l'eau (son #E4F0EC n'est qu'à 4,8 du lac pâle).
   #CCF0EC, eau turquoise pâle de la même famille que le lac : ΔE00 10,4 du lac
   pâle, 9,3 de la sauge pâle de A (#E3EEDC, pastel interdit : >= 9 exigé),
   23 du fond d'alerte, 59,7 de l'alerte (mesure : de00.py du planner).
   Aide de crise (encart des numéros 143, 147, 144, fin de test) : fond --so-carte,
     bord 1px --so-trait, texte --so-encre-2 (8,8:1), numéros --so-encre (16:1).
     Jamais la pierre ni --so-creux (fond chaud), jamais l'eau ni l'alerte.
   Pierre : touche chaude, jamais en fond d'état (se confondrait avec l'ambre)
     --so-pierre       #F0E4C4
     --so-pierre-encre #5E4E2A
   Ambre : réservé au score élevé non critique (praticien), toujours doublé du ◆
     --so-ambre        #7F5500  texte ou pastille pleine (--so-carte dessus : 6,3:1)
     --so-ambre-pale   #F7E0B0
     --so-ambre-encre  #6B4700  texte sur ambre pâle
   Attente : états neutres sans sens clinique (réfléchit, pause, en cours)
     --so-attente-pale  = --so-creux
     --so-attente       = --so-encre-3  (--so-blanc dessus : 6,2:1)
     --so-attente-encre = --so-encre-2  (sur attente pâle : 7,4:1)
   État éteint (pause, intro) : jamais d'opacity < 1 sur un texte à lire ni sur
     un ancêtre (une réponse à .45 tombe à 2,8:1). On éteint par la couleur et la
     forme : fond --so-attente-pale, texte --so-encre-2 au moins, bord 1,5px dashed
     --so-trait-fort, aucune ombre ; et l'état se dit en mots (bandeau de pause).
   Alerte clinique : réservé à l'alerte, toujours couleur + icône + mot, jamais
   côté patient. Tout autre jeton est à ΔE00 >= 20 de --so-alerte, et tout fond
   pâle à >= 9 de --so-alerte-fond (contrôle G4).
     --so-alerte       #B42318
     --so-alerte-fond  #FBE8E4
     --so-alerte-encre #9B1C12
   Typographie : --so-serif Fraunces (titres, question), --so-sans Inter (texte,
     boutons), --so-mono DM Mono (étiquettes en capitales ; côté patient, 13 px au
     moins et jamais seule porteuse d'une information : ronde 15, « À FAIRE MAINTENANT »)
   Rayons : --so-r-s 14px, --so-r-m 22px, --so-r-l 32px, --so-r-pilule 999px
   Ombres : --so-ombre-carte, --so-ombre-bouton ; focus : --so-focus
   Cibles : --so-cible 48px (minimum), --so-cible-patient 56px
   Gouttière (ronde 16) : --so-gouttiere = marge latérale de page, 16 px dès 381 px
     de large (comme le praticien), 12 px au moins à 320 (clamp sur 4,2vw) ;
     --so-colonne-patient = largeur de la colonne patient, 430 px au plus, sinon
     l'écran moins deux gouttières (remplace l'ancien min(430px,96vw), qui ne
     laissait que 8 px de chaque côté à 390).

   COMPOSANTS
   .so-marque > img.so-logo   symbole n° 4 plein + « sonolie » (sonolie-logo-plein.svg) ;
       hauteur par --so-marque-taille (30px).
   sonolie-main.svg   main « À vous : touchez votre réponse », tracée par vtracer depuis
       icone_main/main_choisie.png ; currentColor, graisse optique sous 48 px. S'emploie
       en masque (mask + -webkit-mask), jamais en <img> coloré à la main.
   .so-pilule   l'action principale, pilule noire (une par écran). Variantes :
       .so-pilule-contour (secondaire), .so-pilule-grande (56 px, patient),
       .so-pilule-compacte (44 px, praticien). Hauteur par --so-pilule-h, taille
       par --so-pilule-taille, posées sur le parent.
   .so-ronds    la carte mise en avant, une seule par écran : aplat --so-ronds-fond
       et ellipses concentriques, aucun dégradé ; goutte de --so-ronds-taille
       (220px) ancrée au coin bas-droit, son centre juste au-dessus du bord bas.
       --so-ronds-bande (lecture seule, = 0,31 x la taille) est la hauteur que les
       ronds occupent au-dessus du bord bas de la carte, anneau le plus pâle compris.
       Contrat du gabarit : aucune ligne de texte dans cette bande. Il la réserve par
       son padding-bottom (texte en dernier), ou la laisse passer sous une pilule
       opaque. Jamais un rond sous une lettre (brief).
   ========================================================================== */

/* DM Mono (SIL OFL), servie localement par la route /assets/fonts/ existante. */
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/dmmono-400.woff2') format('woff2')}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/dmmono-500.woff2') format('woff2')}

:root{
  /* surfaces */
  --so-papier:#F8F4E8;
  --so-carte:#FDFCF4;
  --so-creux:#EFE9D6;
  --so-fond-chaud:#F3EEDD;
  --so-blanc:#FFFEF9;
  /* encre */
  --so-encre:#15202E;
  --so-encre-2:#3E4A5A;
  --so-encre-3:#566170;
  /* traits */
  --so-trait:#E2DCC8;
  --so-trait-fort:#857F6C;
  /* lac : elle parle, voix, carte ronds */
  --so-lac:#C9DDE8;
  --so-lac-pale:#E4EEF3;
  --so-lac-encre:#24506B;
  /* fond de la carte « Ronds dans l'eau » : lac calme du brief, pas un état */
  --so-ronds-fond:#E4EEF3;
  /* eau : elle écoute, fait, toast */
  --so-eau:#CFE3DF;
  --so-eau-pale:#CCF0EC;
  --so-eau-encre:#1F5A55;
  /* pierre : touche chaude, jamais un état */
  --so-pierre:#F0E4C4;
  --so-pierre-encre:#5E4E2A;
  /* ambre : score élevé non critique SEULEMENT */
  --so-ambre:#7F5500;
  --so-ambre-pale:#F7E0B0;
  --so-ambre-encre:#6B4700;
  /* alerte clinique : réservé */
  --so-alerte:#B42318;
  --so-alerte-fond:#FBE8E4;
  --so-alerte-encre:#9B1C12;
  /* attente : états neutres (réfléchit, pause, en cours, procédure), jamais ambre */
  --so-attente-pale:var(--so-creux);
  --so-attente:var(--so-encre-3);
  --so-attente-encre:var(--so-encre-2);
  /* typographie */
  --so-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --so-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --so-mono:'DM Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  /* rayons */
  --so-r-s:14px;
  --so-r-m:22px;
  --so-r-l:32px;
  --so-r-pilule:999px;
  /* ombres, focus */
  --so-ombre-carte:0 1px 0 rgba(21,32,46,.04),0 12px 32px -18px rgba(21,32,46,.18);
  --so-ombre-bouton:0 10px 22px -12px rgba(21,32,46,.55);
  --so-focus:0 0 0 3px var(--so-papier),0 0 0 6px var(--so-encre);
  /* cibles tactiles */
  --so-cible:48px;
  --so-cible-patient:56px;
  /* gouttière de page et colonne patient */
  --so-gouttiere:clamp(12px,4.2vw,16px);
  --so-colonne-patient:min(430px,calc(100vw - 2 * var(--so-gouttiere)));
}

/* ---- marque ---- */
.so-marque{--so-marque-taille:30px;display:inline-flex;align-items:center;
  gap:calc(var(--so-marque-taille) / 3);color:var(--so-encre);text-decoration:none;
  line-height:1;white-space:nowrap}
/* Le SVG livré est noir dans un <img> (currentColor) : ce filtre le teint en encre
   (#141F2D mesuré, ΔE00 0,31 de --so-encre). À ne poser que sur ce logo. */
.so-logo{display:block;flex:none;height:var(--so-marque-taille,30px);width:auto;
  filter:invert(7%) sepia(15%) saturate(1228%) hue-rotate(174deg) brightness(174%) contrast(103%)}

/* ---- pilules ----
   Classe doublée (spécificité 0,2,0) : passe devant .btn, .dock button et
   .fin-batterie button des gabarits, chargés après, sans !important. */
.so-pilule.so-pilule{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:var(--so-pilule-h,var(--so-cible));padding:0 1.4em;border-radius:var(--so-r-pilule);
  border:1.5px solid var(--so-encre);background:var(--so-encre);color:var(--so-blanc);
  font-family:var(--so-sans);font-size:var(--so-pilule-taille,1.0625rem);font-weight:600;
  line-height:1.15;text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:var(--so-ombre-bouton);opacity:1;transition:background-color .15s,border-color .15s}
.so-pilule.so-pilule:hover{background:var(--so-encre-2);border-color:var(--so-encre-2);color:var(--so-blanc)}
.so-pilule.so-pilule:active{background:var(--so-encre);border-color:var(--so-encre)}
.so-pilule.so-pilule:focus-visible{outline:none;box-shadow:var(--so-focus)}
/* désactivé : aplat opaque, jamais d'opacité (une pilule noire intacte invite à rappuyer) */
.so-pilule.so-pilule:disabled,.so-pilule.so-pilule[aria-disabled="true"],
.so-pilule.so-pilule:disabled:hover,.so-pilule.so-pilule[aria-disabled="true"]:hover{
  background:var(--so-creux);border-color:var(--so-trait-fort);color:var(--so-encre-2);
  box-shadow:none;cursor:not-allowed}
.so-pilule.so-pilule-contour{background:var(--so-carte);color:var(--so-encre);
  border-color:var(--so-trait-fort);box-shadow:none}
.so-pilule.so-pilule-contour:hover,.so-pilule.so-pilule-contour:active{background:var(--so-creux);
  border-color:var(--so-encre);color:var(--so-encre)}
.so-pilule.so-pilule-grande{--so-pilule-h:var(--so-cible-patient);--so-pilule-taille:1.15rem;padding:0 1.6em}
.so-pilule.so-pilule-compacte{--so-pilule-h:44px;--so-pilule-taille:15px;padding:0 1.25em}

/* ---- « Ronds dans l'eau » : 9 ellipses, trait 1,3 px à toute taille (non-scaling-stroke) ----
   Géométrie (unités du SVG, 600 = --so-ronds-taille) : centre à 130 du bord droit et
   80 du bas ; anneau le plus pâle de demi-hauteur 168. Tuile descendue de 0,11 x la
   taille : le centre reste 0,023 x la taille au-dessus du bord bas, et le haut des
   ronds monte à (80 + 168) / 600 - 0,11 = 0,303 x la taille, sous --so-ronds-bande. */
.so-ronds{--so-ronds-taille:220px;--so-ronds-bande:calc(var(--so-ronds-taille) * .31);
  background:var(--so-ronds-fond) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600' fill='none' stroke='%2324506B' stroke-width='1.3'><ellipse cx='470' cy='520' rx='40' ry='16' stroke-opacity='0.34' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='86' ry='35' stroke-opacity='0.31' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='132' ry='54' stroke-opacity='0.27' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='178' ry='73' stroke-opacity='0.24' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='224' ry='92' stroke-opacity='0.20' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='270' ry='111' stroke-opacity='0.17' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='316' ry='130' stroke-opacity='0.13' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='362' ry='149' stroke-opacity='0.10' vector-effect='non-scaling-stroke'/><ellipse cx='470' cy='520' rx='408' ry='168' stroke-opacity='0.06' vector-effect='non-scaling-stroke'/></svg>") no-repeat right 4px bottom calc(var(--so-ronds-taille) * -.11)/var(--so-ronds-taille) auto;
  color:var(--so-encre)}