/* ============================================================
   Nautiles (LOT N) — carrousel du board, gravure en séance et en fin de
   séance, cérémonie du 1er. Dessin : js/nautile.js (Claude Design).
   ============================================================ */

/* ---------- Board : « Mes nautiles » ---------- */
.dash-nautiles{
  padding:var(--e-5) 0 var(--e-6);
  border-bottom:var(--trait-1) solid var(--trait);
  min-width:0;
}
.dash-nautiles[hidden]{ display:none; }
.nautiles-titre{ margin-bottom:var(--e-2); padding:0 var(--e-6); }
@media (max-width:600px){
  .dash-nautiles{ padding-top:var(--e-4); }
  .nautiles-titre{ padding:0 var(--e-4); }
}
.nautiles-piste{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  cursor:grab;
  outline:none;
  min-width:0;
}
.nautiles-piste::-webkit-scrollbar{ display:none; }
.nautiles-piste.nautiles-glisse{ cursor:grabbing; user-select:none; }
.nautiles-piste:focus-visible{ outline:var(--trait-2) solid var(--action); outline-offset:var(--e-0); }
.nautiles-rail{
  display:flex;
  width:max-content;
  padding:var(--e-5) 0 52px;     /* l'arc descend les voisines de 16·d² px */
}
.nautiles-carte{
  flex:none;
  width:244px;
  display:flex;
  justify-content:center;
  transform-origin:50% 100%;
  will-change:transform, opacity;
}
.nautiles-coque{
  width:232px;
  display:grid;
  place-items:center;
}
.nautiles-coque > *{ grid-area:1 / 1; }
.nautiles-coque svg{ display:block; max-width:none; }
.nautiles-attente{ width:232px; height:183.57px; }   /* gangue pas encore dessinée */
.nautiles-legende{
  text-align:center;
  min-height:96px;
  padding:0 var(--e-4);
  min-width:0;
}
.nautiles-pl{
  font-family:var(--f-mono);
  font-size:var(--t-10);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texte-2);
  margin:0 0 var(--e-1);
}
.nautiles-nom{
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-19);
  color:var(--texte);
  margin:0 0 var(--e-1);
}
.nautiles-ligne{
  font-size:var(--t-13);
  color:var(--texte-2);
  margin:0;
  overflow-wrap:anywhere;
}
.nautiles-ligne.nautiles-or{ color:#8F6B22; font-weight:500; }
.nautiles-indice{
  font-size:var(--t-13);
  font-style:italic;
  color:var(--texte-2);
  margin:0 auto;
  max-width:300px;
  text-wrap:balance;
}
.nautiles-partager{
  margin-top:var(--e-3);
  font-family:var(--f-texte);
  font-size:var(--t-13);
  font-weight:600;
  color:var(--texte);
  background:transparent;
  border:var(--trait-1) solid var(--trait-fort);
  border-radius:var(--r-controle);
  padding:var(--e-2) var(--e-4);
  cursor:pointer;
}
.nautiles-partager:disabled{ opacity:.4; cursor:progress; }
.nautiles-points{
  display:flex;
  justify-content:center;
  gap:var(--e-2);
  margin-top:var(--e-4);
}
.nautiles-point{
  width:7px; height:7px;
  padding:0;
  border-radius:var(--r-loge);
  border:var(--trait-1) solid var(--texte-2);
  background:transparent;
  cursor:pointer;
}
.nautiles-point[aria-current="true"]{ background:var(--texte); border-color:var(--texte); }
.nautiles-mesure{ font-family:var(--f-mono); font-size:var(--t-11); color:var(--texte-2); text-align:center; margin:var(--e-3) var(--e-4) 0; }

/* ---------- Gravure : pulsation finale ---------- */
@keyframes nautile-pulse{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.02); }
  100%{ transform:scale(1); }
}
.nautile-pulse{ animation:nautile-pulse 420ms var(--courbe); }

/* ---------- Fin de séance : la coquille remplace le logo ---------- */
.fin-visuel.fin-visuel-nautile{
  position:relative;
  cursor:pointer;
}
.fin-coque{ line-height:0; transform-origin:50% 50%; }
.fin-coque svg{ display:block; }
.fin-chambre{
  position:absolute;
  left:0; right:0;
  bottom:-30px;
  margin:0;
  font-family:var(--f-mono);
  font-size:var(--t-11);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--flamme);
  opacity:0;
  transition:opacity var(--t-long) var(--courbe);
}
.fin-chambre.fin-chambre-visible{ opacity:1; }

/* ---------- Cérémonie du 1er ---------- */
.nautiles-ceremonie{
  position:fixed;
  inset:0;
  z-index:960;
  background:var(--ivoire);
  overflow-y:auto;
  overflow-x:hidden;
  opacity:0;
  transition:opacity 300ms var(--courbe);
  padding:calc(var(--e-7) + env(safe-area-inset-top)) var(--e-4) calc(var(--e-6) + env(safe-area-inset-bottom));
}
.nautiles-ceremonie.nautiles-ceremonie-ouverte{ opacity:1; }
.ceremonie-ecran{
  max-width:430px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  min-width:0;
}
.ceremonie-date{
  font-family:var(--f-mono);
  font-size:var(--t-11);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--texte-2);
  margin:0 0 var(--e-3);
}
.ceremonie-titre{
  font-family:var(--f-display);
  font-weight:700;
  font-size:var(--t-34);
  letter-spacing:-.03em;
  line-height:1.05;
  margin:0 0 var(--e-3);
}
.ceremonie-texte{
  font-size:var(--t-15);
  line-height:1.5;
  color:var(--texte-2);
  margin:0 0 var(--e-5);
  max-width:320px;
  text-wrap:balance;
}
.ceremonie-planche{ max-width:100%; min-width:0; margin-bottom:var(--e-6); }
.ceremonie-planche svg{ display:block; max-width:100%; height:auto; }
.ceremonie-coque{ position:relative; width:260px; margin-bottom:var(--e-5); line-height:0; }
.ceremonie-coque-finale svg{ display:block; }
.ceremonie-gangue{ position:absolute; left:0; top:0; width:260px; height:100%; pointer-events:none; }
.ceremonie-gangue > svg{ position:absolute; left:0; top:0; overflow:visible; }
.ceremonie-indice{
  display:flex;
  align-items:center;
  gap:var(--e-4);
  text-align:left;
  width:100%;
  border:var(--trait-1) solid var(--trait);
  border-radius:var(--r-bloc);
  background:var(--surface-creux);
  padding:var(--e-3) var(--e-4);
  margin-bottom:var(--e-6);
  min-width:0;
}
.ceremonie-indice > div:last-child{ min-width:0; }
.ceremonie-indice-coque{ flex:none; line-height:0; }
.ceremonie-indice-titre{
  font-family:var(--f-mono);
  font-size:var(--t-10);
  letter-spacing:.2em;
  color:var(--texte-2);
  margin:0 0 var(--e-1);
}
.ceremonie-indice-texte{ font-size:var(--t-13); font-style:italic; color:var(--texte); margin:0; }
.ceremonie-boutons{
  display:flex;
  flex-direction:column;
  gap:var(--e-3);
  width:100%;
}
.ceremonie-boutons .gy-btn{ width:100%; height:52px; }

/* ---------- Board : flèches et ombre au sol ---------- */
.nautiles-scene{ position:relative; min-width:0; }
.nautiles-carte{ position:relative; }
.nautiles-fleche{
  position:absolute;
  top:calc(var(--e-5) + 92px - 22px);   /* centre de la coquille (232 × 184) */
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent;
  color:var(--encre);
  cursor:pointer;
}
.nautiles-fleche[hidden]{ display:none; }
.nautiles-fleche svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.nautiles-fleche-g{ left:max(0px, calc(50% - 116px - 48px)); }
.nautiles-fleche-d{ right:max(0px, calc(50% - 116px - 48px)); }
.nautiles-fleche:focus-visible{ outline:var(--trait-2) solid var(--action); outline-offset:-4px; }
.nautiles-ombre{
  position:absolute;
  left:50%; bottom:-7px;
  width:162px; height:16px;              /* ≈ 70 % de la coquille */
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(34,30,24,.12) 0%, rgba(34,30,24,.06) 40%, rgba(34,30,24,0) 70%);
  pointer-events:none;
  z-index:-1;
}
.nautiles-coque{ position:relative; z-index:0; }

/* ---------- Séance : bandeau de gravure (surface temporaire) ---------- */
.nautiles-bandeau{
  position:fixed;
  left:0; right:0;
  z-index:850;
  display:flex; align-items:center; gap:var(--e-3);
  padding:var(--e-2) var(--e-4);
  background:var(--ivoire);
  border-bottom:var(--trait-1) solid var(--trait);
  pointer-events:none;
  transform:translateY(-100%);
}
.nautiles-bandeau-coque{ flex:none; width:28px; line-height:0; }
.nautiles-bandeau-coque svg{ display:block; }
.nautiles-bandeau-textes{ display:flex; flex-direction:column; min-width:0; }
.nautiles-bandeau-l1{
  font-family:var(--f-mono);
  font-size:var(--t-11);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--flamme);
}
.nautiles-bandeau-l2{ font-size:var(--t-12); color:var(--texte-2); }

/* ---------- Cérémonie : entrée (≈ 2,2 s) ---------- */
.ceremonie-pile{ display:grid; max-width:430px; margin:0 auto; }
.ceremonie-pile > .ceremonie-ecran{ grid-area:1 / 1; }
.ceremonie-1 .ceremonie-date,
.ceremonie-1 .ceremonie-titre,
.ceremonie-1 .ceremonie-texte,
.ceremonie-1 .ceremonie-boutons{ opacity:0; }
.ceremonie-1 .pl-coque,
.ceremonie-1 .pl-cartouche,
.ceremonie-1 .pl-cachet{ opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
.ceremonie-1 .pl-coque{ transform:scale(.94); }
.ceremonie-1 .pl-cartouche{ transform:scale(1.03); }
.ceremonie-1 .pl-cachet{ transform:scale(1.4); }
.ceremonie-1 .pl-filet{ stroke-dashoffset:var(--pl-p); }

.joue .ceremonie-1 .ceremonie-date{ opacity:1; transition:opacity 400ms var(--courbe) 0ms; }
.joue .ceremonie-1 .pl-coque{ opacity:1; transform:none; transition:opacity 500ms var(--courbe) 300ms, transform 600ms var(--courbe) 300ms; }
.joue .ceremonie-1 .pl-filet{ stroke-dashoffset:0; transition:stroke-dashoffset 700ms ease-in-out 700ms; }
.joue .ceremonie-1 .pl-cartouche{ opacity:1; transform:none; transition:opacity 250ms var(--courbe) 1400ms, transform 150ms ease-out 1400ms; }
.joue .ceremonie-1 .pl-cachet{ opacity:1; transform:none; transition:opacity 120ms linear 1400ms, transform 250ms cubic-bezier(0,0,.2,1) 1400ms; }
.joue .ceremonie-1 .ceremonie-titre{ opacity:1; transition:opacity 300ms var(--courbe) 1800ms; }
.joue .ceremonie-1 .ceremonie-texte{ opacity:1; transition:opacity 300ms var(--courbe) 1900ms; }
.joue .ceremonie-1 .ceremonie-boutons{ opacity:1; transition:opacity 300ms var(--courbe) 2000ms; }

/* ---------- Cérémonie : « Découvrir <mois> » ----------
   Instants : N.etapesDecouverte (js/nautiles.js). Classes posées par
   js/nautiles-ui.js : decouvre (la planche sort), gangue-visible (gangue de
   la veille), libere (gangue tombée : la coquille prend sa place, la chambre
   du jour pulse deux fois), textes (nom, texte, indice, bouton). */
.ceremonie-2{ visibility:hidden; }
.ceremonie-2 .ceremonie-date,
.ceremonie-2 .ceremonie-titre,
.ceremonie-2 .ceremonie-texte,
.ceremonie-2 .ceremonie-boutons,
.ceremonie-2 .ceremonie-gangue,
.ceremonie-2 .ceremonie-coque-finale,
.ceremonie-2 .coque-halo{ opacity:0; }
.ceremonie-2 .ceremonie-indice{ opacity:0; transform:translateY(8px); }

/* La planche glisse à gauche en rétrécissant et sort (500 ms). */
.decouvre .ceremonie-1{ pointer-events:none; visibility:hidden; transition:visibility 0s linear 500ms; }
.decouvre .ceremonie-1 .ceremonie-planche{ transform:translateX(-120vw) scale(.55); transform-origin:0 50%;
  transition:transform 500ms var(--courbe-sortie); }
.decouvre .ceremonie-1 > :not(.ceremonie-planche){ opacity:0; transition:opacity 200ms var(--courbe-sortie); }
.decouvre .ceremonie-2{ visibility:visible; }
.decouvre .ceremonie-2 .ceremonie-date{ opacity:1; transition:opacity 300ms var(--courbe) 450ms; }
/* À peine visible pendant que la planche sort : ses calques sont peints. */
.decouvre .ceremonie-2 .ceremonie-gangue{ opacity:.001; }
.gangue-visible .ceremonie-2 .ceremonie-gangue{ opacity:1; transition:opacity 300ms var(--courbe); }
/* t = 1 : la dernière image de la gangue EST la coquille vide ; la coquille
   du mois (chambre du jour) la remplace en fondu court. */
.libere .ceremonie-2 .ceremonie-coque-finale{ opacity:1; transition:opacity 200ms linear; }
.libere .ceremonie-2 .ceremonie-gangue{ opacity:0; transition:opacity 150ms linear 200ms; }
.libere .ceremonie-2 .coque-halo{ animation:coque-halo 520ms ease-in-out 2 both; }
.libere .ceremonie-2 .coque-jour{ animation:coque-jour 520ms ease-in-out 2; }
@keyframes coque-halo{ 0%{ opacity:0; } 45%{ opacity:.45; } 100%{ opacity:.16; } }
@keyframes coque-jour{ 0%,100%{ stroke-opacity:1; } 45%{ stroke-opacity:.55; } }
.textes .ceremonie-2 .ceremonie-titre{ opacity:1; transition:opacity 300ms var(--courbe); }
.textes .ceremonie-2 .ceremonie-texte{ opacity:1; transition:opacity 300ms var(--courbe) 80ms; }
.textes .ceremonie-2 .ceremonie-indice{ opacity:1; transform:none; transition:opacity 300ms var(--courbe) 160ms, transform 300ms var(--courbe) 160ms; }
.textes .ceremonie-2 .ceremonie-boutons{ opacity:1; transition:opacity 300ms var(--courbe) 320ms; }
.ceremonie-indice-coque svg{ display:block; overflow:visible; }
/* Écran 2 : même hauteur que l'écran 1 (même case de la pile). Le bouton
   s'aligne sur le bas des boutons de l'écran 1 ; coquille, nom et texte,
   encart indice se répartissent dans la hauteur au-dessus. */
.ceremonie-2-corps{
  flex:1;
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  gap:var(--e-4);
}
.ceremonie-2-corps > *{ margin-bottom:0; }
.ceremonie-2-textes{ display:flex; flex-direction:column; align-items:center; min-width:0; }
.ceremonie-2-textes .ceremonie-texte{ margin-bottom:0; }
.ceremonie-2 .ceremonie-boutons{ margin-top:var(--e-5); }
.ceremonie-mesure{ font-family:var(--f-mono); font-size:var(--t-11); color:var(--texte-2); margin:var(--e-3) 0 0; }

/* Un toucher : la phase passe à son état final. */
.fin-entree .ceremonie-1 *,
.fin-decouverte .ceremonie-2 *,
.fin-decouverte .ceremonie-1,
.fin-decouverte .ceremonie-1 *{ transition:none !important; animation-duration:1ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; }

/* ---------- Arrivée (1er novembre 2026) : écran 1 puis la règle ----------
   Même voile, mêmes polices et palette que la cérémonie. Écran 1 : fondu
   d'entrée, puis la coquille se construit (js/nautiles-ui.js) ; un toucher
   n'importe où passe à l'écran suivant. */
.nautiles-arrivee{ cursor:pointer; outline:none; }
/* Plein écran : chaque écran occupe la hauteur visible (moins le padding du
   voile et les zones sûres) ; le bouton reste en bas, l'espace libre se
   partage à parts égales au-dessus du titre et entre le texte et le bouton
   (le dernier bloc de texte grandit, son contenu reste en haut). */
.nautiles-arrivee .ceremonie-ecran{
  min-height:calc(100vh - var(--e-7) - var(--e-6) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height:calc(100svh - var(--e-7) - var(--e-6) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
.nautiles-arrivee .ceremonie-ecran::before{ content:""; flex:1 1 0; }
.arrivee-1 > .ceremonie-texte, .arrivee-2 > .arrivee-regle{ flex:1 0 auto; }
.nautiles-arrivee .ceremonie-titre{ margin-bottom:var(--e-7); }
.nautiles-arrivee .ceremonie-boutons{ padding-top:var(--e-6); }
.arrivee-1 > .ceremonie-texte{ margin-bottom:0; }
.arrivee-1 > *, .arrivee-2 > *{ opacity:0; }
.joue .arrivee-1 > *{ opacity:1; transition:opacity 350ms var(--courbe); }
.joue .arrivee-1 > .ceremonie-titre{ transition-delay:60ms; }
.joue .arrivee-1 > .ceremonie-coque{ transition-delay:120ms; }
.joue .arrivee-1 > .arrivee-legende,
.joue .arrivee-1 > .ceremonie-texte{ transition-delay:200ms; }
.joue .arrivee-1 > .ceremonie-boutons{ transition-delay:280ms; }
.arrivee-2{ visibility:hidden; }
.arrivee-etape-2 .arrivee-1{ visibility:hidden; pointer-events:none; transition:visibility 0s linear 250ms; }
.arrivee-etape-2 .arrivee-1 > *{ opacity:0; transition:opacity 250ms var(--courbe-sortie); }
.arrivee-etape-2 .arrivee-2{ visibility:visible; }
.arrivee-etape-2 .arrivee-2 > *{ opacity:1; transition:opacity 350ms var(--courbe) 200ms; }
.arrivee-etape-2 .arrivee-2 > .arrivee-regle{ transition-delay:280ms; }
.arrivee-etape-2 .arrivee-2 > .ceremonie-boutons{ transition-delay:360ms; }
.arrivee-sans-entree .arrivee-2 > *{ transition:none; }
.arrivee-coque{ margin-bottom:var(--e-4); }
.arrivee-coque svg{ display:block; max-width:100%; height:auto; }
.arrivee-legende{
  font-family:var(--f-mono);
  font-size:var(--t-11);
  letter-spacing:.08em;
  color:var(--texte-2);
  margin:0 0 var(--e-7);
}
.arrivee-exemple{
  display:inline-block;
  font-size:var(--t-10);
  letter-spacing:.2em;
  text-transform:uppercase;
  border:var(--trait-1) solid var(--trait);
  border-radius:var(--r-bloc);
  padding:1px var(--e-2);
  margin-right:var(--e-2);
}
.arrivee-regle{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--e-6);
  text-align:left;
}
.arrivee-regle li{
  display:flex;
  align-items:center;
  gap:var(--e-4);
  font-size:var(--t-15);
  line-height:1.45;
  color:var(--texte);
  min-width:0;
}
.arrivee-regle li > span:last-child{ min-width:0; }
.arrivee-regle-coque{ flex:none; width:56px; line-height:0; }
.arrivee-regle-coque svg{ display:block; }

/* ---------- Mouvement réduit : fondus seuls ---------- */
@media (prefers-reduced-motion: reduce){
  .nautile-pulse{ animation:none; }
  .nautiles-ceremonie, .fin-chambre{ transition:none; }
  .ceremonie-1 .pl-coque, .ceremonie-1 .pl-cartouche, .ceremonie-1 .pl-cachet,
  .ceremonie-2 .ceremonie-indice, .decouvre .ceremonie-1 .ceremonie-planche{ transform:none !important; }
  .decouvre .ceremonie-1 .ceremonie-planche{ opacity:0; transition:opacity 300ms; }
  .ceremonie-1 .pl-filet{ stroke-dashoffset:0; }
  .arrivee-1 > *, .arrivee-2 > *{ transition-delay:0ms !important; }
  /* pas de libération : fondu enchaîné gangue → coquille */
  .libere .ceremonie-2 .ceremonie-coque-finale{ transition:opacity 600ms var(--courbe); }
  .libere .ceremonie-2 .ceremonie-gangue{ transition:opacity 600ms var(--courbe); }
  .libere .ceremonie-2 .coque-halo{ animation:none; opacity:.16; }
  .libere .ceremonie-2 .coque-jour{ animation:none; }
}

/* ---------- Partage : feuille de choix du format ---------- */
.nautiles-feuille-partage-voile{ z-index:970; }
.nautiles-feuille-partage{ z-index:971; }
.nautiles-formats{ display:flex; flex-direction:column; gap:var(--e-3); margin-bottom:var(--e-3); }
.nautiles-formats .gy-btn{ width:100%; height:52px; }
.nautiles-formats .gy-feuille-plus-tard{ align-self:center; }