/* ══════════════════════════════════════════════════════════════════════
   Places restantes par vague (page 13)

   La fiche reprend le vocabulaire de la page qui l'ouvre : cartes
   blanches à coins de 14 pt, ombre douce et large, titres roses, nombres
   marine, pastilles de date. Rien d'autre. Une fiche qui ne ressemble pas
   à sa page se voit comme une pièce rapportée.

   La hiérarchie, elle, vient de duopilot : une seule vague se vend à la
   fois, elle occupe donc toute la largeur avec le temps qui reste ; les
   quatre autres attendent dessous.
   ══════════════════════════════════════════════════════════════════════ */

.dispo__panneau{ width:868px; height:auto; max-width:868px; max-height:474px; }
.dispo__corps{
  display:flex; flex-direction:column; gap:14px;
  padding:18px 20px 18px; background:var(--bg);
}

/* ══════ La vague ouverte ══════ */
.dispo__une{
  flex:none; padding:16px 18px 13px;
  background:#fff; border-radius:14px;
  box-shadow:0 6px 42px rgba(7,26,60,.10);
}
.dispo__uneHaut{ display:flex; align-items:center; gap:22px; }

/* ---- identité ---- */
.dispo__uneId{ flex:none; width:132px; }
.dispo__uneOeil{
  display:block; font-size:7px; font-weight:800; letter-spacing:.20em;
  color:var(--muted, #9aa3b2);
}
.dispo__uneNom{
  margin:3px 0 0; font-size:16px; line-height:20px; font-weight:800;
  color:var(--rose); letter-spacing:.005em;
}
.dispo__uneDate{
  display:block; margin-top:1px;
  font-family:var(--font-alt); font-size:9.5px; line-height:13px; color:var(--grey);
}
.dispo__uneEtat{
  display:inline-block; margin-top:9px; height:18.5px; padding:0 10px;
  border-radius:9.25px; background:var(--rose-alt); color:#fff;
  font-size:8.5px; line-height:18.5px; font-weight:800; white-space:nowrap;
}
.dispo__une.est-tendu  .dispo__uneEtat{ background:var(--gold); }
.dispo__une.est-ouvert .dispo__uneEtat{ background:#2fae53; }

/* ---- le nombre, traité comme un prix de la page 13 ---- */
.dispo__uneChiffre{
  flex:none; width:122px; display:flex; align-items:baseline; gap:9px;
  padding-left:20px; border-left:1px solid var(--line);
}
.dispo__grand{
  margin:0; font-size:42px; line-height:44px; font-weight:800;
  color:var(--rose); letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;
}
.dispo__une.est-tendu  .dispo__grand{ color:var(--gold); }
.dispo__une.est-ouvert .dispo__grand{ color:var(--navy); }
.dispo__grandLeg{
  font-family:var(--font-alt); font-size:9px; line-height:12px; color:var(--grey);
}
.dispo__grandLeg em{ display:block; font-style:normal; color:var(--muted, #9aa3b2); }

/* ---- le compte à rebours ---- */
.dispo__uneTemps{ flex:1 1 auto; min-width:0; }
.dispo__uneLegende{
  display:block; margin-bottom:5px;
  font-family:var(--font-alt); font-size:8.5px; line-height:11px; color:var(--grey);
}
.dispo__horloge{ display:flex; gap:7px; }
.dispo__case{
  flex:1 1 0; padding:6px 0 5px; border-radius:10px; text-align:center;
  background:var(--rose-pale-2, #fff5f8);
}
.dispo__case b{
  display:block; font-size:19px; line-height:21px; font-weight:800;
  color:var(--navy); letter-spacing:-.014em;
  font-variant-numeric:tabular-nums;   /* sinon les chiffres dansent */
}
.dispo__case i{
  display:block; margin-top:1px; font-style:normal;
  font-size:6.4px; font-weight:700; letter-spacing:.14em;
  color:var(--grey); text-transform:uppercase;
}
/* Les secondes battent : c'est le seul mouvement de la fiche. */
.dispo__case.bat{ animation:dispo-bat 1s ease-out; }
@keyframes dispo-bat{
  0%   { background:rgba(255,10,78,.16) }
  100% { background:var(--rose-pale-2, #fff5f8) }
}

/* ---- le bouton, repris de celui de la page ---- */
.dispo__ctaIco{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:rgba(255,255,255,.22); display:grid; place-items:center;
}
.dispo__ctaIco svg{
  width:10px; height:10px; fill:none; stroke:currentColor;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
}
/* C'est un <button> : il ouvre le formulaire par-dessus la présentation
   plutôt que d'emmener le prospect sur le site. D'où le border et le
   font-family, que le navigateur ne donne pas aux boutons. */
.dispo__cta{
  flex:none; display:flex; align-items:center; gap:8px;
  height:38px; padding:0 18px 0 7px; border:0; border-radius:19px;
  font-family:var(--font); cursor:pointer;
  background:var(--rose); color:#fff; text-decoration:none;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; white-space:nowrap;
  box-shadow:0 8px 22px rgba(255,10,78,.24);
  transition:translate .16s ease, box-shadow .16s ease;
}
.dispo__cta:hover{ translate:0 -1.5px; box-shadow:0 12px 28px rgba(255,10,78,.34); }

/* ---- la jauge, sous toute la carte ---- */
.dispo__uneBas{ display:flex; align-items:center; gap:12px; margin-top:13px; }
.dispo__uneBas .dispo__jauge{ flex:1 1 auto; height:5px; }
.dispo__occup{
  flex:none; font-family:var(--font-alt); font-size:8.5px; color:var(--grey);
}
.dispo__occup b{ font-family:var(--font); font-weight:800; color:var(--navy); }

.dispo__jauge{
  position:relative; display:block; width:100%; height:4px;
  border-radius:2px; background:#edf0f5; overflow:hidden;
}
.dispo__jauge i{
  position:absolute; left:0; top:0; bottom:0; display:block;
  border-radius:2px; background:var(--rose);
}
.dispo__une.est-tendu  .dispo__jauge i{ background:var(--gold); }
.dispo__une.est-ouvert .dispo__jauge i{ background:#2fae53; }

/* Programme terminé */
.dispo__closes{
  margin:0; padding:14px 0; text-align:center;
  font-size:17px; line-height:22px; font-weight:800; color:var(--navy);
}
.dispo__closes em{
  display:block; margin-top:3px; font-style:normal;
  font-family:var(--font-alt); font-size:9.5px; font-weight:400; color:var(--grey);
}

/* ══════ Les quatre autres vagues ══════ */
/* Même carte que celles imprimées sur la page 13. */
.dispo__suite{
  flex:none; display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.dispo__carte{
  padding:12px 12px 11px; text-align:center;
  background:#fff; border-radius:14px; box-shadow:0 6px 42px rgba(7,26,60,.10);
}
.dispo__carte h4{
  margin:0; font-size:10px; line-height:13.7px; font-weight:800;
  color:var(--rose); letter-spacing:.005em;
}
.dispo__carteDate{
  display:block; margin-top:1px;
  font-family:var(--font-alt); font-size:8.5px; line-height:12px; color:var(--grey);
}
.dispo__carteChiffre{
  margin:7px 0 0; display:flex; align-items:baseline; justify-content:center; gap:1px;
  font-size:22px; line-height:25px; font-weight:800; color:var(--navy);
  letter-spacing:-.018em; font-variant-numeric:tabular-nums;
}
.dispo__carteChiffre i{
  font-style:normal; font-size:10px; font-weight:700; color:var(--grey); letter-spacing:0;
}
.dispo__carteLeg{
  display:block; margin-top:-1px;
  font-family:var(--font-alt); font-size:8px; line-height:11px; color:var(--grey);
}
.dispo__carte .dispo__jauge{ margin:9px 0 10px; }
.dispo__carteEtat{
  display:inline-block; height:18.5px; padding:0 10px; border-radius:9.25px;
  font-size:8px; line-height:18.5px; font-weight:800; white-space:nowrap;
  background:var(--rose-alt); color:#fff;
}

/* La couleur suit l'état, jusque dans la jauge : la rangée se lit d'un
   coup d'œil, sans avoir à lire les chiffres. */
.dispo__carte.est-ouvert   .dispo__carteEtat{ background:#2fae53; }
.dispo__carte.est-ouvert   .dispo__jauge i{ background:#2fae53; }
.dispo__carte.est-tendu    .dispo__carteEtat{ background:var(--gold); }
.dispo__carte.est-tendu    .dispo__jauge i{ background:var(--gold); }
.dispo__carte.est-complet{ box-shadow:0 4px 20px rgba(7,26,60,.06); }
.dispo__carte.est-complet h4{ color:var(--grey); }
.dispo__carte.est-complet .dispo__carteChiffre{ color:var(--muted, #9aa3b2); }
.dispo__carte.est-complet .dispo__carteEtat{ background:#e9ecf2; color:var(--grey); }
.dispo__carte.est-complet .dispo__jauge i{ background:#c9cfda; }

/* ══════ Les deux règles ══════ */
.dispo__regles{ flex:none; display:flex; gap:26px; padding-left:2px; }
.dispo__regles span{
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-alt); font-size:8.5px; line-height:11px; color:var(--grey);
}
.dispo__regles svg{
  flex:none; width:12px; height:12px; fill:none; stroke:var(--gold);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

@media (prefers-reduced-motion:reduce){
  .dispo__case.bat{ animation:none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Le rappel d'ouverture

   Il pose le cadre avant le premier mot. Une carte étroite, centrée, avec
   l'anneau de remplissage pour figure — le même geste que le cercle de la
   page 3, tourné vers la rareté.
   ══════════════════════════════════════════════════════════════════════ */

.dispo--accueil .expl__panneau{ display:flex; flex-direction:column; }
.accueil__panneau{
  width:266px; max-width:266px; max-height:none;
  align-items:center; padding:22px 22px 20px; text-align:center;
  background:#fff;
}
.accueil__fermer{
  position:absolute; right:12px; top:12px;
  width:22px; height:22px; box-shadow:0 4px 12px rgba(255,10,78,.24);
}
.accueil__fermer svg{ width:9px; height:9px; }

.accueil__oeil{
  display:block; font-size:7px; font-weight:800; letter-spacing:.22em;
  color:var(--rose);
}

/* L'anneau : la part occupée en couleur, le reste en gris clair. */
.accueil__anneau{
  position:relative; width:126px; height:126px; margin:14px auto 0;
  border-radius:50%;
  background:conic-gradient(var(--rose) var(--part), #edf0f5 0);
}
.accueil__anneau::after{
  content:""; position:absolute; inset:11px; border-radius:50%; background:#fff;
  box-shadow:0 3px 14px rgba(7,26,60,.10) inset;
}
.accueil__panneau.est-tendu  .accueil__anneau{ background:conic-gradient(var(--gold) var(--part), #edf0f5 0); }
.accueil__panneau.est-ouvert .accueil__anneau{ background:conic-gradient(#2fae53 var(--part), #edf0f5 0); }

.accueil__coeur{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.accueil__coeur b{
  font-size:44px; line-height:44px; font-weight:800; color:var(--rose);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.accueil__panneau.est-tendu  .accueil__coeur b{ color:var(--gold); }
.accueil__panneau.est-ouvert .accueil__coeur b{ color:var(--navy); }
.accueil__coeur i{
  margin-top:2px; font-style:normal;
  font-family:var(--font-alt); font-size:8.5px; line-height:11px; color:var(--grey);
}

.accueil__vague{
  margin:13px 0 0; font-size:15px; line-height:19px; font-weight:800;
  color:var(--rose); letter-spacing:.005em;
}
.accueil__vague em{
  display:block; margin-top:2px; font-style:normal;
  font-family:var(--font-alt); font-size:9px; line-height:12px;
  color:var(--grey); letter-spacing:0;
}
.accueil__legende{
  display:block; margin:13px 0 5px;
  font-family:var(--font-alt); font-size:8.5px; line-height:11px; color:var(--grey);
}
.accueil__horloge{ width:100%; }
.accueil__cta{ margin-top:15px; width:100%; justify-content:center; padding:0 14px; }
.accueil__toutes{
  margin-top:9px; border:0; background:none; cursor:pointer;
  font-family:var(--font-alt); font-size:8.5px; color:var(--grey);
  text-decoration:underline; text-underline-offset:2px;
}
.accueil__toutes:hover{ color:var(--rose); }