/* ═══════════════════════════════════════════════════════════════════════════════════════
   POLICE OUTFIT · retablie le 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   🔴 LE DEFAUT : cette feuille declarait `font-family:'Outfit'` mais AUCUN @font-face
   n existait nulle part sur le domaine. La police etait donc reclamee a chaque page et
   jamais fournie : le navigateur retombait sur la police systeme.
   Consequence visible, celle que Kurt a signalee : « tout est en gros GRAS ». Le site
   emploie des graisses de 700 a 850 sur ses titres, ses libelles et ses boutons. Avec
   Outfit, qui est une linéale geometrique fine, ces graisses sont nettes. Avec la police
   de repli, elles deviennent lourdes et illisibles, et l ecart entre un titre et un texte
   courant disparait.
   🔑 Rien a telecharger : les deux fichiers etaient DEJA sur le serveur depuis le 24/07
   (`/fonts/outfit-latin.woff2`, `/fonts/outfit-latinext.woff2`) et la declaration existait
   dans `index-actuel.html`, qui n est pas la page servie. Il ne manquait que le lien entre
   les deux. Copie ici TELLE QUELLE, sans une virgule de changement.
   ⚠️ `font-weight:300 800` : c est une police VARIABLE, un seul fichier couvre toutes les
   graisses. Ne pas la remplacer par des fichiers separes par graisse.
   ⚠️ La CSP du domaine porte `font-src 'self' data: https:` : le chargement local passe.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/outfit-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 800;font-display:swap;src:url(/fonts/outfit-latinext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   CaleDoAlerte · socle visuel · 02/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Extrait TEL QUEL du <style> en ligne de index.html, sans une virgule de changement : ce
   fichier devait etre invisible a l ecran le jour ou il a ete cree, et il l a ete (empreinte
   des styles calcules identique avant et apres).

   POURQUOI IL EXISTE. Le design de l accueil n existait qu a un seul endroit, recopie dans le
   HTML d une page. Impossible dans ces conditions de « mettre tout le site a son image » : il
   fallait d abord qu il soit partageable.

   ⚠️ COHABITATION AVEC css/main.css. Les autres pages chargent main.css, 2 449 lignes et
   606 declarations !important. Charger ce socle APRES ne suffira pas a le faire gagner : un
   !important l emporte quel que soit l ordre. La reprise page par page devra donc retirer des
   !important de main.css plutot qu en ajouter ici.
   ⛔ AUCUN !important dans ce fichier. C est la seule facon de ne pas refaire le meme piege.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --nav:#0a1424; --surf:#132743; --txt:#eaf2ff; --doux:#a8c1e6; --bord:rgba(255,255,255,.10);
  --bleu:#3b99f6; --rouge:#ef4444; --or:#f59e0b;
  --fond:var(--nav); --carte:var(--surf); --encre:var(--txt); --gris:var(--doux); --ligne:var(--bord);
  --maxw:1120px;
}
html[data-theme="clair"],html[data-theme="light"]{
  --fond:#ffffff; --carte:#f7f9fc; --encre:#0d1b2a; --gris:#5a6b80; --ligne:rgba(13,27,42,.12);
  --bleu:#1565c0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fond);color:var(--encre);
  font-family:'Outfit','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  line-height:1.45;-webkit-font-smoothing:antialiased}
.z{max-width:var(--maxw);margin:0 auto;padding:0 18px}
a{color:inherit}

/* ── Barre : cinq entrees, aucun emoji, une action detachee ──────────────────────── */
header{border-bottom:1px solid var(--ligne);position:sticky;top:var(--barre-sites,0px);background:var(--fond);z-index:20}
.bar{display:flex;align-items:center;gap:24px;height:52px}
.logo{font-weight:800;font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap}
.logo b{color:var(--bleu)}
nav{display:flex;gap:19px;font-size:.9rem;font-weight:500}
nav a{text-decoration:none;color:var(--gris);white-space:nowrap;padding:3px 0;border-bottom:2px solid transparent}
nav a:hover{color:var(--encre);border-bottom-color:var(--bleu)}
.droite{margin-left:auto;display:flex;align-items:center;gap:9px}
.btn{display:inline-block;padding:7px 14px;border-radius:8px;text-decoration:none;font-weight:650;font-size:.89rem;
  border:1px solid var(--ligne);color:var(--encre);background:transparent;cursor:pointer;font-family:inherit}
.btn.p{background:var(--rouge);border-color:var(--rouge);color:#fff}
.ico-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;border:1px solid transparent;background:transparent;color:var(--gris);
  cursor:pointer;font-family:inherit;padding:0}
.ico-btn:hover{color:var(--encre);border-color:var(--ligne)}
.ico-btn svg.i{width:17px;height:17px;margin:0;vertical-align:0}
.btn.t{padding:6px 10px;font-size:.81rem;color:var(--gris)}

/* ── Hero : deux colonnes des 900 px, pour que les chiffres cessent de pousser la
      liste vers le bas. C est le geste qui rapporte le plus a l ecran. ───────────── */
.hero{padding:26px 0 18px;border-bottom:1px solid var(--ligne)}
/* 02/08/2026 · Les deux colonnes sont abandonnees. Elles servaient a sortir les chiffres du
   flux vertical, mais depuis que le radar est passe en FOND du hero, la colonne de droite
   n avait plus de contenu propre, et une ligne de chiffres n a pas besoin de colonne : elle
   tient sur toute la largeur, ce qui la rend justement plus discrete. */
h1{font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.1;letter-spacing:-.03em;font-weight:800;max-width:34ch}
h1 span{color:var(--bleu)}
.sous{color:var(--gris);font-size:.97rem;margin-top:8px;max-width:54ch}
form{display:flex;gap:8px;margin-top:15px;max-width:620px}
input[type=search]{flex:1;padding:11px 14px;font-size:.99rem;border-radius:9px;font-family:inherit;
  border:1px solid var(--ligne);background:var(--carte);color:var(--encre)}
input[type=search]:focus{outline:2px solid var(--bleu);outline-offset:1px;border-color:transparent}
.indices{margin-top:7px;font-size:.83rem;color:var(--gris)}
.indices b{color:var(--encre);font-weight:600}

/* ── Chiffres dates ──────────────────────────────────────────────────────────────── */
/* 02/08/2026 · Kurt : « ca prend trop de place, mets au format ligne, sobre et discret ».
   Les quatre cellules encadrees passaient sur deux rangees et laissaient un vide a cote de
   « Gratuit ». Elles deviennent une SEULE ligne de texte : plus de bordures, plus de cases,
   plus de grille. Le chiffre reste en gras pour rester lisible d un coup d oeil, le libelle
   passe en petit et en gris, et un point median separe les entrees. La ligne se replie
   naturellement si la fenetre est etroite, sans jamais redevenir un tableau. */
.chiffres{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 16px;margin-top:14px}
.ch{display:flex;align-items:baseline;gap:5px}
.ch:not(:last-child)::after{content:"·";color:var(--gris);opacity:.5;margin-left:11px}
.ch .n{font-size:1rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ch .l{font-size:.82rem;color:var(--gris)}
.src{font-size:.77rem;color:var(--gris);margin-top:6px}
.src a{color:var(--bleu)}

/* ── En direct : une LISTE, pas des tuiles ───────────────────────────────────────── */
section{padding:22px 0 20px;border-bottom:1px solid var(--ligne)}
.tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
h2{font-size:1.18rem;font-weight:750;letter-spacing:-.02em}
.tete a{font-size:.87rem;color:var(--bleu);text-decoration:none;font-weight:600}
.leg{color:var(--gris);font-size:.88rem;margin:3px 0 11px}
.pastilles{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.pa{padding:4px 11px;border-radius:999px;border:1px solid var(--ligne);font-size:.83rem;color:var(--gris);
  background:transparent;cursor:pointer;font-family:inherit}
.pa[aria-pressed="true"]{background:color-mix(in srgb,var(--bleu) 14%,transparent);border-color:var(--bleu);color:var(--bleu);font-weight:700}
ul.liste{list-style:none;border:1px solid var(--ligne);border-radius:10px;overflow:hidden}
ul.liste li{display:flex;gap:11px;align-items:center;padding:8px 13px;border-bottom:1px solid var(--ligne);font-size:.9rem}
ul.liste li:last-child{border-bottom:0}
.eti{font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;
  background:rgba(239,68,68,.14);color:var(--rouge)}
.corps{flex:1;min-width:0}
.corps b{font-weight:650}
.meta{color:var(--gris);font-size:.81rem}
.vide{padding:20px 18px;text-align:center;color:var(--gris);border:1px dashed var(--ligne);border-radius:10px;font-size:.9rem}
.vide b{display:block;color:var(--encre);font-size:.99rem;margin-bottom:3px}

/* ── Radar du hero, avec la vraie carte dedans · 02/08/2026 ──────────────────────
   Recopie a l identique du radar de l accueil (index.html, .hero-radar) : 680 px, centre
   DERRIERE tout le hero, opacite .55, avec les blips rouges pulsants. Ma premiere version en
   avait fait une vignette de 290 px dans une colonne : ce n etait plus une ambiance, c etait une
   jauge. La difference tient a la taille et a la position, pas au dessin. */
.hero{position:relative;overflow:hidden}
.hero>*{position:relative;z-index:1}
.hero-radar{position:absolute;top:50%;left:50%;width:min(680px,116vw);height:min(680px,116vw);
  transform:translate(-50%,-50%);z-index:0;opacity:.55;pointer-events:none}
.hero-radar .hr-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(127,192,255,.22)}
.hero-radar .hr-ring.r2{inset:17%;border-color:rgba(127,192,255,.28)}
.hero-radar .hr-ring.r3{inset:34%;border-color:rgba(127,192,255,.34)}
.hero-radar .hr-sweep{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(127,192,255,.22),rgba(127,192,255,.06) 70deg,rgba(127,192,255,.01) 130deg,transparent 175deg,transparent);
  animation:hrSweep 5.5s linear infinite}
.hero-radar .hr-ping{position:absolute;top:50%;left:50%;width:30%;height:30%;border-radius:50%;
  border:1.5px solid rgba(127,192,255,.45);transform:translate(-50%,-50%) scale(.15);opacity:0;
  animation:hrPing 4.5s ease-out infinite}
.hero-radar .hr-ping.p2{animation-delay:2.25s}
.hero-radar .hr-blip{position:absolute;width:11px;height:11px;border-radius:50%;background:#ef4444;
  box-shadow:0 0 14px 3px rgba(239,68,68,.55);top:31%;left:64%;animation:hrBlip 4.5s ease-in-out infinite}
.hero-radar .hr-blip.b2{top:63%;left:38%;width:8px;height:8px;animation-delay:2.2s;animation-duration:5.2s}
/* 02/08/2026 · Le radar quitte le centre : centre, sa silhouette passait derriere le titre et
   genait la lecture. Au-dela de 900 px il occupe la zone vide de droite ; en dessous il reste
   centre mais s efface (opacite .30), faute de place ou l envoyer sur un telephone. */
.hero-radar{opacity:.30}
@media(min-width:900px){
  .hero-radar{left:75%;top:38%;opacity:.5;width:min(520px,52vw);height:min(520px,52vw)}
}
@keyframes hrSweep{to{transform:rotate(360deg)}}
@keyframes hrPing{0%{transform:translate(-50%,-50%) scale(.15);opacity:.5}70%{opacity:0}100%{transform:translate(-50%,-50%) scale(2.6);opacity:0}}
@keyframes hrBlip{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* LA VRAIE CARTE, EN VECTORIEL · 02/08/2026
   ── Pourquoi on a abandonne les tuiles raster ──
   Deux versions rasters ont ete jugees « vilaines, mal integrees », et c etait fonde. Le defaut
   n etait pas le reglage mais le MATERIAU : une tuile routiere porte des etiquettes de texte,
   des routes et une teinte d ocean qu il faut ensuite neutraliser a coups de filtres, ce qui
   donne une bouillie grise. Et au zoom 6 elle etait agrandie 2,2 fois, donc floue.

   ── Ce qu on utilise a la place ──
   Le trace des limites TERRESTRES publie par data.gouv.nc, jeu
   "communes-nc-limites-terrestres-simplifiees" (17 Mo bruts, 1 929 anneaux, 420 391 points),
   reduit hors ligne a 59 formes et 3 031 points par Douglas-Peucker avec une tolerance de
   0,004 degre, soit moins d un pixel a la taille d affichage. Projection Web Mercator : une
   projection naive ecraserait le territoire d environ 7 % a 21 degres sud.
   ⚠️ La tentative precedente via Nominatim rendait la ZONE ECONOMIQUE EXCLUSIVE, un rectangle
   en pleine mer : verifier qu un jeu geographique decrit bien la TERRE avant de s en servir.

   Resultat : net a toute taille, aucune etiquette, aucune requete reseau, et la silhouette prend
   la couleur du theme au lieu d etre plaquee dessus. */
.hero-radar .hr-terre{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* La silhouette occupe 62 % du disque : assez grande pour se lire, assez petite pour que les
   anneaux du radar restent visibles autour d elle. */
.hero-radar .hr-terre svg{position:absolute;top:50%;left:50%;width:62%;height:62%;transform:translate(-50%,-50%)}
/* ⛔ Aucun stroke : voir le commentaire du script. Un liseré très léger est obtenu par une
   seconde copie décalée en dessous, ce qui donne du relief sans dessiner de frontière. */
.hero-radar .hr-terre .terre{fill:rgba(127,192,255,.34)}
.hero-radar .hr-terre .halo{fill:rgba(127,192,255,.12)}
html[data-theme="clair"] .hero-radar .hr-terre .terre,html[data-theme="light"] .hero-radar .hr-terre .terre{fill:rgba(21,101,192,.30)}
html[data-theme="clair"] .hero-radar .hr-terre .halo,html[data-theme="light"] .hero-radar .hr-terre .halo{fill:rgba(21,101,192,.10)}

@media(prefers-reduced-motion:reduce){
  .hero-radar .hr-sweep,.hero-radar .hr-ping,.hero-radar .hr-blip{animation:none}
  .hero-radar .hr-ping{opacity:.25}
}

/* ── Classement : deux listes cote a cote, avec barre de proportion ──────────────── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:720px){.duo{grid-template-columns:1fr;gap:18px}}
.mini{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:700;margin-bottom:7px}
ol.rang{list-style:none;border:1px solid var(--ligne);border-radius:10px;overflow:hidden}
ol.rang li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;
  padding:6px 12px;border-bottom:1px solid var(--ligne);font-size:.88rem;position:relative}
ol.rang li:last-child{border-bottom:0}
ol.rang .r{color:var(--gris);font-size:.78rem;font-variant-numeric:tabular-nums;text-align:right}
ol.rang .nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
ol.rang .val{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;z-index:1}
ol.rang .val small{font-weight:500;color:var(--gris);font-size:.76rem;margin-left:5px}
/* La barre est un fond, pas un element : elle informe sans ajouter de hauteur. */
ol.rang .barre{position:absolute;left:0;top:0;bottom:0;background:rgba(59,153,246,.13);z-index:0}
html[data-theme="clair"] ol.rang .barre,html[data-theme="light"] ol.rang .barre{background:rgba(21,101,192,.10)}


/* ── Icones · une seule regle pour tout le jeu ────────────────────────────────────
   Elles heritent de la couleur du texte (currentColor dans les symboles), donc elles
   changent avec le theme sans qu on ait a les redessiner. */
/* fill, stroke et les proprietes de trait sont HERITEES en SVG : posees ici, elles
   traversent l arbre fantome de <use> et atteignent les traces des symboles. C est la seule
   facon fiable de styler un jeu de symboles reutilise. */
svg.i{width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:.42em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.btn svg.i{margin-right:.4em}

/* ── Raccourcis du hero · les quatre gestes de declaration ───────────────────────
   Places sous le champ parce que c est la que se trouve l intention de quelqu un qui vient
   de se faire voler : il ne doit pas avoir a chercher dans un menu. */
.gestes{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.gestes a{display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;
  border:1px solid var(--ligne);text-decoration:none;font-size:.86rem;font-weight:600;color:var(--encre)}
.gestes a:hover{border-color:var(--bleu);color:var(--bleu)}
.gestes a svg.i{color:var(--bleu)}

/* ── Section des raccourcis complets ─────────────────────────────────────────────
   Grille dense, une ligne par entree, l icone tient lieu de puce. */
/* Quatre colonnes titrees plutot qu une grille a plat : sur une grille, l ordre depend de la
   largeur de la fenetre et rien ne dit ou commence une famille. */
.raccourcis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px 22px}
.raccourcis .mini{margin-bottom:4px}
/* Flux de texte, pas flex : en flex, le libelle et sa precision sont deux elements distincts
   qui se replient chacun de leur cote, ce qui donnait deux colonnes bancales dans une colonne
   de 190 px. En ligne, la precision suit le libelle comme une incise. */
.raccourcis a{display:block;padding:5px 0;text-decoration:none;color:var(--encre);font-size:.89rem;line-height:1.4}
.raccourcis a:hover{color:var(--bleu)}
.raccourcis a svg.i{color:var(--bleu);opacity:.85}
.raccourcis a span{color:var(--gris);font-size:.82rem;margin-left:6px}

/* ── Pied de page : TOUT reste atteignable, en cinq colonnes serrees ─────────────── */
footer{padding:24px 0 28px;font-size:.87rem}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:8px 24px}
.cols h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin-bottom:6px;font-weight:700}
.cols a{display:block;text-decoration:none;color:var(--encre);padding:1.5px 0;opacity:.86;line-height:1.35}
@media(pointer:coarse){.cols a{padding:6px 0}.raccourcis a{padding:9px 0}}
.cols a:hover{color:var(--bleu);opacity:1}
.bas{margin-top:18px;padding-top:13px;border-top:1px solid var(--ligne);color:var(--gris);font-size:.81rem}
.note{background:var(--carte);border:1px solid var(--ligne);border-left:3px solid var(--or);
  border-radius:0 8px 8px 0;padding:9px 13px;margin:14px 0 0;font-size:.83rem;color:var(--gris);line-height:1.4}
.note b{color:var(--encre)}
@media(max-width:760px){nav{display:none}}
/* 05/08/2026 · nav0508 · la regle ci-dessus masquait la navigation sans rien mettre a la
   place : sous 760 px l accueil n avait plus AUCUN moyen d aller ailleurs. Les 65 autres
   pages ont ce bouton, servi par js/app.js, que l accueil ne charge pas. On le lui donne ici.
   ⛔ Tout est en PIXELS : la racine vaut 16 px sur l accueil et 15 px ailleurs, un `rem`
   importerait justement l ecart qu on cherche a supprimer.
   ⛔ `nav.open` (0,1,1) l emporte sur `nav` (0,0,1) : aucun !important necessaire. */
.burger{display:none;background:none;border:0;color:var(--encre);font-size:22px;line-height:1;
  cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center;padding:0}
@media(max-width:760px){
  .burger{display:inline-flex}
  /* header est deja `position:sticky` (ligne 58), donc positionne : le menu s y ancre. */
  nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--fond);border-top:1px solid var(--ligne);box-shadow:0 10px 24px rgba(0,0,0,.18);
    z-index:60;padding:6px 0;max-height:calc(100vh - 60px);overflow:auto}
  /* 44 px de haut : la cible tactile recommandee, et la meme que sur les autres pages. */
  nav.open a{padding:13px 20px;border-bottom:0;min-height:44px;display:flex;align-items:center}
}
@media(max-width:560px){
  /* Icone seule pour la connexion, libelle raccourci pour le signalement : les deux actions
     restent la, elles cessent seulement de se replier sur deux lignes chacune. */
  .bar{gap:10px;height:auto;padding:8px 0}
  .droite{gap:6px}
  .btn{padding:8px 11px;font-size:.86rem;white-space:nowrap}
  .droite .btn:not(.p) span.lb{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .droite .btn:not(.p) svg.i{margin-right:0}
  .lb-long{display:none}
}
/* ═══════════════════════════════════════════════════════════════════════════════
   STYLES RECUPERES · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════
   🔴 L extraction du <style> en ligne vers css/cda-socle.css, le 02/08, annoncait
   une « empreinte des styles calcules identique avant et apres ». Elle ne l etait
   pas : 38 selecteurs encore utilises par la page ont ete perdus, ainsi que la
   declaration @font-face de la police Outfit.
   Consequence visible : quatre sections entieres du bas de l accueil s affichaient
   sans aucun style (« Derniers besoins de la communaute », « Derniers vols
   signales », « Comment ca marche », « L ecosysteme CaleDoHub »), avec un bouton
   au rendu natif du navigateur et du texte centre par defaut.
   Regles reprises TELLES QUELLES depuis index-actuel.html, sans reecriture.
   ⛔ Ne pas « nettoyer » ce bloc sans verifier, selecteur par selecteur, qu aucun
   element de la page ne le porte plus.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media(max-width:860px){
  .top nav.open{display:flex}
}
/* How it works */
  .how{margin-top:44px}
.how h2, .eco h2{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
.how .hs{color:var(--soft);font-size:.95rem;margin-bottom:20px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.step .num{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;
    background:rgba(59,153,246,.14);color:var(--blue);border:1px solid rgba(59,153,246,.3);margin-bottom:12px}
.step h4{font-size:1.02rem;font-weight:800;margin-bottom:5px}
.step p{color:var(--soft);font-size:.88rem}
/* Eco cross-promo */
  .eco{margin-top:44px;border:1px solid var(--line);border-radius:18px;padding:24px;
    background:linear-gradient(140deg,var(--panel),var(--panel2));display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.eco .txt{flex:1;min-width:240px}
.eco p{color:var(--soft);font-size:.92rem;margin-top:5px}
.eco a.cta{background:var(--blue-d);color:#fff;border-radius:12px;padding:12px 22px;font-weight:800;font-size:.92rem;white-space:nowrap;transition:.14s}
.eco a.cta:hover{background:var(--blue-d)}
.plate button:hover,.eco a.cta:hover{filter:brightness(1.06)}
.plate button:active,.eco a.cta:active{transform:translateY(1px)}
.how{text-align:center}
.how .hs{margin-left:auto;margin-right:auto;max-width:600px}
.how .steps .step{text-align:left}
.eco{flex-direction:column!important;align-items:center!important;text-align:center}
.eco .txt{text-align:center}
.eco .txt p{margin-left:auto;margin-right:auto;max-width:600px}
/* 02/08/2026 · Classement officiel et derniers vols. Prefixe cdvx- : rien ne peut heurter le CSS
   existant de la page. */
.cdvx{max-width:var(--maxw,1180px);margin:22px auto 0;padding:0 18px}
.cdvx h2{font-size:1.18rem;font-weight:750;letter-spacing:-.02em;margin:0}
.cdvx .tete{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cdvx .tete a{font-size:.87rem;color:#3b99f6;text-decoration:none;font-weight:600}
.cdvx .leg{color:var(--gris);font-size:.88rem;margin:3px 0 11px}
.cdvx .src{font-size:.77rem;color:var(--gris);margin-top:8px}
.cdvx .src a{color:#3b99f6}
.cdvx .duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:720px){
  .cdvx .duo{grid-template-columns:1fr;gap:18px}
}
.cdvx .mini{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:700;margin:0 0 7px}
.cdvx ol{list-style:none;border:1px solid var(--ligne);border-radius:10px;overflow:hidden;margin:0;padding:0}
.cdvx ol li{display:grid;grid-template-columns:20px 1fr auto;gap:10px;align-items:center;
  padding:6px 12px;border-bottom:1px solid var(--ligne);font-size:.88rem;position:relative}
.cdvx ol li:last-child{border-bottom:0}
.cdvx .r{color:var(--gris);font-size:.78rem;font-variant-numeric:tabular-nums;text-align:right}
.cdvx .nom{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
.cdvx .val{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem;z-index:1}
.cdvx .val small{font-weight:500;color:var(--gris);font-size:.76rem;margin-left:5px}
/* La barre est un fond absolu : elle informe sans ajouter la moindre hauteur. */
.cdvx .barre{position:absolute;left:0;top:0;bottom:0;background:rgba(59,153,246,.13);z-index:0}
.cdvx ul{list-style:none;border:1px solid var(--ligne);border-radius:10px;overflow:hidden;margin:0;padding:0}
.cdvx ul li{display:flex;gap:11px;align-items:center;padding:8px 13px;border-bottom:1px solid var(--ligne);font-size:.9rem}
.cdvx ul li:last-child{border-bottom:0}
.cdvx .eti{font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:4px;white-space:nowrap;
  background:rgba(239,68,68,.14);color:#ef4444;font-variant-numeric:tabular-nums}
.cdvx .corps{flex:1;min-width:0}
.cdvx .meta{color:var(--gris);font-size:.81rem}
.cdvx .vide{padding:18px;text-align:center;color:var(--gris);border:1px dashed var(--ligne);border-radius:10px;font-size:.9rem}
/* Icones des titres de section. `currentColor` : elles suivent la couleur du titre, donc le
   theme, au lieu de la contredire comme le faisaient les emoji. */
.cdvx-i{width:.92em;height:.92em;vertical-align:-.10em;margin-right:.38em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  color:#3b99f6}
.cdv-latest{max-width:1100px;margin:36px auto 0;padding:0 18px}
.cdv-latest-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.cdv-latest-head h2{font-size:1.3rem;margin:0}
.cdv-latest-all{color:var(--soft,var(--gris));text-decoration:none;font-size:.9rem;font-weight:600;white-space:nowrap}
.cdv-latest-all:hover{color:#fff}
.cdv-latest-sub{color:var(--soft,var(--gris));font-size:.82rem;margin:2px 0 16px}
.cdv-latest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.cdv-bes{max-width:1100px;margin:30px auto 0;padding:0 18px}

/* ── 🔴 04/08/2026 · LES DEUX COLONNES NE S ALIGNAIENT PAS ─────────────────────────────
   Kurt, capture annotee de trois traits a l appui. Mesure : la liste de gauche commencait
   **73 px plus bas** que celle de droite. Cause : les deux en-tetes n ont pas la meme
   hauteur (142 px a gauche avec le bouton « Poster un besoin » et une accroche de trois
   lignes, 71 px a droite). Chaque colonne empilait donc ses trois blocs pour son compte,
   et rien ne se repondait d une colonne a l autre.

   🔑 `subgrid` : les deux colonnes cessent d avoir leurs propres rangees et empruntent
   celles de la grille parente. En-tetes ensemble, accroches ensemble, listes ensemble.
   Mesure apres : decalage 0, largeurs de colonne inchangees.

   ⚠️ On n egalise SURTOUT PAS les hauteurs a la main (`min-height`) : les deux accroches
   ne se coupent pas au meme endroit selon la largeur de l ecran, une valeur figee serait
   juste a une largeur et fausse a toutes les autres.
   ⛔ Cible les deux sections PAR LEUR ID : `#cdv-carte` porte aussi la classe `.cdv-bes`,
   et une regle sur la classe transformerait la carte en grille de trois rangees.
   Le repli est sans risque : un navigateur sans `subgrid` retrouve exactement la mise en
   page d avant, decalee mais fonctionnelle. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 861px) {
    /* ⛔🔴 `grid-template-columns` EST OBLIGATOIRE ICI, et son absence a casse la page.
       En posant `display:grid` sans dire quelles COLONNES, la section se donne une colonne
       implicite dimensionnee sur son CONTENU. Mesure : les blocs de la colonne de gauche
       sont passes a **721 px dans une section de 531**, soit 208 px deverses par-dessus la
       colonne de droite. Les titres des besoins chevauchaient les vols signales.
       🔑 `minmax(0, 1fr)` : le plancher a zero autorise la colonne a se resserrer sous la
       largeur de son contenu, au lieu de pousser la section. C est exactement le meme
       piege que `1fr` seul, deja paye sur la liste « En direct ».
       Mesure apres : blocs a 495 px, plus aucun debordement, alignement toujours a 0. */
    #cdv-bes, #cdv-vols {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 3;
    }
  }
}
.cdv-bes-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.cdv-bes-head h2{font-size:1.3rem;margin:0}
.cdv-bes-sub{color:var(--soft,var(--gris));font-size:.82rem;margin:2px 0 14px}
.cdv-bes-post{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:11px;padding:9px 15px;font-size:.86rem;font-weight:700;cursor:pointer;white-space:nowrap}
.cdv-bes-post:hover{filter:brightness(1.08)}
.cdv-bes-list{display:flex;flex-direction:column;gap:9px}
.cdv-bes-item{background:rgba(255,255,255,.055);border:1px solid var(--carte);border-radius:13px;overflow:hidden}
.cdv-bes-sum{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;list-style:none}
.cdv-bes-sum::-webkit-details-marker{display:none}
.cdv-bes-ico{font-size:1.5rem;flex:none}
.cdv-bes-main{flex:1;min-width:0}
/* ── 🔴 03/08/2026 au soir · LE TITRE DEBORDAIT DE SA CARTE ────────────────────────────
   Kurt : « ça fait désordonné ». Mesure : le titre faisait **556 px de large dans une
   colonne de 403**, et sortait donc franchement du cadre, par-dessus le chevron.
   La regle demandait pourtant deja `overflow:hidden` et `text-overflow:ellipsis`.
   ⛔ ET C EST LA LE PIEGE : ces deux proprietes NE FONT RIEN sur un element `display:inline`.
   L ellipse a besoin d une boite de bloc pour savoir ou couper ; sur une boite en ligne,
   elle est ignoree en silence, exactement comme elle l est sur un conteneur flex.
   Aucune erreur, aucun signe : juste du texte qui sort.
   🔑 `display:block` suffit, et c est aussi la bonne mise en page : le titre occupe sa
   ligne, la ligne de details vient dessous. */
.cdv-bes-t{display:block;font-weight:700;color:var(--encre);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdv-bes-m{color:var(--soft,var(--gris));font-size:.76rem;margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.cdv-bes-chev{color:var(--soft,var(--gris));transition:transform .18s;flex:none}
details[open] .cdv-bes-chev{transform:rotate(90deg)}
.cdv-bes-body{padding:2px 15px 15px;border-top:1px solid var(--carte)}
.cdv-bes-raw{color:#dbe6ff;font-size:.9rem;line-height:1.5;white-space:pre-wrap;margin:12px 0}
.cdv-bes-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.cdv-bes-btn{background:var(--carte);border:1px solid var(--carte);color:var(--encre);border-radius:9px;padding:7px 12px;font-size:.8rem;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.cdv-bes-btn:hover{background:var(--carte)}
.cdv-bes-btn.p{background:#2563eb;border-color:#2563eb}
.cdv-bes-replies{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.cdv-bes-reply{background:rgba(37,99,235,.12);border:1px solid rgba(37,99,235,.28);border-radius:9px;padding:7px 11px;font-size:.83rem;color:#dbe6ff}
.cdv-bes-reply .who{font-size:.7rem;color:var(--soft,var(--gris));margin-top:3px}
.cdv-bes-empty{background:var(--carte);border:1px dashed var(--carte);border-radius:13px;padding:22px;text-align:center;color:var(--soft,var(--gris));font-size:.9rem}
.cdv-bm-ov{position:fixed;inset:0;z-index:99990;background:rgba(6,12,26,.8);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px}
.cdv-bm{width:100%;max-width:480px;background:#0e1b34;border:1px solid var(--carte);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.cdv-bm-h{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--encre);font-weight:700}
.cdv-bm-x{background:var(--carte);border:none;color:var(--encre);width:32px;height:32px;border-radius:50%;cursor:pointer}
.cdv-bm-b{padding:16px 17px;display:flex;flex-direction:column;gap:12px}
.cdv-bm-b label{font-size:.8rem;font-weight:600;color:#c7d6f5;display:block;margin-bottom:5px}
.cdv-bm-b select,.cdv-bm-b input,.cdv-bm-b textarea{width:100%;background:var(--carte);border:1px solid var(--carte);border-radius:9px;padding:9px 11px;color:var(--encre);font:inherit;font-size:.88rem;outline:none}
.cdv-bm-b textarea{resize:vertical;min-height:90px}
.cdv-bm-send{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:10px;padding:11px;font-weight:700;cursor:pointer;font-size:.92rem}
.cdv-bm-note{font-size:.72rem;color:var(--soft,var(--gris));text-align:center}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   REGLES D ELEMENT RECUPEREES · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Deuxieme passe : mon premier diff ne comparait que les selecteurs de CLASSE et avait donc
   manque ces regles d ELEMENT, perdues elles aussi le 02/08.

   ⛔ `font:inherit` sur les boutons est celle qui se voyait : sans elle, un <button> n herite
   pas de la police de la page et le navigateur lui impose Arial 13px. Le site tout entier
   etant en Outfit, chaque bouton jurait avec ce qui l entoure.
   ⚠️ On ne reprend QUE la police, pas le reste de la regle d origine (fond bleu, padding
   14/24, graisse 800) : le socle style deja ses boutons un par un, et une regle d element
   aussi large les ecraserait tous.

   ⛔ Une troisieme regle est volontairement ECARTEE : `img{width:100%;height:100%}`. Mon
   diff l avait signalee comme globale, verification faite elle est scopee a
   `.cdv-lc-photo img`. L appliquer a tous les <img> aurait deforme les logos, les icones et
   les vignettes de tout le site. Un diff qui signale trop est aussi dangereux qu un diff qui
   signale trop peu : on regarde le contexte avant de recopier.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
button,input,select,textarea{font-family:inherit}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   AFFINAGE TYPOGRAPHIQUE · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Demande de Kurt : « sobre, facile a lire », apres « beaucoup de caracteres en gras ».

   Le constat mesure sur la page : h1 en 800, h2 en 750, h3 en 700, sous-titres en 700, et
   un interligne de 1.45. La hierarchie reposait donc presque entierement sur la GRAISSE.
   Quand tout est gras, plus rien ne ressort : l oeil ne sait plus ou se poser, et le texte
   courant se lit mal sur fond sombre, ou les graisses lourdes bavent.

   Le principe applique ici est celui d une hierarchie par la TAILLE et par l ESPACE, la
   graisse ne servant qu a marquer le premier niveau :
     · titres ramenes de 800/850 a 700, et 650 pour les niveaux 3 et 4
     · interlignage ouvert (1.45 -> 1.6 sur le corps, 1.7 sur les paragraphes)
     · leger resserrement optique des grands titres (letter-spacing negatif), qui compense
       l aeration et evite l effet « mots detaches »
     · les libelles de liste et de tableau passent de 700 a 600 : ils restent lisibles en
       diagonale sans crier plus fort que les titres

   ⚠️ Outfit est une police VARIABLE (300 a 800) : les valeurs intermediaires comme 600 ou
   650 sont rendues exactement. Sur une police statique elles seraient arrondies au palier
   superieur et l affinage n aurait aucun effet.
   ⚠️ Bloc pose en FIN de feuille et volontairement peu specifique : il donne le ton general
   sans ecraser une regle qui viserait un composant precis.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

body{line-height:1.6}

h1{font-weight:700;letter-spacing:-.022em;line-height:1.14}
h2{font-weight:700;letter-spacing:-.014em;line-height:1.25}
h3{font-weight:650;letter-spacing:-.008em;line-height:1.3}
h4,h5,h6{font-weight:650;letter-spacing:0}

p{line-height:1.7}
p + p{margin-top:.7em}

/* Les libelles de listes et de tableaux : lisibles en diagonale, sans hurler. */
td,th,li,dt,label,figcaption{font-weight:inherit}
th{font-weight:600}

/* Un texte secondaire doit se distinguer par la COULEUR, pas par une graisse plus faible :
   une graisse fine sur fond sombre devient illisible. */
small,.note,.sub,.muted{font-weight:inherit}

/* Les majuscules ont besoin d air : sans interlettrage elles forment un bloc compact. */
[style*="uppercase"],.upper,.eyebrow{letter-spacing:.06em}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   ILOTS SOMBRES EN MODE CLAIR · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Le pied de page et le bloc « L ecosysteme CaleDoHub » sont injectes par `js/app.js` et
   `js/cdv-footer.js`, avec leurs couleurs ecrites en dur dans le JavaScript. En mode clair,
   leur texte clair se retrouvait sur fond blanc : mesure du 03/08, contraste 1.0 sur
   « Decouvrir CaleDoHub », c est-a-dire invisible.

   Deux facons de reparer :
     1. reecrire les couleurs dans les deux modules JS. Ils sont charges par 65 pages, et
        une erreur la se voit partout : trop risque pour une fin de session.
     2. assumer ces deux zones comme des ILOTS SOMBRES, ce que fait la majorite des sites
        clairs pour leur pied de page. C est un choix de composition, pas un contournement :
        un pied de page contraste ferme la page et separe nettement le contenu du reste.
   On prend la seconde. Elle est sure, immediate, et le rendu est meilleur que si ces blocs
   etaient simplement clairs comme le reste.

   ⛔ Ne s applique QU EN mode clair : en sombre, ces blocs sont deja dans le ton et cette
   regle ne doit rien changer.
   🔧 Le jour ou les deux modules JS passeront aux variables de theme, supprimer ce bloc.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] footer,
html[data-theme="clair"] footer,
html[data-theme="light"] .eco,
html[data-theme="clair"] .eco{
  background:#0a1424;
  color:#eaf2ff;
  border-color:rgba(255,255,255,.12);
}
html[data-theme="light"] footer a,
html[data-theme="clair"] footer a,
html[data-theme="light"] .eco a,
html[data-theme="clair"] .eco a{color:#cfe0ff}
html[data-theme="light"] footer h2,html[data-theme="light"] footer h3,
html[data-theme="light"] footer h4,html[data-theme="light"] .eco h2,
html[data-theme="clair"] footer h2,html[data-theme="clair"] footer h3,
html[data-theme="clair"] footer h4,html[data-theme="clair"] .eco h2{color:#ffffff}
html[data-theme="light"] footer p,html[data-theme="light"] .eco p,
html[data-theme="clair"] footer p,html[data-theme="clair"] .eco p{color:#a8c1e6}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   ALIAS DE VARIABLES · reparation de MON erreur du 03/08
   ═══════════════════════════════════════════════════════════════════════════════════════
   🔴 En recuperant les styles perdus depuis `index-actuel.html`, j ai repris leurs noms de
   variables sans verifier qu ils existaient ici. Mesure : 16 usages pour ZERO definition
   (`--soft` 11 fois, `--panel` 2, `--line` 2, `--blue` 1).
   Une `var()` non definie ne declenche aucune erreur : la propriete est simplement ignoree.
   C est pour cela que les cartes d etapes de « Comment ca marche » n avaient aucun fond et
   que leurs textes gardaient la couleur heritee : le style etait la, mais muet.
   ⛔ Toujours verifier qu une variable reprise d un autre fichier existe dans le sien.

   On les declare comme ALIAS des variables du socle plutot que de reecrire les regles :
   une seule ligne par nom, et surtout elles suivent alors le theme clair/sombre toutes
   seules, puisqu elles pointent vers les variables que le theme redefinit.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --panel:var(--carte);
  --line:var(--ligne);
  --soft:var(--gris);
  --blue:var(--bleu);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   « COMMENT CA MARCHE » · compacte · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Kurt : « ca prend trop de place ». Constat : trois etapes de deux lignes chacune
   occupaient toute la hauteur de l ecran, empilees les unes sous les autres.
   Aucune regle n existait pour `.steps`, le conteneur : les trois blocs tombaient donc en
   colonne par defaut. C est de l information tres courte (un titre, une phrase), qui se lit
   d un coup d oeil quand elle est cote a cote, et qui se subit quand il faut derouler.
   Trois colonnes sur ecran large, une seule sous 760 px ou la lecture redevient verticale.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
.how{margin-top:32px}
.how .hs{margin-bottom:16px}
.how .steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start;
}
.how .steps .step{padding:16px 18px}
.how .steps .step h4{margin:8px 0 4px;font-size:.98rem}
.how .steps .step p{margin:0;line-height:1.55}
/* Le numero d etape : une pastille discrete, pas un titre. */
.how .steps .step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:8px;
  font-size:.82rem;font-weight:700;
}
@media(max-width:760px){
  .how .steps{grid-template-columns:1fr;gap:10px}
  .how{margin-top:26px}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   DENSITE DES LISTES · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Kurt : « il faut mieux gerer les hauteurs, ca consomme trop de place ».
   Mesure avant : chaque carte de « Derniers besoins » et « Derniers vols » occupait 73 px
   pour deux lignes de texte. Avec 8 besoins et 10 signalements, cela faisait 1 314 px de
   defilement pour dix-huit informations tenant chacune sur deux lignes.

   Trois leviers, dans cet ordre d importance :
     1. le RETRAIT interieur, ramene de 12 a 8 px en haut et en bas
     2. l ECART entre cartes, de 9 a 6 px : elles restent distinctes sans flotter
     3. l INTERLIGNE des metadonnees, resserre : c est du texte court et secondaire

   ⛔ On ne touche pas a la taille du texte : la lisibilite passe avant la densite, et Kurt
   a justement demande « facile a lire ». On gagne de la place sur le VIDE, pas sur le texte.
   ⚠️ Sous 760 px, on ne resserre pas davantage : au doigt, une cible trop basse se rate.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Les cartes de besoins et de signalements partagent la meme classe. */
.cdv-bes-sum{padding:8px 13px}
.cdv-bes-list{gap:6px}
.cdv-bes-item{border-radius:11px}
.cdv-bes-t{line-height:1.3}
/* Les metadonnees (commune, date, categorie) : une ligne serree sous le titre. */
.cdv-bes-m{line-height:1.35;margin-top:2px;gap:9px}
.cdv-bes-ico{font-size:1.3rem}

/* L en-tete de chaque bloc respirait plus que ses cartes. */
.cdv-bes{margin-top:24px}
.cdv-bes-sub{margin:2px 0 10px}
.cdv-bes-head{margin-bottom:2px}

/* Le corps deplie garde de l air : on ne lit pas un paragraphe aussi serre qu une liste. */
.cdv-bes-body{padding:2px 13px 12px}
.cdv-bes-raw{line-height:1.6}

@media(max-width:760px){
  /* ⛔ Pas de resserrement supplementaire au doigt : sous ~44 px de hauteur utile, la cible
     devient difficile a viser et on ouvre la mauvaise carte. */
  .cdv-bes-sum{padding:10px 12px}
  .cdv-bes-list{gap:7px}
}



/* ═══════════════════════════════════════════════════════════════════════════════════════
   « DERNIERS BESOINS » ET « DERNIERS VOLS » COTE A COTE · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Deux listes de meme nature se suivaient verticalement : 633 px puis 735 px, soit 1 368 px
   de defilement pour deux blocs qui tiennent chacun dans une demi-largeur. Cote a cote, on
   ne paie plus que le plus haut des deux.

   ⛔ Elles n ont PAS de conteneur commun : ce sont deux <section> soeurs dans `main.z`. On
   met donc `main` en grille et on remet tous ses autres enfants sur la largeur entiere
   (`grid-column:1/-1`), sauf ces deux-la. C est la seule facon d y arriver sans toucher au
   HTML, et elle ne change rien pour le reste de la page : verifie, `#direct` et le hero
   gardent exactement leur largeur.

   🔑 CE QUI M A PRIS TROIS ESSAIS, et qu il faut savoir :
     1. `1fr` ne suffit pas. `1fr` vaut `minmax(auto,1fr)` : le contenu impose son minimum et
        une colonne devient plus large que l autre. Il faut `minmax(0,1fr)`.
     2. Meme avec ca, la section debordait a 757 px dans une colonne de 531. La cause n etait
        pas le contenu mais la section elle-meme : `.cdv-bes` porte `max-width:1100px` et
        `margin:30px auto`. Dans une grille, ce `auto` et ce `max-width` la font sortir de sa
        piste. Il faut donc les neutraliser ICI (`width:100%;max-width:none;margin-lateral:0`),
        sans y toucher ailleurs : hors de la grille, ils restent utiles.
   ⛔ Ne pas « simplifier » en retirant `minmax(0,...)` ou `width:100%` : chacun des deux
   corrige un debordement different, et le defaut ne se voit qu au-dela de 1000 px.

   ⚠️ Sous 1000 px, rien ne s applique : deux colonnes sur un telephone rendraient les deux
   listes illisibles. Elles reprennent leur empilement naturel.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* ⛔ 03/08/2026 · ON CIBLE PAR IDENTIFIANT, PAS PAR CLASSE. Ma premiere version visait
   `section.cdv-bes` : or `cdv-bes` n est pas la classe des deux listes, c est une classe de
   STYLE partagee par TROIS sections, dont `#cdv-carte`. La carte des alertes en cours s est
   donc retrouvee dans une demi-colonne, avec un grand vide a sa droite.
   🔑 Une classe dit a quoi une chose RESSEMBLE, un identifiant dit ce qu elle EST. Pour
   choisir des elements precis dans une mise en page, c est l identifiant qui fait foi. */
@media(min-width:1000px){
  main.z{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 22px;align-items:start}
  /* ⛔ `grid-column:1/-1` ne suffit PAS a occuper la largeur : il donne la PISTE, pas la
     largeur DANS la piste. Sans `width:100%`, un bloc qui se dimensionne sur son contenu
     reste etroit et laisse un vide a sa droite. C est ce qui est arrive a la carte des
     alertes en cours : elle avait bien la bonne piste, et faisait 488 px sur 1084. */
  main.z>*{grid-column:1/-1;justify-self:stretch;width:100%}
  main.z>#cdv-bes,
  main.z>#cdv-vols{
    grid-column:auto;
    min-width:0;
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   COUPURES DE LIGNE · 03/08/2026
   ═══════════════════════════════════════════════════════════════════════════════════════
   Kurt : « retour a la ligne stp […] que ce soit propre a lire ».
   Le titre d accueil se coupait apres « , en », laissant « Nouvelle-Caledonie » seul sur la
   seconde ligne, et une premiere ligne beaucoup plus longue que la seconde.

   Mesure a 1310 px de large, part de la DERNIERE ligne par rapport a la largeur du bloc :
     « Ce qui se passe pres de chez vous, en… »  55 %  ->  90 %
     « Derniers besoins de la communaute »        5 %   (un seul mot sur la 2e ligne)
     « Derniers vols signales »                   8 %
     « L ecosysteme CaleDoHub »                   4 %

   `text-wrap:balance` demande au navigateur de repartir le texte pour que les lignes aient
   des longueurs proches, au lieu de remplir la premiere et de laisser tomber le reste. Il
   ne s applique qu aux blocs courts (quelques lignes), ce qui en fait exactement l outil des
   titres, sans cout de calcul sur les paragraphes longs.

   `text-wrap:pretty` sur le texte courant traite le probleme voisin : le mot solitaire en
   fin de paragraphe, que les typographes appellent une ligne veuve.

   ⚠️ Les deux sont ignores en silence par un navigateur qui ne les connait pas : le texte
   se coupe alors comme avant, jamais moins bien. Aucun repli a prevoir.
   ⛔ On ne touche PAS au texte lui-meme : pas d espaces insecables glissees a la main dans le
   HTML. Une correction typographique appliquee au contenu se propage mal et se perd au
   premier reenregistrement ; la mise en forme, elle, appartient a la feuille de style.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,.hero h1,.pd-hero h1{text-wrap:balance}
p,li,figcaption,.cdv-bes-sub,.pd-tag,summary{text-wrap:pretty}

/* Les libelles courts qui ne doivent jamais se couper en deux : une date, un nombre suivi de
   son unite, un badge. Une coupure y est toujours une faute de lecture. */
.eti,.fia,.dem,.badge,.pill,time,.cdv-bes-m>span{white-space:nowrap}

/* ── 04/08/2026 · bande-chiffres ─────────────────────────────────────────────────────
   Kurt : « toute la largeur, avec effet transparence pour laisser en évidence le plus
   important autour ». Le fond devient translucide et laisse passer le radar ; l encre,
   elle, garde une teinte pleine. Baisser l opacite du bloc entier ferait reculer le texte
   avec le fond et casserait la lisibilite mesuree ce matin. */
.chiffres{
  margin-top:16px;
  /* On sort des marges du conteneur, puis on rend le padding a l interieur : la couleur
     s etend, le texte reste aligne sur le titre. */
  margin-left:calc(-1 * var(--pad-page, 18px));
  margin-right:calc(-1 * var(--pad-page, 18px));
  padding:10px var(--pad-page, 18px);
  background:rgba(255,255,255,.045);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  /* Une seule rangee : on defile plutot que de casser la ligne en deux. */
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.chiffres::-webkit-scrollbar{display:none}
.ch{white-space:nowrap;flex:0 0 auto}
html[data-theme="light"] .chiffres,html[data-theme="clair"] .chiffres{
  background:rgba(13,27,42,.035);
  border-top-color:rgba(13,27,42,.08);
  border-bottom-color:rgba(13,27,42,.08);
}

/* 04/08/2026 · le premier chiffre est un lien vers stats.html. Le lien doit se comporter
   comme la cellule, sinon le nombre et son libelle s empilent. */
.ch>a{display:flex;align-items:baseline;gap:5px}

/* 04/08/2026 · bande centree et grisee, demande de Kurt. Le gras blanc des nombres tirait
   l oeil autant que le titre ; en gris, la bande devient une note de bas de bloc. */
.chiffres{justify-content:center}
.ch .n{color:var(--gris);font-weight:700}
.ch>a{color:inherit}

/* ── 04/08/2026 · titre et pastille ──────────────────────────────────────────────────
   Le h1 coupait apres « chez » et laissait « vous, » orphelin : 24ch etait trop court
   pour les 33 caracteres de la premiere phrase. On empeche aussi la partie bleue de se
   couper en son milieu, ce qui deplacerait le probleme d un mot. */
.hero h1 span{white-space:nowrap}
/* La regle generique `.eti` peint un fond rouge a 14 % avec un arrondi de 4px, pour les
   listes simples du site. Dans le bloc « En direct », la pastille est deja dessinee par
   `.p` : les deux se superposaient. On neutralise la generique LA SEULEMENT, sans y
   toucher ailleurs ou elle sert. */
#direct .eti{background:transparent;border-radius:0;padding:2px 0}