/* faridsaid.com v3 : feuille du blog (index blog.html et en/blog.html, les 6 articles blog/*.html et en/blog/*.html), chargee APRES
   css/main.css par un <link> separe. Dependance : main.css fournit les tokens de la racine (couleurs, grille, gaps, rayons, ressorts,
   police), le reset, le chrome (logo, switch, menu, carte penchee, son), les transitions fade / project / project-fade / video-fade,
   .solid-button, .list-wrapper, .cursor-wrapper, .project-hover, .about-marquee, .about-footer, .controls et le bloc mouvement reduit.
   Cette feuille ETEND la v3 : nouveaux selecteurs et surcharges scopees main.blog / main.article / .blog-* / .article-*, aucune
   redeclaration de token de la racine. Les seuls tokens declares ici sont --blog-measure et les --dg-* des diagrammes, poses sur
   main.article (jamais les deux variables du pied d'about que main.css laisse volontairement indefinies).
   Ordre des blocs : ordre de peinture et tokens, lien texte au trait dessine, index, article, pilule de controle du lecteur, mouvement
   reduit (additif au bloc de main.css). Unites : 1rem = 1px (rem trick de main.css), toute valeur en rem se lit en pixels CSS.
   Ecriture : proprietes en ordre alphabetique, une regle par ligne, tout survol sous (hover:hover) and (pointer:fine), mobile a 900 et
   420, mesure de lecture a 1400. */

/* ---------- 1 ordre de peinture et tokens : svg.backdrop est fixed z 0 et passe devant tout main non positionne */
main.blog,main.article{position:relative;width:100%;z-index:1}
/* mesure de lecture : 6 colonnes (682 px a 1440, environ 62 caracteres a 20rem), 8 colonnes sous 1400 (637 px a 1024) ; sous 900 le
   min() de .article-body ramene a la pleine largeur moins les marges */
main.article{--blog-measure:calc(var(--grid-column)*6 + var(--grid-gutter)*5)}
@media (max-width:1400px){main.article{--blog-measure:calc(var(--grid-column)*8 + var(--grid-gutter)*7)}}
/* diagrammes SVG des articles : encre = --color-white, accent = cyan des cartes, legacy gris, erreur corail (COLORS de cards.js) */
main.article{--dg-ink:#fafafa;--dg-muted:rgba(250,250,250,.6);--dg-accent:#12d8ff;--dg-accent-soft:#7cffd0;--dg-accent-fill:rgba(18,216,255,.12);--dg-legacy:#7a7a7a;--dg-legacy-fill:rgba(122,122,122,.1);--dg-err:#f06a3c;--dg-err-fill:rgba(240,106,60,.12)}

/* ---------- 2 lien texte au trait dessine (le seul survol de lien texte de la reference : .about-footer .credits a de main.css) */
.blog-link{color:inherit;position:relative}
.blog-link:before{background-color:var(--color-white);bottom:-2rem;content:"";height:.5rem;position:absolute;transform:scaleX(0);transform-origin:right;transition:transform .15s ease-in-out;width:100%;z-index:-1}
@media screen and (hover:hover) and (pointer:fine){.blog-link:hover:before{transform:scaleX(1);transform-origin:left}}

/* ---------- 3 index : la home sans WebGL (bande de cartes d'about en vue cartes, pile de titres de la home en vue liste) */
/* une vue = un ecran centre ; la vue inactive n'existe que pour les navigateurs sans JS (scripting:none) */
main.blog .blog-view{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding-block:calc(var(--grid-margin) + 64rem);width:100%}
/* regle double (§12.2) : la requete scripting ET la classe html.js posee par blog.js en premiere instruction, pour les navigateurs qui
   ignorent la requete */
@media (scripting:enabled){main.blog .blog-view:not(.is-active){display:none}}
html.js main.blog .blog-view:not(.is-active){display:none}
.blog-tagline{font-size:18rem;font-weight:400;letter-spacing:-.02em;line-height:1.4;margin:0 var(--grid-margin) var(--gap-l);max-width:800px;opacity:.6;text-align:center;text-wrap:balance}
/* bande de cartes : 9 cartes par rangee (~3 560 px) a ~92 px/s ; en pause sous le pointeur (elle EST la navigation ici) */
main.blog .blog-marquee .row{animation-duration:39s}
@media screen and (hover:hover) and (pointer:fine){main.blog .blog-marquee:has(.thumbnail:hover) .row{animation-play-state:paused}}
/* liste : la vue liste de la home centree dans son ecran */
main.blog .list-wrapper{justify-content:center;margin-block:0;min-height:0;padding-block:0}
.blog-row-title{display:block}
.blog-row-lead{display:block;font-size:18rem;font-weight:400;letter-spacing:-.02em;line-height:1.3;margin:8rem auto 0;max-width:800px;opacity:.6;text-wrap:balance}
.blog-row-meta{display:block;font-size:14rem;font-weight:400;letter-spacing:-.02em;line-height:1;margin-top:8rem;opacity:.6}
.blog-row-tags{text-transform:lowercase}
/* carte de survol des cartes (ProjectHover de la spirale) : vignette 48rem + titre court + meta 14rem */
.project-hover .meta{font-size:14rem;opacity:.6;white-space:nowrap}
@media screen and (max-width:900px){.project-hover .meta{display:none}}
/* pied : les credits portent la navigation de repli, ils restent visibles sous 900 (main.css les masque sur about) ; .about-footer est
   une rangee flex, remis en colonne pour que les credits statiques passent SOUS les socials et non a cote */
@media screen and (max-width:900px){.blog-footer{flex-direction:column}.blog-footer .credits{display:block;line-height:1.9;margin-top:var(--gap-l);padding:0 var(--grid-margin);position:static}.blog-footer .credits a{white-space:nowrap}}

/* ---------- 4 article : une ligne de liste ouverte (pilule retour, etiquette de la carte, titre 60rem, meta 18rem, carte 16/9) puis une
   colonne de lecture sobre a 20rem / 1.5 en --color-grey sur --blog-measure ; en-tete, lire aussi, auteur et pied prennent 12 colonnes */
.article-page{position:relative;width:100%}
.article-header{align-items:center;display:flex;flex-direction:column;gap:var(--gap-m);padding:calc(var(--grid-margin) + 64rem + var(--gap-l)) var(--grid-margin) var(--gap-l);text-align:center}
/* pilule a lettres de main.css (fond blanc, point de 6rem), cablee par initSolidButtons ; elle garde sa largeur dans la colonne flex */
.article-back{flex-shrink:0}
/* etiquette de la carte : disque --color-pop-green 6rem puis "2026 • ecrit" */
.article-kicker{align-items:center;display:flex;font-size:14rem;font-weight:500;gap:8rem;line-height:1;margin:0;opacity:.8}
.article-kicker:before{background-color:var(--color-pop-green);border-radius:50%;content:"";display:block;height:6rem;width:6rem}
.article-title{font-size:60rem;font-weight:500;letter-spacing:-.04em;line-height:1;margin:0;max-width:calc(var(--grid-column)*12 + var(--grid-gutter)*11);text-wrap:balance}
.article-meta{display:flex;flex-wrap:wrap;font-size:18rem;font-weight:400;gap:6rem 0;justify-content:center;letter-spacing:-.04em;line-height:1;opacity:.6}
.article-meta-item+.article-meta-item:before{content:"•";margin:0 8rem}
/* compteur : vide et masque tant que blog-stats.js n'a rien ecrit (le separateur disparait avec lui), entre en stats-in a l'arrivee du texte */
#blog-stats:empty{display:none}
#blog-stats:not(:empty){animation:stats-in .35s ease;display:inline-block}
@keyframes stats-in{from{opacity:0;transform:translateY(4rem)}to{opacity:1;transform:none}}
.article-tags{display:flex;flex-wrap:wrap;font-size:14rem;font-weight:400;gap:6rem 0;justify-content:center;letter-spacing:-.04em;line-height:1;margin:0;opacity:.6;text-transform:lowercase}
.article-tag+.article-tag:before{content:"•";margin:0 8rem}
/* carte de l'article (§12.1) : la meme image que dans la spirale, la bande et la liste ; le zoom des vignettes d'about au survol, sans
   scrim ni pilule (ce n'est pas un lien) */
.article-card{aspect-ratio:16/9;border-radius:var(--radius-xl);margin:var(--gap-m) auto 0;max-width:calc(var(--grid-column)*8 + var(--grid-gutter)*7);overflow:hidden;width:100%}
.article-card img{display:block;height:100%;object-fit:cover;transition:transform .5s var(--ease-spring);width:100%}
@media screen and (hover:hover) and (pointer:fine){.article-card:hover img{transform:scale(1.03)}}
.article-lang{font-size:14rem;font-weight:400;line-height:1;margin:0;opacity:.6}
/* corps : une seule famille, pas d'italique (em en 500, Manrope n'a pas d'oblique), code en pilule --color-white20 dans la meme police */
.article-body{color:var(--color-grey);font-size:20rem;font-weight:400;letter-spacing:-.02em;line-height:1.5;margin:var(--gap-l) auto 0;width:min(100% - var(--grid-margin)*2,var(--blog-measure))}
.article-body p{margin:0 0 var(--gap-20)}
.article-body h2{color:var(--color-white);font-size:32rem;font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:var(--gap-l) 0 var(--gap-20);scroll-margin-top:calc(var(--grid-margin) + 64rem + 30rem);text-wrap:balance}
.article-body h3{color:var(--color-white);font-size:24rem;font-weight:500;letter-spacing:-.04em;line-height:1.15;margin:var(--gap-45) 0 var(--gap-s)}
.article-body strong{color:var(--color-white);font-weight:700}
.article-body em{color:var(--color-white);font-style:normal;font-weight:500}
.article-body code{background:var(--color-white20);border-radius:var(--radius-xs);color:var(--color-white);font-family:inherit;font-size:.92em;font-weight:500;letter-spacing:0;padding:2rem 6rem;white-space:nowrap}
.article-body ul{margin:0 0 var(--gap-20);padding:0}
.article-body li{margin-bottom:var(--gap-xs);padding-left:24rem;position:relative}
.article-body li:before{background-color:var(--color-white);border-radius:50%;content:"";height:6rem;left:0;position:absolute;top:12rem;width:6rem}
/* citation revelee mot a mot (les .word sont poses par JS, comme l'intro d'about) */
.article-pullquote{color:var(--color-white);font-size:32rem;font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:var(--gap-l) auto;max-width:800px;text-align:center;text-wrap:balance}
.article-pullquote .word{display:inline-block;will-change:opacity}
/* carte blanche de resultat : l'encre sombre des pilules */
.article-result{background-color:var(--color-white);border-radius:var(--radius-xl);color:var(--color-bg-dark);line-height:1.5;margin:var(--gap-m) 0 var(--gap-l);padding:var(--gap-m)}
.article-result strong{color:inherit}
/* diagramme : carte --color-bg-grey ; le SVG garde 480px de large minimum et defile dans sa carte (data-lenis-prevent), jamais la page */
.article-diagram{background-color:var(--color-bg-grey);border-radius:var(--radius-xl);margin:var(--gap-l) 0;overflow-x:auto;padding:var(--gap-m) var(--gap-20) var(--gap-20)}
.article-diagram svg{display:block;height:auto;min-width:480px;overflow:visible;width:100%}
.article-diagram figcaption{color:var(--color-white);font-size:14rem;font-weight:400;line-height:1.4;margin-top:var(--gap-s);opacity:.6;text-align:center}
/* .is-pending n'existe que par JS (figure sous le viewport au bootstrap), retiree par project-fade au premier passage a l'ecran */
.article-diagram.is-pending{opacity:0}
/* classes des diagrammes (union des deux anciens <style> inline, tokens --dg-* ci-dessus, une seule famille en 500) */
.dg-t{fill:var(--dg-ink);font-family:var(--main-font);font-size:13px;font-weight:500}
.dg-s{fill:var(--dg-muted);font-family:var(--main-font);font-size:11px;font-weight:500}
.dg-node,.dg-layer,.dg-store,.dg-live{fill:var(--dg-accent-fill);stroke:var(--dg-accent);stroke-width:1.5}
.dg-legacy,.dg-storedead{fill:var(--dg-legacy-fill);stroke:var(--dg-legacy);stroke-width:1.5}
.dg-vm{fill:var(--dg-accent)}
.dg-vm-legacy{fill:var(--dg-legacy)}
.dg-flow{animation:dgflow 1s linear infinite;fill:none;stroke:var(--dg-accent);stroke-dasharray:7 7;stroke-width:2}
.dg-flow-legacy{fill:none;stroke:var(--dg-legacy);stroke-width:2}
.dg-packet{fill:var(--dg-ink)}
.dg-ok{fill:var(--dg-accent);font-family:var(--main-font);font-size:15px;font-weight:700}
.dg-err{fill:var(--dg-err);font-family:var(--main-font);font-size:15px;font-weight:700}
.dg-errline{fill:none;opacity:.85;stroke:var(--dg-err);stroke-dasharray:5 4;stroke-width:2}
.dg-red{fill:var(--dg-err-fill);stroke:var(--dg-err);stroke-width:1.5}
.dg-redflow{animation:dgflow 1s linear infinite;fill:none;stroke:var(--dg-err);stroke-dasharray:7 6;stroke-width:2.5}
.dg-pulse{animation:dgpulse 2.4s ease-in-out infinite}
@keyframes dgflow{to{stroke-dashoffset:-14}}
@keyframes dgpulse{0%,100%{opacity:.45}50%{opacity:1}}
/* animations vivantes seulement a l'ecran : .is-offscreen posee par l'IntersectionObserver de blog.js */
.article-diagram.is-offscreen .dg-flow,.article-diagram.is-offscreen .dg-redflow,.article-diagram.is-offscreen .dg-pulse{animation-play-state:paused}
/* lire aussi : la vue liste de la home, sans son ecran */
.article-readnext{padding:var(--gap-xxl) 0 var(--gap-l);text-align:center}
.article-readnext-title{color:var(--color-white);font-size:18rem;font-weight:500;margin:0 0 var(--gap-m);opacity:.6}
main.article .list-wrapper{margin-block:0;min-height:0;padding-block:0}
/* auteur : la bio deja publiee, avatar rond 64rem, pilule linkedin et deux liens au trait */
.article-author{align-items:center;display:flex;flex-direction:column;gap:var(--gap-s);padding:var(--gap-l) var(--grid-margin);text-align:center}
.article-author-avatar{border-radius:50%;height:64rem;width:64rem}
.article-author-name{font-size:18rem;font-weight:500;margin:0}
.article-author-bio{color:var(--color-grey);font-size:18rem;font-weight:400;line-height:1.4;margin:0;max-width:480px;opacity:.8}
.article-author-links{align-items:center;display:flex;flex-wrap:wrap;font-size:14rem;gap:var(--gap-20);justify-content:center}
@media screen and (max-width:900px){
  .article-title{font-size:40rem}
  .article-pullquote{font-size:28rem}
  .article-card{border-radius:var(--radius-l)}
}
@media screen and (max-width:420px){.article-title{font-size:32rem}}

/* ---------- 5 pilule de controle du lecteur (§5.8) : .controls / .inner / .button viennent de main.css (lecteur) ; ici fixe, dans le
   contexte de main (z 1), donc sous le chrome et sous l'overlay du menu ; creee par blog.js, hidden au depart */
.article-controls{bottom:30rem;justify-content:center;left:0;pointer-events:none;position:fixed;right:0;z-index:5}
.article-controls[hidden]{display:none}
/* le disque remonter : span.background (absolu, apres le svg dans le DOM) peindrait par dessus la fleche ; le svg est deja relative (main.css) */
.article-controls .button svg{z-index:1}
/* bande de 4 quadrants (340 x 48) : la carte de l'article depliee, le voile --color-bg-dark60 recule de gauche a droite a la lecture */
.article-controls .progress-thumbs{border-radius:10rem;cursor:pointer;display:grid;grid-template-columns:repeat(4,85rem);margin-left:var(--gap-s);overflow:hidden;pointer-events:all;position:relative}
.article-controls .thumb{background-color:var(--color-bg-grey);background-repeat:no-repeat;background-size:170rem 96rem;border:none;cursor:pointer;display:block;height:48rem;margin:0;padding:0;width:85rem}
.article-controls .thumb:nth-child(1){background-position:0 0}
.article-controls .thumb:nth-child(2){background-position:-85rem 0}
.article-controls .thumb:nth-child(3){background-position:0 -48rem}
.article-controls .thumb:nth-child(4){background-position:-85rem -48rem}
.article-controls .thumb:focus-visible{outline-offset:-3rem}
.article-controls .progress-overlay{background:var(--color-bg-dark60);border-left:3px solid var(--color-white);bottom:0;left:0;pointer-events:none;position:absolute;top:0;transform-origin:center right;transition:transform .4s ease;width:100%}
@media screen and (max-width:900px){
  .article-controls{bottom:calc(var(--grid-margin) + 48rem + 12rem);justify-content:flex-end}
  .article-controls .inner{margin:0 var(--grid-margin)}
  .article-controls .ctl-top{display:none}
  .article-controls .progress-thumbs{grid-template-columns:repeat(2,85rem);margin-left:0}
  .article-controls .thumb:nth-child(n+3){display:none}
}

/* ---------- 6 mouvement reduit (additif au bloc de main.css, jamais une redefinition : les etats restent, seuls les trajets disparaissent) */
@media (prefers-reduced-motion:reduce){
  .dg-flow,.dg-redflow,.dg-pulse{animation:none}
  .article-controls .progress-overlay{transition:none}
  #blog-stats:not(:empty){animation:none}
  main.blog .blog-marquee .row{animation:none}
  .article-diagram.is-pending{opacity:1}
  .article-card img{transition:none}
}
/* le pied de l'article laisse la place a la pilule : credits au dessus d'elle (desktop), marge basse (mobile) */
@media screen and (min-width:901px){main.article .blog-footer .credits{bottom:calc(30rem + 68rem + 16rem)}}
@media screen and (max-width:900px){main.article .blog-footer{padding-bottom:calc(var(--grid-margin) + 48rem + 12rem + 68rem + 16rem)}}
/* telephone : la pilule passe au dessus de la carte penchee (haut de la carte a ~89 px du bas) */
@media screen and (max-width:420px){.article-controls{bottom:calc(var(--grid-margin) + 48rem + 36rem)}}
/* ---------- 8 pages simples (parcours, confidentialite, mentions legales) : intro, liste d'ecrits, formulaire, tableau */
.page-lead{font-size:20rem;font-weight:400;letter-spacing:-.02em;line-height:1.4;margin:0;max-width:720px;opacity:.6;text-wrap:balance}
.article-body .page-rows{margin:var(--gap-m) 0 var(--gap-l);min-height:0;padding-block:0;width:100%}
.article-body .page-rows .project p{font-size:40rem;margin:0 0 var(--gap-20)}
.article-body .page-rows .blog-row-lead{font-size:16rem}
.article-body .page-rows a{color:inherit;text-decoration:none}
.page-form{display:flex;flex-direction:column;gap:8rem;margin:var(--gap-m) 0 var(--gap-l)}
.page-form label{font-size:14rem;margin-top:var(--gap-s);opacity:.6}
.page-form input,.page-form textarea{background:var(--color-bg-grey);border:1px solid transparent;border-radius:var(--radius-xs);color:var(--color-white);font:inherit;font-size:18rem;padding:14rem 18rem;transition:border-color .15s ease-in-out;width:100%}
.page-form textarea{min-height:140rem;resize:vertical}
.page-form input:focus,.page-form textarea:focus{border-color:var(--color-white);outline:none}
.page-form .solid-button{align-self:flex-start;margin-top:var(--gap-20)}
.article-body table{border-collapse:collapse;font-size:16rem;margin:0 0 var(--gap-20);width:100%}
.article-body th,.article-body td{border-bottom:1px solid var(--color-white20);padding:10rem 12rem 10rem 0;text-align:left;vertical-align:top}
.article-body th{color:var(--color-white);font-weight:500}
@media screen and (max-width:420px){.article-body .page-rows .project p{font-size:28rem}}