/* ============================================================================================
   Grille de widgets déplaçables — GrilleWidgets (js/components/grille-widgets.js), 28/09/2026.
   Toutes les règles gw-* sont ici ; aucune ne dépend du tableau de bord (styles tw-*).

   Planche : cases carrées (--gw-case, entier en px), --gw-colonnes colonnes, écart --gw-ecart, rayon --gw-rayon,
   posés par le composant sur l'hôte .gw-grille. Tuile : .gw-tuile.gw-t-<sm|wide|tall|lg> > .gw-in (le rendu du
   widget) + .gw-outils (boutons de taille, au survol).

   Habillage « bento » (copie du tableau de bord v795, sous d'autres noms), à composer dans rendre() :
     .gw-top > .gw-lbl (+ .gw-gris pour « à ce jour ») + .gw-etat.niv-urg      libellé et point d'état orange
     .gw-val (+ GrilleWidgets.tailleChiffre, GrilleWidgets.milliers) <small>FCFA</small>   grand chiffre
     .gw-bas > .gw-pied > (.gw-jauge > i | .gw-parts > i | .gw-filet) + .gw-sub         pied commun aligné
     .gw-entree (vert) · .gw-sortie (rouge) · .gw-nul (gris : un zéro est toujours gris) · .gw-proche (ambre)
     .gw-liste > .gw-ligne > .gw-pastille + .gw-ligne-nom + .gw-ligne-val + .gw-ligne-pc   lignes de 26 px
     .gw-plus (« + N autres »), .gw-mini-barre > i, .gw-deux (contenu | côté), .gw-cote, .gw-trait
     GrilleWidgets.anneau({ pct, ton, centre, sous, diametre, titre })                   anneau
   Couleurs portées par la tuile (--gw-vert, --gw-rouge, --gw-piste, --gw-filet, --gw-proche) : le fantôme d'un
   glisser, posé dans <body>, les garde. Le contenu ne doit donc dépendre d'aucun ancêtre de la planche.
   Vert = l'argent qui rentre ou qu'on gagne ; rouge = ce qui sort ou se perd ; le reste à l'encre ; zéro en gris.
   ============================================================================================ */

/* ---------- La planche ---------- */
.gw-grille{display:grid;grid-template-columns:repeat(var(--gw-colonnes,2),var(--gw-case,170px));grid-auto-rows:var(--gw-case,170px);gap:var(--gw-ecart,12px);justify-content:start;align-content:start;position:relative;min-width:0;margin:0;padding:0;list-style:none;}
/* Aide et annonces cachées : ancrées en haut de leur bloc (top/left). Sans ancrage, elles restaient à leur place
   « naturelle » sous la planche, hors du conteneur qui défile (#page-content sur téléphone) : la page entière
   défilait en plus de son contenu. */
.gw-cache{position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

/* ---------- La tuile ---------- */
.gw-tuile,.gw-anneau{--gw-vert:#0E8A5F;--gw-rouge:#C8382A;--gw-piste:color-mix(in srgb,var(--text-primary) 7%,var(--bg-secondary));--gw-filet:var(--border-color);--gw-proche:#C27A0A;--gw-encre:color-mix(in srgb,var(--text-primary) 42%,var(--bg-secondary));}
[data-theme="dark"] :is(.gw-tuile,.gw-anneau){--gw-vert:#5BD6A9;--gw-rouge:#FF5B4D;--gw-piste:color-mix(in srgb,var(--text-primary) 11%,var(--bg-secondary));--gw-filet:color-mix(in srgb,var(--text-primary) 16%,var(--bg-secondary));--gw-proche:#F6C569;}
.gw-tuile{position:relative;box-sizing:border-box;min-width:0;min-height:0;container-type:size;border-radius:var(--gw-rayon,18px);background:var(--bg-secondary);color:var(--text-primary);box-shadow:0 0 0 1px var(--border-color);cursor:grab;outline:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y pinch-zoom;transition:box-shadow .2s ease,transform .3s cubic-bezier(.22,1,.36,1),scale .2s ease;}
.gw-tuile::after{content:'';position:absolute;left:0;right:0;top:100%;height:3px;}   /* la montée au survol ne fait pas « sortir » la souris */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  body:not(.gw-glisse) .gw-tuile:not(.gw-place):not(.gw-appui):not(.gw-fantome):not(.gw-posee):hover{transform:translateY(-2px);box-shadow:0 0 0 1px color-mix(in srgb,var(--text-primary) 22%,var(--border-color));}
}
/* Anneau de focus : il reste visible sous la souris (la règle du survol, plus précise, l'effaçait). */
.gw-tuile:focus-visible,body .gw-grille>.gw-tuile.gw-tuile.gw-tuile:not(.gw-place):not(.gw-appui):focus-visible:hover{box-shadow:0 0 0 2px var(--text-primary);}
.gw-tuile.gw-appui{scale:.97;}
.gw-tuile.gw-place{background:transparent;box-shadow:none;outline:2px dashed var(--border-color);outline-offset:-2px;}
.gw-tuile.gw-place>*{visibility:hidden;}
.gw-tuile.gw-posee{box-shadow:0 0 0 2px color-mix(in srgb,var(--text-primary) 45%,transparent);}
.gw-fantome{cursor:grabbing;transition:scale .26s cubic-bezier(.34,1.56,.64,1),box-shadow .26s ease;}
.gw-fantome.leve{scale:1.05;box-shadow:0 0 0 1px var(--border-color),0 28px 60px -16px rgba(0,0,0,.45),0 10px 24px -8px rgba(0,0,0,.3);}
.gw-fantome .gw-outils{display:none!important;}
body.gw-glisse,body.gw-glisse *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important;}
.gw-in{display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-width:0;min-height:0;padding:18px 18px 16px;overflow:hidden;border-radius:inherit;}

/* ---------- Taille d'une tuile (souris) : un pictogramme par taille permise, au survol seulement ---------- */
.gw-outils{position:absolute;top:10px;right:10px;z-index:2;display:none;gap:2px;padding:2px;border-radius:9px;background:var(--bg-secondary);box-shadow:0 0 0 1px var(--border-color);}
.gw-outils:empty{display:none!important;}
@media (hover:hover){ .gw-tuile:hover .gw-outils{display:flex;} }
body.gw-glisse .gw-outils{display:none!important;}
.gw-outil{width:24px;height:24px;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:7px;background:transparent;color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;}
.gw-outil:hover{background:var(--bg-tertiary);color:var(--text-primary);}
.gw-outil[aria-pressed="true"]{background:var(--bg-tertiary);color:var(--text-primary);}
.gw-picto{display:block;box-sizing:border-box;border:1.5px solid currentColor;border-radius:2.5px;}
.gw-picto-sm{width:9px;height:9px;} .gw-picto-wide{width:15px;height:8px;} .gw-picto-tall{width:8px;height:15px;} .gw-picto-lg{width:14px;height:14px;}

/* ---------- Habillage « bento » ---------- */
.gw-top{display:flex;align-items:center;gap:8px;min-width:0;height:18px;flex-shrink:0;}
.gw-lbl{flex:0 1 auto;min-width:0;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gw-lbl .gw-gris,.gw-gris{color:var(--text-muted);font-weight:500;}
/* Point d'état plein, sans halo, collé au libellé : orange = une action à faire. */
.gw-etat{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--gw-etat,var(--text-muted));}
.gw-etat.niv-urg,.gw-tuile .niv-urg{--gw-etat:#EE9A1A;} .gw-etat.niv-crit,.gw-tuile .niv-crit{--gw-etat:#E5261F;}

/* Le grand chiffre : taille bornée par la largeur de la tuile (cqi) et par la longueur du montant (--gw-n, --gw-unite
   posés par GrilleWidgets.tailleChiffre) ; --gw-reserve = la place prise à côté. */
.gw-val{--gw-max:clamp(26px,17cqi,44px);--gw-reserve:42px;min-width:0;margin-top:14px;flex-shrink:0;font-size:max(18px,min(var(--gw-max),calc((100cqi - var(--gw-reserve) - var(--gw-unite,0px)) / (var(--gw-n,3) * .56))));font-weight:500;letter-spacing:-.045em;line-height:1.02;color:var(--text-primary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gw-t-lg .gw-val{--gw-max:clamp(30px,17cqi,64px);}
.gw-val small{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--text-muted);margin-left:6px;}
.gw-mil{display:inline-block;width:.18em;}

/* Couleurs d'argent (dans une tuile ou un anneau seulement : .gw-entree sur la planche est la classe d'arrivée). */
:is(.gw-tuile,.gw-anneau) .gw-entree{color:var(--gw-vert);}
:is(.gw-tuile,.gw-anneau) .gw-sortie{color:var(--gw-rouge);}
:is(.gw-tuile,.gw-anneau) .gw-nul{color:var(--text-muted);}
:is(.gw-tuile,.gw-anneau) .gw-proche{color:var(--gw-proche);}
.gw-tuile :is(.gw-entree,.gw-sortie,.gw-nul,.gw-proche) b{color:inherit;}

/* Pied commun : la barre (ou le filet) à la même hauteur dans toutes les tuiles, puis deux lignes d'explication. */
.gw-bas{margin-top:auto;padding-top:10px;display:flex;flex-direction:column;gap:9px;min-width:0;flex-shrink:0;}
.gw-pied{position:relative;height:4px;display:flex;align-items:center;flex-shrink:0;min-width:0;}
.gw-pied>*{flex:1 1 auto;min-width:0;}
.gw-filet{display:block;height:1px;background:var(--gw-filet);}
.gw-sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;min-height:32px;font-size:12px;font-weight:500;letter-spacing:-.005em;line-height:16px;color:var(--text-secondary);overflow:hidden;}
.gw-sub b{font-weight:600;color:var(--text-primary);}

/* Barres : jauge à l'encre (ou verte), barre de parts (vert, deux rouges en alternance, piste, encre), trait. */
.gw-jauge{display:flex;height:4px;border-radius:99px;background:var(--gw-piste);overflow:hidden;}
.gw-jauge>i{display:block;height:100%;min-width:3px;border-radius:99px;background:var(--gw-encre);}
.gw-jauge>i.gw-p-vert{background:var(--gw-vert);} .gw-jauge>i.gw-p-rouge{background:var(--gw-rouge);}
.gw-parts{position:relative;display:flex;gap:2px;height:4px;min-width:0;}
.gw-parts.gw-epais{height:8px;}
.gw-parts>i{display:block;height:100%;min-width:3px;border-radius:99px;background:var(--gw-part,var(--gw-piste));}
.gw-p-vert{--gw-part:var(--gw-vert);} .gw-p-rouge{--gw-part:var(--gw-rouge);}
.gw-p-rouge.gw-clair,.gw-p-clair{--gw-part:color-mix(in srgb,var(--gw-rouge) 68%,var(--bg-secondary));}
.gw-p-encre{--gw-part:var(--gw-encre);} .gw-p-piste{--gw-part:var(--gw-piste);}
.gw-trait{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text-primary);pointer-events:none;}
.gw-parts>i[title]{position:relative;cursor:help;}
.gw-parts>i[title]::before{content:'';position:absolute;left:0;right:0;top:-8px;bottom:-8px;}   /* cible de survol plus haute que la barre */

/* Listes : une ligne = 26 px ; au-delà, « + N autres ». */
.gw-liste{display:flex;flex-direction:column;min-width:0;min-height:0;margin-top:10px;}
.gw-ligne{display:flex;align-items:center;gap:8px;height:26px;min-width:0;flex-shrink:0;font-size:12.5px;line-height:16px;color:var(--text-primary);border-radius:6px;}
.gw-ligne+.gw-ligne{box-shadow:0 -1px 0 var(--gw-filet);}
.gw-ligne-nom{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;}
.gw-ligne-val{flex-shrink:0;white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.gw-ligne-pc{flex-shrink:0;min-width:36px;text-align:right;white-space:nowrap;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.gw-ligne-sous{display:block;font-size:11px;color:var(--text-muted);font-weight:500;}
.gw-pastille{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--gw-part,var(--text-muted));}
.gw-plus{height:26px;display:flex;align-items:center;gap:4px;flex-shrink:0;font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;}
.gw-mini-barre{width:44px;height:4px;flex-shrink:0;border-radius:99px;background:var(--gw-piste);overflow:hidden;}
.gw-mini-barre>i{display:block;height:100%;border-radius:99px;background:var(--gw-encre);}
.gw-mini-barre>i.gw-p-vert{background:var(--gw-vert);}
/* Survoler une part de barre éclaire la ligne du même rang (data-gw-i="0"…"9" sur la part et sur la ligne). */
.gw-tuile:has(.gw-parts>i[data-gw-i="0"]:hover) .gw-ligne[data-gw-i="0"],.gw-tuile:has(.gw-parts>i[data-gw-i="1"]:hover) .gw-ligne[data-gw-i="1"],
.gw-tuile:has(.gw-parts>i[data-gw-i="2"]:hover) .gw-ligne[data-gw-i="2"],.gw-tuile:has(.gw-parts>i[data-gw-i="3"]:hover) .gw-ligne[data-gw-i="3"],
.gw-tuile:has(.gw-parts>i[data-gw-i="4"]:hover) .gw-ligne[data-gw-i="4"],.gw-tuile:has(.gw-parts>i[data-gw-i="5"]:hover) .gw-ligne[data-gw-i="5"],
.gw-tuile:has(.gw-parts>i[data-gw-i="6"]:hover) .gw-ligne[data-gw-i="6"],.gw-tuile:has(.gw-parts>i[data-gw-i="7"]:hover) .gw-ligne[data-gw-i="7"],
.gw-tuile:has(.gw-parts>i[data-gw-i="8"]:hover) .gw-ligne[data-gw-i="8"],.gw-tuile:has(.gw-parts>i[data-gw-i="9"]:hover) .gw-ligne[data-gw-i="9"]{background:var(--bg-tertiary);}

/* Deux colonnes : le contenu à gauche, un côté à droite (anneau, lignes courtes). */
.gw-deux{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;min-width:0;}
/* La colonne de gauche est son propre conteneur : le grand chiffre s'y mesure (et non sur toute la tuile, anneau compris). */
.gw-deux>:first-child{container-type:inline-size;min-width:0;}
.gw-deux>:first-child .gw-val{--gw-reserve:10px;}
.gw-cote{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;line-height:16px;color:var(--text-secondary);}
.gw-cote b{font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;}

/* Graphique « Mois par mois » (Utils.barresPeriodes) en format Large : ni bulle noire ni légende. */
.gw-t-wide .gr-bulle,.gw-t-wide .gr-legende{display:none;}
.gw-t-wide .gr-barres{padding-top:8px;}   /* la place de la bulle ne sert plus */
.gw-tuile .gr-barres{margin-top:4px;}
/* Barres de la tuile aux couleurs de la tuile (en sombre, rouge franc et non corail) ; un mois à zéro en gris. */
.gw-tuile :is(.gr-barre,.gr-legende i).gr-entree{--gr-c:var(--gw-vert);} .gw-tuile :is(.gr-barre,.gr-legende i).gr-sortie{--gr-c:var(--gw-rouge);}
.gw-tuile .gr-barres .gr-barre.gr-zero{--gr-c:var(--gw-filet);opacity:1;}

/* ---------- L'anneau (GrilleWidgets.anneau) ---------- */
.gw-anneau{position:relative;flex-shrink:0;box-sizing:border-box;width:var(--gw-d,84px);height:var(--gw-d,84px);max-width:100%;}
.gw-anneau-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;}
/* Le dégradé de l'arc (pleine couleur en haut, 35 % en bas) est un masque : aucun identifiant dans le dessin. */
.gw-anneau-arc{-webkit-mask-image:linear-gradient(to bottom,#000 4.5%,rgba(0,0,0,.35) 95.5%);mask-image:linear-gradient(to bottom,#000 4.5%,rgba(0,0,0,.35) 95.5%);}
.gw-anneau-piste,.gw-anneau-plein{fill:none;stroke-width:7;stroke-linecap:round;transform-box:view-box;transform-origin:50px 50px;}
.gw-anneau-piste{stroke:var(--gw-piste);}
.gw-anneau-plein{transform:rotate(-90deg);}
.gw-arc-entree{stroke:#17A673;} .gw-arc-proche{stroke:#EE9A1A;} .gw-arc-sortie{stroke:#E5261F;}
.gw-anneau-grad{stroke:var(--text-muted);stroke-width:1;opacity:.24;}
.gw-anneau-centre{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;text-align:center;pointer-events:none;}
.gw-anneau-n{font-size:calc(var(--gw-d,84px) * .12 + 8px);font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--text-primary);}
.gw-anneau-centre small{display:block;margin-top:4px;font-size:clamp(8.5px,calc(var(--gw-d,84px) * .08 + 2.5px),11px);font-weight:600;letter-spacing:.02em;color:var(--text-muted);}
.gw-anneau-vide .gw-anneau-n{font-weight:500;}   /* sans donnée : un tiret calme, en gris */
@media (hover:hover) and (prefers-reduced-motion:no-preference){ .gw-tuile:hover .gw-anneau-arc{filter:saturate(1.15) brightness(.97);} }

/* ---------- Animations ---------- */
/* Arrivée (premier dessin visible seulement) : les tuiles montent, décalées selon leur place, puis les chiffres
   glissent en fondu, les barres se déroulent depuis la gauche et l'arc de l'anneau se trace. */
@keyframes gwEntree{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes gwChiffre{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}
@keyframes gwBarre{from{transform:scaleX(0);}}
@keyframes gwMonte{from{transform:scaleY(0);}}
@keyframes gwAnneau{from{stroke-dasharray:0 286;}}
@keyframes gwAnneauFondu{from{opacity:0;}}
.gw-grille.gw-entree>.gw-tuile{animation:gwEntree .5s cubic-bezier(.22,1,.36,1) backwards;animation-delay:var(--gw-delai,0s);}
.gw-grille.gw-entree :is(.gw-val,.gw-anneau-centre,.gw-ligne-val){animation:gwChiffre .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--gw-delai,0s) + 120ms);}
.gw-grille.gw-entree :is(.gw-jauge,.gw-parts,.gw-filet,.gw-mini-barre){transform-origin:left center;animation:gwBarre .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--gw-delai,0s) + 200ms);}
.gw-grille.gw-entree .gr-barre{transform-origin:center bottom;animation:gwMonte .6s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--gw-delai,0s) + 200ms);}
.gw-grille.gw-entree .gw-anneau-plein{animation:gwAnneau 1.1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--gw-delai,0s) + 220ms);}
.gw-grille.gw-entree .gw-anneau-piste{animation:gwAnneauFondu .5s ease both;animation-delay:calc(var(--gw-delai,0s) + 150ms);}
@media (prefers-reduced-motion:reduce){
  .gw-grille.gw-entree>.gw-tuile,.gw-grille.gw-entree .gw-tuile *{animation:none!important;}
  .gw-tuile,.gw-fantome{transition:none!important;}
}

/* ---------- Téléphone : deux colonnes, outils de taille cachés (la taille se règle sur ordinateur) ---------- */
@media (max-width:760px){
  .gw-outils{display:none!important;}
  .gw-in{padding:14px 14px 12px;}
  .gw-top{height:16px;} .gw-lbl{font-size:12px;}
  .gw-val{--gw-max:clamp(22px,15cqi,30px);--gw-reserve:34px;margin-top:8px;}
  .gw-t-lg .gw-val{--gw-max:clamp(26px,15cqi,44px);}
  .gw-bas{padding-top:8px;gap:7px;}
  .gw-sub{font-size:11.5px;line-height:15px;min-height:30px;}
  .gw-t-lg .gw-anneau{width:min(var(--gw-d,84px),110px);height:min(var(--gw-d,84px),110px);}
  .gw-t-lg .gw-anneau-n{font-size:calc(min(var(--gw-d,84px),110px) * .12 + 8px);}
}