/* ============================================================
   HP — Caractère Libre
   Bloc 1 : Hero slider
   Figma V2 · canvas 1440px
   ============================================================ */

/* ── Page hero : nav flottante sur le hero ── */

.page--hero .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 40px 80px 0;
  background: transparent;
}

.page--hero .nav {
  margin: 0 auto;
  max-width: 1280px;
}

/* ════════════════════════════════════════════
   HERO SLIDER
   ════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 832px;
  overflow: hidden;
}

/* ── Slides ── */

.hero__track {
  position: relative;
  height: 100%;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background: var(--slide-bg, #cdad04);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Container centré 1280px (fond plein écran, contenu aligné sur la nav) ── */

.hero__inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, 100%);
  height: 100%;
}

/* Wrapper contrôles (nav-btns + progress) aligné sur le même container 1280px */
.hero__ui {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, 100%);
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.hero__ui .hero__nav-btns,
.hero__ui .hero__progress {
  pointer-events: auto;
}

/* ── Texte gauche ── */

.hero__left {
  position: absolute;
  left: 50px;
  top: 0;
  width: 374px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
  gap: 18px;
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-regular);
  color: var(--slide-text, #31353e);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  margin: 0;
}

.hero__title {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: var(--weight-black);
  color: var(--slide-text, #31353e);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider); /* figé ici : le titre est tantôt <h1> tantôt <p>, rendu identique */
  line-height: 1;
  width: 374px;
  margin: 0;
}

.hero__accent {
  color: var(--slide-accent, #b32222);
}

.hero__title-br {
  display: none;
}

/* ── Visuel principal ── */

.hero__visual {
  position: absolute;
  left: 470px;
  top: 162px;
  width: 490px;
  height: 580px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(0,0,0,0.1);
}

.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Cards droite ── */

.hero__cards {
  position: absolute;
  left: 978px;
  top: 282px;
  width: 302px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.hero__info-card {
  position: relative;
  width: 302px;
  height: 268px;
  background: var(--slide-info-bg, #2847a5);
  border-radius: 12px;
  overflow: hidden;
}

.hero__tag {
  position: absolute;
  top: 28px;
  left: 48px;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  background: var(--slide-tag-bg, #86434e);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.hero__info-text {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 95px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--weight-black);
  line-height: 24px;
  color: #fff;
  text-transform: uppercase;
}

.hero__info-text p { margin: 0; line-height: 28px; }

.hero__info-credit {
  margin-top: 24px !important;
  font-size: 22px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
}

/* ── Visuel bas ── */

.hero__visual-bas {
  width: 302px;
  height: 174px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 16px;
}

.hero__visual-bas--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__visual-bas--ellipse {
  background: var(--slide-bas-bg, #b32222);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__ellipse-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ── Rollover hero : très léger zoom des visuels + fade du texte ──
   Cadrage inchangé au repos (scale 1) ; zoom subtil (+3%) au survol. */
.hero__visual img,
.hero__visual-bas--photo img {
  transform: scale(1);
  transition: transform 0.6s ease;
}

.hero__visual:hover img,
.hero__cards:hover .hero__visual-bas--photo img {
  transform: scale(1.03);
}

.hero__info-text {
  transition: opacity 0.4s ease;
}

.hero__cards:hover .hero__info-text {
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual img,
  .hero__visual-bas--photo img,
  .hero__info-text {
    transition: none;
    transform: none;
  }
}

/* ── Boutons prev/next ── */

.hero__nav-btns {
  position: absolute;
  left: 50px;
  top: 543px;
  display: flex;
  gap: 25px;
}

.hero__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.90);
  color: #31353e;
  cursor: pointer;
  border: none;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.hero__btn:hover {
  background: #fff;
  transform: scale(1.05);
}

/* ── Progress bars ── */

.hero__progress {
  position: absolute;
  left: 50px;
  top: 634px;
  display: flex;
  gap: 4px;
}

.hero__dot {
  width: 77px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast);
}

.hero__dot.is-active {
  background: var(--color-text)
}

/* ════════════════════════════════════════════
   RESPONSIVE TABLETTE (768–1180px)
   ════════════════════════════════════════════ */



/* ════════════════════════════════════════════
   RESPONSIVE MOBILE (< 768px)
   ════════════════════════════════════════════ */



/* ════════════════════════════════════════════
   RENCONTRES
   Figma node 2303-819 · canvas 1440px
   ════════════════════════════════════════════ */

.rencontres {
  background: #f7f7f7;
  padding: 80px 0 140px;
}

/* ── En-tête ── */

.rencontres__header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  text-align: center;
}

.rencontres__tagline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  margin: 0 0 4px;
}

.rencontres__title {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: var(--weight-black);
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 8px;
}

/* ── Slider verbatim ── */

.rencontres__verbatim-slider {
  margin-top: 8px;
}

.rencontres__verbatim-track {
  position: relative;
  min-height: 160px; /* évite le flash avant l'init JS (polices) */
}

.rencontres__verbatim {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.15;
  margin: 0;
  padding: 0;
  border: none;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms ease, visibility 400ms ease;
  pointer-events: none;
}

.rencontres__verbatim.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Dots du slider verbatim supprimés (2026-07-12) : défilé auto seul,
   sans navigation manuelle. Voir 02-hp.md Bloc 2. */

/* ── Cards ── */

.rencontres__cards {
  max-width: 1280px;
  margin: 50px auto 0;
  padding: 0 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* Card commune */
.rencontres__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* Image en haut */
.rencontres__card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

.rencontres__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Image fond rose (card verbatim) */
.rencontres__card-img--pink {
  background: #e35d90;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rencontres__card-img--pink img {
  object-fit: contain;
  object-position: center;
  width: 330px;
  height: 330px;
}

/* Corps card histoire */
.rencontres__card-body {
  padding: 32px 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rencontres__card-author {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin: 0;
}

.verbatim__card-author {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
  margin: 0  0  44px 0 ;
}

.rencontres__card-title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-text);
  margin: 0 0 18px;
}

.rencontres__card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 1.5;
  margin: 0 0 44px;
}

.rencontres__card-cta {
  display: inline-flex;
  align-items: center;
  height: 51px;
  padding: 0 24px;
  background: var(--color-blue);
  border: 0px solid var(--color-blue);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  width: fit-content;
  margin-top: auto;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.rencontres__card-cta:hover {
   background: var(--color-text)
}

/* Corps card verbatim */
.rencontres__card-body--verbatim {
  gap: 4px;
}

.rencontres__card-quote {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 28px;
  border: none;
  padding: 0;
}

.cave-cards {
  padding: 0px 0 0 0px;
 }

/* ════════════════════════════════════════════
   OENOTOURISME — En-tête section
   ════════════════════════════════════════════ */

.oenotourisme {
  background: #f7f7f7;
  padding-top: 80px;
}

.oenotourisme__header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px 70px;
  text-align: center;
}

.oenotourisme__tagline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  margin: 0 0 4px;
}

.oenotourisme__title {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: var(--weight-black);
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 8px;
}

.oenotourisme__subtitle {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

/* ════════════════════════════════════════════
   EVENT BLOC — Aux Domaines & Hors Les Vignes
   ════════════════════════════════════════════ */

.event-bloc--domaines { background: #f7F3C3; margin-bottom: 60px; }
.event-bloc--vignes   { background: #C3E8F7; margin-bottom: 140px; }


/* ════════════════════════════════════════════
   BLOC EVOC — défilé de mots
   ════════════════════════════════════════════ */

.bloc-evoc {
  overflow: hidden;
  padding: 32px 0;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  margin-bottom: 60px;
}

.bloc-evoc__track {
  display: flex;
  width: max-content;   /* boîte = largeur du contenu (2 groups) → translateX(-50%) = 1 group exact, sans saut */
  white-space: nowrap;
  animation: evoc-scroll var(--evoc-duration, 28s) linear infinite;
  will-change: transform;
}

/* -50% de la boîte du track (= largeur du contenu grâce à width:max-content)
   = exactement un group → la copie prend la place de l'original, sans raccord. */
@keyframes evoc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.bloc-evoc__group {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  flex-shrink: 0;
}

.bloc-evoc__word {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: var(--weight-black);
  color: var(--color-text);
  text-transform: uppercase;
  white-space: nowrap;
}

.bloc-evoc__sep {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}



/* ════════════════════════════════════════════
   EN RÉGION
   ════════════════════════════════════════════ */

.en-region {
  background: #f7f7f7;
  padding-bottom: 140px;
}

.en-region__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}

.en-region__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 0 0;
  margin-bottom: 0;
}

.en-region__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  margin: 0;
}

.en-region__cta-all {
  display: inline-flex;
  align-items: center;
  height: 51px;
  padding: 0 24px;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.en-region__cta-all:hover {
  background: var(--color-blue);
  color: #fff;
}

.en-region__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.en-region__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.en-region__item:first-child {
  border-top: 1px solid var(--color-border);
  margin-top: 32px;
}

.en-region__name {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
}

/* .en-region__cta → components.css (.bt-bleu__cta) */

/* ════════════════════════════════════════════
   GRANDS RENDEZ-VOUS
   Figma node 2303-688
   ════════════════════════════════════════════ */

.grands-rdv {
  padding: 0 80px 0;
  margin-bottom: 0;
}

.grands-rdv__inner {
  max-width: 1280px;
  margin: 0 auto;
  background: var(--color-blue);
  border-radius: 24px 24px 0 0;
  padding: 80px 80px 0;
}

.grands-rdv__header {
  text-align: center;
  margin-bottom: 72px;
}

.grands-rdv__tagline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-regular);
  color: rgba(255,255,255,0.85);
  margin: 0 0 4px;
}

.grands-rdv__title {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: var(--weight-black);
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
}

/* ── Festival items ── */

.festival {
  display: grid;
  grid-template-columns: 410px 410px;
  gap: 26px;
  justify-content: center;
  align-items: center;
  margin-bottom: 70px;
}

.festival--right {
  grid-template-columns: 410px 410px;
}

.festival__img {
  display: block;
  width: 100%;
  overflow: hidden;
}

.festival__img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}

/* Rollover : zoom léger du visuel au survol du bloc (idem page Grands Rendez-Vous). */
.festival:hover .festival__img img {
  transform: scale(1.03);
}

.festival__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}

.festival__date {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: var(--weight-black);
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.festival__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-bold);
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 18px;
}

.festival__desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin: 0 0 20px 0;
}

/* .festival__cta → components.css (.bt-blanc__cta) */

/* ── CTA bas ── */

.grands-rdv__footer {
  display: flex;
  justify-content: center;
  padding: 0 0 80px;
}

.grands-rdv__cta-all {
  display: inline-flex;
  align-items: center;
  height: 49px;
  padding: 0 32px;
  border: 2px solid #fff;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.grands-rdv__cta-all:hover {
  background:  #fff;
  color: var(--color-blue);
}

/* ════════════════════════════════════════════
   RESPONSIVE TABLETTE (768–1180px)
   Oenotourisme + Grands RDV
   ════════════════════════════════════════════ */



/* ── Responsive mobile ── */




/* ════════════════════════════════════════════
   CAVE À VINS
════════════════════════════════════════════ */

.cave-a-vins {
  background: #f7f7f7;
  padding-top: 150px;
  padding-bottom: 0;
}

.cave-a-vins__header {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
  text-align: center;
  margin-bottom: 97px;
}

.cave-a-vins__tagline {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: 1.2;
}

.cave-a-vins__title {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
  margin: 0 0 8px;
}

.cave-a-vins__subtitle {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 1.1;
  margin: 0;
}





/* Bloc ILS FONT L'ÉVÈNEMENT */



/* Cave cards → shared.css */



/* ════════════════════════════════════════════
   LES GRAPHISTES
════════════════════════════════════════════ */

.graphistes {
  background: #f7f7f7;
  padding: 80px 0 120px;
}

.graphistes__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* White rounded box wrapping each slide */
.graphistes__slide {
  display: none;
  align-items: center;
  background: #fff;
  border-radius: 28px;
  padding: 56px 109px;
}

.graphistes__slide.is-active {
  display: flex;
}

/* LEFT — title + desc + nav */

.graphistes__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 302px;
  flex-shrink: 0;
  margin-right: 85px;
}

.graphistes__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}

.graphistes__desc {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

/* Nav: prev · dots · next */

.graphistes__nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.graphistes__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.graphistes__btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.graphistes__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.graphistes__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), width var(--transition-fast);
}

/* Dot actif = pilule (principe carrousels, tout le site) */
.graphistes__dot.is-active {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-blue);
}

/* Drag souris : visuels manipulables, pas de drag natif d'image */
.graphistes__container img {
  -webkit-user-drag: none;
  cursor: grab;
}

/* Visuels et pictos RS = liens cliquables : curseur pointer (pas « grab »),
   et aucun drag du slider initié dessus (cf. hp.js). */
.graphistes__artwork-link img,
.graphistes__portrait-link img,
.graphistes__socials a img {
  cursor: pointer;
}


/* MIDDLE — portrait + credits */

.graphistes__middle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: flex-start;
  width: 295px;
  flex-shrink: 0;
  margin-right: 25px;
}

.graphistes__portrait {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
}

.graphistes__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.graphistes__credits {
  display: flex;
  flex-direction: column;
  gap: 6px;

}

.graphistes__artist-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.graphistes__artist-job {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  margin: 0;
}

.graphistes__socials {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 4px 0;
}

.graphistes__socials a {
  display: flex;
  align-items: center;
  justify-content: center;

  
}

.graphistes__socials a:hover { opacity: 1; }

.graphistes__caption {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 1.5;
  margin: var(--space-4) 0 0; /* espace entre les réseaux sociaux et ce texte */
}

.graphistes__caption a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: var(--weight-bold);
}

.graphistes__caption strong {
  font-weight: var(--weight-bold);
}

/* RIGHT — large artwork */

.graphistes__right {
  flex-shrink: 0;
}

.graphistes__artwork-link {
  display: block;
  line-height: 0;
}

.graphistes__artwork {
  width: 355px;
  height: 505px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}



/* ════════════════════════════════════════════
   PASSEZ LE MESSAGE
════════════════════════════════════════════ */

.passez-message {
  background: #f7f7f7;
  padding: 80px 0 100px;
}



.passez-message__inner {
  max-width: 1063px;
  margin: 0 auto;
}

.passez-message__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.passez-message__title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  margin: 0;
}

/* Grid : 344px | slider (2×334px + gap) */
.passez-message__grid {
  display: grid;
  grid-template-columns: 344px 1fr;
  gap: 25px;
  align-items: start;
}

/* ── Colonne gauche ── */

.passez-message__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Carte bleue — statique */
.passez-message__blue-card {
  width: 344px;
  height: 376px;
  border-radius: 12px;
  background: #2e54bf;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.passez-message__msg {
  font-family: 'Blinker', sans-serif;
  font-size: 36px;
  font-weight: 900;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1.15;
  text-align: center;
  margin: 0;
}

/* ── Slider cards ── */
.passez-message__cards-slider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.passez-message__slide {
  display: none;
}

.passez-message__slide.is-active,
.passez-message__slide.is-next {
  display: block;
  animation: pm-fade-in 220ms ease;
}

@keyframes pm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nav prev/next */
.passez-message__nav {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.passez-message__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.passez-message__btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}








/* Dots de position — cachés par défaut (desktop) */
.passez-message__dots {
  display: none;
}





/* ════════════════════════════════════════════
   NEWSLETTER
════════════════════════════════════════════ */

.newsletter {
  background: #fff;
  padding: 140px 0 100px;
}

.newsletter__inner {
  max-width: 660px;
  margin: 0 auto;
  padding: 0 20px;
}

.newsletter__title {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  margin: 0 0 20px;
}

/* Intro sous le titre — même typo que .cave-a-vins__tagline */
.newsletter__intro {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
  margin: 0 0 56px;
  text-wrap: balance;
}

.newsletter__field {
  position: relative;
  margin-bottom: 40px;
  padding-top: 18px; /* espace pour le label flottant */
}

/* Label flottant — positionné dans la zone de saisie par défaut */
.newsletter__label {
  position: absolute;
  left: 0;
  top: 28px; /* aligné sur la baseline de l'input au repos */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-regular);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s ease, color 0.18s ease;
}

/* Quand l'input est focus OU rempli → label remonte en petit en bleu */
.newsletter__input:focus + .newsletter__label,
.newsletter__input:not(:placeholder-shown) + .newsletter__label {
  transform: translateY(-22px) scale(0.72);
  color: var(--color-blue);
}

.newsletter__input {
  display: block;
  width: 100%;
  padding: 10px 0;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid #dfe3ec;
  outline: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.newsletter__input:focus {
  border-bottom-color: var(--color-blue);
}

.newsletter__submit {
  text-align: center;
  margin-top: 40px;
}

.newsletter__btn {
  display: inline-block;
  padding: 14px 36px;
  background: var(--color-blue);
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.newsletter__btn:hover {
     background: var(--color-text)
 }

.newsletter__rgpd {
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-top: 50px;
  line-height: 1.5;
}

.newsletter__rgpd a {
  color: var(--color-blue);
  text-decoration: underline;
}

/* Message d'erreur d'inscription newsletter (AJAX Brevo). */
.newsletter__error {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: #c0392b;
}

/* Message de confirmation d'inscription (remplace le formulaire sur place). */
.newsletter__success {
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.newsletter__success-title {
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-3);
}

.newsletter__success-text {
  margin: 0;
}




/* ════════════════════════════════════════════
   PARTENAIRES
════════════════════════════════════════════ */

.partenaires {
  padding: 40px 0 56px;
  border-top: 1.5px solid #e0e0e0;
  background: #fff;
}

.partenaires__inner {
  max-width: 1063px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.partenaires__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: #2f3642;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 24px;
}

.partenaires__viewport {
  overflow: hidden;
}

.partenaires__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

/* Mode carrousel — activé en JS uniquement si les logos dépassent
   la largeur du conteneur (ex. ajout de nouveaux partenaires) */
.partenaires__logos.is-marquee {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: partenaires-scroll linear infinite;
  animation-duration: var(--marquee-duration, 24s);
}

@keyframes partenaires-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}



.partenaires__link {
  display: flex;
  align-items: center;
}

.partenaires__logo {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.partenaires__link:hover .partenaires__logo {
  opacity: 1;
}


/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */


/* ── Tablette (max-width: 1180px) ── */
@media (max-width: 1180px) {
  .page--hero .site-header {
  padding: 24px 16px 0;  }

  .hero { height: 680px; }

  .hero__slide { height: 680px; }

  .hero__left { left: 40px; width: 260px; }

  .hero__title { font-size: 38px; width: 260px; }

  .hero__visual {
  left: 320px;
  top: 130px;
  width: 330px;
  height: 420px;
  }

  .hero__cards {
  left: 670px;
  top: 200px;
  width: 220px;
  }

  .hero__info-card { width: 220px; height: 200px; }

  .hero__info-text { font-size: 18px; line-height: 24px; top: 76px; left: 16px; right: 12px; }

  .hero__visual-bas { width: 220px; height: 120px; }

  .hero__nav-btns { left: 40px; top: 469px; }

  .hero__progress { left: 40px; top: 560px; }

  .hero__dot { width: 56px; }

  .rencontres { padding: 60px 0 80px; }

  .rencontres__header { padding: 0 24px; }

  .rencontres__title { font-size: 56px; }

  .rencontres__verbatim { font-size: 32px; }

  .rencontres__cards {
  padding: 0 24px;
  gap: 16px;
  }

  .rencontres__card-title { font-size: 30px; }

  .rencontres__card-quote { font-size: 22px; }

  .oenotourisme__header { padding: 0 24px 48px; }
  .oenotourisme__title { font-size: 56px; }
  .oenotourisme__subtitle { font-size: 32px; }



  .event-bloc { padding: 40px 24px 48px; margin-left: 16px; margin-right: 16px; border-radius: 16px; }
  /* event-bloc__cards + event-card responsive → shared.css */


  .bloc-evoc__word { font-size: 24px; }


  .en-region__inner { padding: 0 24px; }
  .en-region__name { font-size: 26px; }

  .grands-rdv { padding: 0 16px; }
  .grands-rdv__inner { padding: 56px 40px 0; }
  .grands-rdv__title { font-size: 56px; }

  .festival { grid-template-columns: 280px 1fr; gap: 32px; }
  .festival--right { grid-template-columns: 1fr 280px; }
  .festival__date { font-size: 36px; }
  .festival__title { font-size: 28px; }


  .cave-a-vins__title { font-size: 60px; }
  .cave-a-vins__subtitle { font-size: 36px; }

  .graphistes__container { padding: 0 40px; }

  .graphistes__slide {
  flex-wrap: wrap;
  gap: 28px;
  padding: 40px 32px;
  }

  .graphistes__left {
  width: 100%;
  margin-right: 0;
  }

  .graphistes__middle {
  width: 180px;
  margin-right: 0;
  }

  .graphistes__right {
  width: 280px;
  }

  .graphistes__title { font-size: 36px; }

  .graphistes__artwork {
  width: 280px;
  height: 398px;
  }

  .passez-message__inner { max-width: calc(100% - 80px); }
  .passez-message__grid { grid-template-columns: 260px 1fr; gap: 20px; }
  .passez-message__blue-card { width: 100%; }

  
}

/* ── Mobile (max-width: 767px) ── */
@media (max-width: 767px) {
  .page--hero .site-header {
  position: relative;
  padding: 12px 16px;
  }

  .hero__info-credit {
  font-size: 14px;
  }

  .hero { height: auto; overflow: visible; }

  .hero__track { height: auto; }

  .hero__slide {
  position: relative;
  inset: auto;
  display: none;
  flex-direction: column;
  padding: 20px 20px 96px;
  opacity: 1;
  pointer-events: auto;
  }

  .hero__slide.is-active { display: flex; }

  /* hero__inner : visuel "affiche" en fond (hero__left superposé en bas via
  grid overlap) puis hero__cards en ligne compacte dessous */
  .hero__inner {
  position: static;
  width: 100%;
  height: auto;
  left: auto;
  transform: none;
  display: grid;
  grid-template-areas: "stack" "cards";
  grid-template-rows: auto auto;
  row-gap: 12px;
  }

  /* hero__ui (contrôles) : absolus par rapport au .hero */
  .hero__ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  top: auto;
  transform: none;
  pointer-events: none;
  }

  /* hero__left se superpose au bas du visuel, comme une légende d'affiche */
  .hero__left {
  grid-area: stack;
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: auto;
  align-self: end;
  justify-content: flex-end;
  padding: 0 24px 24px;
  gap: 10px;
  margin-bottom: 0;
  }

  .hero__tagline { font-size: 16px; color: rgba(255, 255, 255, 0.85); }

  .hero__title { font-size: clamp(28px, 8vw, 38px); width: 100%; color: #fff; }

  .hero__title-br { display: block; }

  .hero__visual {
  grid-area: stack;
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 420px;
  border-radius: 16px;
  margin-bottom: 0;
  }

  /* Dégradé pour garder le texte lisible quelle que soit l'image */
  .hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 60%);
  pointer-events: none;
  }

  /* Carte info + mini-visuel fusionnés en une seule ligne compacte */
  .hero__cards {
  grid-area: cards;
  position: static;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  }

  .hero__info-card {
  flex: 1;
  width: auto;
  height: auto;
  min-height: 88px;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  }

  .hero__tag { position: static; display: inline-flex; align-self: flex-start; height: 24px; padding: 0 10px; font-size: 11px; margin: 0; }

  .hero__info-text { position: static; padding: 0; font-size: 13px; line-height: 18px; margin-top: 4px}

  .hero__info-text p { line-height: 18px !important;}

  .hero__info-credit { margin-top: 0px !important; font-size: 14px !important; }

  .hero__visual-bas {
  width: 108px;
  flex-shrink: 0;
  margin-top: 0;
  }

  .hero__ellipse-img { width: 70px; height: 70px; }

  .hero__nav-btns {
  position: absolute;
  left: 262px;
  bottom: 24px;
  top: auto;
  gap: 14px;
  top: -85px;
  }

  .hero__btn { width: 40px; height: 40px; }

  .hero__progress {
  position: absolute;
  left: 20px;
  bottom: 38px;
  top: -80px;
  }

  .hero__dot { width: 50px; }

  .rencontres { padding: 48px 0 34px; }

  .rencontres__header { padding: 0 20px; }

  .rencontres__tagline { font-size: 20px; }

  .rencontres__title { font-size: 40px; }

  .rencontres__verbatim { font-size: 24px; }
  .rencontres__card-cta { height: 35px; font-size: 14px; padding: 0 14px; }
  .rencontres__cards {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  gap: 16px;
  padding: 0 20px 16px;
  margin-top: 40px;
  /* cache la scrollbar */
  scrollbar-width: none;
  }

  .verbatim__card-author {
  margin: 0px 0 25px;
  }

  .rencontres__cards::-webkit-scrollbar {
  display: none;
  }

  .rencontres__card {
  flex: 0 0 78vw;
  max-width: 260px;
  scroll-snap-align: start;
  }


  .rencontres__card-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  }

  .rencontres__card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  /* line-height: 24px; */
  margin: 0 0 25px;
  }
  .rencontres__card-title { font-size: 26px; }

  .rencontres__card-quote { font-size: 20px;  line-height: 1.4; margin: 0 0 25px; }

  /* Oenotourisme mobile */
  .oenotourisme { padding-top: 48px; }
  .oenotourisme__header { padding: 0 20px 40px; }
  .oenotourisme__tagline { font-size: 20px; }
  .oenotourisme__title { font-size: 40px; }
  .oenotourisme__subtitle { font-size: 24px;line-height: 1.15; }

  .event-bloc {
  border-radius: 16px;
  padding: 5px 20px 40px;
  }
  .bloc-evoc { padding: 22px 0;}


  .event-bloc--vignes { margin-bottom: 40px; }
  .en-region { padding-bottom: 90px; }

  /* event-bloc__cards slider + event-card → shared.css */

  .bloc-evoc__word { font-size: 28px; }

  /* vitesse gérée par JS via --evoc-duration */

  .en-region__inner { padding: 0 20px; }
  .en-region__title { font-size: 28px; }
  .en-region__name { font-size: 22px; }
  .en-region__item { gap: 12px; flex-wrap: wrap; }
  /* .bt-bleu__cta responsive → components.css */
  .en-region__cta-all { height: 35px; padding: 0 14px; font-size: 14px; }

  /* Grands RDV mobile */
  .grands-rdv { padding: 0 12px; }
  .grands-rdv__inner { padding: 48px 20px 0; border-radius: 16px 16px 0 0; }
  .grands-rdv__title { font-size: 40px; line-height: 1; }
  .grands-rdv__tagline { font-size: 20px; }
  .grands-rdv__header { margin-bottom: 40px; }
  .grands-rdv__cta-all { height: 35px; font-size: 14px; padding: 0 14px; }

  .festival {
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 58px;
  }
  .festival__content {
  gap: 2px;
  padding-top: 16px;
  padding-right: 30px;
  padding-left: 30px;
  }


  .grands-rdv__footer {
  display: flex;
  justify-content: center;
  padding: 0 0 50px;
  }

  .festival--right {
  grid-template-columns: 1fr;
  }
  .festival__img {
  width: 80%;
  overflow: hidden;
  justify-self:center
  }
  .festival--right .festival__img { order: -1; }

  .festival__date { font-size: 26px; padding-bottom: 5px; }
  .festival__title { font-size: 20px; }
  .festival__desc { font-size: 14px; }
  /* .bt-blanc__cta responsive → components.css */

  .cave-a-vins {

  padding-top: 80px;

  }

  .cave-a-vins__header { padding: 0 20px; margin-bottom: 66px;}
  .cave-a-vins__title { font-size: 40px; }
  .cave-a-vins__subtitle { font-size: 24px; }
  .cave-a-vins__tagline { font-size: 22px; }

  .event-bloc--cave { padding: 0 0 56px; }


  .cave-cards {
   padding: 0 0px 16px;
   margin-top: 20px;
  }



  .graphistes { padding: 0px 0 64px; }
  .graphistes__container { padding: 0 20px; }

  .graphistes__slide {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 40px 20px 32px;
  border-radius: 20px;
  }

  .graphistes__slide.is-active { display: flex; }

  .graphistes__right {
  width: 65%;
  margin-right: 0;
  }

  /* .graphistes__left et .graphistes__middle deviennent transparents au flex
  pour réordonner librement leurs enfants (nav déplacé sous caption,
  portrait superposé en bas à droite de l'artwork) */
  .graphistes__left,
  .graphistes__middle {
  display: contents;
  }

  .graphistes__title    { order: 1; }
  .graphistes__desc     { order: 2; }
  .graphistes__right    { order: 3; }
  .graphistes__portrait { order: 4; }
  .graphistes__credits  { order: 5; }
  .graphistes__nav      { order: 6; }

  .graphistes__portrait {
  width: 37%;
  align-self: flex-end;
  margin-top: -45%;
  margin-bottom: 0;
  border: 0px solid #fff;
  }

  .graphistes__artwork {
  width: 92%;
  height: auto;
  aspect-ratio: 355 / 505;
  border-radius: 12px;
  }

  .graphistes__credits {
  margin-top: 0px;
  gap:0px;
  }
  .graphistes__title { font-size: 28px; }
  .graphistes__artist-job { padding-bottom: 8px; }
  .graphistes__socials { padding-bottom: 8px; }
  .graphistes__desc  { font-size: 14px; }

  .passez-message { padding: 40px 0 60px; }
  .passez-message__inner { max-width: 100%; padding: 0 20px; }
  .passez-message__title { font-size: 28px; }

  /* Grid 1 colonne, les enfants s'empilent */
  .passez-message__grid {
  grid-template-columns: 1fr;
  gap: 16px;
  background-color: #2e54bf;
  border-radius: 12px;
  overflow: hidden;
  }

  /* Carte bleue compacte */
  .passez-message__header { margin-bottom: 20px; }
  .passez-message__blue-card { width: 100%; height: 80px; padding: 20px 20px; border-radius: 12px;  justify-content: left;}
  .passez-message__msg { font-size: 28px; padding-top: 20px; text-align: left;}

  /* Masquer boutons nav sur mobile — scroll natif suffit */
  .passez-message__nav { display: none; }

  /* passez-message__left transparent pour ordonner les enfants dans le grid */
  .passez-message__left { display: contents; }
  .passez-message__blue-card   { order: 1; }
  .passez-message__cards-slider { order: 2; }
  .passez-message__dots        { order: 3; }

  /* ── Slider horizontal natif ── */

  
  .passez-message__cards-slider {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 16px;
  /* Déborde du padding de l'inner pour avoir le peek sur les bords */
  margin-left: 0px;
  margin-right: -20px;
  padding-left: 20px;
  /* Marge de fin : la dernière card ne bute plus contre le bord droit. */
  padding-right: 20px;
  scroll-padding-left: 20px;
  margin-bottom: 20px;
  }
  .passez-message__cards-slider::-webkit-scrollbar { display: none; }

  /* Chaque slide : 82% = card visible + 18% peek suivante */
  .passez-message__slide,
  .passez-message__slide.is-active,
  .passez-message__slide.is-next {
  display: block;
  flex: 0 0 70%;
  scroll-snap-align: start;
  min-width: 0;
  }


 

  /* Dots de position */
  .passez-message__dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 4px;
  }
  .passez-message__pdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.2s;
  }
  .passez-message__pdot.is-active {
  background: var(--color-blue);
  }

  .newsletter__inner {
    max-width: 360px;
   
}
  .newsletter__title { font-size: 40px; margin-bottom: 16px; }
  .newsletter__intro { font-size: 22px; margin-bottom: 36px; }
  .newsletter__field { margin-bottom: 28px; }
  .newsletter {
  background: #fff;
  padding: 60px 0 100px;
  }

  .partenaires__logos { gap: 20px; }
  .partenaires__logo { max-height: 44px; }
}

/* ── Mouvement réduit ── */
@media (prefers-reduced-motion: reduce) {
  .bloc-evoc__track { animation: none; }

  .partenaires__logos.is-marquee { animation: none; }

  .passez-message__slide.is-active,
  .passez-message__slide.is-next { animation: none; }
}


/* Portrait de l'illustrateur cliquable (même lien que l'illustration). */
a.graphistes__portrait { display: block; cursor: pointer; transition: opacity var(--transition-fast); }
a.graphistes__portrait:hover,
a.graphistes__portrait:focus-visible { opacity: .85; }