/* app-seo-clair.css : les pages publiques des apps (`/apps/flair` et ses
   sœurs), remises dans la veine de la landing claire.

   Chargée APRÈS app-seo.css, qu'elle ne remplace pas : la mise en page du
   texte (listes, étapes, questions) reste la sienne. On change ici ce qui se
   voit en arrivant de la landing : l'en-tête, la fonte des titres, les
   boutons et les cartes du bas.

   Ces pages étendent base.html et suivent le thème clair ou sombre. Tout
   passe donc par les jetons `--mr-*`, et la teinte de chaque app est un
   mélange de sa couleur d'état avec le fond de carte du thème, comme dans le
   hall. `--accent` est posé par la classe `apg--{clé}` du gabarit. */

.apg {
    --accent: var(--mr-gris);
    --titre: 'Bricolage Grotesque', 'Inter', -apple-system, sans-serif;
    --detente: cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 760px;
}

.apg--flair { --accent: var(--mr-vert); }
.apg--trace { --accent: var(--mr-orange); }
.apg--badge { --accent: var(--mr-violet); }
.apg--sonar { --accent: var(--mr-bleu); }

/* ===== L'en-tête : centré, sur une lueur de la couleur de l'app ===== */
.apg-fil { justify-content: center; margin-bottom: 40px; }

.apg-tete {
    /* `isolate` : sans lui la lueur, posée en `z-index: -1`, passe derrière
       le fond de la page et ne se voit pas du tout. */
    isolation: isolate;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 56px;
    margin-bottom: 56px;
    text-align: center;
}

/* La lueur s'éteint avant le bord de sa couche : elle dérive, et un bord
   coupé entrerait dans le cadre. Elle déborde de la colonne de lecture, qui
   est étroite, d'où les marges négatives. */
.apg-tete::before {
    content: '';
    position: absolute;
    inset: -80px -30% 20%;
    z-index: -1;
    background: radial-gradient(38% 46% at 50% 42%, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
    filter: blur(40px);
    pointer-events: none;
}

.apg-marque {
    width: 104px;
    height: 104px;
    margin-bottom: 28px;
    border-radius: 24%;
    box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.4);
}

.apg-marque--lettre { font-family: var(--titre); font-size: 2.75rem; }

/* Le nom de l'app, dans sa couleur et en bas de casse : écrit en capitales
   espacées il se lisait comme une étiquette de rayon. */
.apg-nom {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
}

/* `!important` sur les tailles des titres : mobile.css impose les siennes à
   tous les h1, h2 et h3 sous 768 px. */
.apg h1 {
    max-width: 16ch;
    margin-bottom: 20px;
    font-family: var(--titre);
    font-size: clamp(2.3rem, 6vw, 3.75rem) !important;
    line-height: 1.02;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.apg-chapeau {
    max-width: 34em;
    margin-bottom: 32px;
    color: var(--mr-text-muted);
    font-size: 1.2rem;
    line-height: 1.45;
    text-wrap: balance;
}

.apg-actions { justify-content: center; gap: 12px; }

.apg-bouton, .apg-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--detente);
}

.apg-bouton { background: var(--mr-btn-bg); color: var(--mr-btn-text); }
.apg-bouton:hover { opacity: 1; background: var(--mr-btn-bg-hover); transform: translateY(-2px); }

.apg-lien { border: 1px solid var(--mr-border-strong); color: var(--mr-text-strong); }
.apg-lien:hover { border-color: var(--mr-text-strong); text-decoration: none; }

.apg-bouton:active, .apg-lien:active { transform: scale(0.97); }

/* ===== Le corps ===== */
.apg-bloc { margin-bottom: 64px; }

.apg-bloc h2 {
    font-family: var(--titre);
    font-size: clamp(1.7rem, 3.4vw, 2.2rem) !important;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

/* Les termes d'une liste de définitions prennent la couleur de l'app : c'est
   ce qui relie le texte à l'en-tête, sur une page qui n'a pas d'autre image. */
.apg-liste dt { color: var(--accent); }

/* ===== Les autres apps : des cartes teintées, côte à côte =====
   Le maillage entre pages d'app est obligatoire (le hall est en `nofollow`),
   donc ces liens restent ; ils prennent le dessin des cartes de la landing. */
.apg-autres { padding-top: 56px; }

.apg-autres h2 {
    margin-bottom: 24px;
    font-family: var(--titre);
    font-size: 1.6rem !important;
    letter-spacing: -0.03em;
}

.apg-autres ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.apg-autres li { margin: 0; }

.apg-autres a {
    height: 100%;
    padding: 22px;
    border: 0;
    border-radius: 22px;
    background: color-mix(in srgb, var(--accent-carte, var(--mr-gris)) 13%, var(--mr-surface-card));
    transition: transform 0.4s var(--detente), box-shadow 0.4s var(--detente);
}

.apg-autres a:hover {
    background: color-mix(in srgb, var(--accent-carte, var(--mr-gris)) 13%, var(--mr-surface-card));
    transform: translateY(-4px);
    box-shadow: var(--mr-shadow);
}

.apg-autre--flair { --accent-carte: var(--mr-vert); }
.apg-autre--trace { --accent-carte: var(--mr-orange); }
.apg-autre--badge { --accent-carte: var(--mr-violet); }
.apg-autre--sonar { --accent-carte: var(--mr-bleu); }

.apg-autres strong {
    margin-bottom: 6px;
    font-family: var(--titre);
    font-size: 1.3rem;
    letter-spacing: -0.025em;
}

/* ===== Le mouvement =====
   En animation à remplissage « backwards » : l'état de départ n'existe que
   pendant l'animation, donc rien ne peut rester caché. */
@media (prefers-reduced-motion: no-preference) {
    .apg-tete > * { animation: apg-monter 0.9s var(--detente) backwards; }
    .apg-marque { animation: apg-icone 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, apg-flotter 5s ease-in-out 0.8s infinite alternate; }
    .apg-nom { animation-delay: 0.08s; }
    .apg h1 { animation-delay: 0.14s; }
    .apg-chapeau { animation-delay: 0.2s; }
    .apg-actions { animation-delay: 0.26s; }
    .apg-tete::before { animation: apg-deriver 16s ease-in-out infinite alternate; }

    @keyframes apg-monter { from { opacity: 0; transform: translateY(20px); } }
    @keyframes apg-icone { from { opacity: 0; transform: scale(0.7) rotate(-10deg); } }
    /* Par `translate`, la propriété séparée : sur `transform`, cette boucle
       écraserait l'entrée de l'icône. */
    @keyframes apg-flotter { to { translate: 0 -8px; } }
    @keyframes apg-deriver {
        from { transform: translate(-3%, 2%) scale(1); }
        to { transform: translate(3%, -2%) scale(1.1); }
    }
}

@media (max-width: 640px) {
    .apg-tete { padding-bottom: 40px; margin-bottom: 40px; }
    .apg-marque { width: 84px; height: 84px; }
    .apg-chapeau { font-size: 1.05rem; }
    .apg-actions { flex-direction: column; align-self: stretch; }
    .apg-lien { width: 100%; }
}