@import url("/templates/joomspirit_134/css/custom/BLOC 60_DOSSIERS ET THEMATIQUES.css");
@import url("/templates/joomspirit_134/css/custom/BLOC 62_DOSSIERS EXTRAITS EXPERIENCES.css");


/* =========================================
   PATCH 2025-11-18 — Dossier expériences non ordinaires
   Bandeau + insert flous
   ========================================= */

/* Petit bandeau entre sections */
.dossier.non-ordinaires .exno-hero {
  max-width: 75ch;
  margin: 1.5rem auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.dossier.non-ordinaires .exno-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Photo immersée dans le texte */
.dossier.non-ordinaires img.exno-photo-left {
  float: left;
  max-width: 160px;              /* discret, on peut descendre à 150px si besoin */
  height: auto;
  margin: 0.2rem 1.5rem 0.9rem 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Mobile : on casse le flottant */
@media (max-width: 768px) {
  .dossier.non-ordinaires img.exno-photo-left {
    float: none;
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 1rem;
  }
}


/* --- Héros / bandeaux pour expériences non ordinaires --- */
.exno-hero {
  max-width: 960px;
  margin: 0 0 1.8rem;
}
.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  margin-left: auto;
  margin-right: auto;
}
.exno-hero img {
  display: block;
  width: 100%;
  height: auto;          /* on laisse l'image respirer */
  border-radius: 16px;
  object-fit: cover;
}

/* --- Petites images flottantes (accompagnement + dossier) --- */
img.exno-photo-left,
img.exno-photo-right {
  max-width: 170px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

img.exno-photo-left {
  float: left;
  margin: 0.2rem 1.5rem 1rem 0;
}

img.exno-photo-right {
  float: right;
  margin: 0.2rem 0 1rem 1.5rem;
}

/* Sur mobile : images centrées, non flottantes */
@media (max-width: 768px) {
  img.exno-photo-left,
  img.exno-photo-right {
    float: none;
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 1rem;
  }
}

/* =========================================
   BLOC — Page "Expériences non ordinaires"
   Bandeau eau turquoise
   ========================================= */

.accompagnement.theme .exno-hero {
  max-width: 960px;
  margin: 0 auto 2.5rem;
  border-radius: 10px;
  overflow: hidden;          /* masque ce qui dépasse */
}

.accompagnement.theme .exno-hero img {
  display: block;
  width: 100%;
  height: clamp(140px, 24vh, 220px); /* bandeau panoramique */
  object-fit: cover;                  /* recadrage propre */
}

/* =========================================
   OVERRIDE FINAL — Page "Expériences non ordinaires"
   Bandeau eau turquoise plus panoramique
   ========================================= */

/* Le conteneur du bandeau (ou l'image si la classe est sur <img>) */
.accompagnement.theme .exno-hero,
.accompagnement.theme img.exno-hero {
  display: block;
  max-width: 960px;
  margin: 0 auto 2.5rem;   /* centré + espace sous le bandeau */
  border-radius: 12px;
  overflow: hidden;
}

/* L'image elle-même : format bandeau, recadrage propre */
.accompagnement.theme .exno-hero img,
.accompagnement.theme img.exno-hero {
  width: 100% !important;
  height: clamp(110px, 18vh, 190px) !important; /* beaucoup plus horizontal */
  object-fit: cover !important;                 /* on recadre dans l'eau turquoise */
}

/* =========================================
   OVERRIDE FINAL — Bandeau EXNO (eau turquoise)
   Afficher l'image entière, sans recadrage
   ========================================= */

.accompagnement.theme .exno-hero,
.accompagnement.theme img.exno-hero {
  display: block;
  max-width: 960px;
  margin: 0 auto 2.5rem;   /* centré + espace sous le bandeau */
  border-radius: 12px;
  overflow: hidden;
}

/* Image : on respecte le format, pas de découpe */
.accompagnement.theme .exno-hero img,
.accompagnement.theme img.exno-hero {
  width: 100%;
  height: auto !important;         /* plus de hauteur imposée */
  object-fit: contain !important;  /* on garde toute l'image */
}

/* Bandeau page "Expériences non ordinaires" */
.accompagnement-hero.exno-hero {
  max-width: 960px;
  margin: 1.5rem auto 2.5rem;
  border-radius: 16px;
  overflow: hidden;
}

.accompagnement-hero.exno-hero img {
  display: block;
  width: 100%;
  height: auto;        /* pas de recadrage vertical */
  max-height: none;
  object-fit: contain; /* au cas où un ancien object-fit: cover traîne */
}


/* =========================================================
   Vague lumineuse douce — Page "Expériences non ordinaires"
   Cible : le bandeau .exno-hero (accompagnement + dossier)
   ========================================================= */

/* On s'assure que le conteneur peut recevoir la vague */
.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  position: relative;
  overflow: hidden;  /* déjà présent, mais on re-confirme */
}

/* =========================================================
   Vague lumineuse horizontale — Page EXNO
   Cible : .exno-hero (accompagnement + dossier)
   ========================================================= */

.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  position: relative;
  overflow: hidden;
}

/* =========================================================
   Respiration lumineuse du ciel — Page EXNO
   Cible : .exno-hero (accompagnement + dossier)
   ========================================================= */

.accompagnement.theme .exno-hero,
.dossier.non-ordinaires .exno-hero {
  position: relative;
  overflow: hidden;
}

/* Lumière douce dans la partie haute de l'image (ciel) */
.accompagnement.theme .exno-hero::before,
.dossier.non-ordinaires .exno-hero::before {
  content: "";
  position: absolute;
  inset: -10%;              /* déborde un peu pour éviter les bords nets */
  pointer-events: none;

  /* Tache lumineuse large, centrée dans le ciel */
  background:
    radial-gradient(
      160% 120% at 50% 8%,             /* grande ellipse, centrée haut */
      rgba(255, 255, 245, 0.95) 0%,    /* coeur lumineux */
      rgba(218, 235, 255, 0.75) 24%,   /* lueur bleu-ciel très douce */
      rgba(140, 175, 210, 0.35) 42%,   /* halo plus sombre */
      transparent 70%                  /* fondu dans le reste de l'image */
    );

  mix-blend-mode: screen;
  opacity: 0;
  animation: exnoSkyGlow 14s ease-in-out infinite;
}

/* Animation : la lumière se réveille, puis se rendort */
@keyframes exnoSkyGlow {
  /* 0 → 6% : apparition douce au chargement */
  0% {
    opacity: 0;
  }

  /* montée rapide mais pas brutale */
  6% {
    opacity: 0.95;
  }

  /* plateau lumineux qui commence à s’adoucir */
  20% {
    opacity: 0.85;
  }

  /* la lumière reste présente mais plus douce */
  35% {
    opacity: 0.65;
  }

  /* elle se retire progressivement */
  50% {
    opacity: 0.35;
  }

  /* retour au calme */
  60% {
    opacity: 0;
  }

  /* repos jusqu’au prochain cycle */
  100% {
    opacity: 0;
  }
}



/* Option : pause au clic si tu utilises déjà la classe .exno-wave-paused */
.accompagnement.theme .exno-hero.exno-wave-paused::before,
.dossier.non-ordinaires .exno-hero.exno-wave-paused::before {
  animation-play-state: paused;
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .accompagnement.theme .exno-hero::before,
  .dossier.non-ordinaires .exno-hero::before {
    animation: none !important;
    opacity: 0;
  }
}


/* Pause possible si tu ajoutes la classe .exno-wave-paused via JS */
.accompagnement.theme .exno-hero.exno-wave-paused::before,
.dossier.non-ordinaires .exno-hero.exno-wave-paused::before {
  animation-play-state: paused;
}

/* Respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .accompagnement.theme .exno-hero::before,
  .dossier.non-ordinaires .exno-hero::before {
    animation: none !important;
    opacity: 0;
  }
}



/* Option : pause au clic (classe ajoutée via JS) */
.accompagnement.theme .exno-hero.exno-wave-paused::before,
.dossier.non-ordinaires .exno-hero.exno-wave-paused::before {
  animation-play-state: paused;
}

/* Accessibilité : pas d'animation si l'utilisateur préfère moins de mouvements */
@media (prefers-reduced-motion: reduce) {
  .accompagnement.theme .exno-hero::before,
  .dossier.non-ordinaires .exno-hero::before {
    animation: none !important;
    opacity: 0;
  }
}

/* =========================================================
   2025-11-24 — Dossier "Expériences non ordinaires"
   Ajustement des tailles de photos sur grands écrans
   ========================================================= */

/* Bandeau principal du dossier : plus étroit sur desktop */
.dossier.non-ordinaires .exno-hero {
  /* Sur mobile/tablette : 100% de la largeur du contenu,
     sur desktop : largeur visuelle plus contenue */
  max-width: 56ch;
  margin: 1.75rem auto 2.4rem;
}

/* Sur très grands écrans, on resserre encore un peu */
@media (min-width: 1400px) {
  .dossier.non-ordinaires .exno-hero {
    max-width: 52ch;
  }
}

/* Petites photos intégrées dans le texte du dossier :
   on les réduit légèrement sur les grands écrans */
@media (min-width: 992px) {
  .dossier.non-ordinaires img.exno-photo-left,
  .dossier.non-ordinaires img.exno-photo-right {
    max-width: 150px;
  }
}

@media (min-width: 1400px) {
  .dossier.non-ordinaires img.exno-photo-left,
  .dossier.non-ordinaires img.exno-photo-right {
    max-width: 140px;
  }
}

/* =========================================================
   2025-11-24 — Animation EXNO
   Réservée au dossier "Expériences non ordinaires"
   (neutralisation sur les pages d'accompagnement)
   ========================================================= */

/* On coupe la respiration lumineuse sur les pages d'accompagnement
   qui réutilisent .exno-hero, pour que l'effet reste dédié au dossier */
.accompagnement.theme .exno-hero::before {
  animation: none !important;
  opacity: 0 !important;
}


/* --------------------------------------------------------- */
/* 2025-11-22 — override final : taille de police spécifique pour le contenu en modale */
body.tc-modal-doc-body {
  font-size: 0.9rem !important;
}

@media (max-width: 768px){
  body.tc-modal-doc-body {
    font-size: 0.85rem !important;
  }
}


/* =========================================================
   2025-11-24 — Dossier EXNO
   Agrandir la photo insérée dans le texte
   ========================================================= */

/* Taille par défaut sur desktop : un peu plus généreuse */
.dossier.non-ordinaires img.exno-photo-left {
  max-width: 220px;
}

/* Sur très grands écrans, on peut aller un peu plus loin */
@media (min-width: 1400px) {
  .dossier.non-ordinaires img.exno-photo-left {
    max-width: 240px;
  }
}


/* =========================================================
   2025-11-24 — Dossier EXNO
   Animation de lumière un peu plus visible
   (sans toucher aux autres pages)
   ========================================================= */

/* On garde le même fond lumineux déjà défini,
   mais on change d'animation pour ce dossier uniquement */
.dossier.non-ordinaires .exno-hero::before {
  animation: exnoSkyGlowDossier 10s ease-in-out infinite;
}

/* Nouvelle version : cycle plus court et pic de lumière plus net */
@keyframes exnoSkyGlowDossier {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  25% {
    opacity: 0.9;
  }
  40% {
    opacity: 0.7;
  }
  55% {
    opacity: 0.4;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* =========================================================
   2025-11-24 — Dossier EXNO
   Normaliser les photos insérées en début de paragraphe
   ========================================================= */

/* Desktop : petites images flottantes à gauche */
article.dossier.non-ordinaires p > img:first-child {
  display: inline-block;
  float: left;
  max-width: 220px;
  height: auto;
  margin: 0.2rem 1.5rem 0.9rem 0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Sur très grands écrans, on garde le même plafond que pour exno-photo-left */
@media (min-width: 1400px) {
  article.dossier.non-ordinaires p > img:first-child {
    max-width: 240px;
  }
}

/* Mobile : on casse le flottant et on centre (aligné à exno-photo-left) */
@media (max-width: 768px) {
  article.dossier.non-ordinaires p > img:first-child {
    float: none;
    display: block;
    max-width: 70%;
    margin: 0.5rem auto 1rem;
  }
}