:root{
  --fond:#07070B; --card:#0F0F14; --card-2:#17171F;
  --ink:#F4F4FC; --body:#C6C7D0; --muted:#9D9EA5;
  --line:#1C1C22; --line-2:#2A2A33;
  --accent:#477FFF; --primary:#306CFF;
  /*
    Le bleu des boutons pleins, et il est **plus sombre que --primary**.
    Mesuré : du blanc sur #306CFF donne 4,45:1, soit juste sous les 4,5
    exigés pour du texte de cette taille — le bouton « Essayer le
    simulateur » paraissait délavé, et le client l'a vu avant nous. Sur
    #1E49B7 le même blanc donne 7,80:1. C'est la teinte foncée de la charte,
    pas une couleur inventée pour l'occasion.
  */
  --primary-fonce:#1E49B7;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--body);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px; margin:0 auto; padding:0 24px}
/*
  760 px est la bonne largeur pour **lire** un article — au-delà, l'œil perd
  sa ligne. Ce n'est pas la bonne pour une **liste** : elle n'y tient que
  deux cartes, et le blog est fait pour en porter davantage.
*/
.wrap.large{max-width:1100px}
a{color:var(--accent)}
img{max-width:100%; height:auto}

.barre{border-bottom:1px solid var(--line); padding:16px 0; margin-bottom:36px}
.barre .wrap{max-width:1100px; display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.barre img{height:30px; width:auto}
.barre nav{margin-left:auto; display:flex; gap:20px; font-size:14.5px}
.barre nav a{color:var(--muted); text-decoration:none}
.barre nav a:hover{color:var(--ink)}

h1{font-size:clamp(30px,5vw,44px); line-height:1.14; letter-spacing:-.03em;
   color:var(--ink); margin:0 0 14px; text-wrap:balance}
h2{font-size:clamp(21px,3vw,27px); line-height:1.25; letter-spacing:-.02em;
   color:var(--ink); margin:42px 0 12px; text-wrap:balance; scroll-margin-top:24px}
p{margin:0 0 18px}
.chapeau{font-size:19px; color:var(--ink); margin:0 0 30px}
.appoint{font-size:14px; color:var(--muted)}
.fil{font-size:13.5px; color:var(--muted); margin:0 0 18px}
.fil a{color:var(--muted)}

.entete{margin:0 0 28px}
.entete img{border-radius:14px; border:1px solid var(--line-2); display:block; width:100%}

.sommaire{border:1px solid var(--line-2); border-radius:12px;
          background:var(--card); padding:18px 22px; margin:0 0 34px}
.sommaire-titre{font-size:12px; letter-spacing:.11em; text-transform:uppercase;
                color:var(--accent); font-weight:700; margin:0 0 8px}
.sommaire ul{margin:0; padding-left:20px; list-style:disc}
.sommaire li{margin:5px 0}
.sommaire a{color:var(--body); text-decoration:none}
.sommaire a:hover{color:var(--ink); text-decoration:underline}

.elements{counter-reset:item; list-style:none; padding:0; margin:0}
.elements>li{counter-increment:item; position:relative; padding-left:52px; margin:0 0 34px}
.elements>li::before{
  content:counter(item); position:absolute; left:0; top:4px;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--card-2); border:1px solid var(--line-2);
  color:var(--accent); font-weight:700; font-size:15px;
}
.elements>li h2{margin-top:0}
/* Un bloc sans sous-titre est une introduction ou une transition : il ne
   prend pas de numéro, donc il n'incrémente pas le compteur et ne garde pas
   la gouttière qui lui était réservée. */
.elements>li.sans-numero{counter-increment:none; padding-left:0}
.elements>li.sans-numero::before{content:none}

/* Une illustration de section. Plus discrète que celle d'en-tête : elle
   ponctue le texte, elle ne l'annonce pas. */
.dans-section{margin:22px 0}
.dans-section img{border-radius:12px; border:1px solid var(--line-2);
                  display:block; width:100%}

/* Une citation. Le filet à gauche fait tout le travail : on reconnaît un
   extrait sans avoir à le dire. */
.citation{margin:22px 0; padding:2px 0 2px 20px;
          border-left:3px solid var(--accent); color:var(--ink)}
.citation p{font-size:18.5px; line-height:1.62; font-style:italic; margin:0 0 10px}
.citation p:last-child{margin-bottom:0}

/* Un lien dans le texte de Philippe. Souligné, parce qu'une couleur seule ne
   se voit pas pour qui distingue mal les teintes. */
.article p a{color:var(--accent); text-decoration:underline;
             text-underline-offset:2px}
.article p a:hover{color:var(--ink)}

.questions section{border-bottom:1px solid var(--line); padding-bottom:10px}
.questions section:last-child{border-bottom:0}

.retenir,.appel{
  border:1px solid var(--line-2); border-left:3px solid var(--accent);
  border-radius:12px; background:var(--card); padding:20px 24px; margin:38px 0 0;
}
.retenir h2,.appel h2{margin:0 0 10px; font-size:19px}
.appel{margin-top:52px}
/*
  ────────────────────────────────────────────────────────────────────────
  Le bouton plein, et pourquoi il porte deux sélecteurs
  ────────────────────────────────────────────────────────────────────────

  **Le défaut signalé le 20 octobre 2026 n'était pas une affaire de teinte.**
  Le bouton vit dans un « p », dans « .article » : la règle des liens de
  texte, « .article p a », pèse (0,1,2) quand « .bouton » ne pèse que
  (0,1,0). C'est elle qui gagnait. Le bouton recevait donc la couleur
  d'accent et le soulignement d'un lien ordinaire — du bleu clair sur du
  bleu, **1,22:1 mesuré**. Le client l'a décrit comme « un blanc très
  léger » ; c'était du bleu, et il n'y avait presque rien à voir.

  La leçon tient en une ligne, et elle vaut au-delà du blog : **mesurer la
  couleur d'un jeton ne dit rien si la règle qui le pose ne s'applique
  pas.** On écrit donc le sélecteur assez spécifique pour l'emporter, et un
  test compare les deux spécificités plutôt que les deux couleurs.

  Le fond est le bleu foncé, et le survol **éclaircit** au lieu de foncer :
  l'inverse de l'habitude, et c'est voulu — l'état de repos doit être le
  plus lisible des deux.

  « -webkit-font-smoothing:antialiased » est posé sur le corps de page et
  amincit les lettres claires sur fond saturé ; on le retire ici, où il
  coûterait le contraste qu'on vient de gagner.
*/
.bouton,
.article p a.bouton{
  display:inline-block; background:var(--primary-fonce); color:#fff; text-decoration:none;
  padding:11px 22px; border-radius:999px; font-weight:700; font-size:15px; margin-right:12px;
  -webkit-font-smoothing:auto;
}
.bouton:hover,
.article p a.bouton:hover{background:var(--primary); color:#fff}

/*
  ────────────────────────────────────────────────────────────────────────
  La liste des articles : des cartes qui se rangent côte à côte
  ────────────────────────────────────────────────────────────────────────

  **Le défaut qu'on corrige ici n'était pas une question de taille.** La
  règle précédente visait « article:only-child » en croyant désigner un
  article **sans image** — alors que `:only-child` parle de la place de
  l'article parmi ses frères, et que chaque article est bel et bien seul
  dans son « li ». Elle s'appliquait donc à tous, écrasait la colonne de
  168 px prévue pour la vignette, et chaque illustration s'étalait sur
  toute la largeur. Signalé par le client le 20 octobre 2026.

  Les cartes sont en « auto-fill » et non « auto-fit » : avec deux articles,
  « auto-fit » étire les deux colonnes sur toute la largeur et les images
  redeviennent énormes. « auto-fill » garde les pistes vides, donc la carte
  garde sa taille, et le blog se remplit sans que la mise en page bouge.
*/
.liste-articles{
  list-style:none; padding:0; margin:30px 0 0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:30px 26px;
}
.liste-articles>li{padding:0}
.liste-articles article{display:flex; flex-direction:column; gap:13px}
/* La vignette ne porte plus la page : 16/10, large comme sa carte, et
   l'illustration d'origine fait quatre fois ça. */
.liste-articles img{
  display:block; width:100%; height:auto;
  border-radius:10px; border:1px solid var(--line-2);
  aspect-ratio:16/10; object-fit:cover;
}
.liste-articles h2{margin:0 0 6px; font-size:19px; line-height:1.28}
.liste-articles h2 a{color:var(--ink); text-decoration:none}
.liste-articles h2 a:hover{color:var(--accent)}
.liste-articles p{margin:0 0 6px; font-size:15px; line-height:1.55}
.vide{color:var(--muted)}
.vide a{color:var(--accent)}

/* ── Chercher dans le blog ─────────────────────────────────────────────
   Un formulaire GET, sans aucun JavaScript : le blog se lit sans, et sa
   recherche aussi. L'étiquette est visible plutôt que masquée — un champ
   libre sans étiquette se devine mal, et un `placeholder` disparaît dès la
   première frappe, au moment précis où l'on voudrait relire ce qu'on
   cherche.
*/
.chercher{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:26px 0 0;
}
.chercher label{font-size:14px; color:var(--muted); width:100%}
.chercher input{
  flex:1 1 280px; max-width:420px;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px;
  padding:10px 18px; font:inherit; font-size:15px;
}
.chercher input:focus{outline:2px solid var(--accent); outline-offset:1px}
.chercher input::placeholder{color:var(--muted)}
.chercher button{
  background:var(--primary-fonce); color:#fff; border:0; border-radius:999px;
  padding:10px 20px; font:inherit; font-size:15px; font-weight:700;
  cursor:pointer; -webkit-font-smoothing:auto;
}
.chercher button:hover{background:var(--primary)}
.chercher .effacer{color:var(--muted); font-size:14px}
.chercher .effacer:hover{color:var(--accent)}
.resultat{margin:16px 0 0; color:var(--muted); font-size:15px}

/* ── Pagination ────────────────────────────────────────────────────────
   Des liens véritables, et non des boutons : c'est par eux qu'un moteur
   atteint les articles sortis de la première page. La page courante est
   dite en toutes lettres plutôt que par une pastille — il n'y en aura
   jamais assez pour qu'une liste de numéros soit plus rapide à lire.
*/
.pages{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line);
  font-size:15px;
}
.pages a{color:var(--accent); text-decoration:none; font-weight:600}
.pages a:hover{text-decoration:underline}
.pages .inactif{color:var(--line-2)}
.pages .rang{color:var(--muted)}
@media(max-width:620px){
  .elements>li{padding-left:44px}
}

.pied{border-top:1px solid var(--line); margin-top:64px; padding:28px 0 46px}
.pied .wrap{max-width:1100px}
.pied p{font-size:14px; color:var(--muted); margin:0}