/* ==========================================================================
   ELISTIA — PAGE D'ATTENTE « SITE EN CONSTRUCTION »

   Habille UNE seule page : site-en-construction.php, celle qu'on met en
   ligne toute seule pendant que le vrai site se construit.

   L'IDÉE : une plaque professionnelle, gravée, accrochée au mur du salon
   vide de la photo — comme les plaques à l'entrée des immeubles
   parisiens. La photo (un logement propre et lumineux, prêt à relouer)
   n'est pas un décor : c'est le résultat du travail d'ELISTIA.

   ▸ CETTE PAGE N'A PAS DE MODE SOMBRE, ET C'EST VOULU.
     C'est une affiche : elle doit être identique pour tout le monde, quel
     que soit le réglage du visiteur. Ses couleurs sont donc figées
     ci-dessous plutôt que reprises du nuancier qui bascule jour/nuit.
     (Même principe que --chip-dark-bg dans css/style.css, qui reste
     sombre dans les deux thèmes.)
   ========================================================================== */

.plaque-scene {
  /* Les DEUX valeurs sont voulues : 100vh d'abord pour les vieux
     navigateurs, 100svh ensuite pour les téléphones, où la barre
     d'adresse mange une partie de la hauteur et fait sauter la mise en
     page au moindre défilement. Le navigateur garde la dernière qu'il
     comprend. */
  min-height: 100vh;
  min-height: 100svh;

  /* Les couleurs de la plaque, figées.
     Ce sont exactement les valeurs de --green-900 et --gold-500 du MODE
     CLAIR (css/style.css). Elles sont recopiées ici, et non reprises par
     var(), pour que la plaque garde le même vert la nuit comme le jour. */
  --plaque-fond: #072E1C;   /* = --green-900 en mode clair */
  --plaque-or: #B08D3F;     /* = --gold-500                */
  --plaque-or-filet: rgba(176, 141, 63, .55);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 96px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   LA PHOTO — le logement prêt à relouer

   object-fit: cover = elle remplit tout l'écran sans jamais se déformer,
   quitte à être rognée. object-position: 50% 38% remonte le cadrage pour
   garder le MUR VIDE au centre de l'écran : c'est là que la plaque
   s'accroche, et c'est ce qui doit rester visible même sur un téléphone
   très étroit.

   Elle dérive très lentement (44 s pour un aller). Volontairement à la
   limite du perceptible : on ne doit pas voir un effet, seulement sentir
   que l'image est vivante.
   -------------------------------------------------------------------------- */
.plaque-scene__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  animation: photo-derive 44s ease-in-out infinite alternate;
}
@keyframes photo-derive {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* --------------------------------------------------------------------------
   LA PLAQUE

   Ce qui la rend physique, et pas « une carte sur une image » :

   1. Le filet or gravé, à 12px du bord — c'est le padding de .plaque qui
      crée cet espace, et la bordure de .plaque__cadre qui dessine le
      trait. Exactement le liseré d'une vraie plaque de laiton.
   2. L'ombre portée part vers la DROITE et vers le bas, parce que sur la
      photo la lumière vient de la fenêtre, à gauche. Une ombre centrée
      aurait immédiatement trahi le collage.
   3. Les deux ombres INTERNES (inset) : une ligne claire en haut à
      gauche, une ligne sombre en bas à droite. C'est ce biseau d'un seul
      pixel qui donne l'épaisseur du métal.
   -------------------------------------------------------------------------- */
.plaque {
  position: relative;

  /* Format volontairement PLUS LARGE QUE HAUT, et remonté (margin-bottom
     en vh) : c'est ce qui la fait lire comme une plaque accrochée au mur
     plutôt que comme un panneau posé devant la pièce. Une première
     version, carrée et centrée, débordait sur le canapé de la photo —
     et l'illusion tombait aussitôt. */
  width: min(640px, 100%);
  margin-bottom: 19vh;   /* laisse de l'air entre la plaque et le canapé */

  padding: 12px;                    /* la marge où vit le filet gravé */
  border-radius: 3px;               /* une plaque n'est presque pas arrondie */
  background: var(--plaque-fond);
  box-shadow:
    28px 34px 64px -22px rgba(12, 30, 20, .55),   /* ombre portée, vers la droite */
    0 2px 6px rgba(12, 30, 20, .18),
    inset 1px 1px 0 rgba(255, 255, 255, .16),     /* arête éclairée, en haut à gauche */
    inset -1px -1px 0 rgba(0, 0, 0, .40);         /* arête dans l'ombre, en bas à droite */
  animation: plaque-accrochage .9s cubic-bezier(.16, 1.1, .3, 1) .15s backwards;
}

/* L'unique animation d'entrée de la page : la plaque arrive légèrement de
   travers et se redresse, comme un cadre qu'on vient d'accrocher et qu'on
   remet droit. Le cubic-bezier dépasse volontairement 1 (le 1.1) : c'est
   ce petit dépassement qui donne le mouvement de balancier avant
   l'immobilité. */
@keyframes plaque-accrochage {
  from { opacity: 0; transform: translateY(-18px) rotate(-1.8deg); }
  to   { opacity: 1; transform: none; }
}

.plaque__cadre {
  border: 1px solid var(--plaque-or-filet);
  padding: 32px 38px 30px;
}

/* Ligne du haut — le seul endroit où la page dit qu'elle est provisoire.
   Grand interlettrage : c'est la typographie des plaques gravées. */
.plaque__statut {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--plaque-or);
}

/* Logo : c'est le fichier « sombre » qu'il faut ici. Son nom prête à
   confusion — il désigne le logo POUR fond sombre, donc le logo clair. */
.plaque__logo {
  width: 168px;
  max-width: 58%;
  margin: 20px 0 20px;
}

.plaque__activite {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
  max-width: 46ch;
}

/* Le filet qui s'efface vers la droite plutôt qu'un trait plein d'un bord
   à l'autre : il sépare sans couper la plaque en deux. */
.plaque__filet {
  height: 1px;
  margin: 22px 0 16px;
  background: linear-gradient(90deg, var(--plaque-or), rgba(176, 141, 63, 0));
}

.plaque__zone {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .60);
}

/* Dernière ligne de la plaque depuis le retrait des boutons de contact :
   plus de marge en bas, sinon la plaque a l'air de s'être vidée. */
.plaque__dispo {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   LES DEUX CONTACTS — ⚠️ EN RÉSERVE, PAS UTILISÉS ACTUELLEMENT

   Les boutons ont été retirés de la page le 06/08/2026 (coordonnées encore
   fictives). Ces règles sont GARDÉES EXPRÈS : le jour où le vrai numéro et
   la vraie adresse existent, il suffit de dé-commenter le bloc prévu dans
   site-en-construction.php et les boutons reviennent habillés. Ne pas les
   supprimer en croyant faire du ménage.

   Les boutons .btn--primary du site ne sont PAS réutilisables ici : ils
   sont vert foncé, et deviendraient invisibles sur une plaque vert foncé.
   (Le même piège est déjà documenté dans css/page.css pour la carte de
   forfait sur fond vert.) D'où ces deux boutons propres à la plaque.
   -------------------------------------------------------------------------- */
.plaque__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.plaque__lien {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* Pas d'icône dans ces deux boutons, volontairement : le numéro et
   l'adresse disent déjà ce qu'ils font, et une plaque gravée ne porte pas
   de pictogrammes. Techniquement, c'est aussi ce qui permet de laisser
   js/config-entreprise.js remplir le bouton entier (il en réécrit le
   texte, ce qui effacerait une icône placée dedans). */
.plaque__lien--principal { background: #fff; color: var(--plaque-fond); }
.plaque__lien--principal:hover { background: var(--plaque-or); color: #fff; }

.plaque__lien--second { border-color: rgba(255, 255, 255, .32); color: #fff; }
.plaque__lien--second:hover { border-color: var(--plaque-or); color: var(--plaque-or); }

/* Le cadre de focus du site est vert (css/style.css) : illisible sur la
   plaque vert foncé. On le repasse en blanc, uniquement ici. Le repère
   au clavier doit rester visible partout, y compris sur une affiche. */
.plaque a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   BAS DE PAGE — mentions légales

   Obligatoire même sur une page unique : un site professionnel accessible
   en France doit rendre ses mentions légales joignables (loi LCEN).
   Le texte est foncé, pas blanc : à cet endroit la photo montre un sol
   clair. Le léger voile blanc en dégradé garantit la lisibilité même si
   le cadrage change sur un autre écran.
   -------------------------------------------------------------------------- */
.plaque-legal {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 20px 16px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(7, 46, 28, .72);
  background: linear-gradient(to top, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0));
}
.plaque-legal a { text-decoration: underline; }
.plaque-legal a:hover { color: #072E1C; }
/* Une classe précise, et non « .plaque-legal span » : le millésime est
   lui aussi dans un <span> (celui que remplit config-entreprise.js), et
   une règle trop large lui collait la même marge des deux côtés. */
.plaque-legal__separateur { margin: 0 10px; }

/* ==========================================================================
   LES DOCUMENTS PROVISOIRES (mentions-legales-provisoires.php)

   Ces pages accompagnent la page d'attente. Elles sont AUTONOMES : ni
   includes/header.php ni includes/footer.php, sinon elles afficheraient
   le menu complet d'un site qui n'est pas ouvert.
   D'où ces quelques règles pour leur en-tête et leur pied minimalistes.
   ========================================================================== */
.doc-tete {
  padding: 26px 32px;
  border-bottom: 1px solid var(--line-200);
}
.doc-titre {
  font-size: clamp(26px, 3.2vw, 34px);
  margin-bottom: 8px;
}
.doc-pied {
  border-top: 1px solid var(--line-200);
  padding: 22px 32px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-500);
}
.doc-pied a { color: var(--green-800); text-decoration: underline; }
.doc-pied span { margin: 0 8px; }

/* LES PASSAGES À REMPLIR.
   Surlignés en jaune, en gras, entre crochets : trois signaux plutôt
   qu'un seul, parce qu'un texte de remplacement publié par erreur sur des
   mentions légales, c'est exactement ce qu'on cherche à éviter.
   Quand tout est rempli, cette règle ne sert plus à rien — mais elle ne
   gêne pas non plus : sans <span class="a-completer">, elle ne s'applique
   à rien. */
.a-completer {
  background: #FEF0C7;
  color: #7A5A10;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px dashed #D9B356;
}
.a-completer::before { content: "[ à compléter : "; font-weight: 400; }
.a-completer::after  { content: " ]"; font-weight: 400; }

/* --------------------------------------------------------------------------
   TÉLÉPHONE
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .plaque-scene { padding: 32px 16px 88px; align-items: flex-start; padding-top: 8vh; }
  /* Sur un écran étroit, la photo est fortement rognée : on recentre le
     cadrage sur le mur, plus haut, pour que la plaque reste posée dessus
     et non sur le canapé. */
  .plaque-scene__photo { object-position: 46% 30%; }
  /* La remontée en vh ne sert plus à rien ici (la plaque est déjà calée en
     haut) et ne ferait qu'ajouter du vide sous elle, au risque de faire
     défiler la page. */
  .plaque { margin-bottom: 0; }
  .plaque__cadre { padding: 30px 24px 28px; }
  .plaque__logo { width: 154px; margin: 20px 0 22px; }
  .plaque__contacts { flex-direction: column; align-items: stretch; }
  .plaque__lien { justify-content: center; }
}