/* ===== Article page-specific ===== */
  .read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--orange);z-index:70;transition:width .1s linear}

  .article-hero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 100% -20%,#eef3fb 0,var(--white) 60%);border-bottom:1px solid var(--border);padding:var(--space-12) 0 var(--space-10)}
  .article-hero__topo{position:absolute;top:0;right:0;width:55%;height:100%;opacity:.5;pointer-events:none}
  .article-head{max-width:760px;position:relative}
  .article-head .breadcrumbs{margin-bottom:var(--space-6)}
  .article-head h1{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,4.4vw,var(--text-5xl));line-height:1.04;letter-spacing:-.02em;color:var(--navy);margin:var(--space-4) 0}
  .article-head .dek{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--neutral-600);max-width:60ch}
  .article-byline{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-8);flex-wrap:wrap}
  .article-byline .av{width:44px;height:44px;border-radius:50%;background:var(--navy-500);color:#fff;display:grid;place-items:center;font-family:var(--font-data);font-weight:600;font-size:var(--text-sm)}
  .article-byline .who{font-size:var(--text-sm);color:var(--navy);font-weight:600}
  .article-byline .meta{font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-500);letter-spacing:.03em}

  /* cover */
  .article-cover{max-width:980px;margin:calc(-1 * var(--space-6)) auto var(--space-16);position:relative;z-index:2;padding:0 var(--space-6)}
  .article-cover__inner{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:var(--navy-800);box-shadow:var(--shadow-xl)}
  .article-cover .gb{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.13) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(90% 90% at 70% 20%,#000,transparent)}
  .article-cover svg{position:absolute;inset:0;width:100%;height:100%}

  /* prose */
  .prose{max-width:720px;margin:0 auto;padding:0 var(--space-6)}
  .prose>*{margin-bottom:var(--space-6)}
  .prose .lead{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.4;color:var(--navy-700);font-weight:400}
  .prose p{font-size:var(--text-md);line-height:1.75;color:var(--ink)}
  .prose h2{font-family:var(--font-display);font-weight:500;font-size:var(--text-2xl);line-height:1.15;color:var(--navy);letter-spacing:-.01em;margin-top:var(--space-12);scroll-margin-top:90px}
  .prose h2 .idx{font-family:var(--font-data);font-size:var(--text-sm);color:var(--orange);font-weight:700;margin-right:10px;vertical-align:middle}
  /* Même scroll-margin-top que h2 : le sommaire peut viser un titre de niveau 3,
     qui doit s'arrêter sous l'en-tête collant et non derrière lui. */
  .prose h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);color:var(--navy);margin-top:var(--space-8);scroll-margin-top:90px}
  .prose a{color:var(--blue-500);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue-200)}
  .prose a:hover{text-decoration-color:var(--blue-500)}
  .prose strong{color:var(--navy-700);font-weight:600}
  .prose blockquote{margin:var(--space-10) 0;padding:var(--space-2) 0 var(--space-2) var(--space-6);border-left:3px solid var(--orange);font-family:var(--font-display);font-style:italic;font-size:var(--text-2xl);line-height:1.3;color:var(--navy);letter-spacing:-.01em}

  /* callout */
  .callout{background:var(--navy-900);color:#fff;border-radius:var(--radius-md);padding:var(--space-8);position:relative;overflow:hidden;margin:var(--space-10) 0}
  .callout .gridc{position:absolute;inset:0;opacity:.4;background-image:linear-gradient(rgba(0,159,227,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.12) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(90% 90% at 90% 0,#000,transparent)}
  .callout .n{position:relative;font-family:var(--font-display);font-size:var(--text-4xl);line-height:1;letter-spacing:-.02em}
  .callout .n b{color:var(--orange);font-weight:400}
  .callout p{position:relative;color:var(--cyan-100);font-size:var(--text-sm);margin:var(--space-3) 0 0;line-height:var(--leading-relaxed)}

  /* takeaways */
  .takeaways{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--radius-md);padding:var(--space-8);margin:var(--space-10) 0}
  .takeaways h3{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700);margin-bottom:var(--space-4)}
  .takeaways ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-3)}
  .takeaways li{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--text-base);color:var(--navy-700);line-height:1.5}
  .takeaways .ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue-500);color:#fff;display:grid;place-items:center;margin-top:1px}
  .takeaways .ck svg{width:12px;height:12px;stroke-width:3}

  /* tags + share */
  .article-foot{max-width:720px;margin:var(--space-12) auto 0;padding:var(--space-8) var(--space-6) 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap}
  .tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
  .share{display:flex;gap:var(--space-2);align-items:center}
  .share span{font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-500);text-transform:uppercase;letter-spacing:.08em}
  /* Base mobile : 44x44, cible tactile minimale. Le diametre du design
     (38 px) revient au palier 900. Seule la zone change, pas l'icone. */
  .share a{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;color:var(--navy);transition:all var(--dur-base) var(--ease-out)}
  .share a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  .share a svg{width:16px;height:16px}

  /* author card */
  .author{max-width:720px;margin:var(--space-12) auto 0;padding:0 var(--space-6)}
  .author__inner{display:flex;flex-direction:column;text-align:center;gap:var(--space-6);align-items:center;background:var(--neutral-50);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)}
  /* Avatar : la pastille d'initiales et le Gravatar occupent la MÊME case
     (inset:0). Le Gravatar « blank » est transparent tant qu'aucune image
     réelle n'existe → les initiales restent visibles ; dès qu'un Gravatar est
     présent, l'image opaque les recouvre. Repli sans requête distante. */
  .author__av{position:relative;flex:none;width:88px;height:88px}
  .author__av .av{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;background:var(--navy-500);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:.02em}
  .author__av .author__img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
  .author__body{display:flex;flex-direction:column;gap:6px;min-width:0}
  .author h4{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy)}
  .author__role{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.05em;text-transform:uppercase;color:var(--blue-600)}
  .author p{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)}
  /* Rangée d'actions : lien « tous les articles » + réseaux. Centrée sur
     mobile, alignée à gauche dès que la carte passe en ligne (palier 640). */
  .author__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3) var(--space-5);margin-top:var(--space-2)}
  .author__all{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);font-weight:600;color:var(--blue-500);text-decoration:none}
  .author__all svg{width:14px;height:14px;transition:transform var(--dur-base) var(--ease-out)}
  .author__all:hover{color:var(--blue-700)}
  .author__all:hover svg{transform:translateX(3px)}
  .author__socials{display:inline-flex;gap:var(--space-2)}
  .author__socials a{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border);display:grid;place-items:center;color:var(--navy);transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
  .author__socials a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  .author__socials a svg{width:15px;height:15px}

  /* related */
  /* auto-fill : les articles liés (même catégorie) sont un contenu piloté par
     le back-office, leur nombre peut tomber à 1. Avec auto-fit, l'unique
     carte aurait étiré .post__cover (aspect-ratio 16/10) sur toute la
     largeur du conteneur — même piège que .team dans about.css. */
  .related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--space-6);margin-top:var(--space-10)}
  .post{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#fff;transition:box-shadow var(--dur-base),transform var(--dur-base),border-color var(--dur-base)}
  .post:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:transparent}
  .post__cover{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--navy-800)}
  .post__cover .gb{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.14) 1px,transparent 1px);background-size:26px 26px}
  .post__cover svg{position:absolute;inset:0;width:100%;height:100%}
  .post__cat{position:absolute;top:12px;left:12px;z-index:2}
  .post__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
  .post__date{font-family:var(--font-data);font-size:var(--text-xs);color:var(--neutral-500);letter-spacing:.04em}
  .post__title{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);line-height:1.25;transition:color var(--dur-base)}
  .post:hover .post__title{color:var(--blue-600)}
  .post__more{margin-top:auto;font-size:var(--text-sm);font-weight:600;color:var(--blue-500)}

  /* ---- Composition article + colonne latérale ----
     Sans widget assigné, single.php n'émet pas la classe --sidebar : la grille
     ne s'active jamais, .prose / .article-foot / .author gardent leur centrage
     propre et l'article occupe toute la largeur (pas de colonne rétrécie à
     côté d'un vide). En dessous du palier 1000 la colonne reste dans le flux,
     donc empilée APRÈS le contenu. */
  .article-layout--sidebar .sidebar-main{max-width:720px;margin:var(--space-12) auto 0;padding:0 var(--space-6)}

  /* ---- Paliers (mobile-first) ----
     .article-head h1 garde son clamp(30px,4.4vw,--text-5xl) : a 1200 px il
     vaut 52,8 px la ou --text-5xl en vaut 60. Aucun token ne coincide. */
  @media(min-width:640px){
    .article-cover{margin-top:calc(-1 * var(--space-10))}
    .article-cover__inner{aspect-ratio:16/7}
    .author__inner{flex-direction:row;text-align:left;align-items:flex-start}
    .author__actions{justify-content:flex-start}
  }
  @media(min-width:900px){
    .share a{width:38px;height:38px}
    /* ---- Espacement CTA → commentaires ----
       C'est à partir de 900 que .section passe à --space-24 : le bandeau CTA
       (.section--tight, --space-16 en bas) et le bloc des commentaires
       additionnaient alors leurs deux marges, d'où le grand vide (186 px à
       1200). On ne réduit que la marge HAUTE du second bloc : la respiration
       reste (130 px), elle n'est plus doublée. Sous 900 la règle ne s'applique
       pas — --space-10 (40 px fixe) y serait PLUS grand que --space-16
       (32 px à 360), la « correction » aggraverait l'écart. */
    .section--tight + .section{padding-top:var(--space-10)}
  }
  /* 1000 = seuil de bascule à deux colonnes du thème (~980). Le forcer à 1200
     laisserait les portables sur une seule colonne inutilement étroite.
     Colonnes fluides (1fr) plutôt que 720px figés : à 1000 px de large la
     somme 720+300+gouttière déborderait. */
  @media(min-width:1000px){
    /* La grille occupe TOUTE la largeur du site (--container, comme .wrap) :
       son bord gauche s'aligne sous le titre de l'article et le header, son
       bord droit (la sidebar) atteint l'extrémité droite du site — plus de
       bloc rétréci flottant au centre avec du vide de chaque côté. */
    .article-layout--sidebar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:var(--space-12);align-items:start;max-width:var(--container);margin:0 auto;padding:0 var(--space-6)}
    .article-layout--sidebar .article-main{min-width:0}
    /* Les blocs renoncent à leur centrage — la grille les positionne — mais la
       colonne de LECTURE reste plafonnée (~760 px, la mesure lisible), alignée
       à gauche sous le titre. Sans ce plafond, la prose remplirait toute la
       colonne principale élargie (~850 px) et deviendrait trop large à lire.
       Le padding-haut de .article-foot (filet de séparation) est préservé. */
    .article-layout--sidebar .prose,
    .article-layout--sidebar .author{max-width:760px;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
    .article-layout--sidebar .article-foot{max-width:760px;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
    /* Collante, sous l'en-tête lui-même collant (~76 px) : même repère que le
       scroll-margin-top des titres de .prose. */
    .article-layout--sidebar .sidebar-main{max-width:none;margin:0;padding:0;position:sticky;top:92px}
  }