@charset "utf-8";
/* =============================================================================
   benoistrousseau-trading.com — feuille de style commune
   Remplace la base Elementor (119 Ko injectes dans chaque page + 183 Ko de
   fichiers externes, dont 73 % de regles qui ne correspondaient a aucun element).
   Contient : polices, base, en-tete, menus, pied de page.
   Les styles propres a une page vivent dans un <style> de sa balise <head>.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. Polices
   Schibsted Grotesk (Schibsted Media Group, 2023), sous licence SIL Open Font
   License 1.1 — la licence est dans _assets/polices/OFL.txt, et elle figure
   aussi DANS les fichiers de police eux-memes. Elle a remplace le
   23/08/2026 la police commerciale employee jusque-la, dont aucune facture
   n avait pu etre retrouvee dans les dossiers.
   Trois graisses sont declarees — 400 / 500 / 700 — plus l italique 400.
   Le SemiBold 600 existe chez Schibsted mais n est VOLONTAIREMENT pas declare :
   le site compte 165 regles en font-weight:600 qui tombent aujourd hui sur le
   gras 700 (l ancienne police n avait pas de 600). Les servir en vrai 600 allegerait d un
   coup toute la hierarchie du site — ce serait un changement de dessin, pas un
   remplacement de police. Meme raisonnement pour les 16 regles en 800.
   L italique, lui, est un GAIN : l ancienne police n en avait pas, les 22 regles
   font-style:italic du site recevaient un faux oblique fabrique par le
   navigateur ; elles recoivent desormais un vrai italique dessine.
   woff2 est reconnu par tous les navigateurs vises, woff sert de repli.      */
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/_assets/polices/SchibstedGrotesk-Regular.woff2') format('woff2'),
      url('/_assets/polices/SchibstedGrotesk-Regular.woff') format('woff');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/_assets/polices/SchibstedGrotesk-Medium.woff2') format('woff2'),
      url('/_assets/polices/SchibstedGrotesk-Medium.woff') format('woff');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('/_assets/polices/SchibstedGrotesk-Bold.woff2') format('woff2'),
      url('/_assets/polices/SchibstedGrotesk-Bold.woff') format('woff');
}
@font-face{
  font-family:'Schibsted Grotesk'; font-style:italic; font-weight:400; font-display:swap;
  src:url('/_assets/polices/SchibstedGrotesk-Italic.woff2') format('woff2'),
      url('/_assets/polices/SchibstedGrotesk-Italic.woff') format('woff');
}



/* ------------------------------------------------------------ 2. Variables */
:root{
  --vert-nuit:#06231D;      /* barre de menu, pied de page, fond des visuels */
  --vert-fonce:#0C342C;
  --vert:#076653;           /* accent, liens, cartes */
  --menthe:#07F9C4;         /* accent clair sur fond sombre */
  --lime:#E3EF26;
  --beige:#F4F1EA;          /* fond de page */
  --ivoire:#F6F7ED;
  --creme:#EFEAE0;          /* sol creme : fond des pages News et les
                               bandes .ap-cv / .ap-philo de A propos.
                               Volontairement A UN CRAN de --beige
                               (contraste 1,06) : c est cet ecart
                               minime qui fait exister les bandes,
                               les confondre les ferait disparaitre. */
  --bord-chaud:#E5E1D6;     /* contour des cartes */
  --blanc-menthe:#F0F9F5;   /* survols, pastilles */
  --texte:#06231D;
  --texte-doux:#39463F;
  --bande:1200px;           /* largeur utile de la bande centrale */
  --bande-pied:1280px;      /* NB : le pied de page est cale 80 px plus large que
                               l en-tete et le contenu. Ecart repris tel quel du
                               site actuel, a arbitrer separement. */
  --marge-bande:40px;       /* retrait lateral du contenu (30 puis 16 px en mobile) */
  --marge-pied:40px;        /* retrait lateral du pied, constant */
  --h-entete:62px;
}

/* ----------------------------------------------------------------- 3. Base */
*,*::before,*::after{box-sizing:border-box;}
/* Verrouille l agrandissement automatique du texte : sans cela, Chrome sur
   Android peut grossir de lui-meme le texte des blocs larges (« font boosting »),
   ce qui donne l impression que la page est zoomee. La version non prefixee est
   celle qu honore Chrome, la version -webkit- celle de Safari et d iOS. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  margin:0;
  background:var(--beige);
  color:#333;
  font:400 16px/32px 'Schibsted Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0;}
svg{display:inline-block;vertical-align:middle;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}

/* Lien d evitement : visible uniquement au clavier, pour aller droit au contenu. */
.br-evitement{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.br-evitement:focus{left:8px;top:8px;width:auto;height:auto;padding:10px 16px;background:#fff;color:var(--vert-nuit);border-radius:8px;z-index:2000;}

/* Texte reserve aux lecteurs d ecran. */
.br-lecteur-ecran{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Bande centrale : contenu cale sur 1200 px, fonds pleine largeur.
   Le retrait vaut soit la marge minimale de 40 px, soit ce qu il faut pour
   centrer la bande — le plus grand des deux. Les fonds, eux, restent toujours
   pleine largeur puisque c est le PADDING qui recentre, pas la largeur. */
.br-bande{
  width:100%;
  padding-left:max(var(--marge-bande), calc((100% - var(--bande))/2));
  padding-right:max(var(--marge-bande), calc((100% - var(--bande))/2));
}
/* Le pied de page conserve son retrait de 40 px a toutes les tailles, la ou le
   contenu se resserre a 30 puis 16 px. */
.br-bande--pied{
  padding-left:max(var(--marge-pied), calc((100% - var(--bande-pied))/2));
  padding-right:max(var(--marge-pied), calc((100% - var(--bande-pied))/2));
}
@media(max-width:1024px){ :root{--marge-bande:30px;} }
@media(max-width:767px){  :root{--marge-bande:16px;} }

/* ------------------------------------------------------------- 4. En-tete
   La barre est en position:fixed : elle ne prend aucune place dans le flux,
   le contenu de la page demarre donc a y=0 et passe dessous. C est la premiere
   section de chaque page qui reserve la hauteur necessaire par son padding.
   Au chargement la barre est OPAQUE (pas de flou) : c est ce qui evite le
   bref eclair de transparence apres un rechargement en milieu de page.        */
.br-entete{
  position:fixed; top:0; left:0; right:0;
  height:var(--h-entete);
  z-index:999;
  background:rgb(6,35,29);
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  transition:background .28s ease;
}
/* .defile est posee par le script des que l on a quitte le haut de la page. */
.br-entete.defile{
  background:rgba(6,35,29,.88);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
}
/* Sans transition au tout premier rendu, sinon la barre « s allume ». */
.br-entete.sans-anim{transition:none !important;}

/* Deux niveaux : le premier applique le retrait de la bande, le second sert de
   repere de positionnement au logo et au bouton Membres (qui sont en absolu et
   doivent se caler sur les bords de la BANDE, pas sur ceux de l ecran). */
.br-entete > .br-bande{height:100%;}
.br-entete-bande{
  height:100%;
  position:relative;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:30px;
}

/* Le logo complet mesure 200x81 ; on n en montre que le symbole de gauche. */
.br-logo{position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;line-height:0;}
/* Repere seul (fichier vectoriel dedie, proportions 33:44), plutot qu un
   rognage de l image pleine largeur : ce rognage coupait la pointe basse
   du repere et laissait une forme ambigue, mal identifiable en tete de
   page. Le SVG affiche la forme complete, nette a toute resolution. */
.br-logo-img{width:32px;height:auto;display:block;}

/* --- Navigation principale ---
   Le decalage d un pixel vers le haut compense le centrage optique : un texte
   sans jambages parait bas quand il est centre geometriquement. */
.br-nav-liste{position:relative;top:-1px;display:flex;flex-direction:row;align-items:center;gap:30px;flex-wrap:nowrap;}
.br-nav-liste > li{display:flex;}
.br-nav-lien{
  display:flex;align-items:center;height:44px;
  color:#fff;font-weight:500;font-size:15px;letter-spacing:.03em;line-height:15px;
  background:none;border:0;padding:0;cursor:pointer;
}
.br-nav-lien:hover{color:var(--menthe);}
/* Chevron du menu deroulant « Formations ». */
.br-nav-chevron{width:24px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:#fff;}
.br-nav-chevron svg{width:12px;height:12px;fill:currentColor;}

/* Bouton burger : masque sur grand ecran. */
.br-burger{display:none;width:31px;height:31px;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:#fff;}
.br-burger svg{width:27px;height:27px;fill:currentColor;}
.br-burger .icone-fermer{display:none;}

/* --- Bouton Membres ---
   Repere par les clients, discret pour les prospects : le degrade vert-jaune
   reste reserve au bouton de conversion « S inscrire ».
   La graisse ne change PAS au survol : passer en gras elargirait le bouton,
   qui sursauterait sous le curseur.
   Le remplissage au survol n est PAS un fondu de couleur : c est un calque
   blanc qui glisse depuis la gauche (left:-100% -> 0, 0.45s) — la meme
   mecanique Elementor que les boutons degrades ci-dessous, avec un calque
   blanc au lieu de menthe pour laisser le degrade au CTA de conversion. */
.br-membres{
  /* position:absolute assure a la fois le centrage vertical (top:50% +
     translateY) ET sert de contexte d empilement pour le calque ::before —
     pas besoin d un position:relative separe, qui l ecraserait. */
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* 34 px de retrait donnent une pastille de 140 px pour « Membres ». Le
     libelle etant traduit dans six langues, c est bien un retrait — et non une
     largeur figee — qui garantit une respiration constante autour du texte. */
  height:40px;padding:0 34px;
  border:1.5px solid rgba(255,255,255,.34);border-radius:50px;
  color:#fff;font-weight:400;font-size:15px;line-height:1;letter-spacing:.45px;
  background:transparent;
  transition:border-color .25s ease,color .25s ease;
}
.br-membres::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:#fff;border-radius:50px;z-index:-1;
  transition:left .45s cubic-bezier(.25,.46,.45,.94);
}
.br-membres:hover{border-color:#fff;color:var(--vert-nuit);}
.br-membres:hover::before{left:0;}
/* Icone repliement mobile/tablette : masquee par defaut (le bureau garde le
   texte complet), montree a la place du texte sous 1025px pour degager assez
   de place au burger pour un centrage reel. */
.br-membres-icone{display:none;width:18px;height:18px;flex:0 0 auto;}
@media (hover:none){
  .br-membres:hover{border-color:rgba(255,255,255,.34);color:#fff;}
  .br-membres:hover::before{left:-100%;}
}

/* --- Boutons a fond degrade (CTA de conversion) ---
   Meme mecanique de calque glissant que Membres, mais avec un remplissage
   menthe uni : le degrade de fond s efface au profit d un mint plat des que
   le calque a fini de glisser, et le texte passe du vert fonce au quasi-noir.
   Le calque est ici au-DESSUS du fond (z-index positif) et c est le TEXTE
   qui remonte par dessus via son propre z-index — plus fiable qu un calque
   en z-index negatif, dont le decoupage par overflow:hidden est fragile
   selon les moteurs de rendu. Le texte doit etre dans un <span> pour porter
   ce z-index (voir .br-bouton-degrade-texte). */
.br-bouton-degrade{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 32px;border-radius:50px;
  background:linear-gradient(90deg, var(--menthe) 20%, #04DF8C 40%, var(--lime) 100%);
  font-size:18.4px;line-height:18px;font-weight:700;color:var(--vert-fonce);
  transition:color .25s ease;
}
.br-bouton-degrade::before{
  content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:var(--menthe);border-radius:50px;z-index:1;
  transition:left .45s cubic-bezier(.25,.46,.45,.94);
}
.br-bouton-degrade-texte{position:relative;z-index:2;}
.br-bouton-degrade:hover{color:#0a0a0a;}
.br-bouton-degrade:hover::before{left:0;}
@media (hover:none){
  .br-bouton-degrade:hover{color:var(--vert-fonce);}
  .br-bouton-degrade:hover::before{left:-100%;}
}

/* ------------------------------------------- 5. Menu deroulant « Formations »
   Panneau unique construit par le script a partir d une seule source de
   donnees, partagee avec la version mobile : les deux listes ne peuvent donc
   pas diverger.                                                              */
.mega-backdrop{position:fixed;inset:0;background:rgba(6,35,29,.20);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;z-index:900;}
.mega-backdrop.open{opacity:1;visibility:visible;}
.mega-panel{position:fixed;left:0;right:0;top:120px;background:var(--beige);box-shadow:0 40px 80px -34px rgba(6,35,29,.5);z-index:1000;opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .3s ease,transform .34s cubic-bezier(.2,.8,.2,1),visibility .3s;}
.mega-panel.open{opacity:1;visibility:visible;transform:translateY(0);}
.mega-inner{padding:16px 24px 28px;}
.mega-cols{display:flex;width:fit-content;gap:30px;align-items:flex-start;}
.mega-col{min-width:0;max-width:300px;}
.mega-col:last-child{max-width:420px;}
.mega-col:nth-child(3){max-width:220px;}
.mega-title{font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:#8a9992;margin:0 0 6px 12px;}
.mega-item{display:block;padding:5px 12px;border-radius:10px;transition:background .16s ease;}
.mega-item:hover{background:var(--blanc-menthe);}
.mega-item .mt{font-weight:700;font-size:.92rem;color:var(--vert-nuit);display:flex;align-items:center;gap:8px;line-height:1.25;}
.mega-item .mt::after{content:"\2192";opacity:0;transform:translateX(-6px);transition:.16s;color:var(--vert);font-weight:700;}
.mega-item:hover .mt{color:var(--vert);}
.mega-item:hover .mt::after{opacity:1;transform:translateX(0);}
.mega-item .md{display:block;font-size:.76rem;color:#5c6b66;line-height:1.15;margin-top:2px;}
@media(max-width:900px){
  .mega-cols{flex-direction:column;gap:20px;}
  .mega-inner{margin-left:24px !important;padding-left:0;}
}
@media(max-width:820px){.mega-panel{top:64px;}}

/* --------------------------------------------------- 6. Selecteur de langue */
.br-lang{position:relative;display:inline-flex;align-items:center;margin:0 6px;}
.br-lang-toggle{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:#9BA8A3;font:500 15px/1 'Schibsted Grotesk',sans-serif;cursor:pointer;padding:8px 4px;}
.br-lang-toggle:hover{color:#fff;}
.br-lang-globe{position:relative;top:-2px;flex:0 0 auto;}
/* Initiales ISO (FR, EN...) de la langue active, injectees par JS entre le
   globe et la fleche — cf. selecteurLangue() dans br-site.js. */
.br-lang-code{font-size:11px;font-weight:500;letter-spacing:.02em;}
.br-lang.open .br-lang-toggle{color:var(--menthe);}
.br-lang-chevron{font-size:10px;line-height:10px;transition:transform .18s ease;}
.br-lang.open .br-lang-chevron{transform:rotate(180deg);}
.br-lang-list{position:absolute;top:100%;left:50%;margin-top:8px;background:var(--beige);border:1px solid rgba(6,35,29,.08);border-radius:10px;box-shadow:0 18px 40px -12px rgba(6,35,29,.5);padding:6px;min-width:130px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:1002;}
.br-lang.open .br-lang-list{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* Signal bref quand on arrive depuis une mention « Disponible en N langues » :
   le menu s ouvre en haut de page, loin du clic — sans ce halo l oeil ne sait
   pas ou regarder. */
@keyframes br-lang-signal{0%,100%{box-shadow:0 0 0 0 rgba(7,249,196,0);}
  30%{box-shadow:0 0 0 7px rgba(7,249,196,.45);}}
.br-lang--signale{border-radius:999px;animation:br-lang-signal 1.4s ease-out;}
@media(prefers-reduced-motion:reduce){.br-lang--signale{animation:none;}}
.br-lang-list a{display:block;padding:7px 12px;border-radius:6px;color:var(--vert-nuit);font:500 14px/1 'Schibsted Grotesk',sans-serif;text-align:center;transition:background .15s,color .15s;}
.br-lang-list a:hover{background:var(--blanc-menthe);color:var(--vert);}
.br-lang-list a.active{color:var(--vert);font-weight:700;}
/* Ligne compacte reprise dans le menu mobile (voir script) : masquee par defaut
   car elle est injectee dans un conteneur visible en permanence sur grand ecran. */
.br-lang-row{display:none;}
.br-lang-row a{display:block;color:rgba(255,255,255,.7);font:500 15px/1 'Schibsted Grotesk',sans-serif;padding:9px 8px;border-radius:6px;}
.br-lang-row a.active{color:var(--menthe);}
.br-lang-row a:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ------------------------------------------------- 7. Bandeau « autre langue » */
.langsuggest{position:relative;z-index:1001;display:none;background:var(--creme);color:#23262B;font-size:14px;line-height:1.45;border-bottom:1px solid rgba(6,35,29,.12);}
.langsuggest.show{display:block;}
.langsuggest-inner{max-width:920px;margin:0 auto;padding:9px 46px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 15px;position:relative;}
#langSuggestLink{color:var(--vert);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
#langSuggestLink:hover{color:var(--vert-nuit);}
.langsuggest .close{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:0;color:#6c6a62;font:400 18px/1 Arial,sans-serif;cursor:pointer;padding:2px 8px;}
.langsuggest .close:hover{color:#23262B;}
html.has-lang-banner .br-entete{top:var(--lb-h,42px);}

/* ------------------------------------------------------- 8. Menu mobile
   Sous 1025 px le panneau deroulant du survol est inutilisable au doigt :
   il est remplace par un menu en accordeon, alimente par la meme source.     */
.mob-sub-panel,.mob-sub-arrow{display:none;}

@media(max-width:1024px){
  :root{--h-entete:60px;}
  /* Retrait interne de 16 px en plus du retrait de bande : le logo et le bouton
     ne collent pas au bord de l ecran. */
  .br-entete-bande{justify-content:space-between;gap:12px;padding:0 16px;}
  .br-logo{position:static;transform:none;}
  /* Bouton reduit a une pastille ronde icone-seule : sa largeur ne pese plus
     sur l equilibre visuel a cote du logo, et le burger peut se centrer sur
     la largeur ENTIERE de la bande plutot que sur l espace restant. */
  /* position:RELATIVE et non static : le calque blanc ::before du survol est
     en absolu et doit rester ancre au bouton. En static, il s ancrait sur la
     bande d en-tete entiere et debordait a gauche de l ecran (l arc blanc
     visible pres du logo).
     top/right remis a auto : en relative, le top:50% herite de la regle
     bureau redevient actif et poussait le bouton 30px sous le centre. */
  .br-membres{position:relative;top:auto;right:auto;transform:none;width:40px;height:40px;padding:0;flex:0 0 auto;}
  .br-membres-icone{display:block;}
  .br-membres-texte{display:none;}
  /* translate(-50%,-50%) centre le burger sur son PROPRE milieu (pas juste
     son bord gauche) : au bord gauche seul, il restait decale a droite du
     vrai centre d une largeur egale a sa propre demi-largeur. */
  .br-burger{display:inline-flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  .br-lang{display:none;}
  .mega-panel,.mega-backdrop{display:none !important;}
  .br-nav-chevron{display:none;}

  /* Le panneau du menu n existe qu une fois ouvert. */
  .br-nav-panneau{display:none;}
  .br-entete.menu-ouvert .br-nav-panneau{
    display:block;position:fixed;top:var(--h-entete);left:0;right:0;
    background:rgba(6,35,29,.94);
    -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
    padding:8px 18px 22px;z-index:1001;box-shadow:0 24px 44px rgba(0,0,0,.5);
    max-height:calc(100vh - var(--h-entete));overflow-y:auto;
  }
  .br-entete.menu-ouvert .br-nav-liste{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .br-entete.menu-ouvert .br-nav-liste > li{width:100%;flex-direction:column;align-items:stretch;}
  .br-entete.menu-ouvert .br-nav-lien{
    justify-content:flex-start;align-items:center;height:auto;
    padding:15px 8px;border-bottom:1px solid rgba(255,255,255,.10);
    font-size:18px;width:100%;
  }
  .br-entete.menu-ouvert .br-burger .icone-ouvrir{display:none;}
  .br-entete.menu-ouvert .br-burger .icone-fermer{display:inline;}

  /* Accordeon « Formations ». Intitules en 400 et categories en 500 : la
     hierarchie tient deja par la couleur, la casse et la taille — un 600
     serait de toute facon synthetise, la famille ne le fournit pas.          */
  .br-entete.menu-ouvert .mob-sub-arrow{margin-left:auto;font-size:13px;line-height:1;display:inline-flex;align-items:center;transition:transform .2s ease;color:#fff;}
  .br-entete.menu-ouvert li.mob-sub-open .mob-sub-arrow{transform:rotate(180deg);}
  .br-entete.menu-ouvert .mob-sub-panel{display:none;padding:2px 0 10px 10px;}
  .br-entete.menu-ouvert li.mob-sub-open .mob-sub-panel{display:block;}
  .br-entete.menu-ouvert .mob-sub-panel a{display:block;padding:10px 8px;color:rgba(255,255,255,.85);font-size:15px;font-weight:400;border-bottom:1px solid rgba(255,255,255,.06);}
  .br-entete.menu-ouvert .mob-sub-panel .mob-sub-cat{color:var(--menthe);text-transform:uppercase;font-size:11px;letter-spacing:.12em;padding:12px 8px 2px;font-weight:500;}

  .br-entete.menu-ouvert .br-lang-row{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 0 6px;margin-top:6px;border-top:1px solid rgba(255,255,255,.10);}
}

/* ------------------------------------------------------------ 9. Pied de page */
.br-pied{background:var(--vert-nuit);font-size:14px;}
/* Retraits calques sur l echelle reelle du footer Apple (mesuree en direct :
   17 a 37px, jamais plus) plutot que sur celle des blocs promotionnels de la
   page (64px) : un footer est un plan de site dense, pas une section
   marketing — il n a pas besoin de la meme respiration. */
.br-pied-rangee{
  display:flex;flex-direction:row;flex-wrap:wrap;
  justify-content:space-between;align-items:flex-start;
  gap:16px;padding:40px 0 32px;
}
/* Colonne de marque : plafonnee a 720 px (au lieu de 620 auparavant), pour
   donner plus de largeur au paragraphe d avertissement et resserrer les deux
   gouttieres avec les colonnes voisines. La rangee etant en space-between, la
   largeur liberee au-dela de ce plafond part dans les gouttieres.            */
.br-pied-marque{flex:1 1 360px;min-width:0;max-width:650px;padding-right:48px;display:flex;flex-direction:column;}
/* Le logo n ouvre plus la colonne : c est le titre qui ouvre le pied de
   page, et la marque le referme dans la barre de cloture (voir plus bas).
   Choix valide sur maquette (variante A). */
.br-pied-titre{font-size:32px;line-height:32px;font-weight:700;color:var(--blanc-menthe);margin:32px 0 16px;position:relative;}
/* Le retrait droit de 10 px raccourcit la ligne : sur un paragraphe justifie,
   il evite que la derniere colonne de texte vienne toucher la colonne voisine. */
.br-pied-texte{font-size:16px;line-height:25.6px;color:var(--blanc-menthe);margin:16px 10px 16px 0;text-align:justify;}

/* Soulignement degrade sous le mot mis en avant : trace par le script, qui
   mesure la position reelle du texte (il peut passer a la ligne).
   display:inline-block rend le groupe insecable : « trading maitrise » bascule
   entierement a la ligne suivante plutot que de se couper en deux, ce qui
   laisserait un trait degrade orphelin en fin de premiere ligne.
   L epaisseur du trait et sa distance au texte sont calculees par le script
   en proportion de la taille de police, pour que le rendu reste equilibre
   d un titre de 48px a un intertitre de 20px.
   ATTENTION : surtout PAS de z-index negatif ici. Le trait passerait derriere
   le fond de la section (peint par un ancetre) et deviendrait invisible.
   C est le texte qui est remonte au-dessus du trait, via .highlight. */
/* display:inline + white-space:nowrap plutot que inline-block : le groupe
   reste insecable (le but d origine), MAIS la ponctuation qui suit ne peut
   plus etre rejetee seule a la ligne suivante — une boite inline-block
   ouvre une occasion de coupure apres elle, ce qui donnait « : course, »
   en debut de ligne sur mobile (Benoist, 18/08/2026). */
.highlight{position:relative;display:inline;white-space:nowrap;z-index:1;}
/* Pose par le script quand le groupe est plus large que sa colonne : sans
   cette soupape, un titre traduit plus long que le francais deborde la page
   (20px a 360px sur « trading with mastery »). Le trait suit, le script
   dessine une barre par ligne. */
.highlight--coupable{white-space:normal;overflow-wrap:break-word;hyphens:auto;}

/* Bouton du hero sur les tres petits ecrans : il conserve ses 32px de retrait
   lateral et sortait de la page des que le libelle est long — « Rejoindre
   l accompagnement » mesure 269px pour 305 disponibles a 320px. Le retrait
   tombe a 16px sous 360px : le libelle tient encore sur une ligne, donc la
   hauteur fixe de 42px du bouton mobile reste valable. Selecteur double pour
   passer devant le .fp-btn declare dans le style de chaque page. */
@media(max-width:359px){ .fp-hero-btn.fp-btn{padding-left:16px;padding-right:16px;} }

/* Les pages legales citent des URL en toutes lettres (sous-traitants, DPA).
   Hors tableau — les tableaux ont leur propre conteneur defilant — elles
   sortaient de la page a 320px : celle de GetResponse mesure 319px pour 268
   disponibles. anywhere et non break-word, pour que la coupure soit permise
   partout dans l URL et pas seulement en dernier recours. La regle vit ici
   et non dans les pages, qui sont regenerees par construire_pages.py. */
.cgu-texte a{overflow-wrap:anywhere;}
/* overflow-wrap et hyphens ne servent qu aux langues a composes : l allemand
   « Wissensvermittlung » fait 311px a lui seul dans un titre de 32px, plus
   large que la colonne — sans coupure interne il sort de la page. hyphens
   suit l attribut lang, la cesure respecte donc les regles de chaque langue.
   Aucun effet en francais ni en anglais : ces proprietes n agissent que sur
   un mot qui ne tient pas seul sur sa ligne. */
.underline-bar{position:absolute;border-radius:30px;background:linear-gradient(90deg,var(--vert-fonce),var(--lime),var(--menthe));pointer-events:none;display:block;z-index:0;}

/* La marge haute decolle la rangee du bloc d avertissement : elle appartient
   a la marque, pas au texte legal.
   Plus de retrait bas ici : l ancien padding-bottom:32px s ajoutait aux 64px
   de .br-pied-rangee et laissait 96px de vide avant la barre du bas, pense a
   l origine pour une 2e rangee d icones qui ne se produit jamais en pratique
   (7 pastilles tiennent sur une ligne a toutes les largeurs utiles). */
.br-reseaux{display:flex;flex-direction:row;flex-wrap:wrap;gap:17px 12px;margin-top:16px;}
/* Sans display:flex, chaque <li> est un bloc contenant une pastille en ligne :
   le talon de la ligne de texte ajoute 3 px sous chaque icone. */
.br-reseaux li{display:flex;}
.br-reseau{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  transition:background .2s ease;
}
.br-reseau:hover{background:rgba(255,255,255,.22);}
.br-reseau svg{width:14px;height:14px;fill:currentColor;}

.br-pied-col{display:flex;flex-direction:column;gap:22px;}
/* 130px et non 15 % (192px) : le plus long lien de cette colonne fait 70px et
   son intitule 115px — les 60px rendus vont a la colonne des formations. */
.br-pied-col--infos{flex:0 0 130px;}
/* Plus de decalage lateral ici : il datait d une colonne large de 192px, ou il
   servait a recentrer. A 130px il ne faisait plus que coller « Informations »
   contre « Les Formations » (50px d un cote, 74 de l autre). Sans lui, la
   rangee etant en space-between, les deux gouttieres sont egales. */
/* 356px : la largeur naturelle du plus long libelle (« Coaching prive +
   Seminaire + les 2 Formations », mesuree a 354px) plus 2px de garde. En
   dessous, les deux liens des packs coaching passaient sur deux lignes.
   La rangee etant en space-between, ces 56px viennent des gouttieres. */
.br-pied-col--formations{flex:0 0 356px;justify-content:center;align-items:flex-start;}
/* Les intitules de colonne s alignent sur la ligne du titre de marque, pas sur
   le haut de la rangee : d ou ce retrait. */
.br-pied-col-titre{font-size:18.4px;line-height:18.4px;font-weight:700;color:var(--menthe);margin:80px 0 0;}
.br-pied-liens li{margin-bottom:5px;}
.br-pied-liens a{display:block;padding:4px 0;font-size:16px;line-height:24px;color:var(--blanc-menthe);transition:color .18s ease;}
.br-pied-liens a:hover{color:var(--menthe);}

/* --- Barre du bas ---
   Le copyright s efface DERRIERE les liens legaux. Attention au sens de
   « plus clair » : sur fond sombre, eclaircir AUGMENTE le contraste. On ne
   ternit donc pas le copyright (deja a 5,5:1, tout juste au-dessus du seuil
   AA), on REMONTE les liens a 9,8:1 : meme hierarchie, zero regression. */
.br-pied-bas{background:var(--vert-nuit);padding-bottom:20px;}
.br-pied-bas-contenu{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
}
/* Barre de cloture (variante A) : la marque referme le pied de page —
   symbole + nom + droits a gauche, liens legaux a droite.
   Nom et droits partagent EXACTEMENT le meme corps (13px/21px) et
   s alignent sur la ligne de base : deux tailles proches mais differentes
   donnaient un « presque aligne » pire qu un vrai decalage. Le symbole,
   lui, reste centre sur la hauteur de la ligne. */
.br-pied-cloture{display:inline-flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap;}
.br-signature-svg{width:16px;height:21px;flex:0 0 auto;display:block;align-self:center;}
.br-signature-nom{font-size:13px;line-height:21px;color:var(--blanc-menthe);}
.br-copyright{flex:0 0 auto;font-size:13px;line-height:21px;color:#7C999E;margin:0;}
/* Le retrait interne du dernier lien deborde volontairement de la bande : c est
   le TEXTE qui doit affleurer le bord droit, pas sa boite. */
.br-liens-legaux{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;margin-right:-12px;}
.br-liens-legaux a{
  display:block;padding:0 12px;font-size:12px;line-height:12px;font-weight:500;
  color:#A8C1C5;transition:color .18s ease;
}
.br-liens-legaux a:hover{color:#fff;}
/* Filets verticaux entre les liens : cales a 10 px, sous la hauteur de
   capitale du texte de 12 px, et dans la couleur des liens attenuee — un
   separateur guide l oeil, il ne doit pas le retenir. */
.br-liens-legaux li+li{border-left:1px solid rgba(168,193,197,.45);}
.br-liens-legaux li{display:flex;align-items:center;}

@media(max-width:1024px){
  /* flex-start et non space-between : sur la seconde rangee, « Informations » et
     « Les Formations » se suivent avec la gouttiere normale au lieu d etre
     repoussees aux deux extremites de la largeur. */
  .br-pied-rangee{padding:45px 0 74px;gap:50px 20px;justify-content:flex-start;}
  .br-reseaux{gap:12px 8px;}
  /* Rangee pleine, explicitement : la colonne de marque est la plus longue et
     doit occuper la sienne. Elle valait 70 % et ne passait a la ligne que parce
     que la somme depassait — un equilibre qui se rompait des qu une colonne
     voisine changeait de largeur (« Informations » venait alors la rejoindre). */
  .br-pied-marque{flex:0 0 100%;max-width:none;padding-right:0;}
  /* La colonne « Informations » garde sa largeur utile (130px) ; celle des
     formations prend tout le reste de la seconde rangee, sinon les deux liens
     des packs coaching, longs de 354px, se replient sur deux lignes des que la
     part de 30 % descend sous cette valeur. */
  .br-pied-col--infos{flex:0 0 130px;}
  .br-pied-col--formations{flex:1 1 356px;}
  /* min-width:0 autorise le bloc de liens a se retrecir et a replier ses liens
     sur deux lignes ; sans lui il reste a sa largeur naturelle et bascule en
     entier sous le copyright. */
  /* Pas de repli ici : copyright et liens restent sur une seule rangee et se
     retrecissent, les liens repliant leur propre contenu sur deux lignes. */
  .br-pied-bas-contenu{gap:14px;}
  .br-copyright{flex:0 1 auto;min-width:0;}
  .br-liens-legaux{flex:1 1 auto;min-width:0;justify-content:center;}
}
@media(max-width:767px){
  .br-pied-rangee{gap:30px;}
  .br-pied-marque,.br-pied-col--infos,.br-pied-col--formations{flex:0 0 100%;}
  .br-pied-col{gap:16px;}
  .br-pied-col--formations{gap:22px;}
  .br-pied-col-titre{margin-top:16px;}
  .br-pied-liens a{font-size:14.4px;line-height:21.6px;}
  .br-pied-bas-contenu{flex-wrap:wrap;}
  /* Les liens s alignent sur leur intitule (l original les centrait, ce qui
     les decalait du titre : corrige a la demande). */
  .br-pied-col--formations{align-items:flex-start;}
  /* Empiles sur mobile, les liens n ont plus de sens en rangee : les traits
     separateurs verticaux ne separent plus rien et decalaient les lignes
     2 a 4 vers la droite. On les retire et chaque lien s aligne a gauche. */
  .br-liens-legaux{justify-content:flex-start;margin-right:0;}
  .br-liens-legaux li+li{border-left:0;}
  .br-liens-legaux a{padding-left:0;}
}

/* Respect du reglage systeme « reduire les animations ». */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ------------------------------------------- 12. Badges de langue des offres
   Ces mentions ne servent a rien a un lecteur francophone : elles repondent a
   une question qu il ne se pose pas. Elles sont pourtant ECRITES EN FRANCAIS
   et masquees juste en dessous — parce que reinject.py regenere chaque page
   traduite DEPUIS le francais : un texte absent du FR n existerait dans aucune
   autre langue, et serait efface a la premiere regeneration. Idee de Benoist,
   25/08/2026 ; le site pratiquait deja ce procede sur ses cartes d offre.
   L attribut lang vaut « fr » ici et « en », « de »... sur les pages traduites,
   et reinject.py le reecrit lui-meme : rien a ajouter au pipeline.
   Les deux formulations sont figees dans glossary_locked (Traductions/). */
html[lang="fr"] .fp-langue{display:none;}
/* Meme raison sur les cartes d offre : « Dispensé en français » n apprend
   rien a un francophone. « Disponible en 6 langues », si — elle reste donc
   visible, d ou la classe qui distingue les deux. */
html[lang="fr"] .carte-langue--fr{display:none;}

/* --- Langue de l offre : microcopie AU-DESSUS du bouton -----------------
   Le CTA reste vivant et mene a la caisse. « En francais » est un prerequis
   du produit, pas une panne : on l enonce juste avant le bouton, de sorte que
   le visiteur le lise dans le meme mouvement que son geste de clic.
   Trois essais l ont precede — tampon en diagonale, mention dans le bouton,
   bouton grise — tous ecartes : griser bloque aussi les francophones qui
   naviguent en anglais, et le gris est la convention de l inerte.
   Le globe est celui du selecteur de langue du menu haut.

   COULEUR PAR CONTEXTE. Le popup de prix est sur beige, mais le heros et le
   rappel final sont des cartes en degrade VERT SOMBRE. Avec --texte-doux la
   mention y tombait a 1,68 de contraste — illisible. --blanc-menthe donne
   6,45 au pire (sur --vert, le point le plus clair du degrade). */
.fp-langue{display:flex;align-items:center;gap:7px;align-self:flex-start;
  margin:32px 0 9px;font-size:13px;line-height:1.35;max-width:none;
  color:var(--texte-doux);}
.fp-langue-globe{width:15px;height:15px;flex:0 0 auto;opacity:.8;}
/* cartes sombres : texte clair. Le double selecteur l emporte aussi sur
   .fp-cta-carte p, qui imposait 20px, du blanc et 48px de marge a droite. */
/* Le bouton portait 32px de marge haute : c est la mention qui les reprend
   desormais, et le bouton se colle sous elle. Les 32px valent exactement
   l interligne du paragraphe qui precede (16px/32 dans le heros, 20px/32
   dans le rappel final) : la mention saute donc une ligne pleine et se
   detache du texte au lieu d en paraitre la derniere phrase.
   ATTENTION a l ordre : ces deux selecteurs sont plus specifiques que
   .fp-langue seul — une marge posee sur la classe simple serait ecrasee ici,
   et la mention se retrouvait collee au paragraphe (defaut du 25/08/2026). */
.fp-hero-carte .fp-langue,
.fp-cta-carte .fp-langue{color:var(--blanc-menthe);
  font-size:13px;line-height:1.35;margin:32px 0 9px;}
.fp-langue + .fp-btn,
.fp-langue + .fp-hero-btn{margin-top:0;}
/* SUR LA VERSION FRANCAISE, la mention est masquee (html[lang="fr"] plus
   haut) : le bouton perdait alors ses 32px et venait se coller au paragraphe
   — 0px mesures le 01/09/2026 sur les 7 heros porteurs de badge, signale par
   Benoist. La ou la mention ne s'affiche pas, c'est le bouton qui reprend la
   ligne pleine, comme sur les pages sans badge. 0-3-0 contre 0-2-0 : cette
   regle gagne, et seulement en francais. */
html[lang="fr"] .fp-langue + .fp-btn,
html[lang="fr"] .fp-langue + .fp-hero-btn{margin-top:32px;}
/* Le cadre de bas de page pose « .fp-cta-carte .fp-btn{margin-top:32px} »
   dans le <style> de SA page. A specificite egale — 0-2-0 des deux cotes —
   c est la page qui gagne, puisqu elle est declaree apres la feuille
   partagee : la regle ci-dessus etait donc sans effet la, et la mention de
   langue se retrouvait a 41px du bouton quand le hero et le popup en
   laissent 9 (constat Benoist, 26/08/2026). On double le selecteur pour
   passer devant, sans rien changer aux boutons qui ne suivent pas une
   mention de langue. */
/* html:not([lang="fr"]) est INDISPENSABLE. Sur le site francais la mention
   est masquee (« html[lang="fr"] .fp-langue{display:none} » plus haut) mais
   elle reste le VOISIN du bouton : sans cette garde, la regle lui retirait
   ses 32px et le bouton venait se coller au paragraphe. Les deux selecteurs
   se repondent — si une langue cessait un jour de masquer la mention, il
   faudrait les modifier ENSEMBLE. */
html:not([lang="fr"]) .fp-cta-carte .fp-langue + .fp-btn{margin-top:0;}
/* le bouton du popup occupe toute la largeur : on centre la mention dessus,
   et on la decolle de la ligne de TVA qui la precede */
/* Le popup est etroit : 222px, moins 20px de retrait de chaque cote, il ne
   restait que 182px — dont 22 pour le globe et son ecart, soit 160px de texte.
   « Live-Sessions auf Französisch » en reclame 181 : la mention passait a la
   ligne, et le globe, centre par align-items sur DEUX lignes, paraissait
   detache du texte (constat Benoist, 25/08/2026).
   On rend au badge les 14px de retrait de chaque cote : 210px de large, donc
   188px de texte. Le francais est masque ici, l anglais tient en 139px — aucune
   autre langue n est touchee, et le texte n a pas eu a etre raccourci. */
.fp-langue--popup{align-self:stretch;justify-content:center;text-align:center;
  margin:14px -14px 9px;}
/* la mention porte deja 9px sous elle : sans cette remise a zero, les deux
   marges s ajoutaient et le popup montrait 19,5px au lieu de 10. */
.fp-popup .fp-btn{margin-top:0;}
/* sous 1024px le script fait migrer le bouton du heros dans .fp-hero-carte,
   ou il est centre. ENFANT DIRECT (>) : .fp-hero-carte contient aussi
   .fp-hero-texte, un selecteur descendant s appliquerait AUSSI en desktop. */
.fp-hero-carte > .fp-langue{align-self:center;justify-content:center;}
@media(max-width:767px){
  .fp-langue,
  .fp-hero-carte .fp-langue,
  .fp-cta-carte .fp-langue{font-size:12.5px;margin-bottom:8px;}
  .fp-langue-globe{width:14px;height:14px;}
}

/* globe des cartes d offre : en ligne, pour ne pas deplacer le bouton du
   selecteur de langues que contiennent les deux cartes de formation */
.carte-langue-globe{width:15px;height:15px;display:inline-block;
  vertical-align:-2px;margin-right:6px;opacity:.75;}


/* ------------------------------------------------------------------------
   Liens DANS une reponse de FAQ (« cette page » -> la caisse de l'offre,
   cablage du 01/09/2026). Le reset global a{color:inherit;text-decoration:
   none} les rendait invisibles — un lecteur ne peut pas savoir qu'un lien
   s'y cache, signale par Benoist le jour meme. Vert du site + soulignement :
   l'habit normal d'un lien dans du texte courant, sur fond clair. */
.fp-faq-rep a{color:var(--vert);text-decoration:underline;
  text-underline-offset:2px;font-weight:600;}
.fp-faq-rep a:hover{color:var(--vert-fonce);}
