/* Mer de nuages — mise en page de l'application.
   Couleurs, typographie, espaces : uniquement des tokens (ds/tokens.css) ;
   composants génériques : ds/components.css. Ici, seulement ce qui est propre à la page. */

html, body { height: 100%; overflow: hidden; }
body { background: var(--scene-ciel-milieu); }
.app { display: flex; height: 100%; }

.lien-evitement {
  position: absolute; left: var(--space-3); top: -60px; z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--text-on-accent); font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { top: var(--space-3); }

/* ================================================================ scène 3D */
#scene {
  position: relative; flex: 1; min-width: 0; height: 100%;
  background: linear-gradient(var(--scene-ciel-haut) 0%, var(--scene-ciel-milieu) 55%, var(--scene-ciel-bas) 100%);
}
#scene canvas { display: block; outline: none; }
#scene canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--focus-ring); }
#labels { position: absolute; inset: 0; z-index: 0;   /* contexte propre : les z-index des étiquettes ne dépassent pas */ pointer-events: none; overflow: hidden; }

/* chargement / erreur */
.chargement {
  position: absolute; inset: 0; z-index: var(--z-overlay); display: grid; place-content: center; justify-items: center;
  gap: var(--space-3); padding: var(--space-6); text-align: center; color: var(--scene-texte);
  text-shadow: 0 1px 3px rgb(0 0 0 / .35);
}
.chargement-logo { width: 88px; height: 88px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .3)); }
/* le logo (web/favicon.svg) animé : les nappes dérivent, la falaise sud s'allume */
.chargement-logo .ciel-haut { stop-color: var(--ciel-900); }
.chargement-logo .ciel-milieu { stop-color: var(--ciel-500); }
.chargement-logo .ciel-bas { stop-color: var(--soleil-300); }
.chargement-logo .dent { fill: var(--ardoise-900); }
.chargement-logo .falaise { fill: var(--soleil-400); animation: lueur 2.6s ease-in-out infinite alternate; }
.chargement-logo .nappe-1 { fill: var(--soleil-100); }
.chargement-logo .nappe-2 { fill: var(--ardoise-0); }
.chargement-logo .nappe { animation: derive 3.2s var(--ease-in-out) infinite alternate; }
.chargement-logo .nappe-2 { animation-duration: 4.1s; animation-direction: alternate-reverse; }
@keyframes derive { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes lueur { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chargement-logo .nappe, .chargement-logo .falaise { animation: none; } }
.chargement-txt { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); max-width: 30ch; }
.chargement-lent { margin: 0; font-size: var(--text-sm); opacity: .9; }
.chargement[data-erreur] .chargement-logo :is(.nappe, .falaise) { animation: none; }

/* astuce de navigation : s'efface après la première manipulation */
#hint {   /* pastille sombre translucide : lisible sur la forêt comme sur la nappe blanche */
  position: absolute; left: var(--space-3); bottom: var(--space-3); max-width: calc(100% - 76px);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: rgb(15 20 18 / .58);
  backdrop-filter: blur(4px); font-size: var(--text-xs); color: var(--scene-texte);
  transition: opacity var(--dur-slow) var(--ease-out);
}
#hint.vu { opacity: 0; pointer-events: none; }
#hint .tactile { display: none; }
@media (pointer: coarse) { #hint .souris { display: none; } #hint .tactile { display: inline; } }

/* boutons de navigation : boussole (retour au nord) au-dessus du zoom */
#nav { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: var(--z-map-ui);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
#nav .zoom { display: flex; flex-direction: column; gap: var(--space-1); }
#nav .zoom .ds-icon-btn { width: 36px; height: 36px; }
@media (max-width: 800px), (pointer: coarse) { #nav .zoom { display: none; } }

/* résumé flottant (mobile) : la réponse en un coup d'œil, sans faire défiler */
.resume {
  position: absolute; left: var(--space-3); top: calc(var(--space-3) + env(safe-area-inset-top)); z-index: var(--z-map-ui);
  display: none; align-items: center; gap: var(--space-2); max-width: calc(100% - 24px);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-2); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
}
.resume .ds-dot { color: var(--etat, var(--text-muted)); }
.resume svg { width: 18px; height: 18px; color: var(--text-muted); }
.resume[data-etat="mer"] { --etat: var(--etat-mer); }
.resume[data-etat="alerte"] { --etat: var(--etat-alerte); }
.resume[data-etat="absente"] { --etat: var(--etat-absente); }
.resume[data-etat="prevision"] { --etat: var(--etat-prevision); }

/* ================================================================ étiquettes de la carte */
.lbl {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap;
  font-size: var(--text-xs); font-weight: 500; line-height: 1.2; padding: 2px 7px; border-radius: var(--radius-xs);
  background: var(--map-label-bg); color: var(--map-label-fg); box-shadow: 0 1px 3px rgb(0 0 0 / .2);
}
.lbl::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 1px; height: 6px; background: var(--map-label-bg); }
.lbl small { color: var(--map-label-sub); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.lbl.dessous { background: var(--map-label-dessous-bg); color: var(--map-label-dessous-fg); }
.lbl.dessous small { color: var(--map-label-dessous-fg); }
.lbl.dessous::after { background: var(--map-label-dessous-bg); }
.lbl.dessus { background: var(--map-label-dessus-bg); color: var(--map-label-dessus-fg); }
.lbl.dessus small { color: var(--map-label-dessus-sub); }
.lbl.dessus::after { background: var(--map-label-dessus-bg); }
.lbl.r2.dessus { background: var(--map-label-dessus-bg); }
.lbl.bord { background: var(--map-label-bord-bg); }
.lbl.bord::after { background: var(--map-label-bord-bg); }
.lbl:not(.cam) { z-index: var(--z-labels); }   /* les noms passent devant les pastilles de webcam */
.lbl.dessus:not(.cam) { z-index: 3; }           /* … et les lieux au soleil devant tout le reste */
.lbl.r2 { font-size: var(--text-2xs); padding: 1px 5px; background: var(--map-label-bg-r2); }
.lbl.r2.dessous { background: var(--map-label-dessous-bg); }
.lbl.col { font-style: italic; }
.lbl.cell { background: var(--map-label-mesure-bg); color: var(--ardoise-0); font-weight: 600; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.lbl.cell::after { background: var(--map-label-mesure-bg); }

/* webcams */
.lbl.cam { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; transform: translate(-50%, 3px);
  pointer-events: auto; cursor: pointer; background: var(--map-pin); color: var(--ardoise-0); box-shadow: var(--shadow-map);
  border: 1.5px solid rgb(255 255 255 / .85); }
.lbl.cam svg { width: 14px; height: 14px; }
.lbl.cam::after { display: none; }
/* positions par rapport à la nappe : couleurs des étiquettes ; au soleil, plus grande et liserée d'or */
.lbl.cam.dessus { width: 28px; height: 28px; background: var(--map-pin-dessus); color: var(--map-pin-fg-dessus);
  border: 2px solid var(--map-pin-dessus-lisere); z-index: 2; }
.lbl.cam.dessus svg { width: 16px; height: 16px; }
.lbl.cam.bord { background: var(--map-pin-bord); color: var(--map-pin-fg-clair); border-color: rgb(15 20 18 / .3); }
.lbl.cam.dessous { background: var(--map-pin-dessous); color: var(--map-pin-fg-dessous); border-color: rgb(15 20 18 / .25); }
.lbl.cam:hover, .lbl.cam:focus-visible { outline: 2px solid var(--ardoise-0); outline-offset: 2px; z-index: 2; transform: translate(-50%, 3px) scale(1.12); }
.lbl.cam .nb { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--map-pin-badge); color: var(--ardoise-0); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* ================================================================ panneau */
#panel {
  width: var(--panel-w); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--space-5) var(--space-8); outline: none;
  background: var(--surface-1); color: var(--text-primary); border-left: 1px solid var(--border);
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.entete {
  position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3);
  margin: 0 calc(-1 * var(--space-5)); padding: var(--space-4) var(--space-5) var(--space-3);
  background: color-mix(in srgb, var(--surface-1) 88%, transparent); backdrop-filter: blur(10px);
}
.entete-txt { flex: 1; min-width: 0; }
.entete h1 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1; letter-spacing: -0.01em; }
.sub { margin: 3px 0 0; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub .lieu { color: var(--text-secondary); font-weight: 600; }

.bloc { margin-top: var(--space-6); }
.bloc-replie { margin-top: var(--space-6); }
.bloc-replie + .bloc-replie { margin-top: 0; }

/* ---------------------------------------------------------------- carte d'état « en ce moment » */
.hero { position: relative; overflow: hidden; margin-top: var(--space-1); padding: var(--space-4) var(--space-5) var(--space-4); }
.hero::before {   /* liseré coloré selon l'état */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--etat, var(--border-strong));
}
.hero[data-etat="mer"] { --etat: var(--etat-mer); }
.hero[data-etat="alerte"] { --etat: var(--etat-alerte); }
.hero[data-etat="absente"] { --etat: var(--etat-absente); }
.hero[data-etat="prevision"] { --etat: var(--etat-prevision); }
.hero-statut { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--etat, var(--text-secondary)); }
.hero-value { margin-top: var(--space-2); color: var(--text-primary); white-space: nowrap; }
.hero-value .unit { font-size: var(--text-2xl); font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.hero-value .pm { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 500; color: var(--text-secondary); margin-left: var(--space-3); letter-spacing: 0; }
.hero-titre { margin-top: var(--space-2); }
.hero-conseil {
  display: flex; gap: var(--space-2); align-items: baseline; margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); background: var(--pos-dessus-bg); color: var(--pos-dessus); font-size: var(--text-sm); line-height: var(--leading-snug); box-shadow: inset 0 0 0 1px var(--pos-dessus-contour);
}
.hero-conseil strong { font-weight: 600; }
.hero-detail { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); }
.hero-passe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: 600; }
.hero-air { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-secondary); }

/* ---------------------------------------------------------------- calques */
.calques { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.sous-reglage { margin: 0 0 var(--space-3) 32px; padding: var(--space-1) 0 var(--space-1) var(--space-3); border-left: 2px solid var(--border); }
.sous-reglage.inactif { opacity: .45; }
.reglage-tete { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); color: var(--text-secondary); }
.reglage-tete output { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--text-primary); }
.reglage-pied { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 32px; }
.reglage-pied .ds-note { margin: 0; }
.niveaux-vent { margin-top: var(--space-1); }
.vent-legende { margin-top: var(--space-2); }
.vent-barre { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.vent-barre span { flex: 1; }
.vent-graduations { display: flex; margin-top: 3px; font-size: var(--text-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.vent-graduations span { flex: 1; }
.vent-graduations em { font-style: normal; margin-left: 4px; white-space: nowrap; }

/* ---------------------------------------------------------------- graphique */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .air-defav { fill: var(--chart-air-defav); }
.chart .air-limite { fill: var(--chart-air-limite); }
.chart .axis text { font-family: var(--font-sans); font-size: 10.5px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .now line { stroke: var(--text-muted); stroke-dasharray: 3 3; }
.chart .arome-sans { stroke: var(--series-arome); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; stroke-linejoin: round; }
.chart .arome-repere { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; fill: var(--series-arome); paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; }
.chart .fin-prev line { stroke: var(--chart-grid); stroke-dasharray: 1 3; }
.chart .fin-prev text { font-family: var(--font-sans); font-size: 10.5px; fill: var(--text-muted); }
.chart .now text { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; fill: var(--text-secondary); }

#tooltip > div:first-child { white-space: nowrap; font-weight: 600; margin-bottom: 2px; }
#tooltip strong { font-variant-numeric: tabular-nums; }
#tooltip .tt-row { display: flex; align-items: baseline; gap: 6px; }
#tooltip .tt-row strong { white-space: nowrap; }
#tooltip .tt-row span:last-child { color: var(--text-secondary); }
#tooltip .sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; align-self: center; }

/* ---------------------------------------------------------------- listes sommets / webcams */
/* lignes en grille : nom | altitude (alignée à droite) | pastille de largeur fixe, pour que les altitudes et les
   pastilles restent en colonnes quel que soit le libellé */
.peaks > li { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--puce-position-w); column-gap: var(--space-3); }
.peaks > li:not(:has(.ds-chip)) { grid-template-columns: minmax(0, 1fr) auto; }
.peaks .alt { justify-self: end; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.peaks .nom, .peaks .lien-cam { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; max-width: 100%; }
.peaks .ds-chip { width: var(--puce-position-w); justify-content: center; }
.lien-cam { font: inherit; color: var(--text-primary); background: none; border: 0; padding: var(--space-1) 0; text-align: left; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lien-cam:hover { text-decoration-color: currentColor; color: var(--accent); }

/* ---------------------------------------------------------------- historique */
.analyses-defil { max-height: 340px; overflow-y: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
.analyses .nd { color: var(--text-muted); }
.about .ds-prose { padding-top: var(--space-1); }

.pied { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.pied p { margin: 0 0 var(--space-2); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-muted); }

/* ---------------------------------------------------------------- fenêtre webcam */
.cam-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.cam-tete h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15; }
.cam-tete p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
#cam-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); margin-top: var(--space-3); background: var(--surface-3); }
.cam-pied { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.cam-groupe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cam-groupe button { min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill); cursor: pointer; font-size: var(--text-xs);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-primary); }
.cam-groupe button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); font-weight: 600; }

/* ================================================================ mobile */
/* ================================================================ calques de la carte
   Bouton rond en haut à droite de la carte ; panneau non modal, ancré sous le bouton (ordinateur) ou en bas
   de l'écran (téléphone). La carte reste visible : chaque réglage s'applique en direct. */
#btn-calques.actif { background: var(--accent); color: var(--text-on-accent); }
.calques-panneau {
  /* à gauche de la colonne de boutons (calques, boussole, zoom), aligné en bas */
  position: fixed; z-index: var(--z-calques); bottom: var(--space-3); right: calc(var(--panel-w) + var(--space-3) + 40px + var(--space-3));
  width: 360px; max-height: calc(100dvh - 140px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-3) var(--space-4) var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-3); border: 1px solid var(--border);
  animation: calques-entree var(--dur-base) var(--ease-out);
}
@keyframes calques-entree { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.calques-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.calques-tete .ds-title { font-size: var(--text-xl); }
.calques-tete .ds-icon-btn { width: 36px; height: 36px; }
.calques-panneau .calques { background: var(--surface-2); }

/* voile qui assombrit la carte quand la feuille la recouvre (téléphone) */
.voile { display: none; }
.poignee { display: none; }

/* ================================================================ mobile : bottom sheet (feuille.js) */
@media (max-width: 800px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .app { display: block; height: 100%; }
  #scene { position: fixed; inset: 0; height: 100dvh; will-change: transform; }
  .voile { display: block; position: absolute; inset: 0; z-index: var(--z-map-ui); background: var(--ardoise-950); opacity: 0; pointer-events: none; }
  #panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-feuille); width: 100%; height: calc(100dvh - 56px);
    overflow: hidden; overscroll-behavior: contain; touch-action: none; will-change: transform;
    transform: translateY(45dvh);   /* avant feuille.js : à mi-hauteur */
    border-left: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 0 var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 24px rgb(0 0 0 / .22);
  }
  #panel.feuille-pleine { overflow-y: auto; touch-action: pan-y; }
  .feuille-anime { transition: transform var(--dur-slow) var(--ease-out), bottom var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
  .voile.feuille-anime, #scene.feuille-anime .voile { transition: opacity var(--dur-slow) var(--ease-out); }
  .entete { margin: 0 calc(-1 * var(--space-4)); padding: var(--space-5) var(--space-4) var(--space-3);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; cursor: grab; touch-action: none; user-select: none; }
  .entete:active { cursor: grabbing; }
  .poignee { display: block; position: absolute; left: 50%; top: 0; width: 72px; height: 22px; margin-left: -36px; padding: 0;
    border: 0; background: none; cursor: pointer; border-radius: var(--radius-pill); -webkit-tap-highlight-color: transparent; }
  .poignee::before { content: ""; position: absolute; left: 18px; right: 18px; top: 8px; height: 4px; border-radius: 2px; background: var(--border-strong); }
  .poignee:focus-visible { outline-offset: -2px; }
  .resume:not([hidden]) { display: inline-flex; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
  .resume.feuille-cache, .feuille-cache { opacity: 0; pointer-events: none; }
  .resume.feuille-cache { transform: translateY(-8px); }
  #hint, #nav { transition: opacity var(--dur-base) var(--ease-out); }
  .ds-display { font-size: 54px; }
  /* sur téléphone : la réponse d'abord (état, graphique, sommets), puis le reste */
  #panel { display: flex; flex-direction: column; }
  #panel > * { flex-shrink: 0; }   /* hauteur fixe : sans cela, la carte d'état serait écrasée */
  .bloc-graphique { order: 1; } .bloc-sommets { order: 2; }
  #webcams-section { order: 4; } .bloc-replie { order: 5; } .bloc-replie + .bloc-replie { order: 6; } .pied { order: 7; }
  /* calques : feuille secondaire en bas de l'écran, la carte reste visible au-dessus */
  .calques-panneau { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 62dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border: 0; padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); animation-name: calques-montee; }
  @keyframes calques-montee { from { transform: translateY(40px); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .calques-panneau { animation: none; } }
}

/* ---------------------------------------------------------- langue (FR / EN) */
.lien-langue {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: .04em;
  text-decoration: none;
}
.suggestion-langue:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--accent-soft); font-size: var(--text-xs); color: var(--text-secondary);
}
.suggestion-langue a { color: var(--accent); font-weight: 600; }
.suggestion-langue .ds-btn--text { margin-left: auto; }