:root{
  /* Registre PRESSE ÉCONOMIQUE, et non page d'accueil SaaS.
     L'indigo dégradé, les cartes arrondies à ombre douce et l'émeraude en
     accent sont la signature visuelle par défaut des sites générés. On passe
     donc à un papier chaud, une encre presque noire, et UN seul accent
     bronze. Aucun dégradé, aucune ombre portée : des filets et de la
     typographie, comme les pages financières d'un quotidien. */
  --papier:#faf7f2;      /* fond, chaud et non blanc */
  --papier-2:#f3eee6;    /* fond alterné */
  --encre:#16150f;       /* texte courant */
  --encre-2:#2a281f;     /* titres */
  --muted:#6b675c;       /* texte secondaire */
  --accent:#9a4a1b;      /* bronze, liens et marque */
  --accent-d:#7a3a13;
  --accent-l:#f0e4d8;
  --vert:#2f6b45;        /* favorable, sobre */
  --amber:#a8741a;       /* défavorable — jamais de rouge dans un tableau */
  --amber-l:#f6ecd8;
  --line:#ddd5c8;        /* filets */
  --line-fort:#16150f;

  --bg:var(--papier);
  --bg-2:var(--papier-2);
  --soft:var(--papier-2);
  --ink:var(--encre);
  --navy:var(--encre-2);
  --brand:var(--accent);
  --brand-d:var(--accent-d);
  --brand-l:var(--accent-l);
  --accent-d2:var(--vert);

  --silo:var(--accent);
  --silo-l:var(--accent-l);

  /* Le bandeau garde une surface SOMBRE dans les deux modes. Le laisser sur
     --encre/--papier l'inversait en crème sous prefers-color-scheme:dark,
     ce qui en faisait l'élément le plus lumineux d'une page sombre. */
  --hero-bg:#16150f;
  --hero-fg:#faf7f2;

  --maxw:1180px;
  --maxw-texte:70ch;
  --radius:3px;          /* presque droit : l'arrondi généreux fait SaaS */
  --radius-s:2px;
  --shadow:none;
  --shadow-s:none;
}

/* Couleur par silo : quatre encres distinctes, toutes dans le registre. */
body[data-silo="comparatif-comptes-pro"], li[data-silo="comparatif-comptes-pro"]{--silo:#9a4a1b; --silo-l:#f0e4d8}
body[data-silo="avis-comptes-pro"],       li[data-silo="avis-comptes-pro"]      {--silo:#2f6b45; --silo-l:#e2ece5}
body[data-silo="changer-de-compte-pro"],  li[data-silo="changer-de-compte-pro"] {--silo:#8a6a12; --silo-l:#f2ead4}
body[data-silo="decisions"],              li[data-silo="decisions"]             {--silo:#2b4a6b; --silo-l:#e0e7ee}

@media (prefers-color-scheme: dark){
  .pied-photo img{filter:brightness(.55) saturate(.8)}
  :root{
    --papier:#141310; --papier-2:#1c1a16;
    --encre:#ece7dc;  --encre-2:#f7f3ea; --muted:#9c968a;
    --accent:#d98a4e; --accent-d:#e8a877; --accent-l:#2e2118;
    --vert:#6aae86;   --amber:#d4a34a;    --amber-l:#2c2416;
    --line:#332f27;   --line-fort:#ece7dc;
    --hero-bg:#1c1a16; --hero-fg:#f4efe4;
  }
  body[data-silo="comparatif-comptes-pro"], li[data-silo="comparatif-comptes-pro"]{--silo:#d98a4e; --silo-l:#2e2118}
  body[data-silo="avis-comptes-pro"],       li[data-silo="avis-comptes-pro"]      {--silo:#6aae86; --silo-l:#1b2a21}
  body[data-silo="changer-de-compte-pro"],  li[data-silo="changer-de-compte-pro"] {--silo:#d4a34a; --silo-l:#2c2416}
  body[data-silo="decisions"],              li[data-silo="decisions"]             {--silo:#7fa6cc; --silo-l:#1a222c}
}

/* Titrage en SERIF. C'est le levier le plus efficace contre l'aspect
   « généré » : un display serif lit presse, un sans-serif partout lit SaaS.
   Source Serif 4, licence SIL OFL, auto-hébergée comme Inter. */
@font-face{
  font-family:"Source Serif";
  src:url("/assets/fonts/source-serif-4.woff2") format("woff2-variations");
  font-weight:200 900; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight:100 900; font-style:normal; font-display:swap;
  /* Jeu latin : couvre le français accentué. Restreindre l'unicode-range évite
     au navigateur de télécharger la police pour une page qui n'en aurait pas
     besoin, et borne le poids à 48 Ko. */
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.65;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

h1,h2,h3{font-family:"Source Serif",Georgia,"Times New Roman",serif;
  color:var(--navy); line-height:1.2; margin:1.5em 0 .45em; letter-spacing:-.005em}
h1{font-size:2.35rem; font-weight:600; margin-top:.4em}
h2{font-size:1.48rem; font-weight:600}
h3{font-size:1.14rem; font-weight:600}
a{color:var(--brand); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--brand) 40%, transparent)}
a:hover{color:var(--brand-d); text-decoration-color:currentColor}

.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:var(--brand); color:#fff; padding:8px 14px; border-radius:var(--radius-s); z-index:10}

.site-header{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:0; z-index:5}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:12px}
.logo{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:1.2rem;
  color:var(--navy); text-decoration:none; letter-spacing:-.02em}
.logo svg{flex:0 0 auto; display:block}
.logo b{font-weight:800; color:var(--brand)}
.site-header nav a{margin-left:16px; color:var(--muted); text-decoration:none; font-size:.93rem;
  padding:6px 2px; border-bottom:2px solid transparent}
.site-header nav a:hover{color:var(--brand); border-bottom-color:var(--brand)}

/* Bandeau d'accueil : c'est lui qui donne au site une couleur et un point
   d'entrée. Sans lui, la page d'accueil n'était que du texte noir sur blanc. */
.hero{background:var(--hero-bg); color:var(--hero-fg); padding:54px 0 46px;
  margin-bottom:0; position:relative; border-bottom:3px solid var(--accent)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:36px; align-items:center}
.hero h1{color:var(--hero-fg); margin:0 0 14px; font-size:2.45rem; line-height:1.15; letter-spacing:-.02em}
.hero p{color:color-mix(in srgb, var(--hero-fg) 72%, transparent); font-size:1.08rem; margin:0 0 22px; max-width:56ch}
.hero .cta{background:var(--accent); color:#16150f; border:0}
.hero .cta:hover{background:var(--accent-d); color:#16150f}
.hero .secondaire{color:var(--hero-fg); margin-left:16px; text-decoration:underline; text-underline-offset:3px}
.hero-chiffres{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.hero-chiffre{background:transparent; border:1px solid color-mix(in srgb, var(--hero-fg) 22%, transparent);
  border-radius:var(--radius-s); padding:14px 12px; text-align:center}
.hero-chiffre b{display:block; font-size:1.5rem; font-family:"Source Serif",Georgia,serif; color:var(--hero-fg); font-variant-numeric:tabular-nums; line-height:1.1}
.hero-chiffre span{display:block; margin-top:4px; font-size:.78rem; color:color-mix(in srgb, var(--hero-fg) 60%, transparent); line-height:1.3}
.hero-illus{color:var(--hero-fg); opacity:.95}

/* Bandeau photo de l'accueil. La photo couvre la section ; le dégradé part du
   fond de bandeau, opaque sous le texte, et s'efface vers la droite où se
   trouve le sujet (bureau, balance, ordinateur). overflow:hidden pour que
   l'image ne déborde jamais sous la bordure ambrée. */
.hero-photo{overflow:hidden; padding:84px 0 76px; isolation:isolate}
.hero-fond{position:absolute; inset:0; z-index:-2}
.hero-fond img{width:100%; height:100%; object-fit:cover; object-position:70% 50%; display:block}
.hero-photo::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--hero-bg) 0%, color-mix(in srgb, var(--hero-bg) 88%, transparent) 34%,
    color-mix(in srgb, var(--hero-bg) 35%, transparent) 62%, transparent 85%)}
.hero-photo h1{text-shadow:0 1px 18px rgba(0,0,0,.35)}

/* Frise des pages intérieures : la photo de l'accueil, recadrée sur le
   bureau, fondue dans le fond de bandeau à gauche. */
.frise{position:relative; height:110px; overflow:hidden; background:var(--hero-bg);
  border-bottom:3px solid var(--accent)}
.frise img{width:100%; height:100%; object-fit:cover; object-position:62% 58%; display:block}
.frise::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--hero-bg) 0%, color-mix(in srgb, var(--hero-bg) 55%, transparent) 30%, transparent 70%)}

.chapo{font-size:1.12rem; color:var(--muted); max-width:70ch}
.bande{--fond-local:var(--bg-2); background:var(--bg-2); border-block:1px solid var(--line); padding:34px 0; margin:40px 0}
.bande > .wrap{padding-inline:20px}
h2 .num{color:var(--silo); font-variant-numeric:tabular-nums}
.fil{font-size:.86rem; color:var(--muted); margin:18px 0 6px}
.fil a{color:var(--silo); text-decoration:none}
.fil a:hover{text-decoration:underline}
.silo-tag{display:inline-block; background:var(--silo-l); color:var(--silo);
  border-radius:99px; padding:3px 11px; font-size:.78rem; font-weight:600;
  letter-spacing:.02em; margin-bottom:10px}
.dates{font-size:.88rem; color:var(--muted)}

/* Mention d'affiliation : discrète mais TOUJOURS visible en tête (DGCCRF).
   Elle n'est jamais reléguée au pied de page, ni masquée au chargement. */
.affil-note{
  background:var(--soft); border-left:3px solid var(--accent);
  border-radius:var(--radius-s);
  padding:10px 14px; margin:18px 0;
  font-size:.86rem; color:var(--muted); max-width:78ch;
}

.corps{max-width:none}
.corps p, .corps li{max-width:var(--maxw-texte)}
.corps h2{position:relative; padding-left:16px}
.corps h2::before{content:""; position:absolute; left:0; top:.28em; bottom:.28em;
  width:4px; border-radius:2px; background:var(--silo)}

/* Gabarit d'article en deux colonnes à partir de 1040 px.
   Avant : le texte était bridé à 72ch dans un conteneur de 1240 px, laissant
   la moitié droite de l'écran vide pendant que les tableaux tarifaires
   étaient comprimés à 560 px. Le sommaire occupe cet espace et sert
   réellement, ces articles faisant huit à douze sections. */
.article-layout{display:block}
@media (min-width:1040px){
  .article-layout{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:44px; align-items:start}
  .sommaire{position:sticky; top:74px}
}
.sommaire{background:var(--soft); border:1px solid var(--line); border-left:3px solid var(--silo);
  border-radius:var(--radius-s); padding:16px 18px; margin:24px 0; font-size:.9rem}
.sommaire h2{margin:0 0 10px; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); padding-left:0}
.sommaire h2::before{display:none}
.sommaire ol{list-style:none; padding:0; margin:0; counter-reset:s}
.sommaire li{margin:7px 0; counter-increment:s}
.sommaire a{color:var(--ink); text-decoration:none; display:block; line-height:1.35}
.sommaire a::before{content:counter(s) ". "; color:var(--muted); font-variant-numeric:tabular-nums}
.sommaire a:hover{color:var(--brand)}

/* Tableaux tarifaires : chiffres tabulaires obligatoires. Sur un site qui
   aligne des frais et des plafonds, des colonnes qui ne s'alignent pas coûtent
   la crédibilité que la palette cherche à établir. */
table{
  width:100%; border-collapse:collapse; margin:22px 0;
  font-variant-numeric:tabular-nums; font-size:.95rem;
}
th,td{border-bottom:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top}
th{color:var(--navy); font-weight:600; background:transparent; position:sticky; top:0;
  border-bottom:2px solid var(--line-fort); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.045em}

tbody tr:hover td{background:var(--papier-2)}
td.num, th.num{text-align:right}
.defavorable{color:var(--amber); font-weight:600}  /* jamais de rouge : une donnée n'est pas un jugement */

.cta{
  display:inline-block; background:var(--accent); color:var(--papier); text-decoration:none;
  padding:11px 22px; border-radius:var(--radius-s); font-weight:600; letter-spacing:.01em;
}
.cta:hover{background:var(--brand-d); color:#fff}

.enbref{background:var(--soft); border-left:4px solid var(--accent); border-radius:var(--radius-s); padding:14px 18px; margin:22px 0}

.cartes{list-style:none; padding:0; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.cartes a{display:block; height:100%; background:transparent; border:1px solid var(--line);
  border-top:3px solid var(--silo); border-radius:var(--radius); padding:17px 19px;
  text-decoration:none; color:var(--ink)}
.cartes a{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.cartes a:hover{background:var(--papier-2); border-color:var(--silo);
  transform:translateY(-2px); box-shadow:0 8px 22px -12px color-mix(in srgb, var(--encre) 45%, transparent)}
@media (prefers-reduced-motion: reduce){ .cartes a{transition:none} .cartes a:hover{transform:none} }
.cartes strong{display:block; font-family:"Source Serif",Georgia,serif; font-weight:600;
  color:var(--navy); margin-bottom:6px; font-size:1.08rem; line-height:1.25}
.cartes span{font-size:.9rem; color:var(--muted); line-height:1.5}
/* La carte principale porte la couleur : le calculateur est l'outil du site,
   il ne doit pas avoir le même poids visuel que « Méthode ». */
.cartes li.majeure a{background:var(--accent-l); border-color:var(--accent); border-top-width:3px}
.cartes li.majeure strong{color:var(--brand)}
.cartes li.majeure span{color:var(--ink)}

.liste-articles{list-style:none; padding:0}
.liste-articles li{border-bottom:1px solid var(--line); padding:14px 0}
.liste-articles p{margin:4px 0 0; color:var(--muted); font-size:.92rem; max-width:72ch}
.vide{color:var(--muted); font-style:italic}

.a-completer{background:#fdf6e3; border-left:4px solid var(--amber); border-radius:var(--radius-s); padding:14px 18px; margin:20px 0}

.site-footer{margin-top:60px; border-top:1px solid var(--line); background:var(--soft); padding:0 0 28px; font-size:.9rem; color:var(--muted)}
/* Bandeau clair du pied de page : fondu vers le fond du pied, pour que le
   texte qui suit ne paraisse pas posé sur une photo. */
.pied-photo{position:relative; height:150px; overflow:hidden; margin-bottom:22px}
.pied-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 62%; display:block}
.pied-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, var(--soft) 100%)}
@media (max-width:640px){ .pied-photo{height:90px} }
.site-footer nav a{margin-right:16px; color:var(--muted)}
.site-footer .ymyl{max-width:80ch; font-size:.85rem}

/* Conteneur défilant des tableaux.
   Les deux « caches » du dégradé doivent avoir la couleur du fond sur lequel
   le tableau est posé : peints en --bg dans un encadré teinté, ils laissaient
   un voile clair sur le bord droit même quand rien ne défilait. Un encadré
   teinté déclare donc son fond dans --fond-local.
   Le dégradé à droite signale qu'il reste du contenu : sans indice visuel,
   un lecteur sur téléphone croit le tableau tronqué et ne fait pas défiler. */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  margin:22px 0; border-radius:var(--radius-s);
  background:linear-gradient(to right, var(--fond-local, var(--bg)) 30%, transparent),
             linear-gradient(to left, var(--fond-local, var(--bg)) 30%, transparent) 100% 0,
             linear-gradient(to right, color-mix(in srgb, var(--encre) 12%, transparent), transparent),
             linear-gradient(to left, color-mix(in srgb, var(--encre) 12%, transparent), transparent) 100% 0;
  background-repeat:no-repeat; background-size:40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}
.table-wrap:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.table-wrap table{margin:0}

@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr; gap:24px}
  .hero-illus{display:none}
  .frise{height:64px}
  .hero-photo::before{background:linear-gradient(180deg, color-mix(in srgb, var(--hero-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--hero-bg) 78%, transparent) 100%)}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:34px 0 30px}
  .hero h1{font-size:1.75rem}
  .hero p{font-size:1rem}
  .hero .secondaire{display:inline-block; margin:12px 0 0}
  .hero-chiffre b{font-size:1.25rem}
  h1{font-size:1.7rem}
  /* Navigation sur une seule ligne, défilante.
     Sur 390 px, cinq entrées passaient à la ligne et mangeaient 30 px de haut
     avant même le titre. Une rangée qui défile garde le contenu en haut. */
  .site-header .wrap{padding-block:9px; flex-wrap:nowrap; gap:10px}
  .site-header nav{overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; white-space:nowrap; margin-right:-20px; padding-right:20px}
  .site-header nav::-webkit-scrollbar{display:none}
  .site-header nav a{margin:0 0 0 14px; display:inline-block; font-size:.88rem}
  .logo{font-size:1.05rem; gap:7px}
  .logo svg{width:22px; height:22px}

  /* Densité réduite : sur un tableau tarifaire, gagner 40 % de largeur évite
     souvent le défilement plutôt que de le rendre praticable. */
  table{font-size:.84rem}
  th,td{padding:7px 8px}

  /* Le formulaire du calculateur débordait : une étiquette à 26ch plus un
     champ ne tiennent pas dans 360 px. Sur petit écran, l'étiquette passe
     au-dessus du champ. */
  .calc{padding:14px 16px}
  .calc label{display:block; min-width:0; margin-bottom:4px}
  .calc input{width:100%; max-width:12ch}
  .cartes{grid-template-columns:1fr}
}

/* Observatoire et calculateur */
.calc{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:20px 0; max-width:60ch}
.calc p{margin:10px 0}
.calc label{display:inline-block; min-width:26ch; font-weight:600; color:var(--navy)}
.calc input{width:9ch; padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius-s);
  font:inherit; font-variant-numeric:tabular-nums; text-align:right}
.calc button{border:0; cursor:pointer; font:inherit}
.nuance{color:var(--muted); font-size:.88rem}
.nd{color:var(--muted)}
.releve{color:var(--muted); font-size:.88rem}
.barres{max-width:100%; height:auto; margin:18px 0}
.b-label{fill:var(--navy); font-weight:600; font-size:14px}
.b-nom{fill:var(--ink); font-size:13px}
.b-val{fill:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.b-barre{fill:var(--brand)}
/* Ligne dont le total est incomplet : le lecteur doit le voir avant de comparer. */
.partiel td{background:#fdf9ef}
.partiel td.num{color:var(--amber); font-weight:600}

/* Arbres de décision */
.fil-guide{list-style:none; padding:0; margin:18px 0; border-left:3px solid var(--line)}
.fil-guide li{padding:6px 0 6px 14px; font-size:.92rem}
.fil-guide .q{color:var(--muted)}
.fil-guide strong{color:var(--navy)}
.fil-guide .refaire{margin-left:10px; font-size:.85rem; color:var(--muted)}
.etape{background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin:20px 0}
.etape h2{margin-top:0}
.choix{list-style:none; padding:0; margin:14px 0 0}
.choix li{margin:8px 0}
.choix a{display:block; background:var(--bg); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--radius-s); padding:12px 16px; text-decoration:none; color:var(--ink); font-weight:500}
.choix a:hover{border-color:var(--brand); box-shadow:var(--shadow-s); color:var(--brand)}
.resultat{border-left:4px solid var(--accent); padding-left:18px; margin:20px 0}
.avertissement{background:#fdf6e3; border-left:4px solid var(--amber); border-radius:var(--radius-s); padding:12px 16px}
/* Offre qui ne peut pas rendre le service demandé : reléguée, et dite. */
.bloque td{background:#fbf0f0; opacity:.75}
.bloquant{color:#a33}

/* Maillage interne et outils liés, en pied d'article */
.voisins{margin:44px 0 0; padding-top:24px; border-top:1px solid var(--line)}
.voisins ul{list-style:none; padding:0; display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.voisins li{background:var(--soft); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:14px 16px}
.voisins a{font-weight:600; color:var(--navy); text-decoration:none}
.voisins a:hover{color:var(--brand); text-decoration:underline}
.voisins p{margin:6px 0 0; font-size:.88rem; color:var(--muted)}
.outils-lies{margin:32px 0 0; padding:20px 22px; background:var(--soft);
  border-left:4px solid var(--accent); border-radius:var(--radius-s)}
.outils-lies h2{margin-top:0}
.outils-lies .cta{margin-right:10px}

/* Bloc de vérification : la source est un argument, elle doit se voir. */
.verif{margin:36px 0 0; padding:16px 20px; background:var(--soft);
  border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:var(--radius-s); font-size:.92rem}
.verif h2{margin:0 0 8px; font-size:1.05rem}
.verif p{margin:6px 0; color:var(--muted)}
.verif strong{color:var(--navy)}

/* Bandeau d'ouverture d'article : le chiffre de l'article fait son image. */
.hero-fig{margin:22px 0 30px; padding:20px 18px 14px;
  background:var(--papier-2); border:1px solid var(--line);
  border-left:3px solid var(--silo); border-radius:var(--radius)}
.hero-fig figcaption{margin-top:10px; font-size:.86rem; color:var(--muted); text-align:center}
.hero-article{display:block; width:100%; height:auto; max-height:230px}
.hero-article .h-sol{stroke:var(--line); stroke-width:1.5}
.hero-article .h-haut{fill:var(--amber)}
.hero-article .h-bas{fill:var(--accent)}
.hero-article .h-moyen{fill:var(--silo); opacity:.55}
.hero-article .h-val{fill:var(--navy); font-size:15px; font-weight:700; font-variant-numeric:tabular-nums}
.hero-article .h-nom{fill:var(--muted); font-size:12px}
@media (max-width:640px){
  .hero-fig{padding:14px 10px 10px; margin:16px 0 22px}
  /* ⚠️ Ces tailles sont en UNITÉS DU viewBox, pas en pixels écran. Le viewBox
     fait 720 de large pour environ 350 px affichés sur un téléphone, soit un
     facteur 0,49 : 15 unités ne rendaient plus que 7 px, illisibles. Il faut
     donc surdimensionner ici pour obtenir une taille réelle correcte. */
  .hero-article .h-val{font-size:30px}
  .hero-article .h-nom{font-size:24px}
}


/* ── Cartes d'article ──────────────────────────────────────────────────────
   Remplacent la liste de liens bleus soulignés. Douze titres identiques à la
   suite ne donnaient aucune prise à l'œil, et rien ne distinguait un avis
   d'un comparatif. Chaque carte porte la couleur de son silo et le chiffre le
   plus parlant de l'article, ce qui la rend lisible en diagonale. */
.cartes-art{list-style:none; padding:0; margin:20px 0 0; display:grid; gap:0;
  border-top:1px solid var(--line)}
@media (min-width:760px){ .cartes-art{grid-template-columns:1fr 1fr; column-gap:36px} }
.carte-art{border-bottom:1px solid var(--line)}
.carte-art > a{display:block; padding:18px 2px 18px 14px; text-decoration:none;
  color:var(--ink); border-left:3px solid transparent; transition:border-color .12s, background .12s}
.carte-art > a:hover{border-left-color:var(--silo); background:var(--papier-2)}
.carte-silo{display:inline-block; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.09em; font-weight:700; color:var(--silo)}
.carte-chiffre{float:right; font-family:"Source Serif",Georgia,serif; font-weight:600;
  font-size:1.18rem; color:var(--silo); font-variant-numeric:tabular-nums; line-height:1}
.carte-art strong{display:block; clear:none; margin:7px 0 5px;
  font-family:"Source Serif",Georgia,serif; font-weight:600; font-size:1.12rem;
  line-height:1.28; color:var(--navy)}
.carte-art > a:hover strong{color:var(--accent)}
.carte-desc{display:block; font-size:.89rem; line-height:1.5; color:var(--muted)}

/* Bandeau de chiffres : l'ampleur du relevé, en un coup d'œil. */
.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0; border:1px solid var(--line); margin:32px 0}
.chiffres div{padding:18px 16px; border-right:1px solid var(--line); text-align:center}
.chiffres div:last-child{border-right:0}
.chiffres b{display:block; font-family:"Source Serif",Georgia,serif; font-weight:600;
  font-size:2rem; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1}
.chiffres span{display:block; margin-top:6px; font-size:.78rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em}
@media (max-width:640px){ .chiffres div{border-right:0; border-bottom:1px solid var(--line)} }

/* Seuil de bascule — le bloc qui porte la donnée propre au site.
   Traité comme un encadré de presse : filet épais à gauche dans la couleur du
   silo, verdict en serif, tableau serré. Il doit se repérer d'un coup d'œil
   dans la page, parce que c'est ce que le lecteur est venu chercher. */
.bascule{--fond-local:var(--papier-2); margin:28px 0; padding:18px 20px 14px; background:var(--papier-2);
  border:1px solid var(--line); border-left:3px solid var(--silo); border-radius:var(--radius)}
.bascule-titre{margin:0 0 8px; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600}
.bascule-verdict{margin:0 0 14px; font-family:"Source Serif",Georgia,serif;
  font-size:1.22rem; line-height:1.35; color:var(--encre-2)}
.bascule-verdict b{color:var(--silo); font-weight:600}
.bascule-table{width:100%; border-collapse:collapse; font-size:.92rem}
.bascule-table th{text-align:left; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:0 10px 6px 0; border-bottom:1px solid var(--line)}
.bascule-table td{padding:7px 10px 7px 0; border-bottom:1px solid var(--line); vertical-align:top}
.bascule-table tr:last-child td{border-bottom:0}
.bascule-table td:first-child{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--muted)}
.bascule-reserve{margin:10px 0 0; font-size:.84rem; color:var(--muted)}
.bascule-source{margin:6px 0 0; font-size:.8rem; color:var(--muted)}
@media (max-width:640px){
  .bascule{padding:14px 14px 10px}
  .bascule-verdict{font-size:1.05rem}
  .bascule-table td:first-child{white-space:normal}
}

/* Relevé d'avis clients. Le biais de sollicitation est encadré en accent :
   publier une note de 4,7 sans dire comment elle est fabriquée reviendrait à
   relayer l'argument commercial de l'établissement. */
.avis-releve{margin:26px 0}
.avis-table{width:100%; border-collapse:collapse; font-size:.92rem}
.avis-table caption{caption-side:top; text-align:left; font-size:.8rem; color:var(--muted); padding-bottom:8px}
.avis-table th[scope=col]{text-align:left; font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:0 12px 7px 0; border-bottom:1px solid var(--line-fort)}
.avis-table th[scope=row]{text-align:left; font-weight:600; padding:9px 12px 9px 0;
  border-bottom:1px solid var(--line); white-space:nowrap}
.avis-table td{padding:9px 12px 9px 0; border-bottom:1px solid var(--line); vertical-align:top;
  font-variant-numeric:tabular-nums}
.avis-table td:last-child{font-variant-numeric:normal; color:var(--muted); font-size:.88rem}
.avis-abs{display:block; font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums}
.avis-biais{margin:14px 0 0; padding:12px 14px; background:var(--accent-l);
  border-left:3px solid var(--accent); border-radius:var(--radius); font-size:.92rem}
.avis-source{margin:8px 0 0; font-size:.8rem; color:var(--muted)}

/* ══ Refonte visuelle, 27/09/2026 ═══════════════════════════════════════════
   Le registre ne change pas (presse économique, papier chaud, un accent
   bronze) ; il est poussé plus loin. Le haut de page devient une seule masse
   sombre — en-tête, bandeau photo ou frise — comme la une d'un magazine, et
   le reste gagne en hiérarchie typographique plutôt qu'en ornements. */

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
/* Les ancres du sommaire passaient sous l'en-tête collant. */
:target, .corps h2[id], .corps h3[id]{scroll-margin-top:84px}
::selection{background:color-mix(in srgb, var(--accent) 28%, transparent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* En-tête sombre. Le logo s'inverse en redéfinissant localement les deux
   variables qu'il emploie : carré crème, barres encre, la haute reste bronze. */
.site-header{background:var(--hero-bg); border-bottom:1px solid color-mix(in srgb, var(--hero-fg) 10%, transparent);
  --encre:var(--hero-fg); --papier:var(--hero-bg)}
.site-header .logo, .site-header .logo span{color:var(--hero-fg)}
.site-header .logo b{color:#d98a4e}
.site-header nav a{color:color-mix(in srgb, var(--hero-fg) 70%, transparent)}
.site-header nav a:hover, .site-header nav a[aria-current]{color:var(--hero-fg); border-bottom-color:#d98a4e}
.site-header .lang-bascule{border:1px solid color-mix(in srgb, var(--hero-fg) 25%, transparent);
  border-radius:var(--radius-s); padding:3px 8px; font-size:.78rem; letter-spacing:.06em}

/* Accueil : surtitre, titre plus ample. */
.hero .surtitre{display:inline-block; margin:0 0 16px; font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#e0a878}
.hero .surtitre::before{content:""; display:inline-block; width:28px; height:2px; background:#d98a4e;
  vertical-align:middle; margin-right:10px}
.hero-photo h1{font-size:3.05rem; line-height:1.08; letter-spacing:-.025em; margin-bottom:18px}
.hero-photo p{font-size:1.12rem}

/* Boutons : une flèche qui avance au survol dit « on passe à l'action ». */
.cta{transition:background .15s ease, transform .15s ease}
.cta::after{content:"→"; display:inline-block; margin-left:10px; transition:transform .15s ease}
.cta:hover::after{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){ .cta, .cta::after{transition:none} }

/* Titres de section de l'accueil : un filet bronze court au-dessus, comme
   les rubriques d'un quotidien. */
main:not(.wrap) > .wrap > h2, main:not(.wrap) .bande h2{font-size:1.75rem; letter-spacing:-.01em; margin-top:1.9em}
main:not(.wrap) > .wrap > h2::before, main:not(.wrap) .bande h2::before{content:""; display:block;
  width:36px; height:3px; background:var(--accent); margin-bottom:12px}

/* Chiffres clés : grands chiffres en serif, filet épais au-dessus, sans cadre. */
.chiffres{border:0; border-top:2px solid var(--line-fort); border-bottom:1px solid var(--line); margin:40px 0}
.chiffres div{padding:24px 16px 20px}
.chiffres b{font-size:2.9rem; font-weight:500; letter-spacing:-.02em}
.chiffres span{margin-top:10px; font-size:.74rem; letter-spacing:.1em}

/* « En bref » de l'accueil : une citation de une, pas un encadré. */
main:not(.wrap) .enbref{background:transparent; border-left:3px solid var(--accent); padding:4px 0 4px 26px; margin:34px 0 10px}
main:not(.wrap) .enbref p{font-family:"Source Serif",Georgia,serif; font-size:1.42rem; line-height:1.42;
  color:var(--encre-2); margin:0; max-width:52ch}
main:not(.wrap) .enbref strong{font-weight:600; color:var(--accent)}

/* Cartes « Par sujet » numérotées : 01, 02… en grand chiffre de silo. */
.bande .cartes{counter-reset:carte; gap:20px}
.bande .cartes li{counter-increment:carte}
.bande .cartes a{padding:22px 22px 24px; background:var(--papier)}
.bande .cartes a::before{content:counter(carte, decimal-leading-zero); display:block;
  font-family:"Source Serif",Georgia,serif; font-size:2.1rem; font-weight:500; line-height:1;
  color:var(--silo); margin-bottom:14px; font-variant-numeric:tabular-nums}
.bande .cartes strong{font-size:1.2rem}

/* Articles : titre affirmé, lettrine sur le premier paragraphe. */
article > h1{font-size:2.7rem; line-height:1.1; letter-spacing:-.02em; margin-top:.3em}
.corps > p:first-of-type::first-letter{float:left; font-family:"Source Serif",Georgia,serif;
  font-size:3.4em; line-height:.82; font-weight:600; color:var(--silo); margin:.06em .1em 0 0}
.corps h2{font-size:1.6rem; margin-top:1.8em}
.fil{letter-spacing:.01em}

/* Pied de page : la marque en serif, liens en rangée aérée. */
.site-footer .wrap > p:first-child{font-family:"Source Serif",Georgia,serif; font-size:1.15rem;
  color:var(--encre-2); margin-top:0}
.site-footer nav{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line)}
.site-footer nav a{margin-right:0; text-decoration:none}
.site-footer nav a:hover{color:var(--accent); text-decoration:underline}

@media (max-width:640px){
  .hero-photo h1{font-size:2.05rem}
  article > h1{font-size:1.85rem}
  .chiffres b{font-size:2.2rem}
  main:not(.wrap) .enbref p{font-size:1.15rem}
  main:not(.wrap) > .wrap > h2, main:not(.wrap) .bande h2{font-size:1.45rem}
}

/* Formulaire de contact : mêmes champs que le calculateur, empilés. */
.contact{max-width:680px}
.contact-form label{display:block; margin:18px 0 6px; font-weight:600; color:var(--navy)}
.contact-form select, .contact-form textarea, .contact-form input[type=email]{
  width:100%; font:inherit; color:var(--ink); background:var(--papier);
  border:1px solid var(--line); border-radius:var(--radius-s); padding:10px 12px}
.contact-form textarea{resize:vertical; min-height:160px}
.contact-form select:focus, .contact-form textarea:focus, .contact-form input:focus{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.contact-form .cta{border:0; cursor:pointer; font:inherit; font-weight:600; margin-top:8px}
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.contact-ok{background:var(--soft); border-left:4px solid var(--vert); border-radius:var(--radius-s);
  padding:14px 18px; margin:22px 0}

/* ── Logo : sceau à barres + logotype serif (validés le 27/09/2026) ──────────
   Le point du « i » est remplacé par trois mini-barres dessinées en CSS sur
   un « ı » sans point : c'est du texte, donc net à toute taille, et la
   couleur suit le thème. */
.logo{gap:10px}
.logo .sceau{flex:0 0 auto; display:block}
.logotype{font-family:"Source Serif",Georgia,serif; font-weight:600; font-size:1.42rem;
  letter-spacing:-.012em; line-height:1}
.logotype b{font-weight:600; color:#d98a4e}
.i-barres{position:relative; display:inline-block}
.i-barres::after{content:""; position:absolute; left:50%; bottom:.66em; width:.37em; height:.34em;
  transform:translateX(-58%);   /* décalé à gauche : la barre bronze touchait le « f » */
  background:
    linear-gradient(currentColor,currentColor) 0 100% / 27% 45% no-repeat,
    linear-gradient(currentColor,currentColor) 50% 100% / 27% 72% no-repeat,
    linear-gradient(#d98a4e,#d98a4e) 100% 100% / 27% 100% no-repeat}
@media (max-width:640px){
  .logo .sceau{width:26px; height:26px}
  .logotype{font-size:1.2rem}
}