/* ==========================================================================
   resilio-website / assets/styles/attente.css
   Mode « attente » — page d'accueil et pied de page réduit (intention 068).
   Toutes les couleurs, tailles et espacements passent par des tokens du design
   system (design-system.ho-oh-lore.css). Les valeurs qui n'ont pas de token sont
   déclarées ci-dessous en variables locales NOMMÉES et listées dans DESIGN.md § 7.
   ========================================================================== */

/* ⚠️ AJOUTÉ le 2026-09-21 — la page d'attente ne charge PAS Bootstrap : ses deux
   blocs CDN sont vidés pour elle seule. Or `base.html.twig` pose
   `d-flex flex-column min-vh-100` sur le <body> et `flex-grow-1` sur le <main> —
   des classes Bootstrap, donc INERTES ici. Sans elles, la page ne remplissait pas
   l'écran et le pied flottait au milieu du vide (constaté en rendu le 2026-09-21).

   On rend donc à cette page le peu de mise en page qu'elle empruntait, plutôt que
   de bricoler une hauteur fixe. Le sélecteur est scopé par `:has()` : `attente.css`
   est aussi chargé sur les pages légales du mode attente, QUI ONT Bootstrap — il ne
   doit surtout pas y redéfinir des utilitaires. */
body:has(.resilio-attente) {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
}

.resilio-attente {
  /* --- Valeurs sans token DS : nommées ici, jamais dispersées dans les règles.
         Chacune est reportée dans DESIGN.md § 7 « Tokens manquants ». --- */
  --attente-baseline-size-min: var(--font-size-h1);   /* 2rem = 32px ≈ les 30px de la source */
  --attente-baseline-size-fluid: 7vw;                 /* ← source ; aucun token fluide dans le DS */
  --attente-baseline-size-max: 4.5rem;                /* 72px ← source ; aucun token */
  --attente-baseline-line-height: 1.18;               /* ← source ; aucun token de line-height */
  --attente-baseline-tracking: -0.02em;               /* ← source ; --letter-spacing-tight absent */

  min-height: 0;        /* la hauteur vient du flex du <body>, voir le bloc ci-dessous */
  display: grid;
  place-items: center;
  padding: var(--spacing-xl) var(--spacing-sm);
  box-sizing: border-box;

  /* Source : linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%).
     #FFFFFF = --surface-color ; #F7F8FA ≈ --background-color (#F6F7F9, écart imperceptible). */
  background: linear-gradient(180deg, var(--surface-color) 0%, var(--background-color) 100%);
  font-family: var(--font-family-sans);
}

body:has(.resilio-attente) .resilio-attente {
  flex: 1 1 auto;
}

.resilio-attente-inner {
  text-align: center;

  /* ⚠️ CORRIGÉ le 2026-09-21 — `max-width: 20ch` vivait ICI, sans `font-size`.
     Or `ch` se calcule sur la police de L'ÉLÉMENT : ce conteneur héritant des
     ~16px du <body>, 20ch valait ~200px, quand la baseline enfant monte à 72px.
     Résultat mesuré : un mot par ligne, quatre lignes au lieu de deux.
     La contrainte descend donc sur la baseline, qui porte la bonne police. */
  max-width: 100%;
}

.resilio-attente-baseline {
  margin: 0 auto;

  /* `ch` se calcule sur la police de CET élément — celle du clamp ci-dessous.
     La baseline tient alors en deux lignes, comme dans la source. */
  max-width: 20ch;
  font-size: clamp(
    var(--attente-baseline-size-min),
    var(--attente-baseline-size-fluid),
    var(--attente-baseline-size-max)
  );
  line-height: var(--attente-baseline-line-height);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--attente-baseline-tracking);
  color: var(--primary-color);
  text-wrap: pretty;            /* amélioration progressive : ignorée si non supportée */
}

.resilio-attente-baseline-accent {
  /* Géométrie du cycle 065 (D-08) conservée ; 3e stop changé sur décision A-2
     du 2026-09-18 (tokens uniquement + AA). Minimum BALAYÉ sur 1001 points,
     fond défavorable #F7F8FA : 6,90:1 — voir DESIGN.md § 6.3.
     --text-on-accent-bg est SÉMANTIQUEMENT le bon token : « couleur de texte
     lisible dérivée de l'accent ». Ne pas le remplacer par --accent-color
     (2,85:1) ni par --accent-color-hover (4,24:1), tous deux sous le 4,5:1. */
  background-image: linear-gradient(
    95deg,
    var(--primary-color) 0%,
    var(--text-on-secondary-bg) 42%,
    var(--text-on-accent-bg) 100%
  );
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari exige encore le préfixe pour background-clip: text */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Sans ce bloc, le fragment en dégradé DISPARAÎT en contrastes forcés :
   `background-image` calcule à `none`, mais `-webkit-text-fill-color` n'est pas
   forcé et reste transparent. Garde-fou hérité du cycle 065 — à ne jamais retirer. */
@media (forced-colors: active) {
  .resilio-attente-baseline-accent {
    -webkit-text-fill-color: currentcolor;
    background-image: none;
  }
}

.resilio-attente-statut {
  margin: var(--spacing-md) 0 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--text-primary-color);   /* 15,12:1 — voir DESIGN.md § 6.2 */
  text-wrap: pretty;
}

/* --- Pied de page du mode attente (voir DESIGN.md § 2.5) ------------------- */
.resilio-attente-footer {
  border-top: 1px solid var(--border-color);
  background-color: var(--surface-color);

  /* ⚠️ CORRIGÉ le 2026-09-21 — `margin-top: auto` supposait un parent flex, donc
     le `d-flex flex-column min-vh-100` de Bootstrap. Bootstrap étant coupé sur
     cette page, il ne collait rien et le pied flottait sous un <main> trop court.
     Le <main> occupant désormais 100dvh à lui seul, le pied se place après lui
     naturellement, sans dépendre d'aucune classe utilitaire. */
  padding: var(--spacing-sm);
}

.resilio-attente-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;   /* texte à gauche, lien à droite (décision 2026-09-18) */
  gap: var(--spacing-sm);
  font-size: var(--font-size-small);

  /* --text-primary-color, jamais --text-secondary-color : leçon du cycle 064. */
  color: var(--text-primary-color);
}

.resilio-attente-footer-inner a {
  color: var(--text-primary-color);
  text-decoration: underline;     /* seul lien de la page : il doit se voir sans la couleur (WCAG 1.4.1) */
  text-underline-offset: 0.2em;
}

.resilio-attente-footer-inner a:hover { text-decoration-thickness: 2px; }

.resilio-attente-footer-inner a:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Cœur du pied d'attente (SVG en ligne — CA-48, plus de Bootstrap Icons sur cette
   page). Même token que .footer-heart (components.css) : couleur par token, jamais
   en dur. */
.resilio-attente-heart {
  display: inline-block;
  vertical-align: -0.125em;
  color: var(--footer-heart-color);
}

/* 575px en em — accessibilité au zoom, forme reprise de maintenance.css:136.
   En dessous, space-between collerait les deux éléments à gauche, chacun seul
   sur sa ligne : l'alignement à droite n'aurait plus de sens. */
@media (width <= 35.9375em) {
  .resilio-attente-footer-inner {
    justify-content: center;
    text-align: center;
  }
}

/* Aucune animation, aucune transition sur cette page :
   rien à neutraliser sous prefers-reduced-motion. */