/*
Theme Name:   Provok
Description:  Thème enfant GeneratePress pour Provok : variante signature (motif des trois plans, grain, profondeur).
Template:     generatepress
Version:      2.3.0
Text Domain:  provok
*/

/* ==========================================================================
   Variante signature
   Le motif du logo, trois plans décalés, devient la signature visuelle du site :
   cadres des photos, boutons, séparateurs. Grain léger sur le fond, grands chiffres
   de section en Bodoni, pages du journal sur papier ligné, en-tête qui reste visible.
   La navigation ne change pas : même menu, mêmes pages, mêmes classes.
   ========================================================================== */

/* ==========================================================================
   1. Polices (les mêmes fichiers, dans fonts/)
   ========================================================================== */

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-v-latin.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-v-latin-italic.woff2") format("woff2");
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-v-latin.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}

/* ==========================================================================
   2. Couleurs et réglages
   ========================================================================== */

:root {
  --pvk-fond:    #F5EEE9; /* papier rosé très clair               */
  --pvk-fond-2:  #ECE1DA; /* encadrés, formulaires                 */
  --pvk-encre:   #1E1114; /* texte                                 */
  --pvk-doux:    #6A4A50; /* texte secondaire                      */
  --pvk-vin:     #3B0A14; /* bandeaux sombres, pied de page        */
  --pvk-grenat:  #7A1628; /* accent principal, deuxième plan        */
  --pvk-rose:    #E3A1A2; /* troisième plan                        */
  --pvk-chair:   #F2DCD3; /* texte sur fond vin                    */

  --pvk-titre:   "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --pvk-texte:   "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pvk-mesure:  64ch;
  --pvk-plan:    10px;    /* décalage entre deux plans */
  --pvk-duree:   .35s;

  --base: var(--pvk-fond);
  --base-2: var(--pvk-fond-2);
  --base-3: var(--pvk-fond);
  --contrast: var(--pvk-encre);
  --contrast-2: var(--pvk-doux);
  --contrast-3: var(--pvk-grenat);
  --accent: var(--pvk-grenat);
}

/* ==========================================================================
   3. Base, avec un grain de papier très léger
   ========================================================================== */

html, body { background: var(--pvk-fond); }
body {
  color: var(--pvk-encre);
  font-family: var(--pvk-texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.site, .site-content, .inside-article, .separate-containers .inside-article,
.separate-containers .comments-area, .separate-containers .page-header,
.one-container .container, .inside-page-header { background: transparent; color: inherit; }
.entry-content > p, .entry-content > ul, .entry-content > ol { max-width: var(--pvk-mesure); }

/* Liens : un trait qui se dessine au survol */
.entry-content a, .site-footer a {
  color: var(--pvk-grenat); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size var(--pvk-duree) ease, color var(--pvk-duree) ease;
}
.entry-content a:hover, .site-footer a:hover { background-size: 0 1px; background-position: 100% 100%; }
:focus-visible { outline: 2px solid var(--pvk-grenat); outline-offset: 3px; }
::selection { background: var(--pvk-grenat); color: var(--pvk-chair); }

/* ==========================================================================
   4. Typographie
   ========================================================================== */

h1, h2, h3, h4, .entry-title {
  font-family: var(--pvk-titre);
  font-weight: 500;
  color: var(--pvk-encre);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
h1, .entry-title { font-size: clamp(2.8rem, 7vw, 5.25rem); }
h1 em, h2 em, .entry-title em { color: var(--pvk-grenat); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
h4 { font-family: var(--pvk-texte); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pvk-grenat); }

/* Le premier paragraphe d'une page : une entrée en matière plus grande */
.entry-content > p:first-of-type { font-size: clamp(1.2rem, 1.8vw, 1.4rem); line-height: 1.55; }

.entry-meta, figcaption, .wp-element-caption, small { color: var(--pvk-doux); font-size: .85rem; }
figcaption, .wp-element-caption { font-style: italic; font-family: var(--pvk-titre); font-size: .95rem; }

/* Citation : grand guillemet rose, Bodoni italique */
blockquote, .wp-block-quote {
  position: relative; margin: 3rem 0; padding: 0 0 0 3.25rem; border: 0;
  font-family: var(--pvk-titre); font-style: italic; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.35;
}
blockquote::before, .wp-block-quote::before {
  content: "\201C"; position: absolute; left: 0; top: -.35em;
  font-size: 4.5em; line-height: 1; color: var(--pvk-rose);
}
blockquote cite, .wp-block-quote cite { display: block; margin-top: .9rem; font-family: var(--pvk-texte); font-style: normal; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pvk-doux); }

/* Séparateur : trois traits décalés, comme trois plans */
hr, .wp-block-separator {
  width: 72px; height: 11px; margin: 3rem auto; border: 0; opacity: 1;
  background:
    linear-gradient(var(--pvk-encre), var(--pvk-encre)) 0 0 / 48px 1.5px no-repeat,
    linear-gradient(var(--pvk-grenat), var(--pvk-grenat)) 12px 5px / 48px 1.5px no-repeat,
    linear-gradient(var(--pvk-rose), var(--pvk-rose)) 24px 10px / 48px 1.5px no-repeat;
}

/* ==========================================================================
   5. Le logo : « Provok », son P en trois plans (titre du site, sans image)
   ========================================================================== */

.main-title, .site-title { font-family: var(--pvk-titre); font-weight: 500; font-size: 2rem; line-height: 1; letter-spacing: -.01em; }
.main-title a, .site-title a { color: var(--pvk-encre); text-decoration: none; background: none; }
.main-title::first-letter, .site-title::first-letter,
.pvk-logo::first-letter { text-shadow: .035em .035em 0 var(--pvk-grenat), .07em .07em 0 var(--pvk-rose); }
.pvk-logo { font-family: var(--pvk-titre); font-weight: 500; letter-spacing: -.01em; }

/* ==========================================================================
   6. En-tête : reste visible en haut, sur un fond translucide
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--pvk-fond) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--pvk-encre) 18%, transparent);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.main-navigation, .main-navigation ul ul, .mobile-menu-control-wrapper { background: transparent; }

.main-navigation .main-nav ul li a {
  color: var(--pvk-encre); font-family: var(--pvk-texte); font-size: .82rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(var(--pvk-grenat), var(--pvk-grenat)) 50% calc(100% - 16px) / 0 1.5px no-repeat;
  transition: background-size var(--pvk-duree) ease, color var(--pvk-duree) ease;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--pvk-grenat); background-color: transparent; background-size: calc(100% - 40px) 1.5px;
}
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus {
  background: transparent; color: var(--pvk-encre); font-size: .82rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
@media (max-width: 768px) {
  .main-navigation.toggled .main-nav > ul { background: var(--pvk-fond); }
  .main-navigation.toggled .main-nav ul li a {
    font-family: var(--pvk-titre); font-size: 1.9rem; font-weight: 500; letter-spacing: -.01em; text-transform: none;
    padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid color-mix(in srgb, var(--pvk-encre) 20%, transparent);
    background-image: none;
  }
}

/* ==========================================================================
   7. Boutons : un plan rose derrière, qui se révèle au survol
   ========================================================================== */

.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--pvk-vin); color: var(--pvk-chair);
  border: 1px solid var(--pvk-vin); border-radius: 0;
  font-family: var(--pvk-texte); font-weight: 600; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
  padding: 1.05em 1.9em; text-decoration: none;
  box-shadow: 0 0 0 0 var(--pvk-rose);
  transition: transform var(--pvk-duree) ease, box-shadow var(--pvk-duree) ease, background var(--pvk-duree) ease;
}
.button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--pvk-grenat); border-color: var(--pvk-grenat); color: var(--pvk-chair);
  transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--pvk-rose);
}
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--pvk-vin); border: 1px solid var(--pvk-vin); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--pvk-fond); color: var(--pvk-vin); box-shadow: 6px 6px 0 0 var(--pvk-grenat); }

/* ==========================================================================
   8. Photos : la signature des trois plans
   Deux cadres fins décalés derrière chaque photo (grenat puis rose) ; ils
   s'écartent au survol. S'applique aux blocs Média et texte, et aux blocs
   Image qui portent la classe pvk-plans.
   ========================================================================== */

.wp-block-media-text__media, .wp-block-image.pvk-plans { margin: 0 calc(var(--pvk-plan) * 2) calc(var(--pvk-plan) * 2) 0; }
.wp-block-media-text__media img, .wp-block-image.pvk-plans img {
  display: block; border-radius: 0;
  box-shadow:
    var(--pvk-plan) var(--pvk-plan) 0 -1px var(--pvk-fond),
    var(--pvk-plan) var(--pvk-plan) 0 0 var(--pvk-grenat),
    calc(var(--pvk-plan) * 2) calc(var(--pvk-plan) * 2) 0 -1px var(--pvk-fond),
    calc(var(--pvk-plan) * 2) calc(var(--pvk-plan) * 2) 0 0 var(--pvk-rose);
  transition: transform var(--pvk-duree) ease, box-shadow var(--pvk-duree) ease;
}
.wp-block-media-text:hover .wp-block-media-text__media img, .wp-block-image.pvk-plans:hover img {
  transform: translate(-4px, -4px);
  box-shadow:
    14px 14px 0 -1px var(--pvk-fond), 14px 14px 0 0 var(--pvk-grenat),
    28px 28px 0 -1px var(--pvk-fond), 28px 28px 0 0 var(--pvk-rose);
}
/* Couverture (bloc Couverture) : un voile vin du bas vers le haut, pour que le titre se lise toujours */
.wp-block-cover .wp-block-cover__background { background: linear-gradient(to top, rgba(59, 10, 20, .82), rgba(59, 10, 20, .15) 60%) !important; opacity: 1 !important; }
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover p { color: var(--pvk-chair); }

/* ==========================================================================
   9. Sections de l'accueil
   pvk-section : grand chiffre en Bodoni italique, en contour, derrière le titre.
   ========================================================================== */

.entry-content { counter-reset: pvk-section; }
.wp-block-group.pvk-section { counter-increment: pvk-section; position: relative; padding-top: 4.5rem; padding-bottom: 4rem; }
.wp-block-group.pvk-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--pvk-encre), var(--pvk-encre) 60%, transparent);
}
.wp-block-group.pvk-section h2 { position: relative; }
.wp-block-group.pvk-section h2::before {
  content: counter(pvk-section, decimal-leading-zero);
  position: absolute; z-index: -1; left: -.12em; top: -.62em;
  font-family: var(--pvk-titre); font-style: italic; font-weight: 400; font-size: 2.6em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--pvk-rose);
}
.wp-block-media-text { gap: 0; }
.wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 4.5rem; }
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 4.5rem 0 0; }
@media (max-width: 600px) {
  .wp-block-media-text .wp-block-media-text__content,
  .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 2.25rem 0 0; }
}
.pvk-suite a {
  font-family: var(--pvk-texte); font-size: .82rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pvk-vin); padding-bottom: 4px;
  background: linear-gradient(var(--pvk-grenat), var(--pvk-grenat)) 0 100% / 100% 1.5px no-repeat;
}
.pvk-suite a:hover { color: var(--pvk-grenat); background-size: 40% 1.5px; }

/* Encadré (les cinq engagements) : carte claire posée sur un plan grenat */
.wp-block-group.pvk-encadre {
  position: relative; background: var(--pvk-fond-2); padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: var(--pvk-plan) var(--pvk-plan) 0 0 var(--pvk-grenat);
  margin-right: var(--pvk-plan); margin-bottom: var(--pvk-plan);
}
.wp-block-group.pvk-encadre ol, .wp-block-group.pvk-encadre ul { padding-left: 1.25rem; }
.wp-block-group.pvk-encadre li::marker { font-family: var(--pvk-titre); font-style: italic; color: var(--pvk-grenat); }

/* Page du journal : papier ligné, Bodoni italique, lettrine grenat */
.wp-block-group.pvk-journal {
  --ligne: 1.8em;
  max-width: 62ch; padding: var(--ligne) clamp(1.5rem, 4vw, 2.75rem);
  background-color: #FBF6F2;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ligne) - 1px), rgba(122, 22, 40, .14) calc(var(--ligne) - 1px), rgba(122, 22, 40, .14) var(--ligne));
  border-left: 2px solid var(--pvk-rose);
  font-family: var(--pvk-titre); font-style: italic; font-size: 1.15rem; line-height: var(--ligne);
  box-shadow: 0 1px 0 rgba(30, 17, 20, .06), 0 18px 40px -24px rgba(59, 10, 20, .35);
}
.wp-block-group.pvk-journal p { margin-bottom: var(--ligne); }
.wp-block-group.pvk-journal > p:first-of-type::first-letter {
  float: left; font-size: 3.6em; line-height: .85; padding: .05em .08em 0 0; color: var(--pvk-grenat); font-style: normal;
}

/* Bandeau sombre (Les Rencontres, une annonce) : bloc Groupe avec la classe pvk-sombre */
.wp-block-group.pvk-sombre {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 85% 0%, #5A1222 0%, var(--pvk-vin) 55%, #24060C 100%);
  color: var(--pvk-chair); padding: clamp(2.25rem, 6vw, 5rem);
}
.wp-block-group.pvk-sombre h2, .wp-block-group.pvk-sombre h3 { color: var(--pvk-chair); }
.wp-block-group.pvk-sombre h2::before { -webkit-text-stroke-color: rgba(227, 161, 162, .45); }
.wp-block-group.pvk-sombre a { color: var(--pvk-chair); }
.wp-block-group.pvk-sombre .wp-block-button__link { background: var(--pvk-chair); color: var(--pvk-vin); border-color: var(--pvk-chair); }
.wp-block-group.pvk-sombre .wp-block-button__link:hover { background: var(--pvk-rose); border-color: var(--pvk-rose); color: var(--pvk-vin); box-shadow: 6px 6px 0 0 var(--pvk-grenat); }

/* ==========================================================================
   10. Lecteur audio, formulaires, WooCommerce
   ========================================================================== */

.wp-block-audio { margin: 2.5rem 0; padding: 1.25rem; background: var(--pvk-fond-2); box-shadow: var(--pvk-plan) var(--pvk-plan) 0 0 var(--pvk-rose); }
.wp-block-audio audio { width: 100%; accent-color: var(--pvk-grenat); }

input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], textarea, select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
  background: #FBF6F2; color: var(--pvk-encre);
  border: 0; border-bottom: 1.5px solid var(--pvk-encre); border-radius: 0;
  transition: border-color var(--pvk-duree) ease, background var(--pvk-duree) ease;
}
input:focus, textarea:focus, select:focus { border-bottom-color: var(--pvk-grenat); background: #fff; outline: none; }
label { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pvk-doux); }

.woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price {
  color: var(--pvk-grenat); font-family: var(--pvk-titre); font-style: italic; font-size: 1.7rem;
}
.woocommerce ul.products li.product img { box-shadow: var(--pvk-plan) var(--pvk-plan) 0 0 var(--pvk-rose); }
.woocommerce-message, .woocommerce-info, .woocommerce-error { background: var(--pvk-fond-2); color: var(--pvk-encre); border-top-color: var(--pvk-grenat); }

/* ==========================================================================
   11. Pied de page : bandeau vin, avec les trois traits en tête
   ========================================================================== */

.site-footer, .site-info, .footer-widgets { background: var(--pvk-vin); color: var(--pvk-chair); font-size: .9rem; }
.site-footer { position: relative; }
.site-footer::before {
  content: ""; display: block; height: 11px;
  background:
    linear-gradient(var(--pvk-chair), var(--pvk-chair)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--pvk-grenat), var(--pvk-grenat)) 0 5px / 100% 1px no-repeat,
    linear-gradient(var(--pvk-rose), var(--pvk-rose)) 0 10px / 100% 1px no-repeat;
  background-color: var(--pvk-fond);
}
.site-footer a, .site-info a { color: var(--pvk-chair); }
.site-footer a:hover, .site-info a:hover { color: var(--pvk-rose); }

/* ==========================================================================
   12. Apparition douce des sections au défilement (navigateurs récents uniquement)
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wp-block-group.pvk-section, .wp-block-media-text, .wp-block-group.pvk-journal {
      animation: pvk-entree linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
    @keyframes pvk-entree { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  }
}


/* ==========================================================================
   14. Titres : jamais de mot coupé au milieu, lignes équilibrées
   ========================================================================== */

h1, h2, h3, .entry-title { overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.wp-block-columns h1 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
@media (max-width: 781px) { .wp-block-columns h1 { font-size: clamp(2.2rem, 9vw, 3rem); } }

/* ==========================================================================
   15. Accueil : en-tête en deux colonnes égales, photo en portrait
   ========================================================================== */

.home .entry-content > .wp-block-columns:first-child { gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.home .entry-content > .wp-block-columns:first-child > .wp-block-column { flex-basis: 50% !important; }
.home .entry-content > .wp-block-columns:first-child .wp-block-image,
.home .entry-content > .wp-block-columns:first-child .wp-block-image img { width: 100%; }
.home .entry-content > .wp-block-columns:first-child .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
@media (max-width: 781px) { .home .entry-content > .wp-block-columns:first-child > .wp-block-column { flex-basis: 100% !important; } }

/* ==========================================================================
   16. Groupes Provok et thème : pas de marges automatiques ajoutées par WordPress
   ========================================================================== */

.wp-block-group[class*="pvk-"].has-global-padding,
.wp-block-group[class*="pvk-"] .has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }
.wp-block-group[class*="pvk-"] > .wp-block-group__inner-container {
  padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important;
}
.wp-block-group.pvk-encadre { padding: clamp(1.75rem, 4vw, 3rem) !important; }
.wp-block-group.pvk-sombre { padding: clamp(2.25rem, 6vw, 5rem) !important; }
.wp-block-group.pvk-journal { padding: 1.8em clamp(1.5rem, 4vw, 2.75rem) !important; }

/* Boutons pleins toujours vin, sans soulignement animé ; un peu d'air avant la section suivante */
.entry-content .wp-block-button__link { background-image: none !important; }
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:visited {
  background-color: var(--pvk-vin) !important; border-color: var(--pvk-vin) !important; color: var(--pvk-chair) !important;
}
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.entry-content .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
  background-color: var(--pvk-grenat) !important; border-color: var(--pvk-grenat) !important;
}
.entry-content > .wp-block-buttons { margin-bottom: 2.5rem; }

/* ==========================================================================
   17. Page Publications : grille des numéros
   Bloc Colonnes avec la classe pvk-numeros ; chaque colonne avec la classe
   pvk-numero, et pvk-a-venir pour un numéro pas encore paru.
   ========================================================================== */

.wp-block-columns.pvk-numeros { gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.pvk-numero { display: flex; flex-direction: column; }
.pvk-numero .wp-block-image { margin-bottom: 1.25rem; }
.pvk-numero .wp-block-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pvk-numero h3 { margin: 0 0 .4rem; }
.pvk-numero p { margin-bottom: .5rem; }
.pvk-numero .pvk-suite { margin-top: auto; padding-top: .75rem; }
.pvk-etat {
  align-self: flex-start; padding: .2em .7em;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--pvk-grenat, #7A1628);
}
/* Numéro à venir : couverture estompée et cadre en pointillé */
.pvk-a-venir .wp-block-image img { opacity: .45; filter: grayscale(1); }
.pvk-a-venir .wp-block-image { outline: 1px dashed currentColor; outline-offset: 6px; }
.pvk-a-venir .pvk-etat { color: inherit; opacity: .75; border-style: dashed; }

/* ==========================================================================
   18. Espace Provok : lecteurs vidéo et formulaire de mot de passe
   ========================================================================== */

.wp-block-group.pvk-video h3 { margin: 1.4rem 0 .3rem; }
.pvk-video-infos { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pvk-doux, #6A4A50); }

/* Lecteur 16:9 posé sur les trois plans, comme les photos */
.pvk-video-cadre {
  position: relative; aspect-ratio: 16 / 9; background: var(--pvk-vin, #3B0A14);
  margin: 0 20px 20px 0;
  box-shadow:
    10px 10px 0 -1px var(--pvk-fond, #F5EEE9), 10px 10px 0 0 var(--pvk-grenat, #7A1628),
    20px 20px 0 -1px var(--pvk-fond, #F5EEE9), 20px 20px 0 0 var(--pvk-rose, #E3A1A2);
}
.pvk-video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Formulaire du mot de passe (page protégée de WordPress) */
.post-password-form {
  max-width: 34rem; margin: 3rem 0; padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--pvk-fond-2, #ECE1DA); box-shadow: 10px 10px 0 0 var(--pvk-grenat, #7A1628);
}
.post-password-form p:first-child { font-family: var(--pvk-titre, "Bodoni Moda", serif); font-style: italic; font-size: 1.25rem; line-height: 1.5; }
.post-password-form label { display: block; }
.post-password-form input[type="password"] { display: block; width: 100%; margin-top: .5rem; padding: .8rem 1rem; }
.post-password-form input[type="submit"] { margin-top: 1rem; }

/* ==========================================================================
   19. Page Les créateurs : fiches en grille
   ========================================================================== */

.wp-block-group.pvk-createurs,
.wp-block-group.pvk-createurs > .wp-block-group__inner-container {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1.25rem, 3vw, 2rem); max-width: none !important; width: 100%;
}
.wp-block-group.pvk-createurs > .wp-block-group__inner-container { grid-column: 1 / -1; }
.pvk-createurs .pvk-createur { width: auto !important; max-width: none !important; margin: 0 !important; }
.wp-block-group.pvk-createur { padding: 1.5rem 1.5rem 1.25rem !important; background: var(--pvk-fond-2); border-top: 2px solid var(--pvk-grenat); }
.wp-block-group.pvk-createur,
.wp-block-group.pvk-createur > .wp-block-group__inner-container { display: flex; flex-direction: column; height: 100%; }
.wp-block-group.pvk-createur > .wp-block-group__inner-container { padding-top: 0 !important; padding-bottom: 0 !important; }
.pvk-createur > .wp-block-group__inner-container > :first-child, .wp-block-group.pvk-createur > :first-child { margin-top: 0 !important; }
.pvk-createur > .wp-block-group__inner-container > :last-child, .wp-block-group.pvk-createur > :last-child { margin-bottom: 0 !important; }
.pvk-createur * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.pvk-createur h3 { margin: .2rem 0 .6rem; font-size: 1.5rem; }
.pvk-createur p { margin-bottom: .6rem; font-size: .95rem; }
.pvk-createur .pvk-createur-role { margin: 0; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pvk-grenat); }
.pvk-createur .pvk-createur-liens { font-size: .85rem; }
.pvk-createur .pvk-createur-charte { margin-top: auto; padding-top: .75rem; border-top: 1px solid color-mix(in srgb, var(--pvk-encre) 15%, transparent); font-size: .75rem; color: var(--pvk-doux); }

/* ==========================================================================
   20. Espace Provok : grille des vidéos
   ========================================================================== */

.wp-block-group.pvk-videos,
.wp-block-group.pvk-videos > .wp-block-group__inner-container {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem); max-width: none !important; width: 100%;
}
.wp-block-group.pvk-videos > .wp-block-group__inner-container { grid-column: 1 / -1; }
.pvk-videos .pvk-video { width: auto !important; max-width: none !important; margin: 0 !important; }

/* ==========================================================================
   21. Page Événements : liste datée
   ========================================================================== */

.pvk-evenements, .pvk-evenements .wp-block-group__inner-container,
.pvk-evenement, .pvk-evenement .wp-block-group__inner-container { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; padding-left: 0; padding-right: 0; }
.wp-block-group.pvk-evenement { padding: 1.75rem 0; margin: 0; border-top: 1px solid color-mix(in srgb, var(--pvk-encre) 18%, transparent); }
.wp-block-group.pvk-evenement,
.wp-block-group.pvk-evenement > .wp-block-group__inner-container { display: flex !important; flex-wrap: nowrap; align-items: flex-start; gap: clamp(1.25rem, 3vw, 2.5rem); }
.wp-block-group.pvk-evenement > .wp-block-group__inner-container { flex: 1 1 auto; width: 100%; }
.pvk-evenement .pvk-date, .pvk-evenement .pvk-evenement-texte { margin-top: 0 !important; margin-bottom: 0 !important; }
.pvk-evenement .pvk-date { flex: 0 0 6.5rem; width: 6.5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pvk-grenat); }
.pvk-evenement .pvk-date strong { display: block; margin-bottom: .35rem; font-family: var(--pvk-titre); font-style: italic; font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; text-transform: none; }
.pvk-evenement .pvk-evenement-texte { flex: 1 1 auto; min-width: 0; width: auto !important; max-width: none !important; }
.pvk-evenement .pvk-evenement-texte * { max-width: 62ch; margin-left: 0 !important; margin-right: 0 !important; }
.pvk-evenement-texte h3 { margin: .25rem 0 .5rem; }
.pvk-evenement-texte p { margin-bottom: .5rem; }
.pvk-lieu { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pvk-doux); }
.pvk-passe { opacity: .7; }
.pvk-passe .pvk-date { color: var(--pvk-doux); }
@media (max-width: 600px) {
  .wp-block-group.pvk-evenement, .wp-block-group.pvk-evenement > .wp-block-group__inner-container { flex-direction: column; gap: .5rem; }
  .pvk-evenement .pvk-date { flex-basis: auto; width: auto; }
}

/* ==========================================================================
   22. Accessibilité
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}