/* ==================================================================== */
/*  Solvenda — direction artistique « Le Bulletin »                      */
/*                                                                       */
/*  Le produit EST un registre d'annonces légales. Sa page d'accueil doit */
/*  donc être la plus belle page de registre jamais composée, et non une  */
/*  page d'éditeur de logiciel. Tout découle de là :                      */
/*                                                                       */
/*   · le papier de publication, froid, jamais crème ;                    */
/*   · l'encre dense, les filets, aucune carte, aucun arrondi, aucune     */
/*     ombre portée ;                                                     */
/*   · la couleur ne décore jamais : elle dit la gravité. Un rouge de     */
/*     tampon pour l'échéance dépassée, un bleu d'archive pour naviguer,  */
/*     un vert de greffe pour le conforme ;                               */
/*   · trois fontes forgées maison, dont la mono (l'ancienne était celle  */
/*     du système, ce qui se lit immédiatement comme un gabarit).         */
/*                                                                       */
/*  Cette feuille est chargée APRÈS solvenda.css et la recouvre. Les noms */
/*  de classes d'origine sont tous conservés : les 60 000 pages basculent */
/*  sans toucher au balisage.                                             */
/* ==================================================================== */

@font-face{font-family:"Bulletin";src:url("/assets/fonts/solvenda-bulletin.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Greffe";src:url("/assets/fonts/solvenda-greffe.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Cote";src:url("/assets/fonts/solvenda-cote.woff2") format("woff2");font-display:swap}

:root{
  --papier:#EDEDE9; --papier-2:#E5E5E0; --papier-3:#DBDBD5;
  --encre:#15171B; --encre-2:#4A4E56;
  /* --encre-3 remonte le 25/08/2026 : #82868E ne donnait que 2,63:1 sur le papier le
     plus sombre, tres loin du seuil. Il porte les mentions de registre, les dates et
     les numeros : la matiere meme du bulletin passait sous la lisibilite. */
  --encre-3:#5d6066;
  --filet:rgba(21,23,27,.18); --filet-2:rgba(21,23,27,.34); --filet-fort:rgba(21,23,27,.62);
  --annonce:#A81E1A; --annonce-2:#7E1512;
  --archive:#1B3A5C; --greffe:#2C6349;
  /* --ambre eclairci le 25/08/2026 : 4,25:1 sur le papier sombre, sous le seuil AA. */
  --ambre:#7A4F10;

  /* Les jetons hérités pointent vers la nouvelle matière : tout le CSS
     d'origine bascule sans être réécrit ligne à ligne. */
  --ink:var(--papier); --ink-2:var(--papier-2); --panel:var(--papier-2);
  --line:var(--filet); --line-2:var(--filet-2);
  --txt:var(--encre); --muted:var(--encre-2); --dim:var(--encre-3);
  --paper:var(--papier); --paper-ink:var(--encre); --paper-muted:var(--encre-2); --paper-line:var(--filet);
  --brass:var(--encre); --brass-2:var(--annonce); --brass-deep:var(--encre);
  --signal:var(--encre); --signal-2:var(--annonce); --calm:var(--archive);
  --sev-liq:var(--annonce); --sev-red:var(--ambre); --sev-sau:var(--archive);
  --sev-clo:var(--encre-3); --ok:var(--greffe);

  --display:"Bulletin",Georgia,serif;
  --text:"Greffe",system-ui,sans-serif;
  --mono:"Cote",ui-monospace,monospace;
  --maxw:1240px; --r:0; --r-s:0;
}

/* ---- surface ---------------------------------------------------- */
/* Ni dégradé, ni grain, ni fond WebGL : un bulletin est imprimé sur du
   papier, pas éclairé par le dessous. */
body{background:var(--papier)!important;background-image:none!important;color:var(--encre);
  font-family:var(--text);font-weight:400;font-size:17px;line-height:1.62;letter-spacing:0}
body::before{display:none!important}
#bg-gl{display:none!important}
::selection{background:var(--encre);color:var(--papier)}

/* ---- typographie ------------------------------------------------ */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.02;color:var(--encre)}
h1{font-size:clamp(2.7rem,6.2vw,5rem)}
h2{font-size:clamp(1.9rem,3.5vw,2.9rem)}
h3{font-size:1.5rem;letter-spacing:-.012em}
p{color:var(--encre-2)}
a{color:var(--archive);text-decoration:none;border-bottom:1px solid rgba(27,58,92,.3)}
a:hover{text-decoration:none;border-bottom-color:var(--archive)}
strong,b{font-weight:600;color:var(--encre)}
.muted{color:var(--encre-2)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lead{color:var(--encre-2)}

/* La mention de bulletin remplace l'« eyebrow » : pas de pilule, pas de
   capitales hyper-espacées, pas de tiret devant. Une mention d'ours. */
.kicker,.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--encre-3);border:0;border-radius:0;
  padding:0;display:inline-block;background:none}
.eyebrow .dot{display:none}

/* ---- règle générale : ni arrondi, ni ombre ---------------------- */
.card,.btn,.chip,.plan,.kpi,.stat,.tape,.ticker,.cmp,.france-card,.demo-box,
.result-card,.auth-card,.field input,.field textarea,.flash,.deadline,
.faq details,.legal-table,.gtable,.versus,.cd,.split,.feat-item,.paper,
.nav .lang,.cmdk-panel,.cmdk-item,.demo-picks button,.demo-input input,
.spark,.hexagon,.tl-item,.freq-choix{border-radius:0!important;box-shadow:none!important}

/* ---- bandeau : une manchette de bulletin ------------------------ */
header.nav{position:sticky;top:0;z-index:100;backdrop-filter:none;
  background:var(--papier);border-bottom:2px solid var(--encre)}
.nav .wrap{height:auto;padding-top:15px;padding-bottom:13px;align-items:baseline;gap:22px}
.brand{font-family:var(--display);font-weight:400;font-size:1.62rem;letter-spacing:-.012em;
  color:var(--encre);border:0;gap:9px}
.brand svg{width:23px;height:23px}
.nav nav{gap:20px;align-items:baseline}
/* `:not(.btn)` ajoute le 25/08/2026 : sans lui cette regle l'emportait en specificite
   sur `.btn-primary` et peignait le bouton principal de l'en-tete en gris sur noir,
   soit 2,15:1. L'appel a l'action de toutes les pages, sur un produit qui encaisse. */
.nav nav a:not(.btn){color:var(--encre-2);font-size:.93rem;border:0}
.nav nav a:not(.btn):hover{color:var(--encre)}
.nav .lang{font-family:var(--mono);font-size:.7rem;color:var(--encre-3);
  border:1px solid var(--filet-2);padding:.24em .5em}
.cmdk-hint{border-color:var(--filet-2)!important;color:var(--encre-3)!important}

/* ---- boutons : des blocs, pas des galets ------------------------ */
.btn{font-family:var(--text);font-weight:500;font-size:.97rem;padding:.76em 1.4em;
  border:1px solid var(--encre);transition:background .2s,color .2s}
.btn:hover{transform:none}
.btn-primary{background:var(--encre);color:var(--papier);font-weight:500}
.btn-primary:hover{background:var(--papier);color:var(--encre)}
.btn-ghost{background:none;color:var(--encre);border-color:var(--filet-2)}
.btn-ghost:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* ---- blocs : un filet en tête, jamais un cadre mou -------------- */
.card,.result-card,.auth-card,.feat-item,.demo-box{background:none;border:0;
  border-top:1px solid var(--filet-fort);padding:22px 0 24px;transition:none}
.card:hover,.feat-item:hover{transform:none;border-color:var(--filet-fort)}
.card h3,.feat-item h3{font-family:var(--display);margin-bottom:.3em}
.card p,.feat-item p{color:var(--encre-2);font-size:1rem}
.card .ico,.feat-item .fx{color:var(--encre);width:30px;height:30px}
.feat-item::before{display:none}
.grid{gap:0 clamp(24px,4vw,52px)}
.grid .card,.grid .feat-item{padding-top:20px}

/* ---- indicateurs : le chiffre en display, le libellé en cote ---- */
.kpis{gap:0;border-top:1px solid var(--filet-fort);margin-bottom:30px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kpi{background:none;border:0;border-right:1px solid var(--filet);padding:18px 20px 18px 0}
.kpi:last-child{border-right:0}
.kpi .n,.stat .n{font-family:var(--display);font-weight:400;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--encre);line-height:.92}
.kpi.alert .n{color:var(--annonce)}
.kpi .l,.stat .l{font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--encre-3);margin-top:9px}
.stats{border-top:1px solid var(--filet-fort);padding-top:22px}
.stat{text-align:left}

/* ---- pastilles de gravité : la couleur est une donnée ---------- */
.chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;padding:.28em .55em;
  border:1px solid;background:none;text-transform:uppercase}
.chip.liq{color:var(--annonce);border-color:rgba(168,30,26,.45)}
.chip.red{color:var(--ambre);border-color:rgba(138,90,18,.45)}
.chip.sau{color:var(--archive);border-color:rgba(27,58,92,.4)}
.chip.clo,.chip.autre,.chip.plan{color:var(--encre-3);border-color:var(--filet-2)}

.deadline{font-family:var(--mono);font-size:.74rem;border:0;background:none;padding:0}
.deadline.urgent{color:var(--annonce)}
.deadline.forclos{color:var(--annonce-2);text-decoration:line-through}
.deadline.ouvert{color:var(--encre-2)}

/* ---- tableaux : ils assument d'être des tableaux ---------------- */
table.list,.gtable,.legal-table,.versus{border-collapse:collapse;width:100%}
table.list th,.gtable th,.legal-table th,.versus th{font-family:var(--mono);font-size:.66rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3);font-weight:400;
  text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--filet-fort);background:none}
table.list td,.gtable td,.legal-table td,.versus td{padding:12px 12px 12px 0;
  border-bottom:1px solid var(--filet);background:none;color:var(--encre)}
table.list tr:hover td{background:rgba(21,23,27,.035)}
.table-scroll table{min-width:520px}

/* ---- fil du bulletin (ex « tape ») ------------------------------ */
.tape,.ticker{border:0;border-top:2px solid var(--encre);border-bottom:1px solid var(--filet-fort);
  background:none}
.tape-head{border-bottom:1px solid var(--filet);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;color:var(--encre-3);padding:10px 0}
.tape-head .live{background:var(--annonce);width:6px;height:6px;border-radius:50%}
.tape-count b{font-family:var(--mono);color:var(--annonce)}
.tape-body{mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
.tape-row{border-bottom:1px solid var(--filet);padding:11px 0;font-size:.92rem}
.tape-row .siren{font-family:var(--mono);color:var(--encre-3)}
.tape-row .nom{color:var(--encre)}

/* ---- l'Hexagone : une carte statistique d'annuaire officiel ----- */
.france-card{background:none;border:0;border-top:2px solid var(--encre);padding-top:14px}
/* Le cadran du hero avait gardé le fond sombre de l'ancienne direction : sur le papier
   du Bulletin, il posait de l'encre grise sur un panneau presque noir, 1,39:1. Tout le
   bloc de preuve — le pouls national, l'exposition détectée, le décompte de procédures —
   était illisible. On le repose sur le papier, filets nets, sans arrondi ni flou. */
/* La ligne d'en-tete du registre gardait le liseré doré de l'ancienne direction : sur le
   papier, rouge annonce sur gris, 1,37:1. On la traite comme une tete de colonne de
   bulletin officiel : filet net, encre pleine. */
.ledger{border:1px solid var(--filet-2);border-radius:0;background:var(--papier)}
.ledger .lrow{border-bottom:1px solid var(--filet)}
.ledger .lrow.h{background:var(--papier-3);color:var(--encre);font-weight:600}
.ledger .hash{color:var(--encre-2)}

/* Ce qui est neuf se voit. Une pastille sobre et un filet a gauche : dans un registre,
   on ne surligne pas, on marque la marge. */
tr.neuve td:first-child{box-shadow:inset 3px 0 0 0 var(--annonce)}
.pastille-neuve{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid var(--annonce);
  color:var(--annonce);font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  vertical-align:middle}
.compteur-neuf{margin-left:10px;padding:2px 9px;background:var(--annonce);color:var(--papier);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;font-weight:500;vertical-align:middle}

.hero-im-cockpit{background:var(--papier-2);backdrop-filter:none;border:1px solid var(--filet-2);
  border-radius:0;box-shadow:none}
.hero-im-cockpit .cockpit-sub b{color:var(--annonce)}
.hero-im-cockpit .france-head,.hero-im-cockpit .cockpit-k,.hero-im-cockpit .cockpit-sub{color:var(--encre-2)}
.hero-im-cockpit .cockpit-v{color:var(--encre)}

.france-head{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--encre-3);
  border-bottom:1px solid var(--filet);padding-bottom:9px}
.france-head .live{background:var(--annonce)}
.hexagon{stroke:var(--filet-2);fill:none}
.fr-bubble circle{fill:var(--annonce)!important}
.france-cov{font-family:var(--mono);font-size:.7rem;color:var(--encre-3)}
.france-cov b{color:var(--encre)}
.cockpit-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;color:var(--encre-3)}
.cockpit-v{font-family:var(--display);color:var(--encre)}

/* ---- offres : trois colonnes réglées --------------------------- */
.plans{gap:0;border-top:2px solid var(--encre)}
.plan{background:none;border:0;border-right:1px solid var(--filet);padding:26px 26px 26px 0}
.plan:last-child{border-right:0}
.plan.feat{background:rgba(21,23,27,.035);padding-left:22px}
.plan.feat::after{display:none}
.pname{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-3)}
.price{font-family:var(--display);font-weight:400;color:var(--encre);letter-spacing:-.03em}
.price small{font-family:var(--mono);font-size:.62em;letter-spacing:0}
.yr{font-family:var(--mono);font-size:.72rem;color:var(--encre-3)}
.pd{color:var(--encre-2);font-size:.95rem}

/* ---- questions fréquentes : un dépliant réglé ------------------- */
.faq details{border:0;border-bottom:1px solid var(--filet);background:none;padding:0}
.faq summary{font-family:var(--display);font-size:1.12rem;color:var(--encre);padding:16px 34px 16px 0}
.faq summary::after{color:var(--encre-3)}
.faq .faq-a{color:var(--encre-2);padding:0 0 18px}

/* ---- formulaires ------------------------------------------------ */
.field input,.field textarea,.demo-input input{background:var(--papier-2);border:1px solid var(--filet-2);
  color:var(--encre);font-family:var(--text)}
.field input:focus,.field textarea:focus,.demo-input input:focus{border-color:var(--encre);outline:0}
.field label{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--encre-3)}
.demo-picks button{background:none;border:1px solid var(--filet-2);color:var(--encre-2);font-family:var(--mono);font-size:.74rem}
.demo-picks button:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.flash{border:0;border-left:3px solid var(--encre);background:rgba(21,23,27,.04);color:var(--encre)}
.flash.err{border-left-color:var(--annonce);color:var(--annonce-2)}
.flash.ok{border-left-color:var(--greffe)}

/* ---- espace cabinet -------------------------------------------- */
.side{background:none;border-right:1px solid var(--filet-fort)}
.side a{color:var(--encre-2);border:0;font-size:.94rem}
.side a:hover,.side a.on{color:var(--encre)}
.side a.on{border-left:2px solid var(--annonce);padding-left:.7em}

/* ---- chronologie ------------------------------------------------ */
.timeline::before{background:var(--filet-2)}
.tl-item{background:none;border:0;border-top:1px solid var(--filet);padding:18px 0 18px 26px}
.tl-item::before{background:var(--encre)}
.tl-item.liq::before{background:var(--annonce)}
.tl-date{font-family:var(--mono);font-size:.72rem;color:var(--encre-3)}
.tl-item h4{font-family:var(--display);font-size:1.15rem}

/* ---- ours et colophon ------------------------------------------- */
footer{background:none;border-top:2px solid var(--encre);color:var(--encre-2)}
footer a{color:var(--encre-2);border:0}
footer a:hover{color:var(--encre)}
.paper,.ed-band{background:none!important;border:0;border-top:1px solid var(--filet-fort);padding-top:20px}
.paper::before{display:none}
.paper .kicker,.ed-src-t{color:var(--encre-3)}
.byline strong,.ed-by strong{color:var(--encre)}
.ed-facts,.facts li{color:var(--encre-2)}
.disclaimer,.credit{color:var(--encre-3);font-family:var(--mono);font-size:.7rem}

/* ---- les trois radars (registre numéroté) ----------------------- */
.radars{border-top:0}
.radar-ligne{border-bottom:1px solid var(--filet-fort);padding:26px 0;align-items:start}
.radar-chiffre{font-family:var(--display);color:var(--encre);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.radar-corps h3{font-family:var(--display)}

/* ---- verrou commercial ------------------------------------------ */
.verrou-ligne{border-bottom:1px solid var(--filet)}
.verrou-n{font-family:var(--display);color:var(--annonce)}

/* ---- fréquence du relevé ---------------------------------------- */
.freq-choix{border-bottom:1px solid var(--filet)}
.freq-choix.on{background:rgba(21,23,27,.045)}
.freq-choix:hover{background:rgba(21,23,27,.03)}
.freq-choix strong{font-family:var(--display);font-weight:400}
.freq-choix input{accent-color:var(--encre)}

/* ---- comparatif -------------------------------------------------- */
.cmp{border:0;border-top:2px solid var(--encre)}
.cmp .today,.cmp .with{background:none}
.cmp .with{border-left:1px solid var(--filet)}
.cmp h3,.cmp h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--encre-3)}
.cmp .with h3,.cmp .with h4{color:var(--encre)}
.cmp .today li{color:var(--encre-3)}
.versus .yes{color:var(--greffe)}
.versus .no{color:var(--encre-3)}
.versus th.us,.versus td.us{background:rgba(21,23,27,.04)}

/* ---- apparition : sobre, et jamais partout ---------------------- */
/* Une seule apparition, courte, réservée aux têtes de section. L'état
   final reste visible si le script ne part pas. */
.js [data-reveal]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js [data-reveal].in{opacity:1;transform:none}
.js .hero h1,.js .hero .lead,.js .hero-cta,.js .hero .trust,
.js .hero-im-h1,.js .hero-im .lead,.js .hero-im .hero-cta{clip-path:none!important;opacity:1!important;transform:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none}
}

/* ---- section ----------------------------------------------------- */
section{padding:clamp(48px,7vw,86px) 0}
.sec-head{max-width:64ch;margin-bottom:34px}
.sec-head h1,.sec-head h2{margin-bottom:.22em}
.sec-head p{color:var(--encre-2);font-size:1.08rem}
.split,.statement,.lede-2col{border-top:1px solid var(--filet-fort);padding-top:26px}

/* ==== correctifs relevés à la capture ============================== */

/* Le prix de la troisième colonne était coupé par le filet : chaque colonne
   doit avoir sa gouttière intérieure, pas seulement celle mise en avant. */
/* Ce `repeat(3,1fr)` etait ecrit sans garde de largeur. Charge apres solvenda.css, il
   annulait purement et simplement le `@media(max-width:860px){.plans{grid-template-columns:1fr}}`
   de la feuille de base : sur un ecran de 390 px, les trois offres restaient cote a cote sur
   485 px dans un contenant de 335, et toute la page defilait de biais. La section qui
   convertit etait donc cassee sur telephone, et le defaut ne se voyait qu'en mesurant le
   `scrollWidth` — visuellement, on croit a une simple mise en page serree. */
@media(min-width:861px){.plans{grid-template-columns:repeat(3,1fr)}}
.plans{gap:0}
.plan{padding:26px 26px 28px;display:flex;flex-direction:column}
.plan:first-child{padding-left:0}
.plan:last-child{padding-right:0}
.plan.feat{background:rgba(21,23,27,.04)}

/* Un bulletin ne centre pas ses titres. Le fer à gauche est la règle ;
   le centrage était l'un des réflexes qui faisaient « gabarit ». */
.center,.sec-head.center{text-align:left}
.sec-head.center{margin-left:0;margin-right:0}
p.center,.muted.center{text-align:left}
#demo>.wrap{align-items:stretch}

/* Les sections s'enchaînaient avec un vide de plus de 150 px : la section
   porte déjà son propre rythme, le double espacement n'apporte rien. */
.faq{display:block;margin-top:0}
section+section{padding-top:clamp(30px,4vw,52px)}
.faq+section,section:last-of-type{padding-bottom:clamp(40px,6vw,72px)}

/* Repères de tête de colonne : la mention passe au-dessus du prix, filet compris. */
.pname{display:block;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--filet)}
.price{font-size:clamp(2.2rem,4vw,3rem);line-height:1;display:block;margin-bottom:6px}
.pd{margin:14px 0 20px;flex:1}
.plan .btn{margin-top:auto}

/* ==== deuxième passe de correctifs ================================ */

/* Kalnia dessine un « 4 » à sommet ouvert : superbe en titre, illisible à
   la taille d'un prix, où il se lit comme un glyphe cassé. Un bulletin
   compose ses TITRES et imprime ses CHIFFRES : les nombres de données
   passent donc à la mono tabulaire, les mots gardent le display. */
.plan .price:has(small),.kpi .n,.stat .n,.spark .v,.deadline .n{
  font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.02em;font-weight:500}
.plan .price:has(small){font-size:clamp(2rem,3.4vw,2.6rem)}
/* « Gratuit » est un MOT, pas un montant : il reste au display. */
.plan .price{font-size:clamp(2.1rem,3.6vw,2.9rem)}
.plan .price small{font-family:var(--text);letter-spacing:0;font-weight:400}
.kpi .n,.stat .n{font-size:clamp(1.9rem,3vw,2.5rem)}

/* La FAQ était posée sur une colonne de 820 px centrée : elle flottait au
   milieu pendant que tout le reste tenait le fer à gauche de la grille. */
section>.wrap[style*="820"]{margin-left:0;margin-right:0}

/* Le blanc entre deux sections valait la hauteur d'un écran de portable. */
section{padding-top:clamp(28px,3.6vw,48px);padding-bottom:clamp(28px,3.6vw,48px)}
section:first-of-type{padding-top:clamp(36px,5vw,72px)}
.sec-head{margin-bottom:clamp(20px,2.4vw,32px)}

/* Cibles tactiles au pouce (WCAG 2.2, critère 2.5.8). Sur un écran de 390 px, le pied de
   page, la liste de sources et le logo mesuraient 23 px de haut : on les rate une fois sur
   trois. On leur donne de la hauteur sans changer un seul pixel de leur apparence — le
   texte reste centré dans la zone, seule la surface sensible grandit.
   Les liens à l'intérieur d'une phrase ne sont volontairement pas touchés : la norme les
   exempte, et les grossir casserait l'interlignage du texte courant. */
@media(max-width:640px){
  footer .cols a,
  .ed-src>a,
  /* `:not(.hide-sm)` n'est pas une precaution decorative : sans lui, cette regle est plus
     specifique que le `.hide-sm{display:none}` qui masque la navigation de bureau, et elle
     la reaffiche — 216 px de debordement horizontal sur un ecran de 390 px. Constate en
     production le 26/08/2026, une minute apres l'avoir deploye. */
  header.nav nav>a:not(.btn):not(.hide-sm){
    display:inline-flex;align-items:center;min-height:34px}
  /* Le sigle du pied de page mesure 23 px de cote. On elargit la zone sensible vers la
     droite sans `justify-content`, pour que le dessin reste cale sur le fer a gauche. */
  footer .cols a.brand{min-width:34px}
  header.nav .wrap>a.brand{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:34px;min-width:34px}
}


/* Formulaire de rappel, sous la demonstration. Trois champs sur une ligne au large, empiles
   au telephone. Hauteur de 46 px : c'est la cible tactile minimale confortable, et ces champs
   sont remplis au pouce dans un couloir de metro aussi souvent qu'a un bureau. */
.pros-champs{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.pros-champs input{width:100%;min-height:46px;padding:0 12px;
  border:1px solid var(--filet-fort);background:transparent;color:inherit;font:inherit}
.pros-champs input:focus-visible{outline:2px solid var(--encre);outline-offset:-2px}
@media(max-width:760px){.pros-champs{grid-template-columns:1fr}}

/* Bloc d'abonnement a l'agenda. Pose sous la liste des echeances. */
.agenda-bloc{margin-top:28px;padding-top:22px;border-top:1px solid var(--line,rgba(0,0,0,.12))}
.agenda-t{margin:0 0 8px;font-size:1.05rem}
.agenda-p{margin:0 0 16px;max-width:66ch;line-height:1.6;font-size:.94rem}
.agenda-boutons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.agenda-lab{display:block;font-size:.84rem;opacity:.7;margin-bottom:6px}
.agenda-url{width:100%;min-height:44px;padding:0 12px;font:inherit;font-size:.85rem;
  border:1px solid var(--line,rgba(0,0,0,.12));border-radius:8px;background:transparent;color:inherit}
.agenda-note{margin:8px 0 0;font-size:.82rem;opacity:.7}
