/* =========================================================================
   Landing publique (refonte) — page d'accueil sur le design system neuf.
   Construit sur design-system.css (tokens + .ds-*). Aucun lien avec le legacy
   (main.css / Bootstrap / jQuery condamnés). Chaleureux, rond, désaturé, calme :
   aucune animation à l'ouverture d'écran, hover sobre ≤ 200ms, prefers-reduced-
   motion respecté, cibles ≥ 44px, contrastes AA. (Palette [À VALIDER].)
   ========================================================================= */

@import url("design-system-Kh-f2Uo.css");

/* ---- Variantes de bouton (largeur auto / tailles / fantôme) ------------- */
.ds-btn--inline { width: auto; }

.ds-btn--sm {
    min-height: 44px;
    font-size: 15px;
    padding: 0 var(--sp-5);
    border-radius: var(--r-sm);
}

.ds-btn--lg {
    min-height: 56px;
    font-size: 18px;
    padding: 0 var(--sp-8);
}


/* ---- Conteneur de page -------------------------------------------------- */
.lp-body { overflow-x: hidden; }

.lp-container {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding-inline: var(--sp-5);
}

@media (min-width: 48rem) { .lp-container { padding-inline: var(--sp-8); } }

/* Colonne étroite et centrée (formulaires publics, contenu en prose). */
.lp-narrow { max-width: 44rem; margin-inline: auto; }

/* ---- Sur-titre / sections ----------------------------------------------- */
.lp-eyebrow {
    margin: 0 0 var(--sp-3);
    font-weight: 700;
    font-size: 14px;
    color: var(--secondary);
}

.lp-section { padding-block: var(--sp-12); }

@media (min-width: 48rem) { .lp-section { padding-block: var(--sp-16); } }

.lp-section__head { max-width: 60ch; margin-bottom: var(--sp-8); }

.lp-section__title { margin-bottom: var(--sp-4); }

.lp-section__body { max-width: 62ch; }

/* ---- Pages légales (CGU, cookies, mentions, confidentialité) ------------
   Hygiène typographique pour du contenu HTML i18n injecté en brut : mesure de
   lecture confortable, centrée, et styles de base pour les balises du corps
   (titres, paragraphes, listes, liens). Sobre — aucune nouvelle direction
   artistique, uniquement les tokens du design system. */
.lp-legal {
    max-width: 68ch;
    margin-inline: auto;
    margin-top: var(--sp-6);
    color: var(--ink-primary);
    line-height: 1.7;
}

.lp-legal > :first-child { margin-top: 0; }
.lp-legal > :last-child { margin-bottom: 0; }

/* Le vrai <h1> de page est le .ds-display ajouté au-dessus ; les éventuels
   titres présents dans le contenu i18n restent visuellement subordonnés. */
.lp-legal h1,
.lp-legal h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 3.2vw, 26px);
    line-height: 1.25;
    color: var(--ink-primary);
    margin: var(--sp-10) 0 var(--sp-3);
}

.lp-legal h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(17px, 2.4vw, 20px);
    line-height: 1.3;
    color: var(--ink-primary);
    margin: var(--sp-8) 0 var(--sp-2);
}

.lp-legal p { margin: 0 0 var(--sp-4); }

.lp-legal ul,
.lp-legal ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); }

.lp-legal li { margin-bottom: var(--sp-2); }

.lp-legal a {
    color: var(--secondary);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--secondary) 35%, transparent);
    padding-bottom: 1px;
    border-radius: 2px;
}

.lp-legal a:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

.lp-legal a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.lp-legal strong,
.lp-legal b { font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
    .lp-legal a { transition: color var(--motion) ease, border-color var(--motion) ease; }
}

/* ---- FAQ (accordéon natif <details>) ------------------------------------
   Sans JavaScript : clavier-accessible, prévisible, cibles ≥44px — adapté au
   public neuro-inclusif. Uniquement les tokens du design system. */
.lp-faq { max-width: 72ch; margin-inline: auto; }

.lp-faq__intro { color: var(--ink-secondary); margin: var(--sp-3) 0 var(--sp-8); }

.lp-faq__list { display: flex; flex-direction: column; gap: var(--sp-3); }

.lp-faq__item {
    background: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.lp-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 44px;
    padding: var(--sp-4) var(--sp-5);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink-primary);
}

.lp-faq__q::-webkit-details-marker { display: none; }

.lp-faq__q::after {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--ink-secondary);
    border-bottom: 2px solid var(--ink-secondary);
    transform: rotate(45deg);
}

.lp-faq__item[open] .lp-faq__q::after { transform: rotate(-135deg); }

.lp-faq__q:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.lp-faq__a {
    padding: 0 var(--sp-5) var(--sp-4);
    color: var(--ink-primary);
    line-height: 1.7;
}

@media (prefers-reduced-motion: no-preference) {
    .lp-faq__q::after { transition: transform var(--motion) ease; }
}

/* ---- Header public ------------------------------------------------------ */
.lp-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--surface-base) 86%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-hairline);
}

.lp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 68px;
}

.lp-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--ink-primary);
    text-decoration: none;
}

.lp-brand__logo { height: 34px; width: auto; }

.lp-brand__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    white-space: nowrap;
}

.lp-nav { display: inline-flex; align-items: center; gap: var(--sp-3); }

.lp-nav__login {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--sp-2);
    color: var(--ink-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.lp-nav__login:hover { color: var(--primary); }

@media (max-width: 26rem) { .lp-brand__name { display: none; } }

/* ---- Hero --------------------------------------------------------------- */
/* Héros plein cadre : grande photo + voile chaud, titre & CTA par-dessus. */
.lp-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(520px, 76vh, 760px);
    overflow: hidden;
    background: var(--surface-sunken);
}

.lp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
    z-index: -2;
}

.lp-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(43, 39, 51, .72) 0%, rgba(43, 39, 51, .44) 38%, rgba(43, 39, 51, .08) 72%, transparent 100%),
        linear-gradient(0deg, rgba(43, 39, 51, .36) 0%, transparent 44%);
}

.lp-hero__inner { width: 100%; padding-block: var(--sp-12); }

.lp-hero__content { max-width: 34rem; }

.lp-hero__title {
    margin-bottom: var(--sp-5);
    color: #fff;
    font-size: clamp(38px, 6.4vw, 60px);
}

.lp-hero__lead {
    max-width: 40ch;
    margin-bottom: var(--sp-8);
    color: rgba(255, 255, 255, .92);
    font-size: clamp(16px, 2.4vw, 19px);
    line-height: 1.6;
}

.lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4) var(--sp-6);
}

.lp-textlink {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    color: var(--ink-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

.lp-textlink svg { width: 18px; height: 18px; }

.lp-textlink:hover { color: var(--primary); }

.lp-textlink--onhero { color: #fff; }
.lp-textlink--onhero:hover { color: var(--accent-soft); }

/* ---- Manifeste ---------------------------------------------------------- */
.lp-manifesto { background: var(--surface-base); }

.lp-manifesto__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: center;
}

.lp-manifesto__text { max-width: 60ch; }

.lp-manifesto .lp-section__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 34px);
}

.lp-manifesto__img { width: 100%; height: auto; border-radius: var(--r-lg); }

@media (min-width: 56rem) {
    .lp-manifesto__inner { grid-template-columns: .95fr 1.05fr; gap: var(--sp-12); }
    .lp-manifesto__img { order: -1; }
}

/* ---- Étapes (« comment ça se passe ») -----------------------------------
   Parcours ÉDITORIAL : grande photo réaliste + texte, en lignes qui ALTERNENT
   gauche/droite (jamais une liste froide — parti pris design). Bande sauge douce
   (« calme & sécurité »), distincte des sections base/sunken voisines. Grand
   chiffre serif, affirmé mais posé. */
.lp-steps { background: var(--secondary-soft); }

.lp-steps__head { max-width: 60ch; margin-inline: auto; text-align: center; }

.lp-steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 48rem) { .lp-steps__list { grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-10); } }

/* Vignette + texte à plat (léger, ergonomique sur mobile) — jamais de grand média. */
.lp-step { display: flex; align-items: flex-start; gap: var(--sp-4); }

.lp-step__thumb {
    flex: none;
    width: 104px;
    height: 104px;
    border-radius: var(--r-lg);
    object-fit: cover;
    box-shadow: var(--shadow-1);
}

.lp-step__text { padding-top: var(--sp-1); }

.lp-step__title {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-1);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
    color: var(--ink-primary);
}

.lp-step__num {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--secondary);
}

.lp-step__body { margin: 0; font-size: 15px; color: var(--ink-secondary); line-height: 1.6; }

/* Note « à venir » : l'âme du site (se découvrir en jouant) approche, annoncée
   sans sur-promesse. Encart distinct des étapes : contour pointillé = pas encore
   posé, badge chaleureux, texte sobre. Centré, calme. */
.lp-steps__soon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2) var(--sp-3);
    max-width: 52ch;
    margin: var(--sp-10) auto 0;
    padding: var(--sp-4) var(--sp-5);
    border: 1px dashed color-mix(in srgb, var(--secondary) 38%, transparent);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    text-align: center;
}

.lp-steps__soon-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    flex: none;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-full);
    background: var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    color: color-mix(in srgb, var(--accent) 45%, var(--ink-primary));
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}

.lp-steps__soon-badge svg { width: 15px; height: 15px; }

.lp-steps__soon-text { margin: 0; color: var(--ink-secondary); font-size: 15px; line-height: 1.6; }

/* ---- Promesses ---------------------------------------------------------- */
.lp-promises { background: var(--surface-sunken); }

.lp-promise-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
}

@media (min-width: 40rem) { .lp-promise-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }

/* Liste de valeurs (PAS des cartes-articles) : vignette + texte, à plat. */
.lp-promise {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
}

.lp-promise__thumb {
    flex: none;
    width: 128px;
    height: 128px;
    border-radius: var(--r-lg);
    object-fit: cover;
    box-shadow: var(--shadow-1);
}

.lp-promise__text { padding-top: var(--sp-2); }

.lp-promise__title {
    margin: 0 0 var(--sp-1);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 17px;
}

.lp-promise__body { margin: 0; font-size: 15px; color: var(--ink-secondary); }

/* ---- Section autisme (assumée) ------------------------------------------ */
.lp-autism { background: var(--surface-base); }

.lp-autism__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    align-items: center;
}

.lp-autism__text { max-width: 60ch; }

.lp-autism .lp-section__title {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 34px);
}

.lp-autism__sensory { margin: var(--sp-4) 0 var(--sp-6); font-size: 15px; }

.lp-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.lp-chip {
    background: var(--secondary-soft);
    color: var(--ink-primary);
    border-radius: var(--r-full);
    padding: 10px var(--sp-5);
    font-weight: 600;
    font-size: 15px;
}

.lp-autism__img { width: 100%; height: auto; border-radius: var(--r-lg); }

@media (min-width: 56rem) {
    .lp-autism__inner { grid-template-columns: 1.05fr .95fr; gap: var(--sp-12); }
    .lp-autism__img { order: 2; }
}

/* ---- CTA final ---------------------------------------------------------- */
.lp-final { background: var(--surface-sunken); }

.lp-final__panel {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--sp-12) var(--sp-6);
    background:
        radial-gradient(80% 120% at 0% 0%, var(--secondary-soft) 0%, transparent 55%),
        radial-gradient(70% 110% at 100% 100%, var(--accent-soft) 0%, transparent 55%),
        var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
}

.lp-final__title { margin-bottom: var(--sp-4); font-size: clamp(26px, 5vw, 40px); }

.lp-final__body { max-width: 46ch; margin: 0 auto var(--sp-8); }

.lp-final__foot { margin-top: var(--sp-5); font-size: 15px; color: var(--ink-secondary); }

/* ---- Footer ------------------------------------------------------------- */
.lp-footer {
    padding-block: var(--sp-12) var(--sp-8);
    background: var(--ink-primary);
    color: var(--surface-base);
}

.lp-footer__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}

.lp-footer .lp-brand { color: var(--surface-base); }

.lp-footer__tagline {
    margin: var(--sp-3) 0 0;
    max-width: 36ch;
    font-size: 15px;
    color: color-mix(in srgb, var(--surface-base) 72%, transparent);
}

.lp-footer__title {
    margin: 0 0 var(--sp-4);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--surface-base) 64%, transparent);
}

.lp-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.lp-footer__col a { color: var(--surface-base); text-decoration: none; font-size: 15px; }

.lp-footer__col a:hover { color: var(--primary); }

.lp-footer__bottom {
    margin-top: var(--sp-10);
    padding-top: var(--sp-6);
    border-top: 1px solid color-mix(in srgb, var(--surface-base) 16%, transparent);
}

.lp-footer__bottom p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--surface-base) 58%, transparent); }

@media (min-width: 48rem) {
    .lp-footer__inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-10); }
}

/* ---- Transitions de survol sobres (jamais à l'ouverture) ---------------- */
@media (prefers-reduced-motion: no-preference) {
    .lp-nav__login,
    .lp-textlink,
    .lp-footer__col a,
    .ds-btn--ghost { transition: color var(--motion) ease, background var(--motion) ease, border-color var(--motion) ease; }
}