/* =========================================================
   NONO CARROUSEL
   Classes sans chiffres. Le carrousel a ses propres classes
   (.nono-carrousel / .nono-carte) : ton CSS .vnb-carte reste
   disponible ailleurs.
   Ordinateur : 1200 px et +  |  Tablette : 768 à 1199 px  |  Mobile : moins de 768 px
   (le JavaScript ajoute .est-ordinateur / .est-tablette / .est-mobile)
   ========================================================= */


/* =========================================================
   1. LE CARROUSEL
   ========================================================= */
.nono-carrousel {
  --ncar-fleche-couleur: #0d1b3a;
  --ncar-fleche-fond: #ffffff;
  --ncar-puce: #ffffff;
  --ncar-puce-active: #f3d58a;
  --ncar-vitesse: .6s;
  --ncar-photo: .66;
  --ncar-photo-mobile: .85;
  --ncar-arrondi: 26px;
  --ncar-or: #f3d58a;
  --ncar-nuit: #0d1b3a;

  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
:where(.nono-carrousel) *,
:where(.nono-carrousel) *::before,
:where(.nono-carrousel) *::after { box-sizing: border-box; }

/* Je nettoie les <br> et <p> vides que WordPress / Enfold pourraient glisser */
:where(.nono-carrousel) > br,
:where(.nono-carrousel) > p,
:where(.nono-carrousel__scene) > br,
:where(.nono-carrousel__scene) > p,
:where(.nono-carrousel__piste) > br,
:where(.nono-carrousel__piste) > p,
:where(.nono-carte) > br,
:where(.nono-carte) > p:empty { display: none !important; }

/* La scène : la zone visible (sa hauteur est calculée par le JavaScript) */
:where(.nono-carrousel) .nono-carrousel__scene {
  position: relative !important;
  width: 100% !important;
  height: 480px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  touch-action: pan-y;               /* le doigt peut toujours faire défiler la page verticalement */
  -webkit-user-select: none;
  user-select: none;
  outline: none;
}
/* Je supprime tous les surlignages : contour au clavier, flash au tap, sélection */
.nono-carrousel,
:where(.nono-carrousel) * { -webkit-tap-highlight-color: transparent !important; }
:where(.nono-carrousel) .nono-carrousel__scene:focus,
:where(.nono-carrousel) .nono-carrousel__scene:focus-visible,
:where(.nono-carrousel) button:focus,
:where(.nono-carrousel) button:focus-visible,
:where(.nono-carrousel) a:focus,
:where(.nono-carrousel) a:focus-visible {
  outline: none !important;
  box-shadow: none;
}
:where(.nono-carrousel) .nono-carrousel__fleche:focus,
:where(.nono-carrousel) .nono-carrousel__fleche:focus-visible { box-shadow: 0 6px 16px rgba(5, 12, 30, .35) !important; }
:where(.nono-carrousel) ::selection { background: transparent; }

/* La piste : la perspective donne la profondeur de l'effet 3D */
:where(.nono-carrousel) .nono-carrousel__piste {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  perspective: 1100px;
}

/* Avant que le JavaScript soit prêt, je cache les cartes (pas de cartes empilées) */
:where(.nono-carrousel:not(.est-pret)) .nono-carte { visibility: hidden !important; }


/* =========================================================
   2. LA CARTE
   ========================================================= */
:where(.nono-carrousel) .nono-carte {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 320px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  /* haut = espace photo (largeur de la carte × espace photo) ; puis droite, bas, gauche */
  padding: calc(var(--ncar-largeur, 320px) * var(--ncar-photo)) 24px 22px 24px !important;
  border: 0 !important;
  border-radius: var(--ncar-arrondi) !important;
  overflow: hidden !important;
  background: var(--ncar-nuit) !important;
  color: #ffffff !important;
  text-align: left !important;
  transform-origin: 50% 50%;
  /* mon contour (invisible sur les côtés) + mon ombre courte et douce (plus de ligne foncée) */
  box-shadow: 0 0 0 0 transparent, 0 4px 10px rgba(5, 12, 30, .18);
  cursor: pointer;
  transition:
    transform var(--ncar-vitesse) cubic-bezier(.2,.7,.2,1),
    opacity var(--ncar-vitesse) ease,
    filter var(--ncar-vitesse) ease,
    box-shadow var(--ncar-vitesse) ease;
}
:where(.nono-carrousel) .nono-carte.est-active {
  /* mon contour de la carte centrale (couleur, épaisseur et transparence réglées dans l'admin) */
  box-shadow: 0 0 0 var(--ncar-contour, 0px) var(--ncar-contour-couleur, transparent), 0 8px 18px rgba(5, 12, 30, .28);
  cursor: default;
}
:where(.nono-carrousel) .nono-carte.est-cachee { pointer-events: none !important; }

/* Mon voile sombre sur les cartes des côtés : il s'efface en douceur quand la carte arrive au centre */
:where(.nono-carrousel) .nono-carte::before {
  content: "" !important;
  position: absolute !important;
  top: -1px !important; left: -1px !important; right: -1px !important; bottom: -1px !important;
  z-index: 6 !important;
  background: #0b1630 !important;
  opacity: var(--ncar-sombre, 0);
  transition: opacity var(--ncar-vitesse) ease;
  pointer-events: none !important;
}
:where(.nono-carrousel) .nono-carte.est-floue  { filter: blur(2px) brightness(.7); }

:where(.nono-carrousel.est-tablette) .nono-carte { padding: calc(var(--ncar-largeur, 320px) * var(--ncar-photo)) 20px 18px 20px !important; }
:where(.nono-carrousel.est-mobile) .nono-carte   { padding: calc(var(--ncar-largeur, 320px) * var(--ncar-photo-mobile)) 20px 18px 20px !important; }


/* =========================================================
   3. LA PHOTO ET LE VOILE
   ========================================================= */
:where(.nono-carrousel) .nono-carte__fond {
  position: absolute !important;
  /* je fais déborder la photo d'1 px sous le bord arrondi : plus de liseré pendant le zoom */
  top: -1px !important; left: -1px !important; right: -1px !important; bottom: -1px !important;
  z-index: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  color: transparent !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}
:where(.nono-carrousel .nono-carte__fond) picture {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
:where(.nono-carrousel .nono-carte__fond) img {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: var(--ncar-cadrage, 50% 25%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: scale(1);
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
  -webkit-user-drag: none;
}
:where(.nono-carrousel.est-mobile .nono-carte__fond) img {
  object-position: var(--ncar-cadrage-mobile, var(--ncar-cadrage, 50% 25%)) !important;
}
/* Zoom de la photo au survol, seulement sur la carte du centre */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :where(.nono-carrousel .nono-carte.est-active:hover .nono-carte__fond) img { transform: scale(1.07); }
}

/* Mon voile : le même dégradé foncé sous le texte sur toutes les cartes (sans flou : plus de saut, et plus fiable sur Android et en 3D) */
:where(.nono-carrousel) .nono-carte__voile {
  position: absolute !important;
  top: auto !important; left: -2px !important; right: -2px !important; bottom: -2px !important;
  height: calc(62% + 2px) !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(0deg,
      rgba(13,27,58,.70) 0,
      rgba(13,27,58,.70) 110px,
      rgba(13,27,58,0) 170px),
    linear-gradient(180deg,
      rgba(13,27,58,0) 0%,
      rgba(13,27,58,.85) 18%,
      rgba(13,27,58,.97) 100%) !important;
}
:where(.nono-carrousel.est-mobile) .nono-carte__voile { height: calc(72% + 2px) !important; }

/* =========================================================
   4. LA PASTILLE
   ========================================================= */
:where(.nono-carrousel) .nono-carte__pastille {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #b3152b !important;
  color: #ffffff !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  pointer-events: none;
}
:where(.nono-carrousel.est-tablette) .nono-carte__pastille,
:where(.nono-carrousel.est-mobile) .nono-carte__pastille {
  top: 14px !important; left: 14px !important; padding: 7px 12px !important; font-size: 11px !important;
}


/* =========================================================
   5. LES TEXTES
   ========================================================= */
:where(.nono-carrousel) .nono-carte__texte {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  max-width: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  pointer-events: none;              /* le clic traverse le texte jusqu'au lien de la carte… */
}
:where(.nono-carrousel .nono-carte__texte) a { pointer-events: auto; }  /* …sauf sur tes propres liens */
:where(.nono-carrousel.est-mobile) .nono-carte__texte { max-width: none !important; gap: 8px !important; }

/* Les champs vides disparaissent */
:where(.nono-carrousel) .nono-carte__pastille:empty,
:where(.nono-carrousel) .nono-carte__rendezvous:empty,
:where(.nono-carrousel) .nono-carte__nom:empty,
:where(.nono-carrousel) .nono-carte__soustitre:empty,
:where(.nono-carrousel) .nono-carte__desc:empty,
:where(.nono-carrousel) .nono-carte__chute:empty { display: none !important; }

/* Petit titre doré avec l'étoile */
:where(.nono-carrousel) .nono-carte__rendezvous {
  display: block !important;
  margin: 0 0 -2px 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--ncar-or) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
:where(.nono-carrousel) .nono-carte__rendezvous::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -.1em !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.00 0.50 L13.84 10.16 L23.50 12.00 L13.84 13.84 L12.00 23.50 L10.16 13.84 L0.50 12.00 L10.16 10.16Z' fill='%23f3d58a'/%3E%3Cpath d='M16.81 7.19 L14.20 12.00 L16.81 16.81 L12.00 14.20 L7.19 16.81 L9.80 12.00 L7.19 7.19 L12.00 9.80Z' fill='%23f3d58a' opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
@supports (top: calc(1cap - 1ex)) {
  :where(.nono-carrousel) .nono-carte__rendezvous::before { top: calc(.5ex - .5cap) !important; }
}

/* Titre */
:where(.nono-carrousel .nono-carte) h3.nono-carte__nom {
  font-family: 'Berkshire Swash', serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: clamp(30px, 2.5vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
}
:where(.nono-carrousel.est-tablette .nono-carte) h3.nono-carte__nom { font-size: 32px !important; }
:where(.nono-carrousel.est-mobile .nono-carte) h3.nono-carte__nom   { font-size: 32px !important; }

/* Sous-titre doré */
:where(.nono-carrousel) .nono-carte__soustitre {
  font-family: 'Berkshire Swash', serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: var(--ncar-or) !important;
  margin: -2px 0 0 0 !important;
  padding: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
:where(.nono-carrousel.est-tablette) .nono-carte__soustitre,
:where(.nono-carrousel.est-mobile) .nono-carte__soustitre { font-size: 18px !important; }

/* Description et phrase finale */
:where(.nono-carrousel) .nono-carte__desc,
:where(.nono-carrousel) .nono-carte__chute {
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.35) !important;
}
:where(.nono-carrousel) .nono-carte__chute { font-weight: 800 !important; }
:where(.nono-carrousel .nono-carte__desc) p,
:where(.nono-carrousel .nono-carte__chute) p { margin: 0 0 .6em !important; padding: 0 !important; color: inherit !important; }


/* Ma zone qui défile : la description + la phrase finale, entre le sous-titre et le logo */
:where(.nono-carrousel) .nono-carte__defile {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px;
  width: 100%;
}
:where(.nono-carrousel) .nono-carte__defile:empty { display: none !important; }
:where(.nono-carrousel.est-defile) .nono-carte__defile {
  max-height: calc(var(--ncar-lignes, 4) * 1.55em);    /* je règle le nombre de lignes dans l'admin */
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  pointer-events: auto;
  padding-right: 6px !important;
  scrollbar-width: thin;
  scrollbar-color: var(--ncar-or) transparent;
}
:where(.nono-carrousel.est-defile) .nono-carte__defile::-webkit-scrollbar { width: 4px; }
:where(.nono-carrousel.est-defile) .nono-carte__defile::-webkit-scrollbar-thumb { background: var(--ncar-or); border-radius: 4px; }
/* le bas du texte s'estompe tant qu'il reste du texte à lire */
:where(.nono-carrousel.est-defile .nono-carte.est-deborde:not(.est-fin)) .nono-carte__defile {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent);
}
:where(.nono-carrousel.est-defile) .nono-carte__chute { padding-bottom: 4px !important; }

/* Mon petit « faire défiler » : seulement si le texte dépasse, et il disparaît une fois en bas */
:where(.nono-carrousel) .nono-carte__indice {
  display: none !important;
  align-items: center !important;
  gap: 5px !important;
  margin: -4px 0 0 0 !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  color: var(--ncar-or) !important;
  opacity: .9;
}
:where(.nono-carrousel .nono-carte__indice) svg {
  width: 13px !important; height: 13px !important;
  fill: none !important; stroke: currentColor !important; stroke-width: 2.2 !important;
  stroke-linecap: round !important; stroke-linejoin: round !important;
}
:where(.nono-carrousel.est-defile .nono-carte.est-deborde:not(.est-fin)) .nono-carte__indice { display: flex !important; }


/* =========================================================
   6. LE LIEN DE LA CARTE (facultatif)
   ========================================================= */
:where(.nono-carrousel) .nono-carte__lien {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
:where(.nono-carrousel .nono-carte:not(.est-active)) .nono-carte__lien { pointer-events: none !important; }
:where(.nono-carrousel) .nono-carte.est-active:has(.nono-carte__lien) { cursor: pointer; }


/* =========================================================
   7. LE LOGO EN SIGNATURE
   ========================================================= */
:where(.nono-carrousel) .nono-carte::after {
  content: "" !important;
  display: block !important;
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  align-self: center !important;
  width: 84px !important;
  height: 84px !important;
  margin: 8px auto 0 auto !important;
  background: var(--ncar-logo, none) center / contain no-repeat !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)) !important;
  pointer-events: none !important;
}
:where(.nono-carrousel.est-tablette) .nono-carte::after { width: 76px !important; height: 76px !important; margin-top: 6px !important; }
:where(.nono-carrousel.est-mobile) .nono-carte::after   { width: 74px !important; height: 74px !important; margin-top: 10px !important; }
:where(.nono-carrousel--sans-logo) .nono-carte::after   { display: none !important; }


/* =========================================================
   8. LES FLÈCHES
   ========================================================= */
:where(.nono-carrousel) .nono-carrousel__fleche {
  position: absolute !important;
  top: 50% !important;
  z-index: 60 !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: -24px 0 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ncar-fleche-fond) !important;
  color: var(--ncar-fleche-couleur) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 16px rgba(5, 12, 30, .35) !important;
  transition: opacity .3s ease, transform .3s ease !important;
  -webkit-tap-highlight-color: transparent;
}
:where(.nono-carrousel) .nono-carrousel__fleche--prec { left: 16px !important; }
:where(.nono-carrousel) .nono-carrousel__fleche--suiv { right: 16px !important; }
:where(.nono-carrousel .nono-carrousel__fleche) svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
:where(.nono-carrousel) .nono-carrousel__fleche:hover { transform: scale(1.08); }
:where(.nono-carrousel) .nono-carrousel__fleche:disabled { opacity: .35 !important; cursor: default !important; transform: none; }

:where(.nono-carrousel.est-mobile) .nono-carrousel__fleche {
  width: 38px !important; height: 38px !important; margin-top: -19px !important;
}
:where(.nono-carrousel.est-mobile .nono-carrousel__fleche) svg { width: 18px !important; height: 18px !important; }
:where(.nono-carrousel.est-mobile) .nono-carrousel__fleche--prec { left: 8px !important; }
:where(.nono-carrousel.est-mobile) .nono-carrousel__fleche--suiv { right: 8px !important; }

:where(.nono-carrousel--sans-fleches) .nono-carrousel__fleche { display: none !important; }

/* Flèches seulement au survol (uniquement avec une souris) */
@media (hover: hover) {
  :where(.nono-carrousel--fleches-survol:not(.est-mobile):not(.est-tablette)) .nono-carrousel__fleche { opacity: 0; }
  /* elles réapparaissent au survol, ou à la navigation au clavier (mais plus après un simple clic) */
  :where(.nono-carrousel--fleches-survol:hover) .nono-carrousel__fleche,
  :where(.nono-carrousel--fleches-survol:has(:focus-visible)) .nono-carrousel__fleche { opacity: 1 !important; }
}


/* =========================================================
   9. LES PUCES ET LE BOUTON PAUSE
   ========================================================= */
:where(.nono-carrousel) .nono-carrousel__nav {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
}
:where(.nono-carrousel) .nono-carrousel__nav:empty { display: none !important; }
:where(.nono-carrousel) .nono-carrousel__puces {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
:where(.nono-carrousel) .nono-carrousel__puce {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ncar-puce) !important;
  opacity: .45;
  cursor: pointer !important;
  transition: width .3s ease, opacity .3s ease !important;
}
:where(.nono-carrousel) .nono-carrousel__puce:hover { opacity: .75; }
:where(.nono-carrousel) .nono-carrousel__puce.est-active {
  width: 28px !important;
  opacity: 1;
  background: var(--ncar-puce-active) !important;
}

:where(.nono-carrousel) .nono-carrousel__pause {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--ncar-puce) !important;
  cursor: pointer !important;
  opacity: .8;
}
:where(.nono-carrousel) .nono-carrousel__pause:hover { opacity: 1; }
:where(.nono-carrousel .nono-carrousel__pause) svg { width: 14px !important; height: 14px !important; fill: currentColor !important; display: block !important; }


/* =========================================================
   10. MOUVEMENT RÉDUIT (réglage d'accessibilité du téléphone / ordinateur)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :where(.nono-carrousel) .nono-carte,
  :where(.nono-carrousel .nono-carte__fond) img { transition-duration: .01s !important; }
}


/* =========================================================
   11. APERÇU D'UNE CARTE DANS L'ADMIN
   ========================================================= */
:where(.nono-carrousel--apercu-carte) .nono-carte {
  position: relative !important;
  width: 100% !important;
  cursor: default;
}