/* Leads Power, feuille de style du blog. Genere depuis la maquette validee.
   Ne pas editer les valeurs en dur : tout passe par les jetons de :root. */
/* ══════════════════════════════════════════════════════════════
   JETONS. Toute valeur de la page vient d'ici, rien en dur.
   C'est ce qui produit l'harmonie : peu de valeurs, réutilisées.
   ══════════════════════════════════════════════════════════════ */
:root{
  /* Espace, base 4. Un seul pas d'écart entre deux éléments voisins. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Rayons : trois, pas cinq. */
  --r-s:8px;          /* étiquettes, petits blocs */
  --r-m:14px;         /* cartes, panneaux, surfaces */
  --r-f:999px;        /* pastilles et boutons */

  /* Texte : trois niveaux seulement, tous conformes AA sur --bg.
     0,94 → 17,4:1   0,70 → 7,7:1   0,50 → 5,3:1
     Aucun quatrième niveau : en dessous de 0,50 on tombe sous 4,5:1. */
  --t1:rgba(255,255,255,0.94);
  --t2:rgba(255,255,255,0.70);
  --t3:rgba(255,255,255,0.50);

  /* Traits : trois. */
  --l1:rgba(255,255,255,0.07);   /* séparateurs internes */
  --l2:rgba(255,255,255,0.12);   /* contours de surface */
  --l3:rgba(255,255,255,0.30);   /* contour au survol */

  /* Surfaces */
  --bg:#121212; --sf:#151515;

  /* Typo : huit pas, pas vingt. */
  --f-mono:0.63rem;   /* surtitres, tracking 0.2em */
  --f-meta:0.68rem;   /* durées, dates, étiquettes, tracking 0.1em */
  --f-s:0.86rem;      /* résumés */
  --f-m:0.95rem;      /* listes, liens */
  --f-l:1.02rem;      /* corps d'article */
  --f-t1:1.1rem;      /* titre de carte */
  --f-t2:1.5rem;      /* titre à la une, h2 */
  --f-t3:2.7rem;      /* h1 */

  /* Échelle serif d'affichage, séparée : le serif ne se cale pas sur les mêmes
     pas optiques que le sans. Trois valeurs, pas plus. */
  --d1:1.2rem;        /* citation */
  --d2:1.2rem;        /* mot-titre du bandeau */
  --d3:3rem;          /* fait marquant de l'article à la une */

  /* Teintes de famille de rubrique. Une famille, une teinte, toujours. */
  --fam-com:52,209,127;    /* Prix, Acheter, Fournisseur */
  --fam-ope:41,169,235;    /* Convertir, Générer */
  --fam-cad:224,115,106;   /* Définitions, Conformité */

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--t1); -webkit-font-smoothing:antialiased; }
body{ font-family:'Hanken Grotesk',sans-serif; }
a{ text-decoration:none; color:inherit; }
.wrap{ max-width:1216px; margin:0 auto; padding:0 var(--s6); }

/* Deux styles monospace, pas cinq. */
.mono-t{ font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); letter-spacing:0.2em; text-transform:uppercase; color:var(--t3); }
.mono-m{ font-family:'JetBrains Mono',monospace; font-size:var(--f-meta); letter-spacing:0.1em; text-transform:uppercase; color:var(--t3); }
.serif{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; }


/* ═══ bandeau ═══ */
.mast{ border-bottom:1px solid var(--l1); }
/* Pas de padding vertical ici : ce sont les entrées de nav qui portent la
   hauteur du bandeau, pour que leur zone de survol touche le panneau. */
.mast-in{ display:flex; align-items:center; gap:var(--s4); }
.mast{ position:relative; z-index:50; }
.brand{ display:inline-flex; align-items:baseline; gap:var(--s2); flex:none; }
/* Bloc-titre à la façon « Qonto Blog » : le nom de la marque puis le mot Blog.
   Le mot Blog en serif italique, l'accent typographique du site, pour dire
   « publication » sans le répéter en surtitre plus bas. */
.wordmark{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:var(--d2); line-height:1; letter-spacing:-0.025em; color:#fff; }
.wordmark em{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:0; margin-left:0.22em; }

/* Grandes thématiques avec grand menu déroulant, à la façon de Qonto.
   Chaque entrée de tête est une vraie page, et son panneau liste les tags
   de la famille, qui sont eux-mêmes de vraies pages. */
.thnav{ display:flex; gap:var(--s5); flex:1; }
.th{ position:relative; }
.th > a{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--f-m); color:var(--t2); padding:var(--s5) 0; border-bottom:1px solid transparent; margin-bottom:-1px; transition:color .24s var(--ease), border-color .24s var(--ease); white-space:nowrap; }
.th > a .chev{ font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); color:var(--t3); transition:transform .24s var(--ease), color .24s var(--ease); }
.th:hover > a, .th:focus-within > a{ color:#fff; border-bottom-color:#fff; }
.th:hover > a .chev, .th:focus-within > a .chev{ transform:translateY(2px); color:#fff; }

/* .mega ne porte aucun fond : c'est une passerelle transparente qui garde le
   survol continu entre l'entrée et le panneau, sinon le menu se referme
   dès que la souris traverse l'espace vide. */
.mega{ position:absolute; top:100%; left:calc(-1 * var(--s5)); z-index:70; padding-top:var(--s2);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .24s var(--ease), visibility .2s; }
.th:hover .mega, .th:focus-within .mega{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-in{ min-width:316px; padding:var(--s5); border:1px solid var(--l2); border-radius:var(--r-m); background:var(--sf); box-shadow:0 40px 90px -30px rgba(0,0,0,0.95); display:grid; gap:var(--s2); }
.mega-in > .t{ margin-bottom:var(--s2); }
.mega-in a{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding:var(--s3) var(--s3); margin:0 calc(-1 * var(--s3)); border-radius:var(--r-s); font-size:var(--f-t1); color:var(--t2); transition:background .2s var(--ease), color .2s var(--ease); }
.mega-in a:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.mega-in .sep{ height:1px; background:var(--l1); margin:var(--s2) calc(-1 * var(--s3)); }
.mega-in .all{ font-size:var(--f-m); color:var(--t3); }
.mega-in .all:hover{ color:#fff; }

/* Recherche : index JSON filtre cote navigateur, sans back-end. */
.search{ flex:none; display:inline-flex; align-items:center; gap:var(--s2); background:none; border:0; padding:0; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; font-size:var(--f-m); color:var(--t3); transition:color .24s var(--ease); }
.search:hover{ color:#fff; }
.search svg{ width:16px; height:16px; display:block; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bridge{ flex:none; font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); letter-spacing:0.16em; text-transform:uppercase; border:1px solid var(--l2); border-radius:var(--r-f); padding:var(--s3) var(--s4); color:var(--t2); transition:border-color .3s var(--ease), color .3s var(--ease); }
.bridge:hover{ border-color:var(--l3); color:#fff; }

/* ═══ hero ═══ */
/* Pas de surtitre « LE BLOG » : le bloc-titre le dit déjà juste au-dessus.
   Plus de panneau « Par métier » non plus : les grandes thématiques sont
   maintenant dans le bandeau, le répéter ici serait redondant. Le hero est
   donc court, et l'article à la une remonte d'autant. */
/* Hero compact. Un blog n'a pas besoin d'un manifeste : le h1 reste présent
   pour le référencement, mais il ne mange plus le premier écran. On passe de
   450 px avant le premier article à environ 130 px. */
.hero{ padding:var(--s7) 0 var(--s5); display:flex; align-items:baseline; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.hero h1{ margin:0; font-size:var(--f-t2); font-weight:700; line-height:1.2; letter-spacing:-0.022em; }
.hero p{ margin:0; max-width:44ch; font-size:var(--f-s); line-height:1.6; color:var(--t3); }
.chip.on{ background:#fff; border-color:#fff; color:var(--bg); font-weight:600; }
.byjob .t{ margin-bottom:var(--s3); }
.byjob .all{ display:block; margin-top:var(--s3); padding:0; border:0; color:var(--t3); }
.byjob .all:hover{ color:#fff; }

/* ═══ à la une ═══ */
/* Slot « fait marquant » du template : une valeur forte, deux à trois lignes de
   contexte. Sans fait chiffrable, le dégradé seul et la carte sur une colonne. */
/* À la une, refondu. Le titre domine, le dégradé passe en fond de toute la
   carte, et le « fait marquant » devient une ligne mono discrète au lieu d'un
   panneau de 3 rem qui criait plus fort que le titre. Marche pour n'importe
   quel article, sans slot bespoke à remplir. */
.feat{ position:relative; display:block; padding:var(--s7) var(--s6); border:1px solid var(--l2); border-radius:var(--r-m); overflow:hidden; transition:border-color .32s var(--ease);
  background:radial-gradient(760px 320px at 82% 18%, rgba(var(--fam-cad),0.13), transparent 72%), linear-gradient(150deg,#1a1a1a,#131313 68%); }
.feat::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--l1) 1px, transparent 1px), linear-gradient(90deg, var(--l1) 1px, transparent 1px); background-size:var(--s6) var(--s6); }
.feat:hover{ border-color:var(--l3); }
.feat-body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:var(--s4); max-width:62ch; }
.feat-body h2{ margin:0; font-size:clamp(1.6rem,3.2vw,var(--f-t3)); font-weight:700; line-height:1.1; letter-spacing:-0.03em; }
.feat-body p{ margin:0; max-width:56ch; font-size:var(--f-m); line-height:1.65; color:var(--t2); }
.feat-body .m{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.feat-body .fact{ display:flex; flex-wrap:wrap; gap:var(--s3); padding-top:var(--s3); border-top:1px solid var(--l1); }

/* ═══ section ═══ */
.sec{ padding-top:var(--s9); }
.sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--l2); }

/* ═══ cartes ═══ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); padding-top:var(--s5); }
.acard{ --fam:var(--fam-com); display:flex; flex-direction:column; border:1px solid var(--l2); border-radius:var(--r-m); background:var(--sf); overflow:hidden; transition:border-color .32s var(--ease), transform .32s var(--ease); }
.acard.ope{ --fam:var(--fam-ope); }
.acard.cad{ --fam:var(--fam-cad); }
.acard:hover{ border-color:var(--l3); transform:translateY(-3px); }
.acard-body{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5) var(--s5) var(--s4); flex:1; }
.acard h3{ margin:0; font-size:var(--f-t1); font-weight:600; line-height:1.32; letter-spacing:-0.016em; }
.acard p{ margin:0; font-size:var(--f-s); line-height:1.6; color:var(--t2); }
.acard .foot{ margin-top:auto; display:grid; grid-template-columns:1fr auto; grid-template-areas:"byl ar" "met ar"; align-items:center; column-gap:var(--s3); padding-top:var(--s3); border-top:1px solid var(--l1); }
/* Signature : casse normale et Hanken, pour se lire comme un nom. */
.byl{ grid-area:byl; font-size:var(--f-s); color:var(--t2); }
.acard .foot .mono-m{ grid-area:met; }
.ar{ grid-area:ar; font-family:'JetBrains Mono',monospace; font-size:var(--f-s); color:var(--t3); transform:translateX(-3px); transition:transform .3s var(--ease), color .3s var(--ease); }
.acard:hover .ar{ transform:translateX(0); color:#fff; }
.more{ display:inline-block; margin-top:var(--s6); font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); letter-spacing:0.16em; text-transform:uppercase; border:1px solid var(--l2); border-radius:var(--r-f); padding:var(--s3) var(--s5); color:var(--t2); transition:border-color .3s var(--ease), color .3s var(--ease); }
.more:hover{ border-color:var(--l3); color:#fff; }

/* ═══ tags ═══ */
.tags{ display:flex; flex-wrap:wrap; gap:var(--s2); }
.tag{ font-family:'JetBrains Mono',monospace; font-size:var(--f-meta); letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--l2); border-radius:var(--r-s); padding:var(--s2) var(--s3); color:var(--t2); transition:border-color .24s var(--ease), color .24s var(--ease); white-space:nowrap; }
.tag:hover{ border-color:var(--l3); color:#fff; }
.tag .c{ color:var(--t3); margin-left:var(--s2); }
.taggroup{ padding-top:var(--s5); }
.taggroup .t{ margin-bottom:var(--s3); }

/* ═══ article ═══ */
.art{ display:grid; grid-template-columns:minmax(0,1fr) 256px; gap:var(--s7); padding:var(--s8) 0 var(--s9); }
.crumb{ margin-bottom:var(--s5); }
.crumb span{ opacity:0.5; margin:0 var(--s2); }
.art h1{ margin:0 0 var(--s4); font-size:clamp(1.75rem,3.3vw,2.4rem); font-weight:700; line-height:1.12; letter-spacing:-0.028em; max-width:26ch; }
.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); padding-bottom:var(--s5); border-bottom:1px solid var(--l1); }
.body{ padding-top:var(--s5); max-width:68ch; }
.body p{ margin:0 0 var(--s5); font-size:var(--f-l); line-height:1.78; color:var(--t2); }
.body h2{ margin:var(--s7) 0 var(--s4); font-size:var(--f-t2); font-weight:700; letter-spacing:-0.02em; }
.body ul{ margin:0 0 var(--s5); padding-left:var(--s5); font-size:var(--f-m); line-height:1.8; color:var(--t2); }
.body strong{ color:var(--t1); font-weight:600; }
.body a.ctx{ color:#fff; border-bottom:1px solid var(--l3); }
.body a.ctx:hover{ border-bottom-color:#fff; }
.quote{ margin:var(--s6) 0; padding:var(--s5) var(--s6); border:1px solid var(--l2); border-left:2px solid #fff; border-radius:0 var(--r-m) var(--r-m) 0; background:var(--sf); }
.quote p{ margin:0 0 var(--s3); font-family:'Instrument Serif',serif; font-style:italic; font-size:var(--d1); line-height:1.5; color:var(--t1); }
.inCta{ margin:var(--s6) 0; padding:var(--s5) var(--s6); border:1px solid var(--l2); border-radius:var(--r-m); background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)); display:flex; align-items:center; justify-content:space-between; gap:var(--s5); }
.inCta .inCta-t{ margin:var(--s2) 0 0; font-size:var(--f-t1); font-weight:600; letter-spacing:-0.015em; }
.btn{ flex:none; background:#fff; color:var(--bg); font-weight:600; font-size:var(--f-m); border-radius:var(--r-f); padding:var(--s3) var(--s5); white-space:nowrap; }
.arttags{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--l1); }
.rail{ position:sticky; top:var(--s7); align-self:start; display:flex; flex-direction:column; gap:var(--s4); }
.panel{ border:1px solid var(--l2); border-radius:var(--r-m); background:var(--sf); padding:var(--s4); }
.panel .t{ margin-bottom:var(--s3); }
.panel summary{ display:none; }
.toc a{ display:block; padding:var(--s2) 0 var(--s2) var(--s3); border-left:1px solid var(--l2); font-size:var(--f-s); line-height:1.5; color:var(--t2); }
.toc a.on{ color:#fff; border-left-color:#fff; }
.vlist a{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s2) 0; border-bottom:1px solid var(--l1); font-size:var(--f-m); color:var(--t2); }
.vlist a:last-child{ border-bottom:0; }
.vlist a:hover{ color:#fff; }

/* ═══ pied de page du blog ═══ */
.bfoot{ border-top:1px solid var(--l1); padding:var(--s7) 0 var(--s6); }
.bfoot-in{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:var(--s6); align-items:start; }
.bfoot .t{ margin-bottom:var(--s3); }
.bfoot p{ margin:var(--s4) 0 0; max-width:33ch; font-size:var(--f-s); line-height:1.6; color:var(--t3); }
/* Meme rythme que le pied du site, 13 px d'un lien a l'autre, pour que les
   colonnes Sujets et Legal se lisent de la meme facon. */
.bfoot .col a{ display:block; padding:6px 0; font-size:var(--f-m); color:var(--t2); }
.bfoot .col > div > a:first-child{ padding-top:0; }
.bfoot .col a:hover{ color:#fff; }
.bfoot .cols2{ columns:2; column-gap:var(--s5); }
.bfoot .base{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--l1); }

@media (max-width:1000px){
  .wrap{ padding:0 var(--s5); }
  .hero{ grid-template-columns:1fr; gap:var(--s6); padding-top:var(--s7); }
  .feat{ grid-template-columns:1fr; }
  .feat-body{ border-left:0; border-top:1px solid var(--l1); }
  .cards{ grid-template-columns:1fr 1fr; }
  .art{ grid-template-columns:1fr; gap:0; padding-top:var(--s6); }
  .rail{ position:static; order:2; margin-top:var(--s6); }
  .panel summary{ display:block; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); letter-spacing:0.2em; text-transform:uppercase; color:var(--t3); }
  .panel .t{ display:none; }
  .bfoot-in{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .cards{ grid-template-columns:1fr; }
  .inCta{ flex-direction:column; align-items:flex-start; }
}

/* Conteneur propre aux pages d'article. Les pages de liste ont besoin de
   largeur pour trois cartes, un article non : la mesure de lecture est de
   68 caracteres, soit environ 555 px, plus la gouttiere et le rail. Au-dela,
   un vide s'installe entre le texte et le sommaire. */
.wrap.art-wrap{ max-width:952px; }

/* Cartes de sujet de l'accueil. Contrairement aux cartes d'article elles n'ont
   pas de vignette : le sujet n'a pas d'image, il a un perimetre. */
.scards{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); padding-top:var(--s5); }
.scard{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5); border:1px solid var(--l2); border-radius:var(--r-m); background:var(--sf); transition:border-color .32s var(--ease), transform .32s var(--ease); }
.scard:hover{ border-color:var(--l3); transform:translateY(-3px); }
.scard h3{ margin:0; font-size:var(--f-t1); font-weight:600; letter-spacing:-0.016em; }
.scard p{ margin:0; font-size:var(--f-s); line-height:1.6; color:var(--t2); flex:1; }
.scard .tags{ gap:var(--s2); padding-top:var(--s3); border-top:1px solid var(--l1); }
.scard .tag{ pointer-events:none; }
@media (max-width:760px){ .scards{ grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════════
   ÉCHELLE D'ARTICLE. Une page de lecture a besoin d'une hierarchie
   plus large qu'une page de liste : deux pas s'ajoutent ici, et
   seulement ici, pour que le texte respire au lieu d'etre plat.
   ══════════════════════════════════════════════════════════════ */
:root{
  --f-lead:1.16rem;   /* chapo */
  --f-h2a:1.68rem;    /* intertitre d'article */
  --f-h3a:1.14rem;    /* sous-intertitre et question de FAQ */
}

/* Chapô : premier paragraphe du corps. Plus grand, plus clair, plus aere.
   C'est lui qui donne envie de lire la suite. */
.body > p:first-child{ font-size:var(--f-lead); line-height:1.7; color:var(--t1); margin-bottom:var(--s6); }

/* Intertitres. Le h2 gagne un filet superieur : il decoupe visuellement
   l'article en sections au lieu de flotter dans le texte. */
.body h2{ font-size:var(--f-h2a); line-height:1.18; margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid var(--l1); }
.body h2:first-of-type{ margin-top:var(--s7); }
.body h3{ margin:var(--s6) 0 var(--s3); font-size:var(--f-h3a); font-weight:600; letter-spacing:-0.012em; color:var(--t1); }
/* Le bloc Sources et la FAQ n'ont pas besoin du filet, ils ferment l'article. */
.body h2:last-of-type{ border-top-color:var(--l2); }

/* Listes : puces en retrait, marqueur discret, respiration entre items. */
.body ul{ list-style:none; padding-left:0; }
.body ul li{ position:relative; padding-left:var(--s5); margin-bottom:var(--s3); }
.body ul li::before{ content:""; position:absolute; left:var(--s2); top:0.62em; width:5px; height:5px; border-radius:var(--r-f); background:var(--t3); }
.body ul li strong:first-child{ color:#fff; }

/* Tableau. Il etait en HTML brut, donc illisible et fade alors que c'est
   l'element le plus cite par les moteurs. */
.body table{ width:100%; border-collapse:collapse; margin:var(--s6) 0; font-size:var(--f-s); }
.body thead th{ text-align:left; padding:var(--s3) var(--s4); border-bottom:1px solid var(--l2);
  font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); letter-spacing:0.14em; text-transform:uppercase; color:var(--t3); font-weight:400; }
.body tbody td{ padding:var(--s4); border-bottom:1px solid var(--l1); line-height:1.55; color:var(--t2); vertical-align:top; }
.body tbody tr:last-child td{ border-bottom:0; }
.body tbody td:first-child{ color:var(--t1); font-weight:600; width:26%; }
.body tbody tr:hover td{ background:rgba(255,255,255,0.022); }

/* Emphase et liens dans le corps. */
.body strong{ color:var(--t1); font-weight:600; }
.body p > a.ctx{ font-weight:500; }

/* Sommaire actif : la classe .on suit maintenant la lecture, voir le script
   d'article. On rend la transition visible pour que le deplacement se lise. */
.toc a{ transition:color .2s var(--ease), border-left-color .2s var(--ease); }
/* Ancres : sans cette marge, un titre cible par le sommaire se colle au
   bord haut de la fenetre et on perd le repere visuel. */
.body h2, .body h3{ scroll-margin-top:var(--s7); }

/* Accordeon de FAQ, en <details> natif : le contenu reste dans le HTML donc
   il est indexe normalement, et l'accessibilite clavier vient du navigateur.
   Aucun script. */
.body details.qa{ border-bottom:1px solid var(--l1); }
.body details.qa:first-of-type{ border-top:1px solid var(--l1); }
.body details.qa > summary{ list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 0; font-size:var(--f-h3a); font-weight:600; letter-spacing:-0.012em; color:var(--t1); transition:color .2s var(--ease); }
.body details.qa > summary::-webkit-details-marker{ display:none; }
.body details.qa > summary:hover{ color:#fff; }
/* Le signe est en pseudo-element : rien a ecrire dans le contenu. */
.body details.qa > summary::after{ content:"+"; flex:none; font-family:'JetBrains Mono',monospace; font-size:var(--f-m); color:var(--t3); line-height:1.4; transition:transform .26s var(--ease), color .26s var(--ease); }
.body details.qa[open] > summary{ color:#fff; }
.body details.qa[open] > summary::after{ transform:rotate(45deg); color:#fff; }
.body details.qa > p{ margin:0 0 var(--s4); max-width:62ch; }
.body details.qa > p:first-of-type{ margin-top:calc(-1 * var(--s2)); }

/* Encart de placement. Le bouton porte maintenant un libelle long
   (« Faire une commande test »), donc on garantit qu'il ne se casse pas et que
   le titre garde une mesure lisible a cote. */
.body .inCta .inCta-t{ max-width:34ch; line-height:1.3; }
.body .inCta .btn{ white-space:nowrap; }
/* Dans la colonne d'article (584 px), un titre de 70 caracteres a cote d'un
   bouton de 220 px tombe sur trois lignes et le centrage vertical se voit.
   On empile : titre sur toute la largeur, bouton dessous. */
.body .inCta{ flex-direction:column; align-items:flex-start; gap:var(--s5); }
.body .inCta .inCta-t{ max-width:44ch; }
.post-pied .ar{ font-family:'JetBrains Mono',monospace; color:var(--t3); transform:translateX(-3px); transition:transform .3s var(--ease), color .3s var(--ease); }
.post:hover .post-pied .ar{ transform:translateX(0); color:#fff; }
.avenir li .t{ font-size:var(--f-m); color:var(--t2); }

/* Sujets en version compacte : des portes d'entree, pas du contenu. */
.sujets-compact{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); padding-top:var(--s5); }
.sujets-compact a{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:var(--s4); border:1px solid var(--l2); border-radius:var(--r-m); background:var(--sf);
  font-size:var(--f-m); color:var(--t2); transition:border-color .3s var(--ease), color .3s var(--ease); }
.sujets-compact a:hover{ border-color:var(--l3); color:#fff; }

@media (max-width:860px){
  .avenir li{ grid-template-columns:26px minmax(0,1fr); }
  .avenir li .mono-m:first-of-type{ display:none; }
  .sujets-compact{ grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   ACCUEIL, PASSE VISUELLE.
   Le probleme corrige ici : en retirant les bannieres a degrade vide
   j'avais retire TOUTE substance visuelle, et la page n'etait plus
   qu'une suite de rangees grises de meme taille. On rend trois choses :
   un point d'ancrage sur le dernier article, une hierarchie dans le
   calendrier, et une teinte par famille de rubrique.
   ══════════════════════════════════════════════════════════════ */

/* Teintes de famille, reutilisees partout sur l'accueil. */
.fam-com{ --fam:var(--fam-com); }
.fam-ope{ --fam:var(--fam-ope); }
.fam-cad{ --fam:var(--fam-cad); }

/* Hero : titre et description en colonne, pas en flex ecarte. La
   description flottait a droite, desalignee, sur trois lignes. */
.hero{ display:block; padding:var(--s7) 0 var(--s6); }
.hero h1{ max-width:26ch; }
.hero p{ margin-top:var(--s3); max-width:56ch; }
/* 96 px entre un titre d'une ligne et la section suivante creusaient un trou. */
.sec{ padding-top:var(--s7); }
.sec + .sec{ padding-top:var(--s8); }
.avenir li .rub{ color:rgb(var(--fam)); opacity:0.9; }
.avenir li .t{ font-size:var(--f-t1); font-weight:500; color:var(--t1); letter-spacing:-0.012em; }
.avenir li:hover .t{ color:#fff; }

/* Sujets compacts : une teinte par famille au lieu de quatre boites grises. */
.sujets-compact a{ position:relative; padding-left:var(--s5); }
.sujets-compact a::before{ content:""; position:absolute; left:var(--s3); top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:var(--r-f); background:rgb(var(--fam)); }

/* ══════════════════════════════════════════════════════════════
   FOCUS. Aucune regle n'etait definie, donc Chrome dessinait son
   anneau par defaut autour des onglets cliques : l'« aureole ».
   On ne le supprime pas, on le maitrise, et on le reserve au clavier
   via :focus-visible. A la souris il n'apparait plus, au clavier il
   reste net, ce qui est le comportement attendu.
   ══════════════════════════════════════════════════════════════ */
a:focus, button:focus, summary:focus, details:focus{ outline:none; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid rgba(255,255,255,0.55);
  outline-offset:3px;
  border-radius:var(--r-s);
}
/* Lien d'evitement. Il manquait : un visiteur au clavier ou au lecteur
   d'ecran devait traverser le bandeau, la marque, la bascule de langue et les
   cinq sujets avant d'atteindre le texte, sur CHAQUE page. Invisible a la
   souris, il apparait des qu'il recoit le focus. On ne le masque pas avec
   display:none, qui le retirerait de l'ordre de tabulation. */
/* « fixed » et non « absolute » : sans ancetre positionne, un absolute se cale
   sur le document, donc « top:12px » l'aurait place hors de l'ecran si la page
   etait defilee. Fixed le cale sur la fenetre, quel que soit le defilement. */
.evitement{ position:fixed; left:var(--s5); top:-100px; z-index:200;
  padding:var(--s3) var(--s5); border-radius:var(--r-f);
  background:#fff; color:var(--bg); font-weight:600; font-size:var(--f-m);
  transition:top .18s var(--ease); }
.evitement:focus{ top:var(--s3); }

/* Dans le bandeau, l'anneau suit la forme de l'element. */
.th > a:focus-visible, .bridge:focus-visible{ outline-offset:4px; }
.mega-in a:focus-visible{ outline-offset:-2px; }

/* Ombre du panneau. 90 px de flou en noir a 95 % sur un fond noir ne
   creent pas de profondeur, ils creent une bande. Sur une interface
   sombre la profondeur vient du contour, pas de l'ombre : on resserre
   l'ombre et on eclaircit legerement la bordure. */
.mega-in{ border-color:rgba(255,255,255,0.16); box-shadow:0 18px 44px -22px rgba(0,0,0,0.85); }
.tags.prep .tag{ pointer-events:none; padding:var(--s2) var(--s4); }
.tags.prep .tag::before{ content:""; display:inline-block; width:5px; height:5px; border-radius:var(--r-f); background:rgb(var(--fam)); margin-right:var(--s2); vertical-align:1px; }

/* Bande d'annonce. Teinte de la famille Conformite, deja dans la palette du
   site. Elle pousse un article perissable et disparait de la page de cet
   article. Texte sombre sur fond clair : contraste 8:1, largement conforme. */
.topbar{ display:block; background:rgb(var(--fam-cad)); color:var(--bg); }
.topbar .wrap{ display:flex; align-items:center; gap:var(--s3); padding-top:var(--s3); padding-bottom:var(--s3); }
.tb-lab{ flex:none; font-family:'JetBrains Mono',monospace; font-size:var(--f-mono); letter-spacing:0.2em; text-transform:uppercase; opacity:0.72; }
.tb-txt{ font-size:var(--f-s); font-weight:600; letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* « margin-left:auto » envoyait la fleche a l'extremite droite du bandeau,
   soit 759 px apres le titre auquel elle appartient, sur un ecran de 1280.
   Elle se lisait comme un element isole. Elle suit maintenant le titre, et
   tout le bandeau s'aligne sur le meme rail gauche que le logo et la
   navigation, a 64 px. */
.tb-ar{ flex:none; font-family:'JetBrains Mono',monospace; font-size:var(--f-s); transform:translateX(-3px); transition:transform .3s var(--ease); }
.topbar:hover .tb-ar{ transform:translateX(0); }
.topbar:hover .tb-txt{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:620px){ .tb-lab{ display:none; } }

/* Hierarchie dans la grille. Six cartes identiques ne donnent aucun point
   d'entree a l'oeil : la premiere occupe deux colonnes, sa vignette est plus
   haute et son titre plus grand. C'est ce que font Stripe et Ahrefs, avec des
   moyens differents mais le meme principe. */
.acard.large{ grid-column:span 2; }
.acard.large .acard-img{ height:196px; }
.acard.large .acard-body{ padding:var(--s6) var(--s6) var(--s5); gap:var(--s4); }
.acard.large h3{ font-size:var(--f-t2); line-height:1.2; letter-spacing:-0.022em; max-width:26ch; }
.acard.large p{ font-size:var(--f-m); max-width:52ch; }
.acard.large .acard-img{ background:radial-gradient(560px 220px at 22% 24%, rgba(var(--fam),0.20), transparent 70%), linear-gradient(150deg,#1d1d1d,#131313 70%); }

/* Bloc « Explorer » unique, en fin de page. */
.tags.explorer{ padding-top:var(--s4); }

@media (max-width:1000px){ .acard.large{ grid-column:span 2; } }
@media (max-width:620px){ .acard.large{ grid-column:span 1; } .acard.large .acard-img{ height:150px; } }

/* Correction : la carte de tete sur DEUX colonnes creait deux trous, la carte
   voisine s'etirant sur sa hauteur et la derniere restant seule sur sa rangee.
   En pleine largeur avec l'image a gauche, elle occupe une rangee entiere et
   les cinq suivantes se rangent en 3 + 2, ce qui ne laisse aucun vide anormal. */
.acard.large{ grid-column:1 / -1; flex-direction:row; align-items:stretch; }
.acard.large .acard-img{ flex:0 0 42%; height:auto; min-height:236px; }
.acard.large .acard-body{ flex:1; justify-content:center; padding:var(--s6); }
.acard.large h3{ font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.16; letter-spacing:-0.026em; max-width:24ch; }
.acard.large p{ font-size:var(--f-m); max-width:56ch; }
.acard.large .foot{ margin-top:var(--s5); }
@media (max-width:760px){
  .acard.large{ flex-direction:column; }
  .acard.large .acard-img{ flex:none; min-height:0; height:150px; }
  .acard.large .acard-body{ padding:var(--s5) var(--s5) var(--s4); }
}

/* Les titres de section sont desormais des h2 : la page sautait de h1 a h3,
   ce qui casse la structure pour un lecteur d'ecran comme pour un robot.
   L'apparence ne change pas, seule la semantique est corrigee. */
.sec-h h2, .sec-h h2.mono-t{ margin:0; font-weight:400; }

/* La vignette de la carte de tete passe de 42 a 34 % : c'etait la plus grande
   surface de la page et elle ne portait aucune information. */
.acard.large .acard-img{ flex:0 0 34%; }

/* Le pied de carte n'a plus qu'une ligne depuis le retrait de l'auteur. */
.acard .foot{ grid-template-areas:"met ar"; }

/* ══════════════════════════════════════════════════════════════
   REPLI DE L'EN-TETE ET DE LA GRILLE SOUS 1000 px.
   Le probleme corrige ici : les cinq entrees de tete plus le bouton
   « Voir le site » ne tenaient pas sur une ligne, et rien ne les
   repliait. La page debordait donc horizontalement (1138 px de
   contenu pour 673 px de fenetre), avec une barre de defilement
   horizontale, ce qui est toujours un defaut sur un site de contenu.
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   EN-TETE SUR DEUX ETAGES, A TOUTES LES LARGEURS.
   Il y avait un seuil, remesure a chaque ajout : 1000, puis 1140 avec le vrai
   logo, 1200 avec l'elargissement des espaces, 1340 avec la bascule de langue.
   Cette course etait perdue d'avance. Mesure faite : la rangee demande
   164 (marque) + 48 + 736 (cinq entrees et leurs gouttieres) + 48 + 61
   (langue) + 16 + 141 (bouton), soit 1214 px, alors que la colonne de contenu
   PLAFONNE a 1152 px quelle que soit la largeur de la fenetre. La barre sur
   une seule ligne ne pouvait donc jamais tenir : a 1500 px le dernier sujet
   recouvrait « FR / EN » de 15 px.
   Un seul etage n'etant pas atteignable, on garde partout la mise en page a
   deux etages : marque, langue et bouton en haut, sujets en dessous sur toute
   la largeur. Plus de seuil a maintenir, et le meme en-tete du telephone au
   grand ecran.
   ══════════════════════════════════════════════════════════════ */
/* Rythme vertical. Le bouton « voir le site » touchait le bord inferieur du
   bandeau, sans un pixel de respiration, et les deux etages se collaient l'un
   a l'autre : l'en-tete se lisait comme trois bandes empilees au hasard. On
   pose donc une gouttiere haute et un ecart identique entre les deux etages,
   ce qui donne enfin une trame. row-gap est declare EXPLICITEMENT : « gap »
   tout court aurait rendu 48 px entre les lignes, comme la gouttiere
   horizontale, et l'en-tete serait monte a trois etages de 141 px. */
.mast-in{ flex-wrap:wrap; padding-top:var(--s3); row-gap:var(--s3); }
/* Ordre EXPLICITE des quatre elements. Sans lui, la bascule de langue gardait
   0 et passait avant la marque : on lisait « FR / EN, logo, bouton », avec la
   marque au milieu de la barre. */
.brand{ order:1; }
.lang{ order:2; }
.bridge{ order:3; }
/* Deux roles a separer, qui etaient confondus sur la meme boite.
   Le FILET de separation doit s'aligner sur la colonne de contenu : il est
   porte par le <details> parent, plus bas dans la feuille.
   Le DEBORD, lui, reste ici. Entre 621 et 779 px la barre mesure 714 px pour
   une colonne plus etroite, donc elle defile. Sans debord, elle se coupait au
   bord de la colonne avec 32 px de vide apres, ce qui se lit comme un bug
   d'affichage. Les marges negatives la laissent filer jusqu'aux bords de
   l'ecran, ou une entree partiellement visible se lit comme une invitation a
   faire glisser. Le filet, lui, ne bouge plus. */
.thnav{ flex:1 1 auto; min-width:0; border-top:0;
        margin:0 calc(-1 * var(--s5)); padding:0 var(--s5); }

/* Sous 1340 px la barre peut devoir defiler au doigt, et les panneaux au
   survol n'ont aucun sens sans souris : chaque entree reste un lien vers sa
   vraie page de sujet, donc rien n'est perdu, ni pour le visiteur ni pour
   l'indexation. Au-dela, la barre tient largement et les panneaux peuvent
   deborder, donc pas d'overflow qui les rognerait. */
@media (max-width:1340px){
  .thnav{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .thnav::-webkit-scrollbar{ display:none; }
  .th .mega{ display:none; }
  .th > a{ padding:var(--s4) 0; }
  .th > a .chev{ display:none; }
}

/* Les cartes gardent leur propre seuil, 1000 px : elles passent a deux
   colonnes bien avant que la barre de navigation ne se replie. */
@media (max-width:1000px){
  /* A deux colonnes, la carte de tete en pleine largeur laissait la
     sixieme carte seule sur sa rangee. Elle redevient une carte
     ordinaire et les six se rangent en trois rangees pleines. */
  .acard.large{ grid-column:span 1; flex-direction:column; }
  .acard.large .acard-img{ flex:none; min-height:0; height:190px; }
  .acard.large .acard-body{ padding:var(--s5); }
  .acard.large h3{ font-size:var(--f-t2); line-height:1.2; max-width:26ch; }
  .acard.large p{ font-size:var(--f-s); max-width:none; }
  .acard.large .foot{ margin-top:var(--s4); }
}

/* Sous 620 px, la marque fait 186 px et le bouton 141 pour 327 disponibles,
   soit un pixel de trop : le bouton basculait sur sa propre ligne et l'en-tete
   occupait trois etages. On resserre les deux et tout tient sur une ligne.
   Le chapo se rapproche aussi du titre, un texte d'accroche appartient au
   titre et n'a pas besoin de la meme gouttiere qu'entre deux blocs. */
@media (max-width:620px){
  .wordmark{ font-size:1.12rem; }
  .bridge{ padding:var(--s2) var(--s3); letter-spacing:0.08em; }
  .hero{ gap:var(--s4); }
}

/* L'encart d'appel a l'action portait un h4 juste apres une suite de h2,
   ce qui creait un saut de niveau sur les six pages d'article. Un encart
   promotionnel n'est pas une section du document : il perd son statut de
   titre et garde exactement la meme apparence. */
.inCta .inCta-t{ margin:var(--s2) 0 0; font-size:var(--f-t1); font-weight:600; letter-spacing:-0.015em; }

/* Le fil d'Ariane en mono majuscule espacee mesure 365 px pour 311 disponibles
   sur un telephone : il faisait deborder la page d'article de 13 px. Il se
   replie desormais, et l'interlettrage se resserre pour limiter le repli. */
@media (max-width:620px){
  .crumb{ letter-spacing:0.12em; line-height:1.8; }
  .crumb span{ margin:0 var(--s1); }
}

/* La piste de la grille d'article ne doit jamais depasser son conteneur.
   Sur une colonne, « 1fr » seul laissait le tableau imposer sa largeur
   minimale a la piste (364 px pour 327 disponibles) et faisait deborder
   toute la page. « minmax(0,1fr) » est le correctif canonique.
   En deux colonnes la regle d'origine, « minmax(0,1fr) 256px », etait deja
   juste : la toucher retrecissait la mesure de lecture de 555 a 461 px. */
@media (max-width:1000px){ .art{ grid-template-columns:minmax(0,1fr); } }

/* Cadre defilable des tableaux, pose par le generateur autour de chaque
   <table>. Le tableau garde sa largeur lisible et defile seul. */
.tw{ overflow-x:auto; margin:var(--s5) 0; -webkit-overflow-scrolling:touch; }
.tw table{ margin:0; min-width:520px; }
@media (min-width:1001px){ .tw table{ min-width:0; } }

/* ══════════════════════════════════════════════════════════════
   LE SOMMAIRE TIENT EXACTEMENT LA DUREE DE L'ARTICLE.
   Il couvre l'en-tete et le corps, et s'arrete avec eux : une fois
   l'article fini, un sommaire n'a plus rien a indiquer. Le bloc
   « Sur le meme sujet » reste donc HORS de la grille, en pleine largeur.
   Le probleme corrige ici : le bloc « Sur le meme sujet » etait place
   APRES la grille de l'article. La grille s'arretait donc a 8146 px sur
   une page de 9287, et le rail colle a cette grille disparaissait sur
   les 1141 derniers pixels, soit plus d'un ecran entier. Le bloc entre
   maintenant dans la colonne de gauche : la grille descend jusqu'au bout
   du contenu et le sommaire reste la, seul le pied de page en est prive.
   Les cartes passent en rangees a image laterale, ce qui tient dans une
   colonne de 584 px et ne laisse aucun trou, qu'il y en ait deux ou trois.
   ══════════════════════════════════════════════════════════════ */
/* Le rail occupe la colonne de droite sur TOUTE la hauteur de la grille,
   lignes 1 a 2, donc il reste colle pendant la lecture de l'article ET du
   bloc « Sur le meme sujet ». Sans ce « grid-row », il ne couvrirait que la
   ligne de l'article et redisparaitrait avant la fin. */
/* « 1 / -1 » ne fonctionne PAS ici : sans grid-template-rows, la grille n'a
   aucune ligne explicite, donc -1 se resout a la ligne 1 et le rail occupait
   la premiere ligne seule, qu'il etirait a ses 623 px. Resultat, un vide de
   464 px entre la signature et le premier paragraphe. On enjambe donc un
   nombre de lignes superieur au nombre reel ; les lignes implicites en trop
   ont une hauteur nulle. */
.art > .rail{ grid-column:2; grid-row:1 / span 20; }
.art > .art-head, .art > .body{ grid-column:1; }

/* Sur une colonne, le sommaire se glisse entre la signature et le premier
   paragraphe. Il etait auparavant rejete apres tout l'article, a 11 700 px :
   un sommaire qu'on atteint apres avoir fini de lire ne sert a rien. C'est
   pour cela que l'en-tete de l'article (fil d'Ariane, titre, signature) est
   un bloc distinct du corps, sinon aucun ordre ne pouvait les separer. */
@media (max-width:1000px){
  .art > .art-head{ order:1; }
  .art > .rail{ grid-column:1; grid-row:auto; order:2; margin:0 0 var(--s6); }
  .art > .body{ order:3; }
}



/* Replie sur une colonne, le panneau n'indiquait pas qu'il s'ouvre : pas de
   marqueur, donc rien ne le distingue d'un simple intitule. Un chevron qui
   pivote a l'ouverture le signale. Le marqueur natif est retire, son rendu
   variant trop d'un navigateur a l'autre. */
@media (max-width:1000px){
  .panel summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); list-style:none; }
  .panel summary::-webkit-details-marker{ display:none; }
  .panel summary::after{ content:'⌄'; font-family:'JetBrains Mono',monospace; font-size:var(--f-mono);
                         color:var(--t3); transition:transform .24s var(--ease); }
  .panel details[open] > summary::after{ transform:rotate(180deg); }
  .panel details[open] > summary{ margin-bottom:var(--s3); }
}

/* Le « gap » de la grille servait a separer les deux colonnes. Depuis que
   l'en-tete, le corps et le bloc lie sont trois lignes distinctes, il
   s'appliquait aussi ENTRE les lignes et ouvrait un vide sous la signature.
   L'ecart horizontal est conserve, l'ecart vertical revient aux marges. */
.art{ row-gap:0; }

/* Bloc « Sur le meme sujet », hors de la grille d'article et donc sans
   sommaire a cote : l'article est fini, il n'y a plus rien a indiquer.
   Deux corrections : il s'aligne sur le conteneur de l'article (952 px)
   au lieu de la pleine largeur (1152), sinon il paraissait detache de ce
   qu'on vient de lire ; et ses colonnes s'adaptent au nombre de cartes,
   une grille figee a trois colonnes laissant un trou des qu'il n'y a que
   deux articles a proposer. auto-fit escamote les pistes vides. */
/* Pistes de largeur FIXE, calees a gauche. Avec « 1fr », deux cartes se
   partageaient les 888 px et se retrouvaient etirees a 432 px chacune, ce qui
   donnait des vignettes vides enormes, plus lourdes que l'article lui-meme.
   Trois pistes de 274 px tiennent sur la largeur de l'article : deux articles
   lies occupent deux pistes sans s'etirer, trois en remplissent la rangee. */
.cards.lies{ grid-template-columns:repeat(auto-fill, 274px); justify-content:start; }
.cards.lies .acard-img{ height:154px; }
@media (max-width:760px){
  .cards.lies{ grid-template-columns:minmax(0,1fr); }
  .cards.lies .acard-img{ height:150px; }
}

/* Le filet sous « Sur le meme sujet » faisait 888 px, la largeur de l'article,
   alors que les cartes calees a gauche n'en occupent que 580 : le trait
   depassait les cartes et flottait dans le vide a droite. Sur l'accueil le
   meme filet est juste, parce que les cartes remplissent la rangee. Ici on le
   retire, l'intitule en mono suffit a ouvrir la section. */
.art-wrap .sec .sec-h{ border-bottom:0; padding-bottom:0; }


/* ══════════════════════════════════════════════════════════════
   ECART AVANT LE FILET DU PIED DE PAGE.
   Le probleme corrige ici : ce filet court sur toute la largeur de l'ecran
   et arrivait a ZERO pixel du dernier element, cartes de l'accueil, cartes
   « Sur le meme sujet », pastilles de la page metiers. Le trait semblait
   pose sur les cartes. Seule la page d'article y echappait, grace au
   remplissage bas de sa grille.
   On traite la cause une fois pour toutes : l'ecart appartient au pied de
   page, qui le porte sur TOUTES les pages. Le remplissage bas de la grille
   d'article passe donc a zero, sinon il s'ajoutait au nouveau et donnait
   192 px, et la separation entre l'article et le bloc lie devient une marge
   haute de ce bloc, ce qui la rend independante du pied de page.
   ══════════════════════════════════════════════════════════════ */
.bfoot{ margin-top:var(--s9); }
.art{ padding-bottom:0; }
/* Filet de separation entre la fin de l'article et « Sur le meme sujet ».
   Le vide seul ne disait pas que l'article etait termine. On prend le ton le
   plus visible des deux filets du blog, 0.12 et non 0.07, et on repartit
   l'espace de part et d'autre : 64 px au-dessus, 48 en dessous. */
.art-wrap .sec{ margin-top:var(--s8); padding-top:var(--s7); border-top:1px solid var(--l2); }

/* ══════════════════════════════════════════════════════════════
   VRAI LOGO LEADS POWER DANS L'EN-TETE DU BLOG.
   Avant : un faux pictogramme, un « L » en serif dans un carre blanc, suivi
   de « Leads Power » compose en Hanken Grotesk. Ce n'etait pas la marque,
   juste une imitation. On utilise desormais l'actif officiel, celui declare
   comme logo de l'organisation dans les donnees structurees du site,
   decoupe au ras du dessin pour que la hauteur reglee soit la hauteur reelle
   des lettres.
   Sous 620 px le bloc complet ne tient pas a cote du bouton : on n'affiche
   plus que le pictogramme, et « Blog » reste lisible.
   ══════════════════════════════════════════════════════════════ */
/* Rapport de taille : sur un blog, c'est « Blog » qui porte l'identite de la
   publication, le logo n'est que la caution de la maison. A 23 px de haut le
   logo ecrasait le mot et la barre ressemblait a l'en-tete du site commercial.
   Le logo descend donc a 15 px, 112 px de large, et « Blog » monte a 1,64 rem
   pour devenir l'element dominant. */
.brand{ align-items:center; gap:var(--s3); }
.lp-bloc, .lp-picto{ display:block; width:auto; }
.lp-bloc{ height:15px; }          /* 618 x 83, soit 112 px de large */
.lp-picto{ display:none; height:19px; }
.brand .wordmark{ font-size:1.64rem; line-height:1; }
.brand .wordmark em{ margin-left:0; }

@media (max-width:620px){
  .lp-bloc{ display:none; }
  .lp-picto{ display:block; height:18px; }
  .brand .wordmark{ font-size:1.34rem; }
}

/* Les colonnes de la grille des sujets etaient en « 1fr » nu : leur contenu
   leur imposait sa largeur minimale, 287 px de pistes pour un conteneur de
   272, et la page debordait a 320 px de large. « minmax(0,1fr) » interdit ce
   gonflement, et sous 520 px une seule colonne laisse respirer les libelles. */
.sujets-compact{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width:860px){ .sujets-compact{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .sujets-compact{ grid-template-columns:minmax(0,1fr); } }

/* ══════════════════════════════════════════════════════════════
   RYTHME DES ESPACES DANS LA BARRE.
   Le probleme corrige ici : l'ecart entre la marque et la navigation faisait
   16 px, MOINS que les 24 px separant les onglets entre eux. La marque se
   lisait donc comme un sixieme onglet et tout paraissait colle.
   On remet une progression franche, du plus serre au plus large :
     12 px  a l'interieur de la marque, entre le logo et « Blog »
     32 px  entre deux onglets
     48 px  entre la marque et la navigation, la coupure la plus forte
   ══════════════════════════════════════════════════════════════ */
/* column-gap et non gap : « gap » redonnait 48 px ENTRE LES LIGNES une fois
   la barre repliee, ce qui la faisait passer a 141 px de haut sur trois
   etages. Seul l'ecart horizontal nous interesse ici. */
.mast-in{ column-gap:var(--s7); }
.lang + .bridge{ margin-left:calc(var(--s4) - var(--s7)); }
.thnav{ gap:var(--s6); }
.brand{ gap:var(--s3); }

/* ══════════════════════════════════════════════════════════════
   CARTES SANS VIGNETTE.
   Le probleme corrige ici : chaque carte portait un degrade de 128 px de
   haut, 196 sur la carte de tete, soit 34 % de la surface des cartes de
   l'accueil, pour une information nulle faute de photographie. Six vignettes
   identiques faisaient lire la page comme une maquette.
   Sans image, la carte se tient a la typographie : rubrique en mono precedee
   d'une pastille de famille, titre porteur, resume, pied avec la duree.
   ══════════════════════════════════════════════════════════════ */
.acard-body{ gap:var(--s3); padding:var(--s5); }
.acard h3{ font-size:1.2rem; line-height:1.28; }
.acard p{ font-size:var(--f-s); }

/* Pastille de couleur de famille devant la rubrique, meme motif que la
   grille des sujets : la couleur reste lisible sans occuper de surface. */
.mono-t.pastille{ position:relative; padding-left:13px; }
.mono-t.pastille::before{ content:""; position:absolute; left:0; top:50%;
  transform:translateY(-50%); width:5px; height:5px; border-radius:var(--r-f);
  background:rgb(var(--fam)); }

/* La carte de tete n'existe plus sur l'accueil : l'article de tete passe dans
   le bloc « A la une » partage avec les pages de sujet. Les regles ci-dessous
   ne servaient qu'a elle et a sa vignette. */
.acard.large{ grid-column:auto; flex-direction:column; }
.acard.large .acard-body{ padding:var(--s5); gap:var(--s3); }
.acard.large h3{ font-size:1.2rem; line-height:1.28; letter-spacing:-0.016em; max-width:none; }
.acard.large p{ font-size:var(--f-s); max-width:none; }
.acard.large .foot{ margin-top:auto; }

/* ══════════════════════════════════════════════════════════════
   TETE DE L'ACCUEIL, DEUX COLONNES.
   Le bloc « A la une » borne son texte a 62 caracteres pour rester lisible.
   Etale sur les 1152 px de la page, il laissait donc plus de la moitie de sa
   surface vide, remplie par un simple motif de grille : le meme defaut que
   les vignettes qu'on venait de retirer, deplace d'un cran.
   A droite viennent donc les deux articles suivants, en liste titre + duree.
   Effet secondaire utile : les trois articles restants forment une rangee de
   cartes complete, sans emplacement vide.
   ══════════════════════════════════════════════════════════════ */
.hero + .une{ margin-top:var(--s6); }
.une + .sec{ margin-top:var(--s8); }
.une{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:var(--s5); align-items:stretch; }
.une > .feat{ height:100%; }

.une-liste{ display:flex; flex-direction:column; gap:0; padding:var(--s5);
  border:1px solid var(--l2); border-radius:var(--r-m); background:var(--sf); }
.une-liste > .mono-t{ margin-bottom:var(--s3); }
.une-liste a{ display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4) 0; border-top:1px solid var(--l1);
  transition:color .24s var(--ease); }
.une-liste a:first-of-type{ border-top:0; padding-top:0; }
.une-liste a:last-of-type{ padding-bottom:0; }
.une-liste a .t{ font-size:1.06rem; font-weight:600; line-height:1.3;
  letter-spacing:-0.014em; color:var(--t1); }
.une-liste a:hover .t{ color:#fff; }

@media (max-width:1000px){
  .une{ grid-template-columns:minmax(0,1fr); }
}

/* Hierarchie des titres remise dans l'ordre. Le h1 de la page mesurait 24 px
   quand le titre de l'article a la une en mesurait 43 : le titre de la page
   se lisait comme une legende. Un titre d'article ne doit jamais dominer le
   titre de la page qui le liste. */
.hero h1{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); line-height:1.08; letter-spacing:-0.032em; }
.feat-body h2{ font-size:clamp(1.44rem, 2.4vw, 2.1rem); }

/* La liste laterale etait etiree sur la hauteur du bloc a la une et laissait
   129 px de vide sous son dernier lien. Elle epouse desormais son contenu. */
.une{ align-items:start; }
.une > .feat{ height:auto; }

/* Le lien vers le site etait imbrique dans la colonne « Legal » du pied de
   page, avec un style en dur, et la colonne en flex l'etirait sur toute sa
   largeur. Un lien vers la maison mere n'est pas une mention legale : il
   appartient au bloc de marque, sous la ligne de presentation, ou il epouse
   la largeur de son texte. */
.bfoot .bridge{ margin-left:0; margin-top:var(--s5); display:inline-flex; }

/* Metier non encore couvert par un article : la pastille reste affichee pour
   dire que la verticale existe, mais elle n'est pas cliquable, puisqu'il n'y
   aurait rien a lire au bout. */
.tag.muet{ color:var(--t3); border-style:dashed; cursor:default; }

/* Note explicative d'une section, entre le titre et la liste. */
.ann{ margin:var(--s4) 0 0; max-width:72ch; font-size:var(--f-s); line-height:1.6; color:var(--t2); }

/* Libelle de thematique sans article dans la langue courante : conserve pour
   dire que le sujet existe, mais non cliquable, il n'y a pas de page au bout. */
.mega-in .muet, .tags .muet{ color:var(--t3); cursor:default; }
.mega-in .muet{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); padding:var(--s3); margin:0 calc(-1 * var(--s3)); font-size:var(--f-t1); }
.tags .muet{ display:inline-flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3); border:1px dashed var(--l1); border-radius:var(--r-f); font-size:var(--f-m); }

/* ══════════════════════════════════════════════════════════════
   NAVIGATION SUR TELEPHONE.
   Le probleme corrige ici : la barre contenait 714 px d'onglets dans 327 px
   de large. Elle defilait, mais AUCUN indice ne le signalait, et un seul
   onglet sur cinq etait visible. Quatre sujets sur cinq etaient donc
   invisibles pour un visiteur sur telephone.
   Un blog a cinq sujets n'a pas besoin d'un menu escamotable : il suffit de
   les replier sur deux lignes, en resserrant le corps et les gouttieres.
   Tout est visible d'un coup d'oeil, sans defilement ni interaction.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  .thnav{ flex-wrap:wrap; overflow:visible; margin:0; padding:var(--s3) 0 var(--s2);
          column-gap:var(--s5); row-gap:0; }
  .th > a{ padding:var(--s2) 0; font-size:0.82rem; }
  .thnav::-webkit-scrollbar{ display:none; }
}

/* ══════════════════════════════════════════════════════════════
   BASCULE DE LANGUE ET MODALE LEGALE.
   Deux corrections. Le blog n'offrait aucun passage du francais a l'anglais,
   alors que le site le propose dans son en-tete et son pied. Et les liens
   legaux menaient a l'accueil commercial : la modale s'ouvrait bien, mais en
   la fermant le visiteur se retrouvait echoue sur le site, hors du blog.
   Le texte legal est desormais charge au clic depuis un fichier extrait du
   site a chaque construction, et affiche dans une modale du blog.
   ══════════════════════════════════════════════════════════════ */
/* Le groupe utilitaire de droite : la bascule de langue ouvre le groupe, le
   bouton vers le site le ferme. C'est la bascule qui porte la marge
   automatique : quand le bouton la portait, la bascule se retrouvait poussee
   AU-DELA de la colonne de contenu, a 1391 px pour une colonne finissant a
   1328, ce qui la faisait deborder du cadre. */
.lang{ display:inline-flex; align-items:center; gap:var(--s2); flex:none; margin-left:auto;
  font-family:'JetBrains Mono',monospace; font-size:var(--f-mono);
  letter-spacing:0.14em; text-transform:uppercase; }
.lang span, .lang a{ color:var(--t3); padding:var(--s2) 0; }
.lang span[aria-current]{ color:#fff; }
.lang a:hover{ color:#fff; }
.lang::before{ content:''; }
.lang span + a::before{ content:'/'; color:var(--t3); margin-right:var(--s2); opacity:.5; }

/* Liens legaux du pied : ce sont des boutons, puisqu'ils ouvrent une modale
   au lieu de naviguer. On leur rend l'apparence des liens voisins. */
/* Les liens legaux sont des boutons, puisqu'ils ouvrent une modale au lieu de
   naviguer. Ils doivent etre INDISTINGUABLES des liens voisins du pied : meme
   police, meme corps, meme couleur, meme interligne, meme alignement. */
/* Defaut corrige : « all:unset » supprimait aussi le padding vertical que les
   liens voisins recoivent, donc les trois lignes se touchaient et la colonne
   Legal paraissait tassee par rapport au site. On reprend le corps des autres
   liens du pied et la respiration du site, 13 px d'un lien a l'autre. */
.bfoot .lgl{ all:unset; cursor:pointer; display:block; text-align:left;
  font-family:'Hanken Grotesk',sans-serif; font-size:var(--f-m); line-height:1.5;
  padding:6px 0; color:var(--t2); transition:color .2s var(--ease); }
.bfoot .col .lgl:first-of-type{ padding-top:0; }
.bfoot .lgl:hover{ color:#fff; }
/* --l3 vaut 2,63:1 sur le fond du blog, sous les 3:1 exiges pour un element
   d'interface : l'anneau de focus de ces boutons etait deux fois moins
   visible que celui de tous les autres liens. On reprend la valeur generale,
   qui mesure 6:1. */
.bfoot .lgl:focus-visible{ outline:2px solid rgba(255,255,255,0.55); outline-offset:3px; border-radius:2px; }

/* Modale calquee sur celle du site, que le proprietaire accepte deja : panneau
   centre, en-tete avec un bouton de fermeture VISIBLE, pied avec un second
   bouton. Le probleme corrige : un simple caractere « × » a 22 px passait
   inapercu, et le visiteur ne trouvait pas comment sortir. */
/* DEFAUT MAJEUR CORRIGE ICI. Le navigateur masque un <dialog> ferme avec
   « dialog:not([open]){ display:none } ». En posant display:flex sur #lgd sans
   condition, on ecrasait cette regle : la modale VIDE restait dessinee en
   plein milieu de la page, avec sa croix et son bouton FERMER, et rien ne
   permettait de s'en debarrasser puisqu'elle n'etait jamais ouverte. C'est la
   boite vide vue sur telephone. Le display ne s'applique donc qu'a [open]. */
#lgd:not([open]){ display:none; }
#lgd[open]{ display:flex; flex-direction:column; }
#lgd{ width:min(760px, 92vw); max-height:86vh; padding:0; border:1px solid var(--l2);
  border-radius:22px; background:var(--sf); color:var(--t1); overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6); }
#lgd::backdrop{ background:rgba(0,0,0,.74); }
.lgd-h{ flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--l1); }
.lgd-h strong{ font-family:'Instrument Serif',serif; font-weight:400; font-size:var(--f-t2); }

/* Bouton de fermeture : un cercle borde, pas un caractere perdu. */
.lgd-x{ all:unset; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; flex:none; width:34px; height:34px; border-radius:var(--r-f);
  border:1px solid var(--l2); color:var(--t2);
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.lgd-x:hover{ border-color:var(--l3); color:#fff; background:rgba(255,255,255,.06); }
.lgd-x:focus-visible{ outline:2px solid rgba(255,255,255,0.55); outline-offset:3px; }

/* « flex:1 » posait une base de zero : le panneau ne grandissait pas et
   restait a 220 px, en-tete et pied seuls. « flex:1 1 auto » laisse le contenu
   donner sa hauteur naturelle jusqu'au plafond, puis il defile. min-height:0
   est indispensable pour qu'un enfant defilant puisse rapetisser. */
.lgd-c{ flex:1 1 auto; min-height:0; padding:var(--s5); overflow-y:auto;
  font-size:var(--f-s); line-height:1.62; color:var(--t2); }
.lgd-c :is(h2,h3,h4,strong){ color:var(--t1); }

/* Les groupes titre + paragraphes etaient espaces par un gap:22px porte par le
   conteneur du site, retire avec ses emballages. On le rend ici. */
.lgd-c > div + div{ margin-top:22px; }

/* Second bouton en pied : sur un texte long, l'en-tete est loin apres defilement. */
.lgd-f{ flex:none; padding:var(--s4) var(--s5); border-top:1px solid var(--l1);
  display:flex; justify-content:flex-end; }
.lgd-fb{ width:auto; padding:var(--s3) var(--s5); border-radius:var(--r-f);
  font-family:'JetBrains Mono',monospace; font-size:var(--f-mono);
  letter-spacing:0.16em; text-transform:uppercase; }
.lgd-att{ color:var(--t3); }

/* ══════════════════════════════════════════════════════════════
   MENU ESCAMOTABLE SUR TELEPHONE.
   Le repli sur deux lignes rendait bien les cinq sujets visibles, mais au
   prix d'un en-tete de 191 px a 375 de large, soit 24 % de l'ecran, et de
   224 px sur trois lignes a 320. Ce n'etait pas propre.
   La navigation entre donc dans un <details> : deplie sur grand ecran, ou le
   resume est masque et rien ne change, escamote sur telephone derriere un
   bouton « Sujets ». Le contenu reste dans le HTML, donc indexable, et il n'y
   a pas de second menu a maintenir.
   ══════════════════════════════════════════════════════════════ */
/* DEFAUT MAJEUR CORRIGE ICI. Le <details> etait en display:contents pour que
   la barre de sujets reste un enfant direct de la rangee. Mais Chrome ignore
   « order » sur les enfants d'une boite display:contents : le sous-arbre garde
   sa position dans le DOM, donc la barre valait toujours 0 et passait AVANT la
   marque des que la rangee se repliait, entre 620 et 1340 px. La marque se
   retrouvait sur la deuxieme ligne, sous la navigation.
   Le <details> redevient donc une vraie boite : « order » s'y applique
   normalement, et c'est lui qu'on place en dernier. */
/* DEFAUT SUBTIL CORRIGE ICI. Chrome interpose un pseudo-element
   « ::details-content » entre le <details> et son contenu. La barre de sujets
   n'est donc PAS un enfant de flex du <details> : ses « flex » et ses
   pourcentages s'appliquaient dans le vide. Consequence visible, le filet de
   separation, porte par la barre, courait de 40 a 754 px alors que la colonne
   de contenu va de 64 a 1216 : une ligne qui commencait 24 px a gauche du logo
   et s'arretait au milieu de nulle part. C'est aussi ce qui faisait echouer
   « order » du temps du display:contents.
   Le filet passe donc sur le <details> lui-meme, dont je maitrise la
   geometrie, et le pseudo-element relaie la souplesse a la barre. */
.mnav{ display:flex; order:4; flex:0 0 100%; border-top:1px solid var(--l1); }
.mnav::details-content{ display:flex; flex:1 1 auto; min-width:0; }
.mnav > summary{ display:none; }

@media (max-width:620px){
  /* display:contents laisse les enfants dans la grille du conteneur, ce qui
     empeche le details de se replier. Sur telephone il redevient une boite. */
  /* Ordre explicite sur telephone. Sans ordre, la bascule de langue heritait
     de 0 et passait AVANT la marque, ce qui donnait « FR / EN, logo, bouton ». */
  /* La bascule de langue flottait au milieu, avec 64 px de vide apres la
     marque : ni centree, ni alignee a droite. « margin-left:auto » absorbe
     tout l'espace libre a sa gauche, donc la marque reste calee a gauche et
     le couple langue + bouton se lit comme un seul groupe a droite. */
  .lang{ order:2; margin-left:auto; }
  .bridge{ order:3; }
  /* Deux reglages de grand ecran nuisaient sur telephone : une gouttiere de
     48 px et un margin-left:-32px sur le bouton, qui servaient a le coller
     contre la navigation. A 320 de large le bouton passait a la ligne et
     sortait de 8 px hors de l'ecran par la gauche. */
  .mast-in{ column-gap:var(--s4); padding-top:var(--s2); row-gap:var(--s2); }
  .mast .bridge{ margin-left:0; }
  .mnav{ display:block; flex:0 0 100%; order:4; border-top:1px solid var(--l1); }
  .mnav > summary{ display:flex; align-items:center; justify-content:space-between;
    cursor:pointer; list-style:none; padding:var(--s4) 0;
    font-family:'JetBrains Mono',monospace; font-size:var(--f-mono);
    letter-spacing:0.2em; text-transform:uppercase; color:var(--t2); }
  .mnav > summary::-webkit-details-marker{ display:none; }
  .mnav > summary::after{ content:'⌄'; font-family:'JetBrains Mono',monospace;
    color:var(--t3); transition:transform .24s var(--ease); }
  .mnav[open] > summary::after{ transform:rotate(180deg); }
  .mnav[open] > summary{ color:#fff; }
  /* Une fois ouvert, un sujet par ligne : c'est une liste, pas une barre. */
  .mnav .thnav{ flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    padding:0 0 var(--s4); row-gap:0; }
  .mnav .th > a{ padding:var(--s3) 0; font-size:0.95rem; border-bottom:0; }
  /* Le separateur portait sur le lien, dont la largeur suit le texte : les
     filets etaient donc de longueurs inegales. Il porte sur la ligne. */
  .mnav .th + .th{ border-top:1px solid var(--l1); }
  .mnav .th > a{ display:block; }
}

/* Tres petits ecrans, iPhone SE et assimiles. Marque 64 + langue 61 + bouton
   122 font 247 px : avec 24 px de marge de chaque cote il ne reste que 272 px
   utiles, donc la rangee cassait. On resserre les marges de l'en-tete seul.
   Les 8 px de decalage avec le corps de page ne valent que sous 360 et sont
   preferables a un bouton qui passe a la ligne. */
@media (max-width:359px){
  .mast .wrap{ padding-left:var(--s4); padding-right:var(--s4); }
  .mast-in{ column-gap:var(--s3); }
}