/* ==========================================================================
   home-sections.css — Blocs spécifiques à home.cfm (Phase B)
   Contient : news-grid, quote-section, portrait-section, works-grid
   Source   : new-template/index.html (inline <style>)
   Phase    : B — tâche B2 (complément hero.css + animations.css)
   Scope    : toutes les pages (chargé via inc_header.cfm — les sections
               ne s'affichent que là où le HTML correspondant est présent)
   Dépend   : tokens.css

   NOTE : toutes les couleurs hardcodées (hsla / rgba) sont passées en
   HSL components ou tokens.
   ========================================================================== */

/* ==========================================================================
   NEWS GRID
   ========================================================================== */

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

/* --------------------------------------------------------------------------
   Pattern card-shell — commun aux news-cards (et extensible à d'autres cartes)

   Architecture pointer-events / z-index :

   Le hitarea est le lien principal de navigation (z-index: 2, couvre toute la carte).
   Le contenu visuel (.card-content) est rendu "transparent aux clics" via
   pointer-events: none, sauf pour les éléments interactifs explicites
   (liens, boutons) qui récupèrent pointer-events: auto.
   Le crayon DynamicAdmin (.card-edit-trigger) passe par-dessus tout (z-index: 4).

   Cette approche évite le paradoxe "z-index 2 bloque z-index 1" :
   le hitarea est toujours cliqué sauf là où un lien/bouton explicite est présent.

   Règle : .card-shell doit avoir position:relative.
   -------------------------------------------------------------------------- */
.card-shell {
  position: relative;
}

/* Le contenu ne capte pas les clics — ils tombent sur le card-hitarea en dessous */
.card-content {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Seuls les liens et boutons explicites dans le contenu récupèrent les clics */
.card-content a,
.card-content button {
  pointer-events: auto;
}

/* Lien étiré — couvre toute la carte, capte les clics là où il n'y a pas
   d'élément interactif dans .card-content. */
.card-hitarea {
  position: absolute;
  inset: 0;
  z-index: 2; /* même niveau que .card-content, mais .card-content est pointer-events:none */
}

/* Focus clavier visible sur l'ensemble de la carte */
.card-hitarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Crayon DynamicAdmin — coin inférieur droit, 44x44px minimum (WCAG 2.5.5).
   Affiché uniquement via cfif isDynamicAdmin dans le CFML. */
.card-edit-trigger {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsla(var(--bgh), var(--bgs), calc(var(--bgl) + 10%), 0.82);
  border-radius: 2px;
  border: 1px solid hsla(var(--ph), var(--ps), var(--pl), 0.3);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}

.card-edit-trigger:hover,
.card-edit-trigger:focus {
  background: hsla(var(--bgh), var(--bgs), calc(var(--bgl) + 18%), 0.95);
  border-color: hsla(var(--ph), var(--ps), var(--pl), 0.6);
}

.card-edit-trigger:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.card-edit-trigger img {
  display: block;
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   news-card — styles visuels de la carte.
   Le <article> est maintenant un conteneur neutre (plus de <a> global).
   Les hovers restent fonctionnels via .card-shell:hover.
   -------------------------------------------------------------------------- */
.news-card {
  background: var(--card);
  border-radius: 2px;
  overflow: hidden;
  transition: box-shadow 0.5s;
}

.news-card:hover {
  box-shadow: 0 4px 20px -4px var(--shadow-sm);
}

/* Vignette */
.news-card .thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.news-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s;
  display: block;
}

/* L'image zoome au hover de la carte (déclenché par .card-shell:hover) */
.news-card:hover .thumb img {
  transform: scale(1.05);
}

.news-card .thumb .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, hsla(var(--bgh), var(--bgs), var(--bgl), 0.8), transparent);
}

/* Badge de catégorie */
.news-card .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.25rem 0.75rem;
  background: hsla(var(--ph), var(--ps), var(--pl), 0.9);
  color: var(--primary-fg);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Corps de la carte */
.news-card .body {
  padding: 1.5rem;
}

.news-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  transition: color 0.3s;
}

.news-card:hover h3 {
  color: var(--primary);
}

.news-card p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Indicateur "Lire la suite" — span décoratif, aria-hidden="true" dans le CFML.
   Le vrai lien est .card-hitarea (aria-label = titre de la news).
   getElement() peut injecter un <a> crayon DynamicAdmin dans ce span :
   on le neutralise complètement ici pour ne pas interférer avec card-hitarea. */
.news-card .read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  font-size: 0.85rem;
  transition: gap 0.3s;
  margin-top: 1rem;
  pointer-events: none;
}

/* Neutralise le <a> crayon éventuellement injecté par getElement() dans read-more.
   L'édition est gérée par .card-edit-trigger hors de ce span. */
.news-card .read-more a {
  pointer-events: none;
  display: none;
}

.news-card:hover .read-more {
  gap: 0.75rem;
}

.news-card .read-more svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   QUOTE SECTION
   ========================================================================== */

.quote-section {
  position: relative;
  overflow: hidden;
}

.quote-section .bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--bg), hsla(var(--bgh), var(--bgs), var(--surface-l), 0.2), var(--bg));
}

.quote-section .inner {
  position: relative;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.quote-icon {
  color: hsla(var(--ph), var(--ps), var(--pl), 0.3);
  margin-bottom: 2rem;
}

.quote-section blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: hsla(var(--fgh), var(--fgs), var(--fgl), 0.9);
}

.quote-section .divider {
  width: 4rem;
  height: 1px;
  background: hsla(var(--ph), var(--ps), var(--pl), 0.4);
  margin: 2rem auto;
}

.quote-section .attribution {
  color: var(--primary);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ==========================================================================
   PORTRAIT SECTION
   ========================================================================== */

.portrait-section {
  background: hsla(var(--bgh), var(--bgs), var(--surface-l), 0.3);
}

.portrait-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.portrait-img {
  position: relative;
}

.portrait-img img {
  width: 100%;
  border-radius: 2px;
  box-shadow: 0 20px 60px -15px var(--shadow-lg);
  display: block;
}

/* Ornement décoratif */
.portrait-img .deco {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 8rem;
  height: 8rem;
  border: 1px solid hsla(var(--ph), var(--ps), var(--pl), 0.2);
  border-radius: 2px;
}

.portrait-text .tag {
  color: var(--primary);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.portrait-text h2 {
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 2rem;
  line-height: 1.2;
}

.section.portrait-text {
  padding:0;
}

.portrait-text h2 span {
  font-style: italic;
}

.portrait-text .desc {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 1.25rem !important;
  font-size: 0.95rem;  
}

.portrait-text .desc p {
  margin-bottom: 1.25rem;
}

.portrait-text .desc em {
  font-style: italic;
}

.portrait-text .btn-outline {
  margin-top: 1rem;
}

@media (max-width: 1024px) {
  .portrait-grid {
    grid-template-columns: 1fr;
  }

  .portrait-img .deco {
    display: none;
  }
}

/* ==========================================================================
   WORKS GRID
   ========================================================================== */

.works-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.work-card {
  position: relative;
  padding: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.5s;
  overflow: hidden;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.work-card:hover {
  border-color: hsla(var(--ph), var(--ps), var(--pl), 0.4);
}

/* Stretched link : le <a> couvre toute la carte via ::after */
.work-card__link {
  position: static;
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}

.work-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Le lien est focusable au clavier : outline visible sur la carte entière */
.work-card__link:focus-visible::after {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

/* Contenu des work-cards : au-dessus du ::after étiré */
.work-card .count,
.work-card .label,
.work-card .sub,
.work-card .bar {
  position: relative;
  z-index: 2;
}

.work-card .count {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--primary);
  margin-bottom: 0.5rem;
  display: block;
}

.work-card .label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}

.work-card .sub {
  font-size: 0.75rem;
  color: var(--muted);
  display: block;
}

/* Responsive */
@media (max-width: 768px) {
  .works-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .works-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   COMPATIBILITÉ LEGACY — masquage éléments ancien template sur home.cfm
   Le banner et la citation de l'ancien template (inc_banner.cfm, inc_citation.cfm)
   sont rendus par inc_header.cfm. Dans le nouveau layout T1, ils sont remplacés
   par .hero et .quote-section. On les masque sur body.home.
   ========================================================================== */
body.home #banner,
body.home #quotation {
  display: none !important;
}

/* Suppression du padding-top legacy du #conteneur sur la home */
body.home #conteneur {
  padding-top: 0 !important;
}