/* ==========================================================================
   COPAÏBA — COUCHE PARTAGÉE
   --------------------------------------------------------------------------
   Ce fichier contient tout ce qui est commun aux trois univers du site :
   l'échelle d'animation, l'accessibilité et les correctifs transverses.
   Les couleurs et la mise en page propres à chaque page restent dans le
   bloc <style> de la page concernée.

   Ce fichier est chargé AVANT le <style> de la page : en cas de conflit,
   la page a le dernier mot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ÉCHELLE D'ANIMATION
   Trois durées, trois courbes. Rien d'autre ne doit être utilisé.
   -------------------------------------------------------------------------- */
:root {
  --dur-fast: 150ms;   /* survol, focus, rotation d'icône */
  --dur-base: 280ms;   /* cartes, navigation, modale, menu */
  --dur-slow: 480ms;   /* apparition au défilement, entrée du logo */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);        /* ce qui apparaît */
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94); /* boucles ambiantes */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* allers-retours */

  /* Hauteur cumulée de la barre d'univers et de la navigation.
     Sert à décaler les ancres pour qu'elles ne passent pas dessous. */
  --offset-ancre: 118px;
}

/* --------------------------------------------------------------------------
   2. ANCRES — les liens internes ne doivent plus atterrir sous la navigation
   -------------------------------------------------------------------------- */
section[id],
[id].section,
main[id],
h2[id], h3[id] {
  scroll-margin-top: var(--offset-ancre);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHIE — protection contre les débordements
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, p, li, summary, label, figcaption {
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   4. FOCUS CLAVIER
   Visible sur fond clair comme sur fond sombre grâce au double contour.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Le contour par défaut ne s'affiche plus au clic à la souris */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   5. ZONES TACTILES
   Minimum 44 px sur les contrôles réellement cliquables au doigt.
   -------------------------------------------------------------------------- */
.hamburger,
.m-close,
.modal-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6. RETOUR TACTILE
   Léger retrait à l'appui, uniquement sur les appareils tactiles.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .btn:active,
  .soin-card:active,
  .tarif-card:active,
  .pillar:active,
  .pillar-preview:active,
  .info-card:active,
  .switcher-btn:active {
    transform: scale(0.98);
    transition-duration: var(--dur-fast);
  }
}

/* --------------------------------------------------------------------------
   7. BARRE D'UNIVERS — correction du débordement sur petits écrans
   Le contenu peut désormais défiler horizontalement au lieu d'être coupé.
   -------------------------------------------------------------------------- */
.universe-bar {
  max-width: 100vw;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.universe-bar::-webkit-scrollbar { display: none; }

.switcher-pill {
  flex: 0 0 auto;
  max-width: none;
}

@media (max-width: 420px) {
  .soon-tag { display: none; }
  .switcher-btn {
    padding: 10px 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
}

/* Hauteur de frappe correcte sur mobile pour les onglets d'univers */
@media (max-width: 768px) {
  .switcher-btn {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   8. MODALE — ouverture et fermeture en fondu
   Le passage brutal display:none / display:flex est remplacé par une
   transition. La sortie est plus rapide que l'entrée : c'est ce qui donne
   la sensation de fluidité.
   -------------------------------------------------------------------------- */
.modal-overlay {
  display: flex !important;           /* on ne pilote plus l'affichage ici */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s linear 0s;
}

.modal-overlay > .modal {
  transform: translateY(12px) scale(0.985);
  transition: transform var(--dur-fast) var(--ease-out);
}
.modal-overlay.open > .modal {
  transform: translateY(0) scale(1);
  transition: transform var(--dur-base) var(--ease-out);
}

/* Hauteur fiable sur mobile quand la barre d'adresse se rétracte */
.modal-overlay > .modal {
  max-height: min(88vh, 88dvh);
}

/* --------------------------------------------------------------------------
   9. MENU MOBILE — même traitement
   -------------------------------------------------------------------------- */
.mobile-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.mobile-nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear 0s;
}

/* La barre d'univers s'efface pendant que le menu est ouvert :
   sans cela elle flottait au-dessus du menu plein écran. */
body.menu-ouvert .universe-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   10. APPARITION AU DÉFILEMENT
   Plus courte et moins décalée que la version précédente : le contenu ne
   traîne plus derrière le défilement.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.vis {
  opacity: 1;
  transform: none;
}

.reveal.d1 { transition-delay: 60ms; }
.reveal.d2 { transition-delay: 120ms; }
.reveal.d3 { transition-delay: 180ms; }
.reveal.d4 { transition-delay: 240ms; }
.reveal.d5 { transition-delay: 300ms; }

/* Filet de sécurité : si le JavaScript ne s'exécute pas, tout reste visible.
   La classe js-ok est posée par copaiba.js dès le début du chargement. */
html:not(.js-ok) .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --------------------------------------------------------------------------
   11. ARRIÈRE-PLAN DU HÉRO — préparation de la couche GPU
   Évite le sursaut au tout premier défilement.
   -------------------------------------------------------------------------- */
.hero-photo-bg {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   12. COMPENSATION DE LA BARRE DE DÉFILEMENT
   Empêche le décalage horizontal du contenu à l'ouverture d'une modale.
   -------------------------------------------------------------------------- */
html {
  scrollbar-gutter: stable;
}
body.scroll-bloque {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   13. LIEN D'ÉVITEMENT — doit rester au-dessus de tout
   -------------------------------------------------------------------------- */
.skip-link:focus {
  z-index: 10000 !important;
}

/* --------------------------------------------------------------------------
   14. MOUVEMENT RÉDUIT
   Respecte le réglage système « réduire les animations ».
   Les durées sont ramenées à un souffle plutôt que supprimées, afin que les
   scripts qui attendent la fin d'une animation continuent de fonctionner.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-photo-bg {
    transform: none !important;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   15. PRISE DE RENDEZ-VOUS — les deux étapes du pop-up
   --------------------------------------------------------------------------
   Étape 1 : le choix du soin (donc de la durée).
   Étape 2 : le calendrier Cal.com, qui n'affiche que les créneaux
             compatibles avec cette durée, temps de battement compris.

   Ces règles fonctionnent telles quelles sur les deux univers du site :
   elles n'utilisent que des variables définies par les deux pages
   (--or, --txt, --txt-soft, --border, --font-serif).
   -------------------------------------------------------------------------- */

/* Le pop-up ne doit jamais dépasser l'écran une fois le calendrier ouvert */
.modal.modal-wide {
  max-height: min(92vh, 940px);
}

/* ---- Étape 1 : les cartes de soins ---- */
.rdv-soins {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rdv-famille {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--txt-soft);
  margin: 6px 0 2px;
}

.rdv-cartes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}

.rdv-carte {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(127, 127, 127, .05);
  font-family: inherit;
  color: var(--txt);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.rdv-carte:hover,
.rdv-carte:focus-visible {
  border-color: var(--or);
  background: rgba(196, 154, 60, .09);
  transform: translateY(-2px);
}

.rdv-carte.vedette { border-color: var(--or); }

.rc-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rc-duree {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
}

.rc-badge {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--or);
  border: 1px solid var(--or);
  border-radius: 40px;
  padding: 2px 8px;
  white-space: nowrap;
}

.rc-nom {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.2;
}

.rc-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--txt-soft);
}

.rc-prix {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 500;
}

.rc-prix small {
  font-size: 11px;
  font-weight: 400;
  color: var(--txt-soft);
}

/* ---- Étape 2 : rappel du soin + calendrier ---- */
.rdv-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.rdv-retour {
  border: 1px solid var(--border);
  border-radius: 40px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--txt-soft);
  padding: 7px 15px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.rdv-retour:hover,
.rdv-retour:focus-visible {
  border-color: var(--or);
  color: var(--or);
}

.rdv-recap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.rr-nom {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--txt);
}

.rr-meta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--or);
}

.rr-note {
  font-size: 11px;
  color: var(--txt-soft);
}

.cal-embed {
  min-height: 460px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* Le calendrier gère sa propre hauteur ; on borne seulement l'excès */
.cal-embed iframe {
  width: 100%;
  border: none;
  display: block;
}

@media (max-width: 640px) {
  .rdv-cartes { grid-template-columns: 1fr; }
  .rdv-barre { flex-direction: column; align-items: flex-start; }
  .rdv-recap { justify-content: flex-start; }
  .cal-embed { min-height: 520px; }
}

/* Cartes de tarifs rendues cliquables par le script quand Cal.com est actif */
.rdv-cliquable {
  cursor: pointer;
}

.rdv-cliquable::after {
  content: "Réserver →";
  display: block;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--or);
  opacity: .75;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.rdv-cliquable:hover::after,
.rdv-cliquable:focus-visible::after {
  opacity: 1;
}