/* Vitrine_PageJournal.css - styles de la page vitrine, repris de la maquette. */
/* Les polices communes aux quatre pages vivent dans Vitrine_Fonts.css. */

/* Filet : les feuilles de page sont chargées APRÈS, et une règle de classe
   (display:flex, display:grid…) bat [hidden] sans le !important. Le gabarit
   vitrine ne charge pas site.css, qui porte ce filet pour le reste du site. */
[hidden]{display:none!important;}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}
::selection{background:#2388be;color:#fff;}
input,select,button,textarea{font-family:inherit;}
a{color:#2388be;}
a:hover{color:#1c7099;}
@keyframes jn-aurora1{0%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,30px) scale(1.15);}100%{transform:translate(0,0) scale(1);}}
@keyframes jn-aurora2{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,20px) scale(.92);}100%{transform:translate(0,0) scale(1);}}
header nav a{white-space:nowrap;}
@media (max-width:1080px){
  a[data-navlink]{display:none !important;}
}
@media (max-width:920px){
  [data-stack]{grid-template-columns:1fr !important;}
  /* Image de garde (V0112). Une fois les cartes empilées, le cadre prend toute la
     largeur : garder 320 px (grande carte) ou 150 px (grille) de haut en ferait un
     bandeau jusqu'à 6 fois plus large que haut, qui ne laisserait voir qu'une
     tranche de l'image. On repasse au 16:9 exigé à l'envoi, et seulement quand
     une image est présente : le dégradé de la maquette, lui, ne change pas.
     `!important` : les hauteurs de la maquette sont des styles EN LIGNE. */
  [data-cover-frame]{min-height:0 !important;aspect-ratio:16/9;}
  [data-card-cover]{height:auto !important;aspect-ratio:16/9;}
}

/* Téléphone (375 px de référence). Les styles de la maquette sont EN LIGNE : d'où les
   !important et les sélecteurs de structure sur la carte « À la une » (cadre = 1er enfant,
   colonne de texte = dernier, sa ligne de métadonnées = 1er enfant de celle-ci). */
@media (max-width:600px){
  h1{font-size:40px !important;}
  section{padding-left:16px !important;padding-right:16px !important;}
  /* Pastilles de rubrique : 40 px de haut sous le doigt. */
  [data-categorie]{padding:10px 16px !important;}
  /* Carte « À la une » : 38/40 px de marge interne sur 343 px de large. */
  a[data-article][data-stack] > div:first-child{padding:22px !important;}
  a[data-article][data-stack] > div:last-child{padding:24px 20px 26px !important;}
  a[data-article][data-stack] h2{font-size:24px !important;}
  /* Sa ligne « rubrique · date · durée » ne tenait pas sur une ligne et cassait
     « 5 / min » : elle passe à la ligne entre deux éléments, jamais au milieu d'un. */
  a[data-article][data-stack] > div:last-child > div:first-child{flex-wrap:wrap;row-gap:4px;}
  footer img{height:72px !important;}
}