/* =========================================================
   Dana — Architecture d'intérieur
   Feuille de style principale
   ========================================================= */

/* ---------- Polices auto-hébergées ----------
   Aucun appel à Google Fonts : c'est plus rapide, et ça évite
   d'envoyer l'IP des visiteurs à un tiers (RGPD). */

@font-face {
  font-family: 'Just Breathe';
  src: url('/assets/fonts/just-breathe.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variables de design ----------
   Les valeurs du handoff, centralisées ici : on les change
   à un seul endroit pour tout le site. */

:root {
  --couleur-fond: #f8f9fa;
  --couleur-orange: #ed6033;
  --couleur-orange-survol: #d24d22;
  --couleur-quadrillage: rgba(31, 24, 192, 0.1);

  --maille: 70px;

  --police-titre: 'Just Breathe', cursive;
  --police-texte: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ---------- Réinitialisation minimale ---------- */

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

html {
  /* Empêche iOS d'agrandir les textes en paysage. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  color: var(--couleur-orange);
  background-color: var(--couleur-fond);

  /* Quadrillage : deux dégradés qui ne produisent qu'un trait de 0,6px,
     répétés tous les 70px. `fixed` garde la grille immobile au scroll. */
  background-image:
    linear-gradient(to right,  var(--couleur-quadrillage) 0.6px, transparent 0.6px),
    linear-gradient(to bottom, var(--couleur-quadrillage) 0.6px, transparent 0.6px);
  background-size: var(--maille) var(--maille);
  background-position: 0 0;
  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   Page « Coming soon »
   ========================================================= */

.coming-soon {
  position: relative;
  min-height: 100vh;
  /* Unité moderne : sur mobile, 100vh passe sous la barre du navigateur,
     100dvh tient compte de sa hauteur réelle. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 27vh 24px 0;
}

.coming-soon__title {
  margin: 0;
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 92px);
  line-height: 1.1;
  color: var(--couleur-orange);
  text-align: center;
}

/* ---------- Les trois points ---------- */

.dots {
  font-size: 1.5em;
  line-height: 0;
  margin-left: 0.04em;
  white-space: nowrap;
}

.dots__dot {
  opacity: 0;   /* état de départ : aucun point visible */
}

.dots__dot::before {
  content: '.';
}

/* Classe posée par main.js : le point devient visible.
   Volontairement sans transition — l'apparition doit être nette. */
.dots__dot--visible {
  opacity: 1;
}

/* Si le visiteur a demandé à réduire les animations, on affiche
   les trois points en permanence plutôt que de les faire clignoter. */
@media (prefers-reduced-motion: reduce) {
  .dots__dot {
    opacity: 1;
  }
}

/* ---------- Logo + baseline, en bas de page ---------- */

.brand {
  position: absolute;
  bottom: clamp(40px, 8vh, 72px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(150px, 20vw, 240px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: var(--couleur-orange);
}

.brand__logo {
  display: block;
  width: 100%;
  height: auto;
}

.brand__baseline {
  margin: 0.5em 0 0;
  width: 100%;
  font-family: var(--police-texte);
  font-weight: 500;
  font-size: clamp(8px, 1.02vw, 12.2px);
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}