/* ============================================================================
   BLOG - styles partages par la liste et la page d'article.
   Pose le 23/08/2026, refondu le meme soir (grille de cartes a visuel).

   ⚠️ FICHIER SEPARE, contrairement aux autres pages du site qui portent leur
   `<style>` en ligne. Raison : ces regles servent DEUX pages. Les recopier
   dans chacune, c'est garantir qu'elles divergeront a la premiere retouche.
   🚨 Aucune regle nue (`p`, `h2`, `a`...) hors de `.article-corps` : tout est
   porte par une classe, sinon ces styles deborderaient sur l'en-tete et le
   pied de page, communs a tout le site.
   ============================================================================ */

/* ---- Liste : grille de cartes -------------------------------------------
   🚨 `auto-fill` + `minmax(250px, 1fr)` et NON un nombre fixe de colonnes :
   quatre cartes par ligne sur un ecran large, trois sur un portable en
   paysage, une sur telephone - sans une seule media-query. Figer « 4 » aurait
   donne des cartes de 60 px de large sur mobile. */
.blog-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:24px;margin-top:36px;align-items:stretch}

/* La carte est une colonne flex : le pied (« Lire l'article ») est pousse en
   bas par `margin-top:auto`, donc toutes les cartes d'une ligne l'alignent,
   quelle que soit la longueur du titre. */
.blog-carte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(22,39,77,.05);transition:.18s}
.blog-carte:hover{transform:translateY(-3px);border-color:#d3dced;box-shadow:0 16px 36px rgba(22,39,77,.12)}

.blog-visuel{display:block;aspect-ratio:1200/630;background:var(--navy);overflow:hidden}
.blog-visuel img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}
.blog-carte:hover .blog-visuel img{transform:scale(1.04)}
/* ⚠️ Repli si aucun visuel n'est renseigne : un aplat aux couleurs de la
   marque vaut mieux qu'un trou dans la grille. */
.blog-visuel.vide{background:linear-gradient(135deg,var(--navy) 0%,#20345f 100%)}

.blog-corps{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.blog-meta{font-size:12px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;
  font-weight:700;margin-bottom:8px}
.blog-carte h2{font-size:18.5px;line-height:1.3;margin:0 0 9px}
.blog-carte h2 a{color:var(--navy);text-decoration:none}
.blog-carte h2 a:hover{color:var(--orange)}
/* Trois lignes maximum : au-dela, les cartes d'une meme ligne se decalent et
   la grille perd sa regularite. */
.blog-carte p{color:var(--ink);font-size:14.5px;line-height:1.6;margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-lire{margin-top:auto;color:var(--orange);font-weight:700;font-size:14px;text-decoration:none}
.blog-lire:hover{text-decoration:underline}

.blog-vide{background:#fff;border:1px dashed #c9d2e6;border-radius:16px;
  padding:34px;text-align:center;color:var(--muted)}

/* ---- Article ------------------------------------------------------------- */
/* 🚨 `height:auto` EST INDISPENSABLE - corrige le 23/08/2026 au soir.
   La balise porte `width="1200" height="630"` (utile : ces attributs reservent
   la place et evitent que la page saute au chargement). Mais sans regle CSS de
   hauteur, le navigateur applique le 630 TEL QUEL : l image se retrouvait dans
   une boite de 832 x 630, puis rognee par `object-fit:cover`. Resultat, une
   couverture zoomee dont les bords etaient coupes.
   ⚠️ `aspect-ratio` ne suffit pas : il n agit que si la hauteur vaut `auto`. */
.article-visuel{width:100%;height:auto;max-width:880px;aspect-ratio:1200/630;object-fit:cover;
  border-radius:16px;display:block;margin:0 0 30px;box-shadow:0 14px 36px rgba(22,39,77,.14)}
/* ---- Bandeau de l'article -----------------------------------------------
   Visuel a gauche, titre a droite, sur fond navy - pose le 23/08/2026.

   🚨 CETTE VERSION REMPLACE UN PREMIER ESSAI, ABANDONNE LE SOIR MEME. Le duo
   avait d'abord ete pose sur fond blanc, dans la colonne de l'article. Mais une
   couverture 1200x630 est LARGE ET COURTE, alors qu'un titre de blog est HAUT :
   les deux colonnes ne pouvaient pas s'equilibrer. Il restait un grand vide sous
   l'image, et le titre se coupait en trois lignes.
   ➜ Le fond du bandeau remplit cet espace : le desequilibre ne se voit plus.
   ➜ `align-items:center` recentre le visuel face au texte.
   ➜ Et c'est le meme geste que les bandeaux des autres pages : le blog cesse
     d'etre une piece rapportee.

   ⚠️ LE TEXTE DE L'ARTICLE N'EST PAS DANS CE BANDEAU. Une colonne de quarante
   caracteres est illisible sur un texte long - on lit entre 60 et 80. */
.article-hero{background:linear-gradient(135deg,var(--navy) 0%,#0f1c38 100%);
  color:#fff;padding:40px 0 48px;position:relative;overflow:hidden}
.article-hero::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(244,123,32,.22),transparent 70%)}
.article-hero .wrap{position:relative;z-index:1}
.article-hero .ariane{font-size:13px;color:#9fb0d0;margin-bottom:22px}
.article-hero .ariane a{color:#c7d2e6;text-decoration:underline}
.article-hero .ariane a:hover{color:#fff}

.article-hero-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:40px;align-items:center}
/* Sans visuel, le texte reprend toute la largeur - pas de colonne fantome. */
.article-hero-duo.sans-visuel{grid-template-columns:1fr;max-width:820px}
@media(max-width:900px){.article-hero-duo{grid-template-columns:1fr;gap:24px}}

.article-hero .article-visuel{width:100%;height:auto;max-width:none;aspect-ratio:1200/630;
  object-fit:cover;border-radius:14px;display:block;margin:0;
  box-shadow:0 20px 48px rgba(0,0,0,.34)}

.article-hero-txt{min-width:0}
.article-hero .article-meta{font-size:12px;color:#9fb0d0;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;margin-bottom:10px}
.article-hero h1{font-size:34px;line-height:1.2;color:#fff;font-weight:800;margin:0 0 14px;
  text-wrap:balance}
@media(max-width:900px){.article-hero h1{font-size:28px}}
.article-hero .article-chapo{font-size:17px;color:#c7d2e6;line-height:1.62;margin:0}
/* 🚨 SEUL endroit du site ou des selecteurs nus sont autorises, et ils sont
   enfermes dans `.article-corps` : le contenu vient du Markdown, on ne peut
   pas y poser de classes. */
.article-corps{max-width:760px;margin-top:34px}
.article-corps p{color:var(--ink);font-size:17px;line-height:1.8;margin:0 0 18px}
.article-corps h2{color:var(--navy);font-size:26px;font-weight:800;line-height:1.3;margin:40px 0 12px;
  padding-left:16px;border-left:4px solid var(--orange)}
.article-corps h3{color:var(--navy);font-size:20px;font-weight:700;margin:28px 0 10px}
.article-corps h4{color:var(--navy);font-size:17px;font-weight:700;margin:22px 0 8px}
.article-corps ul,.article-corps ol{margin:0 0 18px;padding-left:24px}
.article-corps li{color:var(--ink);font-size:17px;line-height:1.75;margin-bottom:8px}
.article-corps a{color:var(--orange);font-weight:600}
.article-corps strong{color:var(--navy)}
.article-corps img{max-width:100%;height:auto;border-radius:12px;margin:8px 0 20px}
.article-corps code{background:#eef1f8;padding:2px 6px;border-radius:5px;font-size:.9em;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.article-corps blockquote{margin:24px 0;padding:20px 24px;background:#f7f9fd;
  border-left:4px solid var(--orange);border-radius:0 12px 12px 0}
.article-corps blockquote p{margin:0;font-size:17.5px;font-style:italic;color:var(--navy)}
.article-corps hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---- Encart de partage --------------------------------------------------
   🚨 AUCUN JAVASCRIPT, AUCUN SCRIPT TIERS. Les boutons officiels des reseaux
   sociaux deposent des traceurs des le chargement de la page - donc AVANT tout
   consentement. Sur un site qui vend un gestionnaire de cookies, ce serait
   difficile a defendre. Ce sont de simples liens : rien n'est charge tant que
   le visiteur ne clique pas. */
.article-partage{max-width:760px;margin-top:38px;padding:20px 22px;background:#f7f9fd;
  border:1px solid var(--line);border-radius:14px;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px}
.article-partage .t{font-weight:700;color:var(--navy);font-size:15px;margin-right:4px}
.article-partage a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:#fff;
  border:1px solid var(--line);border-radius:9px;color:var(--navy);text-decoration:none;
  font-size:13.5px;font-weight:600;transition:.15s}
.article-partage a:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-1px)}
.article-partage svg{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

/* ---- Bloc auteur (E-E-A-T) ---------------------------------------------- */
.article-auteur{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-top:26px;max-width:760px}
@media(max-width:600px){.article-auteur{grid-template-columns:1fr}}
.article-auteur img{width:96px;height:96px;border-radius:14px;object-fit:cover}
.article-auteur h2{color:var(--navy);font-size:18px;margin:0 0 3px}
.article-auteur .role{color:var(--orange);font-weight:700;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:9px}
.article-auteur p{color:var(--ink);font-size:15px;line-height:1.65;margin:0 0 10px}
.article-auteur .reseaux{display:flex;gap:10px;flex-wrap:wrap}
.article-auteur .reseaux a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);
  font-size:13px;font-weight:600;text-decoration:none}
.article-auteur .reseaux a:hover{color:var(--orange)}
.article-auteur .reseaux svg{width:14px;height:14px;fill:currentColor}

/* ---- A lire aussi -------------------------------------------------------- */
.article-suite{max-width:880px;margin-top:46px;padding-top:28px;border-top:1px solid var(--line)}
.article-suite h2{color:var(--navy);font-size:20px;margin-bottom:16px}
.article-suite .blog-grille{margin-top:0}