/* ============================================================
   CATHARSIS — attente.css
   Page d'attente (site/attente.html), servie à la racine tant que
   le bloc MODE ATTENTE est présent dans .htaccess.

   Elle ne charge ni layout.css ni components.css : elle en
   utiliserait cinq sélecteurs pour 25 Ko. Les quelques motifs
   repris (filet, honeypot, form-msg) sont redéclarés ici, à
   l'identique de components.css, et disparaîtront avec la page.

   La scène qui sert de fond est une photographie : voir le bloc
   « La pièce ». Les contrastes annoncés dans ce fichier sont
   mesurés au pixel sur le rendu final, voile compris — pas
   calculés sur les couleurs de la charte.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 7vw, 4.5rem) var(--gutter);
  font-family: var(--ff-texte);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.62;
  color: var(--ivoire-sur-bx);
  background: var(--bordeaux);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- La pièce ----------
   Photographie de la scène, servie en .jpg : la négociation de contenu du
   .htaccess sert le jumeau .webp (46-53 Ko) aux navigateurs qui l'annoncent,
   sans qu'aucune règle CSS ne change.

   Deux cadrages, choisis sur le RATIO de la fenêtre et non sur sa largeur :
   une tablette en portrait doit recevoir l'image verticale, pas l'horizontale
   rognée sur les côtés.

   Le voile par-dessus n'est pas décoratif. Le mur de la photo est plus clair
   que --bordeaux : sans lui, le texte en or clair tombe à 4,49:1, sous le
   minimum AA de 4,5. Il est dense au centre, là où le texte se pose, et
   s'efface vers les bords pour laisser voir les livres, la bougie et le
   velours — c'est le panneau sombre de la maquette de Kaëla, rendu en dégradé.

   La photo porte déjà son grain, et le JPEG ajoute le sien : le grain CSS qui
   simulait la pellicule a été retiré, deux grains superposés salissent l'écran. */

.ambiance {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../img/attente-portrait.jpg') center center / cover no-repeat;
}

@media (min-aspect-ratio: 1/1) {
  .ambiance { background-image: url('../img/attente-paysage.jpg'); }
}

.ambiance::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 80% at 50% 46%,
      rgba(46, 14, 18, .86) 0%,
      rgba(46, 14, 18, .82) 52%,
      rgba(46, 14, 18, .66) 72%,
      rgba(46, 14, 18, .34) 88%,
      rgba(46, 14, 18, .12) 100%),
    linear-gradient(rgba(46, 14, 18, .22), rgba(46, 14, 18, .22));
}

/* Le contenu passe devant la photo et son voile. */
.attente {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  text-align: center;
}

/* ---------- Signature ---------- */
.attente__etoile {
  width: 26px; height: 26px;
  margin: 0 auto 1.8rem;
  color: var(--or-clair);
  display: block;
}

.attente__logo {
  margin: 0;
  font-family: var(--ff-display);
  font-variation-settings: var(--fvs-display);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 3.1rem);
  line-height: 1;
  /* L'interlettrage large de la maquette pousse le mot vers la droite :
     la marge négative le recentre optiquement. */
  letter-spacing: .26em;
  margin-inline-start: .26em;
  color: var(--ivoire-sur-bx);
}

.attente__sur {
  margin: .7rem 0 0;
  font-style: italic;
  font-size: 1.08rem;
  letter-spacing: .18em;
  color: var(--or-clair);
}

/* ---------- Filets ---------- */
.filet {
  width: 64px; height: 1px;
  background: var(--or);
  border: 0;
  margin: 1.9rem auto;
}

/* ---------- Message ---------- */
.attente h1 {
  margin: 0;
  font-family: var(--ff-display);
  font-variation-settings: var(--fvs-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 5.2vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -.005em;
  color: var(--ivoire-sur-bx);
}

.attente__promesse {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.1rem, 3.2vw, 1.3rem);
  line-height: 1.5;
  color: var(--or-clair);
}

/* ---------- Formulaire ---------- */
.coulisses { margin-top: 2.2rem; }

.coulisses__champ {
  display: flex;
  max-width: 27rem;
  margin-inline: auto;
}

.coulisses__champ input {
  flex: 1;
  min-width: 0;               /* sans quoi un champ flex déborde sur mobile */
  font-family: var(--ff-texte);
  font-size: 1.05rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--or);
  border-right: 0;
  background: transparent;
  color: var(--ivoire-sur-bx);
}

/* opacity: 1 — Firefox éclaircit les placeholders par défaut, ce qui
   ferait tomber le contraste sous le seuil calculé (7,8:1). */
.coulisses__champ input::placeholder {
  color: color-mix(in srgb, var(--ivoire-sur-bx) 75%, var(--bordeaux));
  opacity: 1;
}

.coulisses__champ button {
  flex: 0 0 auto;
  min-width: 4.2rem;
  padding: .95rem 1.3rem;
  /* Pas de var(--ff-ui) ici : charger les 26 Ko de Jost pour une seule
     flèche serait absurde. La police système suffit à un glyphe. */
  font-size: 1.2rem;
  line-height: 1;
  border: 1px solid var(--or);
  background: var(--bourgogne);
  color: var(--or-clair);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.coulisses__champ button:hover:not(:disabled) {
  background: var(--or);
  color: var(--bordeaux);
}

.coulisses__champ button:disabled { opacity: .55; cursor: default; }

.coulisses__champ input:focus-visible,
.coulisses__champ button:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 2px;
}

.coulisses__consentement {
  max-width: 27rem;
  margin: 1.2rem auto 0;
  font-size: .95rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--ivoire-sur-bx);
}

.coulisses__consentement a { color: var(--or-clair); }
.coulisses__consentement a:hover { color: var(--ivoire-sur-bx); }

/* Honeypot — repris de components.css. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Retours de formulaire. Les variantes de components.css supposent un
   fond ivoire : sur bordeaux elles seraient illisibles, d'où ces
   versions en transparence. */
.form-msg {
  max-width: 27rem;
  margin: 1.4rem auto 0;
  padding: .9rem 1.1rem;
  font-size: 1.02rem;
  text-align: left;
}
.form-msg:empty { display: none; }
.form-msg--ok {
  background: color-mix(in srgb, var(--or) 18%, transparent);
  border-left: 3px solid var(--or-clair);
}
.form-msg--err {
  background: color-mix(in srgb, #E8B4B8 16%, transparent);
  border-left: 3px solid #E8B4B8;
}

/* ---------- Pied discret (page de confirmation) ---------- */
.attente__pied {
  margin: 2.6rem 0 0;
  font-size: .95rem;
  font-style: italic;
  color: color-mix(in srgb, var(--ivoire-sur-bx) 70%, var(--bordeaux));
}
.attente__pied a { color: var(--or-clair); }
.attente__pied a:hover { color: var(--ivoire-sur-bx); }