/* Accueil The Good One — réglages propres à la landing.
   Promu depuis la page d'essai accueil-carte-essai.html le 20/10/2026 (décisions de Laurent).
   Tout le reste vient du socle : declic-system.css, page.css, friends-family.css, perso.css,
   parcours.css, carte-the-one.css, newsletter-essai.css. */

/* 1. Chargement : plus d'aplat bleu, la signature s'écrit sur la crème. */
.loader__flood { display: none !important; }
.loader__tagline { z-index: 6; }

/* 2. Le jaune des boutons et des mises en valeur devient une nuance de blanc. */
:root { --cta: #fdf9f3; --lime: #fdf9f3; --yellow: #fdf9f3; --fluo: #fdf9f3; }
.action, .tgo-carte-cta, .qr-card { border: 1px solid var(--ink) !important; }
.tgo-steps li { border-left: 3px solid transparent; }
.tgo-stage { box-shadow: 0 1px 0 var(--line); }
.hero-lead + .hero-lead { margin-top: 14px; }
.fl--big { line-height: 1.12 !important; }
.fl--big span,
.hero h1 .change,
.tgo-carte h2 mark {
  background: linear-gradient(var(--accent), var(--accent)) 0 58% / 100% .98em no-repeat !important;
  padding: 0 .08em !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@keyframes tgoStep {
  0%        { background: transparent; border-left-color: transparent; }
  2%, 23%   { background: #fdf9f3; border-left-color: var(--ink); }
  25%, 100% { background: transparent; border-left-color: transparent; }
}

/* 3. Marge gauche des textes descriptifs réduite de moitié sur ordinateur et tablette ;
   depuis le 21/10 (Laurent) ils vont jusqu'au bord droit, alignés avec le reste. */
@media (min-width: 901px) {
  .presentation-page .hero-lead,
  .presentation-page .tgo-know,
  .presentation-page .section-copy > p,
  .presentation-page .gateway-intro {
    width: auto;
    max-width: none;
    margin-left: calc((100% - min(67.5%, 820px)) / 2);
  }
  .presentation-page :is(.hero-lead, .section-copy > p, .gateway-intro) { max-width: none; }
}
/* La rubrique « Le club » reprend la colonne de texte du premier bloc : même départ, même largeur. */
.perso-page .statement .section-copy > p:not(.label) { max-width: none; }
/* Cartes de la rubrique « Le club » en blanc, sans teinte jaune (Laurent, 20/10). */
.perso-page .steps li { background: var(--white); }

/* 4. Le surlignage bleu suit les mots, jamais toute la largeur de la page : recette .hl du socle. */
.perso-page .statement h2 em.hl { display: inline; }
.perso-page .statement h2 { line-height: 1.12; }

@media (prefers-reduced-motion: reduce) {
  .tgo-steps li { animation: none !important; }
}

/* 5. Mobile : la marque sur une ligne, puis les deux actions côte à côte.
   Le socle masque le bouton principal sous 620 px ; sur l'accueil, la connexion
   et la participation à la bêta doivent rester visibles toutes les deux. */
@media (max-width: 620px) {
  .presentation-page .site-header {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 16px 22px;
  }
  .presentation-page .header-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .presentation-page .header-actions .action:not(.secondary) { display: inline-flex; }
  .presentation-page .header-actions .action {
    min-height: 48px;
    padding: 12px 10px;
    gap: 8px;
    justify-content: center;
    text-align: center;
  }
}

/* 6. En-tête sur ordinateur (23/10/2026) : cinq liens et deux actions ne tiennent sur une ligne qu'à partir de 1 400 px.
   En dessous, le menu se cassait en deux à cinq rangées ; il passe désormais sur sa propre ligne, centrée. */
.presentation-page .site-header nav { gap: clamp(16px, 1.6vw, 32px); flex-wrap: nowrap; white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1399px) {
  .presentation-page .site-header { grid-template-areas: "brand . actions" "nav nav nav"; row-gap: 12px; }
  .presentation-page .site-header .brand-lockup { grid-area: brand; }
  .presentation-page .site-header nav { grid-area: nav; justify-content: center; }
  .presentation-page .site-header > :is(.header-actions, .action) { grid-area: actions; }
}