/* ========== Accueil laverdarie ========== */
.home {
  --page-max-w: 1200px;
  --grid-gap: 16px;
  --card-radius: 12px;
  --card-pad: 12px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);

  /* Palettes optionnelles pour cartes colorées */
  --sable:   #f4efe8;
  --bleu:    #e9f0fb;
  --vert:    #eaf4ed;
  --rouille: #f7ece7;
  --prune:   #f2eaf4;
  --gris:    #f1f3f5;

  /* Panneau d’intro */
  /*--panel:   #f7f3e8;*/
  --panel: #f5f2ea;
	/*Lin clair : #f2f1ec
	Ivoire doux : #f5f2ea
	Gris chaud clair : #f3f2ef
	Papier mat : #f6f4f0*/
}

/* Neutralise d’éventuels layouts globaux et réduit l’espace avant footer */
main.content.home {
  display: block;
  grid-column: 1 / -1;
  padding-bottom: 8px;
  min-height: auto;
}

/* ===== Grilles ===== */
.home-grid {
  max-width: var(--page-max-w);
  margin: 0 auto;
  display: grid;
  gap: var(--grid-gap);
  padding: 0 var(--grid-gap);
}

/* Intro = pleine largeur */
.home-grid--intro {
  grid-template-columns: 1fr;
}
.home-intro-panel {
  grid-column: 1 / -1;
  background: var(--panel);
  border: 1px solid #e3ded4;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 1.2vw + 10px, 22px);
}
#home-hero-title {
  margin: 0 0 .5em;
  font-family: "EB Garamond", serif;
  font-size: clamp(1.4rem, 1vw + 1.2rem, 1.8rem);
  line-height: 1.25;
}
.home-intro-panel p {
  margin: 0;
  font-size: clamp(1rem, .3vw + .98rem, 1.06rem);
  line-height: 1.55;
  color: #2b2b2b;
}

.home-intro-panel h1 { margin: 0 0 6px; line-height: 1.2; }
.home-intro-panel p  { margin: 0; max-width: 65ch; line-height: 1.5; }

/* Cartes = 4 colonnes desktop, 2 tablette, 1 mobile */
.home-grid--cards {
  grid-template-columns: repeat(4, 1fr);
}

/* ===== Grille : 4 colonnes (tu as 8 cartes = 2 rangées) ===== */
.home-grid--cards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .home-grid--cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .home-grid--cards { grid-template-columns: 1fr; } }

/* ===== Carte ===== */
.home-card {
  background: white;
  border: 1px solid #ececec;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow);
  overflow: clip;
  display: flex;
  padding: 0;                 /* pas de padding interne autour de l’image */
  overflow: hidden;           /* pour que l’image suive l’arrondi */
}

.home-card.card--sable  { background: var(--sable); }
.home-card.card--bleu   { background: var(--bleu); }
.home-card.card--vert   { background: var(--vert); }
.home-card.card--rouille{ background: var(--rouille); }
.home-card.card--prune  { background: var(--prune); }
.home-card.card--gris   { background: var(--gris); }

/* Lien couvrant */
.card-hit {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Média : ratio fixe + crop propre, vignettes plus petites */
.card-media {
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin: 0;                  /* supprime la marge du <figure> */
  aspect-ratio: var(--thumb-ratio, 16/9);
  line-height: 0;             /* évite un micro-espace fantôme */
  border: 0;                  /* enlève une éventuelle bordure */
}

/* Image qui remplie tout le bloc */
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Corps */
.card-body {
  padding: 10px 12px;         /* ajuste si tu veux encore plus serré */
}

/* Supprime toute marge entre image et légende */
.card-title, .card-text {
  margin-top: 0.35em;         /* léger espace interne */
}
.card-title { margin-bottom: .25em; }
.card-text  { margin-bottom: .35em; }

.card-text {
  margin: 0 0 .5em;
  font-size: var(--text-size);
  line-height: 1.4;
  color: #334;
  /* Clamp en 2 lignes max */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-link {
  font-size: .9em;
  text-decoration: underline;
}

/* Petites retouches d’espacement quand 4 colonnes */
@media (min-width: 1025px) {
  .home-card { border-radius: var(--thumb-radius); }
}

/* Masquer "Voir la section" si présent dans le HTML */
.home-card .card-link { display: none; }

/* Hover / focus */
.home-card:hover,
.home-card:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.home-card .card-hit:focus-visible {
  outline: 3px solid rgba(0,0,0,.3);
  outline-offset: 2px;
  border-radius: var(--card-radius);
}

/* ===== Responsif ===== */
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-intro-panel { grid-column: 1 / -1; } /* intro pleine largeur */
}
@media (max-width: 700px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* ===== Marges basses : pas de grand vide avant le footer ===== */
.content.home .home-grid { margin-bottom: 24px; }
.content.home section:last-of-type { margin-bottom: 8px; }
.content.home .home-grid > article { margin-bottom: 0; }


/* Respecte la préférence utilisateur pour réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .home-card { transition: none; }
}
/* Intro plus lisible (taille renforcée) */
.home-intro-panel h1 {
  font-size: clamp(1.8rem, 2.2vw + 0.6rem, 2.4rem);
  line-height: 1.15;
}

.home-intro-panel p {
  font-size: clamp(1.05rem, 0.6vw + 0.8rem, 1.2rem);
  line-height: 1.55;
  max-width: none !important; /* override des limites globales (ex: 60–70ch) */
  width: 100%;
  max-inline-size: none;       /* ceinture+bretelles si le thème l’utilise */
}
/* Au cas où le H1/les blocs héritent aussi d'une mesure */
.home-intro-panel > * {
  max-width: none !important;
}

/* Espace sous la première ligne (intro + image) */
.home-grid:first-of-type {
  margin-bottom: 24px; /* Ajuste à ton goût : 20–32px */
}

/* ==============================
   Effet de survol plus marqué
   ============================== */

/* Zoom léger + fondu de l’image */
.home-card .card-media img {
  transition: transform 0.6s ease, filter 0.6s ease;
}

.home-card:hover .card-media img {
  transform: scale(1.08);       /* zoom plus fort (1.08 au lieu de 1.03) */
  filter: brightness(1.05);     /* éclaire un peu l’image */
}

/* Variante si tu préfères un effet "teinte colorée" sur la carte */
.home-card:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  transition: all 0.4s ease;
}

/* Empêche la carte de "trembler" quand le pointeur quitte */
.home-card {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ===== Modificateur ratio 4:3 pour les grilles type sommaire ===== */
.home-grid.cards--43 .card-media {
  /* même gabarit que les cartes 16:9 mais en 4/3 */
  aspect-ratio: 4 / 3;
  background: #0000000f; /* léger fond si "contain" laisse des bandes */
}

.home-grid.cards--43 .card-media img {
  width: 100%;
  height: 100%;
  /* choix A: ne PAS rogner (barres possibles) */
  object-fit: contain;
  /* => si tu préfères remplir et rogner un peu, remplace par: object-fit: cover; */
}

.home-intro-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Variante compacte du panneau titre (scopée à la section) */
.home-grid--intro.intro--compact .home-intro-panel {
  padding: clamp(8px, 1vw + 6px, 14px);
}
.home-grid--intro.intro--compact .home-intro-panel h1 {
  margin: 0; /* retire l’espace sous le titre */
  font-size: clamp(1.6rem, 1.6vw + 0.6rem, 2.1rem); /* un poil plus petit */
  line-height: 1.2;
}

/* Panneau d’intro commun */
.home-intro-panel {
  background: var(--panel, #f5f2ea);
  color: var(--ink, #1f2937);
  border: 1px solid var(--panel-line, transparent);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}

/* Panneau d’intro commun */
.home-intro-panel{
  background: var(--panel, #f5f2ea);
  color: var(--ink, #1f2937);
  border: 1px solid var(--panel-line, transparent);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}

#cns-hero-title { letter-spacing: 2px !important; }

section[aria-label="Titre Concours de la Résistance"] > .home-intro-panel {
  background-color: #16233a;   /* bleu nuit foncé */
  color: #ffffff;
  border-color: #455a7a;
}

/* Panneau bleu nuit */
.panel--bleu-nuit{
  background-color: #233550;   /* bleu nuit acier */
  color: #fff;
  border-color: #4c678a;
}

/* (optionnel) lisibilité du titre sur fond sombre */
.panel--bleu-nuit #cns-hero-title{
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ===== [FINAL OVERRIDE – INTRO PANEL] ===== */
/* Base neutre (si aucune variante n'est posée) */
.home-intro-panel{
  background:#f5f2ea !important;     /* neutre papier */
  color:#1f2937 !important;
  border:1px solid #e3ded4 !important;
  border-radius:12px;
  padding:12px 16px;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Variante BLEU CLAIR (texte sombre) */
.home-intro-panel.panel--bleu{
  background:#e9f0fb !important;
  color:#16324a !important;
  border-color:#cfe0ff !important;
}

/* Variante BLEU NUIT (texte blanc) */
.home-intro-panel.panel--bleu-nuit{
  background:#1B4E93 !important;     /* bleu nuit foncé et lisible */
  color:#ffffff !important;
  border-color:#455a7a !important;
}
.home-intro-panel.panel--bleu-nuit #cns-hero-title{
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* Cartes "texte seul" qui remplissent bien le cadre */
.card--textfill .card-body{
  /* hauteur mini pour donner de la matière au cadre */
  min-height: clamp(180px, 22vw, 260px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* change en center si tu veux centrer verticalement */
}

/* Titre un peu plus gros */
.card--textfill .card-title{
  font-size: clamp(1.1rem, 0.8vw + 1rem, 1.5rem);
  line-height: 1.25;
  margin-bottom: .35em;
}

/* Texte sans coupe, plus grand et confortable */
.card--textfill .card-text{
  -webkit-line-clamp: unset; /* enlève la coupure à 2 lignes */
  display: block;
  overflow: visible;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.2rem);
  line-height: 1.6;
  margin: 0; /* déjà de l’air via .card-body */
}

/* (Option) si tu veux que le texte "pousse" pour remplir tout l'espace */
.card--textfill .card-text{ flex: 1; }

/* ——— CNRD/FFL (page 1 qui n'a que home.css) : neutraliser tout fond blanc interne ——— */
.cnrd-2004 .g1418-header .page-title,
.cnrd-2004 .g1418-header .page-subtitle{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit;
}

/* Variante : activer le mode “pile” uniquement quand .panel--stack est présent */
.home .panel--stack {
  display: grid;
  grid-template-columns: 1fr;
  text-align: left;
  padding: 16px 18px;
  background: var(--panel, #f5f2ea);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.home .panel--stack h1,
.home .panel--stack h2 { 
  margin: 0 0 8px 0;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.2;
}
.home .panel--stack p { margin: 0; max-width: 65ch; line-height: 1.55; }