/* Bibliotheque editoriale des chroniques : page ressources.html (mosaique) + pages detaillees */

/* ---------- Intro editoriale (ressources.html) ---------- */
.chr-intro{max-width:760px;margin:0 auto;padding:0 1.5rem}
.chr-intro p{font-family:'Ibarra Real Nova',serif;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.9;color:var(--gray8);font-weight:400}

/* ---------- Mosaique ---------- */
.chr-mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:130px;
  grid-auto-flow:dense;
  gap:1.25rem;
}
.chr-tile{
  position:relative;display:block;overflow:hidden;
  border-radius:2px;text-decoration:none;color:inherit;
  background:var(--navy-deep);
  grid-column:span 1;grid-row:span 1;
}
.chr-tile.t-xl{grid-column:span 2;grid-row:span 3}
.chr-tile.t-wide{grid-column:span 2;grid-row:span 2}
.chr-tile.t-tall{grid-column:span 1;grid-row:span 3}
.chr-tile.t-square{grid-column:span 1;grid-row:span 2}
.chr-tile.t-md{grid-column:span 1;grid-row:span 2}
.chr-tile.t-sm{grid-column:span 1;grid-row:span 1}

.chr-tile-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:75% 50%;
  transition:transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.chr-tile:hover .chr-tile-img,.chr-tile:focus-visible .chr-tile-img{transform:scale(1.035)}
.chr-tile-scrim{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,26,38,0.88) 0%,rgba(6,26,38,0.42) 46%,rgba(6,26,38,0.02) 72%);
  transition:background 0.3s ease;
}
.chr-tile:hover .chr-tile-scrim,.chr-tile:focus-visible .chr-tile-scrim{background:linear-gradient(0deg,rgba(6,26,38,0.94) 0%,rgba(6,26,38,0.55) 50%,rgba(6,26,38,0.08) 75%)}
.chr-tile-body{
  position:absolute;left:0;right:0;bottom:0;padding:1.1rem 1.25rem;
  transition:transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.chr-tile:hover .chr-tile-body,.chr-tile:focus-visible .chr-tile-body{transform:translateY(-3px)}
.chr-tile-meta{
  display:block;font-size:0.66rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:#fff;margin-bottom:0.4rem;opacity:0.85;
}
.chr-tile-title{
  display:block;
  font-family:'Ibarra Real Nova',serif;font-weight:700;color:#fff;
  line-height:1.28;margin:0;
  font-size:clamp(1rem,1.35vw,1.3rem);
}
.chr-tile.t-xl .chr-tile-title,.chr-tile.t-wide .chr-tile-title{font-size:clamp(1.25rem,2vw,1.7rem)}
.chr-tile.t-sm .chr-tile-title{font-size:0.95rem;line-height:1.32}
.chr-tile-read{
  display:flex;align-items:center;gap:0.35rem;margin-top:0.6rem;
  font-size:0.72rem;font-weight:600;color:rgba(255,255,255,0.85);
  opacity:0;transform:translateY(4px);transition:opacity 0.25s ease,transform 0.25s ease;
}
.chr-tile:hover .chr-tile-read,.chr-tile:focus-visible .chr-tile-read{opacity:1;transform:translateY(0)}
.chr-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chr-tile.t-placeholder .chr-tile-img{object-position:center}

@media(max-width:1000px){
  .chr-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .chr-tile.t-xl{grid-column:span 2;grid-row:span 3}
  .chr-tile.t-wide{grid-column:span 2;grid-row:span 2}
  .chr-tile.t-tall{grid-column:span 1;grid-row:span 3}
}
@media(max-width:640px){
  .chr-mosaic{grid-template-columns:1fr;grid-auto-rows:220px;gap:1rem}
  .chr-tile,.chr-tile.t-xl,.chr-tile.t-wide,.chr-tile.t-tall,.chr-tile.t-square,.chr-tile.t-md,.chr-tile.t-sm{grid-column:span 1;grid-row:span 1}
  .chr-tile.t-xl{grid-row:span 2}
}

/* ---------- Banniere page detaillee ---------- */
/* Calee sur la hauteur d'ecran (vh), pas sur la largeur (vw) : un
   pourcentage de largeur grandissait sans limite sur un moniteur large
   et forcait soit un recadrage extreme (vw faible), soit une banniere
   qui occupait l'ecran en entier avant tout defilement (vw fort). En vh,
   la banniere reste autour de 60% de la fenetre quelle que soit sa
   largeur : assez genereuse pour la photo, assez courte pour laisser
   deviner le contenu sous la ligne de flottaison. */
.chr-banner{
  position:relative;overflow:hidden;
  height:clamp(440px,60vh,680px);
  background:var(--navy-deep);
}
.chr-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.chr-banner-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,26,38,0.92) 0%,rgba(6,26,38,0.72) 32%,rgba(6,26,38,0.18) 62%,rgba(6,26,38,0.05) 100%)}
/* Ancre au bord reel de l'ecran (voir .bento sur l'accueil pour le meme
   correctif) : max-width + margin:auto centrait le titre loin du bord
   sur un grand ecran. */
.chr-banner-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(1.25rem,3.5vw,48px)}
.chr-banner h1{
  font-family:'Ibarra Real Nova',serif;font-weight:800;color:#fff;
  font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.12;
  max-width:820px;margin:0;
}
.chr-title-line{display:block;opacity:0;animation:chrFadeUp 0.8s cubic-bezier(.2,.7,.2,1) forwards}
.chr-title-line:nth-child(1){animation-delay:0.05s}
.chr-title-line:nth-child(2){animation-delay:0.16s}
.chr-title-line:nth-child(3){animation-delay:0.27s}
.chr-title-line:nth-child(4){animation-delay:0.38s}
@keyframes chrFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .chr-title-line{animation:none;opacity:1;transform:none}
}

/* ---------- Ligne editoriale (auteur / source) ---------- */
.chr-byline{
  max-width:740px;margin:2.25rem auto 0;padding:0 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.9rem;
  font-size:0.86rem;color:var(--gray6);
}
.chr-byline strong{color:var(--navy);font-weight:700}
.chr-byline .dot{opacity:0.5}
.chr-byline a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(14,77,108,0.3);text-underline-offset:3px}
.chr-byline a:hover{color:var(--gold)}

/* ---------- Corps de l'article ---------- */
.chr-article{max-width:740px;margin:0 auto;padding:2.5rem 1.5rem 1rem}
.chr-article-chapo{
  font-family:'Ibarra Real Nova',serif;font-style:italic;font-size:1.18rem;
  line-height:1.75;color:var(--navy);margin-bottom:2rem;
  border-left:3px solid var(--gold);padding-left:1.5rem;
}
.chr-article-body{font-size:1.05rem;line-height:1.9;color:var(--gray8)}
.chr-article-body p{margin:0 0 1.5rem}
.chr-article-body strong{color:var(--navy);font-weight:700}
.chr-article-body em{font-style:italic}
.chr-article-body h2,.chr-article-body h3{font-family:'Ibarra Real Nova',serif;color:var(--navy);line-height:1.3;margin:2.25rem 0 1rem;font-weight:700}
.chr-article-body h2{font-size:1.4rem}
.chr-article-body h3{font-size:1.18rem}
.chr-article-body blockquote{margin:2rem 0;padding-left:1.5rem;border-left:3px solid var(--gold);font-style:italic;color:var(--navy);font-size:1.1rem;line-height:1.75}
.chr-article-body ul,.chr-article-body ol{margin:0 0 1.5rem;padding-left:1.4rem}
.chr-article-body li{margin-bottom:0.5rem}
.chr-source-note{
  max-width:740px;margin:1rem auto 0;padding:1.5rem 1.5rem 0;
  border-top:1px solid #eef1f4;font-size:0.86rem;color:var(--gray6);
}
.chr-source-note a{color:var(--navy);font-weight:600;text-decoration:none}
.chr-source-note a:hover{color:var(--gold)}
.chr-share{display:flex;gap:0.6rem;flex-wrap:wrap;align-items:center;margin-top:1.25rem}

/* ---------- Poursuivre la lecture ---------- */
.chr-continue{background:var(--gray1)}
.chr-continue .chr-mosaic{grid-auto-rows:220px}
.chr-continue .chr-tile{grid-column:span 1!important;grid-row:span 1!important}

@media(max-width:720px){
  .chr-banner{height:clamp(400px,100vw,640px)}
  .chr-byline{font-size:0.82rem}
}