/* =========================================================================
   LA PAGE 404 — components/PageIntrouvable.tsx

   Le décor vient de maintenance.css, tel quel : dégradé prune, halos, fils,
   grand losange de verre, fine ligne animée et son éclat blanc. Cette feuille
   n'ajoute que ce que la maintenance n'a pas : deux boutons, et une scène
   plus discrète sur téléphone.
   ========================================================================= */

.mnt--404 .mnt-p{max-width:46ch}

.mnt-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:clamp(24px,4vh,34px);
}
.mnt-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 22px;border-radius:12px;
  font:600 15px/1.2 Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-decoration:none;white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
/* Le bouton principal : clair sur le prune, comme les appels du site posés
   sur fond sombre. */
.mnt-btn--plein{
  color:#4A1230;background:#FFF6FA;
  box-shadow:0 10px 26px -14px rgba(255,214,234,.55);
}
.mnt-btn--plein:hover{transform:translateY(-1px);box-shadow:0 14px 30px -14px rgba(255,214,234,.7)}
/* Le secondaire : un trait nacré, transparent. */
.mnt-btn--trait{
  color:var(--mnt-clair);background:rgba(255,246,250,.06);
  border:1px solid rgba(255,217,236,.42);
}
.mnt-btn--trait:hover{background:rgba(255,246,250,.12);border-color:rgba(255,217,236,.7)}
.mnt-btn:focus-visible{outline:2px solid var(--mnt-nacre);outline-offset:3px}

.mnt--404 .mnt-piste{margin-top:clamp(26px,4.5vh,40px)}
.mnt--404 a.mnt-marque{color:inherit;text-decoration:none}

/* Téléphone : texte d'abord et bien lisible, décor discret. Le losange se
   fait petit et passe après les boutons ; le grand mot de fond et un fil
   sur deux disparaissent. Rien ne déborde : .mnt ferme déjà les deux axes. */
@media (max-width:920px){
  /* La maintenance cale sa scène en haut sur téléphone ; la 404, plus
     courte, se centre verticalement dans l'écran. */
  .mnt.mnt--404{align-items:center}
  .mnt--404 .mnt-marque{order:1}
  .mnt--404 .mnt-sur{order:2}
  .mnt--404 .mnt-t{order:3}
  .mnt--404 .mnt-p{order:4;margin-top:14px}
  .mnt--404 .mnt-actions{order:5;justify-content:center;margin-top:22px}
  .mnt--404 .mnt-joyau{order:6;width:clamp(84px,24vw,112px);margin:26px 0 0;opacity:.85}
  .mnt--404 .mnt-piste{order:7;margin-top:18px}
  .mnt--404 .mnt-decor__mot{display:none}
}
@media (max-width:420px){
  .mnt--404 .mnt-actions{flex-direction:column;align-items:stretch;width:100%;max-width:320px;margin-inline:auto}
  .mnt--404 .mnt-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .mnt-btn{transition:none}
  .mnt-btn:hover{transform:none}
}

/* =========================================================================
   LE PIED DE PAGE SUR LA 404 (21/10/2026)
   La 404 est une page autonome : elle ne charge ni style.css ni header.css.
   Le pied commun (footer.css) y retrouve ici ce qu'il prend d'elles
   ailleurs — la police, les marges de la grille, les liens, les listes, le
   texte réservé aux lecteurs d'écran — pour paraître exactement comme sur
   les autres pages.
   ========================================================================= */
:root{--grille-marge:32px;--grille-max:1400px}
@media (max-width:920px){:root{--grille-marge:16px}}
.footer,.footer *,.footer *::before,.footer *::after{box-sizing:border-box}
.footer{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.footer a{color:inherit;text-decoration:none}
.footer ul{margin:0;padding:0;list-style:none}
.footer h2,.footer p{margin:0}
.footer button{font-family:inherit}
.footer .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}