/* LA PAGE D'ATTENTE (pause.php), et rien d'autre.
 *
 * Elle n'emprunte aux autres pages que leurs variables et le bouton : tout ce
 * qui suit est prefixe « pause- », donc rien ici ne peut deborder sur la
 * vitrine le jour ou elle se rallume. Les six neutres et l'accent viennent de
 * assets/shell.css : la page d'attente doit ressembler au site, pas a une
 * page d'erreur d'hebergeur. */

/* LE SHELL PLAFONNE A 440 px, ce qui convient a un formulaire de connexion et
 * etrangle une page qui n'a qu'un paragraphe a dire. On l'elargit ICI, sur la
 * classe de corps, plutot que de toucher a shell.css que neuf pages partagent. */
.pause-page .shell{ max-width:600px; }

.pause-bloc{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:20px; padding:8px 4px 40px;
}

/* LA LUEUR, derriere le logo et nulle part ailleurs. Elle donne un centre a
 * une page qui n'a presque rien a montrer, et c'est la meme couleur que
 * l'anneau du logo : on eclaire la marque, on n'ajoute pas un decor. */
.pause-marque{
  position:relative; display:grid; place-items:center;
  width:180px; height:180px; margin-bottom:-18px;
}
.pause-marque::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,.16) 0%, transparent 68%);
}
.pause-logo{ position:relative; width:104px; height:104px; }

/* LE TRAIT DIT LE CHANTIER, et c'est tout ce qu'il dit : un balayage lent de
 * six secondes, sans casque jaune ni engin de travaux.
 *
 * LE MOUVEMENT EST L'EXCEPTION, PAS LE DEFAUT, et c'est la convention du
 * dépôt (voir assets/timer.css). Une animation posée d'office puis éteinte
 * sous « reduced-motion » se déclenche quand même partout où la préférence
 * n'est pas lue ; déclarée dans « no-preference », elle n'existe que pour qui
 * n'a rien demandé. Sans elle, le trait est une barre pleine et discrète : la
 * page ne perd rien, elle cesse seulement de bouger. */
.pause-trait{
  width:min(240px, 64%); height:3px; border-radius:2px;
  background:var(--line); overflow:hidden;
}
.pause-trait i{
  display:block; width:100%; height:100%; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.55;
}
@keyframes pause-balai{
  0%   { transform:translateX(-120%); }
  100% { transform:translateX(380%); }
}
@media (prefers-reduced-motion: no-preference){
  .pause-trait i{ width:38%; opacity:1;
    animation:pause-balai 6s cubic-bezier(.45,0,.55,1) infinite; }
}

.pause-bloc h1{
  margin:2px 0 0; font-size:clamp(28px, 6.4vw, 40px); line-height:1.12;
  letter-spacing:-0.015em; text-wrap:balance;
}

.pause-fil{
  margin:0; max-width:40ch; font-size:17px; line-height:1.62;
  color:var(--text-dim); text-wrap:pretty;
}

/* LA PORTE. Encadree, parce qu'elle n'est pas un detail de bas de page : sans
 * elle, un athlete qui tape le nom du site n'a plus aucun chemin vers sa
 * programmation. */
.pause-porte{
  width:100%; margin-top:14px; padding:24px 20px;
  border:1px solid var(--line); border-radius:18px; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; gap:15px;
}
.pause-porte p{ margin:0; font-size:15px; line-height:1.5; color:var(--text-dim); }
.pause-porte .btn{ min-width:210px; }

@media (max-width:430px){
  .pause-bloc{ gap:17px; padding-bottom:32px; }
  .pause-marque{ width:140px; height:140px; margin-bottom:-14px; }
  .pause-logo{ width:84px; height:84px; }
  .pause-porte{ padding:20px 16px; }
}