/* ===========================================================================
   PAGE D'ACCUEIL PUBLIQUE — la vitrine.
   Ne connaît que les jetons. Aucune valeur en dur.
   =========================================================================== */

/* Fond : blanc cassé chaud, dégradé radial bleu TRÈS doux venant du coin
   supérieur droit. Rien d'agressif, aucune teinte jaune ni verte. */
.accueil {
  /* La vitrine remplace le corps de page : elle porte donc elle-même la
     colonne pleine hauteur qui pousse son pied en bas. `flex: 1 0 auto` sur
     le corps est posé plus bas, comme pour l'application. */
  min-height: 100vh;
  min-height: 100dvh;
  flex: 1 0 auto;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1100px 620px at 100% 0%,
                    var(--tab-bleu-tres-clair, #EAF2FB) 0%,
                    transparent 62%),
    var(--tab-fond, #FCFBF7);
}

/* ── Barre du haut ───────────────────────────────────────────────────────── */
.accueil__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tab-espace-2, 16px);
  padding: var(--tab-espace-2, 16px) var(--tab-marge-laterale, 32px);
  border-block-end: var(--tab-trait, 1px) solid var(--tab-bordure, #D9D9D4);
}

/* Les deux actions de la barre : la bascule de thème, puis « Insider ».
   Elles restent groupées à droite et s'alignent sur la même ligne de base. */
.accueil__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--tab-espace-2, 16px);
}

/* Pastille « Insider » : discrète, PAS dominante. Fond très clair, bordure
   légère, et une petite pastille bleue devant le mot. */
.insider {
  display: inline-flex; align-items: center; gap: var(--tab-espace-1, 8px);
  min-height: var(--tab-cible, 44px);
  padding-inline: var(--tab-espace-2, 16px);
  border-radius: var(--tab-rayon-pastille, 999px);
  background: var(--tab-insider-fond, #EAF2FB);
  border: var(--tab-trait, 1px) solid var(--tab-insider-bord, #5F8FC8);
  color: var(--tab-insider-texte, #111111);
  text-decoration: none; font-weight: 600;
  font-size: var(--tab-taille-petite, 0.8125rem);
}
.insider__point {
  width: 8px; height: 8px; border-radius: var(--tab-rayon-pastille, 999px);
  background: var(--tab-insider-point, #3F6FA9); flex: 0 0 auto;
}

/* ── Corps ───────────────────────────────────────────────────────────────── */
.accueil__corps {
  flex: 1 1 auto; position: relative;
  max-width: var(--tab-largeur-max, 1100px);
  margin-inline: auto; width: 100%;
  padding-inline: var(--tab-marge-laterale, 32px);
  padding-block: var(--tab-espace-4, 64px);
}

.bientot {
  display: flex; align-items: center; gap: var(--tab-espace-2, 16px);
  margin-block-end: var(--tab-espace-2, 16px);
}
.bientot__trait {
  width: 40px; height: 2px; flex: 0 0 auto;
  background: var(--tab-texte-secondaire, #666666);
}
.bientot__mot {
  font-size: var(--tab-taille-petite, 0.8125rem); font-weight: 700;
  letter-spacing: 0.22em; color: var(--tab-texte-secondaire, #666666);
}

.accroche { margin: 0 0 var(--tab-espace-3, 32px); }
.accroche__ligne1 {
  display: block;
  font-size: clamp(2rem, 7.2vw, 3.75rem);
  font-weight: 900; line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--tab-texte-principal, #111111);
}
/* Seconde ligne : italique SERIF bleu. C'est elle qui donne son ton à la page. */
.accroche__ligne2 {
  display: block;
  font-family: var(--tab-police-serif, Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: clamp(1.75rem, 6.4vw, 3.25rem);
  line-height: 1.12;
  color: var(--tab-bleu, #8DB3E2);
}

/* Le clin d'œil de l'accroche : une image Noto Emoji (mission « ergonomie »,
   lot C), à la hauteur d'une lettre de la ligne, comme l'était l'emoji. */
.accroche__icone { inline-size: 1em; block-size: 1em; }

.soutien { max-width: var(--tab-mesure, 72ch); margin-block-end: var(--tab-espace-3, 32px); }
.soutien__fort { font-weight: 700; color: var(--tab-texte-principal, #111111); }
.soutien__gris { color: var(--tab-texte-secondaire, #666666); }

/* ── Zone d'inscription ──────────────────────────────────────────────────── */
.inscription { max-width: 34rem; }
.inscription__rang { display: flex; gap: var(--tab-espace-1, 8px); align-items: stretch; }
.inscription__champ { flex: 1 1 auto; min-width: 0; }
.inscription__champ input {
  border-radius: var(--tab-rayon, 10px);
  border-color: var(--tab-bordure, #D9D9D4);
}
/* Bouton plein, en BLEU PROFOND : c'est le seul appel à l'action de la page. */
.inscription__bouton {
  flex: 0 0 auto;
  background: var(--tab-bleu-profond, #3F6FA9);
  color: var(--tab-sur-bleu-profond, #FFFFFF); border: 0;
  white-space: nowrap;
}

/* ── Tuiles décoratives ──────────────────────────────────────────────────── */
/* Quatre rectangles, tailles inégales, UNIQUEMENT dans la famille des bleus.
   Jamais de rouge, de jaune, de vert ni d'orange : ni logo Windows, ni Chrome. */
.deco {
  position: absolute; inset-inline-end: var(--tab-marge-laterale, 32px);
  inset-block-end: var(--tab-espace-4, 64px);
  display: grid; gap: var(--tab-espace-1, 8px);
  grid-template-columns: 96px 64px;
  grid-template-rows: 64px 96px;
  pointer-events: none;
}
.deco__case { border-radius: var(--tab-rayon-large, 16px); }
.deco__case--1 { background: var(--tab-bleu, #8DB3E2); }
.deco__case--2 { background: var(--tab-bleu-moyen, #A9C7EA); }
.deco__case--3 { background: var(--tab-bleu-clair, #C9DCF3); }
.deco__case--4 { background: var(--tab-bleu-tres-clair, #EAF2FB); }

/* ── Téléphone : 320, 375, 390 px ────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Le champ et le bouton passent l'un SOUS l'autre : côte à côte, à 320 px,
     le bouton écrase le champ jusqu'à le rendre inutilisable. */
  .inscription__rang { flex-direction: column; }
  .inscription__bouton { width: 100%; }
  /* Les tuiles décoratives sortent du flux absolu et se rangent DESSOUS :
     laissées en absolu, elles poussent hors de l'écran et créent le
     débordement horizontal que la recette interdit. */
  .deco {
    position: static; margin-block-start: var(--tab-espace-4, 64px);
    grid-template-columns: 72px 48px;
    grid-template-rows: 48px 72px;
    justify-content: end;
  }
  .accueil__corps { padding-block: var(--tab-espace-3, 32px); }
}