/* ==========================================================================
   Tableau de bord du lieu — panneau plein écran ouvert par un clic sur la carte.
   Tout est préfixé .tl- : rien ici ne peut toucher le reste du site.
   Couleurs : les jetons du site (assets/css/jetons.css), avec un repli.
   ========================================================================== */

.tl-panneau {
  --tl-accent: var(--accent, #2f6b46);
  --tl-accent-clair: #e6f0e8;
  --tl-panneau: var(--panneau, #ffffff);
  --tl-panneau-2: var(--panneau-2, #f8faf7);
  --tl-trait: var(--trait, #dfe5da);
  --tl-trait-fort: var(--trait-fort, #c6d0c0);
  --tl-encre-1: var(--encre-1, #1c2620);
  --tl-encre-2: var(--encre-2, #45524a);
  --tl-encre-3: var(--encre-3, #5f6c64);
  --tl-focus: var(--focus, #1565c0);
  --tl-fond: #f7f8fa;
  --tl-froid: #2f6fc4;
  --tl-chaud: #b4541d;
  --tl-chaud-trait: #ee8a3a;
  --tl-obs-fond: #e8f0fb; --tl-obs-trait: #b9cff0; --tl-obs-texte: #1f4f8f;

  position: fixed;
  inset: 0;
  z-index: 10100;               /* au-dessus de la carte et du panneau de gauche, SOUS la fenêtre de connexion (10200) qu'il peut ouvrir */
  background: var(--tl-fond);
  color: var(--tl-encre-1);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;           /* le contenu qui entre en glissant (.tl-entree) ne fait pas défiler le panneau de côté */
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .34s;
  box-shadow: -14px 0 36px rgba(28, 38, 32, .22);
  container-type: inline-size;
}
.tl-panneau.tl-ouvert {
  transform: none;
  visibility: visible;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .tl-panneau, .tl-panneau.tl-ouvert { transition: none; }
  .tl-squelette { animation: none !important; }
}
.tl-panneau *, .tl-panneau *::before, .tl-panneau *::after { box-sizing: border-box; }
.tl-panneau :focus-visible { outline: 3px solid var(--tl-focus); outline-offset: 2px; }
.tl-panneau h1, .tl-panneau h2, .tl-panneau h3 {
  margin: 0; padding: 0; line-height: 1.25; text-wrap: balance; color: var(--tl-encre-1);
  background: none; border: 0; box-shadow: none; text-align: left; text-transform: none; letter-spacing: normal;
}
.tl-panneau h1 { font-size: 30px; font-weight: 700; }
.tl-panneau h2 { font-size: 18px; font-weight: 700; }
.tl-panneau h3 { font-size: 15px; font-weight: 700; }
.tl-panneau p { margin: 0; }
.tl-panneau button { font: inherit; color: inherit; cursor: pointer; }
.tl-panneau button:disabled { cursor: not-allowed; opacity: .6; }
.tl-chiffres { font-variant-numeric: tabular-nums; }
.tl-petit { font-size: 13px; color: var(--tl-encre-3); }
.tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Barre du haut ------------------------------------------------------------- */
.tl-barre { position: sticky; top: 0; z-index: 3; background: var(--tl-panneau); border-bottom: 1px solid var(--tl-trait); }
.tl-barre-int { max-width: 1280px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tl-barre-titre { font-size: 14px; color: var(--tl-encre-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-b, .tl-carre {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  border: 1px solid var(--tl-trait-fort); background: var(--tl-panneau); border-radius: 8px;
  font-size: 14px !important; font-weight: 600; color: var(--tl-encre-1) !important; text-decoration: none;
}
.tl-b { padding: 0 16px; }
.tl-carre { width: 44px; flex: none; padding: 0; }
.tl-b:hover, .tl-carre:hover { border-color: var(--tl-encre-3); }
.tl-b-prim { background: var(--tl-accent); border-color: var(--tl-accent); color: #fff !important; }
.tl-b-prim:hover { filter: brightness(.92); border-color: var(--tl-accent); }
.tl-b[aria-pressed="true"] { background: var(--tl-accent-clair); border-color: var(--tl-accent); color: var(--tl-accent) !important; }
.tl-b svg, .tl-carre svg { flex: none; }

/* Corps -------------------------------------------------------------------- */
.tl-corps { max-width: 1280px; margin: 0 auto; padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
.tl-lieu { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tl-message { font-size: 13px; color: var(--tl-accent); font-weight: 600; }
.tl-message.tl-erreur { color: #a3361b; }

.tl-carte { background: var(--tl-panneau); border: 1px solid var(--tl-trait); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tl-carte-tete { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.tl-carte-tete h2 { font-size: 18px; }
.tl-sous { font-size: 13px; color: var(--tl-encre-3); flex-basis: 100%; }
.tl-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-src {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid; white-space: nowrap; line-height: 1.75;
}
.tl-src-obs { background: var(--tl-obs-fond); border-color: var(--tl-obs-trait); color: var(--tl-obs-texte); }
.tl-src-AROME { background: #e6f0e8; border-color: #b5d0bb; color: #24543a; }
.tl-src-ARPEGE { background: #d6e7da; border-color: #a3c5ab; color: #1f4a33; }
.tl-src-GFS { background: #f1f3ef; border-color: #cfd6cb; color: #3b463f; }
.tl-src-autre { background: #eef4f1; border-color: #bfd5cb; color: #2c5546; }

/* Tuiles ------------------------------------------------------------------ */
.tl-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.tl-tuile { background: var(--tl-panneau-2); border: 1px solid var(--tl-trait); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-tuile-nom { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tl-encre-3); }
.tl-grand { font-size: 26px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tl-moyen { font-size: 17px; font-weight: 700; line-height: 1.3; }
.tl-froid { color: var(--tl-froid); }
.tl-chaud { color: var(--tl-chaud); }

/* Frise ------------------------------------------------------------------- */
.tl-defile { overflow-x: auto; padding-bottom: 6px; }
.tl-signature { margin: 2px 0 0; font-size: 11px; color: #7d8a80; text-align: right; }
/* Le thème « Records » (lot 2 des demandes de Serge Zaka, 20 octobre 2026). */
.tl-records { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tl-records th, .tl-records td { padding: 6px 8px; border-bottom: 1px solid var(--tl-trait); text-align: left; vertical-align: top; }
.tl-records thead th { font-size: 12px; font-weight: 700; color: var(--tl-encre-2); }
.tl-records tbody th, .tl-records tfoot th { font-weight: 600; color: var(--tl-encre-1); }
.tl-records td b { display: block; font-size: 14px; color: var(--tl-encre-1); }
.tl-records td small { display: block; font-size: 11px; color: var(--tl-encre-3); }
.tl-records tfoot th, .tl-records tfoot td { border-bottom: 0; border-top: 2px solid var(--tl-trait); }
.tl-records .tl-record-recent { background: #fdebd3; }
.tl-point-noir { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #111611; vertical-align: middle; margin-right: 6px; }
.tl-bulle .tl-b-fort { font-weight: 700; }
.tl-frise { display: grid; grid-template-columns: 118px minmax(0, 2.84fr) repeat(12, minmax(0, 1fr)); width: 100%; min-width: 1000px; font-size: 13px; line-height: 1.35; }
.tl-frise > div { padding: 7px 6px; border-bottom: 1px solid var(--tl-trait); }
.tl-f-lab { font-weight: 600; color: var(--tl-encre-2); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 0 !important; }
.tl-f-lab small { font-weight: 400; color: var(--tl-encre-3); font-size: 12px; }
.tl-f-passe { background: #f2f5f9; color: var(--tl-encre-2); display: flex; flex-direction: column; justify-content: center; }
.tl-f-jour { text-align: center; display: flex; flex-direction: column; justify-content: center; font-variant-numeric: tabular-nums; }
.tl-f-auj { background: var(--tl-accent-clair); }
/* L'écart à la normale 1961-1990 (demande de Serge Zaka du 20 octobre 2026). */
.tl-f-ecart { align-items: center; gap: 3px; }
.tl-ecart { display: inline-block; min-width: 2.9em; padding: 1px 5px; border-radius: 4px; font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.tl-f-graph { grid-column: 2 / span 13; padding: 0 !important; }
.tl-f-graph svg { display: block; width: 100%; }
.tl-f-graph svg * { vector-effect: non-scaling-stroke; }
.tl-f-bande { display: flex; align-items: center; justify-content: center; padding: 6px 3px !important; }
.tl-f-bande .tl-src { width: 100%; justify-content: center; overflow: hidden; text-overflow: ellipsis; }
.tl-legende { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--tl-encre-2); }
.tl-trait-max, .tl-trait-min { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 5px; }
.tl-trait-max { background: var(--tl-chaud-trait); }
.tl-trait-min { background: var(--tl-froid); }

/* Graphes ----------------------------------------------------------------- */
.tl-graph { width: 100%; height: auto; display: block; max-width: 860px; }
.tl-graph text { font-family: inherit; }
.tl-graphs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: 14px; }
/* Un graphique seul sur sa ligne prend toute la largeur (.tl-bloc-large, posée par ranger(), onglets/climat.js). */
.tl-bloc { background: var(--tl-panneau-2); border: 1px solid var(--tl-trait); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-bloc h3 { font-size: 15px; }
.tl-panneau h4 { margin: 0; padding: 0; line-height: 1.25; font-size: 15px; font-weight: 700; color: var(--tl-encre-1); text-wrap: balance;
  background: none; border: 0; text-align: left; text-transform: none; letter-spacing: normal; }
.tl-cadre-graphe { width: 100%; }
.tl-cadre-graphe .tl-graph { max-width: none; }
.tl-sol-pointilles { background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 11px); }
/* Humidité des sols, année par année : toute la largeur, choix « Ce lieu » / « France entière ». */
.tl-bloc-large { grid-column: 1 / -1; }
.tl-bloc-large .tl-graph { max-width: none; }
.tl-sol-tete { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.tl-sol-vues { display: flex; gap: 6px; }
/* « Le climat ici » : le choix de la vue (ce lieu, le département, la France ; lot 3) et celui du thème,
   chacun avec son titre. La vue en cases accolées, pour ne pas ressembler aux thèmes. */
.tl-choix { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-choix-titre { font-size: 12px; font-weight: 700; color: var(--tl-encre-3); }
.tl-segments { display: inline-flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; gap: 4px; padding: 4px; border: 1px solid var(--tl-trait); border-radius: 12px; background: #eef2ec; }
.tl-segment { flex: 1 1 auto; min-width: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 14px !important; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; line-height: 1.2; }
.tl-segment b { font-size: 14px; font-weight: 700; color: var(--tl-encre-2); white-space: nowrap; }
.tl-segment small { font-size: 12px; color: var(--tl-encre-3); white-space: nowrap; }
.tl-segment:hover { background: rgba(255, 255, 255, .6); }
.tl-segment[aria-pressed="true"] { background: var(--tl-panneau); box-shadow: 0 1px 3px rgba(28, 38, 32, .14), inset 0 0 0 2px var(--tl-accent); }
.tl-segment[aria-pressed="true"] b { color: var(--tl-accent); }
.tl-choix-aide { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tl-encre-2); max-width: 90ch; }
.tl-choix-aide b { color: var(--tl-encre-1); }
.tl-vue-sous { display: flex; flex-direction: column; gap: 4px; }
.tl-aide { font-size: 13px; color: var(--tl-encre-2); }
.tl-aide summary { cursor: pointer; color: var(--tl-accent); font-weight: 600; width: max-content; max-width: 100%; }
.tl-aide p { margin: 4px 0 0; max-width: 72ch; }
/* Sur téléphone, une case par ligne : le nom à gauche, ce qu'il désigne à droite. */
@media (max-width: 560px) {
  .tl-segments { flex-direction: column; flex-wrap: nowrap; align-self: stretch; }
  .tl-segment { flex: none; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; padding: 10px 14px !important; }
}
.tl-sol-vues .tl-b { padding: 0 12px; font-size: 13px !important; }
.tl-sol-trait { display: inline-block; width: 22px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.tl-sol-pave { display: inline-block; width: 18px; height: 10px; vertical-align: middle; margin-right: 6px; }
.tl-sol-resume { font-size: 14px; color: var(--tl-encre-1); font-weight: 600; }
.tl-sol-puce { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }


/* Lignes d'indicateurs : une case par jour -------------------------------- */
.tl-lignes { display: flex; flex-direction: column; gap: 8px; }
.tl-ligne { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.tl-ligne-nom { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.tl-ligne-nom b { font-size: 14px; }
.tl-ligne-nom span { font-size: 12px; color: var(--tl-encre-3); }
.tl-cases-defile { flex: 999 1 640px; min-width: 0; overflow-x: auto; }
.tl-cases { display: grid; grid-template-columns: repeat(12, minmax(52px, 1fr)); gap: 4px; min-width: 680px; }
.tl-case { height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: #1c2620; background: #f1f3ef; overflow: hidden; text-align: center; line-height: 1.1; padding: 0 2px; }
.tl-case.tl-clair { color: #fff; }
.tl-case.tl-auj { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tl-encre-1); }
.tl-case.tl-vide { background: repeating-linear-gradient(135deg, #eef1ec 0 6px, #e0e6dc 6px 12px); color: var(--tl-encre-3); font-weight: 400; }
.tl-case.tl-petit-texte { font-size: 11px; }
.tl-jours-tete .tl-case { height: auto; background: transparent; font-size: 12px; color: var(--tl-encre-2); padding: 2px 0; }
.tl-jours-tete .tl-case small { display: block; font-weight: 400; color: var(--tl-encre-3); }
.tl-invitation { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px dashed var(--tl-trait-fort); border-radius: 10px; background: var(--tl-panneau-2); }

/* Chargement ---------------------------------------------------------------- */
.tl-squelette { height: 14px; border-radius: 6px; background: linear-gradient(90deg, #eef1ec, #e2e7df, #eef1ec); background-size: 200% 100%; animation: tl-chargement 1.4s linear infinite; }
@keyframes tl-chargement { to { background-position: -200% 0; } }
.tl-attente { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }

/* Panneau étroit (téléphone) ---------------------------------------------- */
@container (max-width: 640px) {
  .tl-barre-int { padding: 6px 12px; }
  .tl-corps { padding: 14px 12px 32px; gap: 12px; }
  .tl-actions .tl-b { flex: 1 1 auto; padding: 0 12px; }
  .tl-carte { padding: 14px; border-radius: 10px; }
  .tl-grand { font-size: 22px; }
  .tl-ligne-nom, .tl-cases-defile { flex-basis: 100%; }
}

/* Petite fiche posée sur la carte, au toucher (téléphone) ---------------- */
.tl-fiche { display: flex; flex-direction: column; gap: 8px; min-width: 200px; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.tl-fiche button { min-height: 44px; border: 0; border-radius: 8px; background: var(--accent, #2f6b46); color: #fff; font: inherit; font-weight: 600; padding: 0 14px; cursor: pointer; }

/* Bulle d'information au survol des graphes ----------------------------- */
.tl-survol { cursor: crosshair; touch-action: pan-y; }
.tl-bulle {
  position: absolute; z-index: 6; pointer-events: none; max-width: 300px;
  background: #1c2620; color: #fff; font-size: 13px; line-height: 1.45;
  padding: 8px 11px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  font-variant-numeric: tabular-nums;
}
.tl-bulle[hidden] { display: none; }
.tl-bulle b { color: #fff; display: block; margin-bottom: 2px; }
.tl-bulle .tl-b-max { color: #ffb27a; font-weight: 600; }
.tl-bulle .tl-b-min { color: #9cc3ff; font-weight: 600; }
.tl-bulle .tl-b-ligne { display: block; }
.tl-bulle small { display: block; color: #c9d3cc; font-size: 12px; margin-top: 2px; }

/* Sources expliquées --------------------------------------------------------- */
.tl-aide { cursor: help; }
.tl-aide:hover { filter: brightness(.97); text-decoration: underline dotted; text-underline-offset: 3px; }

/* Catégories en tuiles imagées (pictogrammes du site) ---------------------- */
.tl-domaines { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.tl-domaine {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 74px; padding: 8px 6px; border: 1px solid var(--tl-trait); border-radius: 10px;
  background: var(--tl-panneau); font-size: 14px; font-weight: 600; color: var(--tl-encre-2); text-align: center;
}
.tl-domaine:hover { border-color: var(--tl-trait-fort); background: var(--tl-panneau-2); }
.tl-domaine[aria-selected="true"] { border: 2px solid var(--tl-accent); background: var(--tl-accent-clair); color: var(--tl-accent); padding: 7px 5px; }
.tl-domaine-picto { font-size: 26px; line-height: 1; }
.tl-picto { margin-right: 6px; font-size: 16px; }
.tl-etat { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--tl-encre-2) !important; }
.tl-etat i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.tl-retirer { align-self: flex-start; margin-top: 4px; padding: 0; border: 0; background: none; font-size: 12px !important; color: var(--tl-encre-3) !important; text-decoration: underline; cursor: pointer; }

/* Recherche ------------------------------------------------------------------ */
.tl-recherche { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tl-resultats {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 4; margin-top: 4px; max-height: 340px; overflow-y: auto;
  background: var(--tl-panneau); border: 1px solid var(--tl-trait-fort); border-radius: 10px; box-shadow: 0 10px 28px rgba(28, 38, 32, .18);
  display: flex; flex-direction: column; padding: 4px;
}
.tl-resultats[hidden] { display: none; }
.tl-resultat { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; }
.tl-resultat:hover, .tl-resultat:focus-visible { background: var(--tl-accent-clair); }
.tl-resultat small { flex: none; }

/* Mes formules ---------------------------------------------------------------- */
.tl-puce {
  min-height: 36px; padding: 0 12px; border: 1px dashed var(--tl-trait-fort); border-radius: 999px;
  background: var(--tl-panneau); font-size: 13px !important; color: var(--tl-encre-2) !important;
}
.tl-puce:hover:not(:disabled) { border-style: solid; border-color: var(--tl-accent); color: var(--tl-accent) !important; }
.tl-puce:disabled { border-style: solid; background: var(--tl-accent-clair); color: var(--tl-accent) !important; opacity: 1; }
.tl-puce-jours { border-color: #b9d3c0; background: #f4f8f5; }
.tl-formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.tl-formule { gap: 8px; }
.tl-champ {
  min-height: 40px; padding: 4px 10px; border: 1px solid var(--tl-trait-fort); border-radius: 8px;
  background: #fff; font: inherit; color: var(--tl-encre-1); min-width: 0;
}
textarea.tl-champ { min-height: 56px; resize: vertical; }
.tl-champ-petit { min-height: 30px; padding: 2px 6px; font-size: 13px; }

/* L'atelier : la formule sur tout le panneau, sur un écran ------------------ */
.tl-corps-atelier { padding-top: 10px; padding-bottom: 16px; }
.tl-atelier { display: flex; flex-direction: column; gap: 10px; }
.tl-st-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.tl-st-noms { display: flex; align-items: center; gap: 8px; flex: 1 1 460px; min-width: 0; }
.tl-st-nom {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; margin-left: -12px;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  font-family: inherit; font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--tl-encre-1);
}
.tl-st-nom::placeholder { color: #9aa59c; }
.tl-st-nom:hover { background: var(--tl-panneau); border-color: var(--tl-trait); }
.tl-st-unite {
  flex: 0 0 150px; height: 36px; padding: 0 14px; border: 1px solid var(--tl-trait-fort); border-radius: 999px;
  background: var(--tl-panneau); font-family: inherit; font-size: 14px; color: var(--tl-encre-1);
}
.tl-st-unite::placeholder { color: #8b968e; }
.tl-panneau .tl-st-nom:focus-visible, .tl-panneau .tl-st-unite:focus-visible, .tl-st-nom:focus, .tl-st-unite:focus {
  outline: none; background: var(--tl-panneau); border-color: var(--tl-accent); box-shadow: 0 0 0 3px rgba(47, 107, 70, .16);
}

.tl-st-haut { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
.tl-st-carte {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 14px;
  background: var(--tl-panneau); border: 1px solid var(--tl-trait); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 38, 32, .04), 0 8px 24px rgba(28, 38, 32, .04);
}
.tl-st-carte-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 32px; }
.tl-panneau .tl-st-titre { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tl-encre-3); }
.tl-st-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--tl-encre-2); }

/* Le résultat, en haut à gauche */
.tl-apercu { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 186px; }
.tl-st-notes { font-size: 12px; }
.tl-apercu .tl-graph { max-width: none; }
.tl-apercu-attente > :not(.tl-apercu-pastille) { opacity: .35; }
.tl-apercu-pastille {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 14px; border-radius: 999px;
  background: var(--tl-encre-1); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tl-apercu-vide { margin: auto; max-width: 34ch; text-align: center; font-size: 14px; color: var(--tl-encre-3); }
.tl-st-chiffres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 22px; }
.tl-st-chiffre { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; }
.tl-st-chiffre span { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-encre-3); }
.tl-st-chiffre b { font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-st-chiffre small { font-size: 12px; color: var(--tl-encre-3); white-space: nowrap; }
.tl-st-principal b { font-size: 28px; line-height: 1.15; color: var(--tl-accent); letter-spacing: -.01em; }
.tl-depart { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--tl-encre-2); }
.tl-depart b { color: var(--tl-encre-1); }
.tl-depart-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-depart .tl-puce { min-height: 32px; }

/* La formule écrite, en haut à droite */
.tl-st-formule .tl-formule-vue { flex: 1 1 auto; justify-content: center; padding: 8px 4px; border: 1px dashed transparent; background: transparent; }
.tl-st-formule .tl-math { font-size: 26px; }
.tl-st-formule .tl-math.tl-math-moyenne { font-size: 21px; }
.tl-st-formule .tl-math.tl-math-petite { font-size: 17px; }

/* Le menu des propositions */
.tl-menu-ancre { position: relative; }
.tl-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(420px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  display: flex; flex-direction: column; padding: 6px; background: var(--tl-panneau);
  border: 1px solid var(--tl-trait-fort); border-radius: 12px; box-shadow: 0 14px 36px rgba(28, 38, 32, .2);
}
.tl-menu[hidden] { display: none; }
.tl-menu-titre { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tl-encre-3); }
.tl-menu-choix {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; line-height: 1.3;
}
.tl-menu-choix b { font-size: 14px; }
.tl-menu-choix small { font-size: 12px; color: var(--tl-encre-3); }
.tl-menu-choix:hover, .tl-menu-choix:focus-visible { background: var(--tl-accent-clair); }

/* La ligne à composer */
.tl-calc { display: flex; flex-direction: column; gap: 6px; }
.tl-ecran-cadre {
  display: flex; align-items: stretch; background: #fff; border: 2px solid var(--tl-trait-fort); border-radius: 14px; overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.tl-ecran-cadre:focus-within { border-color: var(--tl-accent); box-shadow: 0 0 0 3px rgba(47, 107, 70, .16); }
.tl-ecran { flex: 1 1 auto; min-width: 0; min-height: 54px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; cursor: text; }
.tl-panneau .tl-ecran:focus-visible, .tl-ecran:focus { outline: none; }
.tl-ecran.tl-depot { background: #f7fbf8; }
.tl-calc-commandes { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-left: 1px solid var(--tl-trait); background: var(--tl-panneau-2); }
.tl-commande {
  min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent;
  font-size: 13px !important; font-weight: 600; color: var(--tl-encre-2) !important;
}
.tl-commande:hover { background: #e9eee6; color: var(--tl-encre-1) !important; }
.tl-calc-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.tl-calc-ligne .tl-retirer { margin: 0; }
.tl-calc-etat { font-size: 13px; color: var(--tl-encre-3); min-height: 18px; }
.tl-calc-etat.tl-ok { color: #24543a; font-weight: 600; }
.tl-calc-etat.tl-ko { color: #a3361b; font-weight: 600; }
@keyframes tl-clignote { 50% { opacity: 0; } }
.tl-curseur { width: 2px; height: 26px; background: var(--tl-accent); border-radius: 1px; animation: tl-clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .tl-curseur { animation: none; } }

/* Les étiquettes de la ligne */
.tl-j {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 15px; font-weight: 600; line-height: 1; user-select: none; cursor: grab; border: 1px solid transparent;
}
.tl-j:active { cursor: grabbing; }
.tl-j.tl-glisse { opacity: .35; }
.tl-j-nombre { background: #f1f3ef; color: var(--tl-encre-1); font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tl-j-op { background: transparent; color: var(--tl-encre-1); font-size: 20px; padding: 0 4px; }
.tl-j-ponct { background: transparent; color: var(--tl-encre-3); font-size: 20px; font-weight: 400; padding: 0 2px; }
.tl-j-mot { background: #ece8f6; color: #4b3b8f; text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
.tl-j-fn { background: #e8eef0; color: #2c4a55; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tl-j-fen { background: #e6f0e8; color: #24543a; border-color: #b9d3c0; font-family: inherit; }
.tl-j-jours { background: #f4f8f5; color: #24543a; border-color: #cfe0d4; }
/* Familles de variables : des couleurs qui se distinguent aussi par leur clarté */
.tl-fam-froid  { background: #e3edfb; color: #1f4f8f; border-color: #bcd0f0; }
.tl-fam-chaud  { background: #fde7d6; color: #8f3d0f; border-color: #f4c3a0; }
.tl-fam-tiede  { background: #fbefdc; color: #6f4a00; border-color: #ecd3a0; }
.tl-fam-eau    { background: #dff0fa; color: #0f5583; border-color: #b0d7ef; }
.tl-fam-air    { background: #e2f3f2; color: #0d5c5f; border-color: #b2dddb; }
.tl-fam-vent   { background: #eceff2; color: #374450; border-color: #cfd6dd; }
.tl-fam-soleil { background: #fff3cf; color: #6b4b00; border-color: #f0dc95; }
.tl-fam-sol    { background: #efe6da; color: #5e4120; border-color: #dccab2; }
/* Une étiquette qui arrive (proposition qui se met en place) */
@keyframes tl-arrivee { from { transform: translateY(-6px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.tl-j.tl-arrive { animation: tl-arrivee .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .tl-j.tl-arrive { animation: none; } }
/* Un autre onglet, thème ou vue : la partie qui change entre en fondu, en glissant
   un peu du côté du bouton choisi (TL.entrer, noyau.js). */
@keyframes tl-entree { from { opacity: 0; transform: translate(var(--tl-entree-x, 0), var(--tl-entree-y, 8px)); } to { opacity: 1; transform: none; } }
.tl-entree { animation: tl-entree .24s cubic-bezier(.2, .8, .2, 1) backwards; }
.tl-entree-droite { --tl-entree-x: 18px; --tl-entree-y: 0; }
.tl-entree-gauche { --tl-entree-x: -18px; --tl-entree-y: 0; }
@media (prefers-reduced-motion: reduce) { .tl-entree { animation: none; } }

/* « AgroClimat », thème Arboriculture (11 novembre 2026, onglets/agroclimat.js et graphes/arbo.js) :
   le choix de la variété, puis les graphiques et le tableau de floraison et de maturité. */
.tl-agro-intro { margin: 0; max-width: 72ch; }
.tl-arbo-sous { margin: 0; }
.tl-arbo-charge { opacity: .45; pointer-events: none; transition: opacity .15s; }
.tl-arbo-vide { margin: 4px 0 0; padding: 14px 16px; border: 1px dashed var(--tl-trait-fort); border-radius: 10px; background: var(--tl-panneau-2); }
.tl-arbo-table { min-width: 600px; }
.tl-arbo-table thead th { text-align: left; white-space: nowrap; }
.tl-arbo-table thead tr:first-child th[scope="colgroup"] { border-bottom: 1px solid var(--tl-trait-fort); }
.tl-arbo-table td { white-space: nowrap; }
.tl-arbo-espece th { padding-top: 14px; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tl-accent) !important; border-bottom: 1px solid var(--tl-trait-fort); }
.tl-arbo-lien { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tl-encre-1); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--tl-trait-fort); text-underline-offset: 3px; }
.tl-arbo-lien:hover { text-decoration-color: currentColor; }
.tl-arbo-choisie th, .tl-arbo-choisie td { background: var(--tl-accent-clair); }
.tl-arbo-choisie .tl-arbo-lien { text-decoration: none; }
.tl-arbo-ecart { font-weight: 700; color: var(--tl-encre-2); }
.tl-arbo-tot { color: #a12a24; }
.tl-arbo-tard { color: #1f4f8f; }
.tl-arbo-froid { color: #a12a24; font-weight: 600; }
.tl-arbo-sans { font-variant-numeric: tabular-nums; }
.tl-arbo-croix { display: inline-block; width: 14px; margin-right: 6px; font-weight: 700; font-size: 16px; line-height: 1; text-align: center; color: #b8222c; }
.tl-arbo-table thead small { font-weight: 500; color: var(--tl-encre-3); }

/* « Télécharger l'image » (11 novembre 2026) : un petit bouton en haut à droite de
   chaque graphique, dans l'en-tête de son bloc (graphes/commun.js) ; à défaut, sous
   le graphique. Sur téléphone, l'icône seule. */
.tl-export { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.tl-cadre-graphe > .tl-export { display: flex; justify-content: flex-end; margin-top: 8px; }
.tl-export-etat { font-size: 12px; color: var(--tl-encre-3); }
.tl-export-etat:empty { display: none; }
/* .tl-panneau devant : sinon « .tl-panneau button { font: inherit } » l'emporte. */
.tl-panneau .tl-exporter {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 9px;
  border: 1px solid var(--tl-trait-fort); border-radius: 6px; background: var(--tl-panneau, #fff); color: var(--tl-encre-2);
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; line-height: 1;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.tl-panneau .tl-exporter svg { flex: none; color: var(--tl-accent); }
.tl-panneau .tl-exporter:hover:not(:disabled) { border-color: var(--tl-accent); color: var(--tl-accent); background: var(--tl-accent-clair); }
.tl-exporter:focus-visible { outline: 3px solid var(--tl-focus); outline-offset: 2px; }
.tl-exporter:disabled { opacity: .55; cursor: progress; }
@media (max-width: 560px) {
  .tl-panneau .tl-exporter { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .tl-exporter-mot { display: none; }
  /* Le titre garde sa ligne et le bouton reste à sa droite, même quand le titre passe sur deux lignes. */
  .tl-sol-tete:has(> .tl-export), .tl-carte-tete:has(> .tl-export) { position: relative; padding-right: 42px; }
  .tl-sol-tete > .tl-export, .tl-carte-tete > .tl-export { position: absolute; top: -2px; right: 0; }
}

/* « Un graphique vous manque ? » (blocs/suggestion.js, 11 novembre 2026). */
.tl-sugg p { margin: 0; max-width: 70ch; }
.tl-sugg-form { display: grid; gap: 6px; max-width: 640px; }
.tl-sugg-label { font-weight: 600; font-size: 14px; margin-top: 6px; }
.tl-sugg-label small { font-weight: 400; color: var(--tl-encre-3); }
.tl-sugg-form textarea.tl-champ { min-height: 96px; padding: 8px 10px; }
.tl-sugg-form altcha-widget { display: block; margin-top: 6px; }
.tl-sugg-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 6px; }
.tl-sugg-etat { font-size: 14px; color: var(--tl-accent); }
.tl-sugg-etat.tl-erreur { color: #a3261b; }

/* Le clavier : variables, calcul, sur plusieurs jours, côte à côte */
.tl-clavier {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: start;
  background: var(--tl-panneau); border: 1px solid var(--tl-trait); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 38, 32, .04), 0 8px 24px rgba(28, 38, 32, .04);
}
.tl-clavier-bloc { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 12px 12px; }
.tl-clavier-bloc + .tl-clavier-bloc { border-left: 1px solid var(--tl-trait); }
.tl-touches { display: grid; gap: 6px; }
.tl-touches-var, .tl-touches-fen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-pave { display: grid; grid-template-columns: repeat(5, 44px); gap: 6px; }
.tl-touche-large { grid-column: span 2; }
.tl-touche {
  min-height: 38px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0;
  border: 1px solid var(--tl-trait-fort); border-radius: 10px; background: #fff;
  font-size: 15px !important; font-weight: 600; color: var(--tl-encre-1) !important;
  box-shadow: 0 1px 0 rgba(28, 38, 32, .1); transition: transform .06s ease, box-shadow .06s ease, background .1s, border-color .1s;
}
.tl-touche:hover { background: var(--tl-panneau-2); border-color: var(--tl-encre-3); }
.tl-touche:active { transform: translateY(1px); box-shadow: none; }
.tl-touche-chiffre { font-size: 17px !important; font-family: ui-monospace, Menlo, Consolas, monospace; }
.tl-touche-op { font-size: 19px !important; background: var(--tl-panneau-2); }
.tl-touche-effacer { color: #a3361b !important; }
/* eˣ, ln, log : une rangée sous le pavé, à sa largeur (formules/calculette.js, 11 novembre 2026). */
.tl-touches-maths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: calc(5 * 44px + 4 * 6px); max-width: 100%; }
.tl-touche-maths { font-size: 16px !important; }
.tl-touche-var, .tl-touche-fen { justify-content: flex-start; padding: 0 10px; min-height: 38px; }
.tl-touche-var:hover { filter: brightness(.97); }
.tl-touche-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; text-align: left; }
.tl-touche-texte b { display: flex; align-items: baseline; gap: 5px; font-size: 14px; }
.tl-touche-texte b i { font-style: normal; font-size: 11px; font-weight: 600; opacity: .7; }
.tl-touche-texte small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 400; opacity: .85; }
/* Les touches des variables prennent la couleur de leur famille */
.tl-touche.tl-fam-froid  { background: #e3edfb; color: #1f4f8f !important; border-color: #bcd0f0; }
.tl-touche.tl-fam-chaud  { background: #fde7d6; color: #8f3d0f !important; border-color: #f4c3a0; }
.tl-touche.tl-fam-tiede  { background: #fbefdc; color: #6f4a00 !important; border-color: #ecd3a0; }
.tl-touche.tl-fam-eau    { background: #dff0fa; color: #0f5583 !important; border-color: #b0d7ef; }
.tl-touche.tl-fam-air    { background: #e2f3f2; color: #0d5c5f !important; border-color: #b2dddb; }
.tl-touche.tl-fam-vent   { background: #eceff2; color: #374450 !important; border-color: #cfd6dd; }
.tl-touche.tl-fam-soleil { background: #fff3cf; color: #6b4b00 !important; border-color: #f0dc95; }
.tl-touche.tl-fam-sol    { background: #efe6da; color: #5e4120 !important; border-color: #dccab2; }

/* Sur plusieurs jours */
.tl-fen-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.tl-fen-sur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tl-encre-3); }
.tl-jours-choix { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--tl-trait-fort); border-radius: 999px; overflow: hidden; background: #fff; }
.tl-jours-choix button {
  min-width: 32px; min-height: 28px; padding: 0 8px; border: 0; border-left: 1px solid var(--tl-trait); background: transparent;
  font: 600 13px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--tl-encre-1); cursor: pointer; font-variant-numeric: tabular-nums;
}
.tl-jours-choix button:first-child { border-left: 0; }
.tl-jours-choix button:hover { background: var(--tl-panneau-2); }
.tl-jours-choix button[aria-pressed="true"] { background: var(--tl-accent); color: #fff; }
.tl-jours-choix button:focus-visible { outline: 2px solid var(--tl-accent); outline-offset: -2px; }
.tl-touche-fen { background: #fff; border-color: #c9dccf; }
.tl-touche-fen:hover { background: #f3f8f4; }
.tl-touche-signe {
  flex: none; min-width: 34px; height: 28px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: #e6f0e8; color: #24543a; font: 600 16px/1 "STIX Two Math", "Cambria Math", "Latin Modern Math", "Times New Roman", serif;
}
.tl-astuce { font-size: 12px; }

/* La formule écrite comme en mathématiques ----------------------------------- */
.tl-formule-vue {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px 14px;
  border-radius: 14px; background: #fff; border: 1px solid var(--tl-trait); overflow-x: auto;
}
.tl-math { font-size: 28px; color: var(--tl-encre-1); margin: 0; }
.tl-math mo { padding: 0 .12em; }
.tl-formule-vue-petite { padding: 10px 8px; background: var(--tl-panneau); }
.tl-formule-vue-petite .tl-math { font-size: 19px; }
.tl-legende-vars { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--tl-encre-2); }
.tl-legende-var { display: inline-flex; align-items: center; gap: 6px; }
.tl-legende-var .tl-j { min-height: 24px; font-size: 13px; padding: 0 7px; cursor: default; }
.tl-math-bloc { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; }
.tl-math-nom { font-size: 14px; font-weight: 600; color: var(--tl-encre-2); }
.tl-math.tl-math-moyenne { font-size: 22px; }
.tl-math.tl-math-petite { font-size: 17px; }
.tl-formule-vue-petite .tl-math.tl-math-moyenne { font-size: 16px; }
.tl-formule-vue-petite .tl-math.tl-math-petite { font-size: 13px; }
.tl-formule-vue-petite .tl-math-nom { font-size: 13px; }

/* Résultats d'une formule de calcul, dans « Mes formules » */
.tl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.tl-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--tl-panneau-2); border: 1px solid var(--tl-trait); }
.tl-stat b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* Les endroits où déposer s'éclairent pendant qu'on fait glisser */
.tl-glisser .tl-ecran-cadre, .tl-glisser .tl-formule-vue { border-style: dashed; border-color: rgba(47, 107, 70, .55); }
.tl-formule-vue.tl-depot { border-style: dashed; border-color: var(--tl-accent); background: #f7fbf8; box-shadow: 0 0 0 3px rgba(47, 107, 70, .14); }

/* Écrans moyens, puis téléphone */
@container (max-width: 1000px) {
  .tl-st-haut { grid-template-columns: minmax(0, 1fr); }
  .tl-clavier { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-clavier-fen { grid-column: 1 / -1; border-left: 0 !important; border-top: 1px solid var(--tl-trait); }
}
@container (max-width: 640px) {
  .tl-st-noms { flex-wrap: wrap; flex-basis: 100%; }
  .tl-st-nom { flex-basis: 100%; font-size: 20px; }
  .tl-st-unite { flex: 1 1 140px; }
  .tl-clavier { grid-template-columns: minmax(0, 1fr); }
  .tl-clavier-bloc + .tl-clavier-bloc { border-left: 0; border-top: 1px solid var(--tl-trait); }
  .tl-pave { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tl-touches-maths { width: 100%; }
  .tl-calc-commandes { padding: 0 4px; }
}

/* Un titre atteint par un bouton ne passe pas sous la barre du haut */
.tl-panneau [id^="tl-h-"] { scroll-margin-top: 72px; }

/* ==========================================================================
   Les rubriques (refonte du 14 octobre 2026) : Aujourd'hui, 10 jours, Risques,
   Le climat ici, Mes calculs. Quatre niveaux de risque, partout les mêmes.
   ========================================================================== */
.tl-panneau {
  --tl-n0: #3f8f5c; --tl-n1: #d6a01c; --tl-n2: #e06a1d; --tl-n3: #b3302a;   /* cases et légendes */
  --tl-n0-texte: #2f7a4c; --tl-n2-texte: #c25412; --tl-n3-texte: #a12a24;   /* pastilles : texte blanc lisible */
}

/* La barre : le lieu et ses boutons, puis les onglets ---------------------- */
.tl-barre-lieu { padding-top: 10px; padding-bottom: 6px; }
.tl-barre-lieu .tl-lieu { flex: 1 1 auto; gap: 1px; }
.tl-barre-lieu h1 { font-size: 24px; overflow: hidden; text-overflow: ellipsis; }
.tl-lieu-sous { font-size: 13px; color: var(--tl-encre-3); }
.tl-actions-haut { flex: none; flex-wrap: nowrap; }
.tl-actions-haut .tl-b { flex: none; }
.tl-barre > .tl-message { max-width: 1280px; margin: 0 auto; padding: 0 24px 6px; }
.tl-barre > .tl-message:empty { display: none; }
.tl-barre-onglets { padding-top: 0; padding-bottom: 0; }
.tl-rubriques { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.tl-rubriques::-webkit-scrollbar { display: none; }
.tl-rubrique {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 46px; padding: 0 14px;
  border: 0; border-bottom: 3px solid transparent; background: transparent; font-size: 15px !important; font-weight: 600; color: var(--tl-encre-2) !important;
}
.tl-rubrique:hover { color: var(--tl-encre-1) !important; }
.tl-rubrique[aria-selected="true"] { color: var(--tl-accent) !important; border-bottom-color: var(--tl-accent); }
.tl-compte { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--tl-n3-texte); color: #fff; font-size: 12px; font-weight: 700; }

/* La phrase du jour ------------------------------------------------------------ */
.tl-une { font-size: 26px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.01em !important; }
.tl-une-alerte { color: var(--tl-n3-texte); }
.tl-une-attention { color: #8a6508; }
.tl-une-calme { color: var(--tl-accent); }
.tl-une-attente { max-width: 640px; }

/* Les tuiles d'aujourd'hui -------------------------------------------------------- */
.tl-tuiles-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.tl-tuiles-une { grid-template-columns: minmax(0, 440px); }
.tl-grand-unite { font-size: 15px; font-weight: 600; color: var(--tl-encre-2); }
.tl-tuile-ligne { font-size: 14px; color: var(--tl-encre-2); }
.tl-tuile .tl-niveau { align-self: flex-start; }
.tl-jauge { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.tl-jauge-piste { position: relative; height: 12px; border-radius: 6px; margin-top: 6px;
  background: linear-gradient(90deg, #c8692b 0%, #e0b04a 22%, #c9d98f 42%, #78b8d9 68%, #2f6fc4 100%); }
.tl-jauge-valeur { position: absolute; top: -6px; width: 5px; height: 24px; border-radius: 3px; background: var(--tl-encre-1); box-shadow: 0 0 0 2px #fff; transform: translateX(-50%); }
.tl-jauge-habitude { position: absolute; top: -4px; height: 20px; border-left: 2px dashed var(--tl-encre-1); opacity: .65; transform: translateX(-1px); }
.tl-jauge-mots { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--tl-encre-3); }
.tl-lien { align-self: flex-start; padding: 0; border: 0; background: none; font-size: 14px !important; font-weight: 700; color: var(--tl-accent) !important;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl-legende-trait { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* Les niveaux : pastilles, cases et légende ------------------------------------ */
.tl-niveau { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.6; color: #fff; white-space: nowrap; }
.tl-niveau::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.tl-niveau.tl-n0 { background: var(--tl-n0-texte); }
.tl-niveau.tl-n1 { background: var(--tl-n1); color: #1c2620; }
.tl-niveau.tl-n2 { background: var(--tl-n2-texte); }
.tl-niveau.tl-n3 { background: var(--tl-n3-texte); }
.tl-niveau.tl-nx { background: #e4e1d6; color: var(--tl-encre-2); }
.tl-cal-case.tl-n0, .tl-legende-case.tl-n0 { background: var(--tl-n0); }
.tl-cal-case.tl-n1, .tl-legende-case.tl-n1 { background: var(--tl-n1); }
.tl-cal-case.tl-n2, .tl-legende-case.tl-n2 { background: var(--tl-n2); }
.tl-cal-case.tl-n3, .tl-legende-case.tl-n3 { background: var(--tl-n3); }
.tl-cal-case.tl-nx, .tl-legende-case.tl-nx { background: repeating-linear-gradient(135deg, #eef1ec 0 5px, #dde3d9 5px 10px); }
.tl-legende-case { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }

/* Les risques, jour par jour ------------------------------------------------------- */
.tl-calendrier { display: grid; grid-template-columns: minmax(170px, 230px) repeat(10, minmax(44px, 1fr)); gap: 5px; min-width: 660px; align-items: center; }
.tl-cal-nom { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.25; }
.tl-cal-jour { text-align: center; font-size: 12px; color: var(--tl-encre-2); font-variant-numeric: tabular-nums; }
.tl-cal-jour.tl-cal-auj b { color: var(--tl-accent); }
.tl-cal-case { height: 34px; border-radius: 6px; }
.tl-cal-case.tl-cal-auj { box-shadow: 0 0 0 2px var(--tl-panneau), 0 0 0 4px var(--tl-encre-1); }

/* Les familles de risque ---------------------------------------------------------- */
.tl-familles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-famille { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 14px 0; border-top: 1px solid var(--tl-trait); }
.tl-famille:first-child { border-top: 0; padding-top: 4px; }
.tl-famille-picto { font-size: 24px; line-height: 1.2; text-align: center; }
.tl-famille-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-famille-texte h3 { font-size: 16px !important; }
.tl-famille-texte p { font-size: 14px; color: var(--tl-encre-2); }
.tl-famille > .tl-niveau { margin-top: 1px; }
.tl-famille-detail summary { cursor: pointer; width: max-content; font-size: 13px; font-weight: 700; color: var(--tl-accent); margin-top: 4px; }
.tl-famille-detail[open] summary { margin-bottom: 10px; }

/* Le climat ici : les thèmes ------------------------------------------------------- */
.tl-themes { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-theme { min-height: 40px; padding: 0 16px; border: 1px solid var(--tl-trait-fort); border-radius: 999px; background: var(--tl-panneau); font-size: 14px !important; font-weight: 600; color: var(--tl-encre-2) !important; }
.tl-theme:hover { border-color: var(--tl-encre-3); color: var(--tl-encre-1) !important; }
.tl-theme[aria-pressed="true"] { background: var(--tl-encre-1); border-color: var(--tl-encre-1); color: #fff !important; }

.tl-pied { font-size: 13px; color: var(--tl-encre-3); padding-top: 2px; display: grid; gap: 8px; }

/* Qui voit quoi (offre du 15 octobre 2026) : cadenas des onglets, offre, rubriques fermées ------ */
.tl-cadenas { display: inline-flex; align-items: center; color: var(--tl-encre-3); }
.tl-rubrique[aria-selected="true"] .tl-cadenas { color: inherit; }
.tl-offre { gap: 16px; }
.tl-offre-tete { display: flex; gap: 14px; align-items: flex-start; }
.tl-offre-tete > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-offre-tete h2 { font-size: 20px; }
.tl-offre-tete p { color: var(--tl-encre-2); max-width: 72ch; }
.tl-offre-cadenas { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tl-accent-clair); color: var(--tl-accent); }
.tl-offre-cadre { overflow-x: auto; border: 1px solid var(--tl-trait); border-radius: 10px; }
.tl-offre-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tl-offre-table th, .tl-offre-table td { padding: 10px 14px; border-bottom: 1px solid var(--tl-trait); text-align: center; vertical-align: middle; }
.tl-offre-table thead th { font-size: 13px; font-weight: 700; color: var(--tl-encre-1); }
.tl-offre-table thead th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-accent); }
.tl-offre-table tbody th, .tl-offre-table tfoot th { text-align: left; font-weight: 400; color: var(--tl-encre-1); }
.tl-offre-table tfoot th, .tl-offre-table tfoot td { border-bottom: 0; font-weight: 700; }
.tl-offre-table .tl-offre-vous { background: var(--tl-accent-clair); }
.tl-offre-oui { color: var(--tl-accent); font-size: 17px; font-weight: 700; }
.tl-offre-non { color: var(--tl-trait-fort); font-size: 17px; }
.tl-offre-apercu { position: relative; height: 120px; overflow: hidden; border-radius: 8px; background: var(--tl-panneau-2); }
.tl-offre-apercu-fig { display: block; width: 100%; height: 100%; filter: blur(1.5px); opacity: .75; }
.tl-offre-apercu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 35%, var(--tl-panneau) 100%); }
.tl-tous-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.tl-avertissement { font-size: 12px; line-height: 1.5; }

@container (max-width: 640px) {
  .tl-barre-lieu { gap: 8px; padding-top: 8px; padding-bottom: 4px; }
  .tl-barre-lieu h1 { font-size: 19px; }
  .tl-lieu-sous { font-size: 12px; }
  .tl-b-icone { width: 44px; padding: 0; }
  .tl-b-mot { display: none; }
  .tl-actions-haut { gap: 6px; }
  .tl-rubrique { padding: 0 10px; font-size: 14px !important; }
  .tl-une { font-size: 21px !important; }
  .tl-calendrier { grid-template-columns: 116px repeat(10, minmax(30px, 1fr)); gap: 3px; min-width: 480px; }
  .tl-cal-nom { font-size: 12.5px; }
  .tl-cal-jour { font-size: 11px; }
  .tl-cal-case { height: 28px; }
  .tl-famille { grid-template-columns: 28px minmax(0, 1fr); }
  .tl-famille > .tl-niveau { grid-column: 2; grid-row: 2; justify-self: start; }
  .tl-famille-picto { font-size: 20px; }
  .tl-offre-tete h2 { font-size: 18px; }
  .tl-offre-cadenas { width: 34px; height: 34px; }
  .tl-offre-table th, .tl-offre-table td { padding: 8px 6px; font-size: 13px; }
  .tl-offre-table thead th { font-size: 12px; }
  .tl-offre-detail { display: none; }
  .tl-offre-apercu { height: 90px; }
}

/* ==========================================================================
   Thème AgroClimat2050 (11 novembre 2026). Demande du client : le panneau aux
   couleurs de la marque, dans le style du business plan de la société —
   encre vert-de-gris #1B2F32, vert AgroClimat #83A843, titres en capitales
   Big Shoulders Display, texte en Josefin Sans, angles droits, filets verts.
   Cette couche ne change que l'apparence ; elle se pose sur les règles
   ci-dessus et les remplace. Les couleurs des données (gel, chaleur, risques)
   ne bougent pas : elles portent du sens.
   ========================================================================== */
@font-face { font-family: "Big Shoulders Display"; font-weight: 700; font-display: swap; src: url("polices/BigShouldersDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-display: swap; src: url("polices/BigShouldersDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 400; font-display: swap; src: url("polices/JosefinSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 600; font-display: swap; src: url("polices/JosefinSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 700; font-display: swap; src: url("polices/JosefinSans-Bold.woff2") format("woff2"); }

.tl-panneau {
  --ac-encre: #1b2f32; --ac-encre-2: #4e5f61; --ac-brume: #b9c6c4; --ac-lavis: #f3f5f0; --ac-filet: #dce4e1;
  --ac-vert: #83a843; --ac-vert-fonce: #4f6b22; --ac-vert-clair: #e4ead6; --ac-orange: #e8893a; --ac-orange-fonce: #a8521a;
  --ac-titres: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --tl-accent: var(--ac-vert-fonce);
  --tl-accent-clair: var(--ac-vert-clair);
  --tl-panneau: #ffffff;
  --tl-panneau-2: #ffffff;
  --tl-trait: var(--ac-filet);
  --tl-trait-fort: #c4cfcc;
  --tl-encre-1: var(--ac-encre);
  --tl-encre-2: var(--ac-encre-2);
  --tl-encre-3: #56686a;
  --tl-focus: var(--ac-orange);
  --tl-fond: var(--ac-lavis);
  font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Josefin a un petit œil : à taille égale, ses minuscules s'alignent ainsi sur la police du système. */
  font-size-adjust: .5;
}

/* Les titres : capitales condensées, comme le business plan. */
.tl-panneau h1, .tl-panneau h2, .tl-panneau h3, .tl-panneau h4 {
  font-family: var(--ac-titres); font-size-adjust: none; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02;
}
.tl-panneau h2 { font-size: 30px; font-weight: 800; }
.tl-panneau h3 { font-size: 21px; font-weight: 700; }
.tl-carte-tete h2 { font-size: 30px; }
.tl-sol-tete h4, .tl-bloc h4 { font-size: 20px; font-weight: 700; color: var(--ac-encre); margin: 0; }

/* La barre du haut : un bandeau d'encre, le logo, le lieu en grand. */
.tl-barre { background: var(--ac-encre); border-bottom: 0; color: #fafafa; }
.tl-logo { display: block; flex: none; height: 38px; width: auto; }
.tl-barre-lieu { gap: 16px; padding-top: 12px; padding-bottom: 8px; }
.tl-barre-lieu h1 { font-size: 36px; font-weight: 800; color: #fafafa; line-height: .95; white-space: nowrap; }
.tl-lieu-sous { color: var(--ac-brume); font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.tl-barre-titre { color: var(--ac-brume); }
.tl-barre .tl-b, .tl-barre .tl-carre { background: transparent; border-color: rgba(250, 250, 250, .28); color: #fafafa !important; border-radius: 2px; }
.tl-barre .tl-b:hover, .tl-barre .tl-carre:hover { background: rgba(131, 168, 67, .16); border-color: var(--ac-vert); }
.tl-barre > .tl-message { color: #cfe3a6; }
.tl-barre > .tl-message.tl-erreur { color: #f5b98a; }
.tl-barre-onglets { border-top: 1px solid rgba(250, 250, 250, .12); }
.tl-rubrique {
  min-height: 44px; padding: 0 12px; font-size: 12.5px !important; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ac-brume) !important; border-bottom-width: 4px;
}
.tl-rubrique:hover { color: #fafafa !important; }
.tl-rubrique[aria-selected="true"] { color: #fafafa !important; border-bottom-color: var(--ac-vert); }
.tl-rubrique .tl-cadenas { color: var(--ac-brume); }

/* Les cartes et les blocs : angles droits ; un filet vert sur chaque graphique, comme les encadrés du business plan. */
.tl-carte { border-radius: 2px; border-color: var(--ac-filet); }
.tl-bloc { background: #ffffff; border: 1px solid var(--ac-filet); border-top: 3px solid var(--ac-vert); border-radius: 0; padding: 14px 16px 16px; }
.tl-tuile { background: var(--ac-lavis); border: 0; border-top: 3px solid var(--ac-vert); border-radius: 0; }
.tl-tuile-nom, .tl-choix-titre { color: var(--ac-vert-fonce); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.tl-src { border-radius: 2px; }

/* Les choix : la vue en cases accolées, les thèmes en boutons carrés ; le choix en cours souligné de vert. */
.tl-segments { border-radius: 2px; background: var(--ac-lavis); border-color: var(--ac-filet); }
.tl-segment { border-radius: 0; }
.tl-segment[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--ac-vert), 0 1px 2px rgba(27, 47, 50, .12); }
.tl-segment[aria-pressed="true"] b { color: var(--ac-encre); }
.tl-theme { border-radius: 2px; letter-spacing: .02em; }
.tl-theme[aria-pressed="true"] { background: var(--ac-encre); border-color: var(--ac-encre); box-shadow: inset 0 -3px 0 var(--ac-vert); }
.tl-b, .tl-carre, .tl-champ { border-radius: 2px; }
.tl-b-prim { background: var(--ac-vert-fonce); border-color: var(--ac-vert-fonce); }
.tl-aide summary { color: var(--ac-vert-fonce); }

/* Les grands chiffres des encadrés : comme les chiffres clés de la couverture du business plan. */
.tl-grand { font-family: var(--ac-titres); font-size-adjust: none; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: .005em; color: var(--ac-encre); }


/* Sur téléphone, la place manque dans le bandeau : le logo s'efface (les couleurs restent), le lieu et sa date tiennent chacun sur une ligne. */
@media (max-width: 560px) {
  .tl-logo { display: none; }
  .tl-barre-lieu { gap: 10px; }
  .tl-barre-lieu h1 { font-size: 27px; overflow: hidden; text-overflow: ellipsis; }
  .tl-lieu-sous { font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-panneau h2, .tl-carte-tete h2 { font-size: 25px; }
  .tl-rubrique { letter-spacing: .1em; padding: 0 10px; }
}

/* ==========================================================================
   « Mon espace » : « Mes lieux » et le panneau DANS la page (integre.js,
   brancher.php avec $tlIntegre ; 11 novembre 2026). Même thème AgroClimat2050.
   ========================================================================== */
.tl-panneau.tl-integre {
  position: relative; inset: auto; z-index: auto; transform: none; visibility: visible; transition: none; box-shadow: none;
  overflow-x: clip; overflow-y: visible; overscroll-behavior: auto; border: 1px solid var(--ac-filet);
}
.tl-integre .tl-barre { position: static; }
.tl-integre .tl-corps { padding: 18px 18px 28px; }

/* Toute la largeur de l'écran (demande du client du 11 novembre 2026) : la zone sort de
   la colonne de lecture de « Mon espace » (.compte-corps, 980 px au plus), jusqu'à 1 560 px,
   à 24 px des bords. 100vw compte la barre de défilement : à 24 px du bord, elle ne fait
   jamais déborder la page (il faudrait une barre de plus de 48 px). */
@media (min-width: 1025px) {
  .compte-corps > .tl-lieux { width: min(1560px, calc(100vw - 48px)); margin-left: calc(50% - min(780px, calc(50vw - 24px))); }
}
.tl-lieux {
  --ac-encre: #1b2f32; --ac-brume: #b9c6c4; --ac-filet: #dce4e1; --ac-vert: #83a843; --ac-vert-fonce: #4f6b22;
  --ac-titres: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
}
.tl-lieux-intro { margin: 6px 0 0; max-width: 72ch; color: #4e5f61; }
.tl-lieux-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 14px 0 18px; }
.tl-lieu-carte {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 14px 16px 12px; margin: 0;
  background: #ffffff; border: 1px solid var(--ac-filet); border-top: 3px solid var(--ac-vert); border-radius: 0;
  font: inherit; color: var(--ac-encre); text-align: left; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.tl-lieu-carte:hover { border-color: var(--ac-brume); border-top-color: var(--ac-vert); }
.tl-lieu-carte:focus-visible { outline: 3px solid #e8893a; outline-offset: 2px; }
.tl-lieu-carte[aria-pressed="true"] { background: var(--ac-encre); border-color: var(--ac-encre); border-top-color: var(--ac-vert); color: #fafafa; }
.tl-lieu-carte-nom { font-family: var(--ac-titres); font-weight: 800; font-size: 25px; line-height: 1; text-transform: uppercase; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-lieu-carte-ou { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #56686a; }
.tl-lieu-carte[aria-pressed="true"] .tl-lieu-carte-ou { color: var(--ac-brume); }
.tl-lieu-carte-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; gap: 8px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ac-filet); min-height: 44px; }
.tl-lieu-carte[aria-pressed="true"] .tl-lieu-carte-chiffres { border-top-color: rgba(250, 250, 250, .2); }
.tl-lieu-chiffre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-lieu-chiffre small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-vert-fonce);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-lieu-carte[aria-pressed="true"] .tl-lieu-chiffre small { color: #b5d17a; }
.tl-lieu-chiffre b { font-family: var(--ac-titres); font-weight: 800; font-size: 21px; line-height: 1; white-space: nowrap; }
.tl-lieu-attente { color: #8a9a97; }
.tl-lieu-defaut { color: var(--ac-vert-fonce); }
.tl-lieu-carte[aria-pressed="true"] .tl-lieu-defaut { color: #b5d17a; }
@media (prefers-reduced-motion: reduce) { .tl-lieu-carte { transition: none; } }
/* Sur téléphone, les lieux en une rangée qu'on fait défiler du doigt : l'analyse reste à portée de pouce. */
@media (max-width: 560px) {
  .tl-lieux-cartes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
  .tl-lieux-cartes::-webkit-scrollbar { display: none; }
  .tl-lieu-carte { scroll-snap-align: start; }
}

/* ==========================================================================
   DESIGN B · « Encre et relief » (11 novembre 2026, choix du client sur la
   maquette ~/Desktop/maquettes-design-moderne). Mêmes couleurs, mêmes polices
   que le thème AgroClimat2050 ci-dessus ; ce qui change :
   - l'en-tête devient un grand bloc d'encre arrondi, avec une lueur verte ;
   - les onglets deviennent des pastilles, l'onglet ouvert en vert ;
   - les cartes flottent sur le fond, blanches, arrondies, sans cadre ;
   - les titres gardent leurs capitales, avec un petit trait vert dessous ;
   - « Télécharger l'image » : une icône carrée, son nom au survol.
   Dans « Mon espace », le choix des lieux passe DANS l'en-tête (integre.js).
   ========================================================================== */
.tl-panneau { --tl-fond: #eef1ec; --b-ombre: 0 1px 2px rgba(27, 47, 50, .05), 0 8px 24px rgba(27, 47, 50, .06); }

/* L'en-tête d'encre et sa lueur verte. Sur la carte, il reste en haut de l'écran : arrondi en bas seulement. */
.tl-barre {
  background-color: var(--ac-encre);
  background-image: radial-gradient(120% 160% at 100% 0%, rgba(131, 168, 67, .30) 0%, rgba(131, 168, 67, 0) 46%),
                    radial-gradient(80% 140% at 0% 100%, rgba(185, 198, 196, .10), rgba(185, 198, 196, 0) 60%);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 10px 30px rgba(27, 47, 50, .18);
}
.tl-barre-lieu { padding-top: 18px; padding-bottom: 12px; }
.tl-barre-lieu h1 { font-size: 44px; }
.tl-lieu-sous { font-size: 12px; font-weight: 700; }
.tl-barre .tl-b, .tl-barre .tl-carre { border-radius: 999px; min-height: 40px; border-color: rgba(244, 246, 242, .24); }
.tl-barre .tl-carre { width: 40px; }
.tl-barre .tl-b:hover, .tl-barre .tl-carre:hover { background: rgba(244, 246, 242, .10); border-color: rgba(244, 246, 242, .5); }
.tl-barre-onglets { border-top: 1px solid rgba(244, 246, 242, .10); padding-top: 10px; padding-bottom: 14px; }
.tl-rubriques { gap: 6px; margin-bottom: 0; }
/* Les onglets non choisis se voient aussi (12 novembre 2026, le client : « les liens ne ressortent pas trop ») :
   un contour clair et un texte presque blanc ; l'onglet ouvert reste plein, en vert. */
.tl-rubrique { min-height: 38px; padding: 0 16px; border: 1.5px solid rgba(244, 246, 242, .38); border-radius: 999px; font-size: 12.5px !important; letter-spacing: .12em;
  color: #f4f6f2 !important; transition: background-color .15s, border-color .15s; }
.tl-rubrique:hover { background: rgba(244, 246, 242, .12); border-color: rgba(244, 246, 242, .75); }
.tl-rubrique[aria-selected="true"] { background: var(--ac-vert); border-color: var(--ac-vert); color: var(--ac-encre) !important; }
.tl-rubrique .tl-compte { background: var(--ac-orange); }

/* Les cartes flottent sur le fond : blanches, arrondies, une ombre douce, pas de cadre. */
.tl-corps { gap: 18px; padding-top: 22px; }
.tl-carte { background: #ffffff; border: 0; border-radius: 22px; padding: 20px 22px; box-shadow: var(--b-ombre); }
.tl-tuile { background: #ffffff; border: 0; border-radius: 20px; padding: 16px 18px; box-shadow: var(--b-ombre); }
.tl-bloc { background: #ffffff; border: 0; border-radius: 20px; padding: 18px 20px; box-shadow: var(--b-ombre); }
/* Un bloc posé dans une carte (les graphiques du Climat) : un filet, pas d'ombre sur ombre. */
.tl-carte .tl-bloc, .tl-carte .tl-tuile { box-shadow: none; border: 1px solid var(--ac-filet); }
.tl-tuile-nom { display: flex; align-items: center; gap: 8px; }
.tl-tuile-nom::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 2px; background: var(--ac-vert); }

/* Les titres : capitales gardées, un petit trait vert dessous. */
.tl-carte-tete h2::after, .tl-carte-tete h3::after, .tl-sol-tete h4::after, .tl-bloc > h3::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--ac-vert); margin-top: 8px;
}
.tl-sol-tete h4, .tl-bloc h4 { font-size: 23px; }
.tl-une { font-size: 34px !important; line-height: 1.02 !important; }

/* Boutons, choix, étiquettes : en pastilles. */
.tl-b, .tl-carre { border-radius: 999px; }
.tl-champ { border-radius: 12px; }
.tl-src { border-radius: 999px; }
.tl-theme { border-radius: 999px; border-color: var(--ac-filet); }
.tl-theme[aria-pressed="true"] { box-shadow: none; }
.tl-segments { border-radius: 16px; border: 0; background: var(--ac-lavis); }
.tl-segment { border-radius: 12px; }
.tl-segment[aria-pressed="true"] { background: #ffffff; box-shadow: 0 1px 2px rgba(27, 47, 50, .12), 0 2px 8px rgba(27, 47, 50, .06); }

/* « Télécharger l'image » : une icône carrée sur fond pâle ; son nom paraît au survol et au clavier. */
.tl-panneau .tl-exporter {
  position: relative; width: 38px; height: 38px; padding: 0; justify-content: center;
  border: 0; border-radius: 12px; background: var(--ac-lavis); color: var(--ac-encre);
}
.tl-panneau .tl-exporter svg { color: var(--ac-encre); }
.tl-panneau .tl-exporter:hover:not(:disabled) { background: var(--ac-encre); color: var(--ac-vert); }
.tl-panneau .tl-exporter:hover:not(:disabled) svg { color: var(--ac-vert); }
.tl-panneau .tl-exporter .tl-exporter-mot {
  display: block; position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; white-space: nowrap; pointer-events: none;
  padding: 6px 10px 5px; border-radius: 8px; background: var(--ac-encre); color: #ffffff;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 0; transition: opacity .15s ease;
}
.tl-panneau .tl-exporter:hover .tl-exporter-mot, .tl-panneau .tl-exporter:focus-visible .tl-exporter-mot { opacity: 1; }
.tl-sol-tete:has(> .tl-export), .tl-carte-tete:has(> .tl-export) { align-items: flex-start; }

/* « Mon espace » : l'en-tête est un grand bloc arrondi posé sur la page, les cartes flottent dessous. */
.compte-zone.tl-lieux { background: none; border: 0; padding: 0; }
.tl-panneau.tl-integre { background: transparent; border: 0; overflow-x: visible; margin-top: 16px; }
.tl-integre .tl-barre { border-radius: 26px; }
/* L'en-tête et les cartes ont les mêmes bords : toute la largeur de la zone. */
.tl-integre .tl-barre-int { max-width: none; padding-left: 28px; padding-right: 28px; }
.tl-integre .tl-barre > .tl-message { max-width: none; padding-left: 28px; padding-right: 28px; }
.tl-integre .tl-corps { max-width: none; }
.tl-integre .tl-barre-lieu h1 { font-size: 64px; line-height: .9; }
.tl-barre-lieu .tl-lieu { gap: 6px; }
.tl-integre .tl-barre-lieu .tl-lieu { gap: 12px; }
.tl-integre .tl-corps { padding: 20px 0 8px; }
/* Le choix des lieux, dans l'en-tête (integre.js) ; les cartes d'avant ne servent plus qu'aux données. */
.tl-choix-lieux { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; padding-bottom: 0; }
.tl-choix-lieu {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 14px; margin: 0;
  border: 1px solid rgba(244, 246, 242, .18); border-radius: 999px; background: rgba(244, 246, 242, .06);
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ac-brume); cursor: pointer; white-space: nowrap;
}
.tl-choix-lieu b { font-family: var(--ac-titres); font-size: 19px; font-weight: 800; line-height: 1; color: #f4f6f2; }
.tl-choix-lieu:hover { border-color: rgba(244, 246, 242, .45); color: #f4f6f2; }
.tl-choix-lieu[aria-pressed="true"] { background: #f4f6f2; border-color: #f4f6f2; color: var(--ac-encre); }
.tl-choix-lieu[aria-pressed="true"] b { color: var(--ac-encre); }
.tl-choix-lieu[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-vert); }
.tl-choix-lieu:focus-visible { outline: 3px solid var(--ac-orange); outline-offset: 2px; }
.tl-choix-ajout { width: 40px; padding: 0; justify-content: center; text-decoration: none; color: #f4f6f2; }

@media (max-width: 560px) {
  .tl-barre { border-radius: 0 0 22px 22px; }
  .tl-barre-lieu h1 { font-size: 30px; }
  .tl-une { font-size: 26px !important; }
  .tl-carte { border-radius: 20px; padding: 16px 14px; }
  .tl-tuile { border-radius: 18px; padding: 14px 12px; }
  .tl-bloc { border-radius: 18px; padding: 16px 14px; }
  .tl-integre .tl-barre { border-radius: 22px; }
  .tl-integre .tl-barre-int, .tl-integre .tl-barre > .tl-message { padding-left: 16px; padding-right: 16px; }
  .tl-integre .tl-barre-lieu h1 { font-size: 40px; }
  .tl-choix-lieux { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tl-choix-lieux::-webkit-scrollbar { display: none; }
  .tl-choix-lieu { flex: none; }
}

/* ==========================================================================
   « MON ESPACE » EN DESIGN B (11 novembre 2026, « peux-tu améliorer le design
   de ça ») : toute la page, et plus seulement « Mes lieux ». Seulement là où
   le tableau du lieu est actif (user/tableau-de-bord.php pose .espace-b et
   charge cette feuille en haut de page). Les couleurs viennent des jetons du
   compte (compte.css), le mode sombre suit donc.
   - toute la largeur, comme « Mes lieux » (1 560 px au plus, à 24 px des bords) ;
   - la météo et « Aujourd'hui près de chez vous » côte à côte sur grand écran ;
   - plus de boîtes teintées : les étiquettes sur le fond, les cartes blanches
     arrondies flottent, avec une ombre douce ;
   - « Bonjour » et les chiffres en Big Shoulders, le texte en Josefin Sans.
   ========================================================================== */
@media (min-width: 1025px) {
  .compte-corps > .espace-b { width: min(1560px, calc(100vw - 48px)); margin-left: calc(50% - min(780px, calc(50vw - 24px))); }
}
.espace-b {
  --b-ombre: 0 1px 2px rgba(27, 47, 50, .05), 0 8px 24px rgba(27, 47, 50, .07);
  --b-titres: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start;
  font-family: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size-adjust: .5;
}
/* Une seule colonne : depuis le 11 novembre 2026 au soir, « Mon espace » ne garde que
   « Bonjour » et « Mes lieux » (la météo et le jour sont dans le tableau du lieu), et
   « Mes indicateurs » a sa page (user/indicateurs.php, classe .espace-indicateurs). */
.espace-b .compte-btn, .espace-b .compte-etiquette, .espace-b .compte-badge, .espace-b .compte-titre { font-family: inherit; }

/* « Bonjour Gérard » : le grand titre de la marque. */
.espace-b .compte-bandeau { margin: 0; }
.espace-b .compte-bandeau h1 { font-family: var(--b-titres); font-weight: 800; font-size: 60px; line-height: .9; letter-spacing: .005em; text-transform: uppercase; }
.espace-b .compte-bandeau .sous { margin-top: 10px; font-size: 1rem; }
.espace-b .compte-lieu-bouton { border-radius: 999px; }

/* Les zones : plus de boîte teintée. L'étiquette sur le fond, avec un trait de la couleur de la zone. */
.espace-b .compte-zone { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.espace-b .compte-zone > .compte-etiquette { margin: 0 2px 12px; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.espace-b .compte-zone > .compte-etiquette > span:first-child::before { width: 18px; height: 3px; border-radius: 2px; }
.espace-b .compte-etiquette .cpt { font-size: .85rem; }

/* Les cartes flottent : blanches (sombres en mode sombre), arrondies, sans cadre. */
.espace-b .compte-carte { border: 0; border-radius: 22px; box-shadow: var(--b-ombre); }
.espace-b .compte-btn { border-radius: 999px; }
.espace-b .compte-icone, .espace-b .compte-dom, .espace-b .compte-invite-icone { border-radius: 12px; }

/* Météo chez vous : les jours en tuiles douces, la maximale en grand. */
.espace-b .compte-meteo { padding: 16px; }
.espace-b .compte-meteo .jours { gap: 10px; }
.espace-b .compte-meteo .jours li { border-radius: 16px; padding: 12px 14px 13px; }
.espace-b .compte-meteo .jour { font-size: .72rem; letter-spacing: .08em; }
.espace-b .compte-meteo .tmax { font-family: var(--b-titres); font-size: 2rem; font-weight: 800; line-height: .95; }
.espace-b .compte-meteo .tmin { font-family: var(--b-titres); font-size: 1.25rem; font-weight: 700; }
.espace-b .compte-meteo .plage { height: 5px; }

/* Aujourd'hui près de chez vous : le guide et ses étapes, les lignes des indicateurs. */
.espace-b .compte-guide { padding: 20px 22px 18px; }
.espace-b .compte-etapes li { border-radius: 16px; }
/* Le guide sur toute la largeur : l'explication à gauche, les trois étapes côte à côte, leur bouton dessous. */
@media (min-width: 900px) {
  .espace-b .compte-guide { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 20px 28px; align-items: start; padding: 24px; }
  .espace-b .compte-guide .compte-etapes { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .espace-b .compte-guide .compte-etapes li { grid-template-columns: auto minmax(0, 1fr); align-items: start; align-content: start; padding: 16px; }
  .espace-b .compte-etapes li > .fait, .espace-b .compte-etapes li > .compte-btn { grid-column: 2; justify-self: start; margin-top: 4px; }
}
.espace-b .compte-etapes .num { font-family: var(--b-titres); font-size: 1.15rem; }

/* Mes indicateurs suivis, Vous pourriez suivre, Explorer : des grilles qui profitent de la largeur. */
.espace-b .compte-grille { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.espace-b .compte-rech { padding: 16px 16px 14px; }
.espace-b .compte-rech:hover { box-shadow: 0 2px 4px rgba(27, 47, 50, .06), 0 14px 32px rgba(27, 47, 50, .12); }
.espace-b .compte-reco { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px; }
.espace-b .compte-reco-tuile { padding: 16px 16px 14px; }
.espace-b .compte-domaines { grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 12px; }
.espace-b .compte-domaines > * { border: 0; border-radius: 18px; box-shadow: var(--b-ombre); padding: 14px 8px 12px; }
.espace-b .compte-domaines > * > span { font-size: 24px; }
.espace-b .compte-domaines .a-venir { box-shadow: none; }

/* « Mes lieux » est déjà dans la largeur de la page : il n'en sort plus lui-même. */
.espace-b > .tl-lieux { width: auto; margin-left: 0; }

@media (max-width: 560px) {
  .espace-b { gap: 24px; }
  .espace-b .compte-bandeau h1 { font-size: 42px; }
  .espace-b .compte-carte { border-radius: 20px; }
  .espace-b .compte-meteo { padding: 10px; }
  .espace-b .compte-meteo .jours { gap: 6px; }
  .espace-b .compte-meteo .jours li { padding: 10px 5px; }
  .espace-b .compte-meteo .tmax { font-size: 1.6rem; }
  .espace-b .compte-meteo .jour { letter-spacing: 0; font-size: .66rem; }
  .espace-b .compte-zone > .compte-etiquette { letter-spacing: .1em; }
}

/* ==========================================================================
   LE COMPTE ET LES PAGES PUBLIQUES EN DESIGN B (11 novembre 2026, « revoir un
   peu toutes les pages »). body.compte-b est posé par user/_layout.php et
   user/_legal_layout.php là où le tableau du lieu est actif (/dev2) : Mon
   espace, Mon profil, Données et API, pages légales. Les couleurs de fond et
   de texte restent celles des jetons du compte (le mode sombre suit) ; ce qui
   change : les polices de la marque, les titres en capitales avec un trait
   vert, les cartes flottantes, les pastilles, et deux blocs d'encre (la fiche
   du profil, l'en-tête du tableau du lieu).
   ========================================================================== */
.compte-b {
  --police-compte: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --b-encre: #1b2f32; --b-vert: #83a843; --b-vert-fonce: #4f6b22; --b-brume: #b9c6c4; --b-filet: #dce4e1;
  --b-titres: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --b-ombre: 0 1px 2px rgba(27, 47, 50, .05), 0 8px 24px rgba(27, 47, 50, .07);
  --b-lueur: radial-gradient(120% 160% at 100% 0%, rgba(131, 168, 67, .30) 0%, rgba(131, 168, 67, 0) 46%),
             radial-gradient(80% 140% at 0% 100%, rgba(185, 198, 196, .10), rgba(185, 198, 196, 0) 60%);
  font-family: var(--police-compte); font-size-adjust: .5;
}
.compte-b input, .compte-b select, .compte-b textarea, .compte-b button { font-family: inherit; }

/* L'en-tête du site : le nom en capitales condensées, la navigation en pastilles (l'onglet ouvert en vert, comme dans le tableau). */
.compte-b .compte-marque strong { font-family: var(--b-titres); font-weight: 800; font-size: 1.4rem; line-height: .95; text-transform: uppercase; letter-spacing: .01em; }
.compte-b .compte-marque small { letter-spacing: .04em; }
.compte-b .compte-nav { gap: 6px; }
.compte-b .compte-nav a { border-radius: 999px; padding: 7px 16px; }
.compte-b .compte-nav a.actif, .compte-b .compte-nav a[aria-current="page"] { background: var(--b-vert); color: var(--b-encre); }
.compte-b .compte-outils .compte-btn, .compte-b .compte-lien-carte { border-radius: 999px; }

/* Les blocs : cartes flottantes, sans cadre ; boutons et étiquettes en pastilles ; champs arrondis. */
/* Toute la largeur, comme « Mon espace » (1 560 px de contenu au plus) ; les pages
   légales gardent leur colonne de lecture, plus confortable pour un long texte. */
.compte-b .compte-corps { max-width: 1608px; }
.compte-b .compte-lecture { max-width: calc(72ch + 64px); }
.compte-b .compte-carte { border: 0; border-radius: 22px; box-shadow: var(--b-ombre); }
.compte-b .compte-btn { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
.compte-b .compte-badge, .compte-b .compte-puce { border-radius: 999px; }
.compte-b .compte-champ input, .compte-b .compte-champ select, .compte-b .compte-champ textarea { border-radius: 12px; }
.compte-b .compte-segment { border-radius: 999px; }
.compte-b .compte-alerte { border-radius: 16px; }

/* Les titres : capitales condensées, un petit trait vert dessous. */
.compte-b .compte-titre, .compte-b .compte-lecture h1 {
  font-family: var(--b-titres); font-weight: 800; font-size: 3.4rem; line-height: .92; letter-spacing: .005em; text-transform: uppercase; margin-bottom: 18px;
}
.compte-b .compte-section h2, .compte-b .compte-api h2, .compte-b .compte-lecture h2 {
  font-family: var(--b-titres); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase;
}
.compte-b .compte-section h2::after, .compte-b .compte-api h2::after, .compte-b .compte-lecture h2::after {
  content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--b-vert); margin-top: 9px;
}
.compte-b .compte-section > header { gap: 8px; margin-bottom: 16px; }
.compte-b .compte-section { padding: 24px 26px 22px; }
.compte-b .compte-sections { gap: 20px; }

/* Mon profil : la fiche d'identité devient un bloc d'encre, avec la lueur verte ; son sommaire en pastilles. */
.compte-b .compte-profil { grid-template-columns: 300px minmax(0, 1fr); gap: 28px; }
/* Sur grand écran, les sections deux par deux : Identité | Préférences, puis Localisation
   (et sa carte) sur toute la largeur, puis Sécurité | Suppression. */
@media (min-width: 1200px) {
  .compte-b div.compte-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .compte-b div.compte-sections > form.compte-sections { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .compte-b form.compte-sections > #localisation { grid-column: 1 / -1; }
}
.compte-b .compte-resume {
  background-color: var(--b-encre); background-image: var(--b-lueur); color: #f4f6f2;
  border-radius: 26px; padding: 26px 20px 20px; box-shadow: 0 10px 30px rgba(27, 47, 50, .18);
}
.compte-b .compte-resume .compte-avatar { background: var(--b-vert); color: var(--b-encre); box-shadow: 0 0 0 5px rgba(131, 168, 67, .22); }
.compte-b .compte-resume .nomc { font-family: var(--b-titres); font-weight: 800; font-size: 1.9rem; line-height: .95; text-transform: uppercase; color: #ffffff; margin-top: 6px; }
.compte-b .compte-resume .mail { color: var(--b-brume); }
.compte-b .compte-resume .faits { border-top-color: rgba(244, 246, 242, .14); color: var(--b-brume); }
.compte-b .compte-resume .faits b { color: #f4f6f2; }
.compte-b .compte-sommaire { gap: 4px; margin-top: 16px; }
.compte-b .compte-sommaire a { border-radius: 999px; padding: 9px 16px; color: var(--b-brume); font-size: .95rem; }
.compte-b .compte-sommaire a:hover { background: rgba(244, 246, 242, .08); color: #ffffff; }
.compte-b .compte-sommaire a.actif, .compte-b .compte-sommaire a[aria-current] { background: var(--b-vert); color: var(--b-encre); }

/* Données et API : le titre en grand, l'accroche en relief, les publics en pastilles, les trois étapes côte à côte, le formulaire en carte. */
.compte-b .compte-api-intro {
  background-color: var(--b-encre); background-image: var(--b-lueur); color: var(--b-brume);
  border-radius: 26px; padding: 30px 34px 28px; box-shadow: 0 10px 30px rgba(27, 47, 50, .18);
}
.compte-b .compte-api-intro p { max-width: 70ch; }
.compte-b .compte-api-accroche { font-size: 1.35rem; line-height: 1.45; color: #f4f6f2; }
.compte-b .compte-api-accroche strong { color: var(--b-vert); font-family: var(--b-titres); font-size: 1.6rem; font-weight: 800; }
.compte-b .compte-api-intro .compte-api-actions { margin-top: 18px; }
.compte-b .compte-api-intro .compte-btn.p { background: var(--b-vert); color: var(--b-encre); }
.compte-b .compte-api-intro .compte-btn.p:hover { background: #95bb52; color: var(--b-encre); }
.compte-b .compte-api h2 { margin-top: 36px; }
.compte-b .compte-api .compte-api-publics li { border-radius: 999px; padding: 8px 14px; }
@media (min-width: 900px) {
  .compte-b .compte-api .compte-api-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.compte-b .compte-api .compte-api-etapes li { border-radius: 20px; padding: 18px 18px 20px; background: var(--panneau); box-shadow: var(--b-ombre); align-content: start; }
.compte-b .compte-api .compte-api-etapes li::before { font-family: var(--b-titres); font-size: 1.15rem; background: var(--b-encre); color: var(--b-vert); }
.compte-b .compte-api-form { padding: 24px 26px; border-radius: 22px; background: var(--panneau); box-shadow: var(--b-ombre); max-width: 980px; }
.compte-b .compte-lecture-carte { padding: 34px 38px 36px; }
.compte-b .compte-lecture-pied a { border-radius: 999px; }

/* Le bas de « Mon espace » : le tableau du lieu est posé dans un plateau qui dit où il finit ;
   ses notes de bas (lieu, sources, avertissement) restent lisibles mais discrètes. */
.espace-b .tl-panneau.tl-integre { background: #e6ebe3; border-radius: 30px; padding-bottom: 4px; }
.espace-b .tl-integre .tl-corps { padding: 22px 22px 6px; }
.tl-pied { border-top: 1px solid var(--ac-filet); padding-top: 16px; margin-top: 4px; gap: 6px; }
.tl-pied p { max-width: 140ch; }
.tl-avertissement { font-size: 11.5px; color: var(--tl-encre-3); }
/* « Le détail », « Tous les indicateurs » et autres liens d'en-tête de carte : de petites pastilles. */
.tl-carte-tete > .tl-lien {
  padding: 8px 15px !important; border: 1px solid var(--ac-filet) !important; border-radius: 999px; text-decoration: none;
  font-size: 13px !important; color: var(--ac-encre) !important; background: #ffffff;
}
.tl-carte-tete > .tl-lien:hover { border-color: var(--ac-encre) !important; }

@media (max-width: 768px) {
  .compte-b .compte-profil { grid-template-columns: minmax(0, 1fr); }
  .compte-b .compte-titre, .compte-b .compte-lecture h1 { font-size: 2.6rem; }
  .compte-b .compte-section { padding: 20px 18px 18px; }
  .compte-b .compte-lecture-carte { padding: 22px 18px 24px; }
  .compte-b .compte-api-intro { padding: 22px 18px 20px; border-radius: 22px; }
  .compte-b .compte-api-accroche { font-size: 1.12rem; }
  .compte-b .compte-api-accroche strong { font-size: 1.3rem; }
  /* Quatre onglets sur une ligne, sans défilement (« API » restait hors de l'écran). */
  .compte-b .compte-nav { gap: 2px; }
  .compte-b .compte-nav a { flex: 1 1 auto; padding: 7px 5px; white-space: nowrap; justify-content: center; font-size: .8rem; }
  .espace-b .tl-panneau.tl-integre { border-radius: 24px; }
  .espace-b .tl-integre .tl-corps { padding: 16px 10px 4px; }
}

/* ==========================================================================
   LA CARTE EN DESIGN B (11 novembre 2026, « tu n'as pas adapté le design sur
   les filtres de gauche ») : le menu de gauche et les cartouches de la carte.
   body.carte-b est posé par index.php là où le tableau du lieu est actif
   (/dev2). Les fonds et textes ordinaires gardent les jetons du site (le mode
   sombre suit) ; l'en-tête du menu et l'indicateur affiché deviennent des
   blocs d'encre avec la lueur verte, comme l'en-tête du tableau du lieu.
   ========================================================================== */
.carte-b {
  --b-encre: #1b2f32; --b-vert: #83a843; --b-vert-fonce: #4f6b22; --b-brume: #b9c6c4;
  --b-titres: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --b-texte: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --b-ombre: 0 1px 2px rgba(27, 47, 50, .05), 0 6px 18px rgba(27, 47, 50, .07);
  --b-lueur: radial-gradient(120% 160% at 100% 0%, rgba(131, 168, 67, .30) 0%, rgba(131, 168, 67, 0) 46%),
             radial-gradient(80% 140% at 0% 100%, rgba(185, 198, 196, .10), rgba(185, 198, 196, 0) 60%);
}
.carte-b .sidebar { font-family: var(--b-texte); font-size-adjust: .5; background: var(--panneau-2); }
.carte-b .sidebar button, .carte-b .sidebar select, .carte-b .sidebar input { font-family: inherit; }

/* L'en-tête du menu : un bloc d'encre, la marque en capitales condensées, les outils en clair. */
.carte-b .sidebar .rail-tete {
  background-color: var(--b-encre); background-image: var(--b-lueur); color: #f4f6f2;
  border-bottom: 0; border-radius: 0 0 22px 22px; box-shadow: 0 8px 22px rgba(27, 47, 50, .18);
}
.carte-b .sidebar .rail-tete .logo, .carte-b .sidebar .rail-tete .logo-lien { color: #f4f6f2; }
.carte-b .sidebar .rail-tete .logo strong, .carte-b .sidebar .rail-tete .logo b {
  font-family: var(--b-titres); font-weight: 800; font-size: 1.35rem; line-height: .95; text-transform: uppercase; letter-spacing: .01em; color: #ffffff;
}
.carte-b .sidebar .rail-tete .logo small { color: var(--b-brume); }
.carte-b .sidebar .lang-toggle .lang-btn { background: transparent; color: #f4f6f2; border-color: rgba(244, 246, 242, .3); border-radius: 999px; }
.carte-b .sidebar .lang-toggle .lang-btn:hover { background: rgba(244, 246, 242, .1); }
.carte-b .sidebar .lang-menu { color: var(--encre-1); }
/* Le menu ouvert : une carte encre opaque, posée au-dessus de la recherche (11 nov. : les choix transparents
   laissaient voir le champ à travers, et le dernier disparaissait sur son fond blanc). */
.carte-b .sidebar .lang-toggle .lang-menu { top: calc(100% + 6px); gap: 2px; padding: 4px; width: auto; min-width: 100%; box-sizing: border-box;
  background: var(--b-encre); border: 1px solid rgba(244, 246, 242, .22); border-radius: 16px; box-shadow: 0 10px 26px rgba(10, 22, 24, .35); }
.carte-b .sidebar .lang-toggle .lang-option, .carte-b .sidebar .lang-toggle .lang-option + .lang-option { border: 0; border-radius: 999px; background: transparent; color: #f4f6f2; }
.carte-b .sidebar .lang-toggle .lang-option:hover, .carte-b .sidebar .lang-toggle .lang-option:focus-visible { background: rgba(244, 246, 242, .14); color: #ffffff; }
.carte-b .sidebar .rail-tete .account-chip { background: rgba(244, 246, 242, .08); border-color: rgba(244, 246, 242, .3); color: #f4f6f2; }
.carte-b .sidebar .rail-tete .account-chip i { color: #f4f6f2; }
.carte-b .sidebar .account-dropdown { color: var(--encre-1); }
/* La recherche d'indicateur : une pastille. */
.carte-b .sidebar .indicator-search-field { border-radius: 999px; }
.carte-b .sidebar .indicator-search-input { border-radius: 999px; }

/* L'indicateur affiché : le bloc d'encre du menu, son nom en grand, « Suivre » en vert. */
.carte-b .sidebar .specimen {
  background-color: var(--b-encre); background-image: var(--b-lueur); color: #f4f6f2;
  border: 0; border-radius: 22px; box-shadow: 0 8px 22px rgba(27, 47, 50, .16);
}
.carte-b .sidebar .specimen-tete { padding: 16px 16px 10px; }
.carte-b .sidebar .specimen-nom { font-family: var(--b-titres); font-weight: 800; font-size: 1.45rem; line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: #ffffff; }
.carte-b .sidebar .specimen-meta { margin-top: 6px; color: var(--b-vert); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.carte-b .sidebar .specimen-description { color: #d3dcda; }
.carte-b .sidebar .specimen-description a { color: #ffffff; }
.carte-b .sidebar .btn.specimen-suivre { background: var(--b-vert); border-color: var(--b-vert); color: var(--b-encre); border-radius: 999px; font-weight: 700; }
.carte-b .sidebar .btn.specimen-suivre:hover { background: #95bb52; border-color: #95bb52; color: var(--b-encre); }
.carte-b .sidebar .btn.specimen-suivre.est-suivi, .carte-b .sidebar .btn.specimen-suivre.est-suivi:disabled, .carte-b .sidebar .btn.specimen-suivre.est-suivi:hover {
  background: rgba(244, 246, 242, .1); border-color: rgba(244, 246, 242, .3); color: #f4f6f2;
}
.carte-b .sidebar .specimen .segment-fiche, .carte-b .sidebar .specimen .info-icone { color: #f4f6f2; }

/* Les étapes : des cartes qui flottent sur le fond du menu ; l'étape en cours garde son bandeau, en vert. */
.carte-b .sidebar .bloc { background: var(--panneau); border: 0; border-radius: 20px; padding: 13px 14px 14px; box-shadow: var(--b-ombre); }
.carte-b .sidebar .bloc-titre { color: var(--encre-2); letter-spacing: .07em; }
/* Josefin est plus large : « 1. CHOISISSEZ UN DOMAINE » et son compteur doivent tenir sur une ligne. */
.carte-b .sidebar .bloc-titre .etape { letter-spacing: .02em; }
@media (min-width: 769px) { .carte-b .sidebar .bloc-titre .etape { white-space: nowrap; } }
.carte-b .sidebar .bloc-compteur { font-size: .68rem; }
.carte-b .sidebar .bloc-etape.etape-active { border: 0; box-shadow: 0 0 0 2px var(--b-vert), var(--b-ombre); }
.carte-b .sidebar .bloc-etape.etape-active > .bloc-titre {
  margin: -13px -14px 10px; padding: 8px 14px 7px; background: var(--b-vert); color: var(--b-encre); border-radius: 20px 20px 0 0;
}
.carte-b .sidebar .bloc-etape.etape-active > .bloc-titre .bloc-compteur { color: var(--b-encre); }

/* Les choix : tuiles et listes arrondies ; le choix fait, en encre. */
.carte-b .sidebar .domaines { gap: 6px; }
.carte-b .sidebar .dom { border-radius: 14px; }
.carte-b .sidebar .dom[aria-pressed="true"] { background: var(--b-encre); border-color: var(--b-encre); box-shadow: none; }
.carte-b .sidebar .dom[aria-pressed="true"] .dom-libelle { color: #ffffff; }
.carte-b .sidebar .dom[aria-pressed="true"] .dom-nombre { color: var(--b-brume); }
.carte-b .sidebar .liste-types { border-radius: 16px; overflow: hidden; }
.carte-b .sidebar .type-item[aria-pressed="true"] { background: var(--b-encre); color: #ffffff; box-shadow: inset 4px 0 0 var(--b-vert); }
.carte-b .sidebar .type-item[aria-pressed="true"] * { color: inherit; }
.carte-b .sidebar .mod { border-radius: 14px; }
.carte-b .sidebar .mod[aria-pressed="true"] { background: var(--b-encre); border-color: var(--b-encre); color: #ffffff; }
.carte-b .sidebar .mod[aria-pressed="true"] b { color: #ffffff; }
.carte-b .sidebar .mod[aria-pressed="true"] :not(b) { color: var(--b-brume); }
/* Chaque bouton arrondi, et non le groupe : un groupe arrondi qui cache ce qui dépasse rognait les coins des boutons
   dès qu'ils passaient sur plusieurs lignes (retour du client du 12 novembre 2026, « les boutons sont bugués »). */
.carte-b .sidebar .segmente button { border-radius: 999px; }
.carte-b .sidebar select, .carte-b .sidebar input[type="text"], .carte-b .sidebar input[type="search"] { border-radius: 12px; }

/* Les cartouches de la carte : arrondis, dans les polices de la marque ; le bouton du menu en encre. */
.carte-b .info { font-family: var(--b-texte); border-radius: 16px; padding: 10px 14px; box-shadow: var(--b-ombre); }
.carte-b .info h4 { font-family: var(--b-titres); font-weight: 800; font-size: 1.05rem; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--b-encre); }
.carte-b #opacityContainer { font-family: var(--b-texte); border-radius: 16px; }
.carte-b #toggleControlsButton { background: var(--b-encre); color: var(--b-vert); }
.carte-b .leaflet-control-geocoder { border-radius: 999px; overflow: hidden; font-family: var(--b-texte); }

/* Le choix de la langue dans la barre du haut (11 novembre 2026) : le globe et le code, puis un petit menu. */
.tl-langue { position: relative; flex: none; }
.tl-langue > summary { list-style: none; cursor: pointer; user-select: none; }
.tl-langue > summary::-webkit-details-marker { display: none; }
.tl-langue-code { font-weight: 700; letter-spacing: .06em; }
.tl-langue-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: grid; gap: 2px; min-width: 164px; padding: 4px;
  background: var(--tl-panneau); border: 1px solid var(--tl-trait-fort); border-radius: 12px; box-shadow: 0 12px 28px rgba(27, 47, 50, .2); }
.tl-langue-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--tl-encre-1); text-decoration: none; }
.tl-langue-menu a small { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--tl-encre-3); }
.tl-langue-menu a:hover { background: var(--tl-accent-clair); }
.tl-langue-menu a[aria-current="true"] { background: var(--tl-accent-clair); color: var(--tl-accent); }
.tl-langue-menu a[aria-current="true"] small { color: inherit; }

/* Sur un panneau étroit, le globe seul, rond comme ses voisins : le nom de la langue est dans le menu et l'aria-label. */
@container (max-width: 640px) { .tl-langue-code { display: none; } }
/* Le retour à la carte garde sa taille ; c'est le nom du lieu qui s'abrège. */
.tl-barre-lieu > .tl-b-icone { flex: none; }

/* ==========================================================================
   AgroClimat, refonte du 11 novembre 2026 (onglets/agroclimat.js) :
   les cultures en vrais onglets, le filtre espèce → variété, l'accueil en croquis.
   ========================================================================== */
.tl-agro, .tl-climat { --agro-encre: var(--ac-encre, #1b2f32); --agro-vert: var(--ac-vert, #83a843); --agro-vert-fonce: var(--ac-vert-fonce, #4f6b22);
  --agro-lavis: var(--ac-lavis, #f3f5f0); --agro-filet: var(--ac-filet, #dce4e1); }

/* Les onglets des cultures : des intercalaires posés sur un filet ; celui qui est ouvert s'y raccroche. */
.tl-agro-onglets { position: relative; display: flex; gap: 2px; margin: 6px 0 0; padding: 0 2px; border-bottom: 1px solid var(--tl-trait-fort);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; }
.tl-agro-onglets::-webkit-scrollbar { display: none; }
.tl-agro-onglet { position: relative; flex: none; display: inline-flex; align-items: center; gap: 9px; margin: 0 0 -1px; padding: 10px 16px 11px; min-height: 52px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0; background: transparent; scroll-snap-align: start;
  font-size: 15px !important; font-weight: 700; color: var(--tl-encre-3) !important; white-space: nowrap; cursor: pointer;
  transition: color .15s, background-color .15s; }
.tl-agro-onglet svg { flex: none; transition: transform .2s; }
.tl-agro-onglet:hover { background: var(--agro-lavis); color: var(--tl-encre-1) !important; }
.tl-agro-onglet:hover svg { transform: translateY(-1px); }
.tl-agro-onglet:focus-visible { outline: 2px solid var(--agro-vert); outline-offset: -3px; }
.tl-agro-onglet[aria-selected="true"] { background: var(--tl-panneau); border-color: var(--tl-trait-fort); color: var(--agro-encre) !important;
  box-shadow: inset 0 3px 0 var(--agro-vert), 0 1px 0 var(--tl-panneau); }
.tl-agro-onglet[aria-selected="true"] svg { color: var(--agro-vert-fonce); }
.tl-agro-onglet-a-venir .tl-agro-onglet-nom { opacity: .78; }
.tl-agro-onglet-texte { display: grid; justify-items: start; gap: 3px; line-height: 1.1; text-align: left; }
.tl-agro-onglet-bientot { padding: 1px 6px 0; border-radius: 999px; background: var(--agro-lavis); border: 1px solid var(--agro-filet);
  font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-encre-3); }
.tl-agro-onglet[aria-selected="true"] .tl-agro-onglet-bientot { background: var(--tl-accent-clair); border-color: transparent; color: var(--agro-vert-fonce); }
.tl-agro-contenu { display: grid; gap: 16px; padding-top: 18px; min-width: 0; }

/* Le filtre : un encadré à deux étapes numérotées ; l'étape à faire est entourée de vert. */
.tl-arbo-filtre { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--agro-filet); border-radius: 16px; background: var(--agro-lavis); min-width: 0; }
.tl-arbo-filtre-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tl-arbo-filtre-picto { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--agro-encre); color: var(--agro-vert); }
.tl-arbo-filtre-tete h3 { margin: 0; font-size: 19px !important; }
.tl-arbo-fil { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 0 auto; padding: 5px 12px; border-radius: 999px; background: var(--tl-panneau);
  border: 1px solid var(--agro-filet); font-size: 14px; color: var(--tl-encre-2); }
.tl-arbo-fil b { color: var(--agro-encre); }
.tl-arbo-fil-sep { color: var(--agro-vert-fonce); font-weight: 700; }
.tl-arbo-etape { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 10px 14px; padding: 12px; border-radius: 12px;
  border: 1px solid transparent; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.tl-arbo-etape-active { background: var(--tl-panneau); border-color: var(--agro-vert); box-shadow: 0 0 0 4px rgba(131, 168, 67, .16); }
.tl-arbo-etape-nom { display: flex; align-items: center; gap: 9px; min-height: 38px; font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tl-encre-2); }
.tl-arbo-num { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--tl-trait-fort);
  font-size: 12px; letter-spacing: 0; color: var(--tl-encre-3); background: var(--tl-panneau); }
.tl-arbo-etape-active .tl-arbo-num { background: var(--agro-vert); border-color: var(--agro-vert); color: var(--agro-encre); }
.tl-arbo-etape-active .tl-arbo-etape-nom { color: var(--agro-encre); }
.tl-arbo-etape-faite .tl-arbo-num { background: var(--agro-encre); border-color: var(--agro-encre); color: #fff; }
.tl-arbo-etape-attente .tl-arbo-etape-nom { color: var(--tl-encre-3); opacity: .75; }
.tl-arbo-etape-aide { margin: 0; align-self: center; font-size: 14px; color: var(--tl-encre-3); font-style: italic; }
.tl-arbo-puces { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tl-arbo-puce { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border: 1px solid var(--tl-trait-fort); border-radius: 999px;
  background: var(--tl-panneau); font-size: 14px !important; font-weight: 600; color: var(--tl-encre-1) !important; cursor: pointer;
  transition: transform .12s, border-color .12s, background-color .12s, box-shadow .12s; }
.tl-arbo-puce:hover { border-color: var(--agro-encre); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(27, 47, 50, .1); }
.tl-arbo-puce:focus-visible { outline: 2px solid var(--agro-vert); outline-offset: 2px; }
.tl-arbo-puce[aria-pressed="true"] { background: var(--agro-encre); border-color: var(--agro-encre); color: #fff !important; box-shadow: inset 0 -3px 0 var(--agro-vert); transform: none; }
.tl-arbo-puce-espece svg { color: var(--agro-vert-fonce); }
.tl-arbo-puce-espece[aria-pressed="true"] svg { color: var(--agro-vert); }
.tl-arbo-puce small { font-size: 11px; font-weight: 700; color: var(--tl-encre-3); font-variant-numeric: tabular-nums; }
.tl-arbo-puce[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }

/* L'accueil sans variété : une invitation, puis six croquis de ce que l'on obtiendra. */
.tl-arbo-accueil { display: grid; gap: 14px; padding: 22px; border-radius: 18px; border: 1px dashed var(--tl-trait-fort);
  background: radial-gradient(120% 90% at 0% 0%, rgba(131, 168, 67, .12), transparent 60%), var(--tl-panneau); }
.tl-arbo-accueil-tete { display: flex; align-items: flex-start; gap: 16px; }
.tl-arbo-accueil-fleche { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--agro-encre); color: var(--agro-vert);
  box-shadow: 0 6px 16px rgba(27, 47, 50, .22); animation: tl-agro-monte 1.6s ease-in-out 3; }
@keyframes tl-agro-monte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tl-arbo-accueil-texte { display: grid; gap: 4px; min-width: 0; }
.tl-arbo-accueil-texte h3 { margin: 0; font-size: 30px !important; line-height: 1 !important; color: var(--agro-encre); }
.tl-arbo-accueil-texte p { margin: 0; max-width: 62ch; color: var(--tl-encre-2); }
.tl-arbo-accueil-sur { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--agro-vert-fonce) !important; }
.tl-arbo-accueil-legende { margin: 6px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tl-encre-3); }
.tl-arbo-apercus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 1040px) { .tl-arbo-apercus { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (max-width: 560px) { .tl-arbo-apercus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tl-arbo-apercu { display: grid; align-content: start; gap: 4px; padding: 10px 10px 12px; border: 1px solid var(--agro-filet); border-radius: 14px; background: var(--tl-panneau); min-width: 0; }
.tl-arbo-apercu-dessin { margin-bottom: 6px; padding: 8px 6px 4px; border-radius: 10px; background: var(--agro-lavis); }
.tl-arbo-croquis { display: block; width: 100%; height: auto; }
.tl-arbo-apercu b { font-size: 14px; color: var(--agro-encre); line-height: 1.2; }
.tl-arbo-apercu span { font-size: 12.5px; line-height: 1.35; color: var(--tl-encre-3); }
.tl-arbo-accueil-note { margin: 0; font-size: 12px; color: var(--tl-encre-3); }
.tl-croquis-grille { stroke: var(--agro-filet); stroke-width: 1; stroke-dasharray: 2 4; }
.tl-croquis-axe { stroke: var(--tl-trait-fort); stroke-width: 1.2; }
.tl-croquis-tendance { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-croquis-croix { fill: none; stroke: #b8222c; stroke-width: 2.2; stroke-linecap: round; }
.tl-croquis-cellule-nom { fill: var(--tl-encre-3); opacity: .45; }
.tl-croquis-cellule { fill: var(--tl-trait-fort); }
.tl-croquis-cellule-recente { fill: var(--agro-vert); }
/* Le dessin des croquis, à la première apparition : les barres poussent, les points tombent, la tendance se trace. */
.tl-anime .tl-croquis-barre, .tl-anime .tl-croquis-cellule-nom, .tl-anime .tl-croquis-cellule, .tl-anime .tl-croquis-cellule-recente, .tl-anime .tl-croquis-ecart {
  transform-box: fill-box; transform-origin: 50% 100%; animation: tl-croquis-pousse .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms + var(--d, 0) * 1ms); }
.tl-anime .tl-croquis-cellule-nom, .tl-anime .tl-croquis-cellule, .tl-anime .tl-croquis-cellule-recente, .tl-anime .tl-croquis-ecart { transform-origin: 0 50%; animation-name: tl-croquis-etire; }
.tl-anime .tl-croquis-point, .tl-anime .tl-croquis-croix { animation: tl-croquis-point .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 110ms + var(--d, 0) * 1ms); }
.tl-anime .tl-croquis-tendance { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tl-croquis-trace 1.1s ease-out forwards; animation-delay: calc(var(--i, 0) * 110ms + 650ms); }
.tl-anime .tl-arbo-apercu { animation: tl-entree .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes tl-croquis-pousse { from { transform: scaleY(0); } to { transform: none; } }
@keyframes tl-croquis-etire { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tl-croquis-point { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes tl-croquis-trace { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tl-arbo-accueil-fleche, .tl-anime .tl-arbo-apercu, .tl-anime .tl-croquis-barre, .tl-anime .tl-croquis-point, .tl-anime .tl-croquis-croix,
  .tl-anime .tl-croquis-cellule-nom, .tl-anime .tl-croquis-cellule, .tl-anime .tl-croquis-cellule-recente, .tl-anime .tl-croquis-ecart { animation: none; }
  .tl-anime .tl-croquis-tendance { animation: none; stroke-dashoffset: 0; }
}

/* Un thème annoncé : son pictogramme, « en cours de développement », et le chemin vers ce qui est prêt. */
.tl-agro-bientot { display: grid; justify-items: start; gap: 6px; padding: 24px 22px; border: 1px dashed var(--tl-trait-fort); border-radius: 16px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(131, 168, 67, .1), transparent 60%), var(--tl-panneau); }
.tl-agro-bientot-picto { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--agro-lavis); color: var(--agro-vert-fonce); }
.tl-agro-bientot-etat { padding: 3px 9px 2px; border-radius: 999px; background: var(--tl-accent-clair); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tl-accent); }
.tl-agro-bientot-titre { margin: 4px 0 0; color: var(--tl-encre-1); }
.tl-agro-bientot .tl-petit { margin: 0; max-width: 62ch; }
.tl-agro-bientot-pret { margin: 4px 0 0; font-size: 14px; color: var(--tl-encre-2); }

@container (max-width: 640px) {
  /* La barre des cultures défile : un fondu à droite le montre. */
  .tl-agro-onglets { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .tl-agro-onglet { padding: 10px 12px 11px; font-size: 14px !important; }
  .tl-arbo-filtre { padding: 12px; }
  .tl-arbo-etape { grid-template-columns: minmax(0, 1fr); padding: 10px; gap: 8px; }
  .tl-arbo-etape-nom { min-height: 0; }
  .tl-arbo-fil { margin-left: 0; }
  .tl-arbo-accueil { padding: 16px; }
  .tl-arbo-accueil-fleche { width: 38px; height: 38px; }
  .tl-arbo-accueil-texte h3 { font-size: 25px !important; }
}

/* ==========================================================================
   La carte se clique (11 novembre 2026, tableau-lieu/assets/js/carte.js) : la main au survol, un cercle
   et « Cliquer : ouvrir ce lieu » qui suivent la souris (FIXES, sans animation : 12 novembre), et la
   balise de la première visite.
   ========================================================================== */
.leaflet-container.tl-carte-cliquable, .leaflet-container.tl-carte-cliquable .leaflet-interactive { cursor: pointer; }
.leaflet-container.tl-carte-cliquable.leaflet-dragging, .leaflet-container.tl-carte-cliquable.leaflet-dragging .leaflet-interactive { cursor: grabbing; }
.tl-souris { position: fixed; left: 0; top: 0; z-index: 1200; pointer-events: none; opacity: 0; animation: none; will-change: transform; }
.tl-souris.tl-visible { opacity: 1; }
.tl-souris-mire { position: absolute; left: -13px; top: -13px; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ffffff;
  box-shadow: 0 0 0 1.5px rgba(27, 47, 50, .7), inset 0 0 0 1.5px rgba(27, 47, 50, .35); }
.tl-souris-bulle { position: absolute; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: 999px;
  background: #1b2f32; color: #f4f6f2; font: 600 13px/1.1 "Josefin Sans", system-ui, sans-serif; white-space: nowrap; box-shadow: 0 4px 14px rgba(10, 22, 24, .3); }
.tl-souris-bulle svg { flex: none; color: #83a843; }
.tl-souris.tl-appris .tl-souris-bulle { display: none; }

.tl-balise { position: absolute; z-index: 640; width: 0; height: 0; pointer-events: none; animation: tl-balise-entre .45s cubic-bezier(.2, .8, .2, 1) both; }
.tl-balise.tl-balise-sort { animation: tl-balise-sort .3s ease-in forwards; }
@keyframes tl-balise-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tl-balise-sort { to { opacity: 0; transform: scale(.9); } }
.tl-balise-point { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: #83a843; border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(10, 22, 24, .45); }
.tl-balise-onde { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #83a843; animation: tl-onde 2s ease-out infinite; }
.tl-balise-onde-2 { animation-delay: 1s; }
@keyframes tl-onde { from { transform: scale(1); opacity: .9; } to { transform: scale(4.2); opacity: 0; } }
.tl-balise-bulle { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: grid; gap: 4px; width: max-content; max-width: min(300px, 78vw);
  padding: 12px 38px 13px 15px; border-radius: 14px; background: #1b2f32; color: #f4f6f2; pointer-events: auto;
  font: 400 14px/1.35 "Josefin Sans", system-ui, sans-serif; box-shadow: 0 12px 30px rgba(10, 22, 24, .35); }
.tl-balise-bulle::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: #1b2f32; transform: rotate(45deg); border-radius: 2px; }
.tl-balise-bulle b { font: 800 19px/1 "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #ffffff; }
.tl-balise-fermer { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(244, 246, 242, .1); color: #f4f6f2; cursor: pointer; }
.tl-balise-fermer:hover { background: rgba(244, 246, 242, .2); }
@media (prefers-reduced-motion: reduce) {
  .tl-balise, .tl-balise-onde { animation: none; }
  .tl-balise-onde { opacity: .35; transform: scale(2); }
}

/* L'encadré « Information » (assets/js/root.js, styles de base dans assets/css/style.css) : polices de la marque. */
.carte-b .info.info-plein h4, .carte-b .info.info-vide h4 { font-size: 1.15rem; }
.carte-b .info .info-nombre { font-family: var(--b-titres); font-weight: 800; font-size: 30px; letter-spacing: 0; }
.carte-b .info .info-niveau { font-family: var(--b-texte); }

/* « Proposer une évolution » au bout des onglets (12 novembre 2026, demande du client : « il faut que ce
   soit visible, que les gens comprennent ») : un vrai bouton JAUNE, texte vert foncé (« ça ressortirait
   mieux, tout est un peu de la même couleur »), avec son texte, jamais une icône seule. */
.tl-barre-onglets { display: flex; align-items: center; gap: 10px; }
.tl-barre-onglets > .tl-rubriques { flex: 1 1 auto; min-width: 0; }
/* .tl-panneau devant : sinon « .tl-panneau button { font: inherit; color: inherit } » l'emporte (texte blanc sur vert). */
.tl-panneau .tl-idee { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin-left: auto; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; background: #f2d64b; color: #36521a; font: 700 14px/1 "Josefin Sans", system-ui, sans-serif;
  letter-spacing: .01em; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 0 rgba(10, 22, 24, .25); transition: background .15s, transform .15s; }
.tl-idee svg { flex: none; }
.tl-panneau .tl-idee:hover { background: #f6df6c; transform: translateY(-1px); }
.tl-idee:focus-visible { outline: 3px solid #f4f6f2; outline-offset: 2px; }
.tl-idee-court { display: none; }
@container (max-width: 640px) {
  .tl-panneau .tl-idee { min-height: 36px; padding: 0 12px 0 9px; font-size: 13.5px; }
  .tl-idee-long { display: none; }
  .tl-idee-court { display: inline; }
}
/* Sur téléphone, pas de bouton « Une idée ? » dans l'en-tête du tableau du lieu (demande du client du 12 novembre
   2026) : il serrait les onglets Climat et AgroClimat. Le formulaire « Un graphique vous manque ? » reste en bas. */
@media (max-width: 768px) { .tl-panneau .tl-idee { display: none; } }
@media (prefers-reduced-motion: reduce) { .tl-idee { transition: none; } .tl-idee:hover { transform: none; } }

/* ==========================================================================
   La carte en design B (12 novembre 2026, demandes du client) :
     1. les chargements : une carte d'encre et une petite grille de cases qui se
        colorent l'une après l'autre, comme la carte qui se remplit (au lieu du
        rouet générique) ;
     2. les éléments posés sur la carte : recherche de ville, zoom, bouton du
        menu, logo, opacité du calque, mentions.
   ========================================================================== */
@keyframes b-grille {
  0% { background-color: rgba(244, 246, 242, .2); box-shadow: -9px -9px 0 0 rgba(244, 246, 242, .2), 0px -9px 0 0 rgba(244, 246, 242, .2), 9px -9px 0 0 rgba(244, 246, 242, .2), -9px 0px 0 0 rgba(244, 246, 242, .2), 9px 0px 0 0 rgba(244, 246, 242, .2), -9px 9px 0 0 rgba(244, 246, 242, .2), 0px 9px 0 0 rgba(244, 246, 242, .2), 9px 9px 0 0 rgba(244, 246, 242, .2); }
  12% { background-color: rgba(244, 246, 242, .2); box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 rgba(244, 246, 242, .2), 9px -9px 0 0 rgba(244, 246, 242, .2), -9px 0px 0 0 rgba(244, 246, 242, .2), 9px 0px 0 0 rgba(244, 246, 242, .2), -9px 9px 0 0 rgba(244, 246, 242, .2), 0px 9px 0 0 rgba(244, 246, 242, .2), 9px 9px 0 0 rgba(244, 246, 242, .2); }
  24% { background-color: rgba(244, 246, 242, .2); box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 #83a843, 9px -9px 0 0 rgba(244, 246, 242, .2), -9px 0px 0 0 #83a843, 9px 0px 0 0 rgba(244, 246, 242, .2), -9px 9px 0 0 rgba(244, 246, 242, .2), 0px 9px 0 0 rgba(244, 246, 242, .2), 9px 9px 0 0 rgba(244, 246, 242, .2); }
  36% { background-color: #e9d44a; box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 #83a843, 9px -9px 0 0 #e9d44a, -9px 0px 0 0 #83a843, 9px 0px 0 0 rgba(244, 246, 242, .2), -9px 9px 0 0 #e9d44a, 0px 9px 0 0 rgba(244, 246, 242, .2), 9px 9px 0 0 rgba(244, 246, 242, .2); }
  48% { background-color: #e9d44a; box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 #83a843, 9px -9px 0 0 #e9d44a, -9px 0px 0 0 #83a843, 9px 0px 0 0 #f0a04b, -9px 9px 0 0 #e9d44a, 0px 9px 0 0 #f0a04b, 9px 9px 0 0 rgba(244, 246, 242, .2); }
  60% { background-color: #e9d44a; box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 #83a843, 9px -9px 0 0 #e9d44a, -9px 0px 0 0 #83a843, 9px 0px 0 0 #f0a04b, -9px 9px 0 0 #e9d44a, 0px 9px 0 0 #f0a04b, 9px 9px 0 0 #d9534f; }
  82% { background-color: #e9d44a; box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 #83a843, 9px -9px 0 0 #e9d44a, -9px 0px 0 0 #83a843, 9px 0px 0 0 #f0a04b, -9px 9px 0 0 #e9d44a, 0px 9px 0 0 #f0a04b, 9px 9px 0 0 #d9534f; }
  100% { background-color: rgba(244, 246, 242, .2); box-shadow: -9px -9px 0 0 rgba(244, 246, 242, .2), 0px -9px 0 0 rgba(244, 246, 242, .2), 9px -9px 0 0 rgba(244, 246, 242, .2), -9px 0px 0 0 rgba(244, 246, 242, .2), 9px 0px 0 0 rgba(244, 246, 242, .2), -9px 9px 0 0 rgba(244, 246, 242, .2), 0px 9px 0 0 rgba(244, 246, 242, .2), 9px 9px 0 0 rgba(244, 246, 242, .2); }
}
/* La grille : la case du milieu (7 px) et ses huit voisines, dessinées par ses ombres (une ombre sous
   l'élément lui-même serait masquée : d'où la case centrale en couleur de fond). */
.carte-b #mapLoadingIndicator::before, .carte-b .map-loading-indicator::before,
.carte-b .loading-spinner, .carte-b #welcome-loader .spinner {
  content: ""; flex: none; display: block; box-sizing: content-box; width: 7px; height: 7px; margin: 9px; padding: 0;
  border: 0; border-radius: 2px; background: transparent; animation: b-grille 1.9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .carte-b #mapLoadingIndicator::before, .carte-b .map-loading-indicator::before,
  .carte-b .loading-spinner, .carte-b #welcome-loader .spinner { animation: none; background-color: #e9d44a; box-shadow: -9px -9px 0 0 #5fa463, 0px -9px 0 0 #83a843, 9px -9px 0 0 #e9d44a, -9px 0px 0 0 #83a843, 9px 0px 0 0 #f0a04b, -9px 9px 0 0 #e9d44a, 0px 9px 0 0 #f0a04b, 9px 9px 0 0 #d9534f; }
}
/* « Chargement de la carte… » : la pastille devient une carte d'encre, texte clair. */
.carte-b #mapLoadingIndicator, .carte-b .map-loading-indicator {
  gap: 16px; padding: 16px 24px 16px 22px; border: 0; border-radius: 18px;
  background: var(--b-encre); color: #f4f6f2; font-family: var(--b-texte); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 14px 34px rgba(10, 22, 24, .32), inset 0 0 0 1px rgba(244, 246, 242, .08);
}
/* Le filet qui court en haut de la carte : vert. */
.carte-b .main-map.chargement::before { height: 3px; background: linear-gradient(90deg, transparent 0%, var(--b-vert) 40%, var(--b-vert) 60%, transparent 100%); background-size: 45% 100%; background-repeat: no-repeat; }
/* La fenêtre bloquante (recherche, préparation de l'image) : même carte d'encre. */
.carte-b .loading {
  min-width: 240px; padding: 22px 28px; border-radius: 20px; background: var(--b-encre); color: #f4f6f2;
  font-family: var(--b-texte); box-shadow: 0 18px 44px rgba(10, 22, 24, .38);
}
.carte-b .loading .loading-text-animated { font-family: var(--b-titres); font-weight: 800; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; color: #ffffff; }
.carte-b .loading .loading-spinner { margin: 24px auto 22px; }
.carte-b .loading #loadingText { font-size: 14px; color: var(--b-brume); }
.carte-b .loading-overlay { background: rgba(19, 33, 35, .35); }
/* L'écran d'accueil : sa grille au centre d'un médaillon d'encre. Centrée en absolu : le script de
   l'accueil (domloaded.js) force display:block sur #welcome-loader. */
.carte-b #welcome-loader { position: relative; width: 64px; height: 64px; margin: 24px auto 22px; border-radius: 18px; background: var(--b-encre); }
.carte-b #welcome-loader .spinner { position: absolute; left: 50%; top: 50%; margin: -3.5px 0 0 -3.5px; }
.carte-b .welcome-container > div { border-radius: 24px; padding: 36px 40px 34px; box-shadow: 0 24px 60px rgba(10, 22, 24, .22); }
.carte-b .welcome-byline { font-family: var(--b-texte); font-weight: 600; color: #4e5f61; }
.carte-b .welcome-container h2 { margin: 0; font-family: var(--b-titres); font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; color: var(--b-encre); text-wrap: balance; }

/* La recherche de ville : une pilule blanche, la loupe dans un rond d'encre. */
.carte-b .search-control { border-radius: 999px; padding: 4px; background: #ffffff; border: 1px solid var(--b-filet, #dce4e1); box-shadow: 0 6px 20px rgba(27, 47, 50, .14); }
.carte-b .search-control form { display: flex; align-items: center; gap: 4px; margin: 0; }
.carte-b .search-control .city-search {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 12px 0 14px; border: 0; border-radius: 999px; background: transparent;
  font: 500 15px var(--b-texte); color: var(--b-encre); outline: none;
}
.carte-b .search-control .city-search::placeholder { color: #7d8b8d; }
.carte-b .search-control:focus-within { border-color: var(--b-vert-fonce); box-shadow: 0 0 0 3px rgba(131, 168, 67, .28), 0 6px 20px rgba(27, 47, 50, .14); }
.carte-b .search-control .submit-search {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: var(--b-encre); color: var(--b-vert); cursor: pointer;
}
.carte-b .search-control .submit-search:hover { background: #24403f; }
.carte-b .search-control .submit-search svg { width: 17px; height: 17px; stroke-width: 2.4; }

/* Le zoom : une colonne blanche arrondie, des signes d'encre. */
.carte-b .leaflet-control-zoom.leaflet-bar { border: 1px solid var(--b-filet, #dce4e1); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 20px rgba(27, 47, 50, .14); }
.carte-b .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font: 500 22px/40px var(--b-texte); color: var(--b-encre); background: #ffffff; border-bottom-color: var(--b-filet, #dce4e1); }
.carte-b .leaflet-control-zoom a span { display: block; font: 400 26px/40px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.carte-b .leaflet-control-zoom a:hover { background: #f3f5f0; color: var(--b-vert-fonce); }
.carte-b .leaflet-control-zoom a.leaflet-disabled { color: #b9c6c4; background: #ffffff; }
.carte-b .leaflet-control-zoom a:focus-visible { outline: 3px solid var(--b-vert); outline-offset: -3px; }

/* Le bouton qui ouvre et ferme le menu : un rond d'encre, la croix verte, un liseré clair. */
.carte-b #toggleControlsButton { width: 44px; height: 44px; box-shadow: 0 6px 18px rgba(10, 22, 24, .3), inset 0 0 0 2px rgba(244, 246, 242, .14); transition: transform .15s; }
.carte-b #toggleControlsButton:hover { transform: scale(1.06); }

/* Le logo : une carte blanche arrondie. */
.carte-b .logo-control { padding: 8px 10px 7px; border-radius: 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--b-filet, #dce4e1); box-shadow: 0 6px 20px rgba(27, 47, 50, .12); }
.carte-b .logo-control .logo-attribution { margin-top: 2px; font: italic 600 12px var(--b-texte); letter-spacing: .02em; color: #4e5f61; text-align: center; }

/* L'opacité du calque : une carte blanche, son titre en petites capitales vertes, une glissière fine,
   détachée du logo. */
@media (min-width: 769px) { .carte-b #opacityContainer { left: 148px; } }
.carte-b #opacityContainer { padding: 12px 18px 8px; background: rgba(255, 255, 255, .96); border: 1px solid var(--b-filet, #dce4e1); box-shadow: 0 6px 20px rgba(27, 47, 50, .12); }
.carte-b #opacityContainer p { margin: 0 0 12px; font: 700 11.5px var(--b-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--b-vert-fonce); }
.carte-b #opacityContainer .noUi-target { height: 6px; border: 0; border-radius: 999px; background: #dce4e1; box-shadow: none; }
.carte-b #opacityContainer .noUi-connects { border-radius: 999px; }
.carte-b #opacityContainer .noUi-handle {
  top: -8px; right: -11px; width: 22px; height: 22px; border: 3px solid #ffffff; border-radius: 50%;
  background: var(--b-encre); box-shadow: 0 0 0 2px var(--b-vert), 0 3px 8px rgba(10, 22, 24, .3); cursor: grab;
}
.carte-b #opacityContainer .noUi-handle::before, .carte-b #opacityContainer .noUi-handle::after { display: none; }
.carte-b #opacityContainer .noUi-handle:focus-visible { outline: 3px solid var(--b-vert); outline-offset: 3px; }
.carte-b #opacityContainer .noUi-marker { background: #b9c6c4; }
.carte-b #opacityContainer .noUi-marker-large { background: #8a9799; }
.carte-b #opacityContainer .noUi-value { font: 600 10.5px var(--b-texte); color: #4e5f61; }

/* Les mentions de la carte : discrètes, arrondies. */
.carte-b .leaflet-control-attribution { padding: 2px 10px; border-radius: 10px 0 0 0; background: rgba(255, 255, 255, .85); font: 11px var(--b-texte); color: #4e5f61; }
.carte-b .leaflet-control-attribution a { color: #4f6b22; }

/* Le Climat comme AgroClimat (12 novembre 2026, le client : « des tabs qu'on comprenne ») : les thèmes en
   onglets à pictogramme (classes tl-agro-onglet). Le choix de la zone est EN HAUT À DROITE, à la place du
   badge, au-dessus des onglets (« le bloc répété sous chaque onglet laisse croire que rien ne change ») :
   un sélecteur à trois positions ; la source de la zone en petit sous le titre. */
.tl-climat-tete { flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.tl-climat-tete h2 { margin-right: auto; }
.tl-vue-choix { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
.tl-vue-choix-titre { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--agro-vert-fonce); }
.tl-vue-puces { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid var(--agro-filet); border-radius: 999px; background: var(--agro-lavis); }
.tl-panneau .tl-vue-puce { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 14px 4px 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--tl-encre-2); text-align: left; cursor: pointer; transition: background-color .15s, color .15s; }
.tl-panneau .tl-vue-puce:hover { background: #ffffff; color: var(--agro-encre); }
.tl-panneau .tl-vue-puce:focus-visible { outline: 2px solid var(--agro-vert); outline-offset: 1px; }
.tl-panneau .tl-vue-puce[aria-pressed="true"] { background: var(--agro-encre); color: #ffffff; box-shadow: inset 0 -3px 0 var(--agro-vert); }
.tl-vue-puce svg { flex: none; color: var(--agro-vert-fonce); }
.tl-vue-puce[aria-pressed="true"] svg { color: var(--agro-vert); }
.tl-vue-puce-texte { display: grid; gap: 1px; line-height: 1.1; min-width: 0; }
.tl-vue-puce-texte b { font-size: 14px; font-weight: 700; }
.tl-vue-puce-texte small { font-size: 11px !important; font-weight: 600 !important; opacity: .8; }
.tl-climat-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: -6px 0 2px; }
.tl-climat-source .tl-sous { font-size: 13px; color: var(--tl-encre-3); }
.tl-climat .tl-agro-onglets { margin-top: 2px; }
/* Sur un écran étroit : le sélecteur sous le titre, sur toute la largeur, trois positions égales, sans pictogramme. */
@container (max-width: 700px) {
  .tl-vue-choix { width: 100%; justify-content: flex-start; }
  .tl-vue-puces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 16px; }
  .tl-panneau .tl-vue-puce { justify-content: center; padding: 5px 4px; border-radius: 13px; text-align: center; }
  .tl-vue-puce svg { display: none; }
  .tl-vue-puce-texte { justify-items: center; }
  .tl-vue-puce-texte b { font-size: 13.5px; overflow-wrap: anywhere; }
  .tl-vue-puce-texte small { font-size: 10.5px !important; }
}

/* ==========================================================================
   Le méga-menu des rubriques (12 novembre 2026, demande du client ; panneau.js) : l'onglet et sa flèche
   forment une seule pilule ; au survol ou d'un clic sur la flèche, une grande carte blanche s'ouvre sous
   l'en-tête avec les thèmes de la rubrique (pictogramme, nom, ce qu'ils montrent).
   ========================================================================== */
.tl-rub-groupe { display: inline-flex; align-items: stretch; flex: none; border: 1.5px solid rgba(244, 246, 242, .38); border-radius: 999px;
  transition: background-color .15s, border-color .15s; }
.tl-rub-groupe .tl-rubrique { border: 0 !important; padding-right: 8px; }
.tl-rub-groupe:hover, .tl-rub-groupe.tl-mega-ouvert { background: rgba(244, 246, 242, .12); border-color: rgba(244, 246, 242, .75); }
.tl-rub-groupe .tl-rubrique:hover { background: transparent; }
.tl-rub-groupe:has(.tl-rubrique[aria-selected="true"]) { background: var(--ac-vert); border-color: var(--ac-vert); }
.tl-panneau .tl-rub-fleche { display: grid; place-items: center; width: 30px; margin: 0; padding: 0 6px 0 0; border: 0; border-radius: 0 999px 999px 0;
  background: transparent; color: #f4f6f2; cursor: pointer; }
.tl-rub-fleche svg { transition: transform .18s; }
.tl-rub-groupe:has(.tl-rubrique[aria-selected="true"]) .tl-rub-fleche { color: var(--ac-encre); }
.tl-rub-fleche[aria-expanded="true"] svg { transform: rotate(180deg); }
.tl-rub-fleche:focus-visible { outline: 2px solid #f4f6f2; outline-offset: -3px; }

.tl-integre .tl-barre { position: relative; }
.tl-mega {
  position: absolute; z-index: 30; top: calc(100% - 10px); left: 50%; transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px)); max-height: min(72vh, 620px); overflow-y: auto; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 18px 26px; padding: 22px 24px;
  background: #ffffff; color: var(--ac-encre); border-radius: 20px; border: 1px solid #dce4e1;
  box-shadow: 0 24px 60px rgba(10, 22, 24, .28), 0 2px 6px rgba(10, 22, 24, .08);
  animation: tl-mega-entre .18s cubic-bezier(.2, .8, .2, 1) both;
}
.tl-mega[hidden] { display: none; }
@keyframes tl-mega-entre { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .tl-mega { animation: none; } .tl-rub-fleche svg { transition: none; } }
.tl-mega-tete { display: grid; align-content: start; gap: 8px; padding-right: 18px; border-right: 1px solid #dce4e1; }
.tl-mega-titre { margin: 0; font: 800 30px/1 var(--ac-titres, "Big Shoulders Display", sans-serif); text-transform: uppercase; letter-spacing: .01em; color: var(--ac-encre); }
.tl-mega-titre::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--ac-vert); }
.tl-mega-intro { margin: 0; font-size: 14px; line-height: 1.45; color: #4e5f61; }
.tl-mega-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; min-width: 0; }
.tl-panneau .tl-mega-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px; border: 1px solid transparent;
  border-radius: 14px; background: transparent; color: var(--ac-encre); text-align: left; cursor: pointer; transition: background-color .12s, border-color .12s; }
.tl-panneau .tl-mega-item:hover { background: #f3f5f0; border-color: #dce4e1; }
.tl-panneau .tl-mega-item:focus-visible { outline: 2px solid var(--ac-vert); outline-offset: 0; }
.tl-mega-item[aria-current="true"] { background: #f3f5f0; border-color: var(--ac-vert) !important; box-shadow: inset 3px 0 0 var(--ac-vert); }
.tl-mega-picto { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e4ead6; color: var(--ac-vert-fonce); }
.tl-mega-item[aria-current="true"] .tl-mega-picto { background: var(--ac-encre); color: var(--ac-vert); }
.tl-mega-texte { display: grid; gap: 3px; min-width: 0; }
.tl-mega-texte b { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.2; }
.tl-mega-texte small { font-size: 12.5px; line-height: 1.4; color: #4e5f61; }
.tl-mega-a-venir .tl-mega-picto { background: #f0f2ee; color: #8a9799; }
.tl-mega-a-venir .tl-mega-texte b { color: #4e5f61; }
.tl-mega-bientot { padding: 1px 7px 0; border-radius: 999px; background: #f3f5f0; border: 1px solid #dce4e1; font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #6b7a7c; }
@container (max-width: 700px) {
  .tl-mega { grid-template-columns: 1fr; width: calc(100% - 20px); padding: 16px; gap: 12px; top: calc(100% - 6px); }
  .tl-mega-tete { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid #dce4e1; }
  .tl-mega-titre { font-size: 24px; }
  .tl-mega-grille { grid-template-columns: 1fr; }
  .tl-panneau .tl-mega-item { padding: 9px 10px; }
  .tl-mega-picto { width: 34px; height: 34px; border-radius: 10px; }
}

/* La fiche du bas, sur écran tactile (12 novembre 2026, tableau-lieu/assets/js/carte.js) : la valeur du point
   touché et le bouton qui ouvre le tableau de bord, posés au-dessus de la carte, hors d'elle. */
.tl-fiche-bas {
  /* Au-dessus de la bannière des cookies (z-index 10400) : tant qu'elle n'est pas acceptée, elle cachait la fiche
     sur téléphone (12 novembre 2026, « en mobile, la pop-up ne s'affiche toujours pas »). */
  position: fixed; z-index: 10450; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 8px; padding: 16px 18px 14px; box-sizing: border-box; max-width: 520px; margin: 0 auto;
  background: #ffffff; color: #1b2f32; border-radius: 22px; border: 1px solid #dce4e1;
  box-shadow: 0 -6px 30px rgba(10, 22, 24, .22), 0 2px 6px rgba(10, 22, 24, .08);
  font: 15px/1.4 "Josefin Sans", system-ui, -apple-system, sans-serif;
  animation: tl-fiche-monte .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes tl-fiche-monte { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .tl-fiche-bas { animation: none; } }
.tl-fiche-bas .tl-fiche-fermer { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: #f3f5f0; color: #1b2f32; cursor: pointer; }
.tl-fiche-infos { display: grid; gap: 8px; }
.tl-fiche-infos:empty { display: none; }
.tl-fiche-nom { margin: 0 44px 0 0; font: 800 17px/1.05 "Big Shoulders Display", "Arial Narrow", sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.tl-fiche-valeur { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #f3f5f0; }
.tl-fiche-pastille { flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(27, 47, 50, .25); }
.tl-fiche-nombre { font: 800 30px/1 "Big Shoulders Display", "Arial Narrow", sans-serif; font-variant-numeric: tabular-nums; }
.tl-fiche-nombre small { margin-left: 3px; font: 600 14px "Josefin Sans", sans-serif; color: #4e5f61; }
.tl-fiche-niveau { margin-left: auto; padding: 3px 11px 2px; border-radius: 999px; background: #1b2f32; color: #ffffff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.tl-fiche-coords { margin: 0; font-size: 12.5px; color: #4e5f61; font-variant-numeric: tabular-nums; }
.tl-fiche-bas .tl-fiche-ouvrir { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; margin-top: 2px; padding: 0 18px;
  border: 0; border-radius: 999px; background: #1b2f32; color: #ffffff; font: 700 16px "Josefin Sans", system-ui, sans-serif; cursor: pointer;
  box-shadow: inset 0 -3px 0 #83a843; }
.tl-fiche-ouvrir svg { flex: none; color: #83a843; }
.tl-fiche-sous { margin: 0; text-align: center; font-size: 12.5px; color: #4e5f61; }
/* Le temps de la fiche, l'encadré du haut se cache : la fiche dit déjà la valeur. */
body.tl-fiche-ouverte .leaflet-control.info { display: none; }

/* Le menu de gauche quand le texte est agrandi (réglage « grands caractères » d'un téléphone, 12 novembre 2026 :
   « superposition et passage à la ligne ») : le titre d'une étape et son compteur passent sur deux lignes au
   lieu de se chevaucher ; les tuiles des domaines se font moins nombreuses par rangée (largeur minimale en rem,
   qui grandit avec le texte) au lieu de couper les mots ; un mot trop long se coupe à une vraie césure. */
.carte-b .sidebar .bloc-titre { flex-wrap: wrap; row-gap: 2px; }
.carte-b .sidebar .bloc-titre .etape { white-space: normal !important; flex: 1 1 auto; }
.carte-b .sidebar .bloc-compteur { margin-left: auto; }
.carte-b .sidebar .domaines { grid-template-columns: repeat(auto-fill, minmax(4.1rem, 1fr)); }
.carte-b .sidebar .dom-libelle { overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }

/* ==========================================================================
   Hors de France : pas de tableau de bord (retour du client du 12 novembre 2026)
   Un message posé à l'endroit du clic (carte.js, horsZone), et sur téléphone
   une phrase à la place du bouton de la fiche du bas.
   ========================================================================== */
.tl-hors-zone {
  position: absolute; z-index: 1000; max-width: 15rem;
  transform: translate(-50%, calc(-100% - 12px));
  padding: .55rem .8rem; border-radius: 12px;
  background: #1b2f32; color: #f4f6f2;
  font: 600 .82rem/1.35 'Josefin Sans', system-ui, sans-serif; text-align: center;
  box-shadow: 0 8px 22px rgba(27, 47, 50, .28);
  pointer-events: none; animation: tl-hors-entre .18s ease-out;
}
.tl-hors-zone::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px;
  background: #1b2f32; transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}
.tl-hors-zone-sort { opacity: 0; transition: opacity .3s; }
@keyframes tl-hors-entre { from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)); } }
@media (prefers-reduced-motion: reduce) { .tl-hors-zone { animation: none; } }
.tl-fiche-hors {
  margin: .4rem 0 0; padding: .7rem .85rem; border-radius: 12px;
  background: #f3f5f0; color: #1b2f32; font: 600 .9rem/1.4 'Josefin Sans', system-ui, sans-serif;
}

/* La bulle de la recherche de ville : le nom, puis « Ouvrir le tableau de bord du lieu » (carte.js). */
.tl-recherche-bulle { display: grid; gap: 8px; max-width: 240px; }
.tl-recherche-nom { margin: 0; font-size: 12.5px; line-height: 1.35; color: #4e5f61; }
.tl-recherche-ouvrir {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: #1b2f32; color: #ffffff; font: 600 13px/1.2 'Josefin Sans', system-ui, sans-serif;
  box-shadow: inset 0 -2px 0 #83a843;
}
.tl-recherche-ouvrir:hover { background: #24403f; }
.tl-recherche-ouvrir:focus-visible { outline: 2px solid #83a843; outline-offset: 2px; }
.tl-recherche-ouvrir svg { stroke: #83a843; }


/* ==========================================================================
   LA CARTE SUR TÉLÉPHONE (retour du client du 12 novembre 2026 : « sur mon
   téléphone ça ne rend pas bien, ça n'est pas adapté »). Mesuré sur 390 px :
   les cartouches prenaient près d'un tiers de l'écran (légende 270 × 186,
   logo, mentions sur deux lignes, barre d'opacité ; en haut, menu, recherche et
   zoom empilés). Ici :
     - menu et recherche sur la même ligne ; pas de boutons de zoom au doigt
       (on zoome en pinçant) ;
     - la légende REPLIÉE : son titre sur une ligne et une bande de couleurs ;
       un toucher la déplie (carte.js, classe tl-legende-ouverte sur body) ;
     - logo, mentions et barre d'opacité resserrés.
   ========================================================================== */
@media (max-width: 768px) {
  /* En haut : la recherche à droite du bouton du menu, sur la même ligne. */
  .carte-b .leaflet-left { padding-top: 0 !important; }
  .carte-b .leaflet-top.leaflet-left .search-control {
    margin: 10px 0 0 62px; width: calc(100vw - 72px); box-sizing: border-box; padding: 3px;
  }
  .carte-b .search-control .city-search { height: 36px; font-size: 15px; }
  .carte-b .search-control .submit-search { width: 36px; height: 36px; }
  .carte-b .leaflet-control-zoom { top: 68px; }

  /* En bas, de bas en haut (demande du client du 12 novembre 2026, au soir) : la légende tout en bas, sur
     toute la largeur ; la barre d'opacité juste au-dessus ; puis le logo et les mentions. La hauteur de la
     légende (--tl-legende-h, posée par carte.js) fait monter le reste quand on la déplie. */
  .carte-b #opacityContainer {
    left: 8px; right: 8px; bottom: calc(14px + var(--tl-legende-h, 46px) + env(safe-area-inset-bottom, 0px));
    padding: 5px 14px; gap: 12px; border-radius: 14px;
  }
  .carte-b #opacityContainer p { margin: 0; font-size: 9.5px; letter-spacing: .08em; }
  .carte-b .leaflet-bottom,
  .carte-b .leaflet-bottom.leaflet-left { bottom: calc(44px + var(--tl-legende-h, 46px) + env(safe-area-inset-bottom, 0px)); }
  /* Les mentions, en petit, à droite du logo. */
  .carte-b .leaflet-control-attribution {
    max-width: calc(100vw - 112px); margin: 0 8px 4px 0 !important; padding: 1px 8px; font-size: 9px; line-height: 13px;
    text-align: right; border-radius: 8px;
  }
  /* Le logo, plus petit. */
  .carte-b .logo-control { margin-left: 8px !important; margin-bottom: 6px !important; padding: 4px 7px 3px; border-radius: 12px; }
  .carte-b .logo-control img { width: 52px; }
  .carte-b .logo-control .logo-attribution { font-size: 8.5px; margin-top: 0; }

  /* La légende, repliée : le titre sur une ligne, puis une bande de couleurs. */
  .carte-b .leaflet-bottom.leaflet-right .legend {
    position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 900;
    display: flex; flex-wrap: wrap; align-items: center;
    max-width: none; max-height: none; overflow: visible;
    margin: 0 !important; padding: 7px 30px 8px 11px; border-radius: 14px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .carte-b .leaflet-bottom.leaflet-right .legend h4 {
    flex: 0 0 100%; margin: 0 0 6px; font-size: .78rem; line-height: 1.15;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Une base non nulle : à 0, les paliers tenaient sur la ligne du titre, sans largeur. */
  .carte-b .leaflet-bottom.leaflet-right .legend .legend-item { flex: 1 0 14px; display: block; margin: 0; min-width: 0; }
  .carte-b .leaflet-bottom.leaflet-right .legend .legend-item span { display: none; }
  .carte-b .leaflet-bottom.leaflet-right .legend .legend-color { width: 100%; height: 9px; margin: 0; border-radius: 0; opacity: 1; }
  .carte-b .leaflet-bottom.leaflet-right .legend .legend-item:first-of-type .legend-color { border-radius: 5px 0 0 5px; }
  .carte-b .leaflet-bottom.leaflet-right .legend .legend-item:last-of-type .legend-color { border-radius: 0 5px 5px 0; }
  /* Échelle continue (dégradé) : la bande seule ; les graduations quand elle est dépliée. */
  .carte-b .leaflet-bottom.leaflet-right .legend > div[style*="linear-gradient"] { flex: 0 0 100%; height: 9px !important; border-radius: 5px; }
  .carte-b .leaflet-bottom.leaflet-right .legend > div[style*="position:relative"] { display: none; }
  /* Le chevron : vers le haut tant qu'elle est repliée (elle s'ouvre vers le haut). */
  .carte-b .leaflet-bottom.leaflet-right .legend::after {
    content: ''; position: absolute; right: 12px; top: 12px; width: 7px; height: 7px;
    border-right: 2px solid var(--b-vert-fonce, #4f6b22); border-bottom: 2px solid var(--b-vert-fonce, #4f6b22);
    transform: rotate(-135deg); transition: transform .15s;
  }

  /* Dépliée : chaque palier sur sa ligne, avec son libellé. */
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend { display: block; max-height: 46vh; overflow-y: auto; padding-bottom: 9px; }
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend h4 { white-space: normal; margin-bottom: 8px; }
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend .legend-item { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend .legend-item span { display: inline; font-size: 11.5px; line-height: 1.3; }
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend .legend-color { flex: none; width: 14px; height: 14px; border-radius: 3px; }
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend > div[style*="position:relative"] { display: block; }
  body.tl-legende-ouverte.carte-b .leaflet-bottom.leaflet-right .legend::after { transform: rotate(45deg); top: 10px; }
}
/* Au doigt, pas de boutons de zoom : on pince. */
@media (max-width: 768px) and (pointer: coarse) {
  .carte-b .leaflet-control-zoom { display: none; }
}

/* Sur téléphone, le nom du lieu EN ENTIER (demande du client du 12 novembre 2026 : « ORADOUR… », « HAUTE-VIENN… »
   coupés). Les boutons (retour, langue, enregistrer, partager, fermer) gardent la première ligne ; le lieu et son
   département passent dessous, sur toute la largeur, et vont à la ligne s'il le faut. */
@media (max-width: 560px) {
  .tl-barre-lieu { flex-wrap: wrap; row-gap: 6px; }
  .tl-barre-lieu > .tl-actions-haut { margin-left: auto; }
  .tl-barre-lieu > .tl-lieu { order: 3; flex: 1 0 100%; min-width: 0; }
  .tl-barre-lieu h1 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; font-size: 30px; line-height: 1; }
  .tl-barre-lieu .tl-lieu-sous { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* Sur téléphone, l'en-tête du tableau du lieu (lieu, boutons, onglets) n'est plus collé en haut : il défile avec
   le contenu et laisse tout l'écran aux graphiques (demande du client du 12 novembre 2026). Relatif et non
   statique : le méga-menu s'y accroche. */
@media (max-width: 768px) {
  .tl-panneau .tl-barre { position: relative; }
  .tl-panneau [id^="tl-h-"] { scroll-margin-top: 12px; }
}