/* ═══════════════════════════════════════════════════════════════════════════
   NEOVA BLOG — v2, refonte du 03/08/2026

   POURQUOI CETTE REFONTE. Verdict d'Olivier sur la v1 : « fade, et pas
   commercial ». Il avait raison sur les deux points, et les deux étaient dans
   le CSS : quinze cartes blanches sans image, aucun mouvement, et un seul
   bloc commercial, tout en bas, que personne n'atteint.

   CE QUI CHANGE, DANS L'ORDRE D'IMPORTANCE :
     ① DES IMAGES. Chaque article porte une vraie photo (blog/couvertures.mjs).
        Sans elle, la grille était un mur de texte — et un partage LinkedIn
        sans visuel ne se clique pas.
     ② DU COMMERCE PARTOUT, mais jamais en travers de la lecture : un bloc
        dans la grille, un encart collant à côté de l'article, un rappel après
        la lecture, les ressources gratuites en bas. C'est ce que font HubSpot
        et Ahrefs, et c'est ce qui transforme un blog en canal d'acquisition.
     ③ DU MOUVEMENT. Apparitions au défilement, dégradés animés, survols qui
        répondent. ⚠️ Toujours sous `prefers-reduced-motion` — un mouvement
        imposé est un défaut d'accessibilité, pas une signature.

   ⚠️ ZÉRO DÉPENDANCE, comme le reste du dépôt : aucune police au-delà des deux
   Google Fonts déjà chargées, aucun framework, aucun build. Le blog doit se
   régénérer avec `node blog/build.mjs` et rien d'autre.

   ⚠️ LA NAVIGATION N'EST PAS ICI. Elle vit dans `nav.html` + `/nav.css`,
   partagés avec le corporate, et chargés APRÈS ce fichier. Réécrire `.nav`
   ici redonnerait les deux apparences qu'on a corrigées le 01/08.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --night:#0D0D10; --ink:#111113; --paper:#FAFAF7; --smoke:#F1F1EE;
  --border:#E5E5E0; --gray:#6A6A6E; --lgray:#8C8C90; --white:#FFFFFF;
  --accent:#E84A1A; --accent-light:#F0703A; --accent-glow:#FF7A4D;
  /* Le second ton du dégradé. Il n'existait pas : un accent seul, à plat,
     est exactement ce qui rendait la page « fade ». */
  --ember:#FF9A3C;
  --feu:linear-gradient(115deg,#E84A1A 0%,#FF7A4D 45%,#FF9A3C 100%);
  --font-display:'Space Grotesk',sans-serif; --font-text:'Inter',sans-serif;
  --radius-s:10px; --radius-m:14px; --radius-l:20px; --radius-xl:28px; --radius-pill:100px;
  --shadow-card:0 2px 8px rgba(17,17,19,.04),0 12px 32px -12px rgba(17,17,19,.10);
  --shadow-lift:0 8px 20px rgba(17,17,19,.07),0 28px 60px -20px rgba(17,17,19,.22);
  --shadow-cta:0 12px 34px -8px rgba(232,74,26,.5);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --measure:44rem;      /* la colonne de lecture — 65-75 caractères */
  --large:74rem;        /* la grille, la une, les bandes */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-text); background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.65; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:rgba(232,74,26,.22)}

/* ━━━━━━━━━━━━━━ LE MOUVEMENT — socle commun ━━━━━━━━━━━━━━
   Un seul mécanisme pour toute la page : `blog.js` pose .vu quand l'élément
   entre dans l'écran. `--i` décale les voisins (effet de cascade).
   ⚠️ Sans JS, TOUT reste visible : l'état de départ n'est appliqué qu'après
   que le script a marqué le document (html.js). Un blog qui disparaît quand
   le script échoue serait un désastre SEO. */
.js .anim{opacity:0;transform:translateY(26px);will-change:opacity,transform}
.js .anim.vu{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  transition-delay:calc(var(--i,0)*70ms)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .anim{opacity:1!important;transform:none!important;transition:none!important}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ━━━━━━━━━━━━━━ BARRE DE PROGRESSION DE LECTURE ━━━━━━━━━━━━━━ */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;
  background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--feu);
  box-shadow:0 0 14px rgba(232,74,26,.6);transition:width .1s linear}

/* ━━━━━━━━━━━━━━ PIÈCES PARTAGÉES ━━━━━━━━━━━━━━ */
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* la pastille de catégorie, sur fond clair */
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
  background:rgba(232,74,26,.09);border:1px solid rgba(232,74,26,.18);
  padding:.3rem .7rem;border-radius:var(--radius-pill)}
/* la même, sur fond sombre */
.pill.sur-noir{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);
  backdrop-filter:blur(6px)}

/* les boutons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-s);transition:transform .18s var(--ease),box-shadow .3s;
  border:1px solid transparent;cursor:pointer;font-family:var(--font-text);line-height:1.2}
.btn .fl{transition:transform .3s var(--ease)}
.btn:hover .fl{transform:translateX(4px)}
.btn-fire{background:var(--feu);color:#fff;box-shadow:var(--shadow-cta);background-size:180% 100%}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(232,74,26,.62);background-position:100% 0}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn-ink{background:var(--night);color:#fff}
.btn-ink:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(17,17,19,.5)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--border)}
.btn-line:hover{border-color:var(--ink);transform:translateY(-2px)}

/* le fond sombre « vivant » : grille technique + deux halos qui respirent.
   ⚠️ Purement décoratif et en `pointer-events:none` — il ne doit jamais
   intercepter un clic sur un bouton posé au-dessus. */
.nuit{position:relative;background:var(--night);overflow:hidden;isolation:isolate}
.nuit::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(680px circle at 78% 18%,#000,transparent 72%);
  mask-image:radial-gradient(680px circle at 78% 18%,#000,transparent 72%)}
.halo{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-1;pointer-events:none;
  animation:flotte 16s ease-in-out infinite alternate}
.halo.a{width:520px;height:520px;top:-220px;right:-120px;background:radial-gradient(circle,rgba(232,74,26,.55),transparent 65%)}
.halo.b{width:420px;height:420px;bottom:-240px;left:-100px;background:radial-gradient(circle,rgba(255,154,60,.32),transparent 65%);animation-duration:21s;animation-direction:alternate-reverse}
@keyframes flotte{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-40px,30px,0) scale(1.12)}
}

/* ━━━━━━━━━━━━━━ ① L'ACCUEIL — LE HÉROS ━━━━━━━━━━━━━━ */
.bhero{padding:5rem 5% 3.4rem;color:#fff}
.bhero-in{max-width:var(--large);margin:0 auto;position:relative}
.bhero .badge{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:600;
  color:rgba(255,255,255,.82);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  padding:.4rem .9rem;border-radius:var(--radius-pill);margin-bottom:1.3rem}
.bhero .badge b{color:#fff;font-weight:700}
.bhero .point{width:7px;height:7px;border-radius:50%;background:#3ED598;box-shadow:0 0 0 0 rgba(62,213,152,.6);
  animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(62,213,152,.55)}
  70%{box-shadow:0 0 0 9px rgba(62,213,152,0)}
  100%{box-shadow:0 0 0 0 rgba(62,213,152,0)}
}
.bhero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(2.5rem,6.4vw,4.6rem);color:#fff;margin:0 0 1.1rem;max-width:20ch}
/* le mot en dégradé : c'est lui que l'œil lit en premier */
.bhero h1 em{font-style:normal;background:var(--feu);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.bhero .accroche{color:rgba(255,255,255,.68);font-size:1.15rem;max-width:44ch;margin-bottom:2rem}
.bhero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:3rem}

/* les chiffres — VÉRIFIABLES, jamais décoratifs.
   ⚠️ On n'affiche ici que ce que le build sait compter (articles, catégories)
   ou ce qui est vrai par construction (la cadence, la propriété du code). Un
   chiffre inventé sur une page publique est un mensonge commercial. */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-m);overflow:hidden}
.chiffre{background:rgba(255,255,255,.02);padding:1.15rem 1.3rem;backdrop-filter:blur(4px)}
.chiffre b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.85rem;
  letter-spacing:-.03em;color:#fff;line-height:1}
.chiffre span{display:block;margin-top:.3rem;font-size:.8rem;color:rgba(255,255,255,.55)}

/* ━━━━━━━━━━━━━━ LE BANDEAU DÉFILANT ━━━━━━━━━━━━━━
   Ce que traite le blog, en mouvement continu. Deux copies côte à côte et une
   translation de -50 % : la boucle est invisible. `aria-hidden` — c'est de la
   décoration, un lecteur d'écran n'a rien à y gagner. */
/* ⚠️ Le fondu des bords est un CALQUE posé par-dessus, pas un `mask-image`.
   Deux raisons, les deux vues à l'écran : un masque sur le bandeau efface aussi
   son fond noir (la page claire ressortait par les côtés, deux taches blanches
   sous un héros sombre), et un masque sur la piste défilerait AVEC elle. */
.ruban{position:relative;background:var(--night);border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);overflow:hidden;padding:.85rem 0}
.ruban::before,.ruban::after{content:'';position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.ruban::before{left:0;background:linear-gradient(90deg,var(--night),transparent)}
.ruban::after{right:0;background:linear-gradient(270deg,var(--night),transparent)}
.ruban-piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.ruban:hover .ruban-piste{animation-play-state:paused}
.ruban-piste span{display:inline-flex;align-items:center;gap:1.6rem;padding-right:1.6rem;
  font-family:var(--font-display);font-weight:600;font-size:.92rem;letter-spacing:.02em;
  color:rgba(255,255,255,.42);white-space:nowrap}
.ruban-piste i{font-style:normal;color:var(--accent)}
@keyframes defile{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ━━━━━━━━━━━━━━ ② À LA UNE ━━━━━━━━━━━━━━ */
.section{max-width:var(--large);margin:0 auto;padding:3.6rem 5% 0}
.section-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.section-tete h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.1}
.section-tete p{color:var(--gray);font-size:.95rem;margin-top:.35rem}
.section-lien{font-size:.9rem;font-weight:700;color:var(--accent);white-space:nowrap}
.section-lien:hover{text-decoration:underline}

.une{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-card);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.une:hover{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.une-img{position:relative;min-height:340px;overflow:hidden;background:var(--night)}
.une-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transition:transform 1.1s var(--ease)}
.une:hover .une-img img{transform:scale(1.06)}
.une-img .marque{position:absolute;top:1rem;left:1rem;z-index:2}
.une-txt{padding:2.4rem 2.5rem;display:flex;flex-direction:column;justify-content:center}
.une-txt h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.12;
  font-size:clamp(1.4rem,2.6vw,2rem);margin:.9rem 0 .8rem}
.une-txt p{color:var(--gray);font-size:1rem;margin-bottom:1.4rem}
.une-txt .meta{font-size:.82rem;color:var(--lgray);margin-bottom:1.4rem}
.une-txt .lire{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--accent);font-size:.95rem}
.une-txt .lire .fl{transition:transform .3s var(--ease)}
.une:hover .lire .fl{transform:translateX(5px)}
@media(max-width:860px){
  .une{grid-template-columns:1fr}
  .une-img{min-height:220px}
  .une-txt{padding:1.8rem 1.6rem}
}

/* ━━━━━━━━━━━━━━ ③ LES FILTRES ━━━━━━━━━━━━━━
   Purement client : 15 articles ne justifient pas une page par catégorie, et
   une page par catégorie créerait des URL minces que Google n'aime pas. */
.filtres{display:flex;flex-wrap:wrap;gap:.55rem;max-width:var(--large);margin:0 auto;padding:2.6rem 5% 0}
.filtre{font-size:.86rem;font-weight:600;color:var(--gray);background:var(--white);
  border:1px solid var(--border);padding:.5rem 1rem;border-radius:var(--radius-pill);
  cursor:pointer;font-family:var(--font-text);transition:all .22s var(--ease);white-space:nowrap}
.filtre:hover{border-color:var(--ink);color:var(--ink)}
.filtre[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:#fff}
.filtre .n{opacity:.5;margin-left:.35rem;font-variant-numeric:tabular-nums}

/* ━━━━━━━━━━━━━━ ④ LA GRILLE ━━━━━━━━━━━━━━ */
.posts{max-width:var(--large);margin:0 auto;padding:1.6rem 5% 1rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.6rem;align-items:start}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-l);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:#dcdcd5}
.card-img{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--smoke)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card-img img{transform:scale(1.07)}
.card-img .marque{position:absolute;left:.8rem;top:.8rem;z-index:2}
/* ━━━ LA COUVERTURE TYPOGRAPHIQUE ━━━
   ⚠️ CE N'EST PLUS UN REPLI HONTEUX, C'EST LA BONNE RÉPONSE POUR UNE PARTIE DES
   ARTICLES. Constat du 03/08/2026, après avoir fait REGARDER les photos au
   modèle : sur un sujet logiciel (« Claude Code vs Cursor », « Opus 5 pour
   coder »), **aucune photo de banque ne montre le sujet** — il n'en existe pas.
   Le modèle refuse alors tout, et il a raison ; forcé, il part dans la métaphore
   et sort un étal de fruits pour un article sur des prix. Vu à l'écran.

   Alors on assume : de la typographie de marque, sobre, qui n'imite pas une
   illustration. C'est ce que font Vercel, Linear ou Stripe sur leurs sujets
   produit — ça se lit comme un choix, pas comme un manque.

   ⚠️ Quatre déclinaisons (.t0 à .t3), assignées d'après le slug donc STABLES :
   quatre cartes typographiques identiques à la suite ressembleraient à un
   gabarit vide. */
.couv-typo{position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.2rem;
  background:var(--night);overflow:hidden}
.couv-typo::before{content:'';position:absolute;inset:0;
  background:radial-gradient(420px circle at 82% 10%,rgba(232,74,26,.5),transparent 68%)}
.couv-typo::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 78%);
  mask-image:linear-gradient(160deg,#000,transparent 78%)}
.couv-typo.t1::before{background:radial-gradient(400px circle at 12% 88%,rgba(255,154,60,.46),transparent 66%)}
.couv-typo.t2::before{background:linear-gradient(120deg,rgba(232,74,26,.44),transparent 58%),
                                 radial-gradient(320px circle at 88% 84%,rgba(255,122,77,.32),transparent 70%)}
.couv-typo.t3::before{background:radial-gradient(460px circle at 50% -12%,rgba(255,122,77,.42),transparent 70%)}
/* le monogramme en filigrane : c'est lui qui fait « couverture de marque »
   plutôt que « bloc de texte sur fond noir » */
.couv-typo .ct-mark{position:absolute;right:-18px;bottom:-30px;width:132px;height:132px;opacity:.1;
  transform:rotate(-8deg);pointer-events:none}
.couv-typo b{position:relative;z-index:1;font-family:var(--font-display);font-weight:800;
  font-size:1.12rem;line-height:1.18;letter-spacing:-.025em;color:#fff;text-wrap:balance;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* ⚠️ La taille suit la CARTE, pas la fenêtre : la même grille sert des cartes de
   310 px (trois colonnes) et de 720 px (une seule colonne sur tablette). En
   taille fixe, le libellé était juste sur l'une et perdu dans l'autre. La ligne
   `font-size` ci-dessus reste le repli si les requêtes de conteneur manquent. */
.card-img,.une-img{container-type:inline-size}
.couv-typo b{font-size:clamp(1.05rem,6cqi,2.1rem)}
/* En une, la couverture occupe un panneau de 340 px : la même typo y serait perdue. */
.une-img .couv-typo{padding:2.2rem}
.une-img .couv-typo b{font-size:2rem;-webkit-line-clamp:4}
.une-img .couv-typo .ct-mark{width:230px;height:230px;right:-30px;bottom:-48px}
.card-txt{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex-grow:1}
.card-txt h2,.card-txt h3{font-family:var(--font-display);font-weight:700;font-size:1.16rem;
  letter-spacing:-.02em;line-height:1.25;margin:0 0 .55rem;color:var(--ink)}
.card:hover .card-txt h2,.card:hover .card-txt h3{color:var(--accent)}
.card-txt h2,.card-txt h3{transition:color .25s}
.card-txt p{font-size:.92rem;color:var(--gray);flex-grow:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-pied{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--border);
  font-size:.78rem;color:var(--lgray)}
.card-pied .fl{color:var(--accent);transition:transform .3s var(--ease)}
.card:hover .card-pied .fl{transform:translateX(5px)}
.card.masque{display:none}

/* ━━━━━━━━━━━━━━ ⑤ LE COMMERCE DANS LA GRILLE ━━━━━━━━━━━━━━
   Posé APRÈS les premières cartes, jamais avant : on donne d'abord la valeur.
   Il occupe toute la largeur de la grille pour ne pas se lire comme un article
   de plus — un bloc commercial déguisé en contenu abîme la confiance. */
.promo{grid-column:1/-1;color:#fff;border-radius:var(--radius-xl);padding:2.6rem 2.8rem;
  display:grid;grid-template-columns:1.4fr .9fr;gap:2rem;align-items:center}
.promo h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.4rem,2.6vw,1.95rem);
  letter-spacing:-.03em;line-height:1.14;color:#fff;margin:.7rem 0 .7rem;max-width:22ch}
.promo p{color:rgba(255,255,255,.7);font-size:1rem;max-width:46ch}
.promo .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.promo-preuves{display:flex;flex-direction:column;gap:.75rem}
.promo-preuves li{display:flex;align-items:flex-start;gap:.65rem;font-size:.93rem;
  color:rgba(255,255,255,.82);list-style:none}
.promo-preuves svg{width:18px;height:18px;flex-shrink:0;margin-top:.2rem;color:var(--accent-glow)}
@media(max-width:860px){.promo{grid-template-columns:1fr;padding:2rem 1.6rem}}

/* ━━━━━━━━━━━━━━ ⑥ LES RESSOURCES GRATUITES ━━━━━━━━━━━━━━
   ⚠️ Ces cartes POINTENT vers /ressources/ — elles ne refont pas de formulaire.
   La capture d'email existe déjà (ressource.html + Resend) ; en reconstruire
   une deuxième dédoublerait la livraison et les adresses. */
.ressources{background:var(--smoke);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);margin-top:4rem;padding:3.6rem 0 4rem}
.res-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;
  max-width:var(--large);margin:0 auto;padding:0 5%}
.res-carte{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.res-carte:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:rgba(232,74,26,.35)}
.res-carte b{font-family:var(--font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.res-carte p{font-size:.88rem;color:var(--gray);flex-grow:1}
.res-carte .lire{font-size:.85rem;font-weight:700;color:var(--accent);display:inline-flex;gap:.4rem;align-items:center}
.res-carte:hover .fl{transform:translateX(4px)}
.res-carte .fl{transition:transform .3s var(--ease)}

/* ━━━━━━━━━━━━━━ ⑦ LA BANDE FINALE ━━━━━━━━━━━━━━ */
.bande{color:#fff;padding:4.4rem 5%}
.bande-in{max-width:var(--large);margin:0 auto;text-align:center;position:relative}
.bande h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.06;color:#fff;margin:.8rem auto .9rem;max-width:18ch}
.bande p{color:rgba(255,255,255,.66);font-size:1.06rem;max-width:52ch;margin:0 auto 2rem}
.bande .actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.bande .rassure{margin-top:1.5rem;font-size:.84rem;color:rgba(255,255,255,.42)}

/* ━━━━━━━━━━━━━━ ⑧ L'ARTICLE — LE HÉROS ━━━━━━━━━━━━━━ */
.ahero{position:relative;color:#fff;padding:3.4rem 5% 2.6rem;overflow:hidden;background:var(--night)}
.ahero-photo{position:absolute;inset:0;z-index:0}
.ahero-photo img{width:100%;height:100%;object-fit:cover;
  /* la photo est un DÉCOR, pas le sujet : elle passe sous un voile pour que le
     titre reste lisible quelle que soit l'image trouvée. Sans ce voile, un
     titre blanc sur une photo claire devient illisible — et on ne choisit pas
     la photo à la main. */
  filter:saturate(.85) contrast(1.05);transform:scale(1.04)}
/* ⚠️ DEUX voiles superposés, et le second n'est pas décoratif. Le vertical seul
   suffisait sur une photo calme ; sur une capture de code — donc sur la moitié
   des articles — le titre blanc se posait sur du texte coloré et devenait
   illisible. Le voile HORIZONTAL noircit le côté où le texte vit et laisse la
   photo respirer à droite. On ne choisit pas les photos à la main : la mise en
   page doit tenir avec n'importe laquelle. */
.ahero-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,13,16,.94) 0%,rgba(13,13,16,.86) 38%,rgba(13,13,16,.42) 100%),
             linear-gradient(180deg,rgba(13,13,16,.55) 0%,rgba(13,13,16,.62) 45%,rgba(13,13,16,.94) 100%)}
.ahero-in{position:relative;z-index:1;max-width:var(--large);margin:0 auto}
.ahero .fil{font-size:.8rem;color:rgba(255,255,255,.5);margin-bottom:1.4rem}
.ahero .fil a:hover{color:#fff}
.ahero .fil span{color:var(--accent-glow)}
.ahero h1{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.06;
  font-size:clamp(2rem,4.8vw,3.4rem);color:#fff;margin:1rem 0 1.1rem;max-width:20ch}
.ahero .sous{color:rgba(255,255,255,.72);font-size:1.1rem;max-width:56ch;margin-bottom:1.6rem}
.ahero-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;font-size:.86rem;
  color:rgba(255,255,255,.6)}
.ahero-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.35)}
.ahero-meta .maj{color:var(--accent-glow);font-weight:600}
.ahero-meta .qui{display:inline-flex;align-items:center;gap:.55rem;color:#fff;font-weight:600}
.ahero-meta .qui svg{width:26px;height:26px;background:rgba(255,255,255,.1);border-radius:50%;padding:4px}

/* ━━━━━━━━━━━━━━ ⑨ LA MISE EN PAGE DE L'ARTICLE ━━━━━━━━━━━━━━ */
.layout{max-width:var(--large);margin:0 auto;padding:2.8rem 5% 0;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3.4rem;align-items:start}
@media(max-width:1040px){
  .layout{grid-template-columns:1fr;gap:0;max-width:var(--measure);padding-top:2.2rem}
  .flanc{display:none}      /* le sommaire collant n'a pas de place utile en mobile */
}
.article{min-width:0}

/* le chapô — la réponse en premier, c'est la règle GEO du dépôt */
.lede{font-size:1.2rem;line-height:1.58;color:var(--ink);font-weight:500;
  padding:1.2rem 0 1.4rem;border-bottom:1px solid var(--border);margin-bottom:1.8rem}
.lede strong{font-weight:700}

/* prose */
.prose p{margin:0 0 1.2rem;font-size:1.05rem;color:#26262b}
.prose h2{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;font-size:1.7rem;
  line-height:1.18;margin:2.8rem 0 1rem;color:var(--ink);scroll-margin-top:110px;position:relative}
.prose h2::before{content:'';position:absolute;left:-1.1rem;top:.42em;width:5px;height:1.05em;
  border-radius:3px;background:var(--feu);opacity:0;transform:scaleY(.3);transform-origin:top;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.prose h2.vu::before{opacity:1;transform:scaleY(1)}
@media(max-width:520px){.prose h2::before{display:none}}
.prose h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;font-size:1.26rem;
  margin:2rem 0 .7rem;color:var(--ink);scroll-margin-top:110px}
.prose ul{margin:0 0 1.4rem;padding-left:1.2rem;list-style:none}
.prose li{position:relative;margin:0 0 .65rem;padding-left:1.15rem;font-size:1.04rem;color:#26262b}
.prose li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;
  background:var(--feu)}
.prose strong{font-weight:700;color:var(--ink)}
.prose a{color:var(--accent);font-weight:600;
  background-image:linear-gradient(var(--accent),var(--accent));background-size:100% 1px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s var(--ease)}
.prose a:hover{background-size:100% 2px}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--smoke);border:1px solid var(--border);padding:.1em .4em;border-radius:5px}
.prose blockquote{position:relative;margin:1.9rem 0;padding:1.4rem 1.5rem 1.4rem 3.2rem;
  background:linear-gradient(135deg,#fff,var(--smoke));border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:0 var(--radius-m) var(--radius-m) 0;
  font-size:1.06rem;color:#2a2a30;font-weight:500}
.prose blockquote::before{content:'”';position:absolute;left:1rem;top:.35em;
  font-family:var(--font-display);font-size:3.2rem;line-height:1;color:var(--accent);opacity:.32}
.prose blockquote p:last-child{margin-bottom:0}

/* tableaux — structure la mieux extraite par Google sur les sujets chiffrés,
   donc jamais sacrifiée au style (hiérarchie éditoriale du dépôt). */
.prose .table-wrap{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--border);
  border-radius:var(--radius-m);background:var(--white)}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.prose th,.prose td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--border)}
.prose thead th{font-family:var(--font-display);font-weight:700;color:#fff;background:var(--night);
  font-size:.82rem;letter-spacing:.03em;text-transform:uppercase}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody tr:nth-child(even){background:#FBFBF9}
.prose tbody tr:hover{background:rgba(232,74,26,.04)}

/* schémas générés */
.diagram{margin:2.2rem 0;padding:1.3rem;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-l);overflow-x:auto;box-shadow:var(--shadow-card)}
.diagram svg{display:block;min-width:520px}
.diagram figcaption{margin-top:.9rem;font-size:.85rem;color:var(--lgray);text-align:center}

/* le crédit photo — obligatoire dès que la licence l'exige */
.credit-photo{font-size:.76rem;color:var(--lgray);margin:2.4rem 0 0;padding-top:1rem;
  border-top:1px solid var(--border)}
.credit-photo a{color:var(--gray);text-decoration:underline}

/* ━━━━━━━━━━━━━━ ⑩ L'ENCART COMMERCIAL DANS L'ARTICLE ━━━━━━━━━━━━━━
   Posé après le 2ᵉ H2 par le build : assez loin pour que le lecteur ait reçu
   quelque chose, assez tôt pour être vu. */
.encart{position:relative;margin:2.6rem 0;padding:1.6rem 1.7rem;border-radius:var(--radius-l);
  background:linear-gradient(135deg,rgba(232,74,26,.07),rgba(255,154,60,.05));
  border:1px solid rgba(232,74,26,.22);display:flex;gap:1.2rem;align-items:flex-start}
.encart-ic{flex-shrink:0;width:42px;height:42px;border-radius:12px;background:var(--feu);
  display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(232,74,26,.6)}
.encart-ic svg{width:21px;height:21px;color:#fff}
.encart b{display:block;font-family:var(--font-display);font-size:1.06rem;font-weight:700;
  letter-spacing:-.015em;margin-bottom:.35rem}
.encart p{font-size:.94rem;color:#3a3a40;margin:0 0 .8rem}
.encart .lire{font-size:.9rem;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:.4rem}
.encart .lire:hover .fl{transform:translateX(4px)}
.encart .fl{transition:transform .3s var(--ease)}
@media(max-width:560px){.encart{flex-direction:column;gap:.9rem}}

/* ━━━━━━━━━━━━━━ ⑪ LE FLANC COLLANT ━━━━━━━━━━━━━━ */
.flanc{position:sticky;top:100px;display:flex;flex-direction:column;gap:1.4rem}
.somm{border-left:2px solid var(--border);padding-left:1rem}
.somm b{display:block;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lgray);margin-bottom:.8rem}
.somm a{display:block;font-size:.88rem;line-height:1.4;color:var(--gray);padding:.35rem 0;
  transition:color .25s,transform .25s var(--ease)}
.somm a:hover{color:var(--ink);transform:translateX(3px)}
.somm a.actif{color:var(--accent);font-weight:600}
.flanc-cta{background:var(--night);border-radius:var(--radius-l);padding:1.5rem;color:#fff;
  position:relative;overflow:hidden;isolation:isolate}
.flanc-cta::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(220px circle at 90% 0%,rgba(232,74,26,.38),transparent 70%)}
.flanc-cta b{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:700;
  line-height:1.25;margin:.55rem 0 .5rem}
.flanc-cta p{font-size:.86rem;color:rgba(255,255,255,.6);margin-bottom:1rem}
.flanc-cta .btn{width:100%;justify-content:center;font-size:.88rem;padding:.7rem 1rem}
.flanc-part{display:flex;align-items:center;gap:.5rem}
.flanc-part span{font-size:.76rem;color:var(--lgray);margin-right:.15rem}
.flanc-part a,.flanc-part button{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);
  background:var(--white);display:grid;place-items:center;color:var(--gray);cursor:pointer;
  transition:all .22s var(--ease)}
.flanc-part a:hover,.flanc-part button:hover{color:#fff;background:var(--night);border-color:var(--night);transform:translateY(-2px)}
.flanc-part svg{width:16px;height:16px}

/* ⚠️ TOUT CE QUI SUIT L'ARTICLE RESTE DANS SA COLONNE.
   Première version : l'article était à gauche (grille à deux colonnes) et la
   FAQ, la signature et le CTA repartaient centrés dans la page. À la lecture,
   le texte sautait de 15 cm vers la droite au milieu de la page — le genre de
   rupture qu'on ne sait pas nommer mais qui fait « pas fini ». On rejoue donc
   la même géométrie : largeur totale de la grille, moins le flanc et sa gouttière.
   Sous 1040 px le flanc n'existe plus, la contrainte tombe d'elle-même. */
.faq,.signature,.cta-box{max-width:var(--large);margin-left:auto;margin-right:auto;padding-left:5%;padding-right:5%}
@media(min-width:1041px){
  .faq>*,.signature-in,.cta-inner{max-width:calc(100% - 300px - 3.4rem)}
}
@media(max-width:1040px){
  .faq,.signature,.cta-box{max-width:var(--measure)}
}

/* ━━━━━━━━━━━━━━ ⑫ FAQ ━━━━━━━━━━━━━━ */
.faq{margin:3rem auto 0}
.faq h2{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.025em;margin-bottom:1.3rem}
.faq details{border:1px solid var(--border);background:var(--white);border-radius:var(--radius-m);
  padding:1rem 1.2rem;margin-bottom:.7rem;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:rgba(232,74,26,.3);box-shadow:var(--shadow-card)}
.faq summary{font-weight:600;font-size:1.03rem;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;color:var(--ink);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent);font-size:1.5rem;line-height:1;flex-shrink:0;
  transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:'+';transform:rotate(45deg)}
.faq details p{margin:.85rem 0 0;color:#3a3a40;font-size:1rem}
.faq details[open] p{animation:ouvre .35s var(--ease-out)}
@keyframes ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ━━━━━━━━━━━━━━ ⑬ QUI ÉCRIT ━━━━━━━━━━━━━━
   Une signature d'organisation, pas un auteur inventé : le blog est produit
   par le studio, et le dire est un argument commercial, pas un aveu. */
.signature{margin:3rem auto 0}
.signature-in{display:flex;gap:1.3rem;align-items:flex-start;background:var(--white);
  border:1px solid var(--border);border-radius:var(--radius-l);padding:1.6rem}
.signature-in .logo{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:var(--night);
  display:grid;place-items:center}
.signature-in .logo svg{width:30px;height:30px}
.signature-in b{font-family:var(--font-display);font-size:1.06rem;font-weight:700}
.signature-in p{font-size:.93rem;color:var(--gray);margin:.4rem 0 .9rem}
.signature-in .liens{display:flex;flex-wrap:wrap;gap:.6rem}
.signature-in .liens a{font-size:.85rem;font-weight:600;color:var(--ink);border:1px solid var(--border);
  padding:.45rem .9rem;border-radius:var(--radius-pill);transition:all .22s var(--ease)}
.signature-in .liens a:hover{background:var(--night);color:#fff;border-color:var(--night)}

/* ━━━━━━━━━━━━━━ ⑭ LE CTA FINAL DE L'ARTICLE ━━━━━━━━━━━━━━ */
.cta-box{margin:3rem auto 0}
.cta-inner{border-radius:var(--radius-xl);padding:2.8rem;position:relative;overflow:hidden;
  color:#fff;isolation:isolate}
.cta-inner h3{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.1rem);
  letter-spacing:-.03em;line-height:1.12;color:#fff;margin:.6rem 0 .7rem;max-width:20ch}
.cta-inner p{color:rgba(255,255,255,.68);margin-bottom:1.6rem;max-width:48ch}
.cta-inner .actions{display:flex;flex-wrap:wrap;gap:.75rem}
.cta-inner .rassure{margin-top:1.2rem;font-size:.82rem;color:rgba(255,255,255,.4)}

/* ━━━━━━━━━━━━━━ ⑮ LIRE AUSSI ━━━━━━━━━━━━━━ */
.aussi{max-width:var(--large);margin:0 auto;padding:4rem 5% 1rem}
.aussi h2{font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.025em;
  margin-bottom:1.4rem}
.aussi .posts{padding:0;max-width:none}

/* ━━━━━━━━━━━━━━ PIED DE PAGE ━━━━━━━━━━━━━━ */
.footer{background:var(--night);color:rgba(255,255,255,.5);padding:3rem 5%;margin-top:4rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;
  border-top:1px solid rgba(255,255,255,.07)}
.footer .brand .wm{font-size:1.15rem;color:#fff}
.ft-links{display:flex;flex-wrap:wrap;gap:1.4rem;list-style:none;font-size:.88rem}
.ft-links a{transition:color .2s}
.ft-links a:hover{color:#fff}
.ft-copy{font-size:.8rem;color:rgba(255,255,255,.3)}

/* ━━━━━━━━━━━━━━ RESPIRATION MOBILE ━━━━━━━━━━━━━━ */
@media(max-width:640px){
  .bhero{padding:3.4rem 5% 2.6rem}
  .bhero .actions{gap:.6rem}
  .bhero .actions .btn{width:100%;justify-content:center}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .section{padding-top:2.8rem}
  .posts{grid-template-columns:1fr;gap:1.2rem}
  .cta-inner{padding:1.9rem 1.5rem}
  .cta-inner .actions .btn{width:100%;justify-content:center}
  .signature-in{flex-direction:column}
  .footer{flex-direction:column;align-items:flex-start;text-align:left}
}