/* Styles propres à index_qcm.php, sortis de la page le 2026-09-21 : la CSP n'autorise plus
   les blocs <style> en ligne (style-src-elem 'self'). Chargé par la page, à la place du bloc. */
/* Héros de la page d'accueil */
.hero {
    text-align: center;
    /* Haut réduit : le nom vient juste sous le bandeau, le reste garde son air */
    padding: 1.4rem 1rem 3rem;
    animation: fadeUp .6s var(--ease) both;
}

.hero-wordmark {
    font-size: 2.4rem;
    margin: 0 0 2.6rem;   /* séparé du reste du hero */
    line-height: 1;
}

.hero .title {
    font-size: clamp(2rem, 4.5vw, 2.7rem);
    max-width: 22ch;
    margin: 0 auto .5rem;
}

.hero .subtitle {
    margin: 0 auto;
    font-size: 1.1rem;
    max-width: 58ch;
    color: #3a414c;   /* entre le gris lisible et le texte courant, pour ce paragraphe seul */
}

.hero-actions {
    display: flex;
    gap: .8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
    /* Sur téléphone le bouton fait toute la largeur (.btn, style.css) : son
       libellé suit le text-align hérité, centré dans le hero, à gauche dans
       la section Tarifs. Centré ici pour les deux. */
    text-align: center;
}

.hero-login-btn {
    padding: .45rem 1.1rem;
    min-height: 0;
    font-size: .9rem;
}

/* Argument d'inscription : le compte gratuit, juste sous les boutons */
.hero-free-note {
    max-width: 56ch;
    margin: 1.1rem auto 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--muted);
}

.hero-chips {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.25rem;
}

.hero-chip {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--primary);
    background: var(--primary-tint);
    border: 1px solid rgba(42, 92, 158,.18);
    border-radius: var(--pill);
    padding: .35rem .9rem;
}

/* Sections de la page d'accueil */
.land-section {
    padding: 3rem 0 0;
}

.land-head {
    text-align: center;
    margin-bottom: 2rem;
}

.land-head h2 {
    font-size: 1.6rem;
    letter-spacing: -.015em;
    margin: 0;
}

/* Cartes de modes retournables : la face avant reprend la carte de l'app,
   le survol (ou le toucher) la retourne pour montrer le détail du mode.
   Aucune navigation : la carte informe, les boutons convertissent. */
.modes-grid .flip-card {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    perspective: 1200px;
    cursor: default;
}

.modes-grid .flip-card::before { display: none; }

.modes-grid .flip-card:hover {
    transform: none;
    box-shadow: none;
    border: none;
}

.flip-inner {
    position: relative;
    height: 100%;
    min-height: 230px;
    transition: transform .6s var(--ease);
    transform-style: preserve-3d;
}

.flip-front,
.flip-back {
    position: relative;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 2rem 1.75rem 1.75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.flip-front::before,
.flip-back::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent);
    opacity: .55;
}

.flip-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
}

.flip-back::before { opacity: 1; }

.flip-back p {
    font-size: .9rem;
    line-height: 1.55;
}

.flip-hint {
    margin-top: auto;
    padding-top: .9rem;
    font-family: var(--font-mono);
    font-size: .65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    opacity: .8;
}

.flip-card.flipped .flip-inner,
.flip-card:focus-visible .flip-inner {
    transform: rotateY(180deg);
}

@media (hover: hover) {
    .flip-card:hover .flip-inner {
        transform: rotateY(180deg);
    }
}

@media (hover: none) {
    .modes-grid .flip-card { cursor: pointer; }
}

@media (prefers-reduced-motion: reduce) {
    .flip-inner { transition: none; }
}

/* Méthode */
/* Flex plutôt que grid : une dernière rangée incomplète reste centrée */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.feature-card {
    flex: 1 1 240px;
    max-width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
}

.feature-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
}

.feature-card p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

/* Équipe & tarifs */
.land-team-text,
.land-pricing-text {
    max-width: 62ch;
    margin: 0 auto;
    text-align: center;
    color: var(--text);
    line-height: 1.7;
}

.land-pricing-text .num {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--primary);
    white-space: nowrap;
}

/* Note d'indépendance : une ligne sobre, le détail vit dans les CGU */
.land-disclaimer {
    max-width: 68ch;
    margin: 4rem auto 0;
    text-align: center;
    font-size: .85rem;
    color: var(--muted);
    line-height: 1.6;
}

.land-disclaimer a {
    color: var(--primary);
}

@media (max-width: 640px) {
    .hero { padding: 1rem .5rem 2rem; }
    .hero-wordmark { margin-bottom: 2rem; }
    .land-section { padding: 2.25rem 0 0; }
    .land-head h2 { font-size: 1.35rem; }
}