/* ============================================================
   Custom CSS — Le Fare de l'Épargne
   Tailwind handles most styling; this file covers edge cases.
   ============================================================ */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Body line-height default */
body {
    line-height: 1.79em;
}

/* Selection color */
::selection {
    background-color: #4793A3;
    color: #fff;
}

/* Titres : poids medium (500) — hiérarchie visuelle (design system 400-500).
   Sélecteur `body h1` (spécificité 0,0,2) pour battre le preflight Tailwind Play
   `h1{font-weight:inherit}` injecté après custom.css. Les classes utilitaires
   explicites (font-semibold, etc. = 0,1,0) gardent la priorité. */
body h1,
body h2 {
    font-weight: 500;
}

/* Focus-visible ring for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
input[type="range"]:focus-visible {
    outline: 2px solid #4793A3;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Mobile menu transition */
#mobile-menu {
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

#mobile-menu.hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    display: block;
    visibility: hidden;
}

#mobile-menu:not(.hidden) {
    max-height: 900px;
    opacity: 1;
    visibility: visible;
}

/* ============================================================
   Splash screen
   ============================================================ */
#splash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191919;
}

#splash img {
    width: 220px;
    max-width: 60vw;
    animation: splash-pulse 1.8s ease-in-out;
}

#splash.fade-out {
    animation: splash-exit 0.7s ease-in forwards;
}

@keyframes splash-pulse {
    0%   { opacity: 0; transform: scale(0.85); }
    40%  { opacity: 1; transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes splash-exit {
    0%   { opacity: 1; }
    100% { opacity: 0; transform: scale(1.08); }
}

/* ============================================================
   Cookie banner
   ============================================================ */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: #191919;
    color: #fff;
    padding: 1rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    animation: cookie-slide-up 0.4s 0.5s ease-out forwards;
}

@keyframes cookie-slide-up {
    to { transform: translateY(0); }
}

#cookie-banner.cookie-hidden {
    animation: cookie-slide-down 0.3s ease-in forwards;
}

@keyframes cookie-slide-down {
    to { transform: translateY(100%); }
}

/* ============================================================
   Scroll reveal — sections fade in as they enter viewport
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children inside a reveal container */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }

/* ============================================================
   Animated counters
   ============================================================ */
.counter {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Réduction de mouvement (accessibilité — WCAG 2.3.3)
   Neutralise splash, reveals, stagger, slide bannière, smooth-scroll.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal,
    .reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    #splash img { animation: none; }
    #splash.fade-out { animation: none; opacity: 0; }
    #cookie-banner {
        transform: none;
        animation: none;
    }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Landing pages (lp/) --- */

/* Sous-palette du hero des LP. Elle n'existe pas dans les tokens Tailwind du site
   (lfde-noir / ardoise / teal / teal-dark / teal-light) parce qu'elle ne sert qu'au
   raccord avec la creation publicitaire. Elle est nommee ici plutot que repetee en
   hexa dans les regles : la 2e LP reprendra le meme hero, et un nom se relit. */
:root {
    --lp-nuit-haut: #101a21;   /* haut du degrade, la ou la lumiere rasante arrive */
    --lp-nuit-mid:  #16212a;
    --lp-nuit-bas:  #0a1014;
    --lp-halo:      rgba(43, 63, 79, .55);   /* halo radial, equivalent du ciel de fin de journee */
    --lp-or:        #C9A66B;   /* or chaud des surtitres, filets et pave legal */
    --lp-marine:    #1B2A41;   /* bouton bleu marine de la fin de video */
    /* Turquoise de TEXTE. Le turquoise de marque #4793A3 plafonne a 3,52:1 sur blanc et
       3,25:1 sur #F0F7F9 : il echoue WCAG AA des qu'il porte du petit texte. Celui-ci
       garde la teinte et monte a 5,36:1 sur blanc, 4,95:1 sur teal-light. Le token du
       site n'est pas touche — #4793A3 reste pour les aplats, bordures et gros chiffres,
       ou le seuil de 3:1 s'applique. */
    --lp-teal-texte: #35737F;
}
.lp-teal-txt { color: var(--lp-teal-texte); }

/* Hero « offre » : continuite visuelle avec la creation publicitaire Facebook — noirs
   bleutes, or chaud, serif pour les phrases fortes, sans-serif tres espace pour les
   surtitres et le pave legal. Volontairement cantonne au hero : le corps de page
   repart sur la charte LFDE (teal/Montserrat), le hero n'assure que le raccord
   visuel avec la video au moment le plus sensible, la premiere seconde apres le clic. */
.lp-hero {
    background:
        radial-gradient(115% 85% at 50% 0%, var(--lp-halo) 0%, rgba(13, 20, 25, 0) 62%),
        linear-gradient(168deg, var(--lp-nuit-haut) 0%, var(--lp-nuit-mid) 48%, var(--lp-nuit-bas) 100%);
    color: #fff;
}

/* Bande photographique du hero : une frame de la creation video (tour de verre,
   reflets dores), decoupee dans la seule zone sans texte incruste. Elle est fondue
   vers le bas par un masque, donc pas de couture avec le degrade, et le bloc de texte
   reste sur fond sombre plein — le contraste mesure n'est pas affecte. */
.lp-hero-visual {
    height: clamp(150px, 30vw, 280px);
    background: url('../images/hero-tour.webp') center 45% / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 100%);
}

/* Logos des societes de gestion sur les fiches produit. Tailles reglees une par une :
   caler sur la hauteur totale donnerait un faux equilibre, Iroko etant un mot-signe sur
   une ligne (137x24) et Advenis un bloc nom + signature sur deux (175x51). On aligne
   donc les hauteurs de capitale, ce qui rend aussi la signature Advenis lisible. */
.lp-sg-logo { width: auto; display: block; }
.lp-sg-logo--iroko   { height: 21px; }
.lp-sg-logo--advenis { height: 38px; }

/* Longueur de ligne : les blocs de mentions tournaient a 131 caracteres, largeur a
   laquelle l'oeil rate le retour a la ligne. 68ch tient la fourchette 45-75. */
.lp-prose { max-width: 68ch; }
/* Evite la derniere ligne d'un seul mot sur les titres. */
.lp-balance { text-wrap: balance; }
/* Sans couleur : pose la graisse et l'espacement, la teinte vient d'une utilitaire
   (lp-gold sur fond sombre, text-lfde-teal sur fond clair). */
.lp-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem; font-weight: 500;
    letter-spacing: .32em; text-transform: uppercase;
}
.lp-gold { color: var(--lp-or); }
.lp-rule { display: block; width: 40px; height: 1px; background: var(--lp-or); }
/* Spectral (Production Type) plutot que Cormorant Garamond : meme registre de serif
   classique que la creation video, mais Cormorant est une police-reflexe de generation
   IA, et son contraste tres eleve tenait mal le « 3 000 000 XPF » sur lequel la video
   se termine. lining-nums conserve par securite selon la fonte de repli. */
.lp-serif {
    font-family: 'Spectral', Georgia, 'Times New Roman', serif; font-weight: 400;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}
.lp-hero-title { font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.16; text-wrap: balance; }
/* Etat desactive du bouton d'envoi : lp.js le passe en disabled + « Envoi en cours… »
   pendant la requete, mais sans marque visuelle le bouton restait identique et invitait
   au double-tap. */
#lp-submit[disabled] { opacity: .55; cursor: progress; }
.lp-hero-figure { font-size: clamp(2.25rem, 9.5vw, 3.5rem); line-height: 1.05; }
/* Bleu marine + lisere clair, comme le bouton de fin de video. Le lisere n'est pas
   decoratif : le marine seul se detacherait mal du fond sombre. */
.lp-hero-cta {
    display: inline-block; padding: .95rem 1.9rem;
    background: var(--lp-marine); color: #fff;
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 4px;
    font-family: 'Montserrat', sans-serif; font-size: .95rem;
    transition: background .2s, border-color .2s;
}
.lp-hero-cta:hover { background: #24374f; border-color: rgba(255, 255, 255, .68); }

/* CTA du corps de page. Le marine vient de la creation video, pas d'une palette
   inventee : il donne la continuite avec la pub, il distingue enfin l'action du
   turquoise qui sert deja aux liens/chiffres/bordures (le CTA n'avait aucune
   distinction chromatique), et il passe WCAG a 14,4:1 la ou le turquoise plafonnait
   a 3,52:1. Cantonne aux LP : la charte du site reste au CTA turquoise. */
.lp-cta {
    display: inline-block; padding: 1.05rem 2.2rem;
    background: var(--lp-marine); color: #fff;
    border-radius: 4px; font-family: 'Montserrat', sans-serif;
    transition: background .2s;
}
.lp-cta:hover { background: #24374f; }
.lp-cta-sm { padding: .7rem 1.3rem; font-size: .875rem; }

/* --- Estimateur de revenus (#revenus) -------------------------------------------
   Le seul levier de desir utilisable ici : le cabinet s'interdit toute preuve sociale
   (temoignages, encours conseilles, nombre de clients), donc le chiffre porte seul ce
   que les concurrents font porter a un bandeau Trustpilot. Il merite le traitement
   d'un resultat, pas d'un paragraphe. */
.lp-estim {
    background: var(--lp-marine); color: #fff;
    border-radius: 12px; padding: 1.75rem 1.5rem;
}
.lp-estim .lp-eyebrow { color: var(--lp-or); }
.lp-estim label { color: rgba(255, 255, 255, .72); }

.lp-estim-range {
    -webkit-appearance: none; appearance: none; width: 100%;
    height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28);
    outline-offset: 4px;
}
/* Pouce >= 24px : cible tactile AA (WCAG 2.5.8) sur un curseur manipule au doigt,
   ce que le pouce natif de 16px ne tient pas. */
.lp-estim-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--lp-or); border: none; cursor: pointer;
}
.lp-estim-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--lp-or); border: none; cursor: pointer;
}
.lp-estim-montant {
    font-family: 'Montserrat', sans-serif; font-size: 1rem;
    color: rgba(255, 255, 255, .85); margin: .85rem 0 1.5rem;
    font-variant-numeric: tabular-nums;
}
.lp-estim-out {
    border-top: 1px solid rgba(255, 255, 255, .18);
    padding-top: 1.35rem;
}
/* Toutes les lignes de texte du resultat, pas :first-child/:last-child : ces deux
   pseudo-classes se decalent des qu'une ligne est ajoutee au bloc, et la ligne orpheline
   retombe alors sur la couleur Tailwind sombre — illisible sur le fond marine. Les deux
   exceptions ci-dessous portent leur propre couleur. */
.lp-estim-out p { color: rgba(255, 255, 255, .72); }
/* Selecteurs de meme portee (0,1,1) que la regle ci-dessus, sinon elle les emporte et
   le chiffre comme le taux repassent en blanc. */
.lp-estim-out p.lp-estim-chiffre { color: var(--lp-or); }
.lp-estim-out p.lp-estim-taux { color: var(--lp-or); }
.lp-estim-chiffre {
    font-family: 'Spectral', Georgia, serif;
    font-size: clamp(2.1rem, 8vw, 3rem); line-height: 1.1;
    color: var(--lp-or); margin: .25rem 0 .4rem;
    font-variant-numeric: lining-nums tabular-nums;
}
.lp-estim .text-xs { color: rgba(255, 255, 255, .62); }
.lp-estim strong { color: rgba(255, 255, 255, .85); font-weight: 500; }

/* Titre principal des LP a hero clair (assurance-vie). La LP SCPI a son propre
   traitement (.lp-hero-title) cale sur la creation video ; celle-ci n'a pas de creation
   sombre equivalente, donc elle garde son hero clair et n'emprunte que la serif, pour
   ne pas melanger deux polices de titre sur une meme page. */
.lp-h1 {
    font-family: 'Spectral', Georgia, serif; font-weight: 400;
    font-size: clamp(2rem, 6.5vw, 3rem); line-height: 1.15;
    text-wrap: balance; font-variant-numeric: lining-nums;
}

/* Logos assureurs. Tailles reglees une par une comme pour les societes de gestion :
   Prepar-Vie et Suravenir sont des mots-signes, Spirica porte un symbole au-dessus du
   mot, donc a hauteur egale son nom serait deux fois plus petit. Presentes sur une
   plaque BLANCHE : le logo Spirica n'existe qu'en JPEG a fond opaque, et recadrer ou
   detourer une marque deposee n'est pas a nous de le faire. */
.lp-assureur-logo { width: auto; display: block; }
.lp-assureur-logo--preparvie { height: 26px; }
.lp-assureur-logo--suravenir { height: 26px; }
.lp-assureur-logo--spirica   { height: 42px; }

/* Titres de section en Spectral : la serif n'etait presente que dans le hero, ou elle
   faisait piece rapportee. Etendue aux titres, elle devient la voix de la page et forme
   un vrai couple serif/sans avec Montserrat et Inter. */
.lp-h2 {
    font-family: 'Spectral', Georgia, serif; font-weight: 400;
    font-size: clamp(1.75rem, 5.5vw, 2.6rem); line-height: 1.18;
    text-wrap: balance; font-variant-numeric: lining-nums;
}
.lp-hero-legal { border-top: 1px solid rgba(201, 166, 107, .28); background: rgba(0, 0, 0, .25); }

/* Tableau comparatif entree/sortie.
   Mobile d'abord (95 % du trafic) : trois colonnes empilees ne sont pas un comparatif,
   on ne peut jamais en voir deux a la fois — mesure a 689 px de scroll entre la meme
   ligne de deux colonnes voisines. On regroupe donc par DIMENSION : chaque <tr> devient
   une carte, et les trois formules s'y lisent l'une sous l'autre, etiquetees par
   ::before. A partir de 768 px la largeur permet le vrai tableau, et on y revient. */
.lp-compare { width: 100%; border-collapse: collapse; }
/* thead masque visuellement mais conserve pour les lecteurs d'ecran (les <th scope=col>
   restent la reference des cellules). */
.lp-compare thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.lp-compare tbody tr {
    display: block; padding: 1.25rem; margin-bottom: 1rem;
    border: 1px solid rgba(170, 188, 191, .35); border-radius: 12px;
}
.lp-compare th[scope="row"] {
    display: block; text-align: left; margin-bottom: 1rem;
    font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 500;
    letter-spacing: .28em; text-transform: uppercase; color: #344245;
}
.lp-compare td { display: block; padding: .9rem 0 0; }
.lp-compare td + td { border-top: 1px solid rgba(170, 188, 191, .28); }
.lp-compare td::before {
    content: attr(data-label); display: block; margin-bottom: .35rem;
    font-family: 'Montserrat', sans-serif; font-size: .72rem; color: var(--lp-teal-texte);
}
.lp-compare td.lp-pick { background: #F0F7F9; border-radius: 8px; padding: .9rem; margin-top: .9rem; }
.lp-compare td.lp-pick + td, .lp-compare td.lp-pick { border-top: 0; }
.lp-fig { font-family: 'Montserrat', sans-serif; font-size: 1.6rem; line-height: 1.15; margin-bottom: .5rem; }
.lp-fig-pick { color: #4793A3; }

@media (min-width: 768px) {
    /* table-layout:fixed : sans lui le navigateur repartit selon le contenu et la colonne
       retenue finit la plus etroite des trois, ce qui est l'inverse de l'intention.
       En layout fixe ce sont les cellules de la PREMIERE ligne qui fixent les colonnes,
       d'ou les largeurs posees sur le thead et non sur le corps du tableau. */
    .lp-compare { table-layout: fixed; }
    .lp-compare thead td:first-child { width: 19%; }
    .lp-compare thead th { width: 27%; }
    .lp-compare thead { position: static; width: auto; height: auto; clip-path: none; }
    .lp-compare thead th {
        text-align: left; vertical-align: bottom; padding: 0 1rem 1rem;
        font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 500;
        letter-spacing: .28em; text-transform: uppercase; color: #344245;
    }
    .lp-compare tbody tr { display: table-row; padding: 0; margin: 0; border: 0; border-radius: 0; }
    .lp-compare th[scope="row"] {
        display: table-cell; vertical-align: top; margin: 0;
        padding: 1.4rem 1rem 1.4rem 0; border-top: 1px solid rgba(170, 188, 191, .35);
    }
    .lp-compare td, .lp-compare td.lp-pick {
        display: table-cell; vertical-align: top;
        padding: 1.4rem 1rem; margin: 0; border-radius: 0;
        border-top: 1px solid rgba(170, 188, 191, .35);
        background: transparent;   /* laisse passer le fond du <col> de la colonne retenue */
    }
    .lp-compare td::before { display: none; }
    .lp-compare .lp-fig { font-size: 1.85rem; }
    /* La colonne retenue est teintee via <col> : un fond pose sur les <td> masquerait
       celui du <col>, d'ou le background:transparent sur les cellules ci-dessus. */
    .lp-compare col.lp-pick-col { background: #F0F7F9; }
    .lp-compare thead th:last-child { color: var(--lp-teal-texte); }
}

.lp-choice {
    display: block; width: 100%; text-align: left;
    padding: 1rem 1.25rem; border: 1px solid rgba(170, 188, 191, 0.4);
    border-radius: 12px; background: #fff; font-family: 'Montserrat', sans-serif;
    transition: border-color .2s, background .2s;
}
.lp-choice:hover, .lp-choice[aria-pressed="true"] { border-color: #4793A3; background: #F0F7F9; }
.lp-input {
    display: block; width: 100%; margin-top: .35rem;
    padding: .8rem 1rem; border: 1px solid rgba(170, 188, 191, 0.5); border-radius: 12px;
}
.lp-input:focus { outline: 2px solid #4793A3; outline-offset: 1px; }

/* Faits verifiables sur la societe de gestion, sous chaque carte produit.
   Remplace ce qu'un concurrent mettrait en recompenses : les prix du secteur (Victoires,
   Pyramides, Trophees du Revenu) sont decernes a des FONDS, pas a des societes. Ceux
   d'Iroko appartiennent a Iroko Zen, celui d'Advenis REIM a Elialys — aucun ne porte sur
   Atlas ni sur Eden. Les transferer a la societe pour les afficher ici serait une
   association trompeuse au sens de l'article L. 541-8-1 8 du code monetaire et financier.
   L'agrement, l'encours et la composition du patrimoine disent la solidite de la
   contrepartie, et ils portent sur le bon objet. */
.lp-sg-faits {
    margin-top: 1.25rem; padding-top: 1.1rem;
    border-top: 1px solid rgba(170, 188, 191, .4);
    display: grid; gap: .8rem;
}
.lp-sg-faits dt {
    font-family: 'Montserrat', sans-serif; font-size: .6875rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--lp-teal-texte); margin-bottom: .15rem;
}
.lp-sg-faits dd { font-size: .8125rem; line-height: 1.55; color: #344245; }

/* Taux net, sous le montant : le chiffre en XPF parle au visiteur, le taux permet la
   comparaison avec les rendements bruts que le marche affiche partout ailleurs. */
.lp-estim-taux {
    margin-top: .9rem; font-family: 'Montserrat', sans-serif;
    font-size: .875rem; color: var(--lp-or);
    font-variant-numeric: tabular-nums;
}