/* ============================================================
   bulletins.css — design des bulletins imprimes (charte ANAM).
   Copie a l'identique depuis l'ancienne mfy.html : NE PAS MODIFIER
   les couleurs/classes ci-dessous, seule la mise en page de
   l'application (chrome.css) a ete reconstruite.
   ============================================================ */

:root{
  --brand-blue:#1C70B8;
  --row-alt-blue:#D2E7F5;
  --tmax-red:#FF0000;
  --tmin-blue:#0000FF;
  --text-dark:#3B3B3B;
  --sun-yellow:#F8C228;
  --cloud-outline:#5A5A5A;
  --cloud-dark-fill:#7C8798;
  --cloud-dark-stroke:#4B5563;
  --vigi-red:#FA1D42;
  --vigi-orange:#FF9500;
  --vigi-yellow:#EBEC25;
  --vigi-green:#2AFA1D;
  --table-header-gray:#C8C8C8;
  --table-tmax-band:#D9A868;
  --table-tmin-band:#93C4E8;
}

.mapsvg{width:100%;height:auto;display:block;}
.mapsvg path.region{stroke:#5C5C5C;stroke-width:1.4;}

/* valeurs figees (etaient --ui-border/--ui-radius/--ui-surface-alt) pour que ce
   wrapper garde exactement son apparence, independamment du design de l'appli */
.big-map-wrap{border:1px solid #e1e6ed;border-radius:12px;padding:10px;background:#f6f8fb;max-width:900px;margin:0 auto;}
/* max-height etait a 560px : sur une page A4 (largeur utile ~722px), ca forcait
   la carte a s'afficher a ~592px au lieu de ~722px (contrainte par la hauteur
   avant la largeur, vu le ratio du viewBox) -- pictos ~20% plus petits que
   necessaire, illisibles dans les zones denses. Relevee pour laisser la carte
   utiliser toute la largeur de page disponible. */
.big-map-wrap .mapsvg{width:100%;height:auto;max-height:760px;}

/* content-mapgrow (bulletin national + ORTM uniquement, voir bulletins.js) :
   sans ca, la carte (width:100%;height:auto) est dimensionnee par la largeur
   de la colonne de texte, qui laissait deja tout l'espace vertical dispo
   inutilise (~6px de marge avant le pied de page) -- reduire le bloc
   "Situation generale" seul n'agrandissait donc rien. Ici .content devient
   une colonne flex ou le wrapper de la carte absorbe tout l'espace vertical
   libere, et la carte (aspect-ratio + max-height:100%) grandit en
   consequence, largeur suivant hauteur, sans depasser la colonne. */
/* overflow:hidden ajoute ici (2026-08-10) en plus du plafond sur .page
   (.page-mapgrow, plus bas) : celui-la ne protege QUE la limite EXTERNE de
   la page, pas ce qui se passe A L'INTERIEUR d'elle. Signale par
   l'administration : le pied de page (.footerbar, dans le flux normal
   juste apres .content) etait "masque" par le cadre de la carte -- pas une
   collision de z-index, mais la carte qui grandit plus que l'espace qui
   lui est reellement alloue par le flex, poussant le pied de page hors de
   la zone visible/rognee par le plafond de .page. Signe que le
   retrecissement du SVG via flex (cense toujours marcher, cf. commentaire
   plus bas) ne s'est pas comporte comme prevu dans le moteur de rendu de
   l'administration. Plutot que de se fier uniquement au plafond externe
   (qui suppose que .content se comporte bien), .content lui-meme devient
   maintenant une limite dure : si la carte essaie malgre tout de depasser
   l'espace qui lui est alloue, elle est rognee ICI, avant meme d'atteindre
   le pied de page -- le pied de page reste alors TOUJOURS dans le flux
   normal, jamais recouvert ni pousse hors champ. */
.content.content-mapgrow{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
/* le .big-map-wrap generique a margin:0 auto + max-width:900px (pour se
   centrer en flux normal) : en flex ca l'empeche de s'etirer sur la largeur
   dispo (auto-margins desactivent le stretch), on l'annule ici. */
/* display:flex ici (pas juste flex:1, qui ne fait de big-map-wrap qu'un
   ITEM du flex de .content) : un item flex resout bien sa PROPRE taille via
   flex, mais ne transmet pas cette taille comme "hauteur definie" a ses
   PROPRES enfants pour un height:100% (limite CSS connue -- teste et
   confirme : height:100% + !important sur le svg ne changeait rien tant
   que big-map-wrap n'etait pas lui-meme un conteneur flex). En le rendant
   flex, align-items:stretch (par defaut) donne au svg une hauteur croisee
   reellement definie, sans ce probleme. */
.content.content-mapgrow .big-map-wrap{flex:1;min-height:0;margin:0;max-width:none;box-sizing:border-box;display:flex;}
/* Historique de cette regle (2026-08-10, plusieurs essais suite a un export
   PDF reel de l'administration montrant Bougouni/Sikasso, le point le plus
   au sud du pays donc le plus bas dans le viewBox, rognes en bas de carte --
   signature d'un SVG rendu a sa hauteur INTRINSEQUE, ignorant l'espace
   reellement alloue) :
   1. width:100% seul, hauteur "issue du stretch flex du parent" (stretch
      implicite d'un flex item en direction row) : fonctionne dans le
      navigateur utilise ici pour verifier (592px, bien contraint), mais
      PAS dans le moteur de rendu de l'administration (rognage confirme par
      export PDF reel).
   2. height:100% explicite essaye ensuite : ENCORE PIRE, mesure a 692px
      (= largeur x 0.9455, le ratio du viewBox -- exactement la valeur
      qu'on aurait SANS aucune contrainte). Un pourcentage sur un enfant
      flex ne se resout de façon fiable que si le parent a une hauteur
      "definite" au sens strict du spec ; ce n'etait apparemment pas le cas
      ici meme dans CE navigateur, donc height:100% est retombe sur le
      comportement intrinseque. Annule.
   3. Version actuelle : max-width:100%;max-height:100%;width:auto;
      height:auto -- le motif standard "image/svg qui se contracte pour
      tenir dans sa boite sans jamais depasser", historiquement le plus
      largement supporte pour des elements remplaces (img/svg/video) car
      il ne depend pas d'un height pourcentage a resoudre depuis un parent
      flex, seulement d'un max-height pourcentage (plus largement
      implemente de façon coherente). preserveAspectRatio="xMidYMid meet"
      du SVG garantit qu'aucune deformation ne se produit, quelle que soit
      la boite qui l'entoure.
   Non verifiable directement contre le moteur de rendu de l'administration
   (differences deja constatees entre navigateurs) -- garder aussi le
   overflow:hidden sur .content (plus haut) et .page-mapgrow comme filet de
   securite si meme cette version echoue a se contraindre correctement. */
.content.content-mapgrow .big-map-wrap .mapsvg{max-width:100%;max-height:100%;width:auto;height:auto;min-height:0;min-width:0;display:block;margin:0 auto;}

/* content-tempgrow (bulletins National/Temperatures/Radio/Matinal) : meme
   principe que content-mapgrow. Sans ca, le titre + les tableaux de
   temperatures (hauteur fixe) restent tasses en haut de .content (qui remplit
   pourtant toute la hauteur de page restante), laissant un grand vide avant
   le pied de page -- surtout visible sur Matinal (pas de Tmin, contenu plus
   court). .tempsection (titre + grille ensemble, voir temperatureSectionHtml
   dans bulletins.js) absorbe l'espace vertical libre et se centre dedans :
   sans regrouper le titre AVEC la grille dans le meme bloc flex-grow, seule
   la grille se centrait et le titre restait colle juste sous le bloc
   precedent (situation generale). */
.content.content-tempgrow{display:flex;flex-direction:column;min-height:0;}
/* Regle par defaut : Temperatures et National (page 2) -- SEULS bulletins
   content-tempgrow sans situation generale au-dessus de la grille (rien a
   quoi elle pourrait chevaucher). Centrage plein justifie ici : toute la
   hauteur de .tempsection est la grille elle-meme. Radio et Matinal ONT une
   situation generale au-dessus et ont chacun leur propre regle dediee
   ci-dessous (jamais celle-ci) : leurs grilles n'ont pas la meme hauteur
   l'une que l'autre, un seul reglage ne convenant a aucune des deux. "safe
   center" (pas juste "center") : si la grille venait a ne plus tenir dans
   l'espace restant, un centrage classique deborderait en haut ET en bas ;
   "safe" retombe alors sur flex-start plutot que de deborder des 2 cotes. */
.content.content-tempgrow .tempsection{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;}
/* Radio et Matinal ont chacun leur propre regle (pas de regle commune
   `:has(.sitbox)` -- vu le 09/08, cf. historique) : leurs grilles de
   temperatures n'ont pas du tout la meme hauteur (Radio = Tmax+Tmin complet,
   Matinal = Tmax seul, sans Tmin), donc pas la meme quantite de vide a gerer
   sous la situation generale -- un seul reglage partage ne convient jamais
   aux deux a la fois. Mesures reelles (page.offsetHeight / tempsection,
   via JS, PAS l'apercu ecran zoome -- cf. IMPORTANT plus bas) : le contenu
   de .content fait 912px quel que soit le bulletin (meme entete/pied de
   page) ; .tempsection (l'espace sous la situation generale) fait 671px.

   Radio (grille complete) : contenu naturel titre+grille = 671px, PILE la
   taille de .tempsection -- AUCUNE marge de securite. flex-start pur, sans
   la moindre marge ajoutee : un simple margin-top ici a suffi a faire
   deborder Radio sur une 2e page quasi vide a l'impression reelle (le
   05/08), invisible sur l'apercu ecran a cause du transform:scale() de
   fitPreviewScale (cf. IMPORTANT plus bas) -- decouvert seulement a
   l'impression. Ne plus jamais ajouter de margin/padding ici sans revalider
   par mesure JS (page.offsetHeight doit rester <=1123). */
.content.content-tempgrow-radio .tempsection{justify-content:flex-start;}
/* Matinal (grille Tmax seule) : contenu naturel titre+grille = 444px, pour
   671px disponibles -- 227px de marge. Deux essais rejetes avant celui-ci :
   flex-start pur plaquait tout le bloc juste sous la situation generale et
   rejetait tout le vide en UN SEUL bloc avant le pied de page (pas aere,
   desequilibre) ; un margin-top fixe deplacait juste ce meme bloc de vide
   plus bas, toujours un seul gros trou. La bonne repartition (comparee a un
   exemple existant qui repartit le vide ENTRE chaque table de villes,
   pas dans un seul bloc) : le titre reste juste sous la situation generale
   (flex-start, comme Radio), et c'est .tempgrid-wrap (juste en dessous, voir
   regle suivante) qui absorbe les 227px en les distribuant EN PLUSIEURS
   petits espaces entre les 4 tables de villes plutot qu'un seul grand vide
   a un seul endroit. */
.content.content-tempgrow-matinal .tempsection{justify-content:flex-start;}
/* flex:1 + space-between (au lieu du gap:5px fixe herite de la regle
   generique juste en dessous) : distribue les 227px de marge de Matinal en
   parts egales ENTRE les 4 tables de villes (et non plus en un seul bloc
   avant le titre ou avant le pied de page). Sans effet sur Radio (aucune
   marge a distribuer, gap:5px fixe suffit deja) : cette regle n'est
   volontairement appliquee qu'a Matinal. */
.content.content-tempgrow-matinal .tempsection .tempgrid-wrap{flex:1;justify-content:space-between;}
/* National (page 2) et Temperatures : PAS de situation generale sur cette
   page (juste le titre + la grille complete Tmax+Tmin), donc la regle
   generique .content-tempgrow (centrage plein, cf. plus haut) leur
   convenait en principe -- mais mesuree (JS, page.offsetHeight) : 912px
   disponibles pour 657px de contenu naturel, 255px de marge, centrage plein
   = ~127px de vide d'un bloc AVANT le titre (colle a l'entete) ET ~127px
   APRES la derniere table (avant le pied de page) -- pas mieux que le
   probleme deja resolu sur Matinal, juste sans situation generale pour le
   masquer. Meme traitement que Matinal (repartir en plusieurs petits
   espaces, pas 1 ou 2 gros blocs) : ~40px entre l'entete et le titre
   (respire sans coller), le reste (~215px) distribue ENTRE les 4 tables de
   villes via .tempgrid-wrap. */
.content.content-tempgrow-full .tempsection{justify-content:flex-start;margin-top:40px;}
.content.content-tempgrow-full .tempsection .tempgrid-wrap{flex:1;justify-content:space-between;}
/* Radio (situation generale + grille complete Tmax+Tmin) est le cas le
   plus serre de content-tempgrow. Un <table> ne se scinde jamais entre 2
   pages a l'impression, donc le moindre depassement pousse toute la
   derniere table (+ le pied de page) sur une 2e page quasi vide.
   IMPORTANT : mesurer ce genre de reglage avec getComputedStyle (ou en
   simulant les regles @media print — width:210mm, transform supprime),
   jamais getBoundingClientRect sur l'apercu ecran : fitPreviewScale()
   (conception.js) applique un transform:scale() a l'apercu qui n'est
   retire qu'au moment reel de window.print() (voir onPrint()). Un ecart
   invisible a l'ecran peut donc encore deborder a l'impression reelle. */
.content.content-tempgrow .tempsection .tempgrid-wrap{display:flex;flex-direction:column;gap:5px;}
.content.content-tempgrow .tempsection h2.tempgrid-title{flex-shrink:0;margin-bottom:4px;}
/* .tempgrid a sa propre margin-bottom:4px (charte, ligne ~215, a ne pas
   toucher) pensee pour un flux normal -- ici les tables sont dans un flex
   avec gap ci-dessus, qui espace DEJA chaque paire. Les deux s'additionnent
   (gap + margin, un flex item garde sa margin), ce qui ajoutait ~12px
   (~3mm) de trop avec la situation generale par defaut. Neutralise ici
   (uniquement dans ce wrapper flex) plutot que de toucher la regle
   charte, qui reste valable si .tempgrid est utilisee ailleurs hors de ce
   wrapper. */
.content.content-tempgrow .tempsection .tempgrid-wrap .tempgrid{margin-bottom:0;}

.national-map-wrap{position:relative;}
.national-legend{position:absolute;top:22px;left:22px;z-index:2;background:#ffffff;border:1px solid #2255aa;border-radius:4px;padding:8px 10px;max-width:230px;font-size:9px;line-height:1.4;}
.national-legend .nl-title{color:#2255aa;font-style:italic;font-weight:700;margin-bottom:5px;}
.national-legend .nl-line{display:flex;align-items:flex-start;gap:5px;margin-bottom:4px;}
.national-legend .nl-line:last-child{margin-bottom:0;}
.national-legend .nl-line svg{width:14px;height:14px;flex-shrink:0;margin-top:1px;}
/* width/height 60->76px (2026-08-10, demande d'agrandissement) + regle
   svg manquante : SANS elle, le <svg viewBox="0 0 100 100"> de
   compassRoseSvg() (pas de width/height explicites dans le SVG lui-meme)
   ne remplissait PAS son conteneur -- le navigateur retombait sur une
   taille par defaut minuscule (~16x16px) au lieu d'occuper les 60px
   prevus, rendant la rose des vents quasi invisible (juste une petite
   croix) malgre un conteneur correctement dimensionne. */
.national-compass{position:absolute;top:14px;right:20px;width:76px;height:76px;z-index:2;}
.national-compass svg{width:100%;height:100%;}

.page{width:794px;min-height:1123px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.25);position:relative;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column;}
.page + .page{margin-top:24px;}
/* Plafond + overflow:hidden UNIQUEMENT pour content-mapgrow (pas
   tempgrow/b72grow, voir plus bas pourquoi) : sans plafond, .page
   (min-height seul = un plancher, jamais un plafond) grandit librement si
   la situation generale est longue, et pousse la carte sur une 2e page a
   l'impression -- meme si .big-map-wrap a bien flex:1;min-height:0, rien
   ne forcait jusqu'ici le retrecissement puisque .content lui-meme (voir
   plus bas, pas de min-height:0) refusait deja de descendre sous la taille
   naturelle de ses enfants. Les deux sont necessaires ensemble. Sur
   dans mapgrow parce que le SVG shrink toujours proprement via son
   viewBox (verifie) -- jamais de perte visuelle.
   PAS applique a tempgrow/b72grow : une grille de temperatures/un
   planning 72h ne peut pas se retrecir sans limite comme un SVG. Applique
   ici, overflow:hidden a SILENCIEUSEMENT ROGNE de vraies donnees (derniere
   ligne du tableau Radio invisible, planning Bamako 72h tronque) au lieu
   de simplement deborder sur une 2e page -- une regression bien pire que
   le probleme d'origine. Ces bulletins peuvent donc encore deborder sur
   une 2e page a l'impression si leur contenu est reellement trop long ;
   mieux vaut ca qu'une perte de donnees invisible.
   Plafond reduit 2 fois le 2026-08-10 (1123px -> 1108px -> 1065px) :
   1re reduction (1123 -> 1108, 15px de marge) verifiee comme suffisante par
   simulation locale (#printRoot, transform retire, #appShell masque) --
   mais l'administration a quand meme vu une vraie ligne de texte coupee en
   deux et poussee sur une 2e page a l'EXPORT REEL (capture fournie : la
   derniere puce de la situation generale, tranchee horizontalement pile au
   milieu des lettres -- signature classique d'une coupure de page qui
   traverse une ligne de texte). Conclusion : le moteur de rendu PDF/
   impression reel de l'administration mesure le texte sensiblement plus
   large/haut que ce navigateur de simulation (polices differentes,
   version Chrome differente, DPI...) -- 15px de marge etait trop
   optimiste. Remonte a ~57.5px (~15mm) de marge reelle, qui doit rester
   suffisant meme avec un ecart de mesure de police notable entre les
   deux moteurs.
   Egalement remplace `.page:has(.content-mapgrow)` par une classe
   explicite `.page-mapgrow` posee directement par renderNational()/
   renderOrtm() (js/bulletins.js) : `:has()` est un selecteur CSS
   recent (Chrome/Edge 105+, ~2022) -- si l'export de l'administration
   passe par un moteur de rendu plus ancien ou different de celui utilise
   ici pour verifier, `:has()` ne matcherait tout simplement RIEN et ce
   plafond ne s'appliquerait jamais du tout, sans aucune erreur visible
   pour le signaler. Une classe explicite fonctionne dans absolument tous
   les moteurs CSS, aucune hypothese de compatibilite requise.
   Remonte a 1100px (2026-08-10, meme journee) : la ligne coupee en deux qui
   avait motive la descente a 1065px n'etait PAS causee par un manque de
   marge de page -- c'etait en realite le SVG de la carte qui ne se
   contraignait pas correctement (rognant Bougouni/Sikasso), corrigee
   separement juste apres (regle .mapsvg plus haut, max-height:100% +
   width/height:auto au lieu de compter sur le stretch flex implicite).
   Une fois cette vraie cause corrigee, les 1065px n'etaient plus qu'une
   marge de precaution excessive : l'administration a remonte un grand
   blanc visible sous le pied de page, la carte n'exploitant pas tout
   l'espace disponible. 1100px garde quand meme ~22px (~6mm) de marge
   reelle avant la limite physique A4 (1122.5px) -- moins genereux que les
   57.5px precedents, mais desormais la carte se contraint correctement
   independamment de cette marge (elle n'est plus le dernier rempart contre
   un rognage de donnees, juste une securite pour la pagination).
   Remonte a 1120px (2026-08-10, meme journee) : comparaison directe avec le
   PDF original (mesure des limites de blocs par analyse de pixels, pas a
   l'oeil) -- le pied de page y est bien flush au bord PHYSIQUE reel de la
   feuille A4 (aucun blanc en dessous), et la situation generale y occupe
   une part bien plus importante de la page que chez nous. Agrandir la
   situation generale (regle .sitbox plus bas) pour aerer le texte a
   mecaniquement retreci la carte d'autant a 1100px -- remonter le plafond
   quasiment au maximum physique (1122.5px = 297mm) rend cet espace a la
   carte. Marge restante volontairement minime (~2.5px) : le SVG se
   contraint desormais correctement via max-height+auto (cf. regle .mapsvg
   plus haut), donc le risque de rognage de donnees qui justifiait une
   grosse marge n'existe plus structurellement -- il ne reste qu'un risque
   de pagination (deja neutralise par overflow:hidden sur .content). */
.page.page-mapgrow{
  min-height:1120px;
  max-height:1120px;
  overflow:hidden;
}
.hdr{position:relative;height:140px;flex-shrink:0;background:linear-gradient(90deg,#1c4f8a 0%,#2f76b8 45%,#c98a2e 100%);overflow:hidden;}
.hdr .logo{position:absolute;left:30px;top:0;width:115px;height:113px;}
.hdr .seal{position:absolute;right:36px;top:0;width:118px;height:120px;}
.hdr .ministry{position:absolute;left:160px;right:170px;top:10px;text-align:center;color:#fff;}
.hdr .ministry .l1{font-size:15px;font-weight:700;line-height:1.25;}
.hdr .ministry hr{border:none;border-top:1px solid rgba(255,255,255,.7);width:70%;margin:6px auto;}
.hdr .ministry .l2{font-size:13px;font-weight:700;line-height:1.3;}
.titlebar{background:var(--brand-blue);color:#fff;font-size:13px;padding:6px 16px;flex-shrink:0;}
.titlebar.tb-flex{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.titlebar .tb-right{font-style:italic;font-weight:400;white-space:nowrap;}
.footerbar{background:var(--brand-blue);color:#fff;text-align:center;font-size:10.5px;padding:6px 10px;line-height:1.5;flex-shrink:0;}
.content{padding:6px 20px;flex:1;min-height:0;}
h2.sect{color:var(--brand-blue);font-size:15px;margin:6px 0 6px;}
h2.sect.tempgrid-title{font-size:19px;font-weight:800;margin:8px 0 8px;}
.sitbox{border:1.6px solid var(--brand-blue);border-radius:2px;padding:6px 12px;font-size:11.5px;line-height:1.35;}
.sitbox-italic{font-style:italic;}
.sitbox p{margin:0 0 4px;font-weight:700;}
.sitbox ul{margin:0;padding-left:15px;}
.sitbox li{margin-bottom:2px;}
/* Police/interligne/marges agrandis UNIQUEMENT dans content-mapgrow
   (National page1 + ORTM) (2026-08-10) : compare au bulletin original
   fourni par l'administration (PDF reel, mesure par analyse de pixels, pas
   a l'oeil), notre bloc situation generale etait beaucoup plus dense --
   11.5px/interligne 1.35 contre une police visiblement plus genereuse sur
   l'original.
   1er essai : police 15px/interligne 1.6, calque presque exactement sur la
   proportion mesuree de l'original (~32% de la hauteur totale de la page).
   Resultat correct pour la situation generale elle-meme, MAIS elle rivalise
   alors directement avec la carte pour le meme budget de hauteur fixe
   (909px de contenu disponible au total) -- la carte retombait a ~437px de
   haut (contre 627px avant), regression nette sur l'agrandissement des
   pictos qui a ete la demande principale de cette session. Redescendu a un
   compromis (13.5px/1.5) : toujours nettement plus aere qu'avant sans
   re-sacrifier la carte.
   Volontairement SCOPE a .content-mapgrow (pas un simple .sitbox global) :
   Radio et Matinal partagent la meme classe .sitbox mais leurs budgets sont
   deja regles au pixel pres SANS AUCUNE marge (cf. commentaire sur
   .content-tempgrow-radio, "tout vide ajoute en haut y fait deborder sur
   une 2e page") -- grossir .sitbox globalement les aurait casses. */
.content-mapgrow .sitbox{padding:11px 15px;font-size:13.5px;line-height:1.5;}
.content-mapgrow .sitbox p{margin:0 0 7px;}
.content-mapgrow .sitbox ul{padding-left:17px;}
.content-mapgrow .sitbox li{margin-bottom:7px;}

/* Meme agrandissement que content-mapgrow (juste au-dessus), applique a
   Matinal (2026-08-12, demande : cadre de texte trop petit compare au PDF
   original). Memes valeurs exactes (13.5px/1.5/11px 15px) : c'est le meme
   texte partage (state.situationGeneraleGroup) deja valide visuellement
   pour National/ORTM sur ce contenu precis. Budget verifie : Matinal a
   ~227px de marge entre le contenu naturel de .tempsection et l'espace
   disponible (cf. commentaire .content-tempgrow-matinal .tempsection
   plus haut) -- agrandir le sitbox reduit d'autant ce vide au lieu de le
   laisser inutilise, sans risque de deborder (flex:1 sur .tempsection
   absorbe la difference quoi qu'il arrive). PAS applique tel quel a Radio
   (aucune marge disponible, cf. meme commentaire) -- Radio a son propre
   traitement plus bas (meme agrandissement de sitbox, mais combine a un
   allegement du tableau pour compenser, faute de marge). */
.content-tempgrow-matinal .sitbox{padding:11px 15px;font-size:13.5px;line-height:1.5;}
.content-tempgrow-matinal .sitbox p{margin:0 0 7px;}
.content-tempgrow-matinal .sitbox ul{padding-left:17px;}
.content-tempgrow-matinal .sitbox li{margin-bottom:7px;}

/* Radio (2026-08-12, meme demande que Matinal juste au-dessus : cadre trop
   petit compare au PDF original). Radio n'a AUCUNE marge (mesure JS,
   page.offsetHeight/scale : le contenu actuel occupe deja pile les 1123px
   de hauteur A4, cf. commentaire .content-tempgrow-radio .tempsection plus
   haut) -- copier l'agrandissement de Matinal tel quel deborde d'environ
   90px sur une 2e page. Teste et mesure en direct (injection de <style> +
   getBoundingClientRect/scale dans l'apercu reel, pas une estimation) :
   reduire UNIQUEMENT le padding vertical des cellules du tableau (13px ->
   9px, SANS toucher aux tailles de police) degage tout juste assez de
   place pour absorber le meme agrandissement de sitbox que Matinal, avec
   ~13px de marge reelle restante avant le pied de page.
   IMPORTANT -- piege rencontre pendant la mise au point : toucher au
   font-size des cellules tg-max/tg-min (en plus du padding) donnait des
   resultats absurdes (police reduite -> lignes plus HAUTES, pas plus
   basses). Cause : `.tempgrid tr.tg-max td:first-child` (regle de la
   charte, plus bas, colonne "Ville" a 14px) a EXACTEMENT la meme
   specificite CSS qu'une regle scopee `.content-tempgrow-radio .tempgrid
   tr.tg-max td` -- l'ordre de declaration tranche alors l'egalite, ce qui
   ecrasait silencieusement le 14px de la colonne Ville par le nouveau
   font-size, elargissant cette colonne bien plus que prevu et faussant la
   hauteur de ligne. Se limiter au padding (aucune regle de la charte ne le
   cible avec la meme specificite) evite entierement le piege -- ne pas
   reintroduire de font-size ici sans revalider par mesure reelle. */
.content-tempgrow-radio .sitbox{padding:11px 15px;font-size:13.5px;line-height:1.5;}
.content-tempgrow-radio .sitbox p{margin:0 0 7px;}
.content-tempgrow-radio .sitbox ul{padding-left:17px;}
.content-tempgrow-radio .sitbox li{margin-bottom:7px;}
.content-tempgrow-radio .tempgrid td{padding:9px 6px;}

/* Journaux (2026-08-12, meme demande) : agrandissement standard du sitbox,
   comme les autres bulletins -- mais ICI totalement gratuit en budget de
   page (verifie par mesure) : .jrow-top (situation generale + carte de
   vigilance cote a cote, regle plus bas) a align-items:flex-start et sa
   hauteur totale est deja pilotee par la colonne carte (bien plus haute,
   ~300px de .mapbox a elle seule) -- agrandir le texte de la situation
   generale jusqu'a ~283px ne change donc PAS la hauteur de .jrow-top tant
   que ca reste sous la hauteur de la carte. Aucun risque de deborder sur
   une 2e page de ce cote. */
.sitbox-italic{padding:11px 15px;font-size:13.5px;line-height:1.5;}
.sitbox-italic p{margin:0 0 7px;}
.sitbox-italic ul{padding-left:17px;}
.sitbox-italic li{margin-bottom:7px;}

.jrow-top{display:flex;gap:12px;align-items:flex-start;}
.jrow-top>div{min-width:0;}
.jrow-top>div:first-child{flex:1;}
.jrow-top>div:last-child{flex:1.35;}
.jrow-top .minimap .mapbox{height:300px;width:100%;}
.jrow-top .minimap .mapbox .mapsvg{width:100%;height:100%;}

/* flex:1 (2026-08-12, demande : cadre des villes trop etroit, gros blanc
   inutile a droite avant le bloc Bamako, comparaison au PDF original ou le
   tableau occupe presque toute la largeur). Avant ce correctif,
   .villestable n'avait aucune largeur explicite -- elle se contentait de sa
   largeur naturelle (somme des colonnes .vname/.vicon/.vtemp/.vwind, toutes
   en px fixes), bien plus etroite que l'espace dispo dans .villes-wrap
   (flex). flex:1 la fait grandir pour remplir cet espace ; .vwind a deja
   margin-left:auto (regle plus bas) donc le surplus de largeur se repartit
   naturellement en absorbant l'espace avant le bloc vent, sans toucher au
   reste de la mise en page. Aucun impact sur la hauteur de page (verifie
   par mesure : page.offsetHeight identique avant/apres). */
.villestable{display:flex;flex:1;border:2.4px solid var(--brand-blue);margin-top:6px;}
/* Journaux (situation generale + mini-carte + 19 villes sur 2 colonnes +
   Bamako) est le seul bulletin a empiler jrow-top ET la grille de villes
   sur la meme page -- ca depassait la page de ~12px (~3mm) a l'impression
   reelle, poussant la derniere ville (rangee impaire) + le pied de page sur
   une 2e page presque vide, meme lorsque villes-wrap/minimap ne sont
   utilises qu'ici. Resserre uniquement ce h2 et cette table (portee via
   selecteur de fratrie, pas la regle h2.sect/.villestable partagee) : ~1mm
   de marge conservee au cas ou la situation generale s'allonge. */
.jrow-top + h2.sect{margin:3px 0;}
.jrow-top + h2.sect + .villes-wrap .villestable{margin-top:3px;}
.villecol{flex:1;}
.villecol:first-child{border-right:2.4px solid var(--brand-blue);}
/* Tailles agrandies (2026-08-12, demande : bulletin Journaux trop dense
   compare au PDF original) -- meme methode que Radio (cf. commentaire
   .content-tempgrow-radio plus haut) : injection de <style> + mesure reelle
   (getBoundingClientRect/scale) dans l'apercu, pas une estimation a l'oeil.
   Journaux n'a que ~15px de marge reelle (page.offsetHeight/scale colle
   deja au plafond A4 avec le contenu par defaut) -- ces valeurs sont
   calibrees pour consommer cette marge SANS la depasser (verifie : meme
   ~15px de marge residuelle qu'avant, page.offsetHeight identique). Ne pas
   grossir davantage sans revalider par la meme mesure. */
/* justify-content:space-between (2026-08-13, retour utilisateur sur le
   1er passage d'agrandissement : le PDF genere reellement -- pas juste
   l'apercu ecran -- montrait un enorme vide entre temp et vent). Cause :
   .villestable venait de passer a flex:1 (regle plus haut) pour occuper
   toute la largeur, mais .vwind gardait son margin-left:auto -- TOUT le
   surplus de largeur atterrissait dans un seul gros trou juste avant le
   vent, au lieu de se repartir. space-between (sur les 4 colonnes de la
   rangee) distribue ce surplus en plusieurs petits espaces reguliers, comme
   dans le PDF original (mesure par analyse de pixels : ~45px de vide reel
   entre temp et vent, pas 90+). margin-left supprime sur .vwind (redondant
   et contre-productif avec space-between). */
.vrow{display:flex;align-items:center;justify-content:space-between;padding:3px 14px;min-height:52px;}
.vname{width:64px;font-weight:700;font-size:12.2px;color:var(--text-dark);flex-shrink:0;}
.vicon{width:40px;flex-shrink:0;}
.vicon svg{width:38px;height:38px;display:block;}
.vtemp{display:flex;flex-direction:column;margin-left:2px;width:38px;flex-shrink:0;}
.vtemp .max{color:var(--tmax-red);font-weight:800;font-size:16.5px;line-height:1;}
.vtemp .max small{font-size:8.5px;font-weight:700;}
.vtemp .min{color:var(--tmin-blue);font-weight:800;font-size:14px;line-height:1;}
.vwind{display:flex;align-items:center;gap:2px;}
.vwind svg{width:38px;height:38px;display:block;}
.vdirtext{font-weight:700;font-size:8.7px;color:var(--text-dark);line-height:1.15;}
.bamakobox{border:2.4px solid var(--brand-blue);width:118px;flex-shrink:0;text-align:center;padding:8px 6px;margin-left:10px;}
.bamakobox .t{color:var(--brand-blue);font-weight:800;font-size:13px;margin-bottom:4px;}
/* .icn est sur le <div> qui entoure le <svg> (bulletins.js, villeRowPreview
   voisin) -- `svg.icn` (classe sur le svg lui-meme) ne matchait donc
   JAMAIS, laissant le picto sans taille explicite (retour utilisateur :
   "le picto est a peine visible"). Corrige en `.icn svg` (descendant),
   meme pattern que .vicon svg juste au-dessus. Taille alignee sur la
   boussole juste en dessous (40px) pour un poids visuel egal, comme dans
   le PDF original. */
.bamakobox .icn svg{width:46px;height:46px;}
.bamakobox .max{color:var(--tmax-red);font-weight:800;font-size:19px;}
.bamakobox .min{color:var(--tmin-blue);font-weight:800;font-size:16px;}
.bamakobox .compasswrap svg{width:40px;height:40px;}
.villes-wrap{display:flex;align-items:flex-start;}

.minimap{border:1.6px solid var(--brand-blue);padding:4px;}
.minimap .maptitle{font-weight:700;color:var(--brand-blue);font-size:12px;margin-bottom:2px;}
.minilegend{display:flex;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:9px;}
.minilegend span{display:inline-flex;align-items:center;gap:3px;}
.minilegend i{width:8px;height:8px;border-radius:50%;display:inline-block;}

.vigi-titlebar{background:var(--brand-blue);color:#fff;padding:7px 16px;display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;flex-shrink:0;}
.vigi-titlebar .r{text-align:right;font-weight:400;line-height:1.5;}
.vigi-body{display:flex;gap:12px;padding:12px 16px;align-items:flex-start;}
.vigi-mapcard{flex:1.6;border:2px solid var(--brand-blue);padding:10px;}
.vigi-side{flex:1;display:flex;flex-direction:column;gap:10px;}
.vsbox .vt{background:var(--brand-blue);color:#fff;font-size:11.5px;font-weight:700;padding:5px 10px;}
.vsbox .vb{padding:8px 10px;font-size:11.5px;}
.legendbox .vb{background:var(--row-alt-blue);}
.legendline{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-weight:700;font-size:11px;}
.legendline i{width:15px;height:15px;border-radius:50%;flex-shrink:0;}
.paramsbox .vb{text-align:left;}
.param-item{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:6px;justify-content:center;}
.param-item:last-child{margin-bottom:0;}
.param-item svg{width:22px;height:22px;flex-shrink:0;}
.niveaubox .vb{text-align:center;font-weight:700;text-transform:uppercase;}
.zonesbox .vb{text-align:justify;}
.freebox .vb{min-height:50px;}

.tempgrid{width:100%;border-collapse:separate;border-spacing:3px;margin-bottom:4px;table-layout:fixed;}
.tempgrid td{border:none;padding:13px 6px;text-align:center;font-size:14px;width:14.3%;}
.tempgrid td:first-child{width:12%;}
.tempgrid tr.tg-head td{background:linear-gradient(180deg,#AEB4BC 0%,#C9CDD2 100%);font-weight:700;color:#1a1a1a;}
.tempgrid tr.tg-max td{background:linear-gradient(180deg,#C17F4A 0%,#D89A66 100%);color:#111;font-weight:700;font-size:21px;}
.tempgrid tr.tg-max td:first-child{font-size:14px;}
.tempgrid tr.tg-min td{background:linear-gradient(180deg,#6FA8D6 0%,#93C4E8 100%);color:#111;font-weight:700;font-size:21px;}
.tempgrid tr.tg-min td:first-child{font-size:14px;}
.tempgrid tr td.tg-empty{background:transparent !important;background-image:none !important;border:none !important;}

.lc-table{width:100%;border-collapse:collapse;font-size:13px;}
.lc-table td{border:1px solid #333;padding:6px 10px;}
.lc-table td.lc-city{font-weight:700;width:34%;}

.b72-row{display:flex;border-top:2px solid var(--brand-blue);min-height:190px;}
.b72-row:first-child{border-top:none;}
.b72-panel{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;}
.b72-temp{background:#d6e9f5;}
.b72-map{background:#bdd8eb;position:relative;}
.b72-mapoverlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;}
/* 232x215 -> 290x269 (2026-08-13, demande : assez de place dans le cadre
   pour agrandir). Mesure en direct (meme methode que le correctif
   contour/texte juste avant) : le cadre .b72-map (379x289 a l'echelle de
   l'apercu) laissait la forme n'occuper qu'~63% de sa largeur utile.
   Agrandir la forme SANS toucher au bloc SO/fleche/vitesse (taille fixe en
   px) n'a fait qu'AMELIORER la marge de securite deja mesuree (5/9/11px ->
   16.6/18/25px) : le contour s'eloigne du bloc de texte a mesure qu'il
   grandit autour de lui. Toujours sans impact sur la hauteur de page
   (verifie), la taille de .b72-map etant pilotee par le flex-grow de
   .b72-row, pas par sa forme interne.
   290x269 -> 345x268 (meme jour, 2e passage : comparaison directe avec un
   vrai PDF Bamako 72h de reference fourni par l'administration, ou la
   forme occupe la quasi-totalite de sa cellule, contour fin). Largeur
   remontee au plus proche du plafond du cadre (329.4/379px a l'echelle de
   l'apercu, ~24px de marge de chaque cote) ; hauteur volontairement
   inchangee (deja proche du plafond vertical du cadre depuis le 1er
   passage). Marge de securite texte/contour reverifiee a cette taille :
   16.4/18/25px (quasi identique au 1er passage, 16.6/18/25px -- la marge
   ne se degrade pas en grandissant encore, cf. commentaire ci-dessus). */
.b72-shape{width:345px;height:268px;}
.b72-arrow{width:52px;height:52px;}
/* le reset global svg{width:1em;height:1em} (chrome.css) ecrasait le picto
   meteo, qui restait bloque a ~1em quelle que soit la taille du div englobant. */
.b72-icon svg{width:100%;height:100%;display:block;}
/* content-b72grow (Bulletin Bamako 72h) : sans ca, les 3 lignes gardaient
   leur min-height:190px et laissaient tout le bas de page vide -- l'original
   etire les 3 lignes sur toute la hauteur de page (~300px chacune) avec des
   elements proportionnellement plus grands, d'ou l'effet "miniature" chez
   nous a tailles fixes. */
.content.content-b72grow{display:flex;flex-direction:column;}
.content.content-b72grow .b72-row{flex:1;min-height:0;}


@page{ size: A4; margin: 0; }
*{ -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact; }
@media print{
  .page{box-shadow:none;width:210mm;min-height:297mm;margin:0 !important;}
  .page + .page{page-break-before:always;}
}