/* ============================================================
   ZURIGO Notturno · base globale (header + footer + tokens)
   Charge sur toutes les pages via functions.php
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Mulish:wght@400;500;600;700&display=swap');

:root {
  --notturno-bg: #11201A;
  --notturno-bg-2: #0C1813;
  --notturno-bg-3: #16291F;
  --notturno-gold: #C9A24B;
  --notturno-gold-2: #E3C886;
  --notturno-gold-soft: rgba(201, 162, 75, 0.4);
  --notturno-fg: #F2EFE5;
  --notturno-fg-2: #B7C1B4;
  --notturno-fg-3: #7C8A7C;
  --notturno-line: rgba(201, 162, 75, 0.24);
  --notturno-serif: 'Cormorant Garamond', Georgia, serif;
  --notturno-sans: 'Mulish', 'Helvetica Neue', Arial, sans-serif;
  --notturno-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.notturno {
  background: var(--notturno-bg);
  color: var(--notturno-fg);
  font-family: var(--notturno-sans);
  font-size: 16px;
  margin: 0;
  padding-top: 88px; /* reserve space for fixed header */
}

body.notturno *,
body.notturno *::before,
body.notturno *::after { box-sizing: border-box; }

body.notturno img { display: block; max-width: 100%; }
body.notturno a { color: inherit; text-decoration: none; }

/* ============================================================
   HEADER
   ============================================================ */
.t-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  padding: 22px 0;
  transition: all .4s var(--notturno-ease);
}
.t-head[data-scrolled] {
  background: rgba(12, 24, 19, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 13px 0;
  border-bottom: 1px solid var(--notturno-line);
}
.t-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 48px;
}
.t-head__brand img {
  height: 44px;
  width: auto;
  transition: height .4s var(--notturno-ease);
}
.t-head[data-scrolled] .t-head__brand img { height: 36px; }

.t-nav {
  display: flex;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.t-nav li { padding: 0; margin: 0; }
.t-nav a,
.t-nav a:link,
.t-nav a:visited,
.t-nav a:hover,
.t-nav a:focus,
.t-nav .current-menu-item > a,
.t-nav .current-menu-ancestor > a,
.t-nav .current_page_item > a {
  font-family: var(--notturno-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--notturno-fg) !important;
  transition: opacity .25s var(--notturno-ease);
}
.t-nav a:hover { opacity: 0.75; }

.t-cta {
  font-family: var(--notturno-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--notturno-gold);
  border: 1px solid var(--notturno-gold-soft);
  padding: 12px 22px;
  transition: all .3s var(--notturno-ease);
  white-space: nowrap;
}
.t-cta:hover {
  background: var(--notturno-gold);
  color: var(--notturno-bg);
}

@media (max-width: 980px) {
  .t-nav,
  .t-cta { display: none; }
}

/* ============================================================
   Menu mobile · drawer du module ldstarter (Navigation)
   Remplace l'ancien mini-menu déroulant maison (.t-burger/.t-mnav).
   Le module gère lui-même son propre seuil desktop à 1024px ; on le
   resserre ici à 980px pour rester cohérent avec le seuil utilisé
   juste au-dessus pour .t-nav/.t-cta (sinon la nav desktop ET le
   bouton burger seraient visibles ensemble entre 981px et 1023px).
   Couleurs/police : on reprend l'identité Notturno (or sur vert nuit,
   Cormorant Garamond en italique pour les liens).
   ============================================================ */
@media (min-width: 981px) {
  body.notturno .lds-mnav-toggle,
  body.notturno .lds-mnav {
    display: none !important;
  }
}

body.notturno {
  --lds-mnav-accent: var(--notturno-gold);
}
body.notturno .lds-mnav-toggle {
  color: var(--notturno-gold);
}
body.notturno .lds-mnav[data-style="dark"] .lds-mnav__panel {
  --lds-mnav-bg: var(--notturno-bg-2);
  --lds-mnav-ink: var(--notturno-fg);
  --lds-mnav-muted: var(--notturno-fg-3);
  --lds-mnav-border: var(--notturno-line);
}
body.notturno .lds-mnav__menu a {
  font-family: var(--notturno-serif);
  font-style: italic;
  font-size: 22px;
}
body.notturno .lds-mnav__cta {
  color: var(--notturno-bg);
}
body.notturno .lds-mnav__brandtext {
  font-family: var(--notturno-serif);
  font-style: italic;
}

/* ============================================================
   FOOTER
   ============================================================ */
.t-foot {
  background: var(--notturno-bg-2);
  border-top: 1px solid var(--notturno-line);
  padding: 72px 0 36px;
  color: var(--notturno-fg-2);
}
.t-foot__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: 48px;
}
.t-foot__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 44px;
}
.t-foot__logo img {
  width: 200px;
  height: auto;
  margin-bottom: 20px;
}
.t-foot__logo p {
  font-family: var(--notturno-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  max-width: 32ch;
  color: var(--notturno-fg-3);
  margin: 0;
}
.t-foot h5 {
  font-family: var(--notturno-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--notturno-gold);
  margin: 0 0 18px;
}
.t-foot ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.t-foot li {
  margin-bottom: 12px;
  font-size: 14px;
}
.t-foot a { color: var(--notturno-fg-2); transition: color .25s var(--notturno-ease); }
.t-foot a:hover { color: var(--notturno-gold-2); }
.t-foot__bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--notturno-line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--notturno-fg-3);
}
.t-foot__legal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.t-foot__legal a,
.t-foot__legal .lds-cookies-link {
  color: var(--notturno-fg-3);
  font-size: 12px;
}
.t-foot__legal a:hover,
.t-foot__legal .lds-cookies-link:hover {
  color: var(--notturno-gold-2);
}

@media (max-width: 980px) {
  .t-foot__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Nos univers · images uniformes
   3 vignettes alignées au même format, peu importe l'image source.
   ============================================================ */
.uni-img,
.uni-img .elementor-widget-container,
.uni-img a {
    display: block;
    width: 100%;
    height: 100%;
}
.uni-img img {
    width: 100% !important;
    height: 380px !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
}
@media (max-width: 980px) {
    .uni-img img { height: 280px !important; }
}

/* Sur mobile, les 3 colonnes "Nos univers" restent à 33.33% de large :
   Elementor prévoit bien un passage à 100% sous 767px (--width via
   .e-con.e-flex dans frontend.css), mais cette règle générique est
   moins spécifique que le --width:33.33% généré pour cette page
   précise et perd donc la cascade → les 3 blocs restent compressés
   côte à côte et leur texte déborde à droite. On force ici le
   passage à 100% (empilement vertical) avec une spécificité/priorité
   suffisante pour gagner face à la règle desktop. */
@media (max-width: 767px) {
    body.notturno .zg-univers {
        --width: 100% !important;
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* ============================================================
   LDSTARTER FORMS · skin Notturno
   Applied via classe additionnelle `lds-form--notturno` posée
   sur .lds-form-wrapper par le shortcode [zurigo_form_contact].
   ============================================================ */
.lds-form-wrapper.lds-form--notturno {
    background: var(--notturno-bg-3, #16291F);
    border: 1px solid var(--notturno-line, rgba(201, 162, 75, 0.24));
    padding: 40px;
}

.lds-form--notturno .lds-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
}

.lds-form--notturno .lds-form__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 18px;
}

/* Largeurs de champ ldstarter */
.lds-form--notturno .lds-form__field--w100 { grid-column: span 2; }
.lds-form--notturno .lds-form__field--w75  { grid-column: span 2; }
.lds-form--notturno .lds-form__field--w66  { grid-column: span 2; }
.lds-form--notturno .lds-form__field--w50  { grid-column: span 1; }
.lds-form--notturno .lds-form__field--w33  { grid-column: span 1; }
.lds-form--notturno .lds-form__field--w25  { grid-column: span 1; }

.lds-form--notturno .lds-form__field {
    margin: 0;
    padding: 0;
}

.lds-form--notturno .lds-form__label {
    display: block;
    font-family: var(--notturno-sans, 'Mulish', sans-serif);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--notturno-fg-3, #7C8A7C);
    margin-bottom: 10px;
}

.lds-form--notturno .lds-form__required {
    color: var(--notturno-gold, #C9A24B);
    margin-left: 2px;
}

.lds-form--notturno .lds-form__input,
.lds-form--notturno .lds-form__textarea,
.lds-form--notturno .lds-form__select {
    width: 100%;
    font-family: var(--notturno-serif, 'Cormorant Garamond', serif);
    font-size: 19px;
    color: var(--notturno-fg, #F2EFE5);
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--notturno-line, rgba(201, 162, 75, 0.24));
    background: transparent;
    border-radius: 0;
    transition: border-color .25s var(--notturno-ease, ease);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.lds-form--notturno .lds-form__select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--notturno-gold, #C9A24B) 50%),
        linear-gradient(135deg, var(--notturno-gold, #C9A24B) 50%, transparent 50%);
    background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 28px;
}
.lds-form--notturno .lds-form__select option {
    background: var(--notturno-bg-3, #16291F);
    color: var(--notturno-fg, #F2EFE5);
}

.lds-form--notturno .lds-form__input::placeholder,
.lds-form--notturno .lds-form__textarea::placeholder {
    color: var(--notturno-fg-3, #7C8A7C);
    font-style: italic;
}

.lds-form--notturno .lds-form__input:focus,
.lds-form--notturno .lds-form__textarea:focus,
.lds-form--notturno .lds-form__select:focus {
    outline: none;
    border-bottom-color: var(--notturno-gold, #C9A24B);
}

.lds-form--notturno .lds-form__textarea {
    resize: vertical;
    min-height: 84px;
    font-family: var(--notturno-serif, 'Cormorant Garamond', serif);
}

/* Field error state */
.lds-form--notturno .lds-form__field--has-error .lds-form__input,
.lds-form--notturno .lds-form__field--has-error .lds-form__textarea,
.lds-form--notturno .lds-form__field--has-error .lds-form__select {
    border-bottom-color: #c9606b;
}
.lds-form--notturno .lds-form__field-error {
    color: #e0a4a4;
    font-family: var(--notturno-serif, serif);
    font-style: italic;
    font-size: 14px;
    margin-top: 6px;
    min-height: 0;
}
.lds-form--notturno .lds-form__field-error:empty { display: none; }

/* Checkbox / radio */
.lds-form--notturno .lds-form__checkbox-single,
.lds-form--notturno .lds-form__checkbox-item,
.lds-form--notturno .lds-form__radio-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--notturno-serif, serif);
    font-size: 16px;
    color: var(--notturno-fg-2, #B7C1B4);
    margin-bottom: 8px;
}
.lds-form--notturno .lds-form__checkbox-input,
.lds-form--notturno .lds-form__radio-input {
    accent-color: var(--notturno-gold, #C9A24B);
}

/* Submit button */
.lds-form--notturno .lds-form__submit {
    grid-column: span 2;
    margin-top: 18px;
}
.lds-form--notturno .lds-form__button {
    width: 100%;
    background: var(--notturno-gold, #C9A24B);
    color: var(--notturno-bg, #11201A);
    border: 0;
    border-radius: 0;
    padding: 17px;
    font-family: var(--notturno-sans, 'Mulish', sans-serif);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s var(--notturno-ease, ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Normalisation des CTA dorés du thème :
   tous les boutons (Elementor, header, formulaire, inline) restent carrés.
   Le formulaire héritait sinon de `border-radius: 9999px` (ldstarter). */
body.notturno .elementor-button,
body.notturno .elementor-widget-button .elementor-button,
body.notturno .t-cta {
    border-radius: 0 !important;
}
.lds-form--notturno .lds-form__button:hover {
    background: var(--notturno-gold-2, #E3C886);
}
.lds-form--notturno .lds-form__button[disabled] {
    opacity: 0.5;
    cursor: wait;
}
.lds-form--notturno .lds-form__spinner-circle {
    stroke-dasharray: 60;
    stroke-dashoffset: 30;
    animation: ldsFormSpin 1s linear infinite;
    transform-origin: center;
}
@keyframes ldsFormSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Messages success / error */
.lds-form--notturno .lds-form__messages { grid-column: span 2; }
.lds-form--notturno .lds-form__message {
    padding: 16px 20px;
    margin-top: 18px;
    font-family: var(--notturno-serif, serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    border: 1px solid currentColor;
}
.lds-form--notturno .lds-form__message--success { color: var(--notturno-gold-2, #E3C886); }
.lds-form--notturno .lds-form__message--error   { color: #e0a4a4; }

/* File input */
.lds-form--notturno .lds-form__file { display: none; }
.lds-form--notturno .lds-form__file-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px dashed var(--notturno-line, rgba(201, 162, 75, 0.24));
    color: var(--notturno-fg-2, #B7C1B4);
    cursor: pointer;
    font-family: var(--notturno-serif, serif);
}
.lds-form--notturno .lds-form__file-info {
    font-size: 12px;
    color: var(--notturno-fg-3, #7C8A7C);
    margin: 8px 0 0;
    font-style: italic;
}

@media (max-width: 720px) {
    .lds-form-wrapper.lds-form--notturno { padding: 28px; }
    .lds-form--notturno .lds-form__fields { grid-template-columns: 1fr; }
    .lds-form--notturno .lds-form__field--w100,
    .lds-form--notturno .lds-form__field--w75,
    .lds-form--notturno .lds-form__field--w66,
    .lds-form--notturno .lds-form__field--w50,
    .lds-form--notturno .lds-form__field--w33,
    .lds-form--notturno .lds-form__field--w25 { grid-column: span 1; }
    .lds-form--notturno .lds-form__submit,
    .lds-form--notturno .lds-form__messages { grid-column: span 1; }
}

/* ============================================================
   Animations partagées (reveal au scroll + hover)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Fade-up des sections à l'arrivée dans le viewport.
     L'infra (IntersectionObserver) est gérée par notturno.js,
     qui ajoute la classe .is-in dès que l'élément entre. */
  body.notturno .z-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 1s var(--notturno-ease),
      transform 1s var(--notturno-ease);
    will-change: opacity, transform;
  }
  body.notturno .z-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* En mode édition Elementor, l'IntersectionObserver de notturno.js
     ne tourne pas → les sections .z-reveal resteraient invisibles.
     La classe .zg-in-editor est posée côté PHP via body_class quand on
     détecte editor/preview Elementor (voir functions.php). */
  body.zg-in-editor .z-reveal,
  body.elementor-editor-active .z-reveal,
  body.elementor-editor-preview .z-reveal,
  body.elementor-html .z-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Zoom doux sur les images au hover. S'applique à .uni-img (univers)
     + classe utilitaire .zg-zoom (galerie, cards full-bleed…). */
  .uni-img img,
  .zg-zoom img,
  .zg-zoom .elementor-widget-container img {
    transition:
      transform .8s var(--notturno-ease),
      filter   .8s var(--notturno-ease);
    will-change: transform;
  }
  .uni-img:hover img,
  .uni-img a:hover img,
  .zg-zoom:hover img,
  .zg-zoom a:hover img {
    transform: scale(1.045);
    filter: brightness(1.06) saturate(1.04);
  }

  /* Cards (régions + events) : léger lift + ombre au hover.
     Le card "remonte" d'un cheveu, sans bouger le voile sombre interne. */
  .zg-card {
    transition:
      transform .4s var(--notturno-ease),
      box-shadow .4s var(--notturno-ease),
      border-color .4s var(--notturno-ease);
    will-change: transform;
  }
  .zg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    border-color: rgba(201, 162, 75, 0.45);
  }

  /* Liens éditoriaux dorés : le filet horizontal s'allonge au hover.
     S'applique aux <a> qui contiennent un <span> de filet (pattern Notturno). */
  body.notturno a:hover > span[style*="background:#C9A24B"],
  body.notturno a:hover > span[style*="background: #C9A24B"] {
    width: 56px !important;
  }
  body.notturno a > span[style*="background:#C9A24B"],
  body.notturno a > span[style*="background: #C9A24B"] {
    transition: width .35s var(--notturno-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.notturno .z-reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Parallax léger sur les sections full-bleed
   Géré en JS (initParallaxBg) → background-position-y suit le scroll.
   Désactivé sous 1024px et pour prefers-reduced-motion.
   ============================================================ */
.zg-parallax-bg {
  will-change: background-position;
}

/* ============================================================
   Hover cards : deux comportements distincts.
   - .zg-card-region : le paragraphe descriptif n'apparaît qu'au hover
   - .zg-card-event  : zoom léger + brightness + lift, infos visibles
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Régions d'Italie · effet « le titre cède la place »
     Au repos : le paragraphe est plié (max-height 0, opacité 0), donc
     le widget text-editor ne contient visuellement que le numéro + le
     nom. Comme le container card a justify-content:flex-end, ce bloc
     reste collé en bas à gauche.
     Au hover : le paragraphe se déplie + apparaît en glissant depuis
     le bas → le widget grandit vers le haut, ce qui fait remonter
     naturellement le numéro et le titre. */
  .zg-card-region .elementor-widget-text-editor p {
    max-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    overflow: hidden;
    transition:
      max-height .55s var(--notturno-ease),
      opacity   .4s  var(--notturno-ease) .08s,
      transform .4s  var(--notturno-ease) .08s,
      margin    .4s  var(--notturno-ease);
    pointer-events: none;
    will-change: max-height, opacity, transform;
  }
  .zg-card-region:hover .elementor-widget-text-editor p {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 8px;
    pointer-events: auto;
  }

  /* Événements · même chorégraphie que les régions
     Au repos : kicker + titre collés en bas. Au hover : ils remontent
     pendant que le descriptif se déplie depuis le bas.
     La carte est figée en hauteur (overflow:hidden) pour que la
     révélation du paragraphe ne fasse pas grandir la carte ni
     n'étire ses voisines via le flex stretch. */
  .zg-card-event {
    height: 380px !important;
    min-height: 380px !important;
    max-height: 380px !important;
    overflow: hidden;
  }

  /* L'image de fond + le voile d'overlay (::before Elementor) débordent
     sous la bordure 1px semi-transparente, ce qui laisse passer ~1px
     d'image non-assombrie tout autour. On clip l'image et la couleur
     de fond au padding-box pour que la bordure reste au-dessus d'un
     fond uniforme. */
  .zg-card {
    background-clip: padding-box !important;
  }

  /* Zoom interne de l'image au hover (events + régions).
     L'image inline d'Elementor est désactivée et remplacée par un
     ::after qui porte l'image via la variable --zg-card-img (posée
     par-cardCSS sur chaque container). Seul ::after se met à scale,
     la bordure et l'overlay (::before Elementor) restent fixes. */
  .zg-card-event,
  .zg-card-region {
    isolation: isolate;
    overflow: hidden !important;
    contain: paint;
    background-image: none !important;
    background-color: #0B1612 !important;
  }
  .zg-card-event::after,
  .zg-card-region::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--zg-card-img);
    background-size: cover;
    background-position: center;
    transition: transform 1.1s var(--notturno-ease);
    transform-origin: center;
    z-index: -1;
    pointer-events: none;
  }
  .zg-card-event:hover::after,
  .zg-card-region:hover::after {
    transform: scale(1.06);
  }

  /* Variables --zg-card-img par carte (background-image source).
     Posées ici plutôt que via custom_css Elementor (qui requiert Pro
     et ne s'active pas toujours en éditeur). */
  .elementor-element.elementor-element-adf4ebe {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/06/IMG_3800-1-scaled.jpeg');
  }
  .elementor-element.elementor-element-704fa33 {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/06/IMG_3775-1-scaled.jpeg');
  }
  .elementor-element.elementor-element-05afaf9 {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/06/IMG_3790-scaled.jpeg');
  }
  /* Cartes régions · « Du marché à la table » */
  .elementor-element.elementor-element-7ae0159 {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/07/AdobeStock_184438229.jpeg');
  }
  .elementor-element.elementor-element-807eca7 {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/07/AdobeStock_881217947.jpeg');
  }
  .elementor-element.elementor-element-3408f9e {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/07/AdobeStock_227883696.jpeg');
  }
  .elementor-element.elementor-element-109cb5c {
    --zg-card-img: url('https://zurigo.ldsolutions.fr/wp-content/uploads/2026/07/AdobeStock_320332890.jpeg');
  }
  .zg-card-event .elementor-widget-text-editor p {
    max-height: 0;
    margin: 0;
    opacity: 0;
    transform: translateY(12px);
    overflow: hidden;
    transition:
      max-height .55s var(--notturno-ease),
      opacity   .4s  var(--notturno-ease) .08s,
      transform .4s  var(--notturno-ease) .08s,
      margin    .4s  var(--notturno-ease);
    pointer-events: none;
    will-change: max-height, opacity, transform;
  }
  .zg-card-event:hover .elementor-widget-text-editor p {
    max-height: 160px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 8px;
    pointer-events: auto;
  }

  /* Retire le lift/box-shadow hérité de .zg-card sur les events :
     seuls le slide-up du paragraphe et la transition border-color subsistent. */
  .zg-card-event:hover {
    transform: none;
    box-shadow: none;
  }

  .zg-card { transition: transform .5s var(--notturno-ease), box-shadow .4s, border-color .4s; }
}

/* ============================================================
   Hover Univers · zoom doux + image plus claire, pas d'overlay
   Le zoom-image vient déjà de .uni-img (plus haut).
   On ajoute juste un léger lift du container entier au hover.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .zg-univers {
    transition: transform .5s var(--notturno-ease), filter .5s var(--notturno-ease);
  }
  .zg-univers:hover {
    transform: translateY(-4px);
    filter: brightness(1.05);
  }
}

/* ============================================================
   Counters animés (80%, 20+) · animés à l'arrivée en viewport
   par notturno.js → initCounters().
   ============================================================ */
.zg-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Témoignages · module Testimonials (ldstarter)
   Habille le rendu du shortcode [ld_testimonials] pour retrouver
   le style des 3 avis « Ils ont goûté l'Italie chez nous »
   (texte nu sur le fond de section, sans encart ni avatar).
   Fond/étoiles fixés ici en CSS plutôt que via
   modules.testimonials.styles (local-config.php) : le module met
   en cache sa config trop tôt pour que cet override s'applique,
   cf. commentaire dans local-config.php.
   ============================================================ */
body.notturno .lds-testimonials-grid {
  gap: 40px 48px;
}
body.notturno .lds-testimonial-card {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
body.notturno .lds-testimonial-card__header {
  margin-bottom: 16px;
}
body.notturno .lds-testimonial-card__avatar {
  display: none;
}
body.notturno .lds-stars__star {
  width: 13px;
  height: 13px;
  fill: var(--notturno-line);
}
body.notturno .lds-stars__star--filled {
  fill: var(--notturno-gold);
}
body.notturno .lds-testimonial-card__content {
  font-family: var(--notturno-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.4;
  color: var(--notturno-fg);
}
body.notturno .lds-testimonial-card__content::before {
  content: none;
}
body.notturno .lds-testimonial-card__author {
  font-family: var(--notturno-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--notturno-gold);
}
body.notturno .lds-testimonial-card__name {
  display: inline;
  font-weight: 600;
}
body.notturno .lds-testimonial-card__status {
  display: inline;
  font-weight: 600;
  color: var(--notturno-gold);
  font-size: 11px;
  margin: 0;
}
body.notturno .lds-testimonial-card__status::before {
  content: ' · ';
}

/* ============================================================
   Responsive · anti-débordement mobile
   Le kit Elementor de ce site n'a quasiment aucune valeur
   "mobile"/"tablette" définie par widget (une seule media query
   sur toute la home) : les titres gardent leur taille desktop
   sur petit écran, ce qui les fait déborder de leur conteneur.
   ============================================================ */
@media (max-width: 600px) {
  /* Filet de sécurité : les mots longs ne débordent plus de leur bloc,
     ils passent à la ligne au lieu de dépasser la largeur de l'écran. */
  body.notturno .elementor-heading-title,
  body.notturno .elementor-widget-heading h1,
  body.notturno .elementor-widget-heading h2,
  body.notturno .elementor-widget-heading h3,
  body.notturno .elementor-widget-text-editor p,
  body.notturno .elementor-widget-text-editor h1,
  body.notturno .elementor-widget-text-editor h2,
  body.notturno .elementor-widget-text-editor h3 {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

}

/* ============================================================
   Harmonisation des titres sur mobile
   Les h2/h3 du site sont posés en style inline par Elementor
   (25px → 96px selon la section, ex. elementor-element-9217960,
   dd17a54, 4803a1e…). Un style inline passe devant n'importe
   quelle règle externe non-!important, donc les titres gardent
   leur taille desktop sur petit écran : trop gros, et disparates
   d'une section à l'autre. On unifie ici à deux paliers cohérents
   (titre de section / sous-titre) plutôt qu'une taille par bloc.
   ============================================================ */
@media (max-width: 767px) {
  body.notturno .elementor-widget-text-editor h2,
  body.notturno .elementor-widget-heading h2,
  body.notturno h2 {
    font-size: clamp(1.75rem, 7.5vw, 2.25rem) !important;
    line-height: 1.15 !important;
  }
  body.notturno .elementor-widget-text-editor h3,
  body.notturno .elementor-widget-heading h3,
  body.notturno h3 {
    font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
    line-height: 1.25 !important;
  }
}

/* Garde-fou global : empêche tout débordement horizontal résiduel
   (image, widget ou texte oublié) de créer un scroll latéral sur mobile. */
body.notturno {
  overflow-x: hidden;
}