:root {
  color-scheme: dark;
  /* OLED palette — one accent, high contrast. */
  --waf-bg: #000;
  --waf-panel: #0a0a0b;
  --waf-panel2: #101012;
  --waf-line: #222226;
  --waf-line2: #34343a;
  /* Type hierarchy colours. */
  --waf-hi: #ffffff;     /* titles, primary text */
  --waf-desc: #c9c9d1;   /* descriptions — light grey, well legible */
  --waf-mid: #8e8e96;    /* secondary UI text */
  --waf-low: #5c5c64;    /* recessed technical data (mono) */
  --waf-orange: #f59e0b;
  --waf-orange-h: #ffb938;
  /* Soft-rounded corners (revised 2026-06-03 — Toutou heritage, no longer flat). */
  --waf-r: 8px;          /* panels, buttons */
  --waf-r-sm: 5px;       /* chips, comment bubbles, badges */
  --waf-r-lg: 16px;      /* big cards, the WeTransfer dropzone */
  /* Subtle glow. On OLED black a dark shadow reads as depth; a faint orange halo
     reads as "glow". Keep alphas low — discreet, never neon. */
  --waf-glow: 0 10px 40px rgba(0,0,0,0.6);
  --waf-glow-accent: 0 0 26px rgba(245,158,11,0.10);
  /* Piles SYSTÈME d'abord servies localement. Le @import Google Fonts a été
     RETIRÉ (DA 2026-08) : c'était la seule requête sortante d'une page WAF, et
     elle bloquait le rendu de CHAQUE surface (3 aller-retours cross-origin :
     la feuille + deux .woff2). « La vitesse est la marque » — Inter et
     JetBrains Mono restent en tête de pile pour ceux qui les ont installées,
     sinon on tombe sur system-ui / ui-monospace, sans saut de rendu. */
  --waf-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --waf-mono: 'JetBrains Mono', ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ───────────────────────────────────────────────────────────────────────
     DA « Verre nuit » (validée Cédric, 2026-08-05 — mètre-étalon :
     orchestration/da-lab/landing/hybride.html). Vocabulaire PARTAGÉ par
     toutes les surfaces ; le contrat d'usage est décrit dans
     orchestration/outbox/da-socle-api.md.

     Ces tokens s'AJOUTENT aux --waf-bg/--waf-panel/… historiques, ils ne les
     remplacent pas : une surface bascule en DA quand elle le décide (le
     socle ne peut pas repeindre le widget Miro par surprise).
     ─────────────────────────────────────────────────────────────────────── */
  /* Le sol : nuit bleutée unie. AUCUNE texture, AUCUNE photo — la « lave » a
     été rejetée en revue (« Restons KISS, sobre et élégant »). La matière
     vient du verre et de la lumière. */
  --waf-night: #0b0e13;
  --waf-night-2: #0d1119;      /* haut du dégradé de page */
  --waf-night-deep: #07090d;   /* bas du dégradé de page */
  /* Verre : opaque par défaut, translucide seulement si backdrop-filter existe
     (voir .waf-glass dans le shell — @supports, jamais de coût imposé). */
  --waf-glass: #10141c;
  --waf-glass-blur: rgba(17,22,31,0.52);
  /* Hairlines — des filets de lumière, pas des bordures. */
  --waf-hair: rgba(255,255,255,0.08);
  --waf-hair-soft: rgba(255,255,255,0.05);
  /* Encre (3 niveaux, nuit) — l'équivalent DA de hi/desc/mid/low.
     ink-3 tient AA sur le pire fond réel : ne pas le rabaisser (docblock). */
  --waf-ink: #f4f6fa;
  --waf-ink-2: #a6adbb;
  --waf-ink-3: #7f8899;
  /* Lumière ambre — même accent #f59e0b, décliné. */
  --waf-amber: #f59e0b;
  --waf-amber-hi: #ffb938;
  --waf-amber-deep: #c47607;
  --waf-amber-ink: #221503;    /* texte SUR aplat ambre (contraste AA) */
  /* L'ambre qui ÉCRIT (timecodes, chiffres, liens, badges), par opposition à
     celui qui REMPLIT. Sur la nuit c'est le même ; sur un sol clair l'ambre de
     marque tombe à 2,15:1 en texte, et seul ce jeton-là s'assombrit. Deux
     métiers, deux noms : c'est ce qui permet à l'apparence de basculer sans
     qu'aucune règle du produit n'ait à savoir laquelle est servie. */
  --waf-amber-txt: #f59e0b;
  /* ── LE CREUX : LE FOND D'UN CHAMP, ET CELUI D'UN CHAMP FIGÉ ─────────────
     Le socle nommait l'encre, le verre, le filet, les voiles — jamais le
     CREUX : le fond d'une zone de saisie, d'une infobulle, de la plaque qui
     apparaît sous un crayon au survol, de la ligne du lien fraîchement déposé.
     Faute de nom, ces surfaces se sont écrites en dur au temps où la nuit était
     le seul régime, et elles y sont RESTÉES quand l'apparence a basculé — avec,
     par-dessus, une encre devenue sombre : de l'encre presque noire sur du
     noir. Deux noms suffisent, un par état : le creux vif et le creux inerte
     (lecture seule). Leurs valeurs de nuit sont EXACTEMENT les littéraux
     qu'elles remplacent, au canal près, donc le rendu sombre ne bouge pas.
     Le pendant clair est déclaré dans web/apparence.ts. */
  --waf-champ: #000;
  --waf-champ-fige: #060607;
  /* ── LES CANAUX QUI RETOURNENT AVEC L'APPARENCE (web/apparence.ts) ───────
     Un voile de survol s'écrivait blanc, en dur, cent cinquante fois. Sur un
     sol clair un voile blanc ne se voit pas : il DISPARAÎT, ce qui est pire
     qu'une faute visible. Les voiles passent donc tous par ces canaux, dont la
     valeur de nuit est exactement le blanc d'avant. Idem des scrims (fonds
     opaques des barres flottantes), de l'ombre fine qui détache un drapeau de
     repère de l'onde, et des deux opacités de halo du sol. */
  --waf-voile-rgb: 255,255,255;
  --waf-ink-rgb: 244,246,250;
  --waf-fond-rgb: 0,0,0;
  --waf-verre-rgb: 11,14,20;
  --waf-ombre-fine: rgba(3,5,7,.98);
  --waf-scrim: rgba(0,0,0,0.86);
  --waf-scrim-fort: rgba(8,8,10,0.94);
  --waf-scrim-doux: rgba(0,0,0,0.72);
  --waf-halo-a: 0.10;
  --waf-halo-b: 0.055;
  /* ── L'ÉCHELLE DES VOILES, ET CELLE DE LA MISE EN RETRAIT ────────────────
     Un voile de survol s'écrivait « 3 % » en dur, la même proportion pour les
     deux apparences. Sur la nuit, 3 % de blanc ajouté à un sol presque noir se
     voit ; sur le jour, 3 % de noir posé sur une carte BLANCHE ne se voit pas —
     le retour d'interaction disparaissait au moment où l'apparence basculait.
     La proportion appartient donc à l'apparence, comme les canaux du voile, et
     elle porte un nom : UNE échelle pour tout le produit (le survol d'une
     ligne aujourd'hui, la coloration des rangées quand elle viendra s'y
     ranger). Mesuré sur la carte de commentaires en jour : 3 % rend 255 → 248
     (une marche de 2,7 % de canal), 7 % rend 255 → 238 (6,7 %) — la première
     qui se lise sans superposer deux captures. */
  --waf-voile-survol: 0.03;
  /* LA TEINTE D'UNE LIGNE RANGÉE, et ce qu'elle devient au survol.
     Elle appartient à la même famille que le voile de survol ci-dessus, et pour
     la même raison : une proportion de couleur posée sur un sol n'a pas le même
     effet sur la nuit et sur le jour, donc elle appartient à l'apparence.
     Verdict du propriétaire (2026-09-07) : « la coloration des fichiers est
     moche en clair, trop en sombre → SOBRE, moins de dégradé, dans les deux
     apparences ». La valeur de nuit descend donc de 10 % à 6 %, celle du jour
     est posée à 8 % : sur un sol clair, une même proportion de teinte rend une
     marche plus faible (le blanc part de 255 sur les trois canaux, la nuit de
     11 à 19), et les deux se rejoignent à l'œil autour de ces deux chiffres.
     Le survol garde une marche visible au-dessus de la teinte, sans jamais
     redevenir l'aplat que la refonte a retiré. Les quatre valeurs sont
     relevées à la pipette sur le rendu, pas déduites. */
  --waf-teinte: 0.06;
  --waf-teinte-survol: 0.10;
  /* La MISE EN RETRAIT d'une ligne que l'on n'édite pas. Une seule valeur pour
     les deux apparences, et elle ne s'applique qu'au CORPS d'un commentaire :
     une couleur d'auteur ne survit pas à une dilution (une teinte jaune tombe
     sous le seuil dès 80 % sur du blanc, mesuré), l'encre pleine si — 62 % sur
     la carte blanche vaut 5,2:1. */
  --waf-attenue: 0.62;
  /* La seule couleur d'état du produit qui ne soit pas l'ambre : la pastille
     « vidéo » du tableau de bord. */
  --waf-badge-video: #7dd3fc;
  /* Le sarcelle des PROPOSITIONS (rangée vidéo, 2026-09-10) : « je voudrais
     juste changer la couleur pour qu'on voie que ce sont des propositions,
     pas l'orange waf.fm ». Depuis B1 (2026-09-15) il ne peint plus une pilule
     — c'est la feuille de la rangée qui pose la couleur — mais il reste celle
     de la RANGÉE : le survol, le liseré de la pilule qu'on déplace, le résumé
     replié du lecteur Slack.
     L'étoile de référence reste verte, le cœur reste rouge. */
  --waf-proposition: #3fb6b2;
  /* LA COULEUR D'UNE PROPOSITION, en deux moitiés — même partage que la couleur
     d'auteur juste en dessous, et pour la même raison : le DEGRÉ vit dans la
     feuille de la rangée (services/proposition_row.ts, deux valeurs et deux
     seulement depuis le lot C1 — le sarcelle des propositions et le vert de la
     RETENUE), la saturation et la clarté appartiennent à l'APPARENCE et vivent
     ici. Une bascule clair/nuit ne rejoue donc pas une seule ligne de script.
       --waf-pr-aplat     : l'aplat PLEIN de la pilule en écoute, et le cachet
                            du rang sur les autres ;
       --waf-pr-sur-aplat : l'encre POSÉE sur cet aplat ;
       --waf-pr-trait     : le filet d'une pilule au repos.
     C1 (2026-09-15) : la saturation passe de 68 % à 78 % — « une couleur qu'on
     remarque » — et le filet de 0,45 à 0,55 d'alpha, une rangée qu'on doit voir
     sans la chercher. Mesuré sur les DEUX degrés servis (186° et 158°), pas
     estimé : encre sur aplat 9,50 et 10,11 la nuit, aplat sur le sol #0b0e13 et
     sur le verre #10141c de 10,87 à 12,47. Tout au-dessus de AA 4,5, et aucun
     texte n'est jamais posé sur une couleur non mesurée. */
  --waf-pr-aplat: 78%, 60%;
  --waf-pr-sur-aplat: 78%, 9%;
  --waf-pr-trait: 78%, 56%, 0.55;
  /* Le rouge qui ÉCRIT un danger (« supprimer », « refusé », « échec »). Même
     partage des métiers que l'ambre : celui qui remplit un bouton armé reste
     saturé, celui qui écrit un mot suit l'apparence. */
  --waf-danger-txt: #ff9aa2;
  --waf-danger-hi: #ff6b70;
  --waf-danger-rgb: 255,154,162;
  /* LA COULEUR D'AUTEUR, en deux moitiés. La teinte (en degrés) appartient à la
     personne et se calcule dans le navigateur ; la saturation et la clarté
     appartiennent à l'APPARENCE et vivent ici. Le lecteur écrit donc
     hsl(<teinte>, var(--waf-au-solid)) et n'a plus rien à rejouer quand
     l'apparence bascule sous lui. */
  --waf-au-fg: 95%, 78%;
  --waf-au-bg: 90%, 60%, 0.25;
  --waf-au-border: 95%, 70%, 0.85;
  --waf-au-solid: 78%, 68%;
  /* L'ONDE VIDÉO. La portion lue est un dégradé SVG nommé et le repos un aplat
     translucide : ni l'un ni l'autre ne descend d'une couleur de texte, donc
     tous deux ont leur jeton. Valeurs de nuit = l'accent des /share à plat
     (WAF_ORANGE), au mot près — plus le dégradé « verre » qui le ternissait
     (ui_themes.ts, VERRE_GRADIENT, même lot). */
  --waf-onde-1: #f59e0b;
  --waf-onde-2: #f59e0b;
  --waf-onde-3: #f59e0b;
  --waf-onde-repos: #646b7a;
  /* Rayons de la DA (plus généreux que les rayons historiques). */
  --waf-r-glass: 18px;
  --waf-r-drop: 24px;
  --waf-r-ctrl: 11px;
  /* Ombres : profondeur + liseré de lumière en haut du verre. */
  --waf-lift: inset 0 1px 0 rgba(255,255,255,0.06), 0 24px 70px rgba(0,0,0,0.45);
  --waf-lift-hero: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 90px rgba(0,0,0,0.55), 0 0 90px rgba(245,158,11,0.07);
  --waf-halo: 0 0 34px rgba(245,158,11,0.28);
  /* Focus visible — un seul contour dans tout le produit (le shell l'applique
     globalement, les surfaces qui ne consomment pas le shell le posent à la
     main : outline: var(--waf-focus); outline-offset: var(--waf-focus-off)). */
  --waf-focus: 2px solid var(--waf-amber);
  --waf-focus-off: 3px;
  /* Rythme vertical / gouttière de page. */
  --waf-gap: 20px;
  --waf-pad: 28px;
  --waf-col: 1060px;
}

*, *::before, *::after { box-sizing: border-box; }

.waf-title {
  font-family: var(--waf-font);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--waf-hi);
  overflow-wrap: anywhere;
}

.waf-desc {
  font-family: var(--waf-font);
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.4;
  color: var(--waf-desc);
  overflow-wrap: anywhere;
}

/* Recessed technical data: filenames, tokens, timecodes, version timestamps. */
.waf-mono {
  font-family: var(--waf-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: var(--waf-low);
  overflow-wrap: anywhere;
}

.waf-panel {
  background: var(--waf-panel);
  border: 1px solid var(--waf-line);
  border-radius: var(--waf-r);
  box-shadow: var(--waf-glow);
}

/* Opt-in glow utilities — apply to hero elements (wave panel, primary button). */
.waf-glow { box-shadow: var(--waf-glow); }
.waf-glow-accent { box-shadow: var(--waf-glow), var(--waf-glow-accent); }

/* Buttons — square, flat. */
.waf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--waf-font);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 8px 13px;
  border-radius: var(--waf-r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.waf-btn svg { width: 14px; height: 14px; display: block; }

.waf-btn-primary {
  background: var(--waf-orange);
  color: #000;
  border-color: var(--waf-orange);
}
.waf-btn-primary:hover { background: var(--waf-orange-h); border-color: var(--waf-orange-h); box-shadow: var(--waf-glow-accent); }

.waf-btn-ghost {
  background: transparent;
  color: var(--waf-hi);
  border-color: var(--waf-line2);
}
.waf-btn-ghost:hover { border-color: var(--waf-orange); color: var(--waf-amber-txt); }

.waf-btn[disabled], .waf-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.waf-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--waf-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--waf-low);
  background: transparent;
  border: 1px solid var(--waf-line);
  border-radius: var(--waf-r-sm);
  padding: 3px 8px;
}


/* ── Reset minimal + sol de page ──────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--waf-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--waf-ink);
  background-color: var(--waf-night);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Le sol : nuit unie + trois halos très bas en opacité. Aucun fichier image,
   aucune requête — un dégradé peint par le compositeur. */
body.waf-ground {
  background-image:
    radial-gradient(1000px 560px at 50% -120px, rgba(245,158,11,var(--waf-halo-a)), transparent 65%),
    radial-gradient(760px 560px at 88% 22%, rgba(64,110,255,var(--waf-halo-b)), transparent 62%),
    radial-gradient(900px 640px at 4% 78%, rgba(245,158,11,calc(var(--waf-halo-a) / 2)), transparent 60%),
    linear-gradient(180deg, var(--waf-night-2) 0%, var(--waf-night) 40%, var(--waf-night-deep) 100%);
  background-attachment: fixed;
}
a { color: inherit; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: rgba(245,158,11,0.32); color: var(--waf-ink); }
:focus-visible { outline: var(--waf-focus); outline-offset: var(--waf-focus-off); border-radius: 6px; }

/* ── Colonne ──────────────────────────────────────────────────────────────── */
.waf-wrap { max-width: var(--waf-col); margin: 0 auto; padding: 0 var(--waf-pad); }
.waf-wrap-read { max-width: 760px; }

/* ── Verre — opaque par défaut, translucide SI le navigateur sait le faire ── */
.waf-glass {
  background: var(--waf-glass);
  border: 1px solid var(--waf-hair);
  border-radius: var(--waf-r-glass);
  box-shadow: var(--waf-lift);
}
@supports ((-webkit-backdrop-filter: blur(14px)) or (backdrop-filter: blur(14px))) {
  .waf-glass {
    background: var(--waf-glass-blur);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.waf-top { position: relative; z-index: 30; }
.waf-top-float { position: absolute; top: 0; left: 0; right: 0; }
.waf-top-line { border-bottom: 1px solid var(--waf-hair-soft); }
.waf-top-in {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.waf-lockup { display: inline-flex; align-items: center; text-decoration: none; }
/* Le bloc de droite de la bande du haut : le réglage d'apparence puis l'action
   de la page. La gouttière est celle qui sépare deux cibles de 44 px sans les
   coller, et elle vaut aussi bien pour un glyphe seul que pour un glyphe suivi
   d'un bouton de texte. */
.waf-top-droite { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Bouton de contrôle discret (« Se connecter », « Retour au site »). Hauteur
   44 px = cible tactile, décidée une fois pour tout le site. */
.waf-ctrl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 550;
  color: var(--waf-ink);
  text-decoration: none;
  border: 1px solid var(--waf-hair);
  border-radius: var(--waf-r-ctrl);
  background: rgba(var(--waf-voile-rgb),0.03);
  transition: border-color .18s ease, background-color .18s ease;
}
.waf-ctrl:hover { border-color: rgba(var(--waf-voile-rgb),0.2); background: rgba(var(--waf-voile-rgb),0.06); }
@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  .waf-ctrl { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

/* ── Bouton primaire — le seul aplat ambre du site ────────────────────────── */
.waf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  font-family: var(--waf-font);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--waf-amber-ink);
  text-decoration: none;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--waf-amber-hi), var(--waf-amber) 60%, #e08b06);
  box-shadow: var(--waf-halo), inset 0 1px 0 rgba(var(--waf-voile-rgb),0.4);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .2s ease;
}
.waf-cta:hover { transform: translateY(-1px); box-shadow: 0 0 48px rgba(245,158,11,0.4), inset 0 1px 0 rgba(var(--waf-voile-rgb),0.4); }
.waf-cta[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ── Numérotation « fiche technique » (01 / 02 / 03) ──────────────────────── */
.waf-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 11.5px/1 var(--waf-mono);
  letter-spacing: .2em;
  color: var(--waf-amber-txt);
}
.waf-num::before { content: "/"; color: var(--waf-ink-3); font-weight: 500; }
.waf-num::after { content: ""; flex: 1; height: 1px; background: var(--waf-hair-soft); }

/* ── Pastille mono (méta, formats, badges) ────────────────────────────────── */
.waf-chip {
  display: inline-flex;
  align-items: center;
  font: 500 11px/1 var(--waf-mono);
  font-style: normal;
  color: var(--waf-ink-2);
  border: 1px solid var(--waf-hair-soft);
  border-radius: 999px;
  padding: 6px 10px;
}
.waf-kicker {
  display: inline-block;
  font: 600 10.5px/1 var(--waf-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--waf-amber-hi);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 999px;
  padding: 7px 14px;
}

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.waf-foot { border-top: 1px solid var(--waf-hair-soft); padding: 22px 0 30px; }
.waf-foot-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.waf-foot-nav { display: flex; flex-wrap: wrap; }
.waf-foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  font-size: 13.5px;
  color: var(--waf-ink-2);
  text-decoration: none;
  transition: color .15s ease;
}
.waf-foot-nav a:hover { color: var(--waf-ink); }
.waf-foot-nav a[aria-current="page"] { color: var(--waf-ink); }
.waf-foot-tag { font: 500 11px/1 var(--waf-mono); letter-spacing: .06em; color: var(--waf-ink-3); }

/* ── Sélecteur de langue (lot I4) : présent, jamais criard. Un cran plus pâle
      que les liens légaux dans le pied, du texte nu dans l'en-tête — il ne
      dispute pas l'œil au seul bouton d'appel à l'action de la page. ───────── */
.waf-foot-lang { color: var(--waf-ink-3); }
.waf-foot-lang:hover { color: var(--waf-amber-txt); }
.waf-top-lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--waf-ink-3);
  text-decoration: none;
  transition: color .15s ease;
}
.waf-top-lang:hover { color: var(--waf-ink); }

/* ── La mention « bêta » (13/10, mentionBeta) ─────────────────────────────
      Une pastille au trait ambre À CÔTÉ du wordmark, jamais dedans : le
      lockup reste celui du kit, au pixel près. Le LIEN occupe une cible de
      44 px (la pastille visible est son enfant), et mène à l'encadré bêta des
      tarifs. Pages du propriétaire et de marque SEULEMENT : aucune page vue par
      le client d'un pro ne l'appelle. ──────────────────────────────────────── */
.waf-marque { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.waf-beta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.waf-beta-pastille {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 7px;
  border: 1px solid var(--waf-amber);
  border-radius: 999px;
  /* 12 px : le plancher de texte de la page user (CA-06), tenu partout. */
  font: 600 12px/1 var(--waf-font);
  letter-spacing: .02em;
  color: var(--waf-amber-txt);
  white-space: nowrap;
  transition: background-color .15s ease;
}
.waf-beta:hover .waf-beta-pastille { background: rgba(245,158,11,.12); }
.waf-beta:focus-visible { outline: none; }
.waf-beta:focus-visible .waf-beta-pastille { outline: var(--waf-focus); outline-offset: 2px; }
/* Sous 360 px, aucune bande n'a plus une colonne à céder (bande du téléphone de
   la page user : burger, logo, dépôt, ⋯ compact, apparence) : la pastille passe
   SOUS le wordmark, calée sur « .fm ». Elle ne prend plus de largeur, seulement
   la hauteur que la bande a déjà. */
/* La pastille prend une colonne de 48 px à la rangée du haut. Entre 401 et
   ~470 px, le lien de langue (« English », « Français ») revenait et la cible
   de la pastille le chevauchait (relecture du 13/10 : 32 px à 401, 19 à 414).
   Le lien de langue quitte donc l'en-tête dès 520 px quand la pastille est là
   — il reste dans le pied de page, qui porte le même lien. */
@media (max-width: 520px) {
  .waf-top-beta .waf-top-lang { display: none; }
}
/* L'en-tête du SITE porte à droite un bouton de TEXTE dont la longueur dépend
   de la langue (« Zurück zur Website », « Terug naar de site ») : balayage du
   13/10, la pastille en ligne y mordait le réglage d'apparence jusqu'à 401 px
   (28 px à 375 en allemand). Sous 440 px, elle passe donc SOUS le wordmark,
   calée sur « .fm » — elle ne dépend plus d'aucun libellé. La bande du
   téléphone de la page user, faite de glyphes seuls, garde la pastille en
   ligne jusqu'à 360 px (règle suivante). */
@media (max-width: 440px) {
  .waf-top-beta .waf-marque { flex-direction: column; align-items: flex-end; gap: 2px; }
  .waf-top-beta .waf-beta { min-width: 0; min-height: 0; }
  .waf-top-beta .waf-beta-pastille { height: 16px; padding: 0 6px; }
}
@media (max-width: 359px) {
  .waf-marque { flex-direction: column; align-items: flex-end; gap: 2px; }
  .waf-beta { min-width: 0; min-height: 0; }
  .waf-beta-pastille { height: 16px; padding: 0 6px; }
}

/* ── Animation d'entrée — transform/opacity uniquement, une seule passe ───── */
@media (prefers-reduced-motion: no-preference) {
  .waf-rise { animation: waf-rise .7s cubic-bezier(.2,.7,.3,1) both; }
  .waf-rise-1 { animation-delay: .08s; }
  .waf-rise-2 { animation-delay: .16s; }
}
@keyframes waf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .waf-rise { animation: none; }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  :root { --waf-pad: 20px; }
  .waf-top-in { height: 64px; }
  .waf-foot-in { flex-direction: column; gap: 4px; }
  .waf-foot-nav { justify-content: center; }
  /* background-attachment: fixed est coûteux (repaint au scroll) sur mobile. */
  body.waf-ground { background-attachment: scroll; }
}
/* Sous 400px (SE, petits Android), lockup + lien de langue + apparence +
   « Se connecter » ne tiennent plus sur une ligne sans réduire une cible
   tactile de 44px — trouvé par qa:mobile (landing-360/320, débord de
   21-61px). Le lien de langue est le plus « méta » des trois (cf. plus
   haut) : il disparaît de l'en-tête, il reste joignable dans le pied de
   page, qui porte le même lien. */
@media (max-width: 400px) {
  .waf-top-lang { display: none; }
}
/* Sous 360px, la ligne du haut n'a plus de marge du tout : une fois le lien de
   langue retiré, il reste le lockup, le réglage d'apparence et « Se connecter »,
   et le total flirte avec la largeur disponible. Le 2026-10-09, qa:mobile
   (landing-320) a montré que 4,6px suffisaient à faire déborder TOUTE la page
   horizontalement (scrollWidth 325 pour un viewport de 320) : la somme dépend
   de la police que le poste résout, et une chaîne de 14px varie de plus de 10 %
   entre Arial/Liberation et DejaVu Sans. On rend donc la ligne insensible à la
   police plutôt que de rogner un contrôle : gouttière et gouttière interne
   resserrées, rien ne disparaît, aucune cible tactile ne descend sous 44px
   (la hauteur ne bouge pas, seule la largeur du bouton change). */
@media (max-width: 360px) {
  :root { --waf-pad: 12px; }
  .waf-top-in { gap: 8px; }
  .waf-ctrl { padding: 0 14px; }
}


  html[data-apparence="clair"] {
  --waf-night: #eef1f5;
  --waf-night-2: #f5f7fa;
  --waf-night-deep: #e3e7ee;
  --waf-glass: #ffffff;
  --waf-glass-blur: rgba(255,255,255,0.62);
  --waf-hair: rgba(11,14,19,0.13);
  --waf-hair-soft: rgba(11,14,19,0.08);
  --waf-ink: #10141c;
  --waf-ink-2: #454d5c;
  --waf-ink-3: #565f70;
  --waf-amber: #f59e0b;
  --waf-amber-hi: #ffb938;
  --waf-amber-deep: #b06c05;
  --waf-amber-ink: #241603;
  
  --waf-amber-txt: #6a4100;
  /* Le creux, en jour. Un champ VIF est creusé — il prend le sol, plus sombre
     que la carte qui le porte : on voit qu'on peut y écrire. Un champ FIGÉ,
     lui, n'est pas un trou : il affleure la carte, et c'est son filet tireté
     qui dit qu'on n'y touche pas. Une zone de saisie CREUSÉE dans une carte blanche se lit du
     premier coup d'œil, et l'encre y tient très au-dessus du seuil (mesures
     dans le compte rendu du lot M1). */
  --waf-champ: var(--waf-night);
  --waf-champ-fige: var(--waf-night-2);
  --waf-voile-rgb: 16,20,28;
  --waf-ink-rgb: 16,20,28;
  --waf-fond-rgb: 233,237,242;
  --waf-verre-rgb: 255,255,255;
  --waf-ombre-fine: rgba(255,255,255,0.95);
  --waf-halo-a: 0.07;
  --waf-halo-b: 0.05;
  
  --waf-voile-survol: 0.07;
  /* La teinte de rangement EN JOUR. Le plafond du brief est de 8 % ; on s'y
     tient, et le survol prend quatre points de plus — mesurés, pas devinés. */
  --waf-teinte: 0.08;
  --waf-teinte-survol: 0.12;
  --waf-scrim: rgba(238,241,245,0.90);
  --waf-scrim-fort: rgba(238,241,245,0.96);
  --waf-scrim-doux: rgba(238,241,245,0.72);
  --waf-badge-video: #075985;
  --waf-proposition: #1f8f8c;
  
  --waf-pr-aplat: 78%, 28%;
  --waf-pr-sur-aplat: 30%, 99%;
  --waf-pr-trait: 78%, 34%, 0.55;
  --waf-danger-txt: #a4141c;
  --waf-danger-hi: #c01a24;
  --waf-danger-rgb: 164,20,28;
  --waf-au-fg: 70%, 24%;
  --waf-au-bg: 78%, 46%, 0.10;
  --waf-au-border: 62%, 38%, 0.55;
  --waf-au-solid: 70%, 24%;
  --waf-onde-1: #c47607;
  --waf-onde-2: #c47607;
  --waf-onde-3: #8f5300;
  --waf-onde-repos: #84817a;  /* dev.32 : la même onde que le jour servi, voir ONDE_CLAIRE. */
  /* L'alphabet HISTORIQUE du lecteur, ramené sur le socle ici aussi. Les deux
     lecteurs le font déjà pour eux-mêmes ; les surfaces qui inlinent le socle
     nu (administration, connexion, passerelles) ne le font pas, et laissaient
     donc une encre blanche sur un sol clair. */
  --waf-bg: var(--waf-night);
  --waf-panel: var(--waf-glass);
  --waf-panel2: var(--waf-night-2);
  --waf-line: var(--waf-hair-soft);
  --waf-line2: var(--waf-hair);
  --waf-hi: var(--waf-ink);
  --waf-desc: var(--waf-ink-2);
  --waf-mid: var(--waf-ink-2);
  --waf-low: var(--waf-ink-3);
  --waf-orange: var(--waf-amber);
  --waf-orange-h: var(--waf-amber-hi);
  --waf-lift: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 44px rgba(16,20,28,0.10);
  --waf-lift-hero: inset 0 1px 0 rgba(255,255,255,0.9), 0 26px 66px rgba(16,20,28,0.14);
  --waf-halo: 0 0 30px rgba(245,158,11,0.34);
  --waf-glow: 0 10px 34px rgba(16,20,28,0.10);
  --waf-glow-accent: 0 0 22px rgba(245,158,11,0.22);
  color-scheme: light;
  --waf-night: #f6f1e7;
  --waf-night-2: #fbf7f0;
  --waf-night-deep: #ece5d8;
  --waf-glass: #fffdf9;
  --waf-glass-blur: rgba(255,253,249,0.66);
  --waf-hair: rgba(60,44,20,0.16);
  --waf-hair-soft: rgba(60,44,20,0.09);
  --waf-ink: #221a10;
  --waf-ink-2: #4d4335;
  --waf-ink-3: #635746;
  --waf-amber: #f59e0b;
  --waf-amber-hi: #ffb938;
  --waf-amber-deep: #b06c05;
  --waf-amber-ink: #241603;
  --waf-voile-rgb: 60,44,20;
  --waf-ink-rgb: 34,26,16;
  --waf-fond-rgb: 240,233,220;
  --waf-verre-rgb: 255,253,249;
  --waf-ombre-fine: rgba(255,253,249,0.95);
  --waf-scrim: rgba(246,241,231,0.90);
  --waf-scrim-fort: rgba(246,241,231,0.96);
  --waf-scrim-doux: rgba(246,241,231,0.72);
  --waf-onde-1: #c47607;
  --waf-onde-2: #c47607;
  --waf-onde-3: #8f5300;
  --waf-onde-repos: #84817a;  /* dev.32 : voir ONDE_CLAIRE ci-dessous */
  --waf-lift: inset 0 1px 0 rgba(255,255,255,0.8), 0 16px 40px rgba(60,44,20,0.10);
  --waf-lift-hero: inset 0 1px 0 rgba(255,255,255,0.8), 0 24px 60px rgba(60,44,20,0.14);
  --waf-halo: 0 0 28px rgba(245,158,11,0.30);
  --waf-glow: 0 10px 30px rgba(60,44,20,0.10);
  --waf-glow-accent: 0 0 20px rgba(245,158,11,0.20);
  }

  html[data-apparence="clair"] svg path[fill="#F7F7F5"] { fill: var(--waf-ink); }
  @media (prefers-color-scheme: light) {
  html[data-apparence="auto"] {
  --waf-night: #eef1f5;
  --waf-night-2: #f5f7fa;
  --waf-night-deep: #e3e7ee;
  --waf-glass: #ffffff;
  --waf-glass-blur: rgba(255,255,255,0.62);
  --waf-hair: rgba(11,14,19,0.13);
  --waf-hair-soft: rgba(11,14,19,0.08);
  --waf-ink: #10141c;
  --waf-ink-2: #454d5c;
  --waf-ink-3: #565f70;
  --waf-amber: #f59e0b;
  --waf-amber-hi: #ffb938;
  --waf-amber-deep: #b06c05;
  --waf-amber-ink: #241603;
  
  --waf-amber-txt: #6a4100;
  /* Le creux, en jour. Un champ VIF est creusé — il prend le sol, plus sombre
     que la carte qui le porte : on voit qu'on peut y écrire. Un champ FIGÉ,
     lui, n'est pas un trou : il affleure la carte, et c'est son filet tireté
     qui dit qu'on n'y touche pas. Une zone de saisie CREUSÉE dans une carte blanche se lit du
     premier coup d'œil, et l'encre y tient très au-dessus du seuil (mesures
     dans le compte rendu du lot M1). */
  --waf-champ: var(--waf-night);
  --waf-champ-fige: var(--waf-night-2);
  --waf-voile-rgb: 16,20,28;
  --waf-ink-rgb: 16,20,28;
  --waf-fond-rgb: 233,237,242;
  --waf-verre-rgb: 255,255,255;
  --waf-ombre-fine: rgba(255,255,255,0.95);
  --waf-halo-a: 0.07;
  --waf-halo-b: 0.05;
  
  --waf-voile-survol: 0.07;
  /* La teinte de rangement EN JOUR. Le plafond du brief est de 8 % ; on s'y
     tient, et le survol prend quatre points de plus — mesurés, pas devinés. */
  --waf-teinte: 0.08;
  --waf-teinte-survol: 0.12;
  --waf-scrim: rgba(238,241,245,0.90);
  --waf-scrim-fort: rgba(238,241,245,0.96);
  --waf-scrim-doux: rgba(238,241,245,0.72);
  --waf-badge-video: #075985;
  --waf-proposition: #1f8f8c;
  
  --waf-pr-aplat: 78%, 28%;
  --waf-pr-sur-aplat: 30%, 99%;
  --waf-pr-trait: 78%, 34%, 0.55;
  --waf-danger-txt: #a4141c;
  --waf-danger-hi: #c01a24;
  --waf-danger-rgb: 164,20,28;
  --waf-au-fg: 70%, 24%;
  --waf-au-bg: 78%, 46%, 0.10;
  --waf-au-border: 62%, 38%, 0.55;
  --waf-au-solid: 70%, 24%;
  --waf-onde-1: #c47607;
  --waf-onde-2: #c47607;
  --waf-onde-3: #8f5300;
  --waf-onde-repos: #84817a;  /* dev.32 : la même onde que le jour servi, voir ONDE_CLAIRE. */
  /* L'alphabet HISTORIQUE du lecteur, ramené sur le socle ici aussi. Les deux
     lecteurs le font déjà pour eux-mêmes ; les surfaces qui inlinent le socle
     nu (administration, connexion, passerelles) ne le font pas, et laissaient
     donc une encre blanche sur un sol clair. */
  --waf-bg: var(--waf-night);
  --waf-panel: var(--waf-glass);
  --waf-panel2: var(--waf-night-2);
  --waf-line: var(--waf-hair-soft);
  --waf-line2: var(--waf-hair);
  --waf-hi: var(--waf-ink);
  --waf-desc: var(--waf-ink-2);
  --waf-mid: var(--waf-ink-2);
  --waf-low: var(--waf-ink-3);
  --waf-orange: var(--waf-amber);
  --waf-orange-h: var(--waf-amber-hi);
  --waf-lift: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 44px rgba(16,20,28,0.10);
  --waf-lift-hero: inset 0 1px 0 rgba(255,255,255,0.9), 0 26px 66px rgba(16,20,28,0.14);
  --waf-halo: 0 0 30px rgba(245,158,11,0.34);
  --waf-glow: 0 10px 34px rgba(16,20,28,0.10);
  --waf-glow-accent: 0 0 22px rgba(245,158,11,0.22);
  color-scheme: light;
  --waf-night: #f6f1e7;
  --waf-night-2: #fbf7f0;
  --waf-night-deep: #ece5d8;
  --waf-glass: #fffdf9;
  --waf-glass-blur: rgba(255,253,249,0.66);
  --waf-hair: rgba(60,44,20,0.16);
  --waf-hair-soft: rgba(60,44,20,0.09);
  --waf-ink: #221a10;
  --waf-ink-2: #4d4335;
  --waf-ink-3: #635746;
  --waf-amber: #f59e0b;
  --waf-amber-hi: #ffb938;
  --waf-amber-deep: #b06c05;
  --waf-amber-ink: #241603;
  --waf-voile-rgb: 60,44,20;
  --waf-ink-rgb: 34,26,16;
  --waf-fond-rgb: 240,233,220;
  --waf-verre-rgb: 255,253,249;
  --waf-ombre-fine: rgba(255,253,249,0.95);
  --waf-scrim: rgba(246,241,231,0.90);
  --waf-scrim-fort: rgba(246,241,231,0.96);
  --waf-scrim-doux: rgba(246,241,231,0.72);
  --waf-onde-1: #c47607;
  --waf-onde-2: #c47607;
  --waf-onde-3: #8f5300;
  --waf-onde-repos: #84817a;  /* dev.32 : voir ONDE_CLAIRE ci-dessous */
  --waf-lift: inset 0 1px 0 rgba(255,255,255,0.8), 0 16px 40px rgba(60,44,20,0.10);
  --waf-lift-hero: inset 0 1px 0 rgba(255,255,255,0.8), 0 24px 60px rgba(60,44,20,0.14);
  --waf-halo: 0 0 28px rgba(245,158,11,0.30);
  --waf-glow: 0 10px 30px rgba(60,44,20,0.10);
  --waf-glow-accent: 0 0 20px rgba(245,158,11,0.20);
  }

  html[data-apparence="auto"] svg path[fill="#F7F7F5"] { fill: var(--waf-ink); }
  }

.waf-ap { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.waf-ap-lbl { font-size: 13px; color: var(--waf-ink-2); }
.waf-ap-seg { display: inline-flex; border: 1px solid var(--waf-hair); border-radius: var(--waf-r-ctrl, 11px);
  background: rgba(var(--waf-voile-rgb), 0.04); }
.waf-ap-op { position: relative; display: inline-flex; }
.waf-ap-op + .waf-ap-op { border-left: 1px solid var(--waf-hair); }
.waf-ap-op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.waf-ap-op span { display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 15px; font: 600 12.5px/1 var(--waf-font);
  color: var(--waf-ink-2); white-space: nowrap; }

.waf-ap-op:first-child span { border-radius: calc(var(--waf-r-ctrl, 11px) - 1px) 0 0 calc(var(--waf-r-ctrl, 11px) - 1px); }
.waf-ap-op:last-child span { border-radius: 0 calc(var(--waf-r-ctrl, 11px) - 1px) calc(var(--waf-r-ctrl, 11px) - 1px) 0; }
.waf-ap-op input:hover + span { color: var(--waf-ink); background: rgba(var(--waf-voile-rgb), 0.06); }
.waf-ap-op input:focus-visible + span { outline: var(--waf-focus); outline-offset: -2px; }
.waf-ap-op input:checked + span { background: var(--waf-amber); color: var(--waf-amber-ink); }

.waf-ap-op input:checked:focus-visible + span { outline-color: var(--waf-amber-ink); }


.waf-apv { display: grid; gap: 12px; margin-top: 12px; }
.waf-apv-titre { margin: 0 0 6px; font: 600 12px/1.3 var(--waf-font); color: var(--waf-ink-2); }
.waf-apv-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.waf-apv-op { position: relative; display: grid; gap: 6px; padding: 7px; border: 1px solid var(--waf-hair);
  border-radius: 10px; cursor: pointer; font: 500 12.5px/1.3 var(--waf-font); color: var(--waf-ink); }
.waf-apv-op:hover { background: rgba(var(--waf-voile-rgb), 0.05); }
.waf-apv-op:has(input:checked) { border-color: var(--waf-amber); box-shadow: 0 0 0 1px var(--waf-amber); }
.waf-apv-op:has(input:focus-visible) { outline: var(--waf-focus); outline-offset: 2px; }
.waf-apv-op input { position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; margin: 0;
  accent-color: var(--waf-amber); }
.waf-apv-apercu { height: 40px; border-radius: 7px; display: flex; align-items: center; gap: 3px; padding: 0 10px;
  box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.28); }
.waf-apv-apercu i { display: block; width: 4px; height: 11px; border-radius: 2px; background: currentColor; }
.waf-apv-apercu i:nth-child(2) { height: 20px; } .waf-apv-apercu i:nth-child(3) { height: 15px; }
.waf-apv-apercu i:nth-child(4) { height: 8px; opacity: 0.55; }

@media (max-width: 650px) {
  .waf-apv-choix { grid-template-columns: 1fr; gap: 6px; }
  
  .waf-apv-op { display: flex; align-items: center; gap: 10px; padding: 7px 10px; min-height: 44px; }
  .waf-apv-apercu { order: 1; width: 40px; height: 30px; flex: none; padding: 0; justify-content: center; }
  .waf-apv-mot { order: 2; }
  .waf-apv-op input { position: static; order: 3; margin-left: auto; width: 16px; height: 16px; }
}

.waf-apv-apercu.waf-apv-prise { background: rgba(var(--waf-voile-rgb), 0.06); color: var(--waf-amber, #f59e0b); overflow: hidden; justify-content: center; gap: 6px; }
.waf-apv-apercu.waf-apv-prise b { display: flex; align-items: center; gap: 2px; height: 22px; }
.waf-apv-apercu.waf-apv-prise i { flex: 0 0 auto; width: 3px; height: 20px; border-radius: 2px; background: currentColor; transform-origin: 50% 50%; }
.waf-apv-apercu.waf-apv-prise-bande b { animation: waf-apv-file 1.2s linear infinite; }
.waf-apv-apercu.waf-apv-prise-bande i:nth-child(3n) { transform: scaleY(.45); } .waf-apv-apercu.waf-apv-prise-bande i:nth-child(3n+1) { transform: scaleY(.8); }
.waf-apv-apercu.waf-apv-prise-bande i:nth-child(4n) { transform: scaleY(.25); } .waf-apv-apercu.waf-apv-prise-bande i:nth-child(-n+4) { opacity: .45; }
@keyframes waf-apv-file { from { transform: translateX(10px); } to { transform: translateX(-10px); } }
.waf-apv-apercu.waf-apv-prise-echo em { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; }
.waf-apv-apercu.waf-apv-prise-echo b:first-child { flex-direction: row-reverse; }
.waf-apv-apercu.waf-apv-prise-echo i { animation: waf-apv-echo 0.9s ease-in-out infinite alternate; }
.waf-apv-apercu.waf-apv-prise-echo i:nth-child(2) { animation-delay: .12s; opacity: .85; } .waf-apv-apercu.waf-apv-prise-echo i:nth-child(3) { animation-delay: .24s; opacity: .7; }
.waf-apv-apercu.waf-apv-prise-echo i:nth-child(4) { animation-delay: .36s; opacity: .55; } .waf-apv-apercu.waf-apv-prise-echo i:nth-child(5) { animation-delay: .48s; opacity: .4; }
@keyframes waf-apv-echo { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
.waf-apv-apercu.waf-apv-prise-matrice i { width: 3px; height: 3px; border-radius: 50%; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; opacity: .9; animation: waf-apv-echo 0.7s steps(3) infinite alternate; }
.waf-apv-apercu.waf-apv-prise-matrice i:nth-child(odd) { animation-delay: .2s; } .waf-apv-apercu.waf-apv-prise-matrice i:nth-child(3n) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .waf-apv-apercu.waf-apv-prise b, .waf-apv-apercu.waf-apv-prise i { animation: none !important; } }
@media (max-width: 650px) { .waf-apv-apercu.waf-apv-prise { width: 76px; gap: 4px; } }


.waf-apm { position: relative; flex: 0 0 auto; display: inline-flex; }
.waf-apm-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--waf-r-ctrl, 10px); color: var(--waf-hi); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.waf-apm-btn svg { width: 22px; height: 22px; display: block; }
.waf-apm-btn:hover { border-color: rgba(var(--waf-voile-rgb),0.2); background: rgba(var(--waf-voile-rgb),0.06); }
.waf-apm-btn:focus-visible { outline: var(--waf-focus); outline-offset: 1px; }

.waf-apm-g { display: none; }
html[data-apparence="auto"] .waf-apm-g-auto,
html[data-apparence="clair"] .waf-apm-g-clair,
html:not([data-apparence]) .waf-apm-g-sombre,
html[data-apparence="sombre"] .waf-apm-g-sombre { display: inline-flex; }

.waf-apm-nom, .waf-apm-val { display: none; }
.waf-apm-v { display: none; }
html[data-apparence="auto"] .waf-apm-v-auto,
html[data-apparence="clair"] .waf-apm-v-clair,
html:not([data-apparence]) .waf-apm-v-sombre,
html[data-apparence="sombre"] .waf-apm-v-sombre { display: inline; }
.waf-apm-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
  min-width: 176px; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  background: var(--waf-glass); border: 1px solid var(--waf-hair);
  border-radius: var(--waf-r-ctrl, 10px); box-shadow: var(--waf-glow); }
.waf-apm-menu[hidden] { display: none; }

.waf-apm-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 6px; }
.waf-apm-item { display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 40px; padding: 8px 10px; -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; border-radius: calc(var(--waf-r-ctrl, 10px) - 3px);
  font: 500 12.5px/1.2 var(--waf-font); color: var(--waf-ink);
  text-align: left; cursor: pointer; }
.waf-apm-item:hover { background: rgba(245,158,11,0.14); color: var(--waf-amber-txt); }
.waf-apm-item:focus-visible { outline: var(--waf-focus); outline-offset: -2px; }

.waf-apm-ck { flex: 0 0 auto; display: inline-flex; width: 14px; height: 14px;
  color: var(--waf-amber-txt); visibility: hidden; }
.waf-apm-ck svg { width: 14px; height: 14px; display: block; }
html[data-apparence="auto"] .waf-apm-item[data-waf-ap="auto"] .waf-apm-ck,
html[data-apparence="clair"] .waf-apm-item[data-waf-ap="clair"] .waf-apm-ck,
html:not([data-apparence]) .waf-apm-item[data-waf-ap="sombre"] .waf-apm-ck,
html[data-apparence="sombre"] .waf-apm-item[data-waf-ap="sombre"] .waf-apm-ck { visibility: visible; }

@media (max-width: 420px) { .waf-apm-menu { min-width: 168px; } }


.sb-row[hidden] { display: none !important; }
#sidebar .sb-row > .sb-item { padding-left: 3px; }
.sb-folder-toggle { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 38px; margin-left: calc(var(--depth,0) * 13px); padding: 3px; border: 0; border-radius: 8px; color: var(--waf-ink-3); background: transparent; }
button.sb-folder-toggle { cursor: pointer; }
.sb-folder-toggle.drop-hover, button.sb-folder-toggle:hover { background: rgba(var(--waf-voile-rgb),.07); }
button.sb-folder-toggle:focus-visible { outline: 2px solid var(--waf-amber); outline-offset: -2px; }
.sb-folder-toggle .sb-folder-glyph { width: 26px; height: 26px; }
.sb-folder-open { display: none; }
.sb-folder-toggle[aria-expanded="true"] .sb-folder-open { display: inline; }
.sb-folder-toggle[aria-expanded="true"] .sb-folder-closed { display: none; }
/* Une feuille n'a rien à replier : son ouverture représente la vue de fichiers active. */
body:not(.mode-home):not(.mode-trash) #sidebar[data-folder-dashboard="true"] .sb-row:has(> .sb-item.active) > [data-folder-open] .sb-folder-open { display: inline; }
body:not(.mode-home):not(.mode-trash) #sidebar[data-folder-dashboard="true"] .sb-row:has(> .sb-item.active) > [data-folder-open] .sb-folder-closed { display: none; }
.sb-folder-toggle[data-color] { color: var(--tag); }
.sb-folder-toggle[data-color] .sb-folder-shape { fill: currentColor; }
.sb-folder-toggle[data-color] .sb-folder-mark { stroke: #17130b; stroke-width: 2; }
.sb-folder-mark { stroke-width: 2; }
.folder-menu { box-sizing: border-box; max-height: calc(100dvh - 16px); overflow: auto; }

  .folder-menu {
    position: fixed; z-index: 1000; width: 252px; max-width: calc(100vw - 16px);
    display: flex; flex-direction: column;
    padding: 4px;
    background: var(--waf-glass);
    border: 1px solid var(--waf-hair);
    border-radius: 10px;
    box-shadow: var(--waf-lift);
  }
  .folder-menu[hidden] { display: none; }
  .folder-menu > button, .folder-menu > a {
    display: flex; align-items: center; gap: 9px;
    width: 100%; box-sizing: border-box;
    -webkit-appearance: none; appearance: none;
    background: transparent; border: 0;
    padding: 8px 10px; border-radius: 7px;
    color: var(--waf-ink); text-align: left; text-decoration: none;
    font: 500 12.5px/1.2 var(--waf-font);
    white-space: nowrap; cursor: pointer;
  }
  
  @media (hover: none) {
    .folder-menu > button, .folder-menu > a { min-height: 44px; }
  }
  
  .folder-menu > button[hidden], .folder-menu > a[hidden] { display: none; }
  .folder-menu > button svg, .folder-menu > a svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--waf-ink-2); }
  .folder-menu > button:hover, .folder-menu > a:hover { background: rgba(245,158,11,0.14); color: var(--waf-ink); }
  .folder-menu > button:hover svg, .folder-menu > a:hover svg { color: var(--waf-amber); }
  .folder-menu > button:focus-visible, .folder-menu > a:focus-visible { outline: var(--waf-focus); outline-offset: -2px; }
  .folder-menu > button.disabled, .folder-menu > a.disabled, .folder-menu > button[disabled], .folder-menu > a[disabled] { opacity: 0.4; cursor: default; pointer-events: none; }
  .folder-menu > button.danger, .folder-menu > a.danger { color: var(--waf-danger-txt, #e5484d); }
  .folder-menu > button.danger svg, .folder-menu > a.danger svg { color: var(--waf-danger-txt, #e5484d); }
  .folder-menu > button.danger:hover, .folder-menu > a.danger:hover { background: rgba(229,72,77,0.16); color: var(--waf-danger-hi, #ff6b70); }
  
  
  .folder-menu > button.confirm, .folder-menu > a.confirm { background: rgba(229,72,77,0.16); color: var(--waf-danger-hi, #ff6b70); font-weight: 600; white-space: normal; }
  
  
  .folder-menu .menu-txt { display: flex; align-items: baseline; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
  .folder-menu .menu-verbe { flex: 0 0 auto; white-space: pre; }
  .folder-menu .menu-cible {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .folder-menu .menu-sep { height: 1px; flex: 0 0 auto; background: var(--waf-hair); margin: 4px 6px; }
  .folder-menu .menu-label {
    padding: 6px 10px 3px;
    font: 600 10px/1.2 var(--waf-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--waf-ink-2);
  }
  .folder-menu .menu-chev {
    margin-left: auto; color: var(--waf-ink-2); font-size: 15px; line-height: 1;
    display: flex;
  }
  
  .folder-menu .menu-chev svg { transition: transform 0.15s ease; }
  .folder-menu [aria-expanded="true"] .menu-chev svg { transform: rotate(180deg); }
  
  .folder-menu .menu-chips[hidden] { display: none; }
  .folder-menu .menu-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 10px 8px; }
  .folder-menu .menu-chips-lbl {
    flex: 0 0 100%; padding: 4px 0 5px;
    font: 600 10px/1.2 var(--waf-mono);
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--waf-ink-2);
  }
  .folder-menu .menu-chip {
    display: inline-flex; align-items: center;
    padding: 5px 9px; border-radius: 999px;
    border: 1px solid var(--waf-hair); background: transparent;
    color: var(--waf-ink); text-decoration: none; cursor: pointer;
    font: 500 11.5px/1 var(--waf-font); white-space: nowrap;
  }
  .folder-menu .menu-chip:hover { background: rgba(245,158,11,0.14); border-color: var(--waf-amber); }
  .folder-menu .menu-chip:focus-visible { outline: var(--waf-focus); outline-offset: 1px; }

.folder-menu > button, .folder-menu > a { white-space: normal; }
.folder-menu > button svg, .folder-menu > a svg { width: 16px; height: 16px; flex: none; }
.folder-menu .menu-sep { height: 1px; margin: 5px 4px; background: var(--waf-hair-soft); }
.folder-menu .menu-label, .folder-menu .menu-note { padding: 6px 10px; color: var(--waf-ink-3); font: 500 11px/1.3 var(--waf-font); }
.folder-menu .cmenu-row { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 6px 6px; }
.folder-menu button.cmenu-item { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.folder-menu .cmenu-dot { width: 17px; height: 17px; border-radius: 50%; background: var(--tag); border: 1px solid rgba(var(--waf-voile-rgb),.2); }
.folder-menu .cmenu-none .cmenu-dot { background: transparent; border: 1px dashed var(--waf-ink-3); }
.folder-menu .cmenu-item[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--waf-ink-2); }
.sb-row-rename { box-sizing: border-box; flex: 1; min-width: 0; border: 1px solid var(--waf-amber); border-radius: 8px; padding: 9px 6px; background: var(--waf-night); color: var(--waf-ink); font: 13px var(--waf-font); }
.sb-folder-error { margin: 5px 8px; color: var(--waf-danger); font-size: 12px; }
@media (pointer: coarse), (max-width: 900px) { .sb-folder-toggle { width: 44px; height: 44px; }.sb-row > .sb-item { min-height: 44px; }.sb-row-dots { min-width: 44px; min-height: 44px; } }