/*
 * Pro/Active — Page d'accueil (préfixe `ac-`).
 * Additionnel à proactive.css + vitrine.css, qui ne sont pas modifiés.
 * Charte Volt : aucun border-radius, marine #012647, accent #FF6C02,
 * point de rupture unique à 900px.
 */

/* ==========================================================================
   Sprite des icônes (hors flux, invisible)
   ========================================================================== */

.ac-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   Bannière — la photo de la V1, un peu plus basse pour loger la recherche
   ========================================================================== */

.vt-hero--accueil {
  /* Un peu plus bas que la V1 (88vh) : la barre de recherche ET sa liste de
     suggestions doivent tenir au-dessus de la ligne de flottaison. */
  min-height: 70vh;
  /* La liste de suggestions déborde du hero : pas de clipping ici — c'est
     pour ça que la photo de fond vit dans son propre cadre `overflow:
     hidden` plus bas (`.ac-hero__cadre`), et pas directement ici. */
  overflow: visible;
  /* Contexte d'empilement propre, avec un z-index qui passe devant les
     sections suivantes : `.vt-hero` n'est que `position: relative` (sans
     z-index), donc quand la liste de suggestions déborde du hero, elle se
     fait recouvrir par le titre « Comment ça marche » de la section
     d'après — lui-même transformé par `.js-anim [data-anim="titre"]`
     (clip-path) et `will-change`, qui créent CHACUN leur propre contexte
     d'empilement, plus tard dans le DOM. `.vt-hero--accueil` étant
     lui-même sans z-index, ce contexte-là n'a aucune priorité et perd
     l'ordre du DOM. Bug constaté le 15/09/2026. Valeur choisie
     confortablement sous celle de la nav sticky (90, `.vt-nav`), qui doit
     toujours rester par-dessus. */
  position: relative;
  z-index: 2;
}

/* Cadre séparé pour la photo : elle doit pouvoir déborder légèrement pour
   la parallaxe (data-parallaxe) sans jamais laisser un bord vide, SANS
   remettre `overflow: hidden` sur `.vt-hero--accueil` (ça couperait la
   liste de suggestions de la recherche, juste au-dessus). */
.ac-hero__cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.ac-hero__fond {
  position: absolute;
  inset: -60px -20px;
  background-size: cover;
  background-position: center;
}
@media (prefers-reduced-motion: reduce) {
  /* Filet local : `[data-parallaxe] { transform: none !important }` est déjà
     posé par vitrine.css, mais le débord de -60px/-20px n'a plus de raison
     d'être sans mouvement — on le résorbe pour un cadrage identique à une
     photo fixe normale. */
  .ac-hero__fond {
    inset: 0;
  }
}
.vt-hero--accueil .vt-hero__contenu {
  /* .vt-hero__contenu remet `padding: 64px 0` par-dessus .vt-conteneur : on
     rétablit les gouttières latérales, sinon le texte colle au bord sur
     téléphone et le hero n'est plus aligné avec le reste de la page. */
  width: 100%;
  padding: 40px 44px 48px;
}
.vt-hero--accueil .vt-hero__titre {
  font-size: clamp(34px, 6.4vw, 88px);
  margin: 14px 0 24px;
}

@media (max-width: 900px) {
  .vt-hero--accueil {
    min-height: auto;
  }
  .vt-hero--accueil .vt-hero__contenu {
    padding: 34px 20px 42px;
  }
  .vt-hero--accueil .vt-hero__titre {
    margin: 12px 0 24px;
  }
}

/* ==========================================================================
   Badge vidéo « Comment ça marche » — à droite du titre du hero.
   Demande client du 15/09/2026 : remplace l'ancien bloc vidéo du bas de
   page (voir plus bas dans ce fichier, section « Modale »). Le badge est
   un `<a>` : sans JS il ouvre le MP4 directement, avec JS
   `static/js/comment-ca-marche.js` intercepte le clic et ouvre la
   modale `<dialog>`. Rien ici ne dépend du script pour s'afficher.
   ========================================================================== */
.ac-hero__titre-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}
.ac-hero__titre-ligne .vt-hero__titre {
  flex: 1 1 auto;
  min-width: 0;
}
@media (max-width: 640px) {
  .ac-hero__titre-ligne {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ac-cm-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 12px;
  background: rgba(1, 26, 47, 0.72);
  border: 1px solid var(--pa-accent);
  color: var(--pa-blanc);
  text-decoration: none;
  animation: ac-cm-flotter 3s ease-in-out infinite;
}
@media (max-width: 640px) {
  .ac-cm-badge {
    align-self: center;
  }
}
.ac-cm-badge:hover .ac-cm-badge__titre,
.ac-cm-badge:focus-visible .ac-cm-badge__titre {
  color: var(--pa-accent);
}
.ac-cm-badge:focus-visible {
  outline: 3px solid var(--pa-accent);
  outline-offset: 3px;
}

.ac-cm-badge__rond {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-accent);
  animation: ac-cm-halo 2.4s ease-out infinite;
}
.ac-cm-badge__icone {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  fill: var(--pa-blanc);
}
.ac-cm-badge__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ac-cm-badge__titre {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  transition: color 0.15s ease;
}
.ac-cm-badge__sous {
  font-size: 12px;
  color: var(--pa-texte-3);
}

@keyframes ac-cm-flotter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes ac-cm-halo {
  0% { box-shadow: 0 0 0 0 rgba(255, 108, 2, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(255, 108, 2, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 108, 2, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-cm-badge,
  .ac-cm-badge__rond {
    animation: none;
  }
}

/* ==========================================================================
   Barre de recherche « quel sport pratiquez-vous ? »
   ========================================================================== */

.ac-recherche {
  max-width: 760px;
}

.ac-recherche__intro {
  margin: 0 0 20px;
  padding-left: 16px;
  border-left: 3px solid var(--pa-accent);
  max-width: 620px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pa-texte-2);
}

.ac-recherche__label {
  margin-bottom: 10px;
  font-size: 12.5px;
}

.ac-recherche__form {
  margin: 0;
}

.ac-recherche__ligne {
  display: flex;
  align-items: stretch;
  gap: 12px;
  /* Contexte d'empilement propre et prioritaire sur `.ac-recherche__tous`
     (le lien « ou voir tous nos services », plus bas dans le DOM) : les
     deux portent `data-anim` (`zoom` / `cote`), qui applique `transform`
     ET `will-change: transform` — `will-change` fige un contexte
     d'empilement MÊME UNE FOIS l'animation terminée (transform revenu à
     `none`), donc ce n'est pas un souci qui se limite au chargement de la
     page. Sans z-index explicite ici, les deux contextes sont à égalité
     et c'est l'ordre du DOM qui tranche : le lien, plus bas dans le
     HTML, gagnait et recouvrait la première suggestion (bug constaté le
     15/09/2026). `position: relative` est nécessaire : sans position,
     `z-index` n'a aucun effet. */
  position: relative;
  z-index: 2;
}

.ac-recherche__champ {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ac-recherche__loupe {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}

.ac-recherche__input {
  padding: 19px 18px 19px 54px;
  font-size: 17px;
  font-weight: 600;
  border-color: var(--pa-bordure-vive);
}
.ac-recherche__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.ac-recherche__btn {
  flex: 0 0 auto;
  padding: 19px 30px;
  white-space: nowrap;
}

.ac-recherche__tous {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pa-texte-3);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ac-recherche__tous:hover {
  color: var(--pa-accent);
}

/* --- Liste des suggestions --------------------------------------------- */

.ac-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  margin: 0;
  padding: 6px;
  list-style: none;
  /* Cinq suggestions visibles, le reste au défilement : « moins grand, pas
     tous les sports affichés » (recette Wakny du 04/09/2026).
     5 × 48 px + les 2 × 6 px de padding = 252 px. À 228 px, la cinquième
     ligne était coupée en deux et la liste avait l'air cassée. */
  max-height: 252px;
  overflow-y: auto;
  background: var(--pa-panneau);
  border: 2px solid var(--pa-accent);
}

.ac-suggestion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--pa-texte);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.ac-suggestion svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ac-suggestion__libelle {
  flex: 1 1 auto;
  min-width: 0;
}
.ac-suggestion__note {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-accent);
}
.ac-suggestion:hover,
.ac-suggestion.is-actif {
  background: var(--pa-carte-alt);
  color: var(--pa-blanc);
}
.ac-suggestion.is-actif {
  outline: 2px solid var(--pa-accent);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .ac-recherche {
    max-width: none;
  }
  .ac-recherche__intro {
    font-size: 16px;
    margin-bottom: 20px;
  }
  .ac-recherche__ligne {
    flex-direction: column;
    gap: 10px;
  }
  /* Le texte d'exemple était coupé en plein mot (« …footba ») dans un champ
     de 350 px : on resserre la police et la gouttière de gauche pour qu'il
     tienne en entier (recette QA du 04/09/2026). */
  .ac-recherche__input {
    font-size: 15px;
    padding: 17px 14px 17px 46px;
  }
  .ac-recherche__loupe {
    left: 14px;
    width: 20px;
    height: 20px;
  }
  .ac-recherche__btn {
    width: 100%;
    padding: 18px;
  }
  .ac-suggestions {
    /* Quatre lignes entières (4 × 48 px + 12 px de padding) : sur téléphone
       la liste doit tenir sous le champ sans couper une ligne en deux. */
    max-height: 204px;
  }
  .ac-recherche__tous {
    display: block;
    text-align: center;
    margin-top: 14px;
  }
}

/* Nos services : voir le bloc dédié en fin de fichier, sous
   « Nos services — sélecteur de catégorie (lot-onglets, 11/09/2026) ». */

/* Toutes les ancres de la page, même règle : un lien externe vers l'une
   d'elles ne doit jamais atterrir sous le bandeau sticky (.vt-nav). */
#services,
#pourqui,
#le-centre,
#contact {
  scroll-margin-top: 90px;
}

/* ==========================================================================
   Le centre — deux rangées de vignettes au maximum sur l'accueil
   (un album de vingt photos ne doit pas allonger la page d'accueil ;
   « Toutes les photos » mène à /en-images/)
   ========================================================================== */

.ac-galerie .vt-galerie-vignette:nth-child(n + 9) {
  display: none;
}
@media (max-width: 900px) {
  /* Deux colonnes sur téléphone : on s'arrête à quatre vignettes. */
  .ac-galerie .vt-galerie-vignette:nth-child(n + 5) {
    display: none;
  }
}

/* ==========================================================================
   Bandeau contact
   ========================================================================== */

.ac-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  padding: 34px 32px;
  background: var(--pa-carte-alt);
  border-left: 4px solid var(--pa-accent);
}
.ac-contact__adresse {
  margin: 12px 0 6px;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--pa-blanc);
}
.ac-contact__tel {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}
.ac-contact__tel a {
  color: var(--pa-accent);
}
.ac-contact__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .ac-contact {
    padding: 26px 22px;
  }
  .ac-contact__actions {
    width: 100%;
  }
  .ac-contact__actions > * {
    flex: 1 1 160px;
    text-align: center;
  }
}

/* ==========================================================================
   Téléphone : rails horizontaux (standard BE WEB) au lieu d'empiler
   Services, expertise, « pour qui » et location/clubs : la page passait
   ~14 écrans de haut sur 390 px (recette du 04/09/2026). Chaque groupe
   devient un rail à défilement latéral, une carte à la fois, sans JS.
   ========================================================================== */
@media (max-width: 640px) {
  .vt-grille-services,
  .vt-protocoles,
  .vt-grille-3,
  .vt-grille-2 {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 10px;
    /* déborde jusqu'aux bords de l'écran pour suggérer la suite */
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .vt-grille-services > *,
  .vt-protocoles > *,
  .vt-grille-3 > *,
  .vt-grille-2 > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
    margin: 0;
  }
  .vt-protocoles > .vt-protocole {
    display: block;
    border-top: 0;
    border: 2px solid var(--pa-bordure-douce);
    padding: 18px;
  }
  .vt-protocoles > .vt-protocole .vt-protocole__n { margin-bottom: 8px; }
  .vt-protocoles > .vt-protocole .pa-liste-slash { margin-top: 12px; }
  /* Indice de défilement sous chaque rail */
  .vt-grille-services::after,
  .vt-protocoles::after,
  .vt-grille-3::after,
  .vt-grille-2::after {
    content: "";
    flex: 0 0 8px;
  }
}

/* ==========================================================================
   Des kinés, pas des coachs — section ajoutée le 15/09/2026, juste sous le
   hero (demande client : mettre l'accent sur les professionnels de la
   santé). Pictogramme repris à l'identique de `.cn-picto` / `.cn-carte-picto`
   (templates/vitrine/centre.html, static/css/centre.css, non modifiés) :
   même boîte, même trait, préfixée `ac-` pour rester dans le fichier de
   cette page.
   ========================================================================== */
.ac-picto {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-fond);
  border: 2px solid var(--pa-bordure-douce);
  flex: none;
  margin-bottom: 18px;
}
.ac-picto svg {
  width: 28px;
  height: 28px;
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .ac-carte-picto {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ac-carte-picto:hover .ac-picto,
  .ac-carte-picto:focus-within .ac-picto {
    transform: translateY(-3px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ==========================================================================
   Nos services — sélecteur de catégorie (lot-onglets, 11/09/2026)

   Demande client : « on clique sur la catégorie, ça n'affiche que les
   services en dessous ». Trois familles (ORDRE_PILIERS, vitrine/views.py),
   un `<fieldset>` de radios masqués + leurs `<label>` en encadrés, un seul
   panneau ouvert à la fois. Même convention de masquage que le sous-menu
   mobile de vitrine.css (`.vt-nav__case-services`) : l'input est déplacé
   hors champ visuel (`position:absolute; opacity:0; width/height:1px`),
   PAS `display:none`, pour rester ciblable au clavier.

   Décision (chantier du 11/09/2026, tranchée avec le client) : RIEN n'est
   ouvert par défaut. Les trois encadrés annoncent clairement le nombre de
   services et l'action de clic (icône + libellé + compteur + « Voir les
   services → ») pour qu'une section au repos ne paraisse jamais vide.

   Sur téléphone, les trois encadrés restent empilés pleine largeur — PAS
   un rail à défilement comme `.vt-grille-services` un peu plus haut dans
   ce fichier : il n'y a que trois familles, et l'enjeu ici est que le
   visiteur voie les trois d'un coup, pas qu'il devine qu'il faut swiper
   pour en découvrir une troisième.
   ========================================================================== */

.ac-familles {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Légende du fieldset : contexte donné aux lecteurs d'écran uniquement — le
   titre « Nos services » + la phrase du compteur, juste au-dessus, portent
   déjà l'information à l'écran. */
.ac-familles__legende {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ac-familles__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  position: relative;
}

/* --- Les trois radios, masqués mais focusables (clavier) --------------- */

.ac-familles__radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* --- Les encadrés de famille (les « onglets ») -------------------------- */

.ac-familles__onglet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 26px 24px;
  background: var(--pa-panneau);
  border: 1px solid var(--pa-bordure-douce);
  border-top: 3px solid var(--pa-accent);
  cursor: pointer;
  text-align: left;
}
.ac-familles__onglet:hover {
  border-color: var(--pa-accent);
}
.ac-familles__radio:focus-visible + .ac-familles__onglet {
  outline: 2px solid var(--pa-accent);
  outline-offset: 2px;
}
/* La famille actuellement ouverte se distingue clairement des deux autres :
   c'est le seul indice visuel de l'état « ouvert », le radio coché derrière
   n'étant lui-même pas visible. */
.ac-familles__radio:checked + .ac-familles__onglet {
  background: var(--pa-carte-alt);
  border-color: var(--pa-accent);
}
.ac-familles__icone {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ac-familles__nom {
  font-family: var(--pa-police-titre);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--pa-blanc);
}
.ac-familles__compte {
  font-size: 13px;
  color: var(--pa-texte-4);
}
.ac-familles__cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pa-accent);
}

@media (max-width: 900px) {
  .ac-familles__grille {
    grid-template-columns: 1fr;
  }
}

/* --- Le panneau ouvert : un seul à la fois ------------------------------ */

.ac-familles__panneau {
  display: none;
  grid-column: 1 / -1;
  /* Un enfant de grille garde `min-width: auto` par défaut : sans ce reset,
     le rail horizontal (`.vt-grille-services` en <= 640px, plus bas dans ce
     fichier) impose sa largeur de contenu minimale à toute la colonne et
     fait déborder la page sur téléphone (« grid blowout » constaté en
     capture le 11/09/2026). */
  min-width: 0;
  padding-top: 8px;
}
/* Trois règles explicites (les trois piliers sont un tuple figé partout
   ailleurs dans ce lot — ORDRE_PILIERS, PILIER_LISIBLES, vitrine/views.py) :
   chaque radio ne révèle QUE son propre panneau. */
#famille-performer:checked ~ .ac-familles__panneau--performer,
#famille-recuperer:checked ~ .ac-familles__panneau--recuperer,
#famille-optimiser:checked ~ .ac-familles__panneau--optimiser {
  display: block;
}

.ac-familles__panneau-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pa-bordure-douce);
}
.ac-familles__panneau-icone {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  stroke: var(--pa-accent);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ac-familles__panneau-titre {
  margin: 0;
  font-family: var(--pa-police-texte);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--pa-accent);
}

/* Sur téléphone, un nom de service long (« Accompagnement personnalisé »)
   collé au badge sur une seule ligne fait déborder la carte hors de l'écran
   (le min-content de `.vt-service__entete` dépasse la colonne). On autorise
   ici le retour à la ligne — correctif local, vitrine.css reste intact. */
@media (max-width: 900px) {
  .ac-familles__panneau .vt-service__entete,
  .ac-familles__panneau .vt-service__pied {
    flex-wrap: wrap;
  }
  .ac-familles__panneau .vt-service__nom {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* --- Compteur du haut de section (repris tel quel de la V1) ------------- */

.ac-services__compteur {
  margin: 0;
  flex: 1 1 220px;
  font-size: 14px;
  color: var(--pa-texte-4);
}
.ac-services__compteur strong {
  font-family: var(--pa-police-titre);
  font-size: 20px;
  color: var(--pa-accent);
  font-weight: 400;
  margin-right: 2px;
}

/* ==========================================================================
   Modale vidéo « Comment ça marche » — ajout du 11/09/2026, déplacée du
   bloc inline du bas de page vers un `<dialog>` natif le 15/09/2026
   (demande client : la vidéo s'ouvre depuis le badge du hero, plus haut
   dans ce fichier). `showModal()`/`close()` sont posés par
   `static/js/comment-ca-marche.js` ; sans JS le badge est un lien
   classique vers le MP4 et cette modale ne s'ouvre jamais — rien ici ne
   dépend du script pour la page de base de rester utilisable.
   ========================================================================== */
.ac-cm-modale {
  padding: 0;
  border: 0;
  max-width: min(720px, 92vw);
  width: 100%;
  background: transparent;
  color: var(--pa-texte);
}
.ac-cm-modale::backdrop {
  background: rgba(1, 15, 29, 0.86);
}
@media (max-width: 640px) {
  .ac-cm-modale {
    max-width: min(380px, 92vw);
  }
}

.ac-cm-modale__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--pa-bordure-douce);
}
@media (max-width: 640px) {
  .ac-cm-modale__cadre {
    aspect-ratio: 9 / 16;
  }
}

.ac-cm-modale__fermer {
  position: absolute;
  top: -44px;
  right: 0;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pa-fond-profond);
  border: 1px solid var(--pa-bordure-douce);
  color: var(--pa-blanc);
  cursor: pointer;
}
.ac-cm-modale__fermer:hover,
.ac-cm-modale__fermer:focus-visible {
  border-color: var(--pa-accent);
  color: var(--pa-accent);
}
.ac-cm-modale__fermer svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ac-cm-modale__lecteur {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}