/* ===============================
   Passport Button — Styles globaux
   =============================== */

/* Sécu: box-sizing cohérent partout */
*, *::before, *::after { box-sizing: border-box; }

/* Bouton fixe sur le côté droit (desktop only) */
.passport-cta {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: inline-block;
  text-decoration: none;
}
@media (max-width: 767px) {
  .passport-cta { display: none; }
}

/* ===============================
   Le "livre" (container 3D)
   =============================== */

.book {
  position: relative;
  /* Largeur/hauteur responsives (≈ format 3:2) */
  width: clamp(200px, 20vw, 340px);
  height: clamp(134px, 13.4vw, 226px); /* ≈ 2/3 de la largeur */
  perspective: 1400px; /* profondeur 3D */
  will-change: transform;
}

/* ===============================
   Page intérieure DROITE (blanche)
   - invisible à gauche tant que fermé
   - recouverte par la couverture rouge
   =============================== */

.page-right {
  position: absolute;
  top: 0;
  bottom: 0;          /* force la pleine hauteur */
  left: 50%;
  right: 0;           /* moitié droite exacte */
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: 1px solid #d1d5db;
  border-radius: 0 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;         /* sous la couverture */
}

.page-label {
  font: 600 clamp(11px, 1.8vw, 18px)/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1e3a8a; /* indigo */
  padding-left: 4px;
}

/* ===============================
   Couverture ROUGE à droite
   - pivot sur le bord gauche
   - face avant (titre + logo)
   - dos visible à gauche quand ouverte
   =============================== */

.cover {
  position: absolute;
  top: 0;
  bottom: 0;          /* pleine hauteur */
  left: 50%;
  right: 0;           /* même zone que .page-right */
  transform-origin: left center;     /* charnière à gauche */
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(.2,.9,.2,1), box-shadow 0.3s ease;
  z-index: 2;
}

/* Faces de la couverture (avant/dos) */
.cover-face {
  position: absolute;
  inset: 0;           /* occupe toute la couverture */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column; /* logo au-dessus du titre */
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
}

/* Face avant — rouge passeport + logo + titre */
.cover-front {
  background: linear-gradient(180deg, #7d0022, #5a0018); /* rouge passeport français */
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

/* Logo (SVG) doré centré */
.passport-logo {
  width: clamp(40px, 5vw, 64px);
  height: auto;
  margin-bottom: 8px;
  fill: #f6e27a; /* or */
}

/* Titre "PASSPORT" doré */
.cover-title {
  color: #f6e27a;                   /* or */
  letter-spacing: .08em;
  text-transform: uppercase;
  font: 800 clamp(12px, 2vw, 22px)/1.1 "Segoe UI", Roboto, system-ui, Arial, sans-serif;
  text-align: center;
  pointer-events: none;
}

/* Dos de la couverture — visible quand ouverte à plat à gauche */
.cover-back {
  background: linear-gradient(180deg, #6a001e, #520016);
  transform: rotateY(180deg);
  /* quand posée à gauche, le rayon doit être sur la gauche : */
  border-radius: 8px 0 0 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.30);
}

/* ===============================
   Animation d’ouverture à plat
   =============================== */

.book:hover .cover {
  transform: rotateY(-180deg); /* s’ouvre complètement à gauche */
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* ===============================
   Hypnose Effect
   =============================== */

/* Anneaux multiples qui “dé-zooment” — loop parfait, sans fade/easing */
.hypno-canvas{
  position:absolute;
  width:13rem;               /* = h-52 (208px) — ajuste si tu changes l’avatar */
  height:13rem;
  border-radius:50%;
  overflow:hidden;           /* reste dans le cercle */
  z-index:0;

  /* Réglages rapides */
  --bg: rgba(24, 53, 116, 0.582); /* fond des inter-bandes (ex: slate-900/55%) */
  --ring: rgba(111, 61, 121, 0.741);           /* couleur des anneaux (violet pastel) */
  --band: 10px;              /* épaisseur d’un anneau */
  --gap: 32px;               /* écart entre anneaux (fond visible) */
  --speed: 20;               /* px/s vers le bord (linéaire) */
  --feather: 30px;                           /* largeur de l’aura de CHAQUE côté */
  --glow: rgba(111, 61, 121, 0.741);           /* couleur du glow (avec alpha) */
}

/* ===============================
   Anneau Avatar
   =============================== */

/* Force la couleur du ring Tailwind via la variable */
.avatar-ring{
  --tw-ring-color: #4D5EA3 !important;   /* couleur demandée */
  --tw-ring-offset-color: transparent;   /* optionnel, pour être clean */
  --tw-ring-opacity: 1;                  /* plein, pas d’opacité */
}