/* Styles propres à l'accueil */
.accroche { padding-top: 72px; padding-bottom: 56px; text-align: center; }
.accroche h1 { font-size: clamp(2.4rem, 7vw, 4.2rem); line-height: 1.25; margin-bottom: .55em; }
/* Une seule police (Oxanium) ; « L'homme » s'écrit à la plume, « la machine » se construit en glitch */
.accroche .homme { color: var(--titre-homme, var(--accent)); }
.accroche .esperluette { padding: 0 .04em; color: var(--titre-esperluette, var(--accent)); }
.accroche .machine { color: var(--titre-machine, var(--accent)); }  /* une couleur par mot selon la charte (zen) */
/* Le soulignement de l'accroche : un trait bleu, blanc, rouge qui se dessine de gauche à droite, une fois « la machine » construite (animations.css : html.anime) */
.accroche .souligne { position: relative; display: inline-block; padding-bottom: .12em; }
.accroche .souligne::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--souligne-1, var(--accent)) 0 30%, var(--souligne-2, var(--accent)) 45% 55%, var(--souligne-3, var(--accent)) 70% 100%);   /* bleu, blanc, rouge en dégradé */
}

.portes { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.porte {
  display: flex; flex-direction: column; gap: 8px;
  padding: 36px 32px; text-decoration: none;   /* fond, liseré et survol : .bloc (base.css) */
}
.porte h2 { font-size: 1.5rem; margin: 0; text-align: center; }
.porte p { margin: 0; color: var(--encre-douce); flex: 1; }
/* Game, notre produit principal, au centre : un cadre plus lumineux */
.porte-phare::after { --trait-or: var(--accent); }
.porte-phare { box-shadow: 0 0 48px var(--halo-leger); }

/* Page About */
.apropos { padding-top: 64px; max-width: 720px; text-align: center; }
.apropos h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); }
.recit { text-align: left; margin-top: 32px; padding: 44px 40px; }
.recit p { margin: 0 0 1.1em; font-size: 1.05rem; }
.recit p:last-of-type { margin-bottom: 0; }
.ornement {
  /* Séparateur art nouveau : un filet doré interrompu par un cercle au compas */
  border: 0; height: 18px; margin: 2em auto;
  background:
    radial-gradient(circle closest-side, transparent calc(100% - 3px), var(--trait-or) calc(100% - 2px), var(--trait-or) 99%, transparent 100%) center / 18px 18px no-repeat,
    linear-gradient(to right, transparent, var(--trait-or) 30%, var(--trait-or) calc(50% - 14px), transparent calc(50% - 14px), transparent calc(50% + 14px), var(--trait-or) calc(50% + 14px), var(--trait-or) 70%, transparent) center / 100% 2px no-repeat;
}
.phrase-cle {
  /* Phrase qui porte la vision : mise en avant entre deux filets dorés */
  margin: 1.8em 0; padding: 1.2em 0.5em; text-align: center;
  font-size: clamp(1.15rem, 2.6vw, 1.35rem); line-height: 1.5; font-style: italic; color: var(--encre-titre);
  border-top: 4px double var(--trait); border-bottom: 4px double var(--trait);
}
.phrase-cle-fin { display: inline-block; margin-top: .6em; letter-spacing: .04em; color: var(--accent-clair); }
.recit .signature { text-align: right; color: var(--encre-douce); font-style: italic; margin-top: 1.6em; }
@media (max-width: 500px) { .recit { padding: 36px 28px; } }