/* blog.css — index, categories et articles.
 *
 * Deux partis pris structurent cette feuille.
 *
 * 1. Le blog a un GRAND VISUEL, comme les pages produit. Le header du site
 *    est position:fixed et transparent : il est concu pour se poser sur une
 *    image sombre. Une page qui n'en a pas voyait son contenu passer dessous
 *    et le logo clair disparaitre sur fond clair. Plutot que de neutraliser
 *    le header, on lui rend ce sur quoi il doit se poser.
 *
 * 2. Le corps des articles est du HTML WordPress repris VERBATIM : on ne le
 *    reecrit pas, on l'habille. D'ou les classes qui ne sont pas les notres
 *    (wp-block-image, aligncenter, wp-element-caption, ez-toc-*). Y toucher
 *    casserait les ancres #Section que Google indexe et qui portent une
 *    cinquantaine de clics mesures.
 */

/* ==================================================================
   Visuel d'en-tete
   ================================================================== */
.blog-hero{position:relative;display:flex;align-items:flex-end;
  min-height:clamp(420px,52vh,560px);background:#0b1216;color:#fff;overflow:hidden}
.blog-hero .hero-bg{position:absolute;inset:0;z-index:0}
.blog-hero .hero-bg img{width:100%;height:100%;object-fit:cover;display:block}


.blog-hero .hero-inner{position:relative;z-index:2;width:100%;
  padding:clamp(140px,17vw,178px) 0 clamp(44px,5vw,66px)}
.blog-hero .eyebrow{color:#7fcdee}
.blog-hero h1{font-family:"Jost",sans-serif;font-weight:300;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.06;letter-spacing:-.015em;
  color:#fff;margin:12px 0 18px;text-wrap:balance;max-width:19ch}
.blog-hero h1 em{font-style:italic;font-weight:300;color:#8fd4f2}
.hero-lede{font-size:clamp(.98rem,1.5vw,1.12rem);line-height:1.6;
  color:rgba(255,255,255,.84);max-width:60ch;margin:0}
.hero-lede b{color:#fff;font-weight:500}
/* Page Blog (28 sept.) : description sur 2 lignes equilibrees en grand ecran. */
.hero-lede-2l{max-width:108ch;text-wrap:balance}

/* Le titre d'un article est deja long : il respire davantage. */
.blog-hero-article{min-height:clamp(380px,46vh,500px)}
.blog-hero-article h1{max-width:22ch;font-size:clamp(1.75rem,4.2vw,2.9rem)}
.blog-hero-cat{min-height:clamp(320px,38vh,420px)}

.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.82rem;color:rgba(255,255,255,.7);margin:18px 0 0}
.article-meta span[aria-hidden]{opacity:.45}

  font-size:.78rem;color:var(--ink-soft);margin:0 0 22px}
.fil a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{border-bottom-color:currentColor}
.fil span[aria-hidden]{opacity:.4}
.fil-clair{color:rgba(255,255,255,.72)}
.fil-clair a:hover{color:#fff}

/* ==================================================================
   Bandeau des categories
   ================================================================== */
.blog-cats-band{background:var(--paper);border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20;padding:16px 0}
.blog-cats{display:flex;flex-wrap:wrap;gap:8px}
.blog-cats a{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;
  font-size:.82rem;text-decoration:none;color:var(--ink);white-space:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.blog-cats a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.blog-cats b{font-weight:500;font-size:.72rem;color:var(--ink-soft)}
.blog-cats a:hover b{color:var(--accent-deep)}

/* ==================================================================
   Liste des articles
   ================================================================== */
.blog-liste{background:var(--cream)}
/* Le filtre des categories est juste au-dessus : le haut de .pad (72-128 px)
   creusait un vide avant le premier article (demande de Jeremy, 18 sept.). */
.pad.blog-liste{padding-top:clamp(28px,3.5vw,44px)}

.blog-une{display:grid;grid-template-columns:1.08fr .92fr;text-decoration:none;
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:var(--paper);margin:0 0 clamp(48px,6vw,72px);
  box-shadow:0 30px 60px -46px rgba(12,40,58,.55);
  transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
.blog-une:hover{border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 38px 70px -44px rgba(12,40,58,.6)}
.blog-une.sans-image{grid-template-columns:1fr}
.blog-une-img{position:relative;overflow:hidden;min-height:340px;background:var(--bone)}
.blog-une-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.blog-une:hover .blog-une-img img{transform:scale(1.04)}
.blog-une-txt{display:flex;flex-direction:column;gap:14px;justify-content:center;
  padding:clamp(30px,3.6vw,52px)}
.blog-une-txt h2{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.16;color:var(--ink);
  margin:0;text-wrap:balance}
.blog-une-txt p{font-size:.95rem;line-height:1.6;color:var(--ink-soft);margin:0}
.blog-une-date{font-size:.76rem;color:var(--ink-soft);opacity:.8}
.blog-une-lien{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;
  color:var(--accent-deep);font-weight:500}
.blog-une-lien::after{content:"";width:22px;height:1px;background:currentColor;
  transition:width .3s ease}
.blog-une:hover .blog-une-lien::after{width:38px}

.blog-titre-liste{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ink);margin:0 0 22px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}

/* Trois cartes par ligne (demande de Jeremy, 18 sept. 2026) : 12 par page
   = 4 lignes pleines. Deux puis une colonne sur les petits ecrans. */
.blog-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.blog-carte{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border:1px solid var(--line);border-radius:5px;background:var(--paper);
  transition:border-color .28s ease,transform .28s ease,box-shadow .28s ease}
.blog-carte:hover{border-color:var(--accent);transform:translateY(-4px);
  box-shadow:0 26px 46px -34px rgba(12,40,58,.5)}
.blog-carte-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--bone)}
.blog-carte-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.blog-carte:hover .blog-carte-img img{transform:scale(1.05)}
.blog-carte-txt{display:flex;flex-direction:column;gap:9px;padding:19px 20px 22px;flex:1}
.blog-carte-txt h3{font-family:"Jost",sans-serif;font-weight:400;font-size:1.02rem;
  line-height:1.32;color:var(--ink);margin:0}
.blog-carte-txt time{font-size:.73rem;color:var(--ink-soft);opacity:.8;margin-top:auto}
.blog-tag{align-self:flex-start;font-size:.67rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-deep);font-weight:500}

/* Pagination. Elle existe pour une raison de rendu autant que de confort :
   rendre les 106 articles d'un coup figeait le navigateur. */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;
  margin:clamp(40px,5vw,64px) 0 0}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 13px;border-radius:4px;font-size:.86rem;
  text-decoration:none;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.pager a:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.pager .courant{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:500}
.pager-prec,.pager-suiv{font-weight:500}
@media (max-width:640px){
  .pager-n:not(.courant){display:none}
  .pager .courant{min-width:auto;padding:0 18px}
}

/* ==================================================================
   Corps de l'article
   ================================================================== */
.article{display:block}
.article-chapo{max-width:760px;margin:0 auto;
  padding:clamp(40px,5vw,64px) 24px 0;
  font-family:"Jost",sans-serif;font-size:clamp(1.08rem,1.8vw,1.28rem);
  font-weight:300;line-height:1.55;color:var(--ink)}
.article-corps{max-width:760px;margin:0 auto;padding:clamp(30px,4vw,48px) 24px 0;
  font-size:1.04rem;line-height:1.75;color:var(--ink)}
.article-corps p{margin:0 0 1.3em}
.article-corps h2{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.22;color:var(--ink);
  margin:2.2em 0 .7em;text-wrap:balance}
.article-corps h3{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.1rem,2vw,1.32rem);line-height:1.3;color:var(--ink);
  margin:1.8em 0 .6em}
.article-corps h4{font-size:1.03rem;font-weight:600;margin:1.5em 0 .5em}
.article-corps a{color:var(--accent-deep);text-decoration:none;
  border-bottom:1px solid rgba(13,119,189,.3);transition:border-color .2s ease}
.article-corps a:hover{border-bottom-color:var(--accent-deep)}
.article-corps ul,.article-corps ol{margin:0 0 1.3em;padding-left:1.35em}
.article-corps li{margin:0 0 .5em}
.article-corps li::marker{color:var(--accent)}
.article-corps strong{font-weight:600}
.article-corps blockquote{margin:1.8em 0;padding:2px 0 2px 24px;
  border-left:2px solid var(--accent);color:var(--ink-soft);font-style:italic}
.article-corps table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.93rem}
.article-corps th,.article-corps td{border:1px solid var(--line);padding:11px 13px;text-align:left}
.article-corps th{background:var(--cream);font-weight:600}

/* Un tableau large defile dans sa propre boite : le corps de la page ne
   doit jamais defiler lateralement. */
.article-corps .wp-block-table{overflow-x:auto}

/* Images : WordPress fournit width/height sur 467 des 475 balises, ce qui
   protege le CLS — seule metrique terrain en echec sur ce site. On ne fixe
   donc que le comportement fluide, sans toucher aux attributs. */
.article-corps img{max-width:100%;height:auto;display:block;border-radius:4px}
.article-corps figure{margin:2em 0}
.article-corps .wp-block-image{margin:2em 0}
.article-corps .aligncenter{margin-left:auto;margin-right:auto;text-align:center}
.article-corps .aligncenter img{margin-left:auto;margin-right:auto}
.article-corps .alignleft{float:left;margin:.4em 1.7em 1.3em 0}
.article-corps .alignright{float:right;margin:.4em 0 1.3em 1.7em}
.article-corps figcaption,.article-corps .wp-element-caption{
  font-size:.79rem;line-height:1.45;color:var(--ink-soft);margin-top:11px;text-align:center}
.article-corps .wp-block-spacer{height:28px!important}

/* Sommaire genere par Easy TOC. Ses ancres sont indexees : on l'habille,
   on n'y touche pas. */
.article-corps #ez-toc-container{background:var(--cream);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:4px;
  padding:24px 28px;margin:0 0 2.4em;font-size:.93rem}
.article-corps .ez-toc-title{font-family:"Jost",sans-serif;font-size:.71rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  display:block;margin:0 0 13px}
.article-corps #ez-toc-container nav ul{margin:0;padding-left:1.15em;list-style:decimal}
.article-corps #ez-toc-container li{margin:.32em 0}
.article-corps .ez-toc-link{color:var(--ink);border-bottom:none}
.article-corps .ez-toc-link:hover{color:var(--accent-deep)}
.article-corps .ez-toc-toggle{background:none;border:none;cursor:pointer;color:var(--ink-soft)}

/* La cible d'une ancre ne doit pas se retrouver sous le bandeau colle. */
.article-corps .ez-toc-section{display:block;scroll-margin-top:104px}

/* ==================================================================
   Bas d'article
   ================================================================== */
.article-cta{max-width:1000px;margin:clamp(56px,7vw,88px) auto 0;
  padding:clamp(32px,4vw,48px);
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,3vw,44px);
  align-items:center;background:var(--dark);color:#fff;border-radius:6px}
.article-cta .eyebrow{color:#7fcdee}
.article-cta h2{font-family:"Jost",sans-serif;font-weight:400;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.2;color:#fff;margin:10px 0 12px}
.article-cta p{font-size:.93rem;line-height:1.6;color:rgba(255,255,255,.76);margin:0}
.article-cta-actions{display:flex;flex-direction:column;gap:11px}
.article-cta-actions .btn{justify-content:center}

.article-suite{max-width:1000px;margin:clamp(56px,7vw,88px) auto 0;
  padding:clamp(40px,5vw,56px) 24px clamp(64px,8vw,104px);
  border-top:1px solid var(--line)}
.article-suite h2{font-family:"Jost",sans-serif;font-weight:400;font-size:1.3rem;
  color:var(--ink);margin:0 0 24px}
.article-retour{margin:34px 0 0}

/* ==================================================================
   Adaptations
   ================================================================== */
@media (max-width:900px){
  .blog-une{grid-template-columns:1fr}
  .blog-une-img{min-height:230px;aspect-ratio:16/9}
  .blog-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-cta{grid-template-columns:1fr}
}
@media (max-width:580px){
  .blog-grille{grid-template-columns:1fr}
}
@media (max-width:640px){
  .blog-hero .hero-inner{padding-top:clamp(120px,26vw,150px)}
  .blog-cats-band{padding:12px 0}
  .blog-cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -24px;padding:0 24px}
  .blog-cats::-webkit-scrollbar{display:none}
  .article-chapo,.article-corps,.article-suite{padding-left:20px;padding-right:20px}
  .article-cta{margin-left:20px;margin-right:20px}
  .article-corps .alignleft,.article-corps .alignright{float:none;margin:1.5em auto}
}
@media (prefers-reduced-motion:reduce){
  .blog-une-img img,.blog-carte-img img,.blog-une,.blog-carte{transition:none}
  .blog-une:hover .blog-une-img img,.blog-carte:hover .blog-carte-img img{transform:none}
}

/* 1er oct. 2026 (Jeremy : « dans le blog mets les mêmes arrondis que dans le
   menu ») : arrondi des cartes du méga-menu (menu.css .gsm-carte, 24 px) sur les
   blocs du blog — article à la une, cartes, images des articles, encadré d'appel.
   Avant : 4 à 6 px. Pagination et citations inchangées. */
.blog-une,.blog-carte{border-radius:24px}
.article-corps img{border-radius:24px}.article-cta{border-radius:24px}

/* 2 oct. 2026 (Jeremy : « dans les articles de blog mets le sommaire à gauche et
   l'article sur la droite en 1/2 et 1/2 ») : deux colonnes égales aux marges du site
   (blog_post.php, .article-2col). Le sommaire reste visible pendant la lecture
   (position collante, défile seul s'il est plus haut que l'écran). Sous 900 px :
   une colonne, sommaire au-dessus. Article sans sommaire : inchangé. */
.article-2col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);align-items:start;
  padding:clamp(40px,5vw,64px) clamp(56px,11vw,220px) 0}
.article-2col .article-chapo,.article-2col .article-corps{max-width:none;margin:0;padding-left:0;padding-right:0}
.article-2col .article-chapo{padding-top:0}
.article-2col .article-droite > .article-corps:first-child{padding-top:0}
.article-sommaire{position:sticky;top:120px;max-height:calc(100vh - 140px);overflow:auto;padding-top:0}
.article-sommaire #ez-toc-container{margin:0}
@media (max-width:900px){
  .article-2col{grid-template-columns:minmax(0,1fr);padding:clamp(32px,5vw,48px) 24px 0}
  .article-sommaire{position:static;max-height:none;overflow:visible}
}
@media (max-width:640px){ .article-2col{padding-left:20px;padding-right:20px} }
/* Même jour (Jeremy : « mets le bloc de gauche avec le sommaire plus petit et l'autre à
   droite avec le texte plus grand ») : 1/3 - 2/3 au lieu de 1/2 - 1/2. */
@media (min-width:901px){ .article-2col{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} }
/* Puis (« rapetisse encore un peu le bloc avec le sommaire ») : 1/3 -> ~28 %. */
@media (min-width:901px){ .article-2col{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr)} }

/* Même jour (Jeremy : « Parlons-en avec un technicien en full size et les autres
   articles pareil que l'espacement du site ») : l'encadré d'appel devient une bande
   bord à bord (plus d'arrondi ni de largeur maxi), son contenu aux marges du site ;
   « À lire aussi » prend les marges du site (avant : colonne de 1000 px centrée). */
.article-cta{max-width:none;margin-left:0;margin-right:0;border-radius:0;
  padding:clamp(40px,5vw,64px) clamp(56px,11vw,220px)}
.article-suite{max-width:none;padding-left:clamp(56px,11vw,220px);padding-right:clamp(56px,11vw,220px)}
/* Ordre échangé le même jour (« À lire aussi » puis l'encadré, qui touche le pied de
   page) : « À lire aussi » perd son grand vide du bas, l'encadré garde son écart
   au-dessus. */
.article-suite + .article-cta{margin-top:0}
.article-suite{padding-bottom:clamp(56px,7vw,88px)}
@media (max-width:860px){
  .article-cta{padding-left:24px;padding-right:24px}
  .article-suite{padding-left:24px;padding-right:24px}
}
@media (max-width:640px){
  .article-cta{margin-left:0;margin-right:0;padding-left:20px;padding-right:20px}
  .article-suite{padding-left:20px;padding-right:20px}
}