/* ═══════════════════════════════════════════════════════════════════════════
   GFSF — PEAU COMMUNE DE LA BIBLIOTHÈQUE D'OUTILS
   Une seule feuille pour outils.html et les 5 calculatrices.
   Reprend la peau « Snowflake » (blanc lumineux, halos pastel, cartes qui
   flottent) déjà validée sur mon-budget.html.
   Clair seulement : le blanc est l'identité choisie, pas de thème sombre.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Marque — bleu qui dégrade vers le violet, sur blanc lumineux ── */
  --accent:#4a86f7; --accent-deep:#2f6ae0; --accent-soft:rgba(74,134,247,.13);
  --accent-txt:#1c5fc9;                         /* bleu lisible : 6,0:1 sur blanc */
  --violet:#7c5cf7;                             /* la fin du dégradé, jamais seule */
  /* ⚠️ chaque teinte du dégradé porte du TEXTE BLANC : toutes ≥ 4,5:1
     (#2f6ae0 = 4,9 · #3f5be0 = 5,6 · #6236d8 = 6,9) — l'ancien départ #4a86f7
     tombait à 3,5:1, sous le seuil AA */
  --btn:linear-gradient(135deg,#2f6ae0 0%,#3f5be0 50%,#6236d8 100%);
  --ambre:#cf7b1c; --ambre-soft:rgba(207,123,28,.12);   /* exceptions négatives réelles */
  --ambre-txt:#95560e;      /* la même famille, assez foncée pour du TEXTE (AA sur blanc) */

  /* ── Encre ── */
  --ink:#1c2545; --txt:#1c2545; --txt2:#596486; --txt3:#636e8e;

  /* ── Surfaces ── */
  --card:#ffffff; --card-2:#f3f6fe; --page:#f4f7fe;
  --brd:#e6ecfa; --brd-2:#d4defa;

  --shadow:0 1px 2px rgba(30,45,100,.05), 0 10px 26px rgba(30,45,100,.07), 0 30px 60px rgba(30,45,100,.05);
  --shadow-lift:0 2px 5px rgba(30,45,100,.07), 0 18px 40px rgba(30,45,100,.14), 0 44px 84px rgba(30,45,100,.11);
  --glow:0 8px 22px rgba(74,134,247,.32);

  /* ── Dégradés vivants ── */
  --grad-primary:linear-gradient(135deg,#4a86f7 0%,#3f6fe8 48%,#7c5cf7 100%);

  /* ── Séries de graphique (palette VALIDÉE : bande de clarté, chroma,
        séparation daltonienne toutes-paires, plancher vision normale) ──
     s1 = votre argent · s2 = les intérêts / le coût · s3 = la croissance
     ⚠️ s3 est sous 3:1 sur blanc → règle de relief : TOUJOURS une étiquette
     visible ou la vue tableau à côté. Jamais la couleur seule.               */
  --s1:#2f6ae0; --s2:#eb6834; --s3:#1baf7a;
  --s1-wash:rgba(47,106,224,.10); --s2-wash:rgba(235,104,52,.10); --s3-wash:rgba(27,175,122,.10);
  --viz-grille:#e8edfb; --viz-axe:#d4defa;

  --rad:20px; --rad-lg:28px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;background:var(--page);-webkit-text-size-adjust:100%}

/* ⚠️ PIÈGE DÉJÀ PAYÉ : toute classe qui pose un `display:` (ici .note, .barre-haut,
   .actions, .heros…) écrase l'attribut [hidden] et l'élément ne se cache jamais.
   Cette règle rend `hidden` fiable partout dans la bibliothèque. */
[hidden]{display:none !important}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--txt);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100dvh;
  /* ═══ LA BRUME — STATIQUE ═══
     ⚠️ Version précédente : deux nappes plein écran en `filter:blur(60-80px)`
     ANIMÉES. Le navigateur repeignait un flou géant à chaque image → ça saccadait.
     Ici la même profondeur est obtenue avec des dégradés larges peints UNE fois,
     sans filtre et sans animation : coût nul après le premier rendu. */
  background:
    radial-gradient(1250px 900px at 18% -6%,  rgba(74,134,247,.30), transparent 60%),
    radial-gradient(1050px 820px at 88% 6%,   rgba(126,92,248,.26), transparent 58%),
    radial-gradient(1150px 900px at 62% 96%,  rgba(58,150,252,.22), transparent 60%),
    radial-gradient(900px 760px at 4% 84%,    rgba(96,196,240,.18), transparent 58%),
    linear-gradient(180deg,#f9fbff 0%,#edf2fe 55%,#f2f0fe 100%);
  background-attachment:fixed;
}

h1,h2,h3,.disp{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:600;letter-spacing:-.015em;color:var(--txt)}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select{font-family:inherit;color:var(--txt)}
a{color:var(--accent-txt)}
::selection{background:var(--accent);color:#fff}

/* Un seul indicateur de focus pour toute la bibliothèque */
:focus-visible{outline:2px solid var(--accent-txt);outline-offset:2px;border-radius:6px}
/* Contour blanc RÉSERVÉ aux surfaces foncées. Une carte-lanceur est BLANCHE :
   un contour blanc dessus rendrait le focus clavier invisible. */
.btn-main:focus-visible{outline-color:#fff;outline-offset:-4px}

/* ═══════════ BARRE DU HAUT (injectée par le kit) ═══════════ */
.barre-haut{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(14px,4vw,32px);
  position:sticky;top:0;z-index:50;
  /* ═══ FONDU AVEC LA PAGE ═══
     Avant : un verre blanc (rgba(255,255,255,.72) + backdrop-filter) qui
     tranchait sur le fond bleuté — une bande claire sous l'en-tête.
     Ici : le MÊME empilement que le body, avec le même << fixed >>. Le fond du body
     ne défile pas ; la barre affiche donc toujours exactement les mêmes pixels
     que la zone qu'elle recouvre. Fusion parfaite, et un filtre en moins. */
  background:
    radial-gradient(1250px 900px at 18% -6%,  rgba(74,134,247,.30), transparent 60%),
    radial-gradient(1050px 820px at 88% 6%,   rgba(126,92,248,.26), transparent 58%),
    radial-gradient(1150px 900px at 62% 96%,  rgba(58,150,252,.22), transparent 60%),
    radial-gradient(900px 760px at 4% 84%,    rgba(96,196,240,.18), transparent 58%),
    linear-gradient(180deg,#f9fbff 0%,#edf2fe 55%,#f2f0fe 100%);
  background-attachment:fixed;
  /* Pas de bordure franche : un fondu de 10 px sous la barre laisse le contenu
     s'effacer en glissant dessous, au lieu d'être coupé net par un filet. */
  box-shadow:0 10px 10px -10px rgba(28,43,74,.10);
}
.barre-haut .retour{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--accent-txt);font-weight:600;font-size:14px;
  padding:7px 12px;border-radius:11px;transition:background .18s ease;
}
.barre-haut .retour:hover{background:var(--accent-soft)}
.barre-haut .confid{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--txt3);font-size:12.5px;font-weight:500;
}
.barre-haut .confid svg{flex:0 0 auto;opacity:.8}
@media (max-width:560px){ .barre-haut .confid span{display:none} }

/* ═══════════ GABARIT DE PAGE ═══════════ */
.page{max-width:1120px;margin:0 auto;padding:clamp(20px,4vw,40px) clamp(14px,4vw,32px) 72px}

@keyframes montee{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
/* Les tuiles du hub gardent leur rebond, mais adouci : le dépassement passe de
   1,02 à 1,008 — on sent l'arrivée sans que ça tressaute. */
@keyframes pop{
  0%{opacity:0;transform:translateY(8px) scale(.965)}
  62%{opacity:1;transform:translateY(0) scale(1.008)}
  100%{opacity:1;transform:none}
}

/* ═══ Cascade de lecture ═══
   Le kit (GFSF.cascade) numérote les blocs dans l'ordre de lecture via --scene ;
   ils entrent l'un après l'autre. Plafonné : la fin de page n'attend jamais
   plus de 560 ms. Les cartes du hub gardent leur « pop ». */
/* ⚠️ fill-mode BACKWARDS, jamais BOTH : « both » laisse l'animation imposer sa
   dernière image APRÈS la fin, et cette image (transform:none / scale(1))
   écrase le transform de :hover — le soulèvement des cartes du hub mourait.
   « backwards » ne s'applique qu'AVANT le départ (pendant le délai) ; une fois
   l'animation finie l'élément reprend ses styles normaux, donc le survol vit. */
@media (prefers-reduced-motion:no-preference){
  /* .78s et une décélération longue (0.16,1,0.3,1) : le bloc glisse et se pose.
     Le pas passe à 90 ms — les blocs se suivent au lieu d'arriver en paquet —
     mais le plafond reste bas (630 ms) pour que le bas de page n'attende jamais. */
  .en-scene{animation:montee .78s cubic-bezier(.16,1,.3,1) backwards;
    animation-delay:min(calc(var(--scene,0)*90ms),630ms)}
  .lanceur.en-scene{animation-name:pop;animation-duration:.66s;
    animation-timing-function:cubic-bezier(.22,1.02,.32,1)}
}

/* ═══════════ EN-TÊTE D'OUTIL ═══════════ */
.outil-tete{display:flex;align-items:center;gap:16px;margin-bottom:clamp(18px,3vw,28px)}
.ot-ic{
  flex:0 0 auto;width:56px;height:56px;border-radius:17px;
  display:grid;place-items:center;color:#fff;
  background:var(--tc,var(--grad-primary));
  box-shadow:0 8px 22px color-mix(in srgb, var(--tcp,#4a86f7) 34%, transparent);
}
.outil-tete h1{font-size:clamp(23px,4vw,31px);line-height:1.15}
.ot-sub{color:var(--txt2);font-size:15px;margin-top:3px}

/* ═══════════ CARTES ═══════════
   Verre clair : blanc légèrement translucide posé sur la brume, liseré
   lumineux en haut (le `inset 0 1px 0 #fff` fait la fine arête de lumière). */
.carte{
  background:linear-gradient(170deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 100%);
  border:1px solid var(--brd);border-radius:var(--rad-lg);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
  padding:clamp(18px,3vw,28px);
}
.carte + .carte{margin-top:18px}
.carte-t{font-size:17px;margin-bottom:4px;display:flex;align-items:center;gap:9px}
.carte-t svg{color:var(--accent-txt)}
.carte-sub{color:var(--txt2);font-size:13.5px;margin-bottom:18px}

/* hauteurs naturelles : une carte étirée sur un voisin plus grand se lit comme
   un conteneur à moitié vide, ce qui est pire qu'un espace dans la grille */
.grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:900px){ .grille{grid-template-columns:minmax(0,1fr)} }

/* ═══════════ CHAMPS ═══════════ */
.champs{display:flex;flex-direction:column;gap:15px}
.champs-2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:520px){ .champs-2{grid-template-columns:1fr} }

.champ{display:block;position:relative}   /* ancre la bulle du curseur */
.ch-lab{display:block;font-weight:600;font-size:13.5px;color:var(--txt);margin-bottom:6px}
.ch-box{
  display:flex;align-items:center;gap:2px;
  background:var(--card-2);border:1.5px solid var(--brd-2);border-radius:14px;
  padding:0 14px;transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ch-box:focus-within{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
.ch-box input{
  flex:1 1 auto;min-width:0;width:100%;border:0;background:transparent;outline:none;
  padding:13px 0;font-size:17px;font-weight:600;letter-spacing:-.01em;
}
.ch-box input::-webkit-outer-spin-button,.ch-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ch-box input[type=number]{-moz-appearance:textfield}
.ch-unite{flex:0 0 auto;color:var(--txt3);font-weight:600;font-size:15px;padding-left:4px}
.ch-aide{display:block;color:var(--txt3);font-size:12.5px;margin-top:6px;line-height:1.45}

/* Le curseur qui accompagne un champ.
   Hauteur 44px = la cible tactile minimale ; la piste reste fine (6px) et se
   place au milieu de cette bande, donc le doigt a de la place sans que le
   dessin s'épaississe. */
.ch-curseur{
  width:100%;height:44px;margin-top:4px;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.ch-curseur::-webkit-slider-runnable-track{height:6px;margin-top:19px;border-radius:99px;background:var(--brd-2)}
.ch-curseur::-moz-range-track{height:6px;border-radius:99px;background:var(--brd-2)}
.ch-curseur::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:#fff;border:3px solid var(--accent-deep);box-shadow:0 2px 8px rgba(28,43,74,.22);
}
.ch-curseur::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--accent-deep);
  box-shadow:0 2px 8px rgba(28,43,74,.22);
}
.ch-curseur:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft)}

/* ═══ Curseurs à crans : bulle de valeur + graduations ═══ */
.cur-bulle{
  position:absolute;transform:translate(-50%,-135%);z-index:6;pointer-events:none;
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:9px;white-space:nowrap;
  opacity:0;transition:opacity .15s ease;
}
.cur-bulle.on{opacity:1}
.cur-bulle::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--ink);
}
/* Les graduations logent sous la piste, qui est centrée dans les 44px du
   curseur : depuis le bas de celui-ci, la piste se termine 19px plus haut. */
.crans{position:relative;height:0;pointer-events:none}
.cran{
  position:absolute;top:-17px;width:2px;height:5px;border-radius:2px;
  background:var(--brd-2);transform-origin:top center;
}
.cran.aimant{background:var(--accent-deep);height:7px;top:-18px}
.cran.actif{animation:cranPulse .45s ease}
@keyframes cranPulse{0%{transform:scaleY(1)}40%{transform:scaleY(1.9)}100%{transform:scaleY(1)}}

/* Segments (choix parmi 2-4) */
.seg{display:flex;gap:4px;background:var(--card-2);border:1.5px solid var(--brd-2);border-radius:14px;padding:4px}
.seg button{
  flex:1 1 0;min-width:0;border:0;background:transparent;border-radius:10px;
  padding:10px 8px;font-size:13.5px;font-weight:600;color:var(--txt2);
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.seg button[aria-checked="true"]{background:#fff;color:var(--accent-txt);box-shadow:0 1px 3px rgba(28,43,74,.12)}

/* ═══════════ RÉSULTATS ═══════════ */
.heros{
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(74,134,247,.14), transparent 62%),
    linear-gradient(155deg,#fdfeff 0%,#eff4fe 58%,#f2effe 100%);
  border:1px solid var(--brd);border-radius:var(--rad);
  padding:26px 22px 22px;text-align:center;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 #fff;
}
/* le liseré du haut + une lueur douce derrière le chiffre */
.heros::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad-primary);
}
.heros::after{
  content:"";position:absolute;left:50%;top:38%;width:min(360px,78%);height:120px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side, rgba(74,134,247,.20), transparent 72%);
}
.h-lab{position:relative;color:var(--txt2);font-size:13.5px;font-weight:600;letter-spacing:.01em}
/* Chiffre-héros : chiffres proportionnels (tabular serait trop lâche en grand)
   et un dégradé d'encre — les deux extrémités restent AA, donc lisible même
   là où le dégradé est le plus clair. */
.h-val{
  position:relative;
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:600;
  font-size:clamp(36px,7.4vw,54px);line-height:1.05;letter-spacing:-.035em;
  margin:8px 0 5px;color:var(--accent-txt);
  background:linear-gradient(100deg,#1c5fc9 0%,#2f6ae0 42%,#6247d8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.h-val.negatif{
  background:linear-gradient(100deg,#95560e,#c07016);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.h-sub{position:relative;color:var(--txt2);font-size:13.5px}
/* repli : sans background-clip:text, la couleur pleine s'applique */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .h-val{-webkit-text-fill-color:currentColor;background:none}
}

/* ═══ Tuiles de résultat — chacune porte SA pastille colorée ═══
   La couleur vient de la pastille, pas d'un filet de bord : c'est elle qui
   donne le rythme coloré à la rangée de résultats. */
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin-top:14px}
.tuile{
  background:var(--card);border:1px solid var(--brd);border-radius:16px;padding:14px 15px;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"ic lab" "ic val" "ic sub";
  gap:1px 11px;align-content:start;
  /* sans min-width:0 la largeur mini de la tuile (pastille + libellé insécable)
     dépasse la piste de la grille, et auto-fit casse la rangée en deux */
  min-width:0;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tuile .t-lab,.tuile .t-sub{overflow-wrap:anywhere}
.t-ic{
  grid-area:ic;align-self:start;width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tk,#4a86f7) 78%, #fff), var(--tk,#4a86f7));
  box-shadow:0 5px 14px color-mix(in srgb, var(--tk,#4a86f7) 34%, transparent);
}
/* le projecteur : la tuile dont la série est illuminée se soulève */
.tuile.est-lie{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--brd-2)}
.t-lab{grid-area:lab;color:var(--txt2);font-size:12.5px;font-weight:600;line-height:1.3}
.t-val{
  grid-area:val;font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;
  font-size:23px;letter-spacing:-.025em;color:var(--txt);margin-top:3px;
}
.t-sub{grid-area:sub;color:var(--txt3);font-size:11.5px;margin-top:2px;line-height:1.35}
/* sans pastille, la tuile reste une simple pile */
.tuile:not(:has(.t-ic)){grid-template-columns:minmax(0,1fr);grid-template-areas:"lab" "val" "sub"}

/* ═══════════ GRAPHIQUES ═══════════
   Marques fines, grille discrète, étiquettes en jetons de texte (jamais en
   couleur de série), 2px de surface entre les aplats qui se touchent.        */
.viz{position:relative;margin-top:16px}
.viz svg{display:block;width:100%;height:auto;overflow:visible}
.viz .v-grille{stroke:var(--viz-grille);stroke-width:1;shape-rendering:crispEdges}
.viz .v-axe{stroke:var(--viz-axe);stroke-width:1;shape-rendering:crispEdges}
.viz .v-lig{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz .v-aire{stroke:none}
.viz .v-pt{stroke:var(--card);stroke-width:2}
/* ⚠️ Le SVG a une viewBox de 680 unités : sur un téléphone il est rendu à
   environ la moitié, donc 11 unités deviendraient ~6 px illisibles. La taille
   est exprimée en unités de viewBox et augmentée quand la surface rétrécit. */
.viz text{fill:var(--txt3);font-size:11px;font-family:'Inter',sans-serif;font-variant-numeric:tabular-nums}
.viz text.v-etiq{fill:var(--txt);font-weight:600;font-size:12px}
@media (max-width:900px){ .viz text{font-size:14px} }
@media (max-width:560px){ .viz text{font-size:18px} }

/* Légende — toujours présente dès 2 séries. Les pastilles servent aussi de
   poignées au projecteur : les survoler illumine leur série dans le graphe. */
.legende{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:12px;justify-content:center}
.leg{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt2);font-weight:500;
  padding:4px 10px;border-radius:9px;transition:background .15s ease,color .15s ease;
}
.leg i{width:12px;height:12px;border-radius:4px;background:var(--lc);flex:0 0 auto}
.leg:hover,.leg.est-lie{background:var(--card-2);color:var(--txt)}

/* ═══ Le projecteur lié ═══
   data-spot sur .viz = l'index de la série illuminée : elle reste pleine,
   le reste s'éteint doucement. La rangée du tableau liée s'illumine aussi. */
.viz .v-seg{transition:opacity .2s ease}
.viz[data-spot] .v-seg{opacity:.22}
.viz[data-spot="0"] .v-s0,.viz[data-spot="1"] .v-s1,
.viz[data-spot="2"] .v-s2,.viz[data-spot="3"] .v-s3{opacity:1}
table.tbl tbody tr.est-lie td{background:#e9f0fd}

/* Même idée pour les barres de grandeur, liées par nom.
   ⚠️ On estompe la MARQUE, jamais le TEXTE : baisser l'opacité de toute la
   rangée ferait tomber le nom et le montant sous le contraste minimal. */
.viz .b-piste{transition:opacity .18s ease}
.viz .barre .b-nom,.viz .barre .b-val{transition:color .18s ease}
.viz.spot-nom .barre:not(.est-lie) .b-piste{opacity:.3}
.viz.spot-nom .barre:not(.est-lie) .b-nom,
.viz.spot-nom .barre:not(.est-lie) .b-val{color:var(--txt3)}
.viz.spot-nom .barre.est-lie .b-plein{filter:brightness(1.07)}

/* Infobulle de graphique */
.viz-bulle{
  position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-118%);
  background:var(--ink);color:#fff;border-radius:11px;padding:9px 12px;
  font-size:12.5px;line-height:1.45;white-space:nowrap;z-index:8;
  box-shadow:0 8px 24px rgba(28,43,74,.28);transition:opacity .12s ease;
}
.viz-bulle.on{opacity:1}
.viz-bulle b{font-weight:600}
.viz-bulle .vb-l{display:flex;align-items:center;gap:7px}
.viz-bulle .vb-l i{width:9px;height:9px;border-radius:3px;background:var(--lc);flex:0 0 auto}

/* Barres de magnitude (une seule teinte : c'est une grandeur, pas une identité) */
.barres{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.barre{display:grid;grid-template-columns:minmax(96px,34%) 1fr auto;gap:12px;align-items:center}
.b-nom{font-size:13.5px;color:var(--txt);font-weight:500;min-width:0;overflow-wrap:anywhere;
  display:flex;align-items:center;gap:8px}
/* la pastille de couleur du poste, devant son nom */
.b-pastille{
  flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg, color-mix(in srgb,var(--pc,#5b8bf0) 76%, #fff), var(--pc,#5b8bf0));
  box-shadow:0 3px 8px color-mix(in srgb,var(--pc,#5b8bf0) 34%, transparent);
}
.b-piste{display:block;height:22px;background:var(--card-2);border-radius:0 6px 6px 0;position:relative;overflow:hidden}
/* ⚠️ display:block OBLIGATOIRE : un <span> inline ignore width/height — la barre
   resterait un rail vide. Piège déjà payé sur mon-budget.html. */
.b-plein{
  display:block;height:100%;background:var(--bc,var(--s1));
  border-radius:0 4px 4px 0;                                  /* bout arrondi, carré à la base */
  transition:width .42s cubic-bezier(.22,1,.36,1);min-width:2px;
}
.b-val{font-size:13.5px;font-weight:600;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ═══════════ DIAGRAMME CIRCULAIRE ═══════════ */
.dn{display:grid;grid-template-columns:minmax(210px,300px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:center}
@media (max-width:700px){ .dn{grid-template-columns:minmax(0,1fr)} }

.dn-rond{position:relative;width:100%;max-width:300px;margin-inline:auto}
.dn-rond svg{display:block;width:100%;height:auto;overflow:visible}
.dn-arc{
  transition:stroke-width .22s cubic-bezier(.22,1,.36,1), opacity .22s ease;
  cursor:pointer;
}
/* quand une part est mise en avant, les autres reculent */
.dn.spot .dn-arc{opacity:.26}
.dn.spot .dn-arc.on{opacity:1;stroke-width:40}

.dn-centre{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;
  pointer-events:none;padding:0 22%;
}
.dn-lab{display:block;color:var(--txt2);font-size:12px;font-weight:600;line-height:1.25;
  overflow-wrap:anywhere}
.dn-val{
  display:block;font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;
  font-size:clamp(20px,4.4vw,27px);letter-spacing:-.025em;color:var(--txt);margin:3px 0 2px;
}
.dn-sub{display:block;color:var(--txt3);font-size:11.5px}

/* la légende — l'identité ne repose jamais sur la couleur seule */
.dn-leg{list-style:none;display:flex;flex-direction:column;gap:3px;min-width:0}
.dn-li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.dn-li:hover,.dn-li.on{background:color-mix(in srgb,var(--pc) 9%,#fff);border-color:color-mix(in srgb,var(--pc) 26%,var(--brd))}
.dn-pt{width:12px;height:12px;border-radius:4px;background:var(--pc);flex:0 0 auto}
.dn-nom{font-size:13px;color:var(--txt);font-weight:500;overflow-wrap:anywhere}
.dn-mt{font-size:13px;color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.dn-pc{font-size:12px;color:var(--txt3);font-variant-numeric:tabular-nums;white-space:nowrap;min-width:38px;text-align:right}

@media (prefers-reduced-motion:reduce){ .dn-arc{transition:none} }

/* ═══════════ CARROUSEL ═══════════ */
.car{position:relative}
.car-piste{overflow:hidden;border-radius:var(--rad)}
.car-rail{
  display:flex;
  transition:transform .62s cubic-bezier(.22,1,.36,1);
  will-change:transform;
}
.car-dia{flex:0 0 100%;min-width:0;padding:2px}
.dia-t{color:var(--txt2);font-size:13.5px;margin-bottom:16px;text-align:center}
/* Une diapositive hors écran ne doit pas allonger la carte — mais elle ne
   s'efface qu'APRÈS le glissement du rail (620 ms) : sans ce délai, la
   diapositive sortante disparaissait instantanément et le rail glissait
   sur du vide. */
.car-dia:not(.on){visibility:hidden;height:0;overflow:hidden;
  transition:visibility 0s .66s, height 0s .66s}
.car-dia.on{visibility:visible;height:auto;transition:none}

.car-nav{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;flex-wrap:wrap}
/* 44px partout : la cible tactile minimale vaut aussi pour les commandes du carrousel */
.car-fl{
  width:44px;height:44px;flex:0 0 auto;border:1px solid var(--brd-2);background:var(--card);
  border-radius:13px;color:var(--txt2);display:grid;place-items:center;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .16s ease;
}
.car-fl:hover{background:var(--accent-soft);color:var(--accent-txt);border-color:var(--accent);transform:translateY(-1px)}
.car-puces{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.car-puce{
  border:1px solid transparent;background:transparent;border-radius:999px;
  padding:8px 14px;min-height:44px;font-size:12.5px;font-weight:600;color:var(--txt2);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.car-puce:hover{background:var(--card-2);color:var(--txt)}
.car-puce.on{
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 16%,#fff), color-mix(in srgb,var(--violet) 14%,#fff));
  border-color:color-mix(in srgb,var(--accent) 34%,var(--brd));color:var(--accent-txt);
}
@media (prefers-reduced-motion:reduce){ .car-rail{transition:none} }
@media (max-width:560px){ .car-puce-t{display:none} .car-puce{padding:0;width:44px} }

/* ═══════════ TABLEAUX (la vue tableau, toujours disponible) ═══════════ */
.tbl-enrob{overflow-x:auto;margin-top:14px;border:1px solid var(--brd);border-radius:16px}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:460px}
table.tbl th,table.tbl td{padding:10px 13px;text-align:right;border-bottom:1px solid var(--brd);white-space:nowrap}
table.tbl th:first-child,table.tbl td:first-child{text-align:left}
table.tbl thead th{
  background:var(--card-2);font-weight:600;color:var(--txt2);font-size:12.5px;
  position:sticky;top:0;z-index:1;
}
table.tbl td{font-variant-numeric:tabular-nums}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover td{background:#fafcff}
table.tbl tr.tot td{font-weight:600;background:var(--card-2)}
.tbl-defil{max-height:340px;overflow-y:auto}

/* ═══════════ BOUTONS & ACTIONS ═══════════ */
.actions{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--brd-2);background:var(--card);color:var(--txt);
  border-radius:14px;padding:12px 18px;font-size:14px;font-weight:600;min-height:46px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brd)}
.btn:active{transform:translateY(0)}
.btn-main{background:var(--btn);color:#fff;border-color:transparent;box-shadow:var(--glow)}
.btn-main:hover{box-shadow:0 12px 28px rgba(42,176,230,.38)}
.btn-fant{background:transparent;border-color:transparent;color:var(--accent-txt)}
.btn-fant:hover{background:var(--accent-soft);box-shadow:none}
.btn svg{flex:0 0 auto}
.btn-p{padding:8px 12px;min-height:40px;font-size:13px;border-radius:11px}

/* ═══════════ NOTES, BULLES ÉDUCATIVES, MENTIONS ═══════════ */
.note{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--card-2);border:1px solid var(--brd);border-radius:15px;
  padding:13px 15px;color:var(--txt2);font-size:13px;line-height:1.5;margin-top:14px;
}
.note svg{flex:0 0 auto;color:var(--accent-txt);margin-top:1px}
.note.alerte{background:var(--ambre-soft);border-color:rgba(207,123,28,.3);color:var(--ambre-txt)}
.note.alerte svg{color:var(--ambre)}

/* « Pourquoi ? » — l'explication qu'on déplie, jamais un jugement */
.pourquoi{margin-top:12px;border:1px solid var(--brd);border-radius:15px;background:var(--card-2);overflow:hidden}
.pourquoi>summary{
  list-style:none;cursor:pointer;padding:12px 15px;font-size:13.5px;font-weight:600;
  color:var(--accent-txt);display:flex;align-items:center;gap:9px;
}
.pourquoi>summary::-webkit-details-marker{display:none}
.pourquoi>summary::before{
  content:"?";flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  background:var(--accent-txt);color:#fff;font-size:12.5px;font-weight:700;
  display:grid;place-items:center;
}
.pourquoi>summary:hover{background:#eaf1fd}
.pourquoi .pq-corps{padding:0 15px 15px 45px;font-size:13px;color:var(--txt2);line-height:1.6}
.pourquoi .pq-corps p+p{margin-top:9px}

.mention{color:var(--txt3);font-size:12px;line-height:1.55;margin-top:20px;text-align:center;max-width:660px;margin-inline:auto}

/* la ligne de statut (role=status) sous la barre d'actions : « fichier prêt » */
.statut-ligne{
  margin-top:11px;font-size:13px;color:var(--txt2);
  opacity:0;transition:opacity .3s ease;min-height:1em;
}
.statut-ligne.on{opacity:1}

/* ═══ Micro-vie au survol ═══
   Les pastilles rebondissent, les tuiles se soulèvent — transform seulement,
   déclenché PAR l'usager : jamais de relayout, jamais de mouvement non demandé. */
.t-ic,.b-pastille,.dn-pt,.leg i,.ot-ic{transition:transform .24s cubic-bezier(.34,1.5,.5,1)}
.tuile:hover .t-ic{transform:scale(1.12) rotate(-5deg)}
.tuile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.barre:hover .b-pastille{transform:scale(1.15) rotate(-5deg)}
.dn-li:hover .dn-pt,.dn-li.on .dn-pt{transform:scale(1.3)}
.leg:hover i,.leg.est-lie i{transform:scale(1.25)}
.outil-tete:hover .ot-ic{transform:scale(1.06) rotate(-3deg)}

/* Mouvement réduit : plus rien ne bouge tout seul — ni les glissements, ni la
   pulsation des crans, ni les halos de fond qui dérivent en permanence. */
@media (prefers-reduced-motion:reduce){
  .b-plein,.viz .v-seg,.viz .b-piste,.viz .barre,.tuile,.leg{transition:none}
  .t-ic,.b-pastille,.dn-pt,.leg i,.ot-ic{transition:none}
  .cran.actif{animation:none}
}

/* ═══════════ HUB (outils.html) ═══════════ */
.hub-tete{text-align:center;margin-bottom:clamp(24px,4vw,38px)}
.hub-tete h1{font-size:clamp(28px,5.5vw,42px);line-height:1.12}
.hub-tete p{color:var(--txt2);font-size:clamp(15px,2.2vw,17px);margin-top:10px;max-width:600px;margin-inline:auto}

.hub-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}

.lanceur{
  display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--brd);border-radius:var(--rad-lg);
  padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate;
  transition:transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease, border-color .26s ease;
}
/* un lavis de la couleur de l'outil, en haut de la carte : chaque tuile a sa
   teinte propre, et elle s'intensifie quand on la survole */
.lanceur::before{
  content:"";position:absolute;inset:-40% -30% auto -30%;height:76%;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--tcp) 26%, transparent), transparent 70%);
  opacity:.75;transition:opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.lanceur:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--tcp) 30%,var(--brd))}
.lanceur:hover::before{opacity:1;transform:translateY(6%) scale(1.06)}
.l-ic{
  width:50px;height:50px;border-radius:16px;display:grid;place-items:center;color:#fff;
  background:var(--tc);box-shadow:0 8px 20px color-mix(in srgb, var(--tcp) 32%, transparent);
  margin-bottom:4px;transition:transform .26s cubic-bezier(.34,1.4,.5,1);
}
.lanceur:hover .l-ic{transform:scale(1.06) rotate(-3deg)}
.l-nom{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.015em}
.l-desc{color:var(--txt2);font-size:13.5px;line-height:1.5;flex:1 1 auto}
.l-go{
  display:inline-flex;align-items:center;gap:6px;color:var(--accent-txt);
  font-size:13.5px;font-weight:600;margin-top:4px;
}
.l-go svg{transition:transform .24s ease}
.lanceur:hover .l-go svg{transform:translateX(4px)}

/* ═══ La carte VEDETTE du hub — celle qui invite à commencer ═══
   Elle brille : un reflet balaie la carte toutes les ~5 s (transform seulement,
   petit élément → compositeur), bordure et fond teintés, badge d'invitation,
   appel à l'action en bouton plein. Sur grand écran elle prend deux colonnes. */
.lanceur-vedette{
  border-color:color-mix(in srgb, var(--accent) 42%, var(--brd));
  background:linear-gradient(160deg,#ffffff 0%,#f5f8ff 55%,#f4f0fe 100%);
  box-shadow:var(--shadow), 0 10px 34px rgba(74,134,247,.20);
}
.lanceur-vedette:hover{box-shadow:var(--shadow-lift), 0 14px 40px rgba(74,134,247,.28)}
@media (min-width:700px){ .lanceur-vedette{grid-column:span 2} }

.l-badge{
  position:absolute;top:14px;right:14px;z-index:2;
  padding:6px 12px;border-radius:999px;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;color:#fff;background:var(--btn);box-shadow:var(--glow);
}
.lanceur-vedette .l-go{
  align-self:flex-start;margin-top:10px;
  background:var(--btn);color:#fff;padding:12px 18px;border-radius:13px;
  box-shadow:var(--glow);font-size:14px;
}
.lanceur-vedette .l-go svg{color:#fff}
.lanceur-vedette:hover .l-go{box-shadow:0 12px 28px rgba(74,134,247,.38)}

/* Le reflet qui balaie — la « brillance ».
   ⚠️ z-index NÉGATIF : grâce à isolation:isolate sur .lanceur, il peint
   AU-DESSUS du fond de la carte mais SOUS le texte — en z positif, le voile
   blanc passait périodiquement PAR-DESSUS le titre et cassait le contraste.
   ⚠️ UN SEUL passage au chargement (WCAG 2.2.2 : pas d'animation automatique
   sans fin) ; ensuite le reflet rejoue à chaque survol — geste de l'usager. */
.l-brille{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1}
.l-brille::before{
  content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:34%;
  background:linear-gradient(100deg, transparent 12%, rgba(255,255,255,.7) 50%, transparent 88%);
  transform:translateX(-170%) skewX(-18deg);
}
@media (prefers-reduced-motion:no-preference){
  .l-brille::before{animation:brilleV 2.6s cubic-bezier(.4,0,.2,1) .9s 1 both}
  .lanceur-vedette:hover .l-brille::before{animation:brilleV2 1.8s cubic-bezier(.4,0,.2,1) .05s 1 both}
}
@keyframes brilleV{
  0%{transform:translateX(-170%) skewX(-18deg)}
  100%{transform:translateX(430%) skewX(-18deg)}
}
@keyframes brilleV2{
  0%{transform:translateX(-170%) skewX(-18deg)}
  100%{transform:translateX(430%) skewX(-18deg)}
}

.hub-pied{
  margin-top:34px;background:var(--card);border:1px solid var(--brd);border-radius:var(--rad-lg);
  padding:22px 24px;box-shadow:var(--shadow);
}
.hub-pied h2{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:9px}
.hub-pied h2 svg{color:var(--accent-txt)}
.hub-pied p{color:var(--txt2);font-size:13.5px;line-height:1.6}
.hub-pied p+p{margin-top:9px}

/* ═══════════ FEUILLE D'IMPRESSION ═══════════
   Cachée à l'écran, révélée seulement par l'imprimante.                      */
#feuille-impression{display:none}

@media print{
  @page{margin:1.4cm}
  html,body{background:#fff !important}
  .barre-haut,.page,.actions,.viz-bulle,.statut-ligne{display:none !important}
  /* le dégradé d'encre du chiffre-héros ne s'imprime pas : encre pleine */
  .h-val{-webkit-text-fill-color:currentColor !important;background:none !important;color:#1c5fc9 !important}
  #feuille-impression{display:block !important;color:#000;font-family:'Inter',system-ui,sans-serif;font-size:11pt}

  .pr-head{border-bottom:2.5px solid #1c5fc9;padding-bottom:9px;margin-bottom:16px}
  .pr-brand{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:13pt;color:#1c5fc9;letter-spacing:-.01em}
  .pr-title{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:17pt;margin-top:5px;letter-spacing:-.02em}
  .pr-sub{font-size:10.5pt;color:#444;margin-top:3px}
  .pr-date{font-size:9pt;color:#666;margin-top:5px}

  .pr-sec{margin-top:16px;break-inside:avoid}
  .pr-sec h3{font-family:'Space Grotesk','Inter',sans-serif;font-size:12pt;margin-bottom:7px;color:#1c5fc9}

  .pr-som{display:flex;gap:10px;margin-bottom:6px}
  .pr-som>div{flex:1 1 0;border:1px solid #ccc;border-radius:7px;padding:9px 11px}
  .pr-som .k{font-size:8.5pt;color:#555;text-transform:uppercase;letter-spacing:.04em}
  .pr-som .v{font-family:'Space Grotesk','Inter',sans-serif;font-weight:600;font-size:15pt;margin-top:2px}

  table.pr-tbl{width:100%;border-collapse:collapse;font-size:10pt;margin-top:6px}
  table.pr-tbl th,table.pr-tbl td{border:1px solid #ccc;padding:5px 8px;text-align:right}
  table.pr-tbl th:first-child,table.pr-tbl td:first-child{text-align:left}
  table.pr-tbl thead th{background:#e9f0fd;font-weight:600}
  table.pr-tbl tr.tot td{font-weight:600;background:#f4f7fe}
  table.pr-tbl td.depasse{color:#cf7b1c}
  table.pr-tbl .indent{padding-left:20px}

  .pr-foot{margin-top:20px;border-top:1px solid #ccc;padding-top:9px;font-size:8.5pt;color:#555;line-height:1.45}
  .pr-foot p+p{margin-top:5px}
  .pr-foot .pr-invite{color:#1c5fc9;font-weight:600}
}

/* ═══ Pont humain (bas de chaque calculatrice) + maillage ═══ */
.pont-humain .actions a.btn { text-decoration: none; }
.autres-outils {
  margin: 18px auto 0; max-width: 760px; text-align: center;
  font-size: .86rem; color: #5d6b80; line-height: 2;
}
.autres-outils .ao-t { font-weight: 700; color: #3c4a5e; margin-right: 4px; }
.autres-outils a {
  color: var(--accent-txt); text-decoration: none; margin: 0 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.autres-outils a:hover { border-bottom-color: var(--accent-txt); }
.lanceur-contact .l-ic { color: #0f4c81; }
@media print {
  .pont-humain, .autres-outils { display: none !important; }
  .pr-coord { font-weight: 700; color: #1c2b4a; margin-top: 4px; }
}

/* ═══ Blocs « savoir » sourcés + page taxe de bienvenue ═══ */
a.src { color: var(--accent-txt); text-decoration: underline; text-underline-offset: 2px; }
a.src:hover { color: var(--accent-deep); }
.bar-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 6px; }
.bar-col h3 { font-size: 1rem; margin: 0 0 10px; color: #1c2b4a; }
.bar-src, .bar-note { font-size: .82rem; color: #5d6b80; margin: 10px 0 0; }
.savoir h3 { font-size: 1rem; color: #1c2b4a; margin: 20px 0 8px; }
.savoir h3:first-of-type { margin-top: 4px; }
.savoir p { font-size: .92rem; color: #44536a; line-height: 1.65; margin: 0 0 4px; }
.sources .src-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.sources .src-liste a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px;
  border-radius: 12px; border: 1px solid #dfe7f2; background: #f8fbff;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.sources .src-liste a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(28,43,74,.08); }
.sources .src-liste strong { color: var(--accent-txt); font-size: .95rem; }
.sources .src-liste span { color: #5d6b80; font-size: .84rem; line-height: 1.5; }
@media print { .sources, .savoir { display: none !important; } }

/* ═══ Bande « Parler à un conseiller » — le bas de page qui attire l'œil ═══ */
.bande-contact {
  position: relative; overflow: hidden;
  max-width: 1060px; margin: 30px auto 20px;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; align-items: center;
  padding: 36px 42px; border-radius: 26px;
  background: linear-gradient(135deg, #1d3a8f 0%, #2f6ae0 48%, #6236d8 100%);
  color: #fff;
  box-shadow: 0 26px 60px -18px rgba(29, 58, 143, .55);
}
.bande-contact p { color: rgba(255,255,255,.88); }
.bande-contact a { color: #fff; }
.bande-contact::before {
  content: ""; position: absolute; top: -70px; right: -60px; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
  pointer-events: none;
}
.bande-contact .bc-t {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 1.55rem; font-weight: 700;
  margin: 0 0 10px; color: #fff; letter-spacing: -.01em;
}
.bande-contact .bc-t svg { flex-shrink: 0; }
.bande-contact .bc-sub { margin: 0 0 12px; color: rgba(255,255,255,.88); line-height: 1.6; font-size: .98rem; }
.bande-contact .bc-sub strong { color: #fff; }
.bande-contact .bc-tel { margin: 0 0 14px; font-size: .95rem; color: rgba(255,255,255,.88); }
.bande-contact .bc-tel a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.bande-contact .bc-confid {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: .8rem; color: rgba(255,255,255,.75);
}
.bande-contact .bc-form { display: grid; gap: 10px; position: relative; }
.bande-contact .bc-form label { display: grid; gap: 4px; }
.bande-contact .bc-form label span { font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: rgba(255,255,255,.85); }
.bande-contact .bc-form input[type="text"], .bande-contact .bc-form input[type="email"], .bande-contact .bc-form textarea {
  width: 100%; box-sizing: border-box; border: none; border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: .95rem; color: #1c2b4a; background: #fff;
}
.bande-contact .bc-form textarea { resize: vertical; min-height: 74px; }
.bande-contact .bc-form input:focus-visible, .bande-contact .bc-form textarea:focus-visible, .bande-contact .bc-btn:focus-visible {
  outline: 3px solid #ffd166; outline-offset: 2px;
}
.bande-contact .bc-miel { display: none !important; }
.bande-contact .bc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 2px; padding: 13px 18px; border: none; border-radius: 13px; cursor: pointer;
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 1rem;
  color: #1c5fc9; background: #fff;
  box-shadow: 0 10px 26px rgba(3, 4, 40, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bande-contact .bc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(3, 4, 40, .32); }
.bande-contact .bc-merci {
  display: grid; justify-items: start; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 16px; padding: 22px 26px; font-size: 1.02rem;
}
.bande-contact .bc-merci-ic { color: #7ef0b2; }
.bande-contact .bc-merci p { margin: 0; color: rgba(255,255,255,.88); }
@media (max-width: 780px) {
  .bande-contact { grid-template-columns: 1fr; gap: 22px; padding: 28px 22px; }
}
@media print { .bande-contact { display: none !important; } }

/* ═══ Révélation de la bande contact ═══
   Posée quand elle entre dans l'écran (classe ajoutée par le kit), avec la même
   courbe que la cascade : une seule grammaire de mouvement dans toute la
   bibliothèque. Sans JS (ou en reduced-motion), elle est simplement visible. */
@media (prefers-reduced-motion:no-preference){
  .bande-contact.a-reveler{opacity:0;transform:translateY(18px) scale(.99)}
  .bande-contact.a-reveler.revelee{
    opacity:1;transform:none;
    transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  }
}