/* ===========================================================================
   ACCUEIL ÉPURÉ (mission « accueil 03 », 15/10/2026). Chargée APRÈS
   `accueil.css`, qu'elle ne modifie pas : la barre, l'accroche et le champ
   « Me tenir au courant » gardent leur dessin. Reprend de
   `accueil-allegee.css` (mission 02, restée en place pour la copie
   `accueil_allegee.html`) le message d'état, la phrase et les marges du
   téléphone ; ajoute la ligne d'aide, le logo de tuiles en 3D et l'encart
   « Vous voulez en savoir plus ? ». Que des jetons.
   =========================================================================== */

/* Le THÈME SOMBRE : le fond uni du thème, sans le dégradé du haut. Défaut
   d'`accueil.css` constaté le 15/10/2026 sur téléphone : son dégradé garde un
   bleu très CLAIR (`--tab-bleu-tres-clair` ne change pas de nuit), et le
   message d'état, gris clair, s'y perdait. `accueil.css` n'est pas touchée :
   l'accueil d'avant garde son défaut (rapport 75). */
:root[data-theme="sombre"] .accueil { background: var(--tab-fond, #14171A); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .accueil { background: var(--tab-fond, #14171A); }
}

/* LE VIDE SOUS LE LOGO, SA CAUSE (mission « accueil 04 », 15/10/2026).
   `accueil.css` donne à `.accueil` toute la hauteur de l'écran
   (`min-height: 100vh`) pour pousser SON pied en bas, et à `.accueil__corps`
   un `flex: 1 1 auto` : tout l'espace en trop allait dans le corps, donc
   entre le logo (fin du corps) et l'encart. Mesuré : 64 px sur un téléphone
   de 390 × 844, 150 px sur une tablette de 768 × 1024, davantage sur un écran
   plus haut. Le pied de l'accueil est désormais le pied commun, enfant direct
   de <body> et ancré par le mécanisme du référentiel : l'accueil n'a plus à
   remplir l'écran ni le corps à s'étirer, et l'espace libre va au-dessus du
   pied. `accueil.css` reste intacte. */
.accueil { min-height: 0; }
.accueil .accueil__corps { flex: none; }

/* Le message d'état, à la place de « BIENTÔT. » (repris de la mission 02). */
.etat-acces {
  display: flex;
  align-items: center;
  gap: var(--tab-espace-2, 16px);
  margin-block: 0 var(--tab-espace-2, 16px);
  font-size: var(--tab-taille-petite, 0.8125rem);
  font-weight: 700;
  color: var(--tab-texte-secondaire, #666666);
}
.etat-acces__trait {
  flex: none;
  inline-size: var(--tab-espace-3, 32px);
  block-size: calc(var(--tab-trait, 1px) * 2);
  background: var(--tab-texte-secondaire, #666666);
}

/* La phrase sous le titre (reprise de la mission 02). */
.accueil-phrase {
  max-width: var(--tab-mesure, 72ch);
  font-size: var(--tab-taille-moyenne, 1.125rem);
  color: var(--tab-texte-secondaire, #666666);
  margin-block: 0 var(--tab-espace-3, 32px);
}

/* La ligne d'aide, sous le champ et son bouton. */
.inscription .inscription__aide { margin-block: var(--tab-espace-1, 8px) 0; }

/* ── Le logo de tuiles en 3D ─────────────────────────────────────────────── */
/* À l'emplacement exact des quatre carrés d'avant (`.deco` de `accueil.css`) :
   en position absolue, à droite du corps, à la même distance du bas, ce qui
   le met à mi-hauteur sur un grand écran. Sa largeur est un multiple de
   l'échelle d'espacement ; sa hauteur suit le dessin (rapport 261,5 × 102,4). */
.logo-tuiles {
  position: absolute;
  inset-inline-end: var(--tab-marge-laterale, 32px);
  inset-block-end: var(--tab-espace-4, 64px);
  inline-size: calc(var(--tab-espace-4, 64px) * 4);
  pointer-events: none;
}
.logo-tuiles img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* ── L'encart « Vous voulez en savoir plus ? » ───────────────────────────── */
/* Même colonne que le corps de l'accueil (largeur maximale, marges
   latérales), et dans cette colonne, un encadré de la largeur de la mesure de
   lecture, aligné sur le texte au-dessus. Tout est centré DANS l'encadré : la
   question, puis le bouton, à égale distance des bords. */
.encart-savoir {
  max-width: var(--tab-largeur-max, 1100px);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--tab-marge-laterale, 32px);
  padding-block: 0 var(--tab-espace-4, 64px);
}
.encart-savoir__cadre {
  max-width: var(--tab-mesure, 72ch);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tab-espace-2, 16px);
  text-align: center;
}
.encart-savoir__titre {
  margin: 0;
  font-size: var(--tab-taille-titre, 1.5rem);
}

/* ── Tablette et téléphone ───────────────────────────────────────────────── */
/* Sous 900 px, le logo en position absolue passerait sous le champ et sa
   ligne d'aide (mesuré dans Chromium, `scripts/accueil03_mesures.py`) : il
   rejoint le flux, SOUS le formulaire, calé à droite comme l'étaient les
   carrés, et réduit d'un quart. Il ne repousse donc jamais le champ ni son
   bouton, qui restent visibles sans défiler. */
@media (max-width: 900px) {
  .logo-tuiles {
    position: static;
    margin: var(--tab-espace-3, 32px) 0 0 auto;
    inline-size: calc(var(--tab-espace-4, 64px) * 3);
    max-inline-size: 100%;
  }
}

/* Téléphone : les marges de la mission 02, resserrées d'un cran, et le trait
   du message d'état retiré sous 400 px. Le logo y est un peu plus grand
   (160 px au lieu de 120) et CENTRÉ sous le champ (mission « accueil 04 ») ;
   il reste sous le formulaire, donc ne repousse ni le champ ni son bouton. */
@media (max-width: 720px) {
  .logo-tuiles {
    margin-inline: auto;
    inline-size: calc(var(--tab-espace-3, 32px) * 5);
  }
  .accueil .accueil__corps { padding-block: var(--tab-espace-2, 16px) var(--tab-espace-3, 32px); }
  .accueil .accroche { margin-block-end: var(--tab-espace-2, 16px); }
  .accueil-phrase {
    font-size: var(--tab-taille-base, 1rem);
    margin-block-end: var(--tab-espace-2, 16px);
  }
  .encart-savoir__titre { font-size: var(--tab-taille-moyenne, 1.125rem); }
}
@media (max-width: 400px) {
  .etat-acces__trait { display: none; }
}