/*
 * Site PUBLIC — `/`, `/demande-acces`, `/confidentialite` (ADR-011).
 *
 * Chargée par `PublicController` et `AccessRequestController` seulement : ni
 * l'espace parent ni le parcours enfant ne la reçoivent. Le socle (jetons,
 * boutons, animations, extinction du mouvement) vient de `theme.css`.
 *
 * ┌─ LE TON RESTE CELUI D'ADR-011 ─────────────────────────────────────────────┐
 * │ Colorer n'est pas vendre. Le CONTENU reste sobre et explicatif — aucun      │
 * │ compteur d'utilisateurs, aucun témoignage inventé, aucun « rejoignez des    │
 * │ milliers de familles », aucune statistique. Ce fichier ne touche qu'à la    │
 * │ mise en forme : c'est la présentation qui devient joyeuse, pas le propos    │
 * │ qui devient promotionnel.                                                  │
 * └────────────────────────────────────────────────────────────────────────────┘
 */

/* ==========================================================================
   Héros
   ========================================================================== */

.hero {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem 0 2.5rem;
}

.hero__title {
    font-size: clamp(2.2rem, 1.2rem + 4.2vw, 3.6rem);
    margin: 0.75rem 0 0.75rem;
}

/* Le mot qui porte la promesse, coloré. Jamais un dégradé sur le texte : à
   `background-clip: text`, un rendu qui échoue laisse le mot INVISIBLE. */
.hi {
    color: var(--violet);
}

.hero__lead {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
    color: var(--muted);
    max-width: 34rem;
    margin: 0 0 1.75rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1rem;
}

/* Étiquette d'âge : une pastille, pas une phrase. C'est la première chose
   qu'un parent cherche sur ce genre de page. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.9rem;
    border-radius: var(--r-pill);
    background: var(--sun-soft);
    color: var(--on-sun-soft);
    font-size: 0.92rem;
    font-weight: 700;
}

.pill--sky {
    background: var(--sky-soft);
    color: var(--on-sky-soft);
}

.pill--mint {
    background: var(--mint-soft);
    color: var(--mint-deep);
}

/* --- L'aperçu : une tablette dessinée en CSS -----------------------------
   Aucune capture d'écran : une image d'interface vieillit mal et mentirait au
   premier changement. Ce bloc est une MAQUETTE, faite des mêmes couleurs et
   des mêmes formes que l'écran réel — quand la palette change ici, l'aperçu
   change avec elle. */

.mock {
    position: relative;
    width: min(22rem, 100%);
    margin: 0 auto;
    padding: 1.1rem;
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 3px solid var(--line);
    box-shadow: var(--shadow-lg);
}

.mock__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    font-weight: 800;
    color: var(--ink);
}

.mock__bar span:first-child {
    font-size: 1.7rem;
    line-height: 1;
}

.mock__step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.5rem;
    border: 2px solid var(--line);
    border-radius: var(--r-md);
    font-weight: 600;
}

.mock__step span:first-child {
    font-size: 1.8rem;
    line-height: 1;
}

.mock__step--done {
    border-color: var(--mint);
    background: var(--mint-soft);
}

.mock__token {
    margin-left: auto;
    color: var(--sun-deep);
    font-size: 1.2rem;
}

/* Les astres qui flottent autour de la maquette. Purement décoratifs, donc
   `aria-hidden` dans le gabarit et `pointer-events: none` ici : ils ne doivent
   jamais intercepter un toucher destiné au bouton derrière eux. */
.floaters {
    position: absolute;
    inset: -1.5rem;
    pointer-events: none;
}

.floaters span {
    position: absolute;
    font-size: 2rem;
    filter: drop-shadow(0 4px 6px rgba(36, 31, 61, 0.15));
}

.floaters span:nth-child(1) { top: -0.5rem; left: -0.5rem; }
.floaters span:nth-child(2) { top: 22%; right: -1rem; }
.floaters span:nth-child(3) { bottom: 12%; left: -1.2rem; }
.floaters span:nth-child(4) { bottom: -0.8rem; right: 8%; }

/* Sur téléphone, la maquette occupe TOUTE la largeur utile : un astre posé à
   `-1.5rem` sort alors de l'écran et offre une barre de défilement horizontale
   — mesuré à 390 px, `scrollWidth` 396 pour `clientWidth` 375. Les décalages
   repassent donc à l'intérieur. C'est la correction À LA SOURCE ; le
   `overflow-x: clip` de `theme.css` n'est que le filet. */
@media (max-width: 560px) {
    .floaters {
        inset: 0;
    }

    .floaters span:nth-child(1) { top: -0.25rem; left: -0.25rem; }
    .floaters span:nth-child(2) { top: 20%; right: -0.25rem; }
    .floaters span:nth-child(3) { bottom: 12%; left: -0.25rem; }
    .floaters span:nth-child(4) { bottom: -0.25rem; right: 8%; }
}

@media (min-width: 880px) {
    .hero {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 3rem;
        padding: 2.5rem 0 3.5rem;
    }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
    margin: 3rem 0;
}

.section__title {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    margin: 0 0 0.4rem;
}

.section__intro {
    color: var(--muted);
    max-width: 42rem;
    margin: 0 0 1.5rem;
}

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* Carte de fonctionnalité : un emoji large en guise d'icône — le même langage
   visuel que celui de l'enfant, une page plus loin. */
.feature {
    padding: 1.4rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 2px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-mid) ease, box-shadow var(--t-mid) ease,
        border-color var(--t-mid) ease;
}

.feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
}

.feature__icon {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 0.6rem;
}

.feature__title {
    font-size: 1.15rem;
    margin: 0 0 0.35rem;
}

.feature p {
    margin: 0;
    color: var(--muted);
}

/* --- Les quatre gestes de l'enfant --------------------------------------- */

.steps {
    counter-reset: mr-step;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.steps li {
    position: relative;
    padding: 2.4rem 1.2rem 1.2rem;
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 2px solid var(--line);
}

.steps li::before {
    counter-increment: mr-step;
    content: counter(mr-step);
    position: absolute;
    top: -1rem;
    left: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 800;
}

.steps li p {
    margin: 0;
}

.steps li:nth-child(2)::before { background: var(--sky); }
.steps li:nth-child(3)::before { background: var(--mint); }
.steps li:nth-child(4)::before { background: var(--sun); color: var(--on-sun); }

/* --- L'encadré « sur invitation » ---------------------------------------- */

.notice {
    padding: 1.5rem;
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    border: 2px solid var(--accent);
}

.notice h2 {
    margin-top: 0;
}

.notice p:last-child {
    margin-bottom: 0;
}

/* --- La bande d'appel finale ---------------------------------------------- */

.cta {
    margin: 3.5rem 0 1rem;
    padding: 2.5rem 1.5rem;
    border-radius: var(--r-xl);
    text-align: center;
    color: var(--on-accent);
    /* Les DEUX extrémités du dégradé portent du texte blanc, donc les deux
       doivent le supporter. Le ciel clair d'origine y descendait à 2,30:1 —
       l'extrémité droite de la bande était illisible sans qu'aucune règle CSS
       ne paraisse fautive, le contraste d'un dégradé ne se lisant nulle part.
       Mesuré après correction : le PIRE des trois arrêts est l'extrémité
       `--sky-deep`, à 5,39:1 (les deux autres : 9,28 sur `--violet-deep`,
       5,78 sur `--violet`).
       ⚠️ CES DEUX CHIFFRES ONT ÉTÉ CORRIGÉS le 2026/08/27 (revue croisée de
       PRP-15) : ce cartouche portait « 2,2:1 » et « ≥ 4,9:1 ». Le premier
       était la valeur d'AUCUNE paire — blanc sur `--sky` rend 2,30:1, et
       `bin/audit-ui.py` l. 97 grave 2,30 depuis PRP-13. Le second était vrai
       mais MOU : donner un plancher là où l'outil rend le pire arrêt exact
       empêche d'éprouver la sonde, qui est tout l'usage d'un chiffre gravé. */
    background: linear-gradient(135deg, var(--violet-deep) 0%, var(--violet) 45%, var(--sky-deep) 100%);
    box-shadow: var(--shadow-md);
}

.cta h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.cta p {
    margin: 0 auto 1.5rem;
    max-width: 34rem;
    /* Blanc franc plutôt qu'un blanc à 70 % : sur un dégradé, un texte
       translucide passe sous le seuil de contraste à l'extrémité claire. */
    color: var(--on-accent);
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

/* Sur fond coloré, le bouton principal s'inverse : blanc plein, texte violet. */
.cta .btn {
    background: var(--surface);
    color: var(--violet-deep);
    box-shadow: 0 5px 0 rgba(36, 31, 61, 0.18);
}

.cta .btn:hover {
    background: var(--sun-soft);
    color: var(--violet-deep);
}

.cta .btn--ghost {
    background: transparent;
    color: var(--on-accent);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.cta .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.16);
    color: var(--on-accent);
}

/* ==========================================================================
   Pages secondaires — demande d'accès et confidentialité
   Les classes `public-*` sont conservées TELLES QUELLES : `access-request.php`
   et `privacy.php` les portent déjà, et les renommer serait un changement sans
   bénéfice sur deux gabarits stables.
   ========================================================================== */

.public-hero {
    padding: 1.5rem 0 0.5rem;
}

.public-lead {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 42rem;
}

.public-section {
    margin-top: 1.75rem;
    max-width: 46rem;
}

.public-section h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.public-steps {
    margin: 0 0 1rem 1.25rem;
    padding: 0;
}

.public-steps li {
    margin-bottom: 0.4rem;
}

.public-notice {
    padding: 1.1rem 1.25rem;
    border-left: 5px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Politique de confidentialité — du texte long, donc une mesure de ligne
   confortable et des titres qui découpent vraiment. */
.privacy {
    max-width: 46rem;
}

.privacy dt {
    font-weight: 700;
    margin-top: 0.75rem;
}

.privacy dd {
    margin: 0.15rem 0 0 1rem;
}

/* Le seul contact publié du site, et le seul recours au sens de la Loi 25 : il
   lui faut une vraie cible. Mesuré le 2026/08/20 : 49,2 px à 390 px de large
   (l'adresse s'y replie sur deux lignes) mais **22 px dès 768 px**, où elle
   tient sur une seule — un défaut qu'une mesure au seul format téléphone ne
   voit pas, et c'est pourquoi `bin/audit-ui.py` mesure désormais AUSSI en
   tablette. `max-width` et `overflow-wrap` accompagnent obligatoirement tout
   passage en `inline-flex` : sans eux le conteneur se dimensionne sur son
   contenu et cette adresse de 45 caractères déborde. */
.contact-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    overflow-wrap: anywhere;
}