/* THEME RATIO pour Leto V3.
 *
 * CE QUE C'EST. Le langage visuel de RATIO, porte sur les ecrans que Leto a DEJA.
 * Aucun ecran nouveau, aucune section inventee, aucune donnee touchee : les memes vues,
 * les memes contenus, les memes boutons, rebatis dans la langue de RATIO.
 *
 * CE QUE CE N'EST PAS. `theme-apple.css` a pose du verre par-dessus la mise en page web
 * existante et il a ete refuse deux fois le 7 septembre. La difference tient en une phrase :
 * RATIO n'est pas une page avec un filtre, c'est une FENETRE d'application. Barre laterale
 * pleine hauteur collee au bord gauche, pastilles de fenetre, carte d'identite, entrees a
 * carre de couleur, barre du haut en verre avec le fil d'Ariane, contenu sur un papier peint.
 *
 * D'OU VIENNENT LES VALEURS. Relevees verbatim dans
 * `STND - DIAMANTS/Planning/public/console-theme.css`, bloc « macOS 26 (Tahoe) Liquid Glass »,
 * et `diamants.css` pour l'or de la garderie. Aucune valeur inventee ici.
 *
 * PORTEE. Charge apres theme-diamants.css. Ne touche ni engine.js, ni solver.js, ni plan.js,
 * ni une route, ni un octet de donnee.
 */

/* ═══ 1. LES JETONS ══════════════════════════════════════════════════════════
 * Le systeme d'Apple : une etiquette a trois niveaux, du verre, un filet, une arete.
 * Mode clair par defaut, parce que c'est ce que Zineb ouvre le matin. */
:root{
  --lbl:#1d1d1f; --lbl2:rgba(60,60,67,.76); --lbl3:rgba(60,60,67,.46);
  --glassA:.66;  --blur:30px;
  --glass:rgba(255,255,255,calc(var(--glassA) + .12));
  --glass2:rgba(255,255,255,calc(var(--glassA) + .26));
  --glassSel:rgba(0,0,0,.06);
  --hair:rgba(0,0,0,.10); --sep:rgba(0,0,0,.08); --edge:rgba(255,255,255,.9);
  --fill:rgba(0,0,0,.05); --inset:rgba(0,0,0,.07);
  --sidebg:rgba(250,250,253,.76); --barbg:rgba(255,255,255,.6);
  --r-card:18px; --r-row:14px; --r-ctl:9px;
  --railw:250px;
}
/* La garderie garde son papier creme et son or, JAMAIS ses couleurs d'icones : les carres
 * teintes en beige et en olive rendaient le rail « fade et mort », mot de Zineb le 7 septembre.
 * Les icones restent les couleurs pleines d'Apple, comme chez RATIO. */
html[data-theme="diamants"]{
  --lbl:#1d1d1f; --lbl2:rgba(76,72,63,.78); --lbl3:rgba(76,72,63,.48);
  --sidebg:rgba(255,255,255,.86); --barbg:rgba(255,255,255,.7);
  --hair:rgba(106,102,95,.12); --sep:rgba(106,102,95,.09);
}

/* ═══ 1bis. LE MODE SOMBRE ═══════════════════════════════════════════════════
 * Les memes jetons, releves verbatim dans le bloc Tahoe de console-theme.css. Il faut aussi
 * retourner les jetons PROPRES a Leto (--ink, --panel, --bg, --line), sinon un panneau creme
 * et un texte brun restent poses sur un fond sombre et l'ecran devient illisible : c'est
 * exactement le defaut que le Console a deja paye une fois. */
html.dark{
  --lbl:#fff; --lbl2:rgba(235,235,245,.72); --lbl3:rgba(235,235,245,.44);
  --glass:rgba(24,24,27,var(--glassA)); --glass2:rgba(58,58,64,calc(var(--glassA) + .12));
  --glassSel:rgba(255,255,255,.18);
  --hair:rgba(255,255,255,.12); --sep:rgba(255,255,255,.09); --edge:rgba(255,255,255,.22);
  --fill:rgba(255,255,255,.12); --inset:rgba(0,0,0,.30);
  --sidebg:rgba(18,18,21,.74); --barbg:rgba(30,30,34,.55);
  /* Les jetons de Leto, retournes. */
  --ink:#F2F2F5; --ink-2:rgba(235,235,245,.76); --muted:rgba(235,235,245,.5); --faint:rgba(235,235,245,.34);
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.08);
  --bg:#17171a; --panel:rgba(38,38,42,.9); --panel-2:rgba(52,52,58,.85); --panel-3:rgba(64,64,70,.8);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.45),0 18px 40px -20px rgba(0,0,0,.6);
  --shadow-lg:0 4px 10px rgba(0,0,0,.5),0 30px 60px -24px rgba(0,0,0,.7);
}
/* MESURE, pas estimation : en Sombre, l'horaire de la semaine perdait les NOMS et les HEURES.
 * La grille porte ses propres jetons (--d-lbl, --d-sep), figes sur les valeurs claires au
 * moment ou elle a ete reprise du Console. Un mode sombre qui efface l'horaire de Zineb est
 * pire que pas de mode sombre du tout, donc ces jetons se retournent avec les autres. */
html.dark{
  --d-lbl:#F2F2F5; --d-lbl2:rgba(235,235,245,.76); --d-lbl3:rgba(235,235,245,.46);
  --d-fill:rgba(255,255,255,.10); --d-sep:rgba(255,255,255,.11);
}
html.dark[data-theme="diamants"]{
  --sidebg:rgba(18,18,21,.74); --barbg:rgba(30,30,34,.55);
  --hair:rgba(255,255,255,.12); --sep:rgba(255,255,255,.09);
}

/* ═══ 2. LE PAPIER PEINT ═════════════════════════════════════════════════════
 * Le contenu ne se pose plus sur un aplat : il se pose sur un fond. C'est ce qui fait
 * qu'une carte de verre a quelque chose a filtrer. Sans fond, le verre est du blanc. */
body{
  font-family:-apple-system,'SF Pro Display','SF Pro Text',system-ui,sans-serif;
  color:var(--lbl); letter-spacing:-.01em;
  background-attachment:fixed;
}
/* LES CINQ FONDS, exactement ceux de RATIO, clairs le jour et tenus le soir. Le bouton
 * Apparence les change, donc chacun doit exister dans les deux modes ou la bascule casse
 * l'ecran. Releves verbatim dans diamants.css. */
body[data-wp="blanc"]{background:#141414 !important}
body[data-wp="creme"]{background:radial-gradient(42% 32% at 78% 8%,rgba(214,178,120,.30),transparent 62%),linear-gradient(168deg,#2c2721,#322c23 32%,#2a2620 66%,#211e1a);background-attachment:fixed}
body[data-wp="menthe"]{background:radial-gradient(42% 32% at 78% 8%,rgba(90,200,150,.28),transparent 62%),linear-gradient(168deg,#1e2f28,#22362d 32%,#1d2b25 66%,#18211d);background-attachment:fixed}
body[data-wp="ciel"]{background:radial-gradient(42% 32% at 78% 8%,rgba(90,160,230,.28),transparent 62%),linear-gradient(168deg,#1d2a38,#213041 32%,#1c2733 66%,#181f28);background-attachment:fixed}
body[data-wp="peche"]{background:radial-gradient(42% 32% at 78% 8%,rgba(255,150,110,.26),transparent 62%),linear-gradient(168deg,#33241f,#3a2823 32%,#2d211d 66%,#241b18);background-attachment:fixed}
body[data-wp="lilas"]{background:radial-gradient(42% 32% at 78% 8%,rgba(170,130,230,.28),transparent 62%),linear-gradient(168deg,#282239,#2e2740 32%,#241f33 66%,#1d1928);background-attachment:fixed}

html:not(.dark) body[data-wp="blanc"]{background:#ffffff !important}
html:not(.dark) body[data-wp="creme"]{background:radial-gradient(44% 34% at 80% 6%,rgba(255,236,200,.85),transparent 62%),radial-gradient(46% 40% at 10% 30%,rgba(214,240,235,.7),transparent 60%),linear-gradient(168deg,#FBF6EA,#F7F1E2 44%,#F3ECDC 78%,#F2F5F1);background-attachment:fixed}
html:not(.dark) body[data-wp="menthe"]{background:radial-gradient(44% 34% at 80% 6%,rgba(196,240,214,.9),transparent 62%),radial-gradient(46% 40% at 10% 30%,rgba(226,244,255,.75),transparent 60%),linear-gradient(168deg,#EEFBF3,#E6F7EE 46%,#EFF7F4);background-attachment:fixed}
html:not(.dark) body[data-wp="ciel"]{background:radial-gradient(44% 34% at 80% 6%,rgba(196,226,250,.9),transparent 62%),radial-gradient(46% 40% at 10% 30%,rgba(230,244,255,.8),transparent 60%),linear-gradient(168deg,#EDF6FD,#E6F1FB 46%,#EFF4F9);background-attachment:fixed}
html:not(.dark) body[data-wp="peche"]{background:radial-gradient(44% 34% at 80% 6%,rgba(255,220,198,.9),transparent 62%),radial-gradient(46% 40% at 10% 30%,rgba(255,238,222,.8),transparent 60%),linear-gradient(168deg,#FFF3EB,#FFECE1 46%,#FDF2EC);background-attachment:fixed}
html:not(.dark) body[data-wp="lilas"]{background:radial-gradient(44% 34% at 80% 6%,rgba(226,214,250,.9),transparent 62%),radial-gradient(46% 40% at 10% 30%,rgba(240,234,255,.8),transparent 60%),linear-gradient(168deg,#F4F0FE,#EDE7FC 46%,#F3F0FA);background-attachment:fixed}

/* Le lavis bleu que Leto peignait par-dessus le papier le rendait gris-vert, et il
 * annulerait le fond choisi. */
body[data-wp]::before{background:none!important}

/* ═══ 3. LA FENETRE ══════════════════════════════════════════════════════════
 * La barre laterale est collee au bord gauche de la FENETRE et court du haut au bas,
 * la barre du haut commence a sa droite. C'est la seule chose qui separe une application
 * d'une page web, et c'est exactement ce qui manquait aux deux essais refuses. */
body.ratio-shell main{padding-left:var(--railw)}
body.ratio-shell .vwrap{display:block}
body.ratio-shell .vbody{width:100%;min-width:0}

body.ratio-shell .vmenu{
  position:fixed; left:0; top:0; bottom:0; width:var(--railw);
  display:flex; flex-direction:column; padding:0 0 10px; margin:0; z-index:40;
  background:var(--sidebg);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border-right:1px solid var(--sep);
  overflow:hidden;
}

/* Les trois pastilles. Elles ne font rien, et c'est leur travail : elles disent
 * « ceci est une fenetre » avant qu'un mot ne soit lu. */
.vmenu .traffic{display:flex;gap:8px;padding:18px 18px 8px;flex-shrink:0}
.vmenu .traffic i{width:12px;height:12px;border-radius:50%;display:block}
.vmenu .traffic .r{background:#ff5f57}
.vmenu .traffic .y{background:#febc2e}
.vmenu .traffic .g{background:#28c840}

/* La carte d'identite : qui est connecte, en haut a gauche, comme chez RATIO. */
.vmenu .idcard{
  display:flex; align-items:center; gap:11px; margin:8px 12px; padding:11px;
  border-radius:var(--r-row); background:var(--glassSel); flex-shrink:0;
}
.vmenu .idcard .av{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:16px;font-weight:600;color:#fff;flex-shrink:0;
  background:linear-gradient(150deg,var(--accent),var(--t-indigo));
}
.vmenu .idcard .t{font-size:14px;font-weight:600;line-height:1.15;color:var(--lbl)}
.vmenu .idcard .s{font-size:11.5px;color:var(--lbl2);margin-top:1px}

/* Le corps du menu defile, le pied reste. */
.vmenu .navwrap{flex:1;overflow-y:auto;padding:6px 12px;display:flex;flex-direction:column;gap:2px}

/* Le nom du groupe, en petites capitales grises. */
.vmenu .vlbl{
  display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--lbl3);
  padding:14px 10px 5px; margin:0; background:none; border:0;
}
.vmenu .navwrap > .vlbl:first-child{padding-top:4px}

/* L'entree. Un carre de couleur, un nom, rien d'autre. */
.vmenu .vmi,
.vmenu .vback{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:7px 10px; border:0; border-radius:10px; background:transparent;
  color:var(--lbl); font:inherit; font-size:13.5px; font-weight:500;
  text-align:left; cursor:pointer; margin:0; min-height:40px;
}
.vmenu .vmi:hover,
.vmenu .vback:hover{background:var(--glassSel)}
.vmenu .vmi.on{background:var(--glassSel);font-weight:600}

/* Le carre de couleur. 26 px, coin de 7, un liseret clair en haut : c'est une icone
 * d'application, pas un pictogramme dans du texte. */
.vmenu .tile{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.vmenu .tile svg{
  width:15px;height:15px;color:#fff;stroke:#fff;fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
/* Les degrades d'Apple, releves verbatim dans console-theme.css. Pleins et francs : c'est
 * ce qui rend le rail lisible d'un coup d'oeil au lieu d'a la lecture. */
.vmenu .t-blue  {background:linear-gradient(160deg,#3a9bff,#0a84ff)}
.vmenu .t-green {background:linear-gradient(160deg,#4be06a,#30d158)}
.vmenu .t-orange{background:linear-gradient(160deg,#ffb43a,#ff9f0a)}
.vmenu .t-red   {background:linear-gradient(160deg,#ff6b62,#ff453a)}
.vmenu .t-purple{background:linear-gradient(160deg,#cd72f5,#bf5af2)}
.vmenu .t-teal  {background:linear-gradient(160deg,#5dd6ec,#40c8e0)}
.vmenu .t-indigo{background:linear-gradient(160deg,#7a78ee,#5e5ce6)}
.vmenu .t-grey  {background:linear-gradient(160deg,#a0a0a6,#8e8e93)}
.vmenu .t-pink  {background:linear-gradient(160deg,#ff5c7d,#ff375f)}

/* Le pied du rail : ce que Leto lit, deja present dans l'application. */
.vmenu .railfoot{
  flex-shrink:0;margin:0 12px;padding:10px 10px calc(2px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--sep);font-size:11.5px;color:var(--lbl3);
  display:flex;align-items:center;gap:7px;
}

/* ═══ 4. LA BARRE DU HAUT ════════════════════════════════════════════════════
 * 54 px, en verre, collante. Le fil d'Ariane a gauche, les commandes a droite.
 * Le gros titre de page et son sous-titre descendent DANS le contenu : chez RATIO la
 * barre porte l'orientation, jamais le discours. */
body.ratio-shell .topbar{
  height:54px;min-height:54px;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:0;z-index:6;
  background:var(--barbg);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border-bottom:1px solid var(--sep);
}
body.ratio-shell .topbar h1{
  font-size:15px!important;font-weight:600;line-height:1.2;color:var(--lbl);
  letter-spacing:-.01em;margin:0;
}
body.ratio-shell .topbar .crumb{
  font-size:15px;font-weight:400;color:var(--lbl3);display:flex;align-items:center;gap:6px;
}
body.ratio-shell .topbar .crumb button{
  background:none;border:0;font:inherit;color:var(--lbl3);cursor:pointer;padding:0;
}
body.ratio-shell .topbar .crumb button:hover{color:var(--lbl)}
body.ratio-shell .topbar .crumb i{font-style:normal;color:var(--lbl3);opacity:.6}
body.ratio-shell .topbar .crumb span{color:var(--lbl);font-weight:600}
/* Le fil d'Ariane se termine deja par le nom de l'ecran en gras, donc le h1 et sa phrase
 * repetaient la barre. Ils ne sont pas supprimes : ils descendent dans le contenu, en
 * .rtitle, ou RATIO met son grand titre. */
body.ratio-shell .topbar h1{display:none!important}
body.ratio-shell .topbar .sub{display:none!important}

/* Le grand titre de l'ecran, dans le contenu. */
body.ratio-shell .rtitle{margin:0 0 18px}
body.ratio-shell .rtitle h2{
  font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--lbl);margin:0;line-height:1.15;
}
body.ratio-shell .rtitle p{font-size:14px;color:var(--lbl2);margin:7px 0 0;max-width:70ch;line-height:1.5}
/* Les ecrans qui ouvrent par l'en-tete imprime de la garderie portent deja leur nom : le
 * bloc de titre s'efface pour ne pas en afficher deux. */
body.ratio-shell .vbody:has(.dhead) .rtitle{display:none}

/* ═══ 4bis. LE BOUTON APPARENCE ══════════════════════════════════════════════
 * Zineb l'a demande nommement : le bouton qui change la couleur, le fond et le verre.
 * C'est celui de RATIO, meme markup, memes quatre reglages, meme rangement local. Ce qu'elle
 * choisit reste dans SON navigateur et ne part jamais au serveur. */
.glass{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 var(--edge),0 18px 40px -20px rgba(0,0,0,.30);
}
.appwrap{position:relative;display:inline-block}
/* ACCUEIL. MESURE avant/apres, pas impression : la barre du haut y est VIDE (ni fil d'Ariane,
 * ni titre) et elle mesurait 33 px. Le bouton Apparence l'a poussee a 65 px sur ordinateur et
 * a 110 px sur un telephone de 852 px de haut, elle a decale le lanceur vers le bas et son
 * fond translucide voilait la premiere carte du panneau de droite. C'est exactement la bande
 * inutile qu'Anas a fait retirer le 22 aout. Sur Accueil la bande disparait donc, et le bouton
 * flotte en haut a gauche, ou les deux largeurs sont verifiees vides.
 * Elle ne disparait QUE sur le lanceur : partout ailleurs le fil d'Ariane est la seule sortie
 * d'un ecran qui remplace la vue en entier, et le retirer recreerait le cul-de-sac que
 * uitest.mjs surveille.
 * La bande n'est pas mise en display:none : le bouton vit dedans, et un enfant d'un parent
 * masque ne se dessine pas. Elle sort du flux a la place, donc elle ne vole plus aucune
 * hauteur, ne peint plus rien, et le bouton garde ses 36 px de cible tactile. */
body.launcher .topbar{
  position:fixed; top:0; left:0; right:auto; width:auto;
  height:auto; min-height:0; margin:0; padding:14px 0 0 20px;
  background:none; border:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  display:block; z-index:50;
}
body.launcher .topbar > div:first-child{display:none}
body.launcher .appwrap{position:relative}
body.launcher .apppop{left:0;right:auto}
@media (max-width:760px){
  body.launcher .topbar{padding:10px 0 0 12px}
}
body.ratio-shell .topbar .acts{display:flex;gap:9px;align-items:center}
#appBtn{
  width:34px;height:34px;padding:0;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--fill);color:var(--lbl);
  border-radius:var(--r-ctl);cursor:pointer;
}
#appBtn:hover{background:var(--glassSel)}
#appBtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
/* MESURE a 1512 px : le fenetrage passait AU TRAVERS du menu. La barre du haut porte deja un
 * backdrop-filter, donc un second filtre imbrique ne voit plus la page en dessous, seulement
 * son parent, et le verre ne floute rien. Le menu prend donc un fond plein : c'est un menu
 * de reglages, il doit se lire, et RATIO le rend opaque pour la meme raison. */
.apppop{
  position:absolute;top:42px;right:0;width:280px;padding:14px;
  border-radius:16px;z-index:80;display:none;
  background:#FBFAF7;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid var(--hair);
  box-shadow:0 24px 60px -22px rgba(0,0,0,.35),0 2px 8px rgba(0,0,0,.08);
}
html.dark .apppop{background:#26262B}
.apppop.open{display:block}
.apppop h4{font-size:12px;font-weight:600;color:var(--lbl2);margin:4px 2px 9px}
.apppop h4:not(:first-child){margin-top:15px}
.segpick{display:flex;background:var(--inset);border-radius:9px;padding:2px}
.segpick .o{
  flex:1;text-align:center;font-size:12.5px;font-weight:500;color:var(--lbl2);
  padding:7px 4px;border-radius:7px;cursor:pointer;user-select:none;min-height:32px;
  display:grid;place-items:center;
}
.segpick .o.on{background:var(--glass2);color:var(--lbl);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.sw2{
  width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.sw2.on{border-color:var(--lbl);box-shadow:0 0 0 2px var(--glassSel)}
.wps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.wp{height:38px;border-radius:9px;cursor:pointer;border:2px solid transparent}
.wp.on{border-color:var(--lbl)}

/* ═══ 5. LE CONTENU ══════════════════════════════════════════════════════════
 * De l'air, et des cartes de verre posees dessus. */
body.ratio-shell .view{padding:26px 32px 96px}
body.ratio-shell .panel,
body.ratio-shell .set,
body.ratio-shell .rc,
body.ratio-shell .gg,
body.ratio-shell .vcard{
  background:var(--glass);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--hair);
  border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--edge),0 18px 40px -20px rgba(0,0,0,.22);
}
/* L'en-tete imprime de la garderie garde sa place et son ecriture a la main : c'est ce
 * que Zineb reconnait. Il devient la premiere carte au lieu d'un bandeau nu. */
body.ratio-shell .dhead{
  background:var(--glass2);
  backdrop-filter:blur(var(--blur)) saturate(150%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--edge),0 18px 40px -20px rgba(0,0,0,.20);
  padding:16px 20px 14px!important;margin:0 0 14px!important;
}

/* Les commandes. Un bouton d'Apple : plein pour l'action principale, en verre pour le reste. */
body.ratio-shell .btn{
  font:inherit;font-size:13px;font-weight:500;
  border:1px solid var(--hair);background:var(--fill);color:var(--lbl);
  padding:8px 14px;border-radius:var(--r-ctl);cursor:pointer;min-height:36px;
}
body.ratio-shell .btn.primary,
body.ratio-shell .topbar .btn.primary{background:var(--accent);border-color:transparent;color:#fff}
body.ratio-shell .btn.ghost{background:transparent;border-color:var(--hair);color:var(--lbl2)}

/* Les tableaux gardent leur contenu et leur ordre. Seule la matiere change : l'en-tete
 * colle, le filet s'affine, la ligne survolee se detache. Aucune colonne n'est touchee. */
body.ratio-shell table th{
  background:var(--fill);color:var(--lbl3);
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--hair);
}
body.ratio-shell table td{border-bottom:1px solid var(--sep)}
body.ratio-shell table tbody tr:hover td{background:var(--glassSel)}

/* Les deux boutons flottants du bas-gauche (Dino, Notifications) sont a z-index 9997 et
 * 9998, donc ils se posaient SUR le rail au lieu d'a cote. Ils reculent de la largeur du
 * rail : rien n'est deplace sur telephone, ou le rail n'est plus fixe. */
/* Dino rentre dans le rail pour la meme raison que la pastille : pose contre le contenu il
 * couvrait le coin bas-gauche de chaque grille. Il s'assoit juste au-dessus du pied du rail. */
body.ratio-shell #jamiebtn{left:14px;bottom:52px}
/* MESURE, pas estimation : a 1512 px la pastille Notifications couvrait la colonne PAYE de
 * l'horaire, puis, deplacee a droite, une case d'Enfants presents. Les grilles vont d'un bord
 * a l'autre, donc AUCUN bord de la zone de contenu n'est libre. Elle rentre dans le rail, qui
 * a de la place et qui est deja l'endroit ou l'on regarde l'etat. Rien de flottant ne couvre
 * une donnee. */
body.ratio-shell .noticebox{
  left:14px;right:auto;bottom:104px;width:calc(var(--railw) - 28px);max-width:none;
}
@media (max-width:760px){
  body.ratio-shell #jamiebtn{left:12px}
  body.ratio-shell .noticebox{left:auto;right:12px;bottom:74px;width:auto;max-width:calc(100vw - 72px)}
}

/* ═══ 6bis. LA FICHE ET LES FEUILLES ════════════════════════════════════════
 * Le tiroir « Conditions » ouvert depuis La semaine et depuis Equipe est une feuille
 * posee sur l'application, donc le fond derriere elle se floute au lieu de noircir.
 * Aucun champ n'est retire, aucun libelle n'est reecrit : ce sont les seize memes
 * conditions, dans le meme ordre. */
body.ratio-shell .bubble-wrap{
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
body.ratio-shell .bubble{
  background:var(--glass2);
  backdrop-filter:blur(var(--blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(160%);
  border:1px solid var(--hair); border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--edge),0 40px 90px -30px rgba(0,0,0,.42);
}
body.ratio-shell .bub-h{background:transparent;border-bottom:1px solid var(--sep)}
body.ratio-shell .bub-n{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--lbl)}
body.ratio-shell .bub-s{font-size:13px;color:var(--lbl2);margin-top:2px}

/* Les champs. Fond rempli, filet fin, coin de 9 : la saisie d'Apple, pas la boite
 * a bord dur du web. La hauteur reste au-dessus du seuil tactile de 34 px. */
body.ratio-shell input[type="text"],
body.ratio-shell input[type="number"],
body.ratio-shell input[type="time"],
body.ratio-shell input[type="date"],
body.ratio-shell input[type="password"],
body.ratio-shell select,
body.ratio-shell textarea{
  background:var(--fill); color:var(--lbl);
  border:1px solid var(--hair); border-radius:var(--r-ctl);
  font:inherit; font-size:13.5px; min-height:36px; padding:8px 11px;
}
body.ratio-shell input:focus,
body.ratio-shell select:focus,
body.ratio-shell textarea:focus{outline:none;border-color:var(--accent);background:var(--glass2)}

/* ═══ 6ter. ENFANTS PRESENTS ═════════════════════════════════════════════════
 * Trois tableaux, cinq jours, une case par demi-heure. La grille garde ses colonnes
 * et son ordre : seule la matiere change, et l'en-tete de colonne colle au defilement
 * pour que le jour reste lisible quand elle descend dans les demi-heures. */
body.ratio-shell .sched{border-radius:var(--r-row);overflow:auto}
body.ratio-shell table.sched-t th{position:sticky;top:0;z-index:2;backdrop-filter:blur(12px)}

/* ═══ 6. LE TELEPHONE ════════════════════════════════════════════════════════
 * 393 px : le rail redevient une barre de pastilles, parce qu'un rail fixe de 250 px
 * mangerait les deux tiers de l'ecran. Les cibles restent au-dessus de 34 px, seuil
 * que mobiletest.mjs refuse de laisser passer. */
@media (max-width:760px){
  body.ratio-shell main{padding-left:0}
  body.ratio-shell .vmenu{
    position:static;width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px;
    padding:10px 14px;border-right:0;border-bottom:1px solid var(--sep);
  }
  .vmenu .traffic,
  .vmenu .idcard,
  .vmenu .railfoot{display:none}
  .vmenu .navwrap{flex-direction:row;flex-wrap:wrap;gap:6px;padding:0;overflow:visible}
  .vmenu .vlbl{display:none}
  .vmenu .vmi,
  .vmenu .vback{width:auto;min-height:36px;padding:7px 12px;border:1px solid var(--hair)}
  .vmenu .vmi.on{border-color:var(--accent)}
  .vmenu .tile{width:22px;height:22px;border-radius:6px}
  .vmenu .tile svg{width:13px;height:13px}
  body.ratio-shell .view{padding:16px 14px 96px}
  body.ratio-shell .topbar{padding:0 16px}
  /* MESURE a 393 px : mes champs sortaient a 38 px, sous le seuil de 44 px que fichetest.mjs
   * impose sur telephone. Elle change une heure au doigt, dans une garderie, le matin. */
  body.ratio-shell input[type="text"],
  body.ratio-shell input[type="number"],
  body.ratio-shell input[type="time"],
  body.ratio-shell input[type="date"],
  body.ratio-shell input[type="password"],
  body.ratio-shell select,
  body.ratio-shell textarea,
  .bubble input, .bubble select, .bubble textarea{min-height:46px;padding:11px 12px}
}