/*
 * La page de présentation de Ma Famille (rpsolutions.app), préparée le
 * 27/09/2026 : docs/PAGE-PRESENTATION.md.
 *
 * Feuille autonome, comme public/invite/invite.css dont elle reprend les
 * jetons. Rien n'est chargé d'ailleurs : ni police téléchargée, ni image de
 * fond, ni autre feuille. La CSP de la page ne l'autoriserait pas, et la page
 * promet de ne rien charger d'un tiers.
 *
 * Le sombre suit l'appareil (règle média) : la page n'a aucun script, donc
 * aucun réglage de thème.
 *
 * Contrastes (texte courant au moins 4,5:1) : gris #6f665e et non #7a7068
 * (4,4:1 sur le fond) ; boutons en blanc sur #085041 (9,4:1), jamais sur
 * #1d9e75 (3,4:1), qui ne sert qu'à la décoration.
 *
 * Mobile d'abord : lisible dès 320 px, marge de 16 px, aucune cible sous
 * 48 px ; deux colonnes (texte et capture) à partir de 48rem.
 */

:root {
    color-scheme: light;

    --fond: #f7f4ef;
    --carte: #ffffff;
    --fond-doux: #f0ebe3;
    --texte: #2a2521;
    --doux: #6f665e;
    --trait: #ebe4da;
    --lien: #085041;
    --bouton: #085041;
    --bouton-texte: #ffffff;

    /* Décoration seulement (filets, pastilles) : jamais sous du texte. */
    --accent: #1d9e75;
    --accent-fond: #e1f5ee;

    /* Une couleur par module, celles de l'application (base.css). */
    --agenda: #d85a30;
    --courses: #1d9e75;
    --repas: #6a61cf;
    --taches: #c07a12;
    --famille: #c2466f;
    --infos: #1a7f95;
    --documents: #2f78c4;
    --budget: #4f8a1b;

    --rayon: 16px;
    --rayon-grand: 24px;
    --gouttiere: 16px;
    --cible: 48px;

    --ombre: 0 1px 2px rgba(70, 50, 30, .05), 0 6px 20px rgba(70, 50, 30, .06);
    --ombre-forte: 0 2px 6px rgba(70, 50, 30, .08), 0 18px 40px rgba(70, 50, 30, .16);

    --police: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --fond: #141618;
        --carte: #1e2125;
        --fond-doux: #272b30;
        --texte: #f0ece7;
        --doux: #a79e95;
        --trait: #2f343a;
        --lien: #9fe1cb;
        --bouton: #5dcaa5;
        --bouton-texte: #06231c;

        --accent: #5dcaa5;
        --accent-fond: #12352c;

        --agenda: #f0997b;
        --courses: #5dcaa5;
        --repas: #aca5f0;
        --taches: #efb450;
        --famille: #ed93b1;
        --infos: #6cc3d5;
        --documents: #85b7eb;
        --budget: #97c459;

        --ombre: 0 1px 2px rgba(0, 0, 0, .3);
        --ombre-forte: 0 12px 32px rgba(0, 0, 0, .5);
    }
}

/* ------------------------------------------------------------ fondations */

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 1.0625rem/1.55 var(--police);
    -webkit-font-smoothing: antialiased;
    /* Une adresse e-mail ou un mot long ne doit jamais élargir la page à 320 px. */
    overflow-wrap: break-word;
}

h1,
h2,
h3 {
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0;
}

h1 {
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    font-weight: 750;
}

h2 {
    font-size: clamp(1.375rem, 3.5vw, 1.75rem);
    font-weight: 700;
}

p,
ul,
ol {
    margin: 0;
}

a {
    color: var(--lien);
    text-decoration: underline;
    text-underline-offset: .18em;
}

a:hover {
    text-decoration-thickness: 2px;
}

/* Le contour du clavier : 3 px, dans une couleur qui tranche sur le fond
   comme sur les boutons (le décalage laisse le fond visible entre les deux). */
:focus-visible {
    outline: 3px solid var(--lien);
    outline-offset: 3px;
    border-radius: 6px;
}

.enveloppe {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    /* Encoches des téléphones en paysage : jamais moins que la gouttière. */
    padding-left: max(var(--gouttiere), env(safe-area-inset-left));
    padding-right: max(var(--gouttiere), env(safe-area-inset-right));
}

/* Le lien d'évitement : invisible tant qu'on ne navigue pas au clavier. */
.saut {
    position: absolute;
    left: var(--gouttiere);
    top: -200px;
    z-index: 10;
    padding: 12px 18px;
    background: var(--carte);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-forte);
}

.saut:focus {
    top: 12px;
}

/* --------------------------------------------------------------- boutons */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cible);
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--bouton);
    color: var(--bouton-texte);
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--ombre);
}

.bouton:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.bouton--petit {
    padding: 10px 18px;
    font-size: 1rem;
}

/* ---------------------------------------------------------------- en-tête */

.entete {
    padding-top: env(safe-area-inset-top);
}

.entete-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
}

.marque {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--cible);
    color: var(--texte);
    font-weight: 750;
    font-size: 1.125rem;
    text-decoration: none;
}

.marque img {
    display: block;
    width: 40px;
    height: 40px;
}

/* ------------------------------------------------------------------ héro */

.hero {
    display: grid;
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 48px;
}

.hero-texte {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.chapeau {
    font-size: 1.1875rem;
    max-width: 36rem;
}

.appel {
    margin-top: 6px;
}

.note {
    color: var(--doux);
    max-width: 36rem;
}

/* ------------------------------------------------------------- captures */

.capture {
    margin: 0 auto;
    width: 100%;
    max-width: 280px;
    text-align: center;
}

/* Tant que le fichier manque (les captures sont prises à part), le cadre garde
   la forme d'un téléphone et affiche le texte alternatif : aucune fausse
   image. Les attributs width et height réservent la place sans saut de page. */
.capture img {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 390 / 844;
    margin: 0 auto;
    border-radius: 28px;
    background: var(--fond-doux);
    border: 1px solid var(--trait);
    color: var(--doux);
    font-size: .9375rem;
    box-shadow: var(--ombre-forte);
}

.capture figcaption {
    margin-top: 14px;
    color: var(--doux);
    font-size: .9375rem;
}

.hero .capture,
.hero .capture img {
    max-width: 300px;
}

/* -------------------------------------------------------------- sections */

.bloc {
    padding-top: 48px;
    padding-bottom: 48px;
    border-top: 1px solid var(--trait);
}

.bloc-grille {
    display: grid;
    gap: 32px;
}

.bloc-texte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 40rem;
}

/* Le titre d'une section faite d'une liste de cartes. */
.bloc-titre {
    margin-bottom: 24px;
}

/* Le filet de couleur du module au-dessus du titre : de la décoration, que
   rien ne lit (la couleur ne porte aucune information). */
.bloc h2::before,
.carte h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 6px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--module, var(--accent));
}

.module--agenda { --module: var(--agenda); }
.module--courses { --module: var(--courses); }
.module--repas { --module: var(--repas); }
.module--taches { --module: var(--taches); }
.module--famille { --module: var(--famille); }
.module--infos { --module: var(--infos); }
.module--documents { --module: var(--documents); }
.module--budget { --module: var(--budget); }

.carte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
    background: var(--carte);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
}

.duo {
    display: grid;
    gap: var(--gouttiere);
}

/* « Et aussi » : une carte par fonction. */
.liste-cartes {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--gouttiere);
}

.liste-cartes li {
    padding: 18px 20px;
    background: var(--carte);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
    border-left: 6px solid var(--module, var(--accent));
}

/* Les trois étapes, numérotées par la liste elle-même. */
.etapes {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--gouttiere);
    counter-reset: etape;
}

.etapes li {
    counter-increment: etape;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--carte);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
}

.etapes li::before {
    content: counter(etape);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-fond);
    color: var(--texte);
    font-weight: 750;
}

/* Les engagements sur les données : une puce de couleur, pas une coche
   (une coche laisserait croire à une certification). */
.points {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.points li {
    position: relative;
    padding-left: 26px;
}

.points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--module, var(--accent));
}

/* ------------------------------------------------------------------ tarif */

.tarif {
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
    align-items: center;
}

.tarif h2::before {
    margin-left: auto;
    margin-right: auto;
}

.prix {
    font-size: 1.25rem;
}

.prix strong {
    font-size: 1.75rem;
    font-weight: 750;
}

.tarif .note {
    font-size: .9375rem;
}

.tarif .bouton {
    margin-top: 6px;
}

/* -------------------------------------------------------- pied de page */

.pied {
    margin-top: 24px;
    padding-top: 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--trait);
    color: var(--doux);
    font-size: .9375rem;
}

.pied-texte {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pied-liens {
    list-style: none;
    padding: 0;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 20px;
}

/* Des liens isolés, pas pris dans une phrase : une cible de 48 px. Ceux du
   pied, et tout lien seul dans son paragraphe, classe « retour » (le retour
   des mentions légales, les conditions du tarif : revue du 27/09). */
.pied-liens a,
.retour {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
}

/* --------------------------------------------------- mentions légales */

.page {
    padding-top: 24px;
    padding-bottom: 48px;
}

.page-texte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 44rem;
}

.page-texte h2 {
    font-size: 1.25rem;
    margin-top: 18px;
}

/* ----------------------------------------------------- à partir de 48rem */

@media (min-width: 48rem) {
    :root {
        --gouttiere: 24px;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
        gap: 56px;
        align-items: center;
        padding-top: 40px;
        padding-bottom: 72px;
    }

    .bloc {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .bloc-grille {
        grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
        gap: 56px;
        align-items: center;
    }

    /* Une section sur deux, la capture passe à gauche. */
    .bloc--inverse .bloc-grille {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    }

    .bloc--inverse .capture {
        order: -1;
    }

    .duo,
    .liste-cartes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .etapes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}