/* Tokens de couleur — miroir des Variables Elementor V4, voir cafe-moka-elementor-v4-variables-guide.md */
:root {
  --surface-0-dark: #1E1F25;
  --surface-0-light: #FEFEFE;
  --surface-1-dark: #26272E;
  --surface-1-light: #F2F2F2;
  --border-dark: #575757;
  --border-light: #D1D1D3;
  --accent: #05F2CC;
  --text-on-dark: #FEFEFE;
  --text-on-light: #1E1F25;
}

/* Base du site : dark par défaut. Les sections "bascule" passent en light via .theme-light (voir guide § 5.1) */
body {
  background-color: var(--surface-0-dark);
  color: var(--text-on-dark);
}

/* Police Armada — self-hosted, voir cafe-moka-elementor-v4-variables-guide.md */
@font-face {
  font-family: 'Armada';
  src: url('../fonts/armada/Armada-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Armada';
  src: url('../fonts/armada/Armada-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Armada';
  src: url('../fonts/armada/Armada-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Armada';
  src: url('../fonts/armada/Armada-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Étiquette qui suit le curseur — voir custom.js pour le comportement (mouseenter/mousemove/mouseleave) */
.cursor-tag-wrap {
  position: relative;
}

.cursor-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
  font-family: 'Armada', sans-serif;
  font-weight: 400; /* text-body */
  font-size: 1rem; /* text-body */
  opacity: 0;
  transform: translate(0, 0) rotate(-8deg) scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cursor-tag.is-visible {
  opacity: 1;
  transform: translate(var(--cursor-tag-x, 0), var(--cursor-tag-y, 0)) rotate(-8deg) scale(1);
}

/* Variante pleine — bloc CTA (5.6) */
.cursor-tag {
  background-color: var(--accent);
  color: var(--text-on-light);
  padding: var(--space-2, 1rem) var(--space-3, 1.5rem);
}

/* Variante ghost — bloc cible non confirmé (5.7), classe prête mais pas encore attachée à du markup */
.cursor-tag--ghost {
  background-color: transparent;
  padding: 0;
}
.theme-dark .cursor-tag--ghost {
  color: var(--text-on-dark);
}
.theme-light .cursor-tag--ghost {
  color: var(--text-on-light);
}

/*
 * Rangée de photos "polaroid" en peek-a-boo — début du footer.
 * Au repos, chaque carte ne montre qu'une fine tranche au-dessus du footer ;
 * au survol, elle seule remonte pour se révéler entièrement.
 * Unités en rem/clamp() comme le reste de la charte (racine 16px), calées sur
 * la plage 1024px→1920px (grand écran desktop) puisque ce composant n'existe
 * qu'à partir de 1024px (en dessous, le fallback mobile prend le relais,
 * voir media query plus bas).
 * ⚠️ Valeurs de hauteur/marge/rotation à ajuster à l'œil une fois monté dans Elementor.
 */
.cm-polaroid-row {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-end;
  justify-content: center;
  height: clamp(23rem, 3.286rem + 1.925vw, 40.25rem); /* 368px → 644px : marge supplémentaire pour absorber un agrandissement natif des cartes */
  margin-top: clamp(-15.8rem, 1.129rem - 0.882vw, -7.9rem); /* -253px → -126px : déborde au-dessus du footer */
  overflow: hidden;
  pointer-events: none; /* la zone vide autour des cartes ne bloque pas le contenu derrière */
}

.cm-polaroid-card {
  pointer-events: auto;
  position: relative;
  flex: 0 0 auto;
  width: clamp(10.625rem, -0.088rem + 1.046vw, 20rem); /* 170px → 320px */
  aspect-ratio: 3 / 4; /* hauteur toujours = largeur × 4/3, proportion garantie à toutes les tailles */
  margin-left: -3.125rem; /* 50px */
  background: var(--text-on-dark);
  border: 0.5rem solid var(--text-on-dark); /* 8px */
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateY(78%) rotate(var(--tilt, 0deg)); /* en % de la hauteur de la carte elle-même : reste correct même si la largeur est changée nativement (min-width, etc.) */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.cm-polaroid-card:first-child {
  margin-left: 0;
}
.cm-polaroid-card:nth-child(1) { --tilt: -4deg; }
.cm-polaroid-card:nth-child(2) { --tilt: 3deg; }
.cm-polaroid-card:nth-child(3) { --tilt: -3deg; }
.cm-polaroid-card:nth-child(4) { --tilt: 5deg; }

.cm-polaroid-card:hover {
  transform: translateY(0) rotate(var(--tilt, 0deg));
  /* pas de changement de z-index : l'ordre d'empilement reste celui par défaut, même carte remontée */
}

.cm-polaroid-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Carte texte/réseaux à la place d'une photo (remplace .cm-polaroid-card--text sur une des 4 cartes) */
.cm-polaroid-card--text {
  background: var(--surface-0-dark);
  border-color: var(--surface-0-dark);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3, 1.5rem);
}
.cm-polaroid-card--text a {
  color: var(--accent);
}

/* Écran "C'est un match !" — créé par le JS sur toutes les tailles d'écran, mais
   masqué et hors du flux par défaut : seul le mode mobile (media query plus bas)
   le rend visible/positionné, pour ne jamais perturber la mise en page desktop. */
.cm-polaroid-match {
  display: none;
}

/*
 * Mobile/tablette (< 1024px) : pas de hover fiable → pile de cartes façon Tinder.
 * Toutes les cartes empilées au même endroit, la carte du dessus se swipe à
 * gauche/droite et repasse en dessous de la pile (cycle continu). Contenu dans
 * la section (pas plein écran) — le reste du footer reste visible en dessous.
 * Comportement JS dans custom.js (initPolaroidStack).
 */
@media (max-width: 1023px) {
  .cm-polaroid-row {
    position: relative;
    display: block;
    width: min(32vh, 88vw); /* 32vh de large → ~43vh de haut en ratio 3:4 (un peu moins d'une demi-hauteur d'écran), plafonné à 88vw pour ne jamais déborder */
    height: auto; /* hauteur déduite de la largeur via aspect-ratio */
    aspect-ratio: 3 / 4; /* proportions toujours garanties, même quand le plafond 88vw s'applique */
    /* marge basse négative = 1/10 de la hauteur de carte (largeur × 4/3 × 0,1) → le bas de la carte
       glisse sous la section de contenu qui suit. isolation:isolate enferme l'empilement des cartes
       dans le row, pour que la section (plus loin dans le DOM) soit peinte PAR-DESSUS ce recouvrement. */
    margin: var(--space-6, 3rem) auto calc(min(32vh, 88vw) * -0.1333);
    isolation: isolate;
    overflow: visible;
    pointer-events: auto;
  }
  .cm-polaroid-card {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
    touch-action: pan-y; /* laisse le scroll vertical de la page, capture le swipe horizontal en JS */
  }
  /* Carte socials exclue du cycle normal : cachée par défaut, révélée uniquement après un match (voir JS).
     Sélecteur à spécificité renforcée (.elementor .cm-polaroid-row …) pour battre la règle de base
     d'Elementor « .elementor .e-div-block-base { display: block } » (spécificité 2) qui, sinon, laisse
     la carte visible sous les photos. Le JS la révèle via un style inline (display:flex) qui prime dessus. */
  .elementor .cm-polaroid-row .cm-polaroid-card--text {
    display: none;
  }
  .cm-polaroid-card.is-dragging {
    transition: none;
  }

  /* Écran "C'est un match !" — contenu dans les dimensions de la rangée, pas plein écran */
  .cm-polaroid-match {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 1rem);
    text-align: center;
    padding: var(--space-3, 1.5rem);
    background: var(--surface-0-dark);
    border: 0.5rem solid var(--accent);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .cm-polaroid-match.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .cm-polaroid-match__title {
    font-family: 'Armada', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accent);
    margin: 0;
  }
  .cm-polaroid-match__subtitle {
    font-family: 'Armada', sans-serif;
    font-weight: 400;
    color: var(--text-on-dark);
    margin: 0;
  }
}

/* ==========================================================================
   Césure
   - pretty  : texte courant, évite le mot orphelin en dernière ligne.
   - balance : titres et libellés courts, équilibre les lignes entre elles.
   La propriété est héritée, donc body suffit en théorie. Les sélecteurs qui
   suivent sont une sécurité pour les composants Elementor dont la mise en
   forme est posée directement sur l'élément.
   ========================================================================== */

body {
  text-wrap: pretty;
}

p, li, dt, dd,
blockquote, figcaption, caption,
label, legend,
.elementor-widget-text-editor,
.elementor-icon-box-description,
.elementor-icon-list-text,
.elementor-testimonial__text,
.elementor-tab-content {
  text-wrap: pretty;
}

/* Titres et libellés courts. Placé après le bloc ci-dessus pour l'emporter. */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-icon-box-title,
.elementor-button-text,
.elementor-tab-title,
.e-n-accordion-item-title-text {
  text-wrap: balance;
}

/* ==========================================================================
   Intégrations vidéo externes (chargement au clic)
   Aucun calage artificiel de hauteur : c'est la miniature, en flux normal, qui
   donne sa hauteur au bloc. Une fois l'iframe injectée au clic, c'est elle qui
   porte le rapport d'aspect. Rien n'est chargé depuis l'hébergeur avant le clic.
   ========================================================================== */

.tb-embed {
  --tb-embed-ratio: 730 / 415;
  --tb-embed-play-size: 76px;
  --tb-embed-play-bg: var(--e-global-color-secondary, #0013F4);
  --tb-embed-play-arrow: var(--e-global-color-e86f8c5, #FEFFFB);
  position: relative;
  width: 100%;
}

/* La façade est un <button> : le kit Elementor style tous les boutons, avec une
   spécificité supérieure à une classe seule. D'où le double sélecteur. */
.tb-embed .tb-embed__facade {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}

.tb-embed .tb-embed__facade img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--tb-embed-ratio);
  object-fit: cover;
}

.tb-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: var(--tb-embed-ratio);
  border: 0;
}

.tb-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--tb-embed-play-size);
  height: var(--tb-embed-play-size);
  border-radius: 50%;
  background: var(--tb-embed-play-bg);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.tb-embed__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 6px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--tb-embed-play-arrow);
}

/* Elementor impose « .e-con > .elementor-widget > .elementor-widget-container
   { height: 100% } ». Sur un conteneur de hauteur automatique, ce 100% se
   résout à zéro et le bloc ne réserve aucune place dans le flux : la vidéo
   passe alors par-dessus la section suivante. */
.e-con > .elementor-widget-tb-video-embed > .elementor-widget-container,
.e-con > .e-con-inner > .elementor-widget-tb-video-embed > .elementor-widget-container {
  height: auto;
}