/* ============================================================
   AZURA — Le Concierge
   Maquette 12 : un seul écran, calme, sans défilement inutile.
   C'est la seule page qui fait quelque chose : elle enregistre.
   ============================================================ */

.co-page {
  min-height: 100vh; display: grid; align-items: center;
  grid-template-columns: 1fr 1fr; gap: 64px;
  padding: 140px 8% 80px; position: relative; overflow: hidden;
}
.co-filigrane {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: min(30vw, 380px); letter-spacing: .06em;
  color: var(--ink-hi); opacity: .045; pointer-events: none;
  user-select: none; white-space: nowrap; z-index: 0;
}
.co-txt { position: relative; z-index: 2; }
.co-txt h1 {
  font: 400 56px/1.1 var(--serif); letter-spacing: -.01em;
  color: var(--ink-hi); margin: 0;
}
.co-txt > p {
  font: 400 16px/1.6 var(--sans); color: var(--ink);
  margin: 26px 0 0; max-width: 46ch;
}

/* Le sélecteur de finition, discret : il pré-remplit la demande */
.co-finitions { display: flex; gap: 30px; margin: 40px 0 36px; }
.co-pastille {
  background: none; border: 0; cursor: pointer; display: grid;
  justify-items: center; gap: 9px; padding: 5px;
}
.co-pastille i {
  width: 24px; height: 24px; border-radius: 50%; display: block;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.5);
  transition: box-shadow 400ms;
}
.co-pastille span {
  font: 500 10px/1 var(--sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink2); transition: color 400ms;
}
.co-pastille[aria-pressed="true"] i {
  box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--cu), inset 0 1px 2px rgba(255,255,255,.35);
}
.co-pastille[aria-pressed="true"] span { color: var(--ink-hi); }

.co-form { display: grid; gap: 18px; max-width: 420px; }

/* Le bouton est un lien texte à flèche, jamais un bouton plein :
   le seul bouton plein de la page est Réserver, dans le header. */
.co-envoyer {
  display: inline-flex; align-items: center; gap: 14px;
  background: none; border: 0; cursor: pointer; padding: 8px 0;
  font: 500 11px/1 var(--sans); letter-spacing: .20em;
  text-transform: uppercase; color: var(--ink-hi);
  position: relative; justify-self: start;
}
.co-envoyer::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px;
  width: calc(100% - 44px); background: var(--cu);
  transform-origin: left; transform: scaleX(.3);
  transition: transform 450ms cubic-bezier(.22,.61,.36,1);
}
.co-envoyer:hover::after { transform: scaleX(1); }
.co-envoyer[disabled] { opacity: .4; cursor: default; }
.co-envoyer[disabled]::after { transform: scaleX(1); }

/* La flèche se transforme en trait qui se dessine, puis en coche */
.co-fleche { width: 30px; height: 12px; overflow: visible; flex: none; }
.co-fleche path {
  fill: none; stroke: var(--cu); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.co-fleche .trait { stroke-dasharray: 30; stroke-dashoffset: 0; transition: stroke-dashoffset 500ms; }
.co-fleche .pointe, .co-fleche .coche { transition: opacity 300ms; }
.co-fleche .coche { opacity: 0; }
.co-envoyer.envoi .trait { stroke-dashoffset: 30; animation: co-tracer 1.2s linear infinite; }
.co-envoyer.envoi .pointe { opacity: 0; }
.co-envoyer.fait .pointe, .co-envoyer.fait .trait { opacity: 0; }
.co-envoyer.fait .coche { opacity: 1; }
@keyframes co-tracer { from { stroke-dashoffset: 30 } to { stroke-dashoffset: -30 } }

/* Messages. Le « déjà inscrit » est en sable : ce n'est pas une erreur. */
.co-msg { font: 400 14px/1.5 var(--sans); color: var(--ink2); margin: 0; min-height: 1.5em; }
.co-msg.succes { color: var(--ink-hi); font-family: var(--serif); font-style: italic; font-size: 17px; }
.co-msg.deja { color: var(--ink); }
.co-msg.erreur { color: var(--ink); }

.co-consent {
  font: 400 11px/1.5 var(--sans); color: var(--ink2);
  margin: 6px 0 0; max-width: 46ch;
}
.co-consent a { border-bottom: 1px solid var(--line); }
.co-consent a:hover { border-bottom-color: var(--cu); }

/* La montre accompagne, elle n'occupe pas : la page sert à écrire */
.co-scene {
  position: relative; display: grid; place-items: center;
  perspective: 1600px; perspective-origin: 50% 44%; z-index: 1;
}
.co-scene .az-montre { max-width: 74%; }

@media (max-width: 980px) {
  .co-page { grid-template-columns: 1fr; padding: 110px 5% 60px; gap: 40px; }
  .co-txt h1 { font-size: 34px; }
  .co-scene { order: -1; }
  .co-scene .az-montre { max-width: 62%; }
  .co-filigrane { font-size: 44vw; }
}