/*
Theme Name: Les Outils Pro
Theme URI: https://www.lesoutilspro.fr
Author: Les Outils Pro
Description: Thème du média Les Outils Pro — avis, comparatifs et actualités sur les outils professionnels (banque pro, logiciels, SaaS). Système de notation sur 10 avec barèmes par profil. Voir DESIGN.md pour les règles de la direction artistique.
Version: 1.2.20
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lesoutilspro
Tags: blog, news, two-columns, custom-menu, custom-logo, translation-ready
*/

/* ============================================================
   Feuille unique du thème.
   Blocs 1-15  : socle + accueil (identiques à template-home.html)
   Bloc 16     : état de lancement
   Blocs 17-20 : article, fil d'Ariane, bloc verdict, sommaire
   Bloc 21     : ajustements propres à WordPress
   Source de vérité des règles : DESIGN.md
   ============================================================ */


/* ============================================================
   1. JETONS — identiques à la page avis (source : DESIGN.md)
   ============================================================ */
:root{
  --c-paper:#FFFFFF; --c-surface:#F5F8FC; --c-surface-2:#E9EFF7;
  --c-line:#DDE5EF;  --c-line-strong:#C3CFDE;
  --c-ink:#0B1D30;   --c-body:#33475B;  --c-muted:#5C6E80;
  --c-brand:#2453D6; --c-brand-ink:#1B41AC; --c-brand-deep:#0C2340; --c-brand-wash:#EEF3FE;
  --c-good:#0E7A5B;  --c-good-wash:#E9F6F1;
  --c-mid:#8F5A00;   --c-mid-wash:#FDF3E3;
  --c-bad:#C0342B;   --c-bad-wash:#FBEDEC;
  --c-flag:#F5A524;

  /* teintes réservées aux fonds marine */
  --c-on-deep:#C8D8EC; --c-on-deep-dim:#8FA6C0; --c-on-deep-line:rgba(255,255,255,.15);

  --f-ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-text:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;

  --t-h1:clamp(2.125rem,1.4rem + 3vw,3.5rem);
  --t-h2:clamp(1.5rem,1.24rem + 1.1vw,2rem);
  --t-h3:clamp(1.125rem,1.06rem + .3vw,1.25rem);
  --t-body:1.125rem; --t-small:.9375rem; --t-meta:.8125rem;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;
  --s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;

  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --e-1:0 1px 2px rgba(11,29,48,.05),0 2px 8px rgba(11,29,48,.05);
  --e-2:0 2px 4px rgba(11,29,48,.06),0 14px 30px -10px rgba(11,29,48,.18);

  --page:72rem;      /* largeur de page */
  --col:44rem;       /* colonne de lecture — mesure 65-72 caractères */
  --col-wide:54rem;  /* débord des blocs de données */
  --gutter:var(--s-5);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-paper);color:var(--c-body);font-family:var(--f-text);
  font-size:var(--t-body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--f-ui);color:var(--c-ink);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.032em}
h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.022em}
h3{font-size:var(--t-h3);font-weight:700;letter-spacing:-.014em}
p{margin:0 0 var(--s-4)}
a{color:var(--c-brand);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--c-brand-ink)}
strong{font-weight:700;color:var(--c-ink)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--c-brand);outline-offset:2px;border-radius:2px}
.tab{font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--c-brand);color:#fff;padding:var(--s-3) var(--s-4);z-index:99}
.skip:focus{left:var(--s-3);top:var(--s-3)}
.wrap{width:100%;max-width:calc(var(--page) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

.preview{background:#111c2b;color:#cfe0f5;font-family:var(--f-ui);font-size:var(--t-meta);
  padding:var(--s-2) var(--s-4);text-align:center;line-height:1.5}
.preview b{color:#fff}

/* ============================================================
   3. EN-TÊTE
   ============================================================ */
.site-head{background:var(--c-paper);border-bottom:1px solid var(--c-line);position:sticky;top:0;z-index:40}
.site-head__in{display:flex;align-items:center;gap:var(--s-5);min-height:64px}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--f-ui);font-weight:800;font-size:1.0625rem;
  letter-spacing:-.03em;color:var(--c-ink);text-decoration:none;white-space:nowrap}
.logo__mark{width:26px;height:26px;border-radius:var(--r-sm);background:var(--c-brand);flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-size:.8125rem;font-weight:800;letter-spacing:-.04em}
.logo em{font-style:normal;color:var(--c-brand)}
/* Logo téléversé dans le Personnalisateur. WordPress le sortirait à sa taille
   d'origine : sans plafond, un fichier de 1688 px fait exploser la barre.
   La hauteur est posée en style en ligne par lop_sigle(), pour qu'un cache ou
   une minification qui perdrait cette feuille ne puisse pas casser l'entête.
   Il ne reste ici que ce qui ne risque rien : l'alignement et le cadrage.
   Pas d'arrondi : la forme appartient au fichier, pas à la feuille de style. */
.logo__img{display:block;flex:0 0 auto;object-fit:contain}
.nav{display:flex;gap:var(--s-5);margin-left:auto}
.nav a{font-family:var(--f-ui);font-size:.9375rem;font-weight:600;color:var(--c-body);text-decoration:none;
  padding:var(--s-2) 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{color:var(--c-brand);border-bottom-color:var(--c-brand)}
.head-search{display:flex;align-items:center;gap:var(--s-2);border:1px solid var(--c-line-strong);
  border-radius:var(--r-pill);padding:0 var(--s-3);height:38px;background:var(--c-paper)}
.head-search:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-wash)}
.head-search input{border:0;outline:0;background:none;font-family:var(--f-text);font-size:var(--t-small);
  color:var(--c-ink);width:150px;min-width:0}
.head-search svg{flex:0 0 auto;color:var(--c-muted)}
.nav-toggle{margin-left:auto;display:none;align-items:center;gap:var(--s-2);background:none;
  border:1px solid var(--c-line-strong);border-radius:var(--r-sm);padding:9px var(--s-3);
  font-family:var(--f-ui);font-weight:700;font-size:.875rem;color:var(--c-ink);cursor:pointer}
@media(max-width:960px){
  .nav{position:fixed;inset:64px 0 auto;background:var(--c-paper);border-bottom:1px solid var(--c-line);
    flex-direction:column;gap:0;padding:var(--s-2) var(--gutter) var(--s-4);margin:0;box-shadow:var(--e-2)}
  .nav:not([data-open]){display:none}
  .nav a{padding:var(--s-3) 0;border-bottom:1px solid var(--c-line);font-size:1.0625rem}
  .nav-toggle{display:flex}
  .head-search{display:none}
}

/* ============================================================
   4. HERO — bande marine, promesse à gauche, démonstration à droite
   ============================================================ */
.hero{background:var(--c-brand-deep);color:var(--c-on-deep);padding:var(--s-8) 0 var(--s-9)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s-8);align-items:center}
@media(max-width:940px){.hero{padding:var(--s-7) 0 var(--s-8)}.hero__grid{grid-template-columns:1fr;gap:var(--s-6)}}
@media(max-width:620px){.hero{padding:var(--s-6) 0 var(--s-7)}}
.hero h1{color:#fff;max-width:15ch}
.hero__sub{font-size:clamp(1.0625rem,1rem + .5vw,1.1875rem);line-height:1.6;color:var(--c-on-deep);
  margin:var(--s-4) 0 0;max-width:46ch}
.hero__sub b{color:#fff;font-weight:600}

.search{display:flex;gap:var(--s-2);margin-top:var(--s-5);max-width:32rem}
.search__field{flex:1;display:flex;align-items:center;gap:var(--s-3);background:#fff;border-radius:var(--r-sm);
  padding:0 var(--s-4);min-height:52px;border:1px solid transparent}
.search__field:focus-within{border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(36,83,214,.35)}
.search__field svg{color:var(--c-muted);flex:0 0 auto}
.search input{flex:1;border:0;outline:0;background:none;font-family:var(--f-text);font-size:1.0625rem;
  color:var(--c-ink);min-width:0}
.search input::placeholder{color:var(--c-muted)}
@media(max-width:520px){.search{flex-direction:column}.search .btn{width:100%}}

.hero__facts{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-5) 0 0;padding:0;list-style:none;
  font-size:var(--t-small);color:var(--c-on-deep-dim)}
.hero__facts b{font-family:var(--f-ui);color:#fff;font-variant-numeric:tabular-nums}

/* classement de démonstration dans le hero */
.peek{background:var(--c-paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e-2)}
.peek__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.peek__h h2{font-size:1rem}
.peek__h span{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--c-muted)}
.peek__f{display:block;padding:var(--s-3) var(--s-5);border-top:1px solid var(--c-line);
  font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);text-decoration:none;background:var(--c-surface)}
.peek__f:hover{background:var(--c-brand-wash)}

/* ============================================================
   5. LIGNE DE PREUVE
   ============================================================ */
.trust{border-bottom:1px solid var(--c-line)}
.trust ul{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.trust li{padding:var(--s-5) var(--s-5) var(--s-5) 0;border-right:1px solid var(--c-line);font-size:var(--t-small);
  line-height:1.45;color:var(--c-muted)}
.trust li:last-child{border-right:0}
.trust li+li{padding-left:var(--s-5)}
.trust b{display:block;font-family:var(--f-ui);color:var(--c-ink);font-size:1.0625rem;font-variant-numeric:tabular-nums}
@media(max-width:860px){
  .trust ul{grid-template-columns:1fr 1fr}
  .trust li{padding:var(--s-4) var(--s-4) var(--s-4) 0}
  .trust li:nth-child(2n){border-right:0;padding-left:var(--s-4)}
  .trust li:nth-child(3),.trust li:nth-child(4){border-top:1px solid var(--c-line)}
  .trust li:nth-child(3){padding-left:0}
}
@media(max-width:480px){
  .trust ul{grid-template-columns:1fr}
  .trust li{border-right:0;padding-left:0 !important;border-top:1px solid var(--c-line)}
  .trust li:first-child{border-top:0}
}

/* ============================================================
   6. SECTIONS GÉNÉRIQUES
   ============================================================ */
.sec{padding:var(--s-9) 0 0}
.sec--flush{padding-top:var(--s-8)}
.sec__h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s-3) var(--s-5);margin-bottom:var(--s-5)}
.sec__h p{margin:var(--s-2) 0 0;font-size:var(--t-small);color:var(--c-muted);max-width:56ch}
.sec__more{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);text-decoration:none;white-space:nowrap}
.sec__more:hover{text-decoration:underline}

/* ============================================================
   7. LES TROIS UNIVERS
   ============================================================ */
.univers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media(max-width:880px){.univers{grid-template-columns:1fr}}
.uni{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5);
  display:flex;flex-direction:column;gap:var(--s-3);text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s}
.uni:hover{border-color:var(--c-brand);box-shadow:var(--e-1);color:inherit}
.uni h3{color:var(--c-ink)}
.uni__count{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--c-muted)}
.uni__top{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);margin-top:auto}
.uni__note{font-family:var(--f-ui);font-weight:800;font-size:1.25rem;color:var(--c-good);font-variant-numeric:tabular-nums}
.uni__note small{font-size:.75rem;color:var(--c-muted);font-weight:600}
.uni__topname{font-size:var(--t-small);line-height:1.3;min-width:0}
.uni__topname b{display:block;font-family:var(--f-ui);color:var(--c-ink)}
.uni__topname span{color:var(--c-muted);font-size:var(--t-meta)}
.uni__go{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);color:var(--c-brand)}
.uni:hover .uni__go{text-decoration:underline}

/* ============================================================
   8. LE CLASSEMENT — le composant signature de la home
   ============================================================ */
.tabs{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-4)}
.tabs button{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);color:var(--c-body);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-pill);
  padding:9px var(--s-4);cursor:pointer;min-height:40px;transition:background .15s,color .15s,border-color .15s}
.tabs button:hover{border-color:var(--c-line-strong)}
.tabs button[aria-selected="true"]{background:var(--c-brand);border-color:var(--c-brand);color:#fff}

.rank{border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.rank__row{display:grid;grid-template-columns:34px 44px minmax(0,1.05fr) 168px minmax(0,1.35fr) auto;
  gap:var(--s-4);align-items:center;padding:var(--s-4) var(--s-5);border-top:1px solid var(--c-line)}
.rank__row:first-child{border-top:0}
.rank__row:nth-child(odd){background:var(--c-paper)}
.rank__pos{font-family:var(--f-ui);font-weight:800;font-size:1.125rem;color:var(--c-line-strong);
  font-variant-numeric:tabular-nums;text-align:center}
.rank__row:first-child .rank__pos{color:var(--c-brand)}
.rank__logo{width:44px;height:44px;border-radius:var(--r-sm);background:var(--c-brand-deep);color:#fff;
  display:grid;place-items:center;font-family:var(--f-ui);font-weight:800;font-size:1.0625rem}
.rank__name{min-width:0}
.rank__name b{display:block;font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;color:var(--c-ink);line-height:1.25}
.rank__name span{font-size:var(--t-meta);color:var(--c-muted)}
.rank__score{display:flex;align-items:center;gap:var(--s-3)}
.rank__bar{flex:1;height:6px;border-radius:3px;background:var(--c-surface-2);overflow:hidden;min-width:48px}
.rank__bar i{display:block;height:100%;width:100%;background:var(--c-good);transform-origin:left center}
.rank__val{font-family:var(--f-ui);font-weight:800;font-size:1.0625rem;color:var(--c-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rank__for{font-size:var(--t-small);line-height:1.4;color:var(--c-body)}
.rank__go{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);text-decoration:none;white-space:nowrap}
.rank__go:hover{text-decoration:underline}
@media(max-width:1000px){
  .rank__row{grid-template-columns:28px 40px minmax(0,1fr) auto;gap:var(--s-3);
    padding:var(--s-4);row-gap:var(--s-3)}
  .rank__score{grid-column:3/-1;order:3}
  .rank__for{grid-column:3/-1;order:4;font-size:var(--t-meta);color:var(--c-muted)}
  .rank__go{order:2}
  .rank__logo{width:40px;height:40px;font-size:.9375rem}
}

/* ============================================================
   9. DERNIERS AVIS
   ============================================================ */
.avis-list{border-top:1px solid var(--c-line)}
/* Le chapeau de page ferme déjà par un filet : deux traits parallèles à 36 px
   d'écart se lisent comme un défaut, pas comme une separation. */
.page-head + .avis-list{border-top:0}
.page-head + .grille-actu{margin-top:var(--s-2)}
.avis-list a{display:grid;grid-template-columns:66px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;
  padding:var(--s-4) 0;border-bottom:1px solid var(--c-line);text-decoration:none;color:inherit}
.avis-list a:hover .avis-list__t{color:var(--c-brand)}
.avis-list__n{font-family:var(--f-ui);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;
  color:var(--c-ink);text-align:center;background:var(--c-surface);border-radius:var(--r-sm);padding:var(--s-2) 0;line-height:1.1}
.avis-list__n small{display:block;font-size:.625rem;color:var(--c-muted);font-weight:600}
.avis-list__t{font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;color:var(--c-ink);line-height:1.35}
.avis-list__m{display:block;font-family:var(--f-text);font-weight:400;font-size:var(--t-meta);color:var(--c-muted);margin-top:2px}
.avis-list__k{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.01em;
  color:var(--c-muted);white-space:nowrap}
@media(max-width:640px){
  .avis-list a{grid-template-columns:56px minmax(0,1fr)}
  .avis-list__k{display:none}
}

/* ============================================================
   10. COMPARATIFS À LA UNE
   ============================================================ */
.compars{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:820px){.compars{grid-template-columns:1fr}}
.compar{border:1px solid var(--c-line-strong);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit}
.compar:hover{border-color:var(--c-brand)}
.compar__h{padding:var(--s-5);background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.compar__k{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-brand-ink);display:block;margin-bottom:var(--s-2)}
.compar__h h3{font-size:1.3125rem;color:var(--c-ink)}
.compar__b{padding:var(--s-5);font-size:var(--t-small);line-height:1.6;flex:1}
.compar__b p{margin:0 0 var(--s-4)}
.compar__win{display:flex;align-items:center;gap:var(--s-3);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.compar__win .rank__logo{width:38px;height:38px;font-size:.9375rem}
.compar__win b{font-family:var(--f-ui);color:var(--c-ink);display:block;line-height:1.2}
.compar__win span{font-size:var(--t-meta);color:var(--c-muted)}
.compar__win .uni__note{margin-left:auto}

/* ============================================================
   11. ACTUALITÉS
   ============================================================ */
.news{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s-8);border-top:1px solid var(--c-line)}
@media(max-width:820px){.news{grid-template-columns:1fr}}
.news a{display:block;padding:var(--s-4) 0;border-bottom:1px solid var(--c-line);text-decoration:none;color:inherit}
.news a:hover b{color:var(--c-brand)}
.news time{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;color:var(--c-muted);
  letter-spacing:.04em;text-transform:uppercase}
.news b{display:block;font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;color:var(--c-ink);
  line-height:1.35;margin-top:4px}

/* ============================================================
   12. MÉTHODE — bande marine
   ============================================================ */
.method-band{background:var(--c-brand-deep);color:var(--c-on-deep);margin-top:var(--s-9);padding:var(--s-8) 0}
.method-band h2{color:#fff}
.method-band>.wrap>p{max-width:58ch;margin:var(--s-3) 0 var(--s-6);color:var(--c-on-deep)}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);margin:0;padding:0;list-style:none;counter-reset:m}
@media(max-width:900px){.steps4{grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4)}}
@media(max-width:520px){.steps4{grid-template-columns:1fr}}
.steps4 li{counter-increment:m;border-top:1px solid var(--c-on-deep-line);padding-top:var(--s-4);
  font-size:var(--t-small);line-height:1.55}
.steps4 li::before{content:counter(m);display:block;font-family:var(--f-ui);font-weight:800;font-size:1.5rem;
  color:#fff;font-variant-numeric:tabular-nums;margin-bottom:var(--s-2)}
.steps4 b{display:block;font-family:var(--f-ui);color:#fff;font-size:1.0625rem;margin-bottom:var(--s-2)}
.method-band .btn{margin-top:var(--s-6)}

/* ============================================================
   13. INFOLETTRE
   ============================================================ */
.letter{border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);
  padding:var(--s-6);margin-top:var(--s-9);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:var(--s-5) var(--s-7);align-items:center}
@media(max-width:820px){.letter{grid-template-columns:1fr;padding:var(--s-5)}}
.letter h2{font-size:1.375rem}
.letter p{margin:var(--s-2) 0 0;font-size:var(--t-small);color:var(--c-muted)}
.letter__form{display:flex;flex-direction:column;gap:var(--s-3)}
.letter form{display:flex;gap:var(--s-2)}
@media(max-width:520px){.letter form{flex-direction:column}.letter .btn{width:100%}}
.letter input{flex:1;min-width:0;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);
  background:var(--c-paper);padding:0 var(--s-4);min-height:48px;font-family:var(--f-text);
  font-size:1rem;color:var(--c-ink)}
.letter input:focus{outline:0;border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-wash)}
.letter small{font-size:var(--t-meta);color:var(--c-muted);line-height:1.5}

/* ============================================================
   14. BOUTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;
  padding:0 var(--s-5);border-radius:var(--r-sm);font-family:var(--f-ui);font-weight:700;font-size:1rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--c-brand);color:#fff}
.btn--primary:hover{background:var(--c-brand-ink);color:#fff}
.btn--onDeep{background:#fff;color:var(--c-brand-deep)}
.btn--onDeep:hover{background:var(--c-on-deep);color:var(--c-brand-deep)}

/* ============================================================
   15. PIED DE PAGE
   ============================================================ */
.foot{background:var(--c-brand-deep);color:var(--c-on-deep);margin-top:var(--s-9);padding:var(--s-8) 0 var(--s-6);font-size:var(--t-small)}
.foot a{color:#DCE7F5;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s-6)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr;gap:var(--s-5)}}
.foot h3{color:#fff;font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s-3)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot .logo{color:#fff;margin-bottom:var(--s-3)}
.foot .logo em{color:#7FA6F5}
.foot__intro{line-height:1.6;margin:0;max-width:34ch}
.foot__legal{border-top:1px solid var(--c-on-deep-line);margin-top:var(--s-7);padding-top:var(--s-5);
  font-size:var(--t-meta);line-height:1.65;color:var(--c-on-deep-dim)}
.foot__legal a{color:var(--c-on-deep)}
.foot__bottom{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-4)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ============================================================
   16. ÉTAT DE LANCEMENT — blocs qui n'existent que tant que
       le site n'a pas de contenu. Supprimés au fil des seuils
       décrits dans LANCEMENT.md.
   ============================================================ */

/* carte hero : la grille de notation, seule chose vraie au jour 0 */
.grille__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--c-line);background:var(--c-surface)}
.grille__h h2{font-size:1rem}
.grille__h span{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--c-muted)}
.grille__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3);align-items:baseline;
  padding:11px var(--s-5);border-top:1px solid var(--c-line)}
.grille__h + .grille__row{border-top:0}   /* pas :first-of-type : le premier div frère est l'en-tête */
.grille__row b{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);color:var(--c-ink)}
.grille__coef{font-family:var(--f-ui);font-weight:700;font-size:var(--t-meta);color:var(--c-brand-ink);
  background:var(--c-brand-wash);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* feuille de route : ce qui est en ligne, ce qui arrive */
.route{border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.route__row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:var(--s-4);align-items:center;
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--c-line)}
.route__row:first-child{border-top:0}
.route__row b{display:block;font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;color:var(--c-ink);line-height:1.3}
.route__row p{margin:2px 0 0;font-size:var(--t-small);color:var(--c-muted);line-height:1.45}
.etat{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-ui);font-weight:700;
  font-size:var(--t-meta);border-radius:var(--r-pill);padding:5px var(--s-3);white-space:nowrap}
.etat::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:currentColor}
.etat--live{color:var(--c-good);background:var(--c-good-wash)}
.etat--wip{color:var(--c-mid);background:var(--c-mid-wash)}
.etat--todo{color:var(--c-muted);background:var(--c-surface-2)}
.route__go{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);text-decoration:none;white-space:nowrap}
.route__go:hover{text-decoration:underline}
.route__row span[aria-hidden]{font-family:var(--f-ui);font-size:var(--t-small);color:var(--c-muted)}
@media(max-width:760px){
  .route__row{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s-2);padding:var(--s-4)}
  .route__row>.etat{order:1;justify-self:start}
  .route__row>div{order:2;grid-column:1/-1}
  .route__row>.route__go,.route__row>span[aria-hidden]{order:3;grid-column:1/-1;justify-self:start}
}

/* univers à l'état vide : on annonce le périmètre, on ne compte rien */
.uni--soon{border-style:dashed}
.uni--soon:hover{border-style:solid}
.uni__soonline{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) 0;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);margin-top:auto;
  font-size:var(--t-small);color:var(--c-muted);line-height:1.4}

/* la grille détaillée, en tableau */
.bareme{width:100%;border-collapse:collapse;font-size:var(--t-small);background:var(--c-paper)}
.bareme caption{text-align:left;font-family:var(--f-ui);font-size:var(--t-meta);color:var(--c-muted);
  padding:var(--s-3) var(--s-4) var(--s-2);caption-side:top}
.bareme thead th{background:var(--c-surface-2);font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink);text-align:left;padding:var(--s-3) var(--s-4);white-space:nowrap}
.bareme tbody th{text-align:left;font-family:var(--f-ui);font-weight:700;color:var(--c-ink);
  padding:var(--s-3) var(--s-4);border-top:1px solid var(--c-line)}
.bareme td{padding:var(--s-3) var(--s-4);border-top:1px solid var(--c-line);vertical-align:top}
.bareme .num{text-align:right;font-family:var(--f-ui);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.tw{max-width:100%;margin:0}
.tw__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-line);border-radius:var(--r-md)}
.tw__scroll table{min-width:620px}
.tw__hint{font-size:var(--t-meta);color:var(--c-muted);margin:var(--s-2) 0 0}
@media(min-width:760px){.tw__hint{display:none}}

/* appel principal du jour 0 : l'inscription */
.hero .letter__inline{margin-top:var(--s-5);max-width:32rem}
.hero .letter__inline small{display:block;margin-top:var(--s-3);font-size:var(--t-meta);color:var(--c-on-deep-dim);line-height:1.5}
.hero .letter__inline form{display:flex;gap:var(--s-2)}
.hero .letter__inline input{flex:1;min-width:0;border:1px solid transparent;border-radius:var(--r-sm);
  background:#fff;padding:0 var(--s-4);min-height:52px;font-family:var(--f-text);font-size:1.0625rem;color:var(--c-ink)}
.hero .letter__inline input::placeholder{color:var(--c-muted)}
.hero .letter__inline input:focus{outline:0;border-color:var(--c-brand);box-shadow:0 0 0 3px rgba(36,83,214,.35)}
@media(max-width:520px){.hero .letter__inline form{flex-direction:column}.hero .letter__inline .btn{width:100%}}
.hero__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-5) 0 0;padding:0;list-style:none;font-size:var(--t-small)}
.hero__links a{color:#fff;font-family:var(--f-ui);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.hero__links a:hover{color:#fff;border-bottom-color:#fff}
/* ============================================================
   5. FIL D'ARIANE + EN-TÊTE D'ARTICLE
   ============================================================ */
.crumbs{font-size:var(--t-meta);font-family:var(--f-ui);color:var(--c-muted);padding:var(--s-4) 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:var(--s-2);color:var(--c-line-strong)}
.crumbs a{color:var(--c-muted);text-decoration:none}
.crumbs a:hover{color:var(--c-brand);text-decoration:underline}

.head{padding:var(--s-4) 0 var(--s-5)}
.chip{display:inline-block;font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.01em;
  color:var(--c-brand-ink);background:var(--c-brand-wash);border-radius:var(--r-pill);
  padding:5px var(--s-3);margin-bottom:var(--s-4)}
.chapo{font-size:clamp(1.0625rem,1rem + .45vw,1.1875rem);line-height:1.55;color:var(--c-body);
  max-width:var(--col);margin:var(--s-3) 0 0}

.byline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-4);
  padding-top:var(--s-4);border-top:1px solid var(--c-line);font-size:var(--t-small)}
.byline__who{display:flex;align-items:center;gap:var(--s-3)}
.avatar{width:42px;height:42px;border-radius:var(--r-pill);background:var(--c-surface-2);color:var(--c-brand-deep);
  display:grid;place-items:center;font-family:var(--f-ui);font-weight:800;font-size:.9375rem;flex:0 0 auto}
.byline__meta{color:var(--c-muted);font-size:var(--t-meta);line-height:1.45}
.byline__meta b{color:var(--c-ink);font-family:var(--f-ui);font-size:var(--t-small);display:block}
.tested{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-weight:700;font-size:var(--t-meta);
  color:var(--c-good);background:var(--c-good-wash);border-radius:var(--r-pill);padding:5px var(--s-3)}
/* en-tête resserré sur petit écran : la note doit rester atteignable au premier coup d'œil */
@media(max-width:620px){
  h1{font-size:1.875rem}
  .byline{gap:var(--s-2) var(--s-4);margin-top:var(--s-3);padding-top:var(--s-3)}
  .byline__who{flex:1 0 100%}
  .avatar{width:36px;height:36px;font-size:.8125rem}
  .tested{padding:3px 10px}
  .disclose{margin-top:var(--s-3)}
}
.disclose{margin-top:var(--s-4);font-size:var(--t-meta);color:var(--c-muted);background:var(--c-surface);
  border:1px solid var(--c-line);border-radius:var(--r-sm);padding:10px var(--s-4);max-width:var(--col-wide);line-height:1.5}
.disclose a{color:var(--c-brand-ink)}


/* ============================================================
   6. BLOC VERDICT  — composant signature
   ============================================================ */
.verdict{border:1px solid var(--c-line-strong);border-radius:var(--r-lg);background:var(--c-paper);
  overflow:hidden;max-width:var(--col-wide);margin-bottom:var(--s-7)}
.verdict__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:0}
@media(max-width:820px){.verdict__top{grid-template-columns:1fr}}

.vscore{padding:var(--s-5);background:var(--c-surface);border-right:1px solid var(--c-line);
  display:flex;flex-direction:column}
@media(max-width:820px){.vscore{border-right:0;border-bottom:1px solid var(--c-line)}}
.vbrand{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.vbrand__logo{width:52px;height:52px;border-radius:var(--r-md);background:var(--c-brand-deep);color:#fff;
  display:grid;place-items:center;font-family:var(--f-ui);font-weight:800;font-size:1.125rem;flex:0 0 auto}
.vbrand__name{font-family:var(--f-ui);font-weight:800;font-size:1.25rem;color:var(--c-ink);line-height:1.2}
.vbrand__cat{font-size:var(--t-meta);color:var(--c-muted)}

.vnote{display:flex;align-items:baseline;gap:var(--s-2);font-family:var(--f-ui);font-variant-numeric:tabular-nums}
.vnote__val{font-size:3.75rem;font-weight:800;color:var(--c-ink);letter-spacing:-.05em;line-height:.95}
.vnote__den{font-size:1.25rem;font-weight:700;color:var(--c-muted)}
.vmention{display:inline-block;align-self:flex-start;margin-top:var(--s-3);font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);
  padding:5px var(--s-3);border-radius:var(--r-pill);background:var(--c-good-wash);color:var(--c-good)}
.vbasis{margin-top:var(--s-3);font-size:var(--t-meta);color:var(--c-muted);line-height:1.5}
.vbasis a{color:var(--c-brand-ink)}

/* sélecteur de profil */
.profil{margin-top:var(--s-5);border-top:1px solid var(--c-line);padding-top:var(--s-4)}
.profil__lab{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;color:var(--c-ink);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--s-2)}
.seg{display:flex;background:var(--c-surface-2);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.seg span{display:block;text-align:center;font-family:var(--f-ui);font-weight:700;font-size:.875rem;color:var(--c-body);
  padding:9px var(--s-2);border-radius:4px;transition:background .15s,color .15s;cursor:pointer;min-height:38px;
  display:grid;place-items:center}
.seg input:checked + span{background:var(--c-paper);color:var(--c-brand-ink);box-shadow:var(--e-1)}
.seg input:focus-visible + span{outline:2px solid var(--c-brand);outline-offset:2px}

/* critères */
.vcrit{padding:var(--s-5)}
.vcrit__h{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-muted);display:flex;justify-content:space-between;gap:var(--s-3);padding-bottom:var(--s-2);
  border-bottom:1px solid var(--c-line);margin-bottom:var(--s-3)}
.crit{display:grid;grid-template-columns:minmax(0,1fr) 84px 44px;align-items:center;gap:var(--s-3);
  padding:9px 0;border-bottom:1px solid var(--c-line)}
.crit:last-child{border-bottom:0}
.crit__name{font-size:var(--t-small);color:var(--c-body);min-width:0}
.crit__name b{font-family:var(--f-ui);font-weight:700;color:var(--c-ink);display:block;line-height:1.3}
.crit__coef{font-size:var(--t-meta);color:var(--c-muted)}
/* le remplissage est composité (scaleX) : aucune propriété de mise en page animée */
.bar{height:6px;border-radius:3px;background:var(--c-surface-2);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--c-good);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .42s cubic-bezier(.16,1,.3,1),background-color .42s}
.crit__val{font-family:var(--f-ui);font-weight:800;font-variant-numeric:tabular-nums;text-align:right;
  font-size:1rem;color:var(--c-ink)}
@media(max-width:420px){.crit{grid-template-columns:minmax(0,1fr) 60px 40px}}

/* pour / contre */
.vpc{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--c-line)}
@media(max-width:640px){.vpc{grid-template-columns:1fr}}
.vpc>div{padding:var(--s-5)}
.vpc>div:first-child{border-right:1px solid var(--c-line)}
@media(max-width:640px){.vpc>div:first-child{border-right:0;border-bottom:1px solid var(--c-line)}}
.vpc h3,.vpc h4{font-size:1rem;display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
.vpc ul{list-style:none;margin:0;padding:0;font-size:var(--t-small);line-height:1.55}
.vpc li{position:relative;padding-left:26px;margin-bottom:var(--s-3)}
.vpc li:last-child{margin-bottom:0}
.vpc li::before{position:absolute;left:0;top:0;font-family:var(--f-ui);font-weight:800;font-size:.875rem}
.pros li::before{content:"+";color:var(--c-good)}
.cons li::before{content:"–";color:var(--c-bad)}
.pros h3,.pros h4{color:var(--c-good)} .cons h3,.cons h4{color:var(--c-bad)}

/* recommandation par profil */
.vreco{border-top:1px solid var(--c-line);background:var(--c-brand-wash);padding:var(--s-5);
  display:flex;gap:var(--s-4);align-items:flex-start}
.vreco__ico{width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--c-brand);color:#fff;
  display:grid;place-items:center;font-family:var(--f-ui);font-weight:800;font-size:1rem}
.vreco p{margin:0;font-size:var(--t-small);line-height:1.6;color:var(--c-brand-deep)}
.vreco b{font-family:var(--f-ui)}

/* achat — ancré sous le score, dans la même colonne */
.vbuy{margin-top:auto;padding-top:var(--s-5)}
.promo{font-family:var(--f-ui);font-size:var(--t-small);color:var(--c-ink);line-height:1.4;margin:0 0 var(--s-3)}
.promo b{display:inline-block;background:var(--c-mid-wash);color:var(--c-mid);border:1px dashed var(--c-flag);
  border-radius:var(--r-sm);padding:3px 10px;letter-spacing:.06em}
.promo small{display:block;color:var(--c-muted);font-size:var(--t-meta);margin-top:4px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:48px;
  padding:0 var(--s-5);border-radius:var(--r-sm);font-family:var(--f-ui);font-weight:700;font-size:1rem;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn--primary{background:var(--c-brand);color:#fff}
.btn--primary:hover{background:var(--c-brand-ink);color:#fff}
.btn--ghost{background:var(--c-paper);color:var(--c-brand-ink);border-color:var(--c-brand)}
.btn--ghost:hover{background:var(--c-brand-wash);color:var(--c-brand-ink)}
.btn--wide{width:100%}
.aff{display:block;font-size:var(--t-meta);color:var(--c-muted);margin-top:6px;text-align:center}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}


/* ============================================================
   7. GRILLE ARTICLE + SOMMAIRE
   ============================================================ */
.layout{display:block}
.rail{margin-top:var(--s-8)}
.toc-rail{display:none}
@media(min-width:1140px){
  :root{--col-wide:52rem}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:var(--s-8);align-items:start;
    max-width:calc(52rem + 260px + var(--s-8) + var(--gutter)*2)}
  /* Le rail entier colle, pas seulement le sommaire. Il peut dépasser la
     hauteur de l'écran : on le rend défilant plutôt que tronqué. */
  .toc-rail{display:block}
  .rail{margin-top:0;position:sticky;top:88px;max-height:calc(100vh - 108px);overflow-y:auto;
    scrollbar-width:thin;padding-bottom:var(--s-4)}
}
.toc-rail h2{font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);
  font-weight:700;margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-line)}
.toc-rail ol{list-style:none;margin:0;padding:0;counter-reset:t}
.toc-rail li{counter-increment:t}
.toc-rail a{display:flex;gap:10px;font-family:var(--f-ui);font-size:.875rem;font-weight:600;color:var(--c-body);
  text-decoration:none;padding:7px 0;line-height:1.35;border-left:2px solid transparent;padding-left:12px;margin-left:-14px}
.toc-rail a::before{content:counter(t);font-variant-numeric:tabular-nums;color:var(--c-line-strong);flex:0 0 14px}
.toc-rail a:hover{color:var(--c-brand)}
.toc-rail a[data-active]{color:var(--c-brand-ink);border-left-color:var(--c-brand)}
.toc-rail a[data-active]::before{color:var(--c-brand)}

/* sommaire mobile */
.toc-mob{max-width:var(--col-wide);border:1px solid var(--c-line-strong);border-radius:var(--r-md);
  margin-bottom:var(--s-7);background:var(--c-surface)}
@media(min-width:1140px){.toc-mob{display:none}}
.toc-mob>summary{list-style:none;cursor:pointer;padding:var(--s-4) var(--s-5);font-family:var(--f-ui);
  font-weight:700;color:var(--c-ink);display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);min-height:52px}
.toc-mob>summary::-webkit-details-marker{display:none}
.toc-mob>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--c-muted);
  border-bottom:2px solid var(--c-muted);transform:rotate(45deg) translateY(-2px);flex:0 0 auto;transition:transform .18s}
.toc-mob[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc-mob ol{margin:0;padding:0 var(--s-5) var(--s-4) var(--s-5);list-style:none;counter-reset:m}
.toc-mob li{counter-increment:m;border-top:1px solid var(--c-line)}
.toc-mob a{display:flex;gap:10px;padding:11px 0;font-family:var(--f-ui);font-size:.9375rem;font-weight:600;
  color:var(--c-body);text-decoration:none}
.toc-mob a::before{content:counter(m);color:var(--c-line-strong);font-variant-numeric:tabular-nums;flex:0 0 16px}


/* ============================================================
   8. CORPS D'ARTICLE
   ============================================================ */
.prose{max-width:var(--col)}
.prose>*{max-width:var(--col)}
/* Le reset de la base met les titres à margin:0. Sans cette règle, un H2 de
   contenu est collé au paragraphe qui le suit : le H3 avait sa règle, le H2
   non. Les marges verticales fusionnent avec le paragraphe précédent, donc
   l'écart au-dessus reste de 48px et non de 48+16. */
.prose h2{margin:var(--s-7) 0 var(--s-4)}
section.sec{padding-top:var(--s-8);scroll-margin-top:96px}
/* La section porte déjà son écart en padding : pas de marge haute en plus. */
section.sec>h2{margin:0 0 var(--s-4)}
.prose h3{margin:var(--s-6) 0 var(--s-3)}
.prose ul,.prose ol{margin:0 0 var(--s-4);padding-left:1.35em}
.prose li{margin-bottom:var(--s-2)}
.prose li::marker{color:var(--c-brand)}

/* méthode repliée — la preuve reste disponible sans retarder la réponse */
.method{max-width:var(--col-wide);border:1px solid var(--c-line);border-radius:var(--r-md);
  background:var(--c-surface);margin:var(--s-4) 0 var(--s-7);scroll-margin-top:96px}
.method>summary{list-style:none;cursor:pointer;padding:var(--s-3) var(--s-4);font-family:var(--f-ui);
  font-weight:700;font-size:var(--t-small);color:var(--c-ink);display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-3);min-height:46px}
.method>summary::-webkit-details-marker{display:none}
.method>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--c-muted);
  border-bottom:2px solid var(--c-muted);transform:rotate(45deg) translateY(-2px);flex:0 0 auto;transition:transform .18s}
.method[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.method>summary span{font-weight:500;color:var(--c-muted);font-size:var(--t-meta)}
.method__b{padding:0 var(--s-4) var(--s-4);font-size:var(--t-small);line-height:1.6}
.method__b>*:last-child{margin-bottom:0}
.method__b ul{margin:0 0 var(--s-4);padding-left:1.2em}
.method__b li{margin-bottom:var(--s-2)}
.method__b .tw{margin:0}

/* fiche d'identité */
.ident{max-width:var(--col-wide);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s-5)}
.ident dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.ident div{padding:var(--s-4);border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.ident dt{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--c-muted)}
.ident dd{margin:6px 0 0;font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;color:var(--c-ink);line-height:1.35}
.ident dd small{display:block;font-family:var(--f-text);font-weight:400;font-size:var(--t-meta);color:var(--c-muted);margin-top:2px}

/* encadrés */
.box{max-width:var(--col-wide);border-radius:var(--r-md);padding:var(--s-5);margin:var(--s-5) 0;font-size:var(--t-small);line-height:1.6}
.box>h3{font-size:1rem;margin:0 0 var(--s-2);display:flex;align-items:center;gap:var(--s-2)}
.box>*:last-child{margin-bottom:0}
.box--info{background:var(--c-brand-wash);border:1px solid #C9D9FA}
.box--info>h3{color:var(--c-brand-ink)}
.box--warn{background:var(--c-mid-wash);border:1px solid #F0DCB4}
.box--warn>h3{color:var(--c-mid)}
.box--method{background:var(--c-surface);border:1px solid var(--c-line-strong)}
.box--method>h3{color:var(--c-ink)}
.box__ico{width:22px;height:22px;border-radius:var(--r-pill);display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--f-ui);font-size:.75rem;font-weight:800;color:#fff}
.box--info .box__ico{background:var(--c-brand)}
.box--warn .box__ico{background:var(--c-mid)}
.box--method .box__ico{background:var(--c-brand-deep)}

/* tableaux */
.tw{max-width:var(--col-wide);margin:var(--s-5) 0;position:relative}
.tw__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--c-line);border-radius:var(--r-md)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-small);background:var(--c-paper)}
caption{text-align:left;font-family:var(--f-ui);font-size:var(--t-meta);color:var(--c-muted);
  padding:var(--s-3) var(--s-4) var(--s-2);caption-side:top}
thead th{background:var(--c-surface-2);font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink);text-align:left;padding:var(--s-3) var(--s-4);white-space:nowrap}
tbody th{text-align:left;font-family:var(--f-ui);font-weight:700;color:var(--c-ink);padding:var(--s-3) var(--s-4);font-size:var(--t-small)}
tbody td{padding:var(--s-3) var(--s-4);border-top:1px solid var(--c-line);vertical-align:top}
tbody th{border-top:1px solid var(--c-line)}
tbody tr:first-child th,tbody tr:first-child td{border-top:0}
td.num,th.num{text-align:right;font-family:var(--f-ui);font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.yes{color:var(--c-good);font-weight:700}
.no{color:var(--c-bad);font-weight:700}
.tw__hint{font-size:var(--t-meta);color:var(--c-muted);margin-top:var(--s-2)}
@media(min-width:720px){.tw__hint{display:none}}

/* figure / capture */
figure{max-width:var(--col-wide);margin:var(--s-5) 0}
figcaption{font-size:var(--t-meta);color:var(--c-muted);margin-top:var(--s-2);line-height:1.5}
.shot{border:1px solid var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);
  aspect-ratio:16/9;display:grid;place-items:center;text-align:center;padding:var(--s-5)}
.shot span{font-family:var(--f-ui);font-size:var(--t-small);font-weight:700;color:var(--c-muted);max-width:32ch;line-height:1.5}
.shot span small{display:block;font-weight:500;font-size:var(--t-meta);margin-top:6px}

/* étapes */
.steps{max-width:var(--col-wide);list-style:none;margin:var(--s-5) 0;padding:0;counter-reset:s;
  border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--c-line);font-size:var(--t-small);line-height:1.6}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);font-family:var(--f-ui);font-weight:800;font-size:1rem;color:var(--c-brand);
  background:var(--c-brand-wash);border-radius:var(--r-pill);width:32px;height:32px;display:grid;place-items:center}
.steps b{display:block;font-family:var(--f-ui);color:var(--c-ink);margin-bottom:2px}
.steps em{font-style:normal;color:var(--c-muted);font-size:var(--t-meta)}

/* satisfaction clients */
.sat{max-width:var(--col-wide);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5);margin:var(--s-5) 0}
.sat__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);margin-bottom:var(--s-4)}
.sat__val{font-family:var(--f-ui);font-weight:800;font-size:2rem;color:var(--c-ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.sat__src{font-size:var(--t-meta);color:var(--c-muted)}
.split{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--c-surface-2)}
.split i{display:block;height:100%}
.split__leg{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-3);font-size:var(--t-meta);color:var(--c-muted)}
.split__leg span{display:inline-flex;align-items:center;gap:6px}
.dot{display:inline-block;width:9px;height:9px;border-radius:3px;flex:0 0 auto}

/* CTA au fil du texte */
.inline-cta{max-width:var(--col-wide);border:1px solid var(--c-line-strong);border-radius:var(--r-md);
  background:var(--c-surface);padding:var(--s-5);margin:var(--s-6) 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:var(--s-4);justify-content:space-between}
.inline-cta p{margin:0;font-family:var(--f-ui);font-weight:700;color:var(--c-ink);font-size:1.0625rem;line-height:1.4}
.inline-cta small{display:block;font-family:var(--f-text);font-weight:400;color:var(--c-muted);font-size:var(--t-meta);margin-top:2px}

/* comparatif alternatives */
.alts{max-width:var(--col-wide);display:grid;gap:var(--s-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:var(--s-5) 0}
.alt{border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.alt__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.alt__name{font-family:var(--f-ui);font-weight:800;color:var(--c-ink);font-size:1.0625rem}
.alt__note{font-family:var(--f-ui);font-weight:800;font-variant-numeric:tabular-nums;color:var(--c-ink);font-size:1.0625rem}
.alt__note small{color:var(--c-muted);font-weight:600;font-size:.75rem}
.alt p{margin:0;font-size:var(--t-small);line-height:1.5;color:var(--c-body);flex:1}
.alt a{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);text-decoration:none}
.alt a:hover{text-decoration:underline}

/* verdict final */
.final{max-width:var(--col-wide);border:1px solid var(--c-line-strong);border-left:1px solid var(--c-line-strong);
  border-radius:var(--r-lg);overflow:hidden;margin:var(--s-6) 0}
.final__h{background:var(--c-brand-deep);color:#fff;padding:var(--s-4) var(--s-5);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:var(--s-3)}
.final__h h2{color:#fff;font-size:1.25rem;margin:0}
.final__note{font-family:var(--f-ui);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums;color:#fff}
.final__note small{font-size:.875rem;font-weight:600;color:#A9C0DE}
.final__b{padding:var(--s-5);font-size:var(--t-small);line-height:1.65}
.final__b>*:last-child{margin-bottom:0}

/* FAQ */
.faq{max-width:var(--col-wide);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;margin:var(--s-5) 0}
.faq details{border-top:1px solid var(--c-line)}
.faq details:first-child{border-top:0}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-4) var(--s-5);font-family:var(--f-ui);font-weight:700;
  color:var(--c-ink);font-size:1.0625rem;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);min-height:56px}
.faq summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--c-surface)}
.faq summary::after{content:"";width:10px;height:10px;margin-top:7px;border-right:2px solid var(--c-muted);
  border-bottom:2px solid var(--c-muted);transform:rotate(45deg);flex:0 0 auto;transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 var(--s-5) var(--s-5);font-size:var(--t-small);line-height:1.65}
.faq .a>*:last-child{margin-bottom:0}

/* auteur */
.author{max-width:var(--col-wide);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--s-5);
  margin:var(--s-7) 0 0;display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s-4)}
.author .avatar{width:64px;height:64px;font-size:1.25rem}
.author h3{font-size:1.0625rem}
.author p{font-size:var(--t-small);line-height:1.6;margin:var(--s-2) 0 0;color:var(--c-body)}
.author .role{font-family:var(--f-ui);font-size:var(--t-meta);color:var(--c-muted);font-weight:600}
.author__foot{grid-column:1/-1;border-top:1px solid var(--c-line);padding-top:var(--s-3);margin-top:var(--s-2);
  font-size:var(--t-meta);color:var(--c-muted);display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
@media(max-width:520px){.author{grid-template-columns:1fr}}
/* Le nom mène à la page du rédacteur : discret dans le bloc, franc au survol. */
.author h3 a{color:inherit;text-decoration:none}
.author h3 a:hover{color:var(--c-brand);text-decoration:underline}

/* ============================================================
   8 bis. PAGE AUTEUR
   ============================================================ */
.auteur-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s-5);align-items:start;
  padding:var(--s-6) 0;border-bottom:1px solid var(--c-line)}
.auteur-head__p{width:96px;height:96px;border-radius:var(--r-pill);object-fit:cover;display:block}
.auteur-head__p--vide{display:grid;place-items:center;background:var(--c-surface-2);color:var(--c-muted);
  font-family:var(--f-ui);font-weight:800;font-size:2rem}
.auteur-head h1{font-size:clamp(1.5rem,1.3rem + .9vw,2rem)}
.auteur-head__r{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:600;color:var(--c-muted);
  margin:var(--s-2) 0 0}
.auteur-head__b{font-size:var(--t-small);line-height:1.65;color:var(--c-body);margin:var(--s-3) 0 0;
  max-width:var(--col)}
.auteur-head__d{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin:var(--s-4) 0 0;
  font-size:var(--t-meta);font-family:var(--f-ui)}
.auteur-head__d span{color:var(--c-muted);font-weight:600}
.auteur-head__d a{display:inline-block;background:var(--c-brand-wash);color:var(--c-brand-ink);
  border-radius:var(--r-pill);padding:4px var(--s-3);font-weight:700;text-decoration:none}
.auteur-head__d a:hover{background:var(--c-brand);color:#fff}
.auteur-t{font-size:1.25rem;margin:var(--s-6) 0 var(--s-3)}
@media(max-width:520px){
  .auteur-head{grid-template-columns:72px minmax(0,1fr);gap:var(--s-4)}
  .auteur-head__p{width:72px;height:72px}
  .auteur-head__p--vide{font-size:1.5rem}
}

/* articles liés */
.rel{max-width:var(--col-wide);margin:var(--s-7) 0 0}
.rel h2{font-size:1.25rem;margin-bottom:var(--s-4)}
.rel ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-line)}
.rel li{border-bottom:1px solid var(--c-line)}
.rel a{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:baseline;justify-content:space-between;
  padding:var(--s-4) 0;text-decoration:none;font-family:var(--f-ui);font-weight:700;color:var(--c-ink);font-size:1.0625rem}
.rel a:hover{color:var(--c-brand)}
.rel .kind{font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;letter-spacing:.01em;color:var(--c-muted)}

/* barre collante mobile */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--c-paper);border-top:1px solid var(--c-line-strong);
  box-shadow:0 -2px 4px rgba(11,29,48,.04),0 -12px 28px -12px rgba(11,29,48,.2);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));display:none;
  align-items:center;gap:var(--s-4);justify-content:space-between}
.dock[data-on]{display:flex}
@media(min-width:1140px){.dock{display:none !important}}
.dock__l{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.dock__n{font-family:var(--f-ui);font-weight:800;font-size:1.125rem;color:var(--c-ink);font-variant-numeric:tabular-nums;line-height:1}
.dock__n small{font-size:.6875rem;color:var(--c-muted);font-weight:600}
.dock__t{font-family:var(--f-ui);font-weight:700;font-size:.9375rem;color:var(--c-ink);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock__t small{display:block;font-weight:500;font-size:var(--t-meta);color:var(--c-muted)}
.dock .btn{min-height:44px;padding:0 var(--s-4);flex:0 0 auto}
body{padding-bottom:0}

/* pied de page */
.foot{background:var(--c-brand-deep);color:#B9CBE2;margin-top:var(--s-9);padding:var(--s-8) 0 var(--s-6);font-size:var(--t-small)}
.foot a{color:#DCE7F5;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-6)}
.foot h3{color:#fff;font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s-3)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot__legal{border-top:1px solid rgba(255,255,255,.14);margin-top:var(--s-7);padding-top:var(--s-5);
  font-size:var(--t-meta);line-height:1.6;color:#8FA6C0}
.foot .logo{color:#fff}
.foot .logo em{color:#7FA6F5}
/* la barre collante ne doit jamais masquer la fin du pied de page */
@media(max-width:1139px){.foot{padding-bottom:calc(var(--s-6) + 76px)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   21. AJUSTEMENTS WORDPRESS
   ============================================================ */
.alignleft{float:left;margin:0 var(--s-5) var(--s-4) 0}
.alignright{float:right;margin:0 0 var(--s-4) var(--s-5)}
.aligncenter{margin-inline:auto}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{font-size:var(--t-meta);color:var(--c-muted);margin-top:var(--s-2);line-height:1.5}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.prose blockquote{margin:var(--s-5) 0;padding:0 0 0 var(--s-5);border-left:2px solid var(--c-brand);
  font-size:1.1875rem;line-height:1.6;color:var(--c-ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose figure{margin:var(--s-5) 0}
.prose img{border-radius:var(--r-md)}
.prose hr{border:0;border-top:1px solid var(--c-line);margin:var(--s-7) 0}
.prose code{background:var(--c-surface-2);border-radius:4px;padding:2px 6px;font-size:.9em}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-small);margin:var(--s-5) 0}
.prose th{background:var(--c-surface-2);font-family:var(--f-ui);font-size:var(--t-meta);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink);text-align:left;padding:var(--s-3) var(--s-4)}
.prose td{padding:var(--s-3) var(--s-4);border-top:1px solid var(--c-line);vertical-align:top}

/* pagination */
.pager{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-7);justify-content:center}
.pager .page-numbers{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 var(--s-3);
  border:1px solid var(--c-line);border-radius:var(--r-sm);font-family:var(--f-ui);font-weight:700;
  font-size:var(--t-small);color:var(--c-body);text-decoration:none}
.pager .page-numbers:hover{border-color:var(--c-brand);color:var(--c-brand)}
.pager .page-numbers.current{background:var(--c-brand);border-color:var(--c-brand);color:#fff}

/* archives, recherche, 404 */
.page-head{padding:var(--s-7) 0 var(--s-6);border-bottom:1px solid var(--c-line);margin-bottom:var(--s-6)}
.page-head p{margin:var(--s-3) 0 0;color:var(--c-muted);max-width:60ch}
.empty{border:1px dashed var(--c-line-strong);border-radius:var(--r-md);padding:var(--s-7) var(--s-5);
  text-align:center;background:var(--c-surface);max-width:var(--col-wide)}
.empty h2{font-size:1.25rem;margin-bottom:var(--s-3)}
.empty p{color:var(--c-muted);max-width:48ch;margin-inline:auto}
.empty p + p{margin-top:var(--s-5)}
.empty .btn{color:#fff}
.search-page{max-width:32rem;margin:var(--s-5) 0 0;display:flex;gap:var(--s-2)}
.search-page input[type=search]{flex:1;min-width:0;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);
  background:var(--c-paper);padding:0 var(--s-4);min-height:48px;font-family:var(--f-text);font-size:1rem;color:var(--c-ink)}
.search-page input[type=search]:focus{outline:0;border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-wash)}
@media(max-width:520px){.search-page{flex-direction:column}.search-page .btn{width:100%}}

/* le corps d'article vit dans .wrap, pas dans une colonne pleine largeur */
.article-wrap{max-width:calc(var(--col-wide) + var(--gutter)*2)}
@media(min-width:1140px){
  .article-wrap{max-width:calc(52rem + 260px + var(--s-8) + var(--gutter)*2)}
}

/* menus WordPress : le balisage natif est ul>li>a, le thème stylait des <a> nus */
.nav__list{display:flex;gap:var(--s-5);list-style:none;margin:0;padding:0;align-items:center}
.nav__list a{font-family:var(--f-ui);font-size:.9375rem;font-weight:600;color:var(--c-body);
  text-decoration:none;padding:var(--s-2) 0;border-bottom:2px solid transparent;white-space:nowrap;display:block}
.nav__list a:hover,.nav__list .current-menu-item>a,.nav__list .current_page_item>a,
.nav__list .current-menu-ancestor>a{color:var(--c-brand);border-bottom-color:var(--c-brand)}
@media(max-width:960px){
  .nav__list{flex-direction:column;gap:0;align-items:stretch}
  .nav__list a{padding:var(--s-3) 0;border-bottom:1px solid var(--c-line);font-size:1.0625rem}
  .nav__list a:hover,.nav__list .current-menu-item>a{border-bottom-color:var(--c-line)}
}
.foot__list{list-style:none;margin:0;padding:0}
.foot__list li{margin-bottom:10px}
.foot__bottom ul{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);list-style:none;margin:0;padding:0}

/* L'attribut hidden doit gagner sur la règle de palier du rail : sans cela,
   un article de moins de trois sections afficherait un sommaire vide. */
.toc-rail[hidden],.toc-mob[hidden]{display:none}
.toc-rail{margin-bottom:var(--s-6)}

/* Tableaux insérés depuis l'éditeur : ils doivent défiler dans leur propre
   conteneur, jamais faire défiler la page. L'éditeur de blocs enveloppe déjà
   ses tableaux dans une <figure> ; article.js enveloppe les tableaux nus. */
.prose figure.wp-block-table{overflow-x:auto;max-width:100%;border:1px solid var(--c-line);border-radius:var(--r-md)}
.prose figure.wp-block-table > table{margin:0}
.prose table{min-width:420px}
.prose .tw__scroll > table{margin:0}

/* L'étiquette de catégorie est un lien : elle ne doit pas se souligner. */
a.chip{text-decoration:none}
a.chip:hover{background:#E2EBFD;color:var(--c-brand-ink)}

/* Le titre d'accueil peut porter 56px ; un titre d'article plafonne à 50px,
   sinon il écrase le chapô et la signature. */
.head h1{font-size:clamp(2rem,1.35rem + 2.7vw,3.125rem)}

/* ============================================================
   22. ACCUEIL — bloc de marque
   ============================================================ */
.hero--marque{padding:var(--s-9) 0;text-align:center}
.hero--marque .hero__sub--centre{margin-bottom:0}
@media(max-width:620px){.hero--marque{padding:var(--s-8) 0 var(--s-7)}}
.marque{color:#fff;font-size:clamp(2.5rem,1.4rem + 5.2vw,5rem);font-weight:800;letter-spacing:-.045em;
  line-height:1;margin:0}
/* `.hero h1` limite le titre à 15ch pour le hero à deux colonnes. Ici le titre
   est centré sur toute la largeur : il faut lever cette limite, sinon sa boîte
   reste calée à gauche et le texte paraît décentré. */
.hero--marque .marque{max-width:none;margin-inline:auto}
.slogan{color:#fff;font-family:var(--f-ui);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.75rem);line-height:1.25;
  max-width:22ch;margin:var(--s-5) auto 0}
.hero__sub--centre{margin-inline:auto;text-align:center;max-width:52ch}
/* ============================================================
   23. ACCUEIL — notre mission
   ============================================================ */
.mission{border-top:1px solid var(--c-line);margin-top:var(--s-9);padding:var(--s-8) 0 var(--s-9);
  background:var(--c-surface)}
.mission__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--s-8);align-items:start}
@media(max-width:900px){.mission__grid{grid-template-columns:1fr;gap:var(--s-7)}}
.mission__texte{max-width:var(--col)}
.mission__texte h3{margin:var(--s-6) 0 var(--s-3)}
.mission__texte p{font-size:var(--t-small);line-height:1.7}
.mission .btn{margin-top:var(--s-5)}

.methodo{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-4)}
.methodo li{padding-left:var(--s-5);position:relative;font-size:var(--t-small);line-height:1.55;color:var(--c-body)}
.methodo li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;
  background:var(--c-brand)}
.methodo b{display:block;font-family:var(--f-ui);color:var(--c-ink);margin-bottom:2px}

.equipe{display:grid;gap:var(--s-4)}
@media(max-width:900px){.equipe{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.equipe{grid-template-columns:1fr}}
.equipe__carte{margin:0;background:var(--c-paper);border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden}
.equipe__photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.equipe__photo--vide{display:grid;place-items:center;background:var(--c-surface-2);text-align:center;padding:var(--s-4)}
.equipe__photo--vide span{font-family:var(--f-ui);font-size:var(--t-small);font-weight:700;color:var(--c-muted);line-height:1.4}
.equipe__photo--vide small{display:block;font-weight:500;font-size:var(--t-meta);margin-top:4px}
.equipe__carte figcaption{padding:var(--s-4);border-top:1px solid var(--c-line)}
.equipe__carte figcaption b{display:block;font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;color:var(--c-ink)}
.equipe__carte figcaption span{font-size:var(--t-meta);color:var(--c-muted)}
/* La biographie dit ce qui rend la signature légitime : c'est du texte de
   lecture, pas une étiquette. Elle prend donc la police et l'interligne du
   corps, sous un blanc qui la détache du rôle. */
.equipe__bio{margin:var(--s-3) 0 0;font-size:var(--t-small);line-height:1.55;color:var(--c-body)}

/* Sur l'accueil, la section mission touche le pied de page : la marge de
   celui-ci ferait un blanc de trop. (.mission et .foot ne sont pas frères,
   d'où la classe de body plutôt qu'un sélecteur adjacent.) */
body.home .foot{margin-top:0}

/* ============================================================
   24. ACCUEIL — avis et tests : filtres à gauche, marques à droite
   ============================================================ */
.tests{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s-7);align-items:start}
@media(max-width:900px){.tests{grid-template-columns:1fr;gap:var(--s-5)}}

/* Colonne de filtres : liste verticale sur desktop, rail défilant sur mobile. */
.tests__filtres{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.tests__filtres button{display:block;width:100%;text-align:left;cursor:pointer;
  font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);color:var(--c-body);
  background:none;border:0;border-radius:var(--r-sm);padding:11px var(--s-3);min-height:44px;
  transition:background-color .15s,color .15s}
.tests__filtres button:hover{background:var(--c-surface);color:var(--c-ink)}
.tests__filtres button[aria-selected="true"]{background:var(--c-brand-wash);color:var(--c-brand-ink)}
@media(max-width:900px){
  .tests__filtres{flex-direction:row;gap:var(--s-2);overflow-x:auto;padding-bottom:var(--s-2);
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .tests__filtres li{flex:0 0 auto}
  .tests__filtres button{width:auto;white-space:nowrap;border:1px solid var(--c-line);
    border-radius:var(--r-pill);padding:0 var(--s-4)}
  .tests__filtres button[aria-selected="true"]{border-color:var(--c-brand);background:var(--c-brand);color:#fff}
}

/* Grille de marques testées. */
.tests__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);margin:0;padding:0;list-style:none}
@media(max-width:640px){.tests__grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}}
.tests__panneau[hidden]{display:none}

.marque-carte{display:flex;flex-direction:column;aspect-ratio:1;text-decoration:none;color:inherit;
  border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;background:var(--c-paper);
  transition:border-color .15s,box-shadow .15s}
.marque-carte:hover{border-color:var(--c-brand);box-shadow:var(--e-1);color:inherit}
.marque-carte__logo{flex:1;display:grid;place-items:center;padding:var(--s-4);min-height:0}
.marque-carte__logo img{max-width:72%;max-height:104px;width:auto;height:auto;object-fit:contain}
.marque-carte__logo span{font-family:var(--f-ui);font-weight:800;font-size:2.25rem;letter-spacing:-.04em;
  color:var(--c-brand-deep);display:grid;place-items:center;width:84px;height:84px;
  background:var(--c-surface-2);border-radius:var(--r-lg)}
.marque-carte__pied{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);
  padding:var(--s-3) var(--s-4);border-top:1px solid var(--c-line);min-width:0}
.marque-carte__nom{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);color:var(--c-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marque-carte__note{font-family:var(--f-ui);font-weight:800;font-size:var(--t-small);
  font-variant-numeric:tabular-nums;color:var(--c-good);white-space:nowrap}
.marque-carte__note small{font-weight:600;color:var(--c-muted);font-size:.6875rem}
@media(max-width:640px){
  .marque-carte__logo img{max-height:64px}
  .marque-carte__logo span{width:60px;height:60px;font-size:1.625rem}
  .marque-carte__pied{padding:10px var(--s-3)}
}

/* ============================================================
   25. PIED DE PAGE — plan de site
   Le pied porte le maillage interne : colonnes denses, une par
   couple famille/format. Une colonne sans lien n'est pas rendue.
   ============================================================ */
.foot__marque{max-width:38ch;margin-bottom:var(--s-7)}
.foot__marque .logo{margin-bottom:var(--s-3)}
.foot__plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--s-6) var(--s-5)}
.foot__plan h3{margin-bottom:var(--s-3)}
.foot__plan li{margin-bottom:9px;line-height:1.4}
.foot__plan a{font-size:var(--t-small)}
@media(max-width:520px){
  .foot__plan{grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4)}
  .foot__plan a{font-size:var(--t-meta)}
}

/* ============================================================
   26. MÉGA-MENU
   Une entrée de premier niveau sans URL est un <button> qui ouvre
   un panneau. Le panneau est masqué par l'attribut hidden, pas
   seulement par du CSS : sans JavaScript, il reste dans le flux
   et donc accessible, au lieu de disparaître.
   ============================================================ */
.nav__list > li{position:relative}
.nav__ouvreur{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  font-family:var(--f-ui);font-size:.9375rem;font-weight:600;color:var(--c-body);
  padding:var(--s-2) 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav__ouvreur:hover,.nav__ouvreur[aria-expanded="true"]{color:var(--c-brand);border-bottom-color:var(--c-brand)}
.nav__chevron{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .18s}
.nav__ouvreur[aria-expanded="true"] .nav__chevron{transform:rotate(-135deg) translateY(-2px)}
.nav__inerte{display:block;font-family:var(--f-ui);font-size:.9375rem;font-weight:600;
  color:var(--c-muted);padding:var(--s-2) 0;white-space:nowrap;cursor:default}

.megamenu[hidden]{display:none}
.megamenu__in{width:100%}   /* simple enveloppe, pour pouvoir habiller le panneau plus tard */
.megamenu__liste{list-style:none;margin:0;padding:0}
.megamenu__sous{list-style:none;margin:var(--s-2) 0 0;padding:0}

@media(min-width:961px){
  .megamenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);z-index:60;
    background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-lg);
    box-shadow:var(--e-2);padding:var(--s-5);min-width:min(46rem,90vw)}
  /* pointe de raccord invisible : évite que le panneau se ferme en traversant le vide */
  .megamenu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
  .megamenu__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s-5)}
  /* Titre de rubrique : à la couleur de marque, il sépare la colonne de ses
     liens sans avoir besoin d'un second niveau de graisse. */
  .megamenu__liste > li > a,
  .megamenu__liste > li > .nav__inerte{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);
    letter-spacing:.01em;color:var(--c-brand);text-decoration:none;display:block;padding-bottom:var(--s-2);
    border-bottom:1px solid var(--c-line);margin-bottom:var(--s-2)}
  .megamenu__liste > li > a:hover{color:var(--c-brand-ink)}
  /* La sortie du panneau : « Tous les articles Banque → ». Elle prend toute la
     largeur sous les colonnes, séparée d'un filet, parce que c'est une
     destination et non une rubrique de plus. */
  .megamenu__liste > li.panneau-tout{grid-column:1/-1;border-top:1px solid var(--c-line);padding-top:var(--s-4)}
  .megamenu__liste > li.panneau-tout > a{border-bottom:0;margin-bottom:0;padding-bottom:0}
  .megamenu__sous a{display:block;padding:6px 0;font-size:var(--t-small);color:var(--c-body);
    text-decoration:none;line-height:1.35}
  .megamenu__sous a:hover{color:var(--c-brand)}
}

@media(max-width:960px){
  .nav__ouvreur,.nav__inerte{width:100%;justify-content:space-between;padding:var(--s-3) 0;
    border-bottom:1px solid var(--c-line);font-size:1.0625rem}
  .nav__ouvreur[aria-expanded="true"]{border-bottom-color:var(--c-line)}
  .megamenu{padding:0 0 var(--s-3) var(--s-3)}
  .megamenu__liste > li{padding:var(--s-2) 0}
  .megamenu__liste > li > a,
  .megamenu__liste > li > .nav__inerte{font-family:var(--f-ui);font-weight:700;font-size:var(--t-small);
    letter-spacing:.01em;color:var(--c-brand);text-decoration:none;padding:0;border:0}
  .megamenu__sous a{display:block;padding:7px 0;font-size:var(--t-small);color:var(--c-body);text-decoration:none}
  .megamenu__liste > li.panneau-tout{border-top:1px solid var(--c-line);margin-top:var(--s-2);padding-top:var(--s-3)}
}

/* La flèche est décorative et tient dans le CSS : le libellé saisi dans le menu
   reste un libellé, sans caractère de ponctuation à recopier. */
.panneau-tout > a::after{content:" \2192"}
.panneau-tout > a:hover{text-decoration:underline}

/* ============================================================
   27. ÉDITEUR DE BLOCS
   L'aperçu d'un bloc est rendu par PHP dans le canevas. On neutralise
   ce qui n'a pas de sens hors du site : en-tête collant, marges de page.
   ============================================================ */
.editor-styles-wrapper .site-head{position:static}
.editor-styles-wrapper .hero,
.editor-styles-wrapper .mission,
.editor-styles-wrapper .foot{margin-left:0;margin-right:0}
/* L'aperçu ne se modifie pas au clic : on écrit dans les champs, en dessous ou
   dans le panneau latéral. Neutraliser le pointeur évite qu'un clic dans
   l'aperçu donne l'illusion d'un curseur de saisie. */
.lop-apercu-bloc{pointer-events:none}

/* Les champs du bloc, affichés dans le bloc dès qu'il est sélectionné. Le
   panneau latéral de WordPress peut être fermé — et il l'est souvent : rien ne
   doit dépendre de sa présence. Volontairement traité comme un outil
   d'édition, pas comme du contenu, pour qu'on ne le confonde pas avec la page. */
.lop-champs{margin-top:var(--s-3);padding:var(--s-4);border:1px solid var(--c-line-strong);
  border-radius:var(--r-md);background:#fff;display:grid;gap:var(--s-3)}
.lop-champs__t{margin:0;font-family:var(--f-ui);font-size:.6875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.lop-champs .components-base-control{margin-bottom:0}

/* ============================================================
   28. COMPARATIF — blocs réutilisables
   ============================================================ */

/* --- Carte de sélection : compacte et horizontale.
   Cible ~190 px de haut sur 1000 px de large, comme les encadrés de la
   concurrence. Tout tient sur une rangée : identité, arguments, action. --- */
/* La colonne de lecture fait 704 px, quelle que soit la largeur de l'écran :
   une rangée de cinq colonnes n'y tient pas. La carte se lit donc sur deux
   rangées, identité et action en haut, arguments en dessous. */
.sel{max-width:var(--col-wide);border:1px solid var(--c-line-strong);border-radius:var(--r-md);
  background:var(--c-paper);padding:var(--s-4) var(--s-5);margin:var(--s-3) 0;
  display:grid;grid-template-columns:auto 64px minmax(0,1fr) minmax(0,10rem);
  gap:var(--s-4) var(--s-5);align-items:center;
  transition:border-color .15s,box-shadow .15s}
.sel:hover{border-color:var(--c-brand);box-shadow:var(--e-1)}

.sel__rang{display:grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);
  background:var(--c-brand);color:#fff;font-family:var(--f-ui);font-weight:800;font-size:.875rem;
  font-variant-numeric:tabular-nums}
.sel__logo{display:grid;place-items:center;width:64px;height:64px;border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;background:var(--c-paper)}
.sel__logo__img{max-width:82%;max-height:52px;width:auto;height:auto;object-fit:contain}
.sel__logo__init{font-family:var(--f-ui);font-weight:800;font-size:1.75rem;color:var(--c-brand-deep)}

.sel__ident{min-width:0}
.sel__nom{display:block;font-family:var(--f-ui);font-weight:800;font-size:1.125rem;color:var(--c-ink);line-height:1.2}
.sel__accroche{display:block;font-size:var(--t-small);color:var(--c-muted);line-height:1.4;margin-top:3px}
.sel__note{display:inline-block;margin-top:6px;font-family:var(--f-ui);font-weight:800;font-size:1.125rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sel__note small{font-size:.75rem;font-weight:600;color:var(--c-muted)}

/* Les arguments : deux colonnes serrées, sur la rangée du bas. Le min() évite
   que la grille interne réclame plus large que la place reçue et déborde sur
   le badge d'offre voisin. */
.sel__points{grid-column:3/-1;grid-row:2;list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));gap:4px var(--s-4)}
.sel__points li{position:relative;padding-left:18px;font-size:var(--t-meta);line-height:1.45;color:var(--c-body)}
.sel__points li::before{content:"+";position:absolute;left:0;top:-1px;font-family:var(--f-ui);
  font-weight:800;font-size:.8125rem;color:var(--c-good)}

.sel__actions{grid-column:4;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0}
.sel__cta .btn{width:100%;min-height:44px;padding:0 var(--s-4)}
.sel__cta .aff{text-align:center;margin-top:4px}
/* Le badge d'offre est conçu pour coiffer le bouton d'action. Sans lien
   partenaire, la colonne n'a plus de largeur d'appui : le badge doit alors se
   replier dans sa colonne, jamais déborder sur les arguments voisins. */
.sel__promo{margin:0;order:-1;text-align:center;max-width:100%;min-width:0}
.sel__promo b{display:inline-block;background:var(--c-mid-wash);color:var(--c-mid);
  border:1px dashed var(--c-flag);border-radius:var(--r-sm);padding:2px 9px;
  font-family:var(--f-ui);font-size:var(--t-meta);
  max-width:100%;white-space:normal;overflow-wrap:break-word;text-wrap:balance}
.sel__avis{font-family:var(--f-ui);font-weight:700;font-size:var(--t-meta);text-decoration:none;text-align:center}
.sel__avis:hover{text-decoration:underline}

@media(max-width:620px){
  .sel{grid-template-columns:auto 56px minmax(0,1fr);padding:var(--s-4);gap:var(--s-3) var(--s-4)}
  .sel__logo{width:56px;height:56px}
  .sel__logo__img{max-height:36px}
  .sel__logo__init{font-size:1.375rem}
  .sel__points{grid-column:1/-1;grid-row:2;grid-template-columns:1fr}
  .sel__actions{grid-column:1/-1;grid-row:3;min-width:0}
}

/* --- Fiche détaillée --- */
.fiche{max-width:var(--col-wide);margin:var(--s-7) 0;padding-top:var(--s-6);border-top:1px solid var(--c-line)}
/* Pas de règle « première fiche » : entourée d'autres <div>, aucun sélecteur
   positionnel ne la désignerait. Le filet du haut sert de séparateur avant
   chaque marque, y compris la première — c'est cohérent. */
.fiche__titre{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;scroll-margin-top:96px}
.fiche__logo{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--c-line);
  border-radius:var(--r-md);overflow:hidden;flex:0 0 auto}
.fiche__logo__img{max-width:84%;max-height:36px;width:auto;height:auto;object-fit:contain}
.fiche__logo__init{font-family:var(--f-ui);font-weight:800;font-size:1.25rem;color:var(--c-brand-deep)}
.fiche__note{margin-left:auto;font-family:var(--f-ui);font-weight:800;font-size:1.375rem;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.fiche__note small{font-size:.75rem;font-weight:600;color:var(--c-muted)}
.fiche__image{margin:var(--s-5) 0}
.fiche__image img{width:100%;border:1px solid var(--c-line);border-radius:var(--r-md)}
.fiche__pour{font-size:var(--t-small);background:var(--c-brand-wash);border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);margin:var(--s-4) 0}
.fiche__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);margin-top:var(--s-5)}
@media(max-width:620px){
  .fiche__note{margin-left:0}
  .fiche__actions{flex-direction:column;align-items:stretch}
  .fiche__actions .btn{width:100%}
}

/* --- Avantages / inconvénients hors bloc verdict --- */
.vpc--bloc{max-width:var(--col-wide);border:1px solid var(--c-line);border-radius:var(--r-md);
  border-top:1px solid var(--c-line);margin:var(--s-5) 0;overflow:hidden}

/* --- FAQ en blocs indépendants -------------------------------------------
   Chaque bloc est une carte complète et autonome : c'est l'état de repli, et
   il est toujours correct. Les règles suivantes ne font que les recoller
   visuellement quand ils se suivent.

   Surtout PAS de :first-of-type / :last-of-type ici : ces sélecteurs comptent
   les éléments par balise, pas par classe. Entouré d'autres <div>, aucun bloc
   FAQ ne correspondrait, et le groupe perdrait bordure et coins arrondis. --- */
.faq--bloc{max-width:var(--col-wide);margin:0}
.faq--bloc + .faq--bloc{margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}
.faq--bloc:has(+ .faq--bloc){border-bottom-left-radius:0;border-bottom-right-radius:0}

/* Consigne affichée dans l'éditeur pour un bloc encore vide. Jamais en ligne. */
.lop-vide{border:1px dashed var(--c-line-strong);border-radius:var(--r-md);background:var(--c-surface);
  padding:var(--s-4);margin:var(--s-3) 0;font-family:var(--f-ui);font-size:var(--t-small);
  font-weight:600;color:var(--c-muted);text-align:center}

/* Une photo de portrait n'est pas toujours carrée. Sans object-fit, la pastille
   ronde de l'auteur l'écraserait au lieu de la recadrer. */
img.avatar{object-fit:cover;object-position:center}

/* ============================================================
   29. AVIS EN BREF — l'encadré de synthèse d'un avis de marque
   ============================================================ */
.bref{max-width:var(--col-wide);border:1px solid var(--c-line-strong);border-radius:var(--r-lg);
  background:var(--c-paper);padding:var(--s-5);margin:var(--s-5) 0;box-shadow:var(--e-1)}

.bref__tete{display:flex;align-items:center;gap:var(--s-5);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line)}
.bref__logo{display:grid;place-items:center;width:84px;height:84px;flex:0 0 auto;
  border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden}
.bref__logo__img{max-width:82%;max-height:56px;width:auto;height:auto;object-fit:contain}
.bref__logo__init{font-family:var(--f-ui);font-weight:800;font-size:2rem;color:var(--c-brand-deep)}
.bref__ident{min-width:0}
.bref__nom{font-size:1.625rem;margin:0;line-height:1.15}
/* La note est l'information principale de l'encadré : elle doit se voir
   immédiatement sous le nom, sans avoir à la chercher. */
.bref__note{font-family:var(--f-ui);font-weight:800;font-size:2.75rem;letter-spacing:-.04em;
  line-height:1;margin:var(--s-2) 0 0;font-variant-numeric:tabular-nums}
.bref__note small{font-size:1rem;font-weight:700;color:var(--c-muted);margin-left:2px}
.bref__mention{display:inline-block;margin-top:var(--s-2);font-family:var(--f-ui);font-weight:700;
  font-size:var(--t-meta);padding:4px var(--s-3);border-radius:var(--r-pill)}

.bref__resume{margin-top:var(--s-4)}
.bref__resume h3{font-size:1.0625rem;margin-bottom:var(--s-2)}
.bref__resume p{font-size:var(--t-small);line-height:1.65;margin-bottom:var(--s-3)}
.bref__resume p:last-child{margin-bottom:0}

.bref__criteres{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 var(--s-6)}
.crit--bref{grid-template-columns:minmax(0,1fr) 72px 40px}
.bref .vpc--bloc{margin:var(--s-4) 0 0}
.bref__cta{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--c-line)}
.bref__cta .aff{text-align:left}

@media(max-width:620px){
  .bref{padding:var(--s-4)}
  .bref__tete{gap:var(--s-4)}
  .bref__logo{width:64px;height:64px}
  .bref__logo__img{max-height:40px}
  .bref__nom{font-size:1.375rem}
  .bref__note{font-size:2.25rem}
  .bref__cta .btn{width:100%}
}

/* ============================================================
   30. FORMULES — la grille des abonnements
   ============================================================ */
.formules{max-width:var(--col-wide);margin:var(--s-5) 0}
.formules__intro{font-size:var(--t-small);color:var(--c-muted);margin-bottom:var(--s-4)}
/* 12rem : quatre formules tiennent sur une rangée dans la colonne de 54rem.
   Au-delà de quatre, la grille passe d'elle-même à la ligne. */
.formules__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--s-4)}
.formules__note{font-size:var(--t-meta);color:var(--c-muted);margin:var(--s-3) 0 0;line-height:1.5}

.formule{position:relative;display:flex;flex-direction:column;border:1px solid var(--c-line);
  border-radius:var(--r-md);padding:var(--s-5) var(--s-3) var(--s-3);background:var(--c-paper)}
/* La formule mise en avant se distingue par sa bordure, pas par un fond coloré :
   un fond rendrait les autres cartes secondaires alors qu'elles sont comparables. */
.formule--phare{border-color:var(--c-brand);box-shadow:var(--e-1)}
.formule__badge{position:absolute;top:-11px;left:var(--s-4);background:var(--c-brand);color:#fff;
  font-family:var(--f-ui);font-weight:700;font-size:var(--t-meta);letter-spacing:.03em;
  padding:3px var(--s-3);border-radius:var(--r-pill);white-space:nowrap}
.formule__nom{font-size:1.0625rem;letter-spacing:.04em;text-transform:uppercase;margin:0}
.formule__prix{font-family:var(--f-ui);font-weight:800;font-size:1.5rem;color:var(--c-ink);
  letter-spacing:-.03em;margin:var(--s-2) 0 0;font-variant-numeric:tabular-nums;line-height:1.1}
.formule__soustitre{font-size:var(--t-meta);color:var(--c-muted);line-height:1.45;
  margin:var(--s-2) 0 0;padding-bottom:var(--s-3);border-bottom:1px solid var(--c-line)}
.formule__points{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;gap:7px;flex:1}
.formule__points li{position:relative;padding-left:20px;font-size:var(--t-meta);line-height:1.45}
.formule__marque{position:absolute;left:0;top:0;font-family:var(--f-ui);font-weight:800;
  font-size:.8125rem;color:var(--c-good)}
.formule__points li.hors{color:var(--c-muted)}
.formule__points li.hors .formule__marque{color:var(--c-bad)}
.formule__cta{margin-top:var(--s-4);width:100%;min-height:44px}

@media(max-width:640px){
  .formules__grille{grid-template-columns:1fr}
  .formule{padding:var(--s-5) var(--s-4) var(--s-4)}
}

/* ============================================================
   31. ACTUALITÉ — image d'en-tête
   ============================================================ */
.lead{max-width:var(--col-wide);margin:0 0 var(--s-6)}
.lead img{width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--c-line)}
.lead figcaption{font-size:var(--t-meta);color:var(--c-muted);margin-top:var(--s-2);line-height:1.5}

/* ============================================================
   32. COLONNE DE DROITE — compléments
   ============================================================ */
.rail-bloc{margin-bottom:var(--s-6)}
.rail-bloc h2{font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);
  font-weight:700;margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-line)}
.rail-liste{list-style:none;margin:0;padding:0}
.rail-liste li{padding:var(--s-3) 0;border-bottom:1px solid var(--c-line)}
.rail-liste li:last-child{border-bottom:0}
.rail-liste a{display:block;font-family:var(--f-ui);font-weight:700;font-size:.875rem;line-height:1.35;
  color:var(--c-ink);text-decoration:none}
.rail-liste a:hover{color:var(--c-brand)}
.rail-liste time{display:block;font-size:var(--t-meta);color:var(--c-muted);margin-top:3px}
.rail-tout{display:inline-block;margin-top:var(--s-3);font-family:var(--f-ui);font-weight:700;
  font-size:var(--t-small);text-decoration:none}
.rail-tout:hover{text-decoration:underline}

/* L'encart de marque : fond marine, comme les trois bandes du site. Il se
   distingue du contenu éditorial sans se faire passer pour une publicité. */
.rail-promo{background:var(--c-brand-deep);color:var(--c-on-deep);border-radius:var(--r-md);
  padding:var(--s-5) var(--s-4)}
.rail-promo__marque{display:flex;align-items:center;gap:8px;font-family:var(--f-ui);font-weight:800;
  font-size:.9375rem;letter-spacing:-.02em;color:#fff}
.rail-promo__accroche{font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;line-height:1.3;
  color:#fff;margin:var(--s-3) 0 0}
.rail-promo__points{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:10px}
.rail-promo__points li{position:relative;padding-left:20px;font-size:var(--t-meta);line-height:1.45}
.rail-promo__points li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;
  border-radius:2px;background:#7FA6F5}
.rail-promo .btn{margin-top:var(--s-4);width:100%;min-height:42px;font-size:var(--t-small)}

/* ============================================================
   33. ONGLETS DE THÉMATIQUE — index des actualités
   ============================================================ */
.onglets{border-bottom:1px solid var(--c-line);margin-bottom:var(--s-6)}
/* Le fil d'Ariane ne prévoit pas de marge basse : il compte sur le bloc suivant. */
.crumbs + .onglets{margin-top:var(--s-5)}
.onglets ul{list-style:none;display:flex;gap:var(--s-5);margin:0;padding:0;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.onglets ul::-webkit-scrollbar{display:none}
.onglets a{display:block;white-space:nowrap;padding:0 0 12px;font-family:var(--f-ui);font-weight:700;
  font-size:.9375rem;color:var(--c-muted);text-decoration:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s}
.onglets a:hover{color:var(--c-ink)}
/* L'onglet actif est marqué par aria-current : le style suit l'information,
   au lieu d'une classe qu'il faudrait tenir en parallèle. */
.onglets a[aria-current]{color:var(--c-brand-ink);border-bottom-color:var(--c-brand)}
/* Le titre suit les onglets de près : deux respirations empilées éloigneraient
   le filtre de ce qu'il filtre. */
.onglets + .page-head{padding-top:0}

/* ============================================================
   34. GRILLE D'ACTUALITÉS — index
   ============================================================ */
.grille-actu{display:grid;grid-template-columns:1fr;gap:var(--s-6)}
@media (min-width:640px){ .grille-actu{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){
  .grille-actu{grid-template-columns:repeat(3,1fr);gap:var(--s-6) var(--s-5)}
  /* La une occupe deux colonnes — mais seulement s'il reste au moins deux autres
     cartes pour occuper la troisième, sinon la grille garderait un trou. */
  .grille-actu > .carte-actu:first-child:not(:nth-last-child(-n+2)){grid-column:span 2;grid-row:span 2}
  .grille-actu > .carte-actu:first-child:not(:nth-last-child(-n+2)) .carte-actu__vis{aspect-ratio:16/10}
  .grille-actu > .carte-actu:first-child:not(:nth-last-child(-n+2)) .carte-actu__t{font-size:1.5rem;line-height:1.2}
}
.carte-actu a{display:block;text-decoration:none;color:inherit}
.carte-actu__vis{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-md);background:var(--c-surface);border:1px solid var(--c-line)}
.carte-actu__vis img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.carte-actu a:hover .carte-actu__vis img{transform:scale(1.03)}
/* Sans image mise en avant, un aplat au sigle plutôt qu'un cadre vide : la
   grille garde son rythme et l'absence ne se lit pas comme une erreur. */
.carte-actu__sub{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-ui);
  font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--c-line-strong)}
.carte-actu__chip{position:absolute;left:10px;bottom:10px;background:var(--c-brand);color:#fff;
  font-family:var(--f-ui);font-weight:700;font-size:.6875rem;letter-spacing:.01em;
  padding:5px 9px;border-radius:var(--r-sm)}
.carte-actu__t{font-family:var(--f-ui);font-weight:700;font-size:1.0625rem;line-height:1.3;
  letter-spacing:-.01em;color:var(--c-ink);margin:var(--s-3) 0 0}
.carte-actu a:hover .carte-actu__t{color:var(--c-brand)}
.carte-actu__m{display:block;font-size:var(--t-meta);color:var(--c-muted);margin-top:6px}

@media (prefers-reduced-motion:reduce){
  .carte-actu__vis img,.carte-actu a:hover .carte-actu__vis img{transition:none;transform:none}
}

/* ============================================================
   35. ARTICLE DE BLOG — colonne unique
   ============================================================ */
/* Une destination, pas un flux : pas de rail, une seule colonne à la largeur du
   texte, l'image en tête à la même largeur que les paragraphes. */
.article-solo{max-width:calc(var(--col) + var(--gutter)*2)}
.article-solo .prose{max-width:none}
.article-solo .lead{margin-top:var(--s-5)}
/* Sans rail, le sommaire replié reste utile à toutes les largeurs. */
@media (min-width:1140px){
  .article-solo .toc-mob:not([hidden]){display:block}
}

/* Sources : un filet et une liste sobre. Elles se lisent après l'article,
   pas pendant — d'où le corps réduit et la couleur atténuée. */
.sources{max-width:var(--col);margin:var(--s-7) 0 0;padding-top:var(--s-5);
  border-top:1px solid var(--c-line)}
.sources h2{font-size:var(--t-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);
  font-weight:700;margin:0 0 var(--s-3)}
.sources ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sources li{font-size:var(--t-small);line-height:1.5;color:var(--c-muted)}
.sources a{color:var(--c-brand-ink);text-decoration:none;overflow-wrap:anywhere}
.sources a:hover{text-decoration:underline}

/* ============================================================
   36. CONTACT — adresse au pied de page et formulaire
   ============================================================ */

/* L'adresse se distingue de la phrase de mission qui la précède : c'est une
   action, pas une description. Soulignée d'emblée, parce qu'un lecteur qui
   cherche à écrire ne survole pas pour trouver ce qui est cliquable. */
.foot__mail{margin:var(--s-3) 0 0}
.foot__mail a{text-decoration:underline;text-underline-offset:3px}

.lop-form{max-width:var(--col);margin:var(--s-6) 0 0}
.lop-form form{display:grid;gap:var(--s-5)}

/* Nom et adresse tiennent sur une rangée : deux champs courts empilés
   allongent le formulaire sans rien clarifier. Ils se séparent quand la
   colonne ne peut plus les porter. */
.lop-form__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media(max-width:600px){.lop-form__duo{grid-template-columns:1fr}}

.lop-form__champ{display:grid;gap:var(--s-2);margin:0}
.lop-form__champ label{font-family:var(--f-ui);font-weight:600;font-size:var(--t-small);color:var(--c-ink)}
.lop-form__champ input,.lop-form__champ select,.lop-form__champ textarea{
  width:100%;border:1px solid var(--c-line-strong);border-radius:var(--r-sm);
  padding:12px var(--s-3);font-family:var(--f-text);font-size:var(--t-body);
  color:var(--c-ink);background:var(--c-paper);min-height:48px}
.lop-form__champ textarea{min-height:180px;line-height:1.6;resize:vertical}
.lop-form__champ input:focus,.lop-form__champ select:focus,.lop-form__champ textarea:focus{
  outline:0;border-color:var(--c-brand);box-shadow:0 0 0 3px var(--c-brand-wash)}
.lop-form__champ [aria-invalid="true"]{border-color:var(--c-bad)}

/* Le message d'erreur porte son intitulé en toutes lettres, jamais la seule
   couleur : un champ rouge ne dit pas ce qu'il attend. */
.lop-form__erreur{font-size:var(--t-small);line-height:1.5;color:var(--c-bad)}

.lop-form__accord{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);margin:0;
  font-size:var(--t-small);line-height:1.55;color:var(--c-body)}
.lop-form__accord input{width:20px;height:20px;margin-top:2px;accent-color:var(--c-brand)}
.lop-form__accord label{color:var(--c-body)}
.lop-form__accord a{color:var(--c-brand-ink)}
.lop-form__accord .lop-form__erreur{grid-column:2}

.lop-form__recu{background:var(--c-good-wash);border:1px solid var(--c-good);border-radius:var(--r-md);
  padding:var(--s-5);margin:0;font-size:var(--t-body);line-height:1.6;color:var(--c-ink)}
.lop-form__recu strong{color:var(--c-good)}
.lop-form__alerte{background:var(--c-bad-wash);border:1px solid var(--c-bad);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5);font-size:var(--t-small);line-height:1.6;color:var(--c-ink)}

/* Le déclencheur de réouverture du bandeau doit être un <button> : Complianz
   n'écoute que « button.cmplz-manage-consent ». Il se lit pourtant comme les
   liens qui l'entourent, d'où le dépouillement complet du style natif. */
.foot__consent{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;
  margin:0;cursor:pointer;font-family:inherit;font-size:inherit;line-height:inherit;
  color:#DCE7F5;text-decoration:none}
.foot__consent:hover{color:#fff;text-decoration:underline}
.foot__consent:focus-visible{outline:2px solid #fff;outline-offset:2px}