/* ============================================================
   VENITE ADOREMUS — Page d'accueil (sections)
   Scopé sous .va-accueil (le contenu de la page d'accueil).
   La base, le conteneur .wrap, la nav et le footer sont dans
   chrome.css (site-wide). Dépend de venite-tokens.css + venite-ds.css.
   ============================================================ */

/* Pas d'espace WP entre les bandes ni autour du module : la maquette colle
   les sections. Neutralise le `margin-block-start: 24px` de .is-layout-flow. */
.va-accueil > .wp-block-group { margin-block: 0; }
.va-accueil .module-frame > * { margin-block-start: 0; }

/* Le module ne doit PAS animer un transform (.reveal) : un ancêtre transformé
   crée un bloc-conteneur qui casse le position:fixed des dropdowns du plugin
   (la liste s'affichait décalée). On neutralise l'animation sur ce conteneur. */
.va-accueil .module-frame.reveal { animation: none; transform: none; }

/* ---------- HERO ---------- */
/* Refonte « De l'aube à la nuit » (cf. accueil.html v2) : le ciel s'éclaircit
   vers le bas (l'aube) et un halo chaud de soleil levant monte du coin bas-droite.
   Le soleil dessiné-main pointe en haut-droite du clocher (pas directement
   derrière). Le clocher est agrandi par rapport à la maquette. */
.va-accueil .hero { position: relative; min-height: calc(100vh - 72px); display: flex; flex-direction: column; justify-content: center; color: var(--etoile); overflow: hidden;
  background:
    radial-gradient(56% 38% at 80% 100%, oklch(0.88 0.13 80 / 0.92) 0%, oklch(0.77 0.16 64 / 0.52) 30%, oklch(0.56 0.13 50 / 0.18) 54%, transparent 72%),
    linear-gradient(to bottom, oklch(0.27 0.075 268) 0%, oklch(0.34 0.09 262) 32%, oklch(0.42 0.10 256) 56%, oklch(0.52 0.105 250) 78%, oklch(0.62 0.10 246) 100%); }
/* Connecté : la barre d'admin WP (32px) pousse le contenu → on la déduit aussi. */
body.admin-bar .va-accueil .hero { min-height: calc(100vh - 72px - 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .va-accueil .hero { min-height: calc(100dvh - 70px - 46px); }
}
/* Décor illustré : soleil (haut-droite, z-0), clocher devant (z-1), lune-crème (z-0). */
.va-accueil .hero__deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.va-accueil .hero__deco img { position: absolute; display: block; height: auto; }
.va-accueil .hero__sun { right: 0; bottom: 20%; width: clamp(220px, 35vw, 380px); z-index: 0; opacity: 0.98; filter: drop-shadow(0 0 34px oklch(0.86 0.15 74 / 0.5)); }
.va-accueil .hero__steeple { right: 3%; bottom: 0; width: clamp(160px, 24vw, 290px); z-index: 1; filter: drop-shadow(0 8px 26px oklch(0.16 0.05 262 / 0.6)); }
.va-accueil .hero__moon { top: 13%; left: 13%; width: clamp(38px, 4vw, 52px); z-index: 0; opacity: 0.9; filter: drop-shadow(0 0 14px oklch(0.92 0.05 90 / 0.4)); }
/* Lever de soleil : démarre tout en bas (clippé par le bas du hero, à l'horizon),
   puis monte lentement jusqu'à sa position en se révélant. */
@media (prefers-reduced-motion: no-preference) {
  .va-accueil .hero__sun { animation: va-rise-sun 3.8s cubic-bezier(.16,.84,.36,1) both; }
}
@keyframes va-rise-sun {
  from { transform: translateY(300px); opacity: 0; }
  to   { transform: translateY(0); opacity: 0.98; }
}
.va-accueil .hero__in { position: relative; z-index: 2; padding: var(--sp-12) 0 var(--sp-16); max-width: 760px; }
.va-accueil .hero__logo { height: 84px; margin-bottom: var(--sp-6); filter: drop-shadow(0 6px 34px oklch(0.82 0.15 80 / 0.5)); }
.va-accueil .hero h1 { font-size: clamp(3.2rem, 9vw, 6.5rem); font-weight: 500; letter-spacing: -0.025em; line-height: 0.98; color: var(--etoile); }
.va-accueil .hero h1 em { font-style: italic; color: var(--or-400); }
.va-accueil .hero__sub { font-size: var(--t-md); color: var(--etoile-soft); max-width: 46ch; margin: var(--sp-5) 0 0; line-height: 1.55; }
.va-accueil .hero__when { display: inline-flex; align-items: center; gap: 0.5em; margin-top: var(--sp-6); color: var(--or-300); font-weight: 600; font-size: var(--t-sm); letter-spacing: 0.04em; }
.va-accueil .hero__cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
.va-accueil .va-btn--lg { font-size: var(--t-base); padding: 0.85em 1.6em; }
.va-accueil .scrollcue { position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); color: var(--etoile-soft); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; display: flex; flex-direction: column; align-items: center; gap: 0.4em; z-index: 2; cursor: pointer; text-decoration: none; transition: opacity .2s ease; }
.va-accueil .scrollcue:hover { opacity: 1; color: var(--or-300); }
.va-accueil .scrollcue svg { width: 20px; height: 20px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100%{transform:translateY(0);opacity:.6} 50%{transform:translateY(5px);opacity:1} }

/* ---------- HERO · mobile ---------- */
/* Le décor (soleil + clocher) reste un accent de coin net, ancré en bas-droite
   (cf. accueil.html), juste réduit. Clocher gardé un peu plus grand que la
   maquette. CTA resserrés ; indice de défilement masqué. */
@media (max-width: 720px) {
  /* Hauteur = viewport DYNAMIQUE (dvh) : suit la barre d'outils du navigateur.
     Au chargement (barre affichée) le hero tient pile dans l'écran (clocher
     visible, pas trop haut) ; quand la barre se replie au scroll, il grandit
     pour remplir. Meilleur compromis que 100vh (trop haut au chargement) ou
     svh (trop court une fois la barre repliée), sur Safari comme Chrome iOS. */
  .va-accueil .hero { min-height: calc(100dvh - 70px); }
  /* Padding horizontal rétabli (sinon texte collé aux bords). */
  .va-accueil .hero__in { padding: var(--sp-10) var(--sp-5) var(--sp-16); max-width: 100%; }
  .va-accueil .hero__logo { height: 60px; margin-bottom: var(--sp-5); }
  .va-accueil .hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .va-accueil .hero__sub { font-size: var(--t-base); max-width: 100%; }
  /* CTA empilés (l'un sous l'autre), largeur selon le contenu. */
  .va-accueil .hero__cta { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .va-accueil .hero__cta .va-btn--lg { font-size: var(--t-sm); padding: 0.85em 1.2em; }
  .va-accueil .hero__sun { width: clamp(140px, 42vw, 200px); right: -5%; bottom: 10%; }
  .va-accueil .hero__steeple { width: clamp(104px, 30vw, 150px); right: 3%; }
  /* Lune déplacée à droite (en haut-gauche elle chevauchait le logo). */
  .va-accueil .hero__moon { width: clamp(26px, 7vw, 32px); top: 9%; left: auto; right: 8%; }
  .va-accueil .scrollcue { display: none; }
}

/* ---------- bands ---------- */
.va-accueil .band { padding: var(--sp-12) 0; }
.va-accueil .band--creme { background: var(--creme); }
.va-accueil .band--brume { background: var(--brume); }
.va-accueil .band--nuit { background: var(--nuit-900); color: var(--etoile); position: relative; overflow: hidden; }
.va-accueil .band--nuit h2, .va-accueil .band--nuit h3 { color: var(--etoile); }
.va-accueil .band--or { background: linear-gradient(135deg, var(--or-700), var(--or-800)); color: #fff; }
.va-accueil section,
.va-accueil .band { scroll-margin-top: 84px; }
.va-accueil .kicker-c { color: var(--or-700); display: inline-block; margin-bottom: var(--sp-3); }
.va-accueil .band--nuit .kicker-c, .va-accueil .band--or .kicker-c { color: var(--or-300); }
.va-accueil .band--or .kicker-c { color: oklch(0.97 0.04 90); }

/* Kicker : doit primer sur .quoi p / .pourquoi p / .ettoi p / .module-head p
   (qui sont en 0,2,1 et écrasaient la taille + la couleur du kicker). */
.va-accueil .band .va-kicker,
.va-accueil .module-head .va-kicker {
  font-size: var(--t-xs);
  line-height: 1.3;
  color: var(--or-700);
  margin: 0 0 var(--sp-3);
}
.va-accueil .band--nuit .va-kicker,
.va-accueil .when-card .va-kicker { color: var(--or-300); }
.va-accueil .band--or .va-kicker { color: oklch(0.97 0.04 90); }

/* Bouton fantôme : on retire le chevron (espace vide inutile). */
.va-accueil .va-btn--ghost > svg.icon { display: none; }

/* ---------- QUOI ---------- */
.va-accueil .quoi { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-10); align-items: center; }
@media (max-width: 900px){ .va-accueil .quoi { grid-template-columns: 1fr; gap: var(--sp-8); } }
.va-accueil .quoi h2 { font-size: var(--t-2xl); margin-bottom: var(--sp-4); }
.va-accueil .quoi p { color: var(--encre-soft); font-size: var(--t-md); margin: 0 0 var(--sp-4); }
.va-accueil .stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.va-accueil .stat { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.va-accueil .stat b,
.va-accueil .stat .va-stat-num { font-family: var(--serif); font-size: 3rem; font-weight: 600; color: var(--or-700); line-height: 1; display: block; margin: 0; }
.va-accueil .stat span,
.va-accueil .stat .va-stat-label { font-size: var(--t-sm); color: var(--encre-soft); margin: 0.4em 0 0; display: block; }
.va-accueil .stat--wide { grid-column: 1 / -1; }

/* ---------- MODULE « Trouver un lieu » (cadre autour du shortcode) ---------- */
.va-accueil .module-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.va-accueil .module-head h2 { font-size: var(--t-2xl); }
.va-accueil .module-head p { color: var(--encre-soft); margin: var(--sp-2) 0 0; }
.va-accueil .module-frame { background: var(--blanc); border-radius: var(--r-xl); padding: var(--sp-5); border: 1px solid var(--ligne); box-shadow: var(--sh-lg); }
/* Mobile : on retire l'habillage « carte » du cadre (le double padding
   .wrap + .module-frame rendait la carte/liste trop étroite). Le module
   s'affiche directement dans le .wrap → aligné avec le titre et les autres
   sections. On garde le padding du .wrap intact pour cet alignement. */
@media (max-width: 720px) {
  .va-accueil .module-frame { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
}

/* ---------- POURQUOI ---------- */
.va-accueil .pourquoi { text-align: center; max-width: 760px; margin: 0 auto; }
.va-accueil .pourquoi .verse { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; color: var(--etoile); text-wrap: balance; max-width: 18ch; margin: var(--sp-5) auto 0; }
.va-accueil .pourquoi .verse .hl { color: var(--or-400); }
.va-accueil .pourquoi .ref { display: block; margin-top: var(--sp-5); color: var(--or-300); font-family: var(--sans); font-style: normal; font-size: var(--t-sm); letter-spacing: 0.16em; text-transform: uppercase; }
.va-accueil .pourquoi p { color: var(--etoile-soft); font-size: var(--t-md); margin: var(--sp-8) auto 0; max-width: 52ch; }

/* ---------- COMMENT ---------- */
/* H2 à la même taille que les autres sections (le style inline du bloc ne
   s'appliquait pas) + kicker « Comment ? » en orange (robuste, #id). */
.va-accueil #comment h2 { font-size: var(--t-2xl); line-height: 1.12; }
.va-accueil #comment .va-kicker { color: var(--or-700); }
.va-accueil .comment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-top: var(--sp-8); }
@media (max-width: 900px){ .va-accueil .comment-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .va-accueil .comment-grid { grid-template-columns: 1fr; } }
.va-accueil .ccard { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.va-accueil .ccard__ico { width: 2.6em; height: 2.6em; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: var(--or-100); color: var(--or-800); margin-bottom: var(--sp-4); }
.va-accueil .ccard h3 { font-size: var(--t-lg); margin-bottom: var(--sp-2); }
.va-accueil .ccard p { color: var(--encre-soft); font-size: var(--t-sm); margin: 0; }
.va-accueil .comment-note { margin-top: var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--or-100); border-radius: var(--r-lg); color: var(--or-800); font-size: var(--t-md); display: flex; align-items: center; gap: var(--sp-4); }
.va-accueil .comment-note svg { flex: 0 0 auto; width: 1.6em; height: 1.6em; }

/* ---------- QUAND & OU ---------- */
.va-accueil .twocol { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--sp-10); align-items: start; }
@media (max-width: 900px){ .va-accueil .twocol { grid-template-columns: 1fr; gap: var(--sp-8); } }
.va-accueil .when-card { background: var(--nuit-900); color: var(--etoile); border-radius: var(--r-xl); padding: var(--sp-8); position: relative; overflow: hidden; }
.va-accueil .when-card .va-kicker { color: var(--or-300); }
.va-accueil .when-card .big { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 600; margin: var(--sp-3) 0; line-height: 1.05; }
.va-accueil .when-card p { color: var(--etoile-soft); margin: 0; }
.va-accueil .timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.va-accueil .timeline::before { content:""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--or-500), var(--ligne)); }
.va-accueil .timeline li,
.va-accueil .timeline .va-tl-item { position: relative; padding: 0 0 var(--sp-6) var(--sp-8); }
.va-accueil .timeline li:last-child,
.va-accueil .timeline .va-tl-item:last-child { padding-bottom: 0; }
.va-accueil .timeline li::before,
.va-accueil .timeline .va-tl-item::before { content:""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--or-500); border: 3px solid var(--creme); box-shadow: 0 0 0 1px var(--or-500); }
.va-accueil .timeline .yr { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; color: var(--or-800); }
.va-accueil .timeline .ev { color: var(--encre-soft); font-size: var(--t-sm); margin-top: 0.2em; }

/* ---------- ET TOI ---------- */
.va-accueil .ettoi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
@media (max-width: 900px){ .va-accueil .ettoi { grid-template-columns: 1fr; } }
.va-accueil .ettoi h2 { font-size: var(--t-3xl); color: #fff; line-height: 1; }
.va-accueil .ettoi p { color: oklch(0.98 0.02 90 / 0.92); font-size: var(--t-md); margin: var(--sp-4) 0 0; }
.va-accueil .ettoi__acts { display: flex; flex-direction: column; gap: var(--sp-3); }
.va-accueil .act { display: flex; gap: var(--sp-4); align-items: flex-start; background: oklch(1 0 0 / 0.12); border: 1px solid oklch(1 0 0 / 0.2); border-radius: var(--r-lg); padding: var(--sp-5); color: #fff; }
.va-accueil .act svg { flex: 0 0 auto; width: 1.5em; height: 1.5em; margin-top: 0.15em; }
.va-accueil .act b { display: block; font-size: var(--t-md); font-family: var(--serif); }
.va-accueil .act span { font-size: var(--t-sm); color: oklch(1 0 0 / 0.85); }

/* entrée subtile au scroll si supporté */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .va-accueil .reveal { animation: va-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
    @keyframes va-rise { from { transform: translateY(22px); } to { transform: none; } }
  }
}

/* ============================================================
   HOME PATTERN — blocs natifs (wp:image, wp:button, CSS icons)
   Adaptations pour le pattern « Home — Venite Adoremus » qui
   remplace les wp:html par des blocs Gutenberg éditables.
   ============================================================ */

/* ---------- hero__deco : images décoratives en wp:image ---------- */
/* Les figures wp-block-image remplacent les <img> absolus. */
.va-accueil .hero__deco .wp-block-image { position: absolute; display: block; margin: 0; padding: 0; line-height: 0; }
.va-accueil .hero__deco .wp-block-image img { width: 100%; height: auto; display: block; }
/* Reapply per-image rules to figures (classes are now on <figure> instead of <img>). */
.va-accueil .hero__sun.wp-block-image  { right: 0; bottom: 20%; width: clamp(220px, 35vw, 380px); z-index: 0; opacity: 0.98; filter: drop-shadow(0 0 34px oklch(0.86 0.15 74 / 0.5)); }
.va-accueil .hero__steeple.wp-block-image { right: 3%; bottom: 0; width: clamp(160px, 24vw, 290px); z-index: 1; filter: drop-shadow(0 8px 26px oklch(0.16 0.05 262 / 0.6)); }
.va-accueil .hero__moon.wp-block-image { top: 13%; left: 13%; width: clamp(38px, 4vw, 52px); z-index: 0; opacity: 0.9; filter: drop-shadow(0 0 14px oklch(0.92 0.05 90 / 0.4)); }
@media (prefers-reduced-motion: no-preference) {
  .va-accueil .hero__sun.wp-block-image { animation: va-rise-sun 3.8s cubic-bezier(.16,.84,.36,1) both; }
}
@media (max-width: 720px) {
  .va-accueil .hero__sun.wp-block-image     { width: clamp(140px, 42vw, 200px); right: -5%; bottom: 10%; }
  .va-accueil .hero__steeple.wp-block-image { width: clamp(104px, 30vw, 150px); right: 3%; }
  .va-accueil .hero__moon.wp-block-image    { width: clamp(26px, 7vw, 32px); top: 9%; left: auto; right: 8%; }
}

/* ---------- hero__logo en wp:image ---------- */
figure.wp-block-image.hero__logo { height: auto; margin-bottom: var(--sp-6); filter: none; }
figure.wp-block-image.hero__logo img { height: 84px; width: auto; filter: drop-shadow(0 6px 34px oklch(0.82 0.15 80 / 0.5)); }
@media (max-width: 720px) {
  figure.wp-block-image.hero__logo { margin-bottom: var(--sp-5); }
  figure.wp-block-image.hero__logo img { height: 60px; }
}

/* ---------- hero__when : icône calendrier via ::before ---------- */
/* Partage le style mask-image avec les autres icônes CSS. */
.va-accueil p.hero__when { display: flex; } /* <p> → flex pour aligner ::before + texte */
.va-accueil p.hero__when::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  align-self: center;
}

/* ---------- scrollcue : flèche animée via ::after (home pattern) ----------
   Scopé à p.scrollcue pour ne pas modifier l'ancien div.scrollcue (accueil.php). */
.va-accueil p.scrollcue::after {
  content: "";
  display: block;
  width: 20px; height: 20px;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  animation: cue 1.8s ease-in-out infinite;
}

/* ---------- hero__cta : wp:buttons ---------- */
.va-accueil .wp-block-buttons.hero__cta { gap: var(--sp-3); margin-top: var(--sp-6); flex-wrap: wrap; }
/* Neutralise les marges par défaut du wrapper wp-block-button */
.va-accueil .hero__cta .wp-block-button { margin: 0; }

/* ---------- ccard : icônes via ::before (home pattern uniquement) ----------
   Utilise background-image SVG en surimpression sur fond or-100.
   Scopé aux classes modificatrices (ccard--*) présentes uniquement dans home.php :
   ne touche pas les .ccard du pattern accueil.php (qui ont .ccard__ico). */
.va-accueil .ccard--music::before,
.va-accueil .ccard--silence::before,
.va-accueil .ccard--rosary::before,
.va-accueil .ccard--child::before {
  content: "";
  display: block;
  width: 2.6em; height: 2.6em;
  border-radius: var(--r-md);
  background-color: var(--or-100);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: var(--sp-4);
}
.va-accueil .ccard--music::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23965214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V6l11-2v12M9 18a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm11-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}
.va-accueil .ccard--silence::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23965214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5Z'/%3E%3Cpath d='M16 9.5a3.5 3.5 0 0 1 0 5'/%3E%3C/svg%3E");
}
.va-accueil .ccard--rosary::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23965214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='17' cy='9' r='1.5'/%3E%3Ccircle cx='7' cy='9' r='1.5'/%3E%3Cpath d='M12 12v4M10.5 20h3M12 16l-1.5 4M12 16l1.5 4'/%3E%3C/svg%3E");
}
.va-accueil .ccard--child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23965214' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.4'/%3E%3Cpath d='M12 8v7M8 11h8M9 21l3-6 3 6'/%3E%3C/svg%3E");
}

/* ---------- comment-note : icône cœur via ::before (home pattern) ----------
   Scopé à .wp-block-group.comment-note (nouveau pattern) pour ne pas
   ajouter un second cœur dans l'ancien pattern (qui a un <svg> inline). */
.va-accueil .wp-block-group.comment-note::before {
  content: "";
  flex: 0 0 auto;
  width: 1.6em; height: 1.6em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 20s-7-4.6-9-9a4.5 4.5 0 0 1 9-2 4.5 4.5 0 0 1 9 2c-2 4.4-9 9-9 9Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 20s-7-4.6-9-9a4.5 4.5 0 0 1 9-2 4.5 4.5 0 0 1 9 2c-2 4.4-9 9-9 9Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
/* Le texte dans comment-note est maintenant un <p> (pas un <span>) */
.va-accueil .comment-note p { margin: 0; font-size: inherit; color: inherit; }

/* ---------- ettoi : act blocks avec icônes CSS (home pattern) ----------
   Scopé aux classes modificatrices act--* uniquement présentes dans home.php. */
.va-accueil .act--clock::before,
.va-accueil .act--share::before,
.va-accueil .act--compass::before {
  content: "";
  flex: 0 0 auto;
  width: 1.5em; height: 1.5em;
  margin-top: 0.15em;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.va-accueil .act--clock::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}
.va-accueil .act--share::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='19' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-4.4M8.2 13.2l7.6 4.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='18' cy='5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='19' r='2.5'/%3E%3Cpath d='M8.2 10.8l7.6-4.4M8.2 13.2l7.6 4.4'/%3E%3C/svg%3E");
}
.va-accueil .act--compass::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5 5-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5 5-2Z'/%3E%3C/svg%3E");
}
/* Texte des act-items (nouvelle structure sans <b>/<span>) */
.va-accueil .act .wp-block-group { flex: 1; min-width: 0; }
.va-accueil .act .act__title { font-size: var(--t-md); font-family: var(--serif); font-weight: 600; margin: 0; }
.va-accueil .act .act__desc  { font-size: var(--t-sm); color: oklch(1 0 0 / 0.85); margin: 0; }
/* Boutons ettoi */
.va-accueil .ettoi__btns.wp-block-buttons { margin-top: var(--sp-2); flex-wrap: wrap; }
.va-accueil .ettoi__btns .wp-block-button { margin: 0; }

/* ---------- comment__lead, comment__intro, histoire__heading (home pattern) ---------- */
.va-accueil .comment__lead { max-width: 60ch; }
.va-accueil .comment__intro { font-size: var(--t-md); color: var(--encre-soft); margin: 0; }
.va-accueil .histoire__heading { font-size: var(--t-xl); margin: var(--sp-2) 0 var(--sp-6); }

/* ============================================================
   BOUTONS WP:BUTTON — pont CSS pour le home pattern
   Les classes de variante (va-btn--*) sont portées par le wrapper
   <div class="wp-block-button va-btn--lumiere"> dans home.php
   (au lieu du <a> comme dans accueil.php). Ce pont réapplique
   les styles .va-btn sur le lien interne .wp-block-button__link.
   ============================================================ */

/* Base va-btn appliquée à l'élément <a> via le wrapper */
.va-accueil .wp-block-button .wp-block-button__link {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.7em 1.4em;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.va-accueil .wp-block-button .wp-block-button__link:active { transform: translateY(1px); }

/* va-btn--lg */
.va-accueil .wp-block-button.va-btn--lg .wp-block-button__link {
  font-size: var(--t-base);
  padding: 0.85em 1.6em;
}

/* va-btn--lumiere (sur fond nuit) */
.va-accueil .wp-block-button.va-btn--lumiere .wp-block-button__link {
  background: var(--or-500);
  color: var(--nuit-950);
  box-shadow: var(--sh-glow);
  border-color: transparent;
}
.va-accueil .wp-block-button.va-btn--lumiere .wp-block-button__link:hover {
  background: var(--or-400);
  color: var(--nuit-950);
}

/* va-btn--contour-nuit (sur fond nuit) */
.va-accueil .wp-block-button.va-btn--contour-nuit .wp-block-button__link {
  background: oklch(1 0 0 / 0.06);
  color: var(--etoile);
  border-color: var(--ligne-nuit);
}
.va-accueil .wp-block-button.va-btn--contour-nuit .wp-block-button__link:hover {
  background: oklch(1 0 0 / 0.12);
  border-color: var(--or-400);
  color: var(--etoile);
}

/* va-btn--ghost */
.va-accueil .wp-block-button.va-btn--ghost .wp-block-button__link {
  background: transparent;
  color: var(--or-800);
  border-color: var(--or-700);
}
.va-accueil .wp-block-button.va-btn--ghost .wp-block-button__link:hover {
  background: var(--or-100);
  color: var(--or-800);
}

/* va-btn--soft */
.va-accueil .wp-block-button.va-btn--soft .wp-block-button__link {
  background: var(--blanc);
  color: var(--encre);
  border-color: var(--ligne);
  box-shadow: var(--sh-sm);
}
.va-accueil .wp-block-button.va-btn--soft .wp-block-button__link:hover {
  border-color: var(--or-500);
  color: var(--or-800);
}

/* va-btn--nuit */
.va-accueil .wp-block-button.va-btn--nuit .wp-block-button__link {
  background: var(--nuit-900);
  color: #fff;
  border-color: var(--nuit-900);
}
.va-accueil .wp-block-button.va-btn--nuit .wp-block-button__link:hover {
  background: var(--nuit-800);
  border-color: var(--nuit-800);
  color: #fff;
}

/* va-btn--primary */
.va-accueil .wp-block-button.va-btn--primary .wp-block-button__link {
  background: var(--or-700);
  color: var(--blanc);
  box-shadow: 0 6px 16px oklch(0.68 0.168 55 / 0.32);
  border-color: transparent;
}
.va-accueil .wp-block-button.va-btn--primary .wp-block-button__link:hover {
  background: var(--or-800);
  box-shadow: 0 8px 22px oklch(0.68 0.168 55 / 0.40);
  color: var(--blanc);
}

/* ============================================================
   CORRECTIFS HOME PATTERN
   ============================================================ */

/* ---- FIX 1 : boutons rectangulaires ----
   Dans home.php, les classes de variante (va-btn--lumiere, etc.) sont
   sur le <div class="wp-block-button">, pas sur le <a>. Les règles
   de venite-ds.css (conçues pour <a class="va-btn va-btn--lumiere">)
   appliquent alors background/border/shadow/padding au <div> wrapper,
   qui s'affiche en rectangle coloré sans border-radius.
   Ce reset neutralise ces propriétés sur le wrapper ; le <a> intérieur
   reçoit ses styles via le pont CSS ci-dessus. */
.va-accueil .wp-block-buttons .wp-block-button[class*="va-btn--"] {
  background: transparent;
  color: inherit;
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: inherit;
}

/* ---- FIX 2 : image décorative « clocher » disparue ----
   .va-accueil .hero__deco img { position: absolute } (ligne ~34 ci-dessus)
   était prévu pour les <img> directs dans l'ancien pattern (accueil.php).
   Dans home.php, c'est la <figure class="wp-block-image"> qui est
   positionnée absolument. Si l'<img> intérieur est AUSSI position:absolute,
   la figure s'effondre à 0px de hauteur : son bord bas coïncide avec son bord
   haut, et l'image déborde vers le bas — coupée par overflow:hidden. */
.va-accueil .hero__deco .wp-block-image img {
  position: static;
}

/* ---- FIX 3 : hauteur uniforme des blocs grille (stats + ccards) ----
   Dans l'éditeur, .va-site n'existe pas → .va-site h3 { margin: 0 } ne
   s'applique pas. Les h3/h2 ont leurs marges navigateur par défaut, ce qui
   modifie la hauteur du contenu dans les cartes. Ce reset harmonise l'éditeur
   avec le frontend. Sur le frontend il est sans effet (le va-site rule prime). */
.va-accueil .stats > .wp-block-group,
.va-accueil .comment-grid > .wp-block-group,
.va-accueil .ettoi__acts > .wp-block-group,
.va-accueil .ettoi__acts > .wp-block-buttons { margin-block: 0; }
.va-accueil .ccard .wp-block-heading,
.va-accueil .stat .wp-block-heading { margin-block: 0; }

/* ============================================================
   FORMULAIRE PUBLIC « INSCRIRE MON LIEU »
   Demande de David (round 2) : le bouton déclencheur doit rester à côté de
   « Trouver un lieu » dans la rangée existante, et le panneau doit
   s'ouvrir en PLEINE LARGEUR de la bande (pas confiné à la colonne de
   droite de la grille 2 colonnes .ettoi), pour que le bloc de gauche
   reste centré par rapport aux 3 cartes de droite comme à l'état fermé,
   et pour laisser plus de place aux champs.
   → Le bouton (une <label> stylée comme le bouton WP existant) contient
   une case à cocher invisible mais focusable/activable au clavier
   nativement (pas de JS requis) ; le panneau, lui, vit en dehors de la
   grille .ettoi, comme frère de .ettoi (voir patterns/home.php), et est
   révélé en pur CSS via :has() : ":has()" permet de "voir" une case cochée
   nichée plus haut dans l'arbre sans que panneau et case soient frères
   directs. Fond clair (.va-toolbar) pour contraster avec .band--or. */
.va-accueil .va-inscrire-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: -1px;
}
.va-accueil .va-inscrire__trigger {
  position: relative;
  cursor: pointer;
}
.va-accueil .va-inscrire__trigger::after {
  content: "\002B"; /* + */
  margin-left: 0.5em;
  font-weight: 700;
  transition: transform 0.2s ease;
  display: inline-block;
}
/* Icône "+" → "×" et anneau de focus clavier, pilotés par la case cochée/
   focus quelque part à l'intérieur de .ettoi (peu importe la profondeur). */
.va-accueil .ettoi:has(.va-inscrire-toggle:checked) .va-inscrire__trigger::after { transform: rotate(45deg); }
.va-accueil .ettoi:has(.va-inscrire-toggle:focus-visible) .va-inscrire__trigger { outline: 2px solid var(--etoile); outline-offset: 3px; }

.va-accueil .va-inscrire-wrap {
  display: none;
  margin-top: var(--sp-8);
}
/* .va-inscrire-wrap est frère de .ettoi (toutes deux enfants directes de la
   bande) : ":has(~ X)" sélectionne .ettoi seulement quand elle contient une
   case cochée, et cible alors son frère SUIVANT .va-inscrire-wrap. */
.va-accueil .ettoi:has(.va-inscrire-toggle:checked) ~ .va-inscrire-wrap { display: block; }

.va-accueil .va-inscrire__panel {
  color: var(--encre);
}
.va-accueil .va-inscrire__panel :is(h1,h2,h3,legend) { color: var(--encre); }
/* Le panneau est un fond clair posé sur le bandeau orange (.band--or) : sans
   ceci, les règles de couleur "p { color: crème/blanc }" du reste de la
   bande (pensées pour du texte sur fond sombre) rendraient les paragraphes
   du formulaire quasi invisibles sur ce fond clair. */
.va-accueil .va-inscrire__panel p { color: var(--encre); }

.va-accueil .va-inscrire__notice {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
  margin-bottom: var(--sp-5);
}
.va-accueil .va-inscrire__notice--ok {
  background: color-mix(in oklab, var(--succes) 16%, white);
  color: color-mix(in oklab, var(--succes) 70%, var(--encre));
}
.va-accueil .va-inscrire__notice--err {
  background: color-mix(in oklab, var(--alerte) 14%, white);
  color: color-mix(in oklab, var(--alerte) 70%, var(--encre));
}

.va-accueil .va-inscrire__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.va-accueil .va-inscrire__field-group {
  border: 0;
  padding: 0;
  margin: 0 0 var(--sp-6);
}
.va-accueil .va-inscrire__field-group legend {
  font-family: var(--serif);
  font-size: var(--t-md);
  font-weight: 600;
  margin-bottom: var(--sp-3);
  padding: 0;
}
.va-accueil .va-inscrire__panel p.va-inscrire__hint {
  font-size: var(--t-sm);
  color: var(--encre-soft);
  margin: 0 0 var(--sp-3);
}

.va-accueil .va-inscrire__type { display: flex; flex-direction: column; gap: var(--sp-2); }
.va-accueil .va-inscrire__radio { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-sm); cursor: pointer; }

.va-accueil .va-inscrire__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 640px) { .va-accueil .va-inscrire__grid { grid-template-columns: 1fr; } }

.va-accueil .va-inscrire__panel .va-field--block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35em;
  border-radius: var(--r-md);
  padding: 0.6em 0.9em;
}
.va-accueil .va-inscrire__panel .va-field--block span { font-size: var(--t-xs); font-weight: 600; color: var(--encre-soft); }
.va-accueil .va-inscrire__panel .va-field--block input,
.va-accueil .va-inscrire__panel .va-field--block textarea { border: 0; outline: 0; background: transparent; font: inherit; color: inherit; width: 100%; }
.va-accueil .va-inscrire__panel .va-field--block:focus-within { border-color: var(--or-500); box-shadow: 0 0 0 3px var(--or-100); }

.va-accueil .va-inscrire__pair { display: flex; gap: var(--sp-2); }
.va-accueil .va-inscrire__numero { max-width: 5em; }

.va-accueil .va-inscrire__panel textarea { resize: vertical; min-height: 4.5em; }

.va-accueil .va-inscrire__submit { margin-top: var(--sp-2); }

/* Consentement RGPD : case À GAUCHE du texte, sans encadré, à distance du champ du dessus. */
.va-inscrire__panel .va-inscrire__consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7em;
  margin: var(--sp-4) 0 var(--sp-2);
  padding: 0 0.2em;
  cursor: pointer;
}
.va-inscrire__panel .va-inscrire__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  margin: 0.15em 0 0;
  accent-color: var(--or-500);
}
.va-inscrire__panel .va-inscrire__consent .va-inscrire__consent-text {
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.45;
  color: var(--encre);
}
.va-inscrire__panel .va-inscrire__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Bascule Lieu seul / Lieu + événement — CSS pur, aucune dépendance JS.
   Navigateurs sans :has() : les champs événement restent visibles en
   permanence, ce qui reste inoffensif (ils sont de toute façon optionnels). */
.va-accueil .va-inscrire__form:has(input[name="va_type"][value="lieu"]:checked) .va-inscrire__evenement-fields {
  display: none;
}

/* ============================================================
   EN IMAGES — galerie vidéos/photos du festival
   Un média « à la une » (grand format) + une grille secondaire de
   cartes plus petites. S'adapte de 1 seul média (pas de grille du
   tout) à « beaucoup » (grille + bouton « Voir plus » qui révèle un
   lot de cartes déjà présentes dans le DOM, cachées en CSS — voir
   chrome.js pour le clic qui les révèle). Vidéos en façade cliquable
   (vignette + bouton play), l'iframe YouTube n'est chargée qu'au clic. */
/* Mosaïque unique à 3 colonnes (demande de David 2026-09-20 ; révisée
   2026-09-23 — plus jamais de short « en avant » désormais, David a
   confirmé, ce qui simplifie et allège toute la mosaïque : voir plus bas).
   - Cases de taille FIXE : hauteur de ligne dérivée de la largeur d'une
     colonne (container query units), images recadrées (object-fit: cover).
   - Non mis en avant : 1 colonne ; mis en avant (jamais un short) : 2
     colonnes.
   - Le short (jamais en avant) reste le seul format à devoir un ratio
     EXACT (9/16, pas de bandes noires) : il occupe 1 colonne x 3 lignes,
     ce qui fixe la hauteur de ligne pour toute la mosaïque. Les photos et
     vidéos normales n'ont pas cette contrainte : sur cette base de ligne,
     elles tombent sur un format paysage ~27/16 (proche du 16/9), que j'ai
     trouvé le plus agréable pour ce contenu — à ajuster si besoin en
     changeant le nombre de lignes du short (var. de calcul ci-dessous).
   - grid-auto-flow: dense comble les trous (ordre gauche→droite, haut→bas
     respecté au mieux, sans garantie absolue).
   - Mobile (<= 720px) : 1 seule colonne, tout empilé pleine largeur ; le
     statut « en avant » ne change alors plus la taille de la case. */
.va-accueil .va-galerie { container-type: inline-size; }
/* Aucun média pour la langue courante : on masque toute la bande « En images » (voir [va_galerie]). */
.va-accueil .band:has(.va-galerie-empty) { display: none; }
.va-accueil .galerie-grid {
  --gal-cols: 3;
  --gal-gap: var(--sp-4);
  --gal-colw: calc((100cqw - (var(--gal-cols) - 1) * var(--gal-gap)) / var(--gal-cols));
  /* Hauteur de ligne calculée pour qu'un short (1 col x 3 lignes) soit
     exactement en 9/16 : c * 16/9 = 3r + 2g  =>  r = (16c - 18g) / 27.
     Le recadrage (object-fit: cover) ne laisse alors aucune bande noire.
     Résultat pour les cases normales (1 col x 1 ligne) : ratio ≈ 27/16
     (~1.69), un format paysage proche du 16/9. */
  display: grid;
  grid-template-columns: repeat(var(--gal-cols), minmax(0, 1fr));
  grid-auto-rows: calc((16 * var(--gal-colw) - 18 * var(--gal-gap)) / 27);
  grid-auto-flow: row dense;
  gap: var(--gal-gap);
}
.va-accueil .galerie-grid > .va-media-card { grid-column: span 1; grid-row: span 1; }
.va-accueil .galerie-grid > .va-media-card--featured { grid-column: span 2; grid-row: span 2; }
.va-accueil .galerie-grid > .va-media-card--short { grid-row: span 3; }

@media (max-width: 720px) {
  .va-accueil .galerie-grid { --gal-cols: 1; --gal-gap: var(--sp-3); }
  /* 1 seule colonne : le statut « en avant » ne change plus le format de
     la case (sinon une photo/vidéo en avant deviendrait disproportionnée
     en pleine largeur) ; le short garde ses 3 lignes (ratio 9/16 exact,
     indépendant du nombre de colonnes). */
  .va-accueil .galerie-grid > .va-media-card--featured { grid-column: span 1; grid-row: span 1; }
}

.va-accueil .va-media-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  box-shadow: var(--sh-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
}
.va-accueil .va-media-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.va-accueil .va-media-card.is-hidden { display: none; }

.va-accueil .va-media-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--nuit-950);
  overflow: hidden;
}
.va-accueil .va-media-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.va-accueil .va-media-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Légende superposée en bas de la case (cases de taille fixe). */
.va-accueil .va-media-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-3) var(--sp-3);
  background: linear-gradient(to top, oklch(0.15 0.03 256 / 0.78), transparent);
  pointer-events: none;
}
.va-accueil .va-media-card__caption b { display: block; font-family: var(--serif); font-weight: 600; color: #fff; font-size: var(--t-sm, 0.9rem); line-height: 1.25; }
.va-accueil .va-media-card__caption span { font-size: var(--t-xs); color: oklch(1 0 0 / 0.8); }

.va-accueil .va-media-card--featured .va-media-card__caption b { font-size: var(--t-md); }

.va-accueil .va-media-card__badge {
  position: absolute;
  top: 10px; left: 10px;
  background: oklch(0.21 0.045 256 / 0.55);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-pill);
}

.va-accueil .va-media-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.va-accueil .va-media-card__play::after {
  content: "";
  width: 56px; height: 56px;
  border-radius: 50%;
  background: oklch(0.96 0.038 90 / 0.94);
  box-shadow: 0 0 0 8px oklch(1 0 0 / 0.12), 0 8px 24px oklch(0.2 0.04 256 / 0.35);
  transition: background 0.15s ease;
}
.va-accueil .va-media-card__play svg {
  position: absolute;
  width: 20px; height: 20px;
  color: var(--or-800);
  transform: translateX(2px);
}
.va-accueil .va-media-card__play:hover::after { background: var(--or-100); }
.va-accueil .va-media-card__play:focus-visible { outline: 2px solid var(--or-700); outline-offset: 3px; }

.va-accueil .va-galerie__more { margin-top: var(--sp-6); text-align: center; }
.va-accueil .va-galerie__more-btn { display: inline-flex; align-items: center; gap: var(--sp-2); }
.va-accueil .va-galerie__more-btn svg { width: 1em; height: 1em; }

/* Indice visuel « cliquable » sur les cartes photo (demande de David
   2026-09-16 — affichage en grand). La carte entière devient cliquable en
   JS (chrome.js, vaInitPhotoLightbox) ; cette icône n'est qu'un repère
   visuel au survol, elle ne capte pas elle-même le clic. */
.va-accueil .va-media-card--photo { cursor: pointer; }
.va-accueil .va-media-card__zoom {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: oklch(0.21 0.045 256 / 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  pointer-events: none;
}
.va-accueil .va-media-card__zoom svg { width: 15px; height: 15px; }
.va-accueil .va-media-card--photo:hover .va-media-card__zoom,
.va-accueil .va-media-card--photo:focus-visible .va-media-card__zoom {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   VISIONNEUSE PLEIN ÉCRAN — photos de « En images »
   Petit lightbox maison (aucune librairie externe) : image en grand,
   navigation précédente/suivante en boucle sans refermer, fermeture par
   croix / clic sur le fond / Échap. Voir chrome.js, vaInitPhotoLightbox().
   ============================================================ */
html.va-lightbox-lock,
html.va-lightbox-lock body { overflow: hidden; }

.va-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: oklch(0.12 0.02 256 / 0.92);
  padding: var(--sp-6);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.va-lightbox.is-open { display: flex; opacity: 1; }

.va-lightbox__figure {
  margin: 0;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.va-lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  background: var(--nuit-950);
}
.va-lightbox__caption {
  color: oklch(0.98 0.02 90 / 0.92);
  font-size: var(--t-sm);
  text-align: center;
  max-width: 60ch;
}
.va-lightbox__caption:empty { display: none; }

.va-lightbox__close,
.va-lightbox__nav {
  position: absolute;
  border: 0;
  background: oklch(1 0 0 / 0.12);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.va-lightbox__close:hover,
.va-lightbox__nav:hover { background: oklch(1 0 0 / 0.22); }
.va-lightbox__close:focus-visible,
.va-lightbox__nav:focus-visible { outline: 2px solid var(--or-300); outline-offset: 2px; }

.va-lightbox__close {
  top: var(--sp-5); right: var(--sp-5);
  width: 44px; height: 44px;
}
.va-lightbox__close svg { width: 20px; height: 20px; }

.va-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
}
.va-lightbox__nav svg { width: 22px; height: 22px; }
.va-lightbox__prev { left: var(--sp-5); }
.va-lightbox__next { right: var(--sp-5); }
.va-lightbox__nav[hidden] { display: none; }

@media (max-width: 640px) {
  .va-lightbox { padding: var(--sp-4); }
  .va-lightbox__close { top: var(--sp-3); right: var(--sp-3); width: 38px; height: 38px; }
  .va-lightbox__nav { width: 42px; height: 42px; }
  .va-lightbox__prev { left: var(--sp-2); }
  .va-lightbox__next { right: var(--sp-2); }
}

/* ============================================================
   EN IMAGES — choix de la miniature vidéo (écran d'édition wp-admin)
   4 images extraites automatiquement de la vidéo YouTube, sélectionnables
   par simple clic (demande de David 2026-09-16 — pas d'upload de photo).
   ============================================================ */
.va-galerie-thumb-field { margin-top: 10px; }
.va-galerie-thumb-options { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.va-galerie-thumb-option { display: block; cursor: pointer; position: relative; }
.va-galerie-thumb-option input[type="radio"] { position: absolute; top: 6px; left: 6px; margin: 0; z-index: 1; }
.va-galerie-thumb-option img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid #dcdcde;
  background: #f0f0f1;
}
.va-galerie-thumb-option input:checked + img { border-color: #2271b1; }