/* Fidélité à la maquette : regions. Réutiliser les composants existants ; nouvelles règles ici seulement. */
@layer pages {
  /* Titre de région long (le titre eZ est repris tel quel) : taille réduite pour tenir sur deux lignes. */
  .hero--region.hero--long h1{font-size:clamp(48px,7.4vw,112px);line-height:.95;max-width:12em}
  @media (max-width:820px){.hero--region.hero--long h1{font-size:clamp(44px,13vw,72px)}}
  .id-band--long h1{font-size:clamp(44px,6.4vw,96px)}
  /* Panneau « En bref » : puce sans libellé sur toute la largeur. */
  .facts .facts__wide{grid-column:1 / -1}
  .facts-panel .facts dd{font-size:var(--text-m)}
  /* Texte eZ du dossier (home Régions) : sobre, sous l'en-tête. */
  .regions-intro{padding-top:var(--space-7)}
  .regions-intro .body{max-width:44em}
  .regions-intro h2{font-size:var(--text-l);font-weight:600;line-height:1.3}
  .regions-intro h3{font-size:var(--text-m);font-weight:300;line-height:1.5;margin-top:var(--space-3)}
  #sols .grid + .pullquote{margin-top:var(--space-8,64px)}
  /* Pastille de décompte dans les tuiles de couleur. */
  .tile-link small{opacity:.7;font-size:var(--text-xs)}
}

/* Articles d'une région regroupés par zone. */
@layer pages {
  .article-zone { margin: var(--space-7) 0 var(--space-3); font-size: var(--text-m); font-weight: 600; color: var(--c-ink); }
}

/* Étape 14 : grandes tuiles d'articles (section « Comprendre »). Composant card--row réutilisé ; la photo n'est jamais
   agrandie au-delà de sa taille native (--nw, en px) : cadre à la taille native, hauteur libre, sans trous. */
@layer pages {
  .art-tiles > li { container-type: inline-size; display: flex; }
  .art-tile { flex: 1 1 auto; width: 100%; background: var(--c-white); border-top: 4px solid var(--c-brand); --card-gap: 0; --card-pad: 0; }
  .art-tile:hover { background: var(--c-white); }
  .art-tile .card__media { width: min(100%, calc(var(--nw, 9999) * 1px)); aspect-ratio: auto; align-self: start; background: transparent; }
  .art-tile .card__media img { height: auto; width: 100%; display: block; }
  .art-tile .card__body { display: flex; flex-direction: column; padding: var(--space-5); min-height: 100%; }
  .art-tile .card__kicker { font-size: var(--text-s); letter-spacing: .04em; text-transform: uppercase; color: var(--c-brand); }
  .art-tile .card__title { font-size: 26px; font-weight: 300; line-height: 1.2; margin-top: var(--space-2); }
  .art-tile--long .card__title { font-size: 20px; font-weight: 400; }
  .art-tile .card__text { font-size: var(--text-m); }
  .art-tile__more { margin-top: auto; padding-top: var(--space-4); font-size: var(--text-s); font-weight: 600; color: var(--c-brand); }
  .art-tile:hover .art-tile__more { text-decoration: underline; text-underline-offset: 4px; }
  .art-tile--text { min-height: 200px; }
  /* Photo à gauche (largeur native au plus 46 %) quand la tuile est assez large ; sinon photo au-dessus. */
  .art-tile { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  @container (min-width: 520px) {
    .art-tile:has(.card__media) { grid-template-columns: min(46cqw, calc(var(--nw, 9999) * 1px)) minmax(0, 1fr); }
    .art-tile .card__media { width: 100%; }
  }
}