/*
 * LCB Patrimoine, CSS propre a la page des simulateurs (template-simulateurs.php).
 * Chargee uniquement sur ce template (voir lcb_enqueue_assets() dans
 * functions.php), meme workflow append-only que les autres fichiers CSS du
 * theme : ne jamais reecrire ce fichier en entier, ajouter un nouveau bloc a
 * la fin avec une entree de changelog qui explique le pourquoi.
 *
 * Les variables de marque (:root) vivent dans style.css. Les classes
 * partagees avec le reste du site (.section, .section-inner, .eyebrow, .btn,
 * .reveal, .faq-closing, .cta-row...) vivent dans lcb-patrimoine-layout.css
 * et sont reutilisees ici telles quelles.
 *
 * Changelog
 * ----------
 * 1.0.0 - Creation de la page simulateurs, premier outil : "Projection de
 *         capital". Selection du simulateur par une barre d'onglets a
 *         pastilles.
 * 1.0.1 - Page pas encore mise en ligne : revision directe suite aux
 *         retours d'Oriane, avant toute mise en production (donc pas de
 *         bloc appende par dessus l'ancienne version, qui n'a jamais ete
 *         deployee). Changements :
 *         (a) La barre d'onglets a pastilles est abandonnee (trop proche du
 *         site de reference cite par Oriane). Le choix du simulateur se
 *         fait desormais via des cartes a cheval entre le hero et le bloc
 *         du dessous, sur le meme principe que .contact-methods-straddle /
 *         .contact-methods / .contact-method de lcb-patrimoine-contact.css
 *         (meme recette de chevauchement, deja verifiee en prod sur la page
 *         contact) : chaque carte porte une icone, le nom du simulateur et
 *         un bouton "Simuler". Un seul simulateur pour l'instant
 *         ("Projection d'investissement"), les suivants s'ajouteront en
 *         copiant cette meme recette de carte.
 *         (b) Bloc resultats reorganise : "Total investi" et "Capital
 *         final" cote a cote sur une meme ligne (auparavant empiles avec
 *         "Capital projete" en premier), le graphique conserve les libelles
 *         "Capital projete" / "Versements cumules" pour ses deux courbes
 *         (ce sont des series dans le temps, distinctes des deux chiffres
 *         de synthese ci-dessus).
 *         (c) Mention legale de fin de simulateur fusionnee en un seul
 *         paragraphe.
 * 1.0.2 - Page toujours pas en ligne : deuxieme revision, retours d'Oriane
 *         apres la premiere maquette. Changements :
 *         (a) Icone de la carte "Projection d'investissement" refaite :
 *         l'ancien dessin (une courbe + un empenage en forme de fleche a
 *         son extremite) donnait l'impression que la courbe redescendait
 *         brutalement a la fin. Nouveau dessin : un repere abscisses/
 *         ordonnees (angle en L) et une courbe exponentielle strictement
 *         croissante qui se termine par un point, sans empenage.
 *         (b) Chevauchement hero/cartes recalibre pour que le fond fonce du
 *         hero descende jusqu'a environ la moitie de la carte (au lieu
 *         d'environ un sixieme avant ce correctif), ce qui supprime la
 *         bande claire visible entre le hero et le reste de la page. Meme
 *         principe que sur la page contact : une marge inferieure de 100px
 *         est ajoutee sous le paragraphe d'intro du hero (.sim-hero-head),
 *         pour liberer la place que prend la remontee des cartes (marge
 *         negative de .sim-methods-straddle passee de -50px a -150px,
 *         valeur identique a .contact-methods-straddle) ; sans cette marge,
 *         une remontee aussi importante chevaucherait le paragraphe (bug
 *         deja rencontre et corrige lors de la revision precedente).
 *         Verifie par mesure reelle (getBoundingClientRect), pas par
 *         copie a l'identique.
 *         (c) Bloc resultats : "Total investi", "Capital final" et "Gains"
 *         sont desormais sur une meme ligne a 3 colonnes, dans la meme
 *         police et la meme taille (le libelle "Capital final" n'a plus de
 *         chiffre plus gros que les autres). Le bloc "Gains" recoit un fond
 *         teinte (var(--pale-tint)) pour le mettre en valeur, a la place de
 *         l'ancienne mention "Dont X de gains potentiels" sous le capital
 *         final.
 *         (d) Legende du graphique ("Capital projete" / "Versements
 *         cumules") deplacee sous le graphique, juste avant la phrase de
 *         prevention (au lieu d'etre affichee au dessus).
 *         (e) Curseurs : ajout d'une barre de progression pleine (vert
 *         fonce) a gauche du curseur pour visualiser la position, en plus
 *         du curseur rond. Techniquement, un dégradé CSS sur la piste du
 *         curseur (::-webkit-slider-runnable-track / ::-moz-range-track)
 *         pilote par une variable CSS (--sim-fill) que le JS met a jour a
 *         chaque mouvement.
 *         (f) Section de fin (#sim-closing) : le fond blanc entre le
 *         simulateur et les CTA est remplace par la meme teinte pale-tint
 *         que le reste de la page (suppression de la bande blanche), les
 *         paddings verticaux sont reduits, et un bloc "agrements" est
 *         ajoute sous les CTA (memes mentions Certifie AMF / Orias /
 *         Inovea / Cncef que sur la page a propos, .cred-item), pour ne
 *         pas terminer la page sur des boutons seuls.
 * 1.0.3 - Page toujours pas en ligne : troisieme revision, retours d'Oriane
 *         apres verification sur son propre environnement (le vrai theme,
 *         pas notre maquette locale). Changements :
 *         (a) La bande blanche etait en fait toujours visible tout autour
 *         de la carte, pas seulement au dessus d'elle : .sim-methods-straddle
 *         n'a pas de fond (transparent, pour laisser le degrade du hero
 *         traverser dans la zone de chevauchement), donc tout ce qui n'est
 *         pas recouvert par la carte elle-meme montrait le fond blanc par
 *         defaut de la page, jusqu'a ce que #sim-tools (fond pale-tint)
 *         commence plus bas. Sur la page contact ce probleme ne se voit pas
 *         car #contact-form, la section qui suit, est deja en blanc (meme
 *         couleur que le fond de page = pas de bande visible). Corrige en
 *         passant le fond de #lcb-page en pale-tint sur cette page (regle
 *         scopee a ce fichier, donc sans effet sur les autres templates qui
 *         partagent cet id) : la zone autour de la carte est maintenant
 *         dans la meme teinte que #sim-tools, sans coupure.
 *         (b) Bouton "Simuler" : le survol passait en vert clair
 *         (var(--vert-pale)), passe en blanc. Ajout d'une regle dediee pour
 *         le cas ou la carte est deja active (etat par defaut ici avec un
 *         seul simulateur) : sans elle, la regle .is-active (plus
 *         specifique) gardait la main sur la couleur au survol.
 *         (c) Curseurs : le vert utilise pour la barre de progression et le
 *         point (var(--vert-lcb), #023631) est tres fonce et se lisait
 *         comme du noir a l'echelle d'un curseur. Remplace par
 *         var(--vert-signature) (#0A5C52), deja utilise ailleurs (courbe du
 *         graphique) comme vert fonce mais lisible.
 *         (d) Bloc "Gains" : le padding ajoute pour le fond teinte decalait
 *         son contenu vers le bas par rapport aux deux autres chiffres (qui
 *         n'ont pas de padding), d'ou le desalignement signale par Oriane.
 *         Corrige avec une marge negative egale au padding (le fond/rayon
 *         debordent visuellement, mais la position du texte dans le flux
 *         redevient identique aux deux autres blocs). Fond passe de
 *         pale-tint a var(--vert-signature), libelle et chiffre en blanc,
 *         pour un vrai contraste plutot qu'une teinte claire a peine
 *         visible.
 *         (e) Phrase de prevention (.sim-disclaimer) passee en italique.
 *         (f) Trait de separation et espace avant "Envie d'affiner cette
 *         projection..." supprimes/reduits : .faq-closing (classe partagee
 *         avec d'autres pages) est surchargee ici pour ce template
 *         uniquement (marge, padding et bordure remises a zero), sans
 *         toucher a la regle partagee.
 *         (g) Icone de la carte : ajout de fleches au bout des axes
 *         (abscisses et ordonnees), qui manquaient.
 *         (h) Noms de fichiers des logos "agrements" corriges suite au
 *         retour d'Oriane : amf.png / orias.png / inovea.png / cncef.png
 *         (au lieu de logo-amf.png etc., qui etait une supposition).
 * 1.0.4 - Page toujours pas en ligne : quatrieme revision, retours d'Oriane
 *         apres verification sur son propre environnement. Changements :
 *         (a) Le fond vert du bloc "Gains" depassait sous le trait de
 *         separation du bloc resultats. La marge negative qui compense le
 *         padding (voir 1.0.3(d)) ne compensait que le haut : marge et
 *         padding s'annulent en haut (le contenu revient a sa position
 *         normale), mais en bas rien ne compense le padding ajoute, donc le
 *         bord visible du fond descendait de la valeur du padding-bottom en
 *         trop. Corrige en supprimant le padding-bottom (et la marge
 *         negative correspondante) : le bas du fond colle maintenant
 *         exactement au bas du texte, aligne sur le trait de separation.
 *         (b) Legende du graphique centree horizontalement (elle etait
 *         alignee a gauche par defaut).
 *         (c) Phrase de prevention mise a jour (nouveau texte demande par
 *         Oriane).
 *         (d) Ombre portee sous le simulateur (.sim-grid) : sa portee (60px
 *         de flou) depassait le padding-bottom de #sim-tools (48px), donc
 *         elle n'avait pas fini de s'estomper quand #sim-closing (fond
 *         opaque) commence juste apres et la recouvre d'un coup : la
 *         degrade progressif de l'ombre s'arretait donc net a la frontiere
 *         entre les deux sections, ce qui se voit comme un trait. Solution
 *         retenue parmi les deux proposees par Oriane : plutot que fusionner
 *         les deux sections en une seule (risque de complexifier les fonds
 *         differents dont chaque section a besoin), l'ombre est resserree
 *         (moins de flou, decalage reduit) et assombrie (opacite plus
 *         forte) pour qu'elle se termine bien avant la frontiere et qu'elle
 *         ressorte davantage.
 * 1.0.5 - Page toujours pas en ligne : cinquieme revision, le correctif
 *         1.0.4(a) etait pire que le probleme initial (retour d'Oriane,
 *         avec capture du resultat voulu) : en supprimant uniquement le
 *         padding-bottom, le bas du fond collait au texte (plus d'air en
 *         dessous du montant) alors que le cote droit continuait de
 *         s'etirer jusqu'au bord de la colonne (jamais corrige). Repense
 *         entierement : le bloc "Gains" est maintenant une vraie carte
 *         autonome avec un padding egal sur ses 4 cotes (comme demande),
 *         plutot qu'un fond etire sur toute la largeur de la colonne de
 *         grille avec des marges negatives pour compenser. justify-self:start
 *         et width:fit-content l'empechent de s'etirer horizontalement :
 *         la carte ne fait plus que la largeur de son contenu, avec de
 *         l'air identique des 4 cotes, et ne touche plus le bord droit du
 *         panneau. Verticalement, plus besoin de marge negative : le
 *         comportement par defaut de la grille (les elements s'etirent
 *         pour remplir la hauteur de la ligne, determinee par le plus
 *         grand d'entre eux) fait que la ligne entiere s'agrandit pour
 *         laisser la place a cette carte plus haute, et le trait de
 *         separation suit automatiquement, sans jamais se faire chevaucher
 *         ni coller. Consequence de ce choix : le libelle "Gains" se
 *         retrouvait legerement plus bas que "Total investi" / "Capital
 *         final" (son padding interne le decale).
 * 1.0.6 - Page toujours pas en ligne : sixieme revision, Oriane confirme
 *         que le padding de la carte "Gains" est desormais correct mais
 *         signale que ce decalage vertical residuel (consequence acceptee
 *         en 1.0.5) ne convient pas : elle veut le padding ET l'alignement
 *         horizontal avec les deux autres chiffres. Ajout de
 *         margin-top:-16px (egal au padding-top) sur .sim-result-block.is-gains :
 *         annule le decalage que le padding-top provoquait sur le texte,
 *         sans rien changer au padding lui-meme ni a la largeur contenue
 *         (justify-self/width:fit-content, voir 1.0.5) ni au comportement
 *         de la ligne de grille qui evite toujours le chevauchement avec
 *         le trait de separation. Verifie par mesure : libelles et
 *         montants parfaitement alignes (ecart de 0px) sur les 3 colonnes.
 * 1.0.7 - Page desormais en ligne (confirme par Oriane) : retour au workflow
 *         CSS append-only strict a partir de cette revision (l'exception de
 *         revision directe en place, appliquee de 1.0.1 a 1.0.6 tant que la
 *         page n'etait pas publiee, ne s'applique plus). Trois correctifs
 *         mobile (moins de 900px), tous verifies par rendu reel (Playwright,
 *         DOM/CSS reels de ce fichier, mesure programmatique avant/apres a
 *         plusieurs largeurs) :
 *         (a) Padding du bloc "Gains" absent en bas sur mobile (moins de
 *         600px), signale par Oriane avec capture. Cause trouvee par mesure :
 *         sous 600px, la regle ".sim-result-row .sim-result-block:last-child"
 *         (ajoutee en 1.0.0, pensee pour retirer la bordure/le padding de
 *         separation du dernier chiffre empile) a une specificite plus
 *         elevee que ".sim-result-block.is-gains" et remet donc
 *         padding-bottom a 0, alors que "Gains" est justement toujours le
 *         dernier bloc de la ligne. Mesure avant correctif : padding calcule
 *         de la carte "Gains" en dessous de 600px = 16px/20px/0px/20px (haut/
 *         droite/bas/gauche) au lieu de 16px/20px/16px/20px sur desktop,
 *         d'ou le montant colle au bord inferieur du fond vert. Un selecteur
 *         plus specifique (ajoutant ".is-gains" a la chaine) restaure les
 *         16px du bas sans toucher a la regle 1.0.0 existante, qui reste
 *         utile pour les deux autres chiffres.
 *         (b) L'ombre de ".sim-grid" (resserree en 1.0.4 pour ne plus se
 *         faire couper par #sim-closing en desktop) se refaisait couper en
 *         mobile, signale par Oriane. Cause trouvee par mesure : le
 *         padding-bottom de #sim-tools qui doit absorber cette ombre est
 *         "min(4vw,48px)", une valeur pensee pour desktop qui redescend tres
 *         bas sur petit ecran (15px a 375px de large, 24px a 600px, contre
 *         48px a partir de 900px). L'ombre (14px de decalage + 32px de flou,
 *         environ 46px de portee visuelle) n'a alors plus assez de place
 *         pour s'estomper avant le fond opaque de #sim-closing. On fixe ce
 *         padding a 48px (meme valeur que sur desktop) sous 900px plutot que
 *         de le laisser retrecir avec la largeur d'ecran. Verifie par mesure
 *         (espace disponible pour l'ombre passe de 15-36px a 48px de 375 a
 *         900px) et par capture (le trait net a la jonction des deux
 *         sections disparait, remplace par un degrade progressif).
 *         NOTE non corrigee ici, hors perimetre des 3 signalements
 *         d'Oriane : la meme formule "min(4vw,48px)" retombe legerement en
 *         dessous de 48px juste au dessus de 900px (ex. 36px a 901px de
 *         large), avant de remonter a 48px a partir de 1200px. C'est un
 *         comportement deja present avant cette session (pas introduit par
 *         ce correctif), sur une largeur qui n'est pas consideree "mobile"
 *         par le reste du site (toutes les media queries du theme utilisent
 *         le seuil 900px). A signaler a Oriane si elle veut que ce soit
 *         corrige aussi.
 *         (c) Les 4 logos "agrements" sous "Un cabinet encadre..." ne
 *         reprenaient pas, sous 900px, la mise en page de la page Contact
 *         (".contact-trust-row" / ".cred-item") qu'Oriane demande de
 *         reprendre telle quelle : ils restaient sur une grille a 2 colonnes
 *         avec bordure gauche et texte aligne a gauche, au lieu d'une colonne
 *         centree sans bordure. On reprend la meme recette que
 *         lcb-patrimoine-contact.css (empilement vertical centre, bordure
 *         gauche retiree), au meme seuil que la page Contact (900px, plus
 *         large que le seuil de 600px deja utilise plus haut dans ce fichier
 *         pour ".sim-agrements-row", qui reste en place et ne gene pas :
 *         ses reglages ne portent que sur justify-content, sans effet une
 *         fois passe en colonne). Verifie par capture, compare cote a cote
 *         avec le rendu reel de la page Contact au meme format.
 */

/* Fond de page en pale-tint (voir changelog 1.0.3(a)) : #lcb-page est l'id
   du wrapper partage par tous les templates custom, mais cette regle ne
   s'applique qu'ici puisque ce fichier n'est charge que sur le template
   des simulateurs. #sim-hero garde son propre degrade par dessus. */
#lcb-page{background:var(--pale-tint);}

/* ---------- HERO ---------- */
#sim-hero{
  min-height:auto;position:relative;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 32% 30%, #067064 0%, #04473f 28%, #011c18 58%, #000403 100%);
  color:var(--blanc);
  padding-top:160px;padding-bottom:90px;
}
#sim-hero .watermark{
  position:absolute;left:-11%;top:38%;transform:translateY(-50%);
  width:42vw;max-width:620px;opacity:0.05;pointer-events:none;
}
.sim-hero-head{position:relative;z-index:2;max-width:720px;margin:0 auto 100px;text-align:center;}
.sim-hero-head .eyebrow{margin-bottom:22px;}
.sim-hero-head h1{
  font-size:clamp(2.1rem,4vw,3.1rem);color:var(--blanc);
  line-height:1.16;margin-bottom:24px;letter-spacing:0.005em;
}
.sim-hero-head .sub{
  font-size:clamp(1rem,1.3vw,1.14rem);color:rgba(255,255,255,0.82);
  font-style:italic;max-width:640px;margin:0 auto;
}

/* ---------- CARTES A CHEVAL (choix du simulateur) ---------- */
/* Meme principe que .contact-methods-straddle (lcb-patrimoine-contact.css) :
   marge negative qui tire les cartes vers le haut, dans l'espace du
   padding-bottom du hero. Cet element n'a pas overflow:hidden (contrairement
   a #sim-hero, qui en a besoin pour rogner son propre filigrane), rien ne
   vient donc rogner le debordement vers le haut.
   Meme valeur que .contact-methods-straddle (-150px), ce qui fait descendre
   le fond fonce du hero jusqu'a environ la moitie de la carte (demande
   d'Oriane : supprimer la bande claire entre le hero et le reste de la
   page). La carte "Projection d'investissement" reste plus haute que
   .contact-method (icone + titre + description + bouton, contre icone +
   label + lien) : la marge de 100px ajoutee sous .sim-hero-head (voir
   plus haut) est necessaire pour eviter que cette remontee ne chevauche a
   nouveau le paragraphe d'intro, comme lors de la revision precedente.
   Verifie par mesure reelle (getBoundingClientRect), pas par copie a
   l'identique. */
.sim-methods-straddle{
  position:relative;z-index:3;
  margin-top:-150px;
  padding:0 8vw;
}
.sim-cards{
  display:flex;flex-wrap:wrap;justify-content:center;gap:min(4vw,44px);
  max-width:1080px;margin:0 auto;
}
.sim-card{
  text-align:center;padding:40px 30px;border-radius:10px;width:280px;
  background:linear-gradient(180deg, var(--vert-lcb) 0%, var(--vert-lcb) 45%, #01100e 100%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 24px 50px rgba(2,42,37,0.28);
  display:flex;flex-direction:column;align-items:center;
  transition:box-shadow .3s ease, transform .3s ease;
}
.sim-card:hover{box-shadow:0 30px 60px rgba(2,42,37,0.34);transform:translateY(-3px);}
.sim-card-icon{
  width:64px;height:64px;border-radius:50%;margin-bottom:20px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--vert-pale);
  border:1px solid rgba(255,255,255,0.28);
}
.sim-card-icon svg{width:30px;height:auto;}
.sim-card-label{
  font-family:var(--serif-display);font-style:italic;font-weight:600;font-size:1.15rem;
  color:var(--blanc);margin-bottom:12px;
}
.sim-card p{font-size:.92rem;color:rgba(255,255,255,0.68);margin-bottom:22px;}
.sim-card-cta{
  font-family:var(--sans-caps);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  padding:12px 28px;border-radius:2px;border:1px solid var(--vert-pale);
  background:transparent;color:var(--vert-pale);cursor:pointer;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.sim-card-cta:hover{background:var(--blanc);color:var(--vert-lcb);border-color:var(--blanc);}
.sim-card.is-active .sim-card-cta{background:var(--vert-pale);color:var(--vert-lcb);}
/* Sans cette regle, .is-active (plus specifique que :hover seul) garderait
   la main sur la couleur au survol : avec un seul simulateur la carte est
   deja active par defaut, donc le survol ne montrerait jamais le blanc
   demande ci-dessus. */
.sim-card.is-active .sim-card-cta:hover{background:var(--blanc);color:var(--vert-lcb);border-color:var(--blanc);}

/* ---------- PANNEAU DU SIMULATEUR ---------- */
/* padding-bottom reduit (le defaut de .section, min(11vw,140px), ajoute a
   celui de #sim-closing donnait un espace trop grand avant "Envie
   d'affiner...", retour d'Oriane). */
#sim-tools{background:var(--pale-tint);padding-bottom:min(4vw,48px);}
.sim-panel{display:none;}
.sim-panel.is-active{display:block;}
/* Ombre resserree (moins de flou, decalage reduit) et assombrie : avec les
   valeurs precedentes (0 24px 60px, opacite 0.08) le degrade de l'ombre
   n'avait pas fini de s'estomper avant la fin du padding-bottom de
   #sim-tools, et se faisait donc couper net par le fond opaque de
   #sim-closing juste apres (visible comme un trait, retour d'Oriane). */
.sim-grid{
  display:grid;grid-template-columns:0.92fr 1.08fr;gap:min(6vw,64px);
  align-items:start;
  background:var(--blanc);border-radius:6px;
  padding:min(5vw,52px);
  box-shadow:0 14px 32px rgba(2,54,49,0.14);
}

/* ---------- CURSEURS ---------- */
.sim-controls{display:flex;flex-direction:column;gap:30px;}
.sim-field-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-bottom:12px;
}
.sim-field-head label{
  font-family:var(--serif-labeur);font-size:.98rem;color:var(--noir-encre);
}
.sim-field-head output{
  font-family:var(--sans-caps);font-size:13px;font-weight:600;
  color:var(--vert-lcb);white-space:nowrap;
}
/* Piste avec barre de progression pleine a gauche du curseur (demande
   d'Oriane, voir capture jointe) : un input[type=range] natif ne propose pas
   ce remplissage tout seul, donc la piste est peinte avec un degrade
   (couleur pleine jusqu'a la position courante, puis --filet ensuite),
   pilote par la variable CSS --sim-fill que le JS recalcule a chaque
   mouvement de curseur (voir applySliderFill() dans
   lcb-patrimoine-simulateurs.js). Le degrade est declare separement sur les
   deux pseudo-elements de piste (Chrome/Safari et Firefox n'exposent pas la
   meme pseudo-classe), la valeur de --sim-fill est la meme des deux cotes
   car c'est une variable CSS heritee depuis l'element input. */
.sim-field input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:3px;
  background:var(--filet);
  outline:none;cursor:pointer;
}
/* var(--vert-lcb) (#023631) est tres fonce et se lisait comme du noir a
   l'echelle d'un curseur (retour d'Oriane) : var(--vert-signature)
   (#0A5C52) reste un vert fonce mais reste lisible comme tel. */
.sim-field input[type="range"]::-webkit-slider-runnable-track{
  height:6px;border-radius:3px;
  background:linear-gradient(to right, var(--vert-signature) var(--sim-fill,0%), var(--filet) var(--sim-fill,0%));
}
.sim-field input[type="range"]::-moz-range-track{
  height:6px;border-radius:3px;
  background:linear-gradient(to right, var(--vert-signature) var(--sim-fill,0%), var(--filet) var(--sim-fill,0%));
}
.sim-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;margin-top:-6px;
  background:var(--vert-signature);border:2px solid var(--blanc);
  box-shadow:0 1px 4px rgba(2,54,49,0.35);
  cursor:pointer;
}
.sim-field input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--vert-signature);border:2px solid var(--blanc);
  box-shadow:0 1px 4px rgba(2,54,49,0.35);
  cursor:pointer;
}

/* ---------- RESULTATS ---------- */
/* Les 3 chiffres (Total investi / Capital final / Gains) partagent
   desormais la meme ligne, la meme police et la meme taille : demande
   d'Oriane, il n'y a plus de hierarchie visuelle (auparavant "Capital
   final" avait un chiffre plus grand). Le bloc "Gains" recoit un fond
   teinte pour rester mis en valeur autrement que par la taille. */
.sim-results{display:flex;flex-direction:column;}
.sim-result-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--filet);
}
.sim-result-block .eyebrow{display:block;margin-bottom:10px;}
.sim-result-figure{
  font-family:var(--serif-display);font-weight:600;
  font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--vert-lcb);line-height:1.15;
  white-space:nowrap;
}
/* Bloc "Gains" : une vraie carte autonome (padding egal des 4 cotes),
   plutot qu'un fond etire sur toute la colonne de la grille. justify-self:start
   et width:fit-content l'empechent de s'etirer horizontalement (elle ne
   fait plus que la largeur de son contenu, avec de l'air identique a
   gauche et a droite). Reste le sens vertical : avec un padding-top de
   16px et rien pour le compenser, le libelle "GAINS" se retrouvait 16px
   plus bas que "Total investi" / "Capital final" (signale par Oriane).
   margin-top:-16px (egal au padding-top) annule ce decalage : le texte
   revient exactement a la meme hauteur que les deux autres chiffres, la
   carte remonte d'autant (elle deborde legerement au dessus de la ligne,
   dans l'espace du padding genereux de .sim-grid, sans consequence
   visible). Le bas, lui, n'a pas besoin d'etre compensable : le
   comportement de grille (ligne dimensionnee sur le plus grand element)
   fait que le trait de separation suit toujours la carte sans jamais se
   faire chevaucher. */
.sim-result-block.is-gains{
  background:var(--vert-signature);border-radius:8px;
  padding:16px 20px;
  margin-top:-16px;
  justify-self:start;
  width:fit-content;
  max-width:100%;
}
.sim-result-block.is-gains .eyebrow{color:var(--blanc);}
.sim-result-block.is-gains .sim-result-figure{color:var(--blanc);}

/* ---------- GRAPHIQUE ---------- */
.sim-chart-wrap{margin-top:6px;}
.sim-chart-legend{
  display:flex;justify-content:center;gap:22px;margin-top:14px;
  font-family:var(--sans-caps);font-size:11px;letter-spacing:0.04em;color:var(--gris-fonction);
}
.sim-chart-legend span{display:inline-flex;align-items:center;gap:8px;}
.sim-legend-dot{width:9px;height:9px;border-radius:2px;display:inline-block;}
.sim-legend-dot-capital{background:var(--vert-signature);}
.sim-legend-dot-verse{background:var(--gris-mentions);}
.sim-chart{width:100%;height:auto;display:block;}
.sim-chart .sim-chart-grid-line{stroke:var(--filet);stroke-width:1;}
.sim-chart .sim-chart-axis-label{
  font-family:var(--sans-caps);font-size:10px;fill:var(--gris-fonction);
}
.sim-chart .sim-chart-area{fill:var(--pale-tint);}
.sim-chart .sim-chart-line-capital{fill:none;stroke:var(--vert-signature);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.sim-chart .sim-chart-line-verse{fill:none;stroke:var(--gris-mentions);stroke-width:1.6;stroke-dasharray:2,5;stroke-linecap:round;}

/* ---------- MENTIONS ---------- */
.sim-disclaimer{font-size:.78rem;color:var(--gris-mentions);line-height:1.6;margin-top:26px;font-style:italic;}

/* ---------- FIN DE PAGE (CTA + agrements) ---------- */
/* La bande blanche que Oriane signalait entre le simulateur et les CTA
   venait du fond blanc par defaut de #sim-closing (heritee du body) alors
   que le reste de la page (hero excepte) est en pale-tint : on continue
   donc cette meme teinte ici, et les paddings verticaux (par defaut
   min(11vw,140px) via .section) sont reduits puisqu'il n'y a plus besoin
   d'un grand espace neutre pour separer visuellement deux fonds
   differents. */
#sim-closing{
  background:var(--pale-tint);
  padding-top:min(4vw,40px);padding-bottom:min(7vw,86px);
}
/* .faq-closing est une classe partagee avec d'autres pages (elle y affiche
   un separateur et un grand espace au dessus, pertinents ailleurs) : on ne
   touche pas la regle partagee, on la surcharge seulement ici, pour ce
   template, en remettant marge/padding/bordure a zero (demande d'Oriane :
   supprimer le trait et reduire l'espace avant "Envie d'affiner..."). */
#sim-closing .faq-closing{margin-top:0;padding-top:0;border-top:none;}

/* Bloc "agrements" (Certifie AMF / N* Orias / Membre Inovea / Membre
   Cncef) : memes mentions et meme recette visuelle que .cred-item sur la
   page a propos (bordure a gauche, logo en niveaux de gris qui reprend sa
   couleur au survol), pour eviter de terminer la page des simulateurs sur
   des boutons seuls. Suppose que les fichiers logo-amf.png / logo-orias.png
   / logo-inovea.png / logo-cncef.png existent deja dans assets/img (memes
   noms que ceux utilises par la page a propos) : a verifier cote WordPress,
   je n'ai pas acces au dossier reel du theme pour le confirmer. */
.sim-agrements{
  margin-top:52px;padding-top:40px;
  border-top:1px solid var(--filet);
  text-align:center;
}
.sim-agrements-eyebrow{
  font-family:var(--sans-caps);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--vert-lcb);margin-bottom:26px;
}
.sim-agrements-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  column-gap:36px;row-gap:22px;
}
.sim-agrement-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding-left:16px;border-left:1px solid var(--vert-lcb);
  min-width:100px;text-align:left;
}
.sim-agrement-label{
  font-family:var(--sans-caps);font-size:11px;letter-spacing:0.09em;color:var(--vert-lcb);
}
.sim-agrement-logo img{
  height:22px;width:auto;display:block;
  filter:brightness(0) invert(40%);
  transition:filter .4s ease;
}
.sim-agrement-logo img.logo-amf{height:17px;margin-top:5px;}
.sim-agrement-logo img.logo-inovea{height:16px;margin-top:6px;}
.sim-agrement-logo img.logo-orias{height:27px;}
.sim-agrement-logo img.logo-cncef{height:21px;}
.sim-agrement-item:hover .sim-agrement-logo img{filter:brightness(1) invert(0%);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  #sim-hero{padding-top:200px;}
  #sim-hero .watermark{
    left:50%;top:auto;bottom:-4%;transform:translateX(-50%);
    width:70vw;max-width:420px;opacity:0.04;
  }
  .sim-methods-straddle{margin-top:-36px;padding:0 24px;}
  .sim-grid{grid-template-columns:1fr;gap:44px;padding:32px 22px;}
}
@media (max-width:600px){
  .sim-result-row{grid-template-columns:1fr;gap:0;}
  .sim-result-row .sim-result-block{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--filet);}
  .sim-result-row .sim-result-block:last-child{padding-bottom:0;margin-bottom:0;border-bottom:none;}
  .sim-result-row .sim-result-block.is-gains{border-bottom:none;}
  .sim-agrements-row{justify-content:flex-start;}
}

/* ==================================================================
   1.0.7 - Trois correctifs mobile (voir le changelog en tete de fichier
   pour le detail du diagnostic de chacun) : padding bas du bloc "Gains",
   ombre du simulateur coupee, alignement des logos "agrements"
   ================================================================== */

/* (a) Le bloc "Gains" est toujours le dernier des 3 chiffres, donc toujours
   cible par la regle ".sim-result-row .sim-result-block:last-child" plus
   haut (plus specifique que ".sim-result-block.is-gains" seule), qui remet
   son padding-bottom a 0 sous 600px. On restaure les 16px du bas
   uniquement pour "Gains" (carte autonome a padding egal sur ses 4 cotes,
   voir 1.0.5/1.0.6), sans toucher a la regle existante qui reste correcte
   pour les deux autres chiffres. */
@media (max-width:600px){
  .sim-result-row .sim-result-block.is-gains:last-child{
    padding-bottom:16px;
  }
}

/* (b) + (c) : correctifs sous 900px (seuil "mobile" utilise par le reste du
   theme). */
@media (max-width:900px){
  /* (b) padding-bottom fixe (au lieu de min(4vw,48px), qui retombe a 15-36px
     sur mobile) pour laisser assez de place a l'ombre de ".sim-grid" (14px
     de decalage + 32px de flou) avant le fond opaque de #sim-closing. */
  #sim-tools{padding-bottom:48px;}

  /* (c) Meme recette que ".contact-trust-row" / ".cred-item"
     (lcb-patrimoine-contact.css) : empilement vertical centre, bordure
     gauche retiree. La regle ".sim-agrements-row{justify-content:flex-start}"
     plus haut (sous 600px) reste en place sans effet une fois passe en
     colonne (justify-content pilote alors l'axe vertical, deja flex-start
     par defaut). */
  .sim-agrements-row{flex-direction:column;align-items:center;gap:20px;}
  .sim-agrement-item{text-align:center;padding-left:0;border-left:none;}
}

/* ==================================================================
   1.0.8 - Deuxieme simulateur, retours d'Oriane : cartes de selection en
   defilement horizontal sous 900px (au lieu d'un passage a la ligne) avec
   deux fleches de navigation, carte un peu plus compacte et straddle un
   peu plus remontee sur ce meme palier
   ================================================================== */

/* Conteneur position:relative pour ancrer les fleches ; celles-ci sont
   communes aux deux formats (elles se masquent seules en desktop via JS,
   voir initSimCardsScroll() dans lcb-patrimoine-simulateurs.js, des que
   le train de cartes ne deborde pas), donc definies hors media query. */
.sim-cards-scroll{position:relative;}
.sim-cards-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--blanc);border:1px solid var(--filet);
  color:var(--vert-lcb);cursor:pointer;z-index:4;
  box-shadow:0 8px 20px rgba(2,54,49,0.18);
  transition:box-shadow .25s ease;
}
.sim-cards-arrow svg{width:15px;height:15px;}
.sim-cards-arrow-prev{left:-6px;}
.sim-cards-arrow-next{right:-6px;}
.sim-cards-arrow:hover{box-shadow:0 10px 26px rgba(2,54,49,0.26);}
.sim-cards-arrow[hidden]{display:none;}

@media (max-width:900px){
  /* Defilement horizontal plutot que passage a la ligne : la piste garde
     une seule ligne (flex-wrap:nowrap) et deborde du conteneur au lieu de
     s'empiler, avec un accrochage carte par carte (scroll-snap) et sans
     barre de defilement visible (comportement natif du navigateur, pas
     une barre custom). */
  .sim-cards{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:4px;
  }
  .sim-cards::-webkit-scrollbar{display:none;}
  .sim-card{
    scroll-snap-align:start;flex:0 0 auto;
    width:240px;padding:30px 22px;
  }

  /* Straddle un peu plus remontee (-56px au lieu de -36px) pour degager
     de la place avant le formulaire : demande d'Oriane, moins a scroller
     pour atteindre les curseurs si on n'a besoin que de remplir le
     formulaire. */
  .sim-methods-straddle{margin-top:-56px;}

  .sim-cards-arrow{width:34px;height:34px;}
  .sim-cards-arrow svg{width:13px;height:13px;}
  .sim-cards-arrow-prev{left:2px;}
  .sim-cards-arrow-next{right:2px;}
}

/* ==================================================================
   1.0.9 - Retour d'Oriane : libelles d'axe des graphiques (montants,
   "Annee", numeros d'annee) peu lisibles sur mobile, sur les deux
   simulateurs
   ================================================================== */

/* Le graphique est un SVG au viewBox fixe (600x320, voir drawChart() dans
   lcb-patrimoine-simulateurs.js) qui se redimensionne en fluide (.sim-chart
   {width:100%}). Sa consequence, verifiee par mesure programmatique : la
   taille de police de .sim-chart-axis-label, bien qu'exprimee en px, est en
   realite mise a l'echelle avec la largeur du conteneur (comme le reste du
   dessin SVG), et non fixe en pixels ecran. Sous 900px, le graphique passe
   en pleine largeur de colonne (".sim-grid" en une seule colonne) et reste
   lisible (14px environ) jusque vers 650-700px, mais se retrecit ensuite
   avec l'ecran et les libelles deviennent tres petits en dessous de 600px
   (mesure : 9px a 600px de large, jusqu'a 5px a 375px, l'ecart signale par
   Oriane). On grossit donc la police des libelles sous 600px, meme seuil
   que le reste du fichier pour les ajustements fins de ce type. drawChart()
   a ete mis a jour en parallele (LCB_JS_VER 1.0.9) pour que la marge
   reservee a gauche du graphique s'adapte a la largeur reelle des libelles
   au lieu d'une valeur fixe, afin qu'une police plus grande ne les fasse
   pas deborder du cadre. */
@media (max-width:600px){
  .sim-chart .sim-chart-axis-label{font-size:20px;}
}

/* ==================================================================
   1.0.10 - Troisieme simulateur, "Avantage fiscal du PER" : groupe de
   boutons pour la tranche marginale d'imposition (TMI), et barre
   proportionnelle economie d'impot / cout reel net (drawTaxBar() dans
   lcb-patrimoine-simulateurs.js, a la place de drawChart() : pas de serie
   temporelle sur ce simulateur)
   ================================================================== */

/* Boutons TMI : meme famille visuelle que .sim-card-cta / .btn-dark
   (police --sans-caps, memes transitions), mais pleine largeur en ligne
   (5 tranches fixes, pas un curseur) plutot qu'un bouton isole. */
.sim-tmi-group{display:flex;gap:6px;flex-wrap:wrap;justify-content:space-between;}
.sim-tmi-btn{
  flex:0 1 auto;min-width:44px;padding:10px 8px;border-radius:6px;
  border:1px solid var(--filet);background:var(--blanc);color:var(--gris-fonction);
  font-family:var(--sans-caps);font-size:13px;font-weight:600;letter-spacing:0.02em;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.sim-tmi-btn:hover{border-color:var(--vert-signature);color:var(--vert-lcb);}
.sim-tmi-btn.is-active{background:var(--vert-signature);border-color:var(--vert-signature);color:var(--blanc);}

/* Barre economie d'impot / cout reel net : memes couleurs que le reste des
   graphiques (vert-signature = mis en valeur, gris-mentions = neutre, deja
   utilisees par .sim-legend-dot-capital / .sim-legend-dot-verse, reprises
   telles quelles pour la legende de ce panneau afin que les couleurs de la
   barre et de sa legende correspondent exactement). Opacite reduite sur le
   segment gris : en aplat plein sur une grande surface, gris-mentions
   (prevu a l'origine pour du texte/un pointille) paraissait plus lourd que
   le reste de la page, plus clair et plus proche en poids visuel de
   .sim-chart-area (pale-tint) qui joue un role equivalent sur les 2 autres
   graphiques. */
.sim-chart .sim-taxbar-economie{fill:var(--vert-signature);}
.sim-chart .sim-taxbar-cout{fill:var(--gris-mentions);opacity:0.4;}
.sim-chart .sim-taxbar-value{
  font-family:var(--serif-display);font-weight:600;font-size:22px;fill:var(--vert-lcb);
}
@media (max-width:600px){
  .sim-chart .sim-taxbar-value{font-size:30px;}
}

/* Avec une 3e carte, ".sim-cards" (flex-wrap:wrap par defaut, voir plus
   haut) passe a la ligne (2 cartes puis 1 seule en dessous) entre 901px et
   ~1104px : a cette largeur, les 3 cartes de 280px cote a cote (plus les
   deux espaces de gap) ne rentrent plus dans le conteneur, mais on est
   encore au dessus du seuil de 900px qui declenche le defilement
   horizontal. Verifie par mesure (position Y de chaque carte) : passage a
   la ligne confirme de 901 a 1104px, plus de passage a la ligne a partir de
   1105px. Un deuxieme bloc de defilement horizontal, uniquement pour cet
   intervalle (901-1120px, avec une marge de securite au dela du seuil
   mesure), reprend la meme recette que le bloc ci-dessus SANS reprendre la
   reduction de taille des cartes (240px), reservee au format vraiment
   mobile : entre 900 et 1120px les cartes gardent leur taille par defaut
   (280px), seul le mecanisme de defilement s'active. */
@media (min-width:901px) and (max-width:1120px){
  .sim-cards{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:4px;
  }
  .sim-cards::-webkit-scrollbar{display:none;}
  .sim-card{scroll-snap-align:start;flex:0 0 auto;}
}

/* ==================================================================
   1.0.11 - Retours d'Oriane sur le simulateur "Avantage fiscal du PER" :
   plage du curseur de versement modifiee (deja en place cote
   template-simulateurs.php), libelles des resultats renommes, et
   deuxieme paragraphe de mention ajoute, mis en valeur en vert fonce avec
   une icone d'alerte. En version mobile, la carte affichee au defilement
   doit desormais etre centree plutot qu'alignee a gauche
   ================================================================== */

/* Paragraphe "attention" du disclaimer PER : distinct du premier paragraphe
   (qui reste en italique, gris, voir .sim-disclaimer plus haut) pour se
   demarquer comme une vraie mise en avant plutot qu'une simple mention
   legale. Meme classe .sim-disclaimer de base (marge du haut, taille de
   police) avec une deuxieme classe qui neutralise l'italique et bascule la
   couleur en vert-lcb (vert fonce, le plus fonce de la palette de la marque,
   demande d'Oriane). L'icone reprend currentColor pour rester dans le meme
   vert que le texte plutot que d'introduire une couleur d'alerte
   (rouge/orange) etrangere a la palette du site. */
.sim-disclaimer-highlight{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--vert-lcb);font-style:normal;font-weight:600;
  margin-top:12px;
}
.sim-disclaimer-icon{width:18px;height:auto;flex-shrink:0;margin-top:2px;}

/* Carte centree au defilement (mobile uniquement, moins de 900px) : sans
   marge avant la 1ere carte et apres la derniere, le snap ne peut pas les
   amener au centre (il n'y a rien a defiler au-dela), elles restent
   collees au bord. scroll-snap-align passe de "start" a "center" (le
   "start" pose en 1.0.8 reste actif dans l'intervalle 901-1120px plus
   haut, non concerne par cette demande) ; la marge gauche/droite
   necessaire pour que la 1ere et la derniere carte puissent elles aussi
   atteindre le centre est calculee et posee dynamiquement par
   initSimCardsScroll() (lcb-patrimoine-simulateurs.js), qui centre aussi
   la carte affichee au chargement de la page et apres un redimensionnement
   (elle depend de la largeur reelle de l'ecran, pas exprimable en CSS
   seul). */
@media (max-width:900px){
  .sim-card{scroll-snap-align:center;}
}

/* ==================================================================
   1.0.12 - Quatre nouveaux retours d'Oriane : suppression de la tranche 0 %
   du simulateur PER, trait de separation des resultats deplace au dessus
   (au lieu d'en dessous) sur les simulateurs Inflation et PER, espace
   reduit sur mobile entre le resultat en vert et le graphique, et deux
   correctifs sur les cartes de selection au defilement tactile (carte qui
   reste "levee" apres un glisser du doigt, ombre coupee par le bloc du
   dessous)
   ================================================================== */

/* (a) Trait de separation des resultats, au dessus plutot qu'en dessous,
   sur les simulateurs Inflation et PER uniquement. La regle de base
   ".sim-result-row" (definie plus haut, partagee par les 3 simulateurs)
   pose un padding-bottom/margin-bottom/border-bottom : correct pour
   "Projection d'investissement", ou ".sim-result-row" est suivie du
   graphique a l'interieur du meme bloc ".sim-results" (le trait separe
   alors utilement les resultats du graphique). Sur Inflation et PER en
   revanche, ".sim-result-row" est le DERNIER element de ".sim-controls"
   (les resultats sont sous les curseurs, dans la colonne de gauche, voir
   template-simulateurs.php) : le trait du dessous ne separe donc plus rien
   de visible, alors qu'aucun trait ne marque la transition curseurs ->
   resultats juste au dessus (retour d'Oriane : ca manque d'air a cet
   endroit precis). Cible via la structure du DOM plutot qu'une nouvelle
   classe : ".sim-controls .sim-result-row" ne matche que ces deux
   simulateurs (specificite plus elevee que la regle de base a un seul
   selecteur de classe, donc l'emporte sans avoir besoin d'toucher a la
   regle d'origine). */
.sim-controls .sim-result-row{
  padding-bottom:0;margin-bottom:0;border-bottom:none;
  padding-top:22px;border-top:1px solid var(--filet);
}

/* (b) Sur mobile (moins de 900px), ".sim-grid" passe en une seule colonne
   (regle existante) : ".sim-controls" (qui se termine desormais par le
   resultat en vert, voir (a) ci-dessus) se retrouve alors directement
   au-dessus de ".sim-results" (qui commence par le graphique), separes
   uniquement par le gap de la grille (44px, retour d'Oriane : cet espace
   est trop grand a cet endroit precis). Une marge negative sur le dernier
   element de ".sim-controls" reduit la hauteur reellement occupee par ce
   bloc dans la grille, ce qui rapproche visuellement le resultat vert du
   graphique sans toucher au gap partage par le reste de la grille (qui
   reste a 44px pour la transition curseurs -> resultats sur Inflation/PER,
   et pour la transition curseurs -> resultats sur Investissement, non
   concernees par cette demande). */
@media (max-width:900px){
  .sim-controls .sim-result-row{margin-bottom:-16px;}
}

/* (c) Cartes de selection au defilement tactile : la carte touchee du
   doigt "se leve" et reste decalee par rapport aux autres. Diagnostic :
   ".sim-card:hover" (plus haut dans ce fichier) applique une ombre plus
   large et un translateY(-3px) au survol ; sur un ecran tactile, il n'y a
   pas de vrai survol, mais toucher un element peut malgre tout declencher
   :hover dans certains navigateurs mobiles (Safari iOS notamment), et cet
   etat reste "colle" apres avoir leve le doigt puisque rien ne vient
   jamais le retirer (pas de veritable pointeur qui s'eloigne). Resultat :
   la carte touchee pendant le glisser reste visuellement levee et decalee
   des autres. Corrige en neutralisant :hover sur les appareils qui n'ont
   pas de vrai survol (media feature "hover:none", qui cible precisement
   les ecrans tactiles sans souris/trackpad, contrairement a "pointer" qui
   ne renseigne que sur la precision) : sur ces appareils, ".sim-card:hover"
   retrouve exactement les memes valeurs que l'etat normal (aucun
   changement visuel possible, donc plus rien a laisser "colle"). Les
   appareils avec un vrai pointeur (souris, trackpad) gardent l'effet de
   survol original, inchange. */
@media (hover:none){
  .sim-card:hover{box-shadow:0 24px 50px rgba(2,42,37,0.28);transform:none;}
}

/* (d) Ombre des cartes coupee par le bloc du dessous (retour d'Oriane).
   Diagnostic : ".sim-cards" (definie plus haut, id "sim-cards-track") pose
   "overflow-x:auto" sous 900px et entre 901-1120px, necessaire au
   defilement horizontal des cartes. Or poser "overflow-x" sans "overflow-y"
   fait basculer "overflow-y" sur "auto" egalement (comportement standard
   du CSS, pas un bug de ce fichier) : le conteneur se met alors aussi a
   rogner tout debordement vertical, y compris l'ombre portee des cartes,
   des qu'elle depasse le bas du conteneur. Premier essai ecarte : reserver
   de la place avec un padding-bottom sur ".sim-cards" tout en compensant
   par une marge negative de meme valeur sur ".sim-cards-scroll" (son
   parent, qui lui ne rogne rien) pour ne pas decaler le formulaire qui
   suit. Verifie par mesure (getBoundingClientRect) : cette compensation
   ramene en realite le haut de "#sim-tools" AU-DESSUS du bas visuel de
   ".sim-cards-scroll" elargi, donc dans la zone de padding fraichement
   reservee pour l'ombre. "#sim-tools" ayant son propre fond opaque et
   venant apres dans le DOM, il se peint par-dessus cette zone : l'ombre se
   retrouve masquee exactement comme avant, juste par un recouvrement
   d'un element opaque plutot que par un rognage CSS. Une ombre a besoin
   d'un espace ecran reellement libre pour se dessiner, une simple
   compensation de marge ne peut pas creer cet espace a partir de rien.
   Corrige en ajoutant un veritable espace (pas de marge negative pour
   l'annuler) : padding symetrique (haut ET bas, memes valeurs) sur
   ".sim-cards", pour que le centre vertical de ".sim-cards-scroll" ne
   bouge pas (les fleches, positionnees en top:50% de ce parent, restent
   donc centrees sur les cartes sans reglage supplementaire) tout en
   laissant un vrai espace libre sous les cartes avant "#sim-tools", ou
   l'ombre a maintenant la place de s'estomper normalement. */
@media (max-width:900px){
  .sim-cards{padding-top:22px;padding-bottom:22px;}
}
@media (min-width:901px) and (max-width:1120px){
  .sim-cards{padding-top:22px;padding-bottom:22px;}
}

/* ==================================================================
   1.0.13 - L'ombre des cartes etait toujours coupee malgre le correctif
   1.0.12 (retour d'Oriane, capture a l'appui), et demande de remonter un
   peu plus les cartes a cheval sur le hero en version mobile
   ================================================================== */

/* (a) Ombre encore coupee : les 22px de padding poses en 1.0.12 (haut ET
   bas, a egalite pour garder les fleches centrees sans calcul
   supplementaire) reservaient trop peu de place. L'ombre par defaut des
   cartes (0 24px 50px) n'est pas rognee net a 22px, elle continue de
   s'estomper au-dela : le rognage tombait donc en plein milieu du
   degrade, ce qui cree une coupure encore plus visible qu'une ombre trop
   courte (on voit la moitie du degrade puis un bord net, plutot qu'une
   ombre simplement plus discrete). Il faut reserver assez de place pour
   que le degrade ait fini de s'estomper avant la limite de rognage.
   Corrige avec une vraie marge de securite (64px en bas, superieure au
   rayon de flou de 50px). Pas besoin d'autant en haut : le decalage de
   l'ombre est vers le bas (0 24px ...), donc son debordement au-dessus de
   la carte est minime (quelques pixels) ; 4px suffisent, evite de pousser
   les cartes plus bas que necessaire (qui aurait aussi rendu plus dur le
   correctif (c) ci-dessous, demande separement par Oriane). Ce padding
   n'etant plus symetrique, les fleches (position:absolute, top:50% de
   ".sim-cards-scroll") ne se retrouvent plus centrees sur la carte mais
   sur la boite entiere (carte + padding) : decalees vers le bas de
   (64-4)/2 = 30px. Corrige en reglant leur position en consequence
   (calc(50% - 30px)), verifie par mesure (centre de la fleche = centre de
   la carte, ecart 0px). */
@media (max-width:900px){
  .sim-cards{padding-top:4px;padding-bottom:64px;}
  .sim-cards-arrow{top:calc(50% - 30px);}
}
@media (min-width:901px) and (max-width:1120px){
  .sim-cards{padding-top:4px;padding-bottom:64px;}
  .sim-cards-arrow{top:calc(50% - 30px);}
}

/* (b) Cartes remontees un peu plus sur le hero, en version mobile
   uniquement (retour d'Oriane). ".sim-methods-straddle{margin-top:-56px}"
   (pose en 1.0.8) devient -90px, soit 34px de plus. Marge verifiee par
   mesure : le paragraphe d'intro du hero se termine a 134px du haut des
   cartes avant ce changement (a 375px de large), donc largement assez de
   marge pour remonter les cartes de 34px de plus sans jamais chevaucher
   ce texte (100px de marge restante apres ce changement, verifie a
   nouveau apres coup). */
@media (max-width:900px){
  .sim-methods-straddle{margin-top:-90px;}
}

/* ==================================================================
   1.0.14 - L'ombre des cartes se voyait toujours coupee malgre 1.0.13
   (retour d'Oriane). Cette fois, a sa demande explicite, on reduit
   l'ombre elle-meme plutot que d'agrandir encore l'espace qui lui est
   reserve (1.0.13 avait deja pousse cet espace a 64px, une valeur
   qu'Oriane trouve trop genereuse visuellement)
   ================================================================== */

/* ".sim-card" et ".sim-card:hover" (definies tout en haut de ce fichier)
   utilisent une ombre assez large (0 24px 50px, jusqu'a 0 30px 60px au
   survol) pensee pour le rendu plein format des cartes en desktop, ou rien
   ne la rogne (".sim-cards" n'y a pas de overflow-x). Sur les deux
   intervalles ou les cartes defilent horizontalement (sous 900px et entre
   901-1120px, voir 1.0.8), cette meme ombre a besoin d'une zone de
   degagement large pour ne pas se faire rogner par ".sim-cards"
   (overflow-x:auto, voir 1.0.12/1.0.13) : 64px, en pratique un espace
   visible plus genereux que necessaire pour l'usage. Plutot que d'agrandir
   encore cette zone, on reduit l'ombre elle-meme UNIQUEMENT sur ces deux
   intervalles (le rendu desktop plein format, hors defilement, garde
   l'ombre d'origine, inchangee) : ombre par defaut ramenee a 0 8px 18px
   (etendue visible sous la carte ~17px), ombre au survol (appareils a
   vrai pointeur uniquement dans l'intervalle 901-1120px, le survol tactile
   restant neutralise par 1.0.12) ramenee a 0 10px 22px (etendue visible
   ~21px). La zone de degagement de ".sim-cards" (posee en 1.0.13) est
   donc elle aussi reduite en consequence, a la juste mesure de cette
   ombre plus discrete : 24px en bas (un peu plus que les 21px necessaires,
   marge de securite), 4px en haut (inchange, le debordement du haut reste
   minime). Fleches repositionnees a l'identique de la methode 1.0.13,
   avec la nouvelle valeur : (24-4)/2 = 10px. */
@media (max-width:900px){
  .sim-card{box-shadow:0 8px 18px rgba(2,42,37,0.28);}
  .sim-card:hover{box-shadow:0 8px 18px rgba(2,42,37,0.28);}
  .sim-cards{padding-top:4px;padding-bottom:24px;}
  .sim-cards-arrow{top:calc(50% - 10px);}
}
@media (min-width:901px) and (max-width:1120px){
  .sim-card{box-shadow:0 8px 18px rgba(2,42,37,0.28);}
  .sim-card:hover{box-shadow:0 10px 22px rgba(2,42,37,0.34);}
  .sim-cards{padding-top:4px;padding-bottom:24px;}
  .sim-cards-arrow{top:calc(50% - 10px);}
}

/* ==================================================================
   1.0.15 - Quatrieme simulateur : "Credit vs Comptant" (voir le changelog
   de lcb-patrimoine-simulateurs.js pour le detail du calcul et du
   fonctionnement complet). Cote CSS, seul ajout : le style du repere de
   point de croisement sur le graphique (ligne + libelle d'annee, dessines
   par drawChart() uniquement quand un croisement existe dans la duree
   affichee). Demande d'Oriane : une ligne pointillee discrete plutot
   qu'un trait plein qui detournerait l'attention des 2 courbes
   elles-memes, et le chiffre de l'annee correspondante mis en valeur.
   Aucune autre regle a ajouter : le reste du panneau (curseurs, .sim-
   result-row, .sim-disclaimer, legende du graphique...) reutilise tel
   quel le CSS deja partage par les 3 simulateurs existants.
   ================================================================== */

/* Scope ".sim-chart .xxx" (2 classes), comme la regle de base
   ".sim-chart .sim-chart-axis-label" qu'elle complete sur le libelle
   d'annee (le texte porte les deux classes a la fois, voir drawChart()) :
   meme specificite, donc le fill/font-weight ci-dessous l'emporte par
   ordre d'apparition dans le fichier, sans avoir besoin d'alourdir le
   selecteur. stroke-dasharray:3,3 (plus fin que les 2,5 de la courbe en
   pointilles du cout du credit) pour rester visuellement en retrait,
   discret comme demande, et ne pas se confondre avec une 3e courbe de
   donnees. */
.sim-chart .sim-chart-crossing-line{stroke:var(--gris-mentions);stroke-width:1;stroke-dasharray:3,3;}
.sim-chart .sim-chart-crossing-label{font-weight:700;fill:var(--vert-lcb);}

/* ==================================================================
   1.0.16 - Retour d'Oriane : avec 4 cartes desormais, ".sim-cards"
   (flex-wrap:wrap par defaut) repassait a la ligne en pleine largeur
   desktop (au-dela de 1120px, seul intervalle qui n'avait pas encore le
   defilement horizontal pose en 1.0.8/1.0.10 pour le mobile et la tablette)
   : 4 cartes de 280px + 3 espaces ne tiennent pas dans le conteneur de
   1080px, meme sur un tres grand ecran (l'espacement ".sim-cards{gap:
   min(4vw,44px)}" plafonne a 44px quelle que soit la largeur). Demande
   d'Oriane : garder les cartes sur une seule ligne partout, y compris en
   plein format desktop, avec le meme systeme de fleches qu'en mobile/
   tablette plutot qu'un retour a la ligne.
   ================================================================== */

/* Meme recette que le bloc 901-1120px ci-dessus (1.0.10), etendue sans
   limite haute puisque le passage a la ligne n'a plus lieu d'etre a aucune
   largeur : defilement horizontal, cartes a taille normale (280px, pas la
   reduction 240px reservee au mobile). L'ombre par defaut des cartes (0
   24px 50px, epaisse, pensee pour un rendu plein format sans rognage) se
   ferait de nouveau rogner par ce nouvel "overflow-x:auto" si elle n'etait
   pas reduite ici : meme traitement qu'en 1.0.14 (ombre ramenee a 0 8px
   18px, hover a 0 10px 22px reserve au vrai pointeur puisque le survol
   tactile reste neutralise par la regle @media(hover:none) de 1.0.12,
   independante de la largeur), avec le meme degagement de 4px en haut/24px
   en bas et le meme repositionnement des fleches. Verifie par mesure
   programmatique (Playwright) : plus aucun retour a la ligne des 1121px,
   ombre non rognee, fleches alignees sur le centre reel de la carte, a
   plusieurs largeurs desktop (1200, 1440, 1920px). */
@media (min-width:1121px){
  .sim-cards{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    padding-top:4px;padding-bottom:24px;
  }
  .sim-cards::-webkit-scrollbar{display:none;}
  .sim-card{
    scroll-snap-align:start;flex:0 0 auto;
    box-shadow:0 8px 18px rgba(2,42,37,0.28);
  }
  .sim-card:hover{box-shadow:0 10px 22px rgba(2,42,37,0.34);}
  .sim-cards-arrow{top:calc(50% - 10px);}
}