/* Le Studio : styles de la page « news ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */
/* ==================================================================
   Page Actualités (v4, fichier news.html) : le hub des articles
   Maquette : Figma, « Blog Variante 3 », retenue le 19 oct. 2026 (la variante 2 et le sélecteur sont retirés)
================================================================== */

/* Hero : le mot « Actualités » sur toute la largeur ; les thèmes en liste informative dans la colonne de droite (comme le sommaire de la page Expertises) */
.phero__aside{display:grid}
/* La taille suit la largeur utile (écran moins les deux gouttières) : le mot remplit la ligne sans que le « s » final sorte du cadre */
.phero .wordmark{font-size:clamp(4rem,min(calc((100vw - 2 * var(--gutter)) / 4.16),40svh),28rem)}
.kinds li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-height:48px;padding-block:11px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.kinds__name{font-size:clamp(1.0625rem,1.45vw,1.4375rem);font-weight:450;letter-spacing:-.03em;transition:transform .5s var(--ease-out)}
.kinds .meta{color:var(--on-night-2)}
@media (hover:hover) and (pointer:fine){ .kinds li:hover .kinds__name{transform:translateX(8px)} }

/* À la une : la photo à gauche, le texte calé en bas à droite */
.une__wrap{display:grid;gap:clamp(24px,2.5vw,36px)}
.une__wrap > h2,.picks > h2{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;line-height:1.3;letter-spacing:.02em}
.une__link{display:grid;gap:clamp(24px,3vw,43px)}
.une__media,.post__media{border-radius:var(--r-md);overflow:hidden}
.une__media{aspect-ratio:16/9}

/* Couverture d'article : un fond à plat aux couleurs du studio et, au centre, le logo (mêmes proportions que dans l'en-tête) */
.cover{block-size:100%;display:flex;align-items:center;justify-content:center;background:var(--grey);color:var(--ink)}
.cover--white{background:var(--white)}
.cover--night{background:var(--night);color:var(--on-night)}
.cover--accent{background:var(--accent);color:var(--on-accent)}
.cover__logo{display:inline-flex;align-items:center;gap:.4em;font-size:var(--fs-h3);font-weight:500;letter-spacing:-.04em;line-height:1;white-space:nowrap;transition:scale var(--d-3) var(--ease-out)}
.cover__logo i{display:block;inline-size:.45em;block-size:.45em;background:var(--accent);transition:rotate .7s var(--ease-out)}
.cover--accent .cover__logo i{background:var(--on-accent)}
.une .cover__logo{font-size:var(--fs-h3l)}
.une__copy{display:grid;gap:clamp(18px,1.8vw,26px);align-content:end}
.une__meta,.post__meta{display:flex;justify-content:space-between;gap:16px;color:var(--ink-2)}
.une__meta{padding-block-end:12px;border-block-end:1px solid var(--line)}
.une__title{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.une__copy .lead{text-wrap:pretty}
.une__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding-block-start:clamp(8px,1.8vw,26px)}
.une__author{display:grid;line-height:1.5}
.une__author strong{font-weight:600}
@media (min-width:1024px){
  /* La couverture prend la hauteur du texte de droite, pas plus */
  .une__link{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter)}
  .une__media{aspect-ratio:auto;min-block-size:clamp(300px,24vw,380px)}
}

/* Tous les articles : titre, filtres, liste, pagination */
.posts__head{display:grid;gap:clamp(24px,2.5vw,36px);padding-block-start:clamp(24px,2.5vw,36px);border-block-start:1px solid var(--line);margin-block-end:clamp(40px,4.6vw,66px)}
.posts__head h2{font-size:var(--fs-h2s);letter-spacing:-.05em;line-height:.98}
.chips{display:none}
.js .chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-pill);border:1px solid rgb(13 13 13 / .28);font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.chip sup{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.02em;line-height:1;color:var(--ink-2);transition:color var(--d-1) ease}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] sup{color:var(--on-night-2)}
.chip:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .chip:hover{border-color:var(--ink)} }

/* Carte d'article : la photo à gauche, le thème, la date, le titre et le résumé à droite */
.posts{display:grid;gap:clamp(40px,4vw,43px)}
.post[hidden]{display:none}
.post__link{display:grid;gap:18px}
.post__media{aspect-ratio:16/9}
.post__copy{display:grid;gap:clamp(12px,1.4vw,20px);align-content:start}
/* Titre sous la vignette : taille des titres de carte du site (20 à 26 px), sur toute la largeur de la vignette (pas d'équilibrage, qui rétrécit les lignes) */
.post__title{font-size:var(--fs-xl);font-weight:450;letter-spacing:-.03em;line-height:1.2;text-wrap:pretty;max-inline-size:none;transition:transform var(--d-2) var(--ease-out)}
.post__excerpt{max-inline-size:34em;text-wrap:pretty}
@media (min-width:860px){
  .post__link{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
  .post__media{aspect-ratio:5/2}
}
@media (hover:hover) and (pointer:fine){
  /* Au survol, le logo s'approche un peu et son carré fait un quart de tour */
  .une__link:hover .cover__logo,.post__link:hover .cover__logo{scale:1.05}
  .une__link:hover .cover__logo i,.post__link:hover .cover__logo i{rotate:90deg}
  .post__link:hover .post__title{transform:translateX(8px)}
  .une__link:hover .roll > span,.une__link:hover .roll::after{transform:translateY(-100%)}
}

/* Pagination : sans JavaScript, tous les articles sont affichés et ces boutons disparaissent */
.pager{display:none}
.js .pager{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-block-start:clamp(40px,4.6vw,66px);padding-block-start:clamp(24px,2.5vw,36px);border-block-start:1px solid var(--line)}
.pager[hidden]{display:none}
.pager__nav{display:flex;gap:8px}
.pager .round svg{inline-size:20px;block-size:20px}
.pager .round{transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease,opacity var(--d-1) ease,transform var(--d-1) var(--ease-out)}
.pager .round:active{transform:scale(.97)}
.pager .round:disabled{opacity:.32;cursor:default}
@media (hover:hover) and (pointer:fine){ .pager .round:not(:disabled):hover{background:var(--ink);color:var(--bg);border-color:var(--ink)} }

@media (prefers-reduced-motion: reduce){
  .cover__logo,.cover__logo i,.post__title{transition:none}
  .une__link:hover .cover__logo,.post__link:hover .cover__logo{scale:none}
  .une__link:hover .cover__logo i,.post__link:hover .cover__logo i{rotate:none}
  .chip:active,.pager .round:active{transform:none}
}

/* ==================================================================
   Mise en page retenue (« Blog Variante 3 ») : à la une en grand à gauche et articles choisis à droite ;
   puis les articles en grille sur deux colonnes.
================================================================== */
.news .picks{display:grid;gap:clamp(24px,2.5vw,36px);align-content:start}
.news .top{display:grid;gap:clamp(48px,6vw,72px)}
.pick{display:grid;grid-template-columns:clamp(120px,14.7vw,212px) minmax(0,1fr);column-gap:clamp(16px,1.7vw,24px);align-items:start;padding-block:clamp(16px,1.7vw,24px);border-block-end:1px solid var(--line)}
.picks__list li:first-child .pick{padding-block-start:0}
.picks__list li:last-child .pick{border-block-end:0;padding-block-end:0}
.pick__media{aspect-ratio:212/148;border-radius:clamp(8px,.85vw,12px);overflow:hidden}
.pick__media .cover__logo{font-size:var(--fs-lg)}
.pick__copy{display:grid;gap:12px}
.pick .post__meta{flex-wrap:wrap;gap:2px 12px}
.pick .post__meta > *{white-space:nowrap}
.pick__title{font-size:var(--fs-lg);font-weight:450;letter-spacing:-.03em;line-height:1.2;text-wrap:balance;transition:transform var(--d-2) var(--ease-out)}
/* à la une : la couverture au-dessus, le texte dessous */
.news .une__link{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,1.8vw,26px)}
.news .une__media{aspect-ratio:16/9;min-block-size:0}
.news .une__copy{align-content:start}
.news .une__copy .lead{max-inline-size:32em}
@media (min-width:1024px){
  .news .top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter)}
  .news .posts__head{grid-template-columns:auto minmax(0,1fr);align-items:end;column-gap:var(--gutter)}
  .news .posts__head .chips{justify-content:flex-end}
}
/* tous les articles : une grille, la couverture au-dessus du texte */
.news .post__link{grid-template-columns:minmax(0,1fr);row-gap:20px}
.news .post__media{aspect-ratio:16/9}
.news .post__excerpt{max-inline-size:33em}
@media (min-width:860px){
  .news .posts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(48px,5vw,72px)}
}
@media (hover:hover) and (pointer:fine){
  .pick:hover .cover__logo{scale:1.05}
  .pick:hover .cover__logo i{rotate:90deg}
  .pick:hover .pick__title{transform:translateX(6px)}
}

@media (prefers-reduced-motion: reduce){ .pick__title{transition:none} .pick:hover .cover__logo{scale:none} .pick:hover .cover__logo i{rotate:none} }

/* Tous les articles : titre dans la vignette un cran plus petit (retour de Jeremy, 10 nov. 2026) */
.news .post__media .cover__titre{font-size:clamp(1rem,5.2cqi,2.625rem)}

/* Mobile (12 nov. 2026, retour de Jeremy) : filtres sur deux lignes ; Design passe avant Stratégie et UX pour que tout tienne */
@media (max-width:767.98px){ .chips [data-filter="strategie"],.chips [data-filter="seo"]{order:1} .js .chips{gap:6px} .chip{padding-inline:14px} }   /* tient aussi à 360 px */