/* === GND front.css v0.7.4 === */

/* Variables globales */
:root{
  --gnd-container: 1480px;
  --gnd-gutter: clamp(14px, 2vw, 24px);
  --gnd-radius: 14px;
  --gnd-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* Wrapper général */
.gnd-home{
  width:100%;
  color: var(--gnd-text, #0e0f12);
}

/* H2 génériques (scopé plugin) */
.gnd-home h2{
  font-size: clamp(var(--gnd-h2-min,1.15rem),
                   var(--gnd-h2-vw,2.2vw),
                   var(--gnd-h2-max,1.75rem));
  line-height: 1.2;
}

/* ---------- Sections ---------- */
.gnd-sec{
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: transparent !important;
}
.gnd-sec::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  left:50%;
  width:100vw;
  right:auto;
  transform: translateX(-50%);
  margin:0;
  background: var(--page_bg, transparent);
  pointer-events:none;
}
.gnd-sec > .gnd-wrap{
  box-sizing:border-box;
  max-width: var(--gnd-container);
  width:100%;
  margin-inline:auto;
  /* Espacement vertical pilotable */
  padding: var(--gnd-sec-pad-y, clamp(18px,3.2vw,40px)) var(--gnd-gutter);
}

/* ---------- Titres de section ---------- */
.gnd-sec .gnd-sec-title{
  margin-top: var(--gnd-sec-title-mt, 0);
  margin-bottom: var(--gnd-sec-title-mb, clamp(18px,1.8vw,26px));
  font-size: clamp(var(--gnd-sec-min,1.25rem),
                   var(--gnd-sec-vw,2.1vw),
                   var(--gnd-sec-max,1.6rem));
  line-height: var(--gnd-sec-title-lh, 1.2);
  color: var(--title_color, var(--gnd-heading, #6d5efc)) !important;
}
.gnd-sec .gnd-sec-title + .gnd-grid,
.gnd-sec .gnd-sec-title + .gnd-hero{
  margin-top: var(--gnd-after-title-mt, clamp(10px,1vw,16px));
}

/* ---------- Grilles ---------- */
.gnd-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gnd-gutter);
}

/* Grille mixte (1re ligne ≠ suivantes) */
.gnd-grid.mixed-rows{
  grid-template-columns: repeat(var(--gnd-cols,4), minmax(0,1fr));
}
.gnd-grid.mixed-rows > .gnd-card.mixed-first{
  grid-column: 1 / -1;
}

/* ---------- Cartes ---------- */
.gnd-card{
  display:grid;
  /* container query pour adapter la typo overlay selon la largeur de VIGNETTE */
  container-type: inline-size;
  /* on supprime l’interstice pour éviter les liserés */
  gap: 0;
  background: var(--section_bg, var(--gnd-surface, #fff));
  border-radius: var(--gnd-radius);
  overflow:hidden;
  box-shadow: var(--gnd-shadow);
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
  will-change: transform;
}
.gnd-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 1px 0 rgba(0,0,0,.06);
}

/* Cover : arrondis + masquage pour ne plus voir de liseré */
.gnd-card .gnd-cover{
  position:relative; display:block;
  border-top-left-radius: var(--gnd-radius);
  border-top-right-radius: var(--gnd-radius);
  overflow:hidden;
  background: transparent;
}
.r-16-9 .gnd-cover{ aspect-ratio:16/9; }
.r-4-3  .gnd-cover{ aspect-ratio:4/3;  }
.r-1-1  .gnd-cover{ aspect-ratio:1/1;  }
.r-3-4  .gnd-cover{ aspect-ratio:3/4;  }
.r-2-3  .gnd-cover{ aspect-ratio:2/3;  }
.gnd-thumb{ width:100%; height:100%; object-fit:cover; display:block; }

/* Titres des cartes : poids + lisibilité */
.gnd-card .gnd-title,
.gnd-card .gnd-title a{
  font-weight:700;
  letter-spacing:-0.005em;
}

/* Titres classiques (hors overlay) — via .gnd-body */
.gnd-card:not(.overlay) .gnd-body{
  padding: var(--gnd-card-pad, clamp(12px,1.4vw,18px))
           var(--gnd-card-pad-x, clamp(14px,1.5vw,20px));
  background: var(--section_bg, var(--gnd-surface, #fff));
  border-bottom-left-radius: var(--gnd-radius);
  border-bottom-right-radius: var(--gnd-radius);
  transition: background-color .22s ease, color .18s ease;
}
.gnd-card:not(.overlay) .gnd-title{
  margin:0 0 .2rem;
  font-size: clamp(var(--gnd-card-min,1rem),
                   var(--gnd-card-vw,1.35vw),
                   var(--gnd-card-max,1.125rem));
  line-height: var(--gnd-card-title-lh, 1.2);
}
.gnd-card:not(.overlay) .gnd-title a{
  color: var(--gnd-link, #0e0f12);
  text-decoration:none;
  transition: color .18s ease, text-decoration-color .18s ease;
  text-underline-offset:3px;
  text-decoration-thickness:2px;
  text-decoration-color:transparent;
}

/* Hover demandé : bandeau bas mauve plein + texte blanc */
.gnd-card:not(.overlay):hover .gnd-body{
  background: var(--gnd-link-hover, #9a92ff);
}
.gnd-card:not(.overlay):hover .gnd-title a,
.gnd-card:not(.overlay):hover .gnd-meta{
  color:#fff !important;
}
.gnd-card:not(.overlay) .gnd-title a:hover,
.gnd-card:not(.overlay) .gnd-title a:focus-visible{
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Meta */
.gnd-meta{ opacity:.8; font-size:.9em; margin:0; }

/* Overlay : titres sur l’image */
.gnd-card.overlay{ background:transparent; box-shadow:none; position:relative; }
.gnd-card .gnd-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.58), rgba(0,0,0,0) 55%);
  transition: opacity .25s ease;
  /* suit l’arrondi haut pour zéro liseré */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.gnd-card.overlay:hover .gnd-cover::after{ opacity:.95; }

/* Titre sur l'image — base (petites vignettes) */
.gnd-card .gnd-title.on-cover{
  position:absolute; left:.9rem; right:.9rem; bottom:.75rem;
  margin:0;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
  font-size: clamp(var(--gnd-overlay-min,1rem),
                   var(--gnd-overlay-vw,1.35vw),
                   var(--gnd-overlay-max,1.125rem));
  line-height: var(--gnd-overlay-lh, 1.15);
}

/* Titre sur l'image — palier intermédiaire auto (vignette >= 360px) */
@container (min-width: 360px){
  .gnd-card .gnd-title.on-cover{
    font-size: clamp(var(--gnd-overlay-mid-min,1.05rem),
                     var(--gnd-overlay-mid-vw,1.8vw),
                     var(--gnd-overlay-mid-max,1.35rem));
  }
}

/* ---------- HERO / Grosses cartes ---------- */
.gnd-card.featured .gnd-title,
.gnd-hero .hero-main .gnd-title{
  font-size: clamp(var(--gnd-big-min,1.15rem),
                   var(--gnd-big-vw,2.6vw),
                   var(--gnd-big-max,2rem));
  line-height: var(--gnd-big-title-lh, 1.2);
}
.gnd-card.featured .gnd-title.on-cover,
.gnd-hero .hero-main .gnd-title.on-cover{
  font-size: clamp(var(--gnd-big-min,1.15rem),
                   var(--gnd-big-vw,2.6vw),
                   var(--gnd-big-max,2rem));
  font-weight:800;
  letter-spacing:-0.01em;
}

/* ---------- Bloc pub ---------- */
.gnd-ad .ad-slot{
  display:block; min-height:90px;
  background:#111; border:1px dashed #444;
  border-radius: var(--gnd-radius);
}

/* ---------- Ratios horizontaux supplémentaires ---------- */
.r-2-1  .gnd-cover { aspect-ratio: 2 / 1; }
.r-3-2  .gnd-cover { aspect-ratio: 3 / 2; }
.r-3-1  .gnd-cover { aspect-ratio: 3 / 1; }
.r-21-9 .gnd-cover { aspect-ratio: 21 / 9; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .gnd-hero{ grid-template-columns:1fr; }
  .gnd-grid.featured-first{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .gnd-grid.featured-first .gnd-card.featured{ grid-row:auto; }
  .gnd-grid.mixed-rows{ grid-template-columns: 1fr; }
  .gnd-grid.mixed-rows > .gnd-card.mixed-first{ grid-column:auto; }
}
@media (max-width:720px){
  .gnd-grid{ grid-template-columns:1fr; }
}

/* ---------- Sécurité Astra ---------- */
.ast-above-header.ast-above-header-bar,
.ast-header-break-point #masthead.site-header .ast-above-header-bar{
  margin-bottom:0 !important;
}

/* ---------- Accessibilité ---------- */
.gnd-card a:focus-visible{
  outline:2px solid var(--gnd-link, #7c5cff);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Réduit les animations si demandé ---------- */
@media (prefers-reduced-motion: reduce){
  .gnd-card,
  .gnd-card .gnd-cover .gnd-thumb,
  .gnd-card.overlay .gnd-cover::after,
  .gnd-hero .gnd-hero-side .gnd-card{
    transition:none !important;
  }
}

/* === GND Ads === */

.gnd-ad .ad-creative{
  display:block;
  width:100%;
}

.gnd-ad .ad-link{
  display:block;
  width:100%;
  border-radius: var(--gnd-radius);
  overflow:hidden;
  box-shadow: var(--gnd-shadow);
  background: #000; /* évite flash blanc aux bords arrondis */
}

/* Desktop/tablette : image entière, responsive */
.gnd-ad .ad-img{
  display:block;
  width:100%;
  height:auto;
}

/* Mobile : on montre la moitié centrée de l’image en largeur */
@media (max-width: 720px){
  .gnd-ad .ad-link{
    position:relative;
  }
  .gnd-ad .ad-img{
    width:200%;         /* on zoome à 200% */
    max-width:none;
    height:auto;
    transform: translateX(-25%); /* décale pour cadrer au centre : on voit la moitié centrale */
  }
}

/* Slot placeholder (fallback) */
.gnd-ad .ad-slot{
  display:block; min-height:120px;
  background:#111; border:1px dashed #444;
  border-radius: var(--gnd-radius);
}