/* ============================================================
   1. Variables
   ============================================================ */

:root {
  /* Couleurs de fond — alignées sur l'identité de marque officielle */
  --couleur-fond-profond   : #0A0E1A;
  --couleur-fond-sombre    : #1A2238;

  /* Couleurs d'accent — alignées sur l'identité de marque officielle */
  --couleur-orange         : #FF9900;
  --couleur-orange-clair   : #FFB347;
  --couleur-orange-subtil  : rgba(255, 153, 0, 0.25);
  --couleur-amber          : #FFB800;

  /* Couleurs de texte */
  --couleur-texte          : #F8FAFC;
  --couleur-texte-secondaire : #94A3B8;
  --couleur-texte-discret  : #64748B;

  /* Couleurs d'interface */
  --couleur-bordure        : rgba(148, 163, 184, 0.10);
  --couleur-grille         : rgba(148, 163, 184, 0.05);

  /* Typographies */
  --police-principale      : 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --police-mono            : 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Source Code Pro', monospace;

  /* Espacements (valeurs fixes — utilisées pour les marges horizontales
     et tout ce qui n'a pas besoin de s'adapter à la hauteur du viewport) */
  --espace-xs              : 0.5rem;
  --espace-s               : 1rem;
  --espace-m               : 1.5rem;
  --espace-l               : 2.5rem;
  --espace-xl              : 4rem;

  /* Marges verticales adaptatives — se compriment sur écrans courts,
     plafonnent aux valeurs fixes ci-dessus sur grands écrans.
     Chaque variable : clamp(minimum, valeur fluide en vh, maximum). */
  --vmarge-s               : clamp(0.75rem, 2vh, 1rem);
  --vmarge-m               : clamp(1rem,    3vh, 1.5rem);
  --vmarge-l               : clamp(1.25rem, 4vh, 2.5rem);
  --vmarge-xl              : clamp(1.5rem,  5vh, 4rem);

  /* Rayons */
  --rayon-s                : 4px;
  --rayon-m                : 8px;
  --rayon-pill             : 9999px;

  /* Transitions */
  --transition-standard    : 0.3s ease;
  --transition-rapide      : 0.15s ease;
}


/* ============================================================
   2. Reset et base
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--police-principale);
  font-weight: 400;
  line-height: 1.5;
  color: var(--couleur-texte);
  background-color: var(--couleur-fond-profond);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   3. Layout général
   ============================================================ */

.page-attente {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Padding vertical fluide pour écrans courts, horizontal stable */
  padding: clamp(var(--espace-s), 3vh, var(--espace-m)) var(--espace-m);
  /* overflow-x uniquement : permet le scroll vertical en cas de
     débordement extrême (ex : zoom navigateur poussé). */
  overflow-x: hidden;
}

.conteneur-central {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 640px;
  width: 100%;
}


/* ============================================================
   4. Arrière-plans décoratifs
   ============================================================ */

/* Grille légère en fond */
.arriere-plan-grille {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--couleur-grille) 1px, transparent 1px),
    linear-gradient(to bottom, var(--couleur-grille) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
}

/* Halo orange diffus en arrière-plan */
.arriere-plan-cercle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  max-width: 120vw;
  max-height: 120vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(255, 153, 0, 0.06) 0%,
    rgba(255, 153, 0, 0.02) 30%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}


/* ============================================================
   5. Badge statut
   ============================================================ */

.badge-statut {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  padding: 0.4rem 0.9rem;
  background-color: rgba(26, 34, 56, 0.6);
  border: 1px solid var(--couleur-orange-subtil);
  border-radius: var(--rayon-pill);
  margin-bottom: var(--vmarge-l);
  backdrop-filter: blur(8px);
}

.badge-point {
  width: 8px;
  height: 8px;
  background-color: var(--couleur-orange);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 153, 0, 0.6);
  animation: pulsation 2s ease-in-out infinite;
}

.badge-texte {
  font-family: var(--police-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--couleur-orange);
  text-transform: uppercase;
}


/* ============================================================
   6. Tag code (décoration)
   ============================================================ */

.tag-code {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--police-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--couleur-texte-secondaire);
  margin-bottom: var(--vmarge-m);
  letter-spacing: 0.03em;
}

.tag-brackets {
  color: var(--couleur-orange);
}

.tag-nom {
  color: var(--couleur-texte-secondaire);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}


/* ============================================================
   7. Visuel central (SVG)
   ============================================================ */

.visuel-marque {
  /* Taille fluide : plafond 280 px sur écrans confortables,
     réduction proportionnelle à 30 vh sur écrans courts. */
  width: min(280px, 30vh);
  height: min(280px, 30vh);
  margin-bottom: var(--vmarge-l);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

.visuel-marque svg {
  width: 100%;
  height: 100%;
  display: block;
}

.visuel-groupe {
  transform-origin: center;
  animation: flottement 6s ease-in-out infinite;
}


/* ============================================================
   8. Titre principal
   ============================================================ */

.titre-principal {
  font-family: var(--police-principale);
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--vmarge-m);
  color: var(--couleur-texte);
}

.titre-principal .ligne {
  display: block;
}

.accent-orange {
  color: var(--couleur-orange);
  font-weight: 700;
}

.accent-blanc {
  color: var(--couleur-texte);
  font-weight: 700;
}


/* ============================================================
   9. Signature pro
   ============================================================ */

.signature-pro {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--couleur-texte-secondaire);
  margin-bottom: var(--vmarge-xl);
}

.separateur {
  display: inline-block;
  margin: 0 0.4em;
  color: var(--couleur-orange);
  font-weight: 600;
}


/* ============================================================
   10. Bloc contact
   ============================================================ */

.bloc-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-s);
}

.contact-intro {
  font-size: 0.9rem;
  color: var(--couleur-texte-secondaire);
  margin: 0;
}

.lien-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.6rem;
  background-color: rgba(255, 153, 0, 0.08);
  border: 1px solid var(--couleur-orange-subtil);
  border-radius: var(--rayon-m);
  font-family: var(--police-mono);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--couleur-orange);
  transition:
    background-color var(--transition-standard),
    border-color var(--transition-standard),
    transform var(--transition-rapide);
}

.lien-contact:hover,
.lien-contact:focus-visible {
  background-color: rgba(255, 153, 0, 0.15);
  border-color: var(--couleur-orange);
  color: var(--couleur-orange-clair);
  transform: translateY(-1px);
  outline: none;
}

.lien-contact:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.25);
}

.lien-contact-fleche {
  transition: transform var(--transition-standard);
}

.lien-contact:hover .lien-contact-fleche,
.lien-contact:focus-visible .lien-contact-fleche {
  transform: translateX(3px);
}


/* ============================================================
   11. Animations
   ============================================================ */

@keyframes pulsation {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

@keyframes flottement {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}


/* ============================================================
   12. Respect des préférences utilisateur
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .visuel-groupe,
  .badge-point {
    animation: none;
  }
}


/* ============================================================
   13. Responsive horizontal — tablette et au-delà
   ============================================================ */

/* La taille du visuel n'a plus besoin d'être pilotée par breakpoints :
   min(280px, 30vh) couvre déjà tous les cas. Ces media queries ne
   gèrent plus que les détails esthétiques liés à la largeur. */

@media (min-width: 768px) {

  .arriere-plan-grille {
    background-size: 100px 100px;
  }
}

@media (min-width: 1024px) {

  .signature-pro {
    font-size: 1rem;
  }
}


/* ============================================================
   14. Responsive — très petits écrans
   ============================================================ */

@media (max-width: 380px) {

  .badge-texte {
    font-size: 0.7rem;
  }

  .lien-contact {
    font-size: 0.8rem;
    padding: 0.8rem 1.2rem;
  }
}