/* =========================================================
   CCO POPUPS
   ========================================================= */

/* ---------------------------------------------------------
   Overlay
   --------------------------------------------------------- */

.cco-modal-overlay {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  /*
   * Laisse un peu d'espace autour du popup
   * sur les petits écrans.
   */
  padding: 20px;

  /*
   * Permet de scroller si le popup dépasse
   * exceptionnellement la hauteur disponible.
   */
  overflow-y: auto;

  z-index: 999999;

  /*
   * Évite certains effets de scroll en cascade.
   */
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------
   Conteneur principal du modal
   --------------------------------------------------------- */

.cco-modal-content {
  position: relative;

  box-sizing: border-box;

  /*
   * Le PHP applique background/color directement
   * dans l'attribut style.
   */
  border-radius: 8px;

  /*
   * Padding interne général du popup.
   */
  padding: clamp(10px, 1vw, 20px);

  /*
   * Sécurité responsive.
   *
   * La largeur réelle est définie sur
   * .cco-modal-content-inner par le PHP.
   */
  max-width: 100%;
  max-height: calc(100dvh - 40px);

  overflow: auto;

  text-align: center;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;

  /*
   * Empêche un contenu très long ou une URL
   * de casser horizontalement le popup.
   */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Contenu interne
   --------------------------------------------------------- */

.cco-modal-content-inner {
  box-sizing: border-box;

  /*
   * Le PHP peut ajouter ici :
   *
   * width: ...
   * height: ...
   * aspect-ratio: ...
   *
   * max-width évite qu'une largeur configurée
   * dépasse l'espace réellement disponible.
   */
  max-width: 100%;

  position: relative;
}

/*
 * Le PHP génère :
 *
 * .cco-modal-content-inner
 *   > div
 *
 * On garantit que ce div occupe correctement
 * toute la largeur disponible.
 */
.cco-modal-content-inner > div {
  width: 100%;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Centrage vertical / horizontal optionnel
   --------------------------------------------------------- */

.cco-modal-center-content {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

/*
 * Le child doit conserver sa largeur disponible
 * lorsque le mode centré est actif.
 */
.cco-modal-center-content > div {
  width: 100%;
}

/* ---------------------------------------------------------
   Titre
   --------------------------------------------------------- */

.cco-modal-title {
  width: 100%;

  box-sizing: border-box;

  /*
   * Espace latéral pour éviter que le titre
   * passe sous le bouton de fermeture.
   */
  padding-left: 40px;
  padding-right: 40px;

  text-align: center;

  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   Corps du popup
   --------------------------------------------------------- */

.cco-modal-body {
  width: 100%;

  box-sizing: border-box;

  overflow-wrap: anywhere;
}

/*
 * Évite qu'une image injectée dans le contenu
 * déborde du popup.
 */
.cco-modal-body img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   Vidéos responsives
   --------------------------------------------------------- */

.cco-modal-content .video-wrapper {
  position: relative;

  width: 100%;

  margin: 0;

  aspect-ratio: 16 / 9;

  overflow: hidden;
}

/*
 * YouTube / Vimeo
 */
.cco-modal-content .video-wrapper iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

/*
 * Sécurité supplémentaire pour les iframes
 * qui ne seraient pas dans .video-wrapper.
 */
.cco-modal-body iframe {
  max-width: 100%;
}

/* ---------------------------------------------------------
   Bouton fermeture
   --------------------------------------------------------- */

.cco-modal-close,
button.cco-modal-close:not(.mfp-arrow):not(.grve-search-btn) {
  position: absolute;

  top: 10px;
  right: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  /*
   * Le PHP injecte directement :
   *
   * color
   * background
   */
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;

  line-height: 1 !important;

  cursor: pointer;

  z-index: 10;

  appearance: none;
  -webkit-appearance: none;
}

/*
 * Évite certains effets imposés
 * par les thèmes WordPress.
 */
.cco-modal-close:hover,
.cco-modal-close:focus {
  opacity: 0.8;
}

/* ---------------------------------------------------------
   Boutons OK / Annuler
   --------------------------------------------------------- */

.cco-modal-ok-button,
button.cco-modal-ok-button:not(.mfp-arrow):not(.grve-search-btn),
.cco-modal-cancel-button {
  display: inline-block;

  box-sizing: border-box;

  margin: 15px 10px;

  padding: 10px 20px;

  border: 0;
  border-radius: 4px;

  background: #e9e9ed !important;

  color: #000 !important;

  font-family: Arial, Helvetica, sans-serif !important;

  /*
   * Ton ancien CSS déclarait successivement :
   *
   * font-size: 0.9em;
   * font-size: 11px !important;
   *
   * donc seul 11px était réellement utilisé.
   *
   * 0.9rem donne une taille plus lisible.
   */
  font-size: 0.9rem !important;

  font-weight: 600 !important;
  font-style: normal;

  line-height: 1.2;

  text-align: center;
  text-decoration: none !important;

  text-transform: initial;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;

  appearance: none;
  -webkit-appearance: none;
}

/* ---------------------------------------------------------
   Hover boutons
   --------------------------------------------------------- */

.cco-modal-ok-button:hover,
button.cco-modal-ok-button:not(.mfp-arrow):not(.grve-search-btn):hover,
.cco-modal-cancel-button:hover {
  background: #cfcfd3 !important;

  color: #000 !important;

  text-decoration: none !important;
}

/*
 * Ton ancien sélecteur était :
 *
 * .cco-modal-cancel-button:hover a
 *
 * Mais le bouton Annuler EST lui-même le <a>,
 * il n'y a pas de <a> à l'intérieur.
 *
 * Le bon sélecteur est donc directement celui-ci.
 */
a.cco-modal-cancel-button:hover,
a.cco-modal-cancel-button:focus {
  color: #000 !important;

  text-decoration: none !important;
}

/* ---------------------------------------------------------
   Focus clavier
   --------------------------------------------------------- */

.cco-modal-close:focus-visible,
.cco-modal-ok-button:focus-visible,
.cco-modal-cancel-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .cco-modal-overlay {
    padding: 12px;
  }

  .cco-modal-content {
    max-width: 100%;
    max-height: calc(100dvh - 24px);

    padding: 12px;
  }

  /*
   * Même si le PHP demande par exemple width:60vw,
   * le popup ne pourra jamais dépasser
   * l'espace disponible.
   */
  .cco-modal-content-inner {
    max-width: 100%;
  }

  .cco-modal-title {
    padding-left: 35px;
    padding-right: 35px;
  }

  .cco-modal-ok-button,
  button.cco-modal-ok-button:not(.mfp-arrow):not(.grve-search-btn),
  .cco-modal-cancel-button {
    margin: 8px 5px;

    padding: 10px 16px;
  }
}

/* ---------------------------------------------------------
   Très petits écrans
   --------------------------------------------------------- */

@media (max-width: 480px) {
  .cco-modal-overlay {
    padding: 8px;
  }

  .cco-modal-content {
    max-height: calc(100dvh - 16px);

    border-radius: 6px;
  }

  .cco-modal-title {
    padding-left: 32px;
    padding-right: 32px;
  }

  .cco-modal-close,
  button.cco-modal-close:not(.mfp-arrow):not(.grve-search-btn) {
    top: 8px;
    right: 8px;
  }
}

/* ---------------------------------------------------------
   Réduction des animations
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cco-modal-content,
  .cco-modal-ok-button,
  .cco-modal-cancel-button {
    transition: none;
  }
}