/* ==========================================================
   Simeal — la page d'attente, en gabarit WordPress.

   Reprise de 12-construction/construction.src.html, avec une différence
   qui commande tout le reste : ici on est DANS un site, pas seul dans un
   document. Deux conséquences :

   1. Aucune règle ne porte sur <body> ni sur :root. La page statique y
      redéfinissait --ground, --ink et le reste ; dans le thème, ces jetons
      appartiennent à la charte du site et les écraser repeindrait toutes
      les autres pages. Tout est donc porté par « .construction », qui se
      comporte en conteneur pleine page.

   2. Le canevas de fond et les polices sont déjà chargés par le thème :
      on ne les redéclare pas.

   Injecté dans le thème par 11-wordpress/construire-theme.py, qui l'écrit
   dans assets/css/construction.css. Ne pas modifier là-bas.
   ========================================================== */

.construction{
  /* Le conteneur remplace <body> : c'est lui qui occupe l'écran et centre.
     « min-height » et non « height » — sur un écran très bas, le contenu
     doit pouvoir dépasser plutôt qu'être coupé. */
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  padding:2rem 1.5rem;
  font-size:1.0625rem;line-height:1.6;

  /* La largeur du logotype. Une seule valeur à changer. */
  --logo-l:300px;
}

/* Le mode sombre de la page d'attente. La charte du site ne le porte plus
   (suspendu le 17/09/2026 : les nouvelles pages sont dessinées en clair) ;
   la page d'attente, en ligne depuis le 29/08, le garde tel quel. Les jetons
   vont sur la racine, comme avant, pour que le fond de la page suive. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):has(.construction){
    --ground:#0B0B12; --ink:#F3F3F8; --ink-2:#AFAFC2; --ink-3:#9494AC;
    --rule:#232336; --rule-strong:#3A3A54;
    --accent:#A98CFF; --accent-soft:#1B1630;
    --cta:#CFC3EC; --cta-ink:#0B0B12;
    --vert:#6FD3A3; --gris:#9494AC; --orange:#E0A45E;
  }
}
:root[data-theme="dark"]:has(.construction){
  --ground:#0B0B12; --ink:#F3F3F8; --ink-2:#AFAFC2; --ink-3:#9494AC;
  --rule:#232336; --rule-strong:#3A3A54;
  --accent:#A98CFF; --accent-soft:#1B1630;
  --cta:#CFC3EC; --cta-ink:#0B0B12;
  --vert:#6FD3A3; --gris:#9494AC; --orange:#E0A45E;
}

/* Une colonne par défaut ; deux quand il y a vraiment la place. */
.construction__bloc{
  position:relative;z-index:1;width:100%;max-width:60rem;
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
}
.construction__dit{display:flex;flex-direction:column;align-items:flex-start}
.construction__fig{max-width:18rem;width:100%}

/* Deux colonnes dans deux cas : au-delà de 900 px, et sur un écran large
   mais bas — un téléphone en paysage fait 667 × 375, où empiler ferait
   déborder la page alors qu'il y a toute la largeur voulue.
   Ce sélecteur est répété tel quel dans automate.js, via matchMedia. */
@media (min-width:901px), (min-width:640px) and (max-height:520px){
  .construction__bloc{
    grid-template-columns:1fr minmax(0,23rem);
    gap:clamp(2rem,6vw,4.5rem);
  }
  .construction__fig{max-width:none}
}

/* Le logotype est posé en masque : il prend l'encre du thème et reste donc
   lisible en clair comme en sombre. */
.construction__logo{
  display:block;width:min(var(--logo-l),78vw);height:auto;aspect-ratio:480/138;
  background:var(--ink);
  --trace:url(../img/logo-simeal.png);
  -webkit-mask:var(--trace) left center/contain no-repeat;
          mask:var(--trace) left center/contain no-repeat;
}

/* La ligne de métier tient sur UNE ligne quelle que soit la largeur : sa
   taille et son interlettrage suivent la fenêtre. Coupée en deux, une
   énumération de trois domaines se lit comme une liste inachevée. */
/* Sélecteur « .construction p.construction__metier » : deux classes et un
   type, soit un cran au-dessus de « .construction p » qui, sinon, impose sa
   colonne de 46 caractères. Combinée au nowrap, elle faisait sortir le texte
   de sa boîte.
   « p.construction__metier » ne suffisait pas : à spécificité égale, c'est
   l'ordre dans la feuille qui tranche, et « .construction p » vient après. */
.construction p.construction__metier{
  font-size:clamp(.6rem,2.05vw,.875rem);
  letter-spacing:clamp(.04em,.35vw,.13em);
  text-transform:uppercase;white-space:nowrap;
  color:var(--ink-3);font-weight:600;margin:1.25rem 0 0;max-width:none;
}

.construction__auto{display:block;margin:2rem 0 0;width:100%;height:auto}

.construction h1{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(1.375rem,4vw,1.75rem);line-height:1.2;
  margin:2rem 0 0;text-wrap:balance;
}
.construction p{margin:.75rem 0 0;color:var(--ink-2);max-width:46ch}
.construction a{color:var(--accent);text-underline-offset:3px}

.construction__contact{
  margin-top:1.75rem;padding-top:1.25rem;
  border-top:1px solid var(--rule);font-size:1rem;color:var(--ink-2);
}
.construction__contact strong{font-weight:600;color:var(--ink)}
/* L adresse est le seul element cliquable de la page : elle doit se viser
   au pouce. En ligne, elle faisait 21 px — sous le minimum de 24. */
.construction__contact a{display:inline-block;padding:.55rem 0;min-height:44px}

/* Petits écrans : les respirations sont calibrées pour une page large ;
   empilées sur 320 px de côté, elles s'additionnent et font déborder. */
@media (max-width:420px){
  .construction{padding:1.25rem}
  .construction__bloc{gap:1.5rem}
  .construction__metier{margin-top:1rem;letter-spacing:.1em}
  .construction__auto{margin-top:1.25rem}
  .construction h1{margin-top:1.25rem}
  .construction p{margin-top:.5rem}
  .construction__contact{margin-top:1.25rem;padding-top:1rem}
}

/* Écrans COURTS — un iPhone SE fait 667 px de haut, un vieil Android 568.
   Ce n'est pas la largeur qui manque, c'est la hauteur : une règle sur
   max-width ne les attrape pas. */
@media (max-height:700px) and (max-width:900px){
  .construction{--logo-l:230px}
  .construction__bloc{gap:1.25rem}
  .construction__metier{margin-top:.85rem}
  .construction h1{font-size:1.25rem;margin-top:1rem}
  .construction__auto{margin-top:1rem}
  .construction__contact{margin-top:1rem;padding-top:.85rem}
}

/* Le cas extrême : étroit ET court. Cette règle vient APRÈS la précédente,
   qu'elle recouvre en partie — dans l'autre ordre, la plus large
   écraserait la plus étroite. */
@media (max-height:600px) and (max-width:420px){
  .construction{--logo-l:200px}
  .construction__bloc{gap:1rem}
  .construction h1{font-size:1.15rem;margin-top:.85rem}
  .construction__contact{margin-top:.85rem;padding-top:.75rem}
}

/* Écran TRÈS bas, toutes largeurs — un téléphone en paysage fait 375 px de
   haut. La page passe en deux colonnes, mais la colonne de texte reste plus
   haute que l'écran : le rembourrage de 2 rem en haut et en bas suffit à
   faire déborder de 25 px. */
@media (max-height:520px){
  .construction{padding:1rem 1.5rem;--logo-l:200px}
  .construction__bloc{gap:1.25rem}
  .construction__metier{margin-top:.75rem}
  .construction h1{font-size:1.2rem;margin-top:.75rem}
  .construction p{margin-top:.5rem}
  .construction__contact{margin-top:.85rem;padding-top:.75rem}
}