/* Surcouche des pages de paiement MemberPress — s appuie sur les jetons de
   br-site.css (--vert, --beige, --bord-chaud, --ivoire, --blanc-menthe...).
   Inventaire des couleurs ecrites en dur, verifie le 23/08/2026 :
     - #FFFFFF : fond des champs de saisie, texte du bouton. Le blanc pur est
       une primitive, pas une couleur de marque.
     - #8C2B1B / #FBEFEA / #E5C4B8 : messages d erreur de MemberPress. La
       charte du site n a pas de rouge — ce sont les SEULES couleurs nouvelles
       de cette feuille, et elles ne s affichent qu en cas d erreur.
   Le bloc « Badge Trustpilot » ajoute en fin de fichier ne compte pas : il est
   repris VERBATIM des pages de vente pour garantir un badge identique, ses
   valeurs ne doivent pas etre touchees ici mais sur le site. */

/* Ce qui respire, c est la STRUCTURE — pas la couleur (Benoist, 20/08/2026,
   d apres la page d inscription de deveneztraderpro.com) : un bandeau-titre
   qui coiffe la page, une colonne etroite, une idee par ligne et du vide
   autour. Le fond reste le beige du site. */
/* l entete du site est FIXEE (62px) : sans ce decalage, le haut du titre
   passait dessous (recouvrement mesure de 10px, Benoist 20/08/2026) */
/* Bandeau-titre. APLAT de --vert-nuit, plus de degrade : deux verts sombres
   etales sur 180px ne se lisaient pas comme une intention mais comme une
   salissure, apres deux tentatives de reglage (21/08/2026). En aplat, entete
   et bandeau forment UN bloc sombre net, et c est le filet vert de marque qui
   pose la rupture sur le beige.
   Le titre ne flottait pas a cause de la couleur mais parce qu il etait SEUL
   au milieu de 180px de vide : le site ne fait jamais ca, il pose toujours
   une petite etiquette au-dessus de ses titres. On lui en donne une, et on
   cale l ensemble a GAUCHE sur le bord exact de la carte — le titre annonce
   alors le formulaire au lieu de planer au-dessus. */
.brt-bandeau{background:var(--vert-nuit);
  border-bottom:3px solid var(--vert);
  padding:calc(var(--h-entete,62px) + 26px) 16px 30px;}
/* meme boite que .brt-carte : les deux bords gauches coincident au pixel */
.brt-bandeau-interieur{max-width:660px;margin:0 auto;}
/* valeurs reprises telles quelles de .mob-sub-cat (br-site.css), l etiquette
   en petites capitales menthe que le site pose deja sur fond vert nuit */
.brt-bandeau-amorce{margin:0 0 10px;color:var(--menthe);
  text-transform:uppercase;font-size:11px;letter-spacing:.12em;font-weight:500;}
/* MAJUSCULES a la facon des blocs du CV de A propos (.ap-encart h3 :
   uppercase + letter-spacing .05em) — demande de Benoist du 21/08/2026.
   Interlettrage ramene a .03em : la valeur du CV est calibree pour du 16px,
   a 30px elle ecartelait la ligne. */
.brt-bandeau h1{margin:0;text-align:left;
  font-size:30px;line-height:1.18;color:var(--blanc-menthe);
  text-transform:uppercase;letter-spacing:.03em;}

/* Benoist, 05/09/2026 : plus de rappel du titre dans la barre fixe au
   defilement. Le mecanisme (span cache, revele en JS quand le bandeau sort
   de l ecran) datait de l entete REDUITE au seul logo ; il ajoutait un
   element dans .br-entete-bande que la mise en page du site (nav complete,
   selecteur de langue, bouton Membres) n a jamais prevu d accueillir, ce qui
   deportait tout le reste hors centre. Le titre reste affiche, fixe, dans le
   bandeau sous le menu (.brt-bandeau h1 ci-dessus) — il n a plus besoin de
   doublon dans la barre du haut. */
main.brt-caisse{max-width:none;margin:0;padding:56px 16px 88px;}
.brt-carte{max-width:660px;margin:0 auto;background:transparent;border:0;
  border-radius:0;padding:0;box-shadow:none;}
/* Structure de reference deveneztraderpro.com (Benoist, 20/08/2026) : le
   prix conclut l intro, juste avant le formulaire — plus de tete de page. */
/* une ligne de respiration apres « Merci de remplir... » et avant le prix,
   comme sur la page de reference (Benoist, 20/08/2026) */
.brt-perso p:first-child{margin-bottom:28px;}
.brt-perso .brt-prixligne{margin-top:32px;}
.brt-perso .brt-prixligne strong{font-size:19px;color:var(--vert-nuit);}
.brt-caisse h2{font-size:20px;color:var(--vert-nuit);margin:28px 0 10px;}
.brt-caisse p{font-size:16px;line-height:1.65;color:var(--texte);margin:0 0 12px;}
.brt-caisse ul{margin:0 0 16px;padding-left:22px;}
.brt-caisse li{font-size:16px;line-height:1.6;color:var(--texte);margin:0 0 6px;}
.brt-caisse a{color:var(--vert);}
.brt-caisse .brt-note{font-size:12.5px;line-height:1.6;color:var(--texte-doux);}
.brt-zone-form .brt-note{margin:14px 0 0;}

/* Le mot personnel de Benoist, juste avant le formulaire. */
/* Sans encadre : le mot personnel se lit comme une note, pas comme un pave
   (« leger, zero friction » — Benoist, 20/08/2026). */
.brt-perso{font-size:16.5px;line-height:1.55;color:var(--vert-nuit);margin:0 0 28px;}
.brt-perso p{margin:0 0 14px;font-size:inherit;}
.brt-perso p:last-child{margin-bottom:0;}

/* Colonne de reassurance (retour du collegue, 20/08/2026) : 3 avis clients
   repris de la page de vente de l offre, badge Trustpilot en grand,
   l essentiel de la commande en 3 lignes. */
/* Le prenom est COLLE a sa citation (tiret + 2px) et les avis sont ecartes
   entre eux : sinon le prenom flottait a mi-chemin et semblait titrer l avis
   suivant (retour Benoist, 20/08/2026). */
.brt-avis{margin:0 0 18px;}
.brt-avis blockquote{margin:0;font-style:italic;font-size:13.5px;line-height:1.5;color:var(--texte);}
/* le <p> de la citation herite sinon du margin-bottom de 12px des paragraphes
   de la caisse — c etait la « ligne vide » entre l avis et le prenom */
.brt-avis blockquote p{margin:0;font-size:inherit;line-height:inherit;}
.brt-avis figcaption{margin-top:0;font-weight:700;font-size:12px;color:var(--vert);}
.brt-avis figcaption::before{content:"— ";}
.brt-recap .tp-badge{margin:6px auto 18px;}
.brt-recap .tp-texte{font-size:17px;}
.brt-recap-label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--texte-doux);margin:0 0 6px;}
.brt-3lignes{margin:0;padding-left:20px;}
.brt-3lignes li{font-size:15px;line-height:1.5;margin:0 0 6px;}
.brt-caisse .brt-prix{font-size:18px;color:var(--vert-nuit);}
.brt-caisse .brt-prix strong{font-size:24px;}

/* Formulaire MemberPress : memes champs que le formulaire de contact du site. */
.mp_wrapper{margin-top:8px;}
.mp_wrapper label, .mepr-form label{display:block;font-size:14px;font-weight:600;
  color:var(--vert-nuit);margin:14px 0 6px;}
.mp_wrapper input[type="text"], .mp_wrapper input[type="email"],
.mp_wrapper input[type="password"], .mp_wrapper input[type="tel"],
.mp_wrapper input[type="number"], .mp_wrapper input[type="url"],
.mp_wrapper select, .mp_wrapper textarea,
.mepr-form input[type="text"], .mepr-form input[type="email"],
.mepr-form input[type="password"], .mepr-form select{
  width:100%;box-sizing:border-box;padding:12px 14px;font:inherit;font-size:16px;
  color:var(--texte);background:#FFFFFF;border:1px solid var(--bord-chaud);
  border-radius:10px;}
.mp_wrapper input:focus, .mp_wrapper select:focus, .mp_wrapper textarea:focus,
.mepr-form input:focus, .mepr-form select:focus{
  outline:2px solid var(--vert);outline-offset:1px;border-color:var(--vert);}
/* CHAMPS PRE-REMPLIS PAR LE NAVIGATEUR (Benoist, 06/09/2026 : « c est qui qui
   fait cette couleur ? »). C est Chrome, pas WordPress : il peint le fond en
   bleu pale des qu il reconnait un champ qu il a memorise. « background » ne
   l enleve pas — Chrome pose le sien dans une couche que la cascade CSS
   n atteint pas. Le seul levier est une ombre INTERNE opaque, qu il laisse
   passer : elle recouvre son bleu. Le texte se rattrape avec
   -webkit-text-fill-color, le curseur avec caret-color. On repose exactement
   l apparence normale du champ (fond blanc, texte de la charte), y compris au
   survol et au focus — sans quoi le bleu revient des qu on clique dedans.
   « :autofill » sans prefixe est la forme standard, pour Firefox et les
   suivants ; les deux regles sont separees, un selecteur inconnu invaliderait
   toute la liste. */
.mp_wrapper input:-webkit-autofill, .mp_wrapper input:-webkit-autofill:hover,
.mp_wrapper input:-webkit-autofill:focus, .mp_wrapper input:-webkit-autofill:active,
.mp_wrapper select:-webkit-autofill, .mp_wrapper textarea:-webkit-autofill,
.mepr-form input:-webkit-autofill, .mepr-form input:-webkit-autofill:hover,
.mepr-form input:-webkit-autofill:focus, .mepr-form select:-webkit-autofill{
  -webkit-box-shadow:inset 0 0 0 1000px #FFFFFF;box-shadow:inset 0 0 0 1000px #FFFFFF;
  -webkit-text-fill-color:var(--texte);caret-color:var(--texte);
  border:1px solid var(--bord-chaud);
  /* Chrome remet sa couleur apres une transition : un delai tres long la
     laisse hors de portee, garde-fou classique et sans effet visible. */
  transition:background-color 100000s ease-in-out 0s;}
.mp_wrapper input:autofill, .mp_wrapper select:autofill, .mp_wrapper textarea:autofill,
.mepr-form input:autofill, .mepr-form select:autofill{
  box-shadow:inset 0 0 0 1000px #FFFFFF;color:var(--texte);
  border:1px solid var(--bord-chaud);}
.mp_wrapper .mepr-submit, .mp_wrapper input[type="submit"],
.mepr-form .mepr-submit, .mepr-form input[type="submit"]{
  display:inline-block;margin-top:22px;padding:14px 32px;font:inherit;font-size:16px;
  font-weight:700;color:#FFFFFF;cursor:pointer;border:0;border-radius:999px;
  background:linear-gradient(90deg,var(--vert-fonce),var(--vert));}
.mp_wrapper .mepr-submit:hover, .mp_wrapper input[type="submit"]:hover{filter:brightness(1.08);}
.mp_wrapper .mepr-submit:focus-visible, .mp_wrapper input[type="submit"]:focus-visible{
  outline:2px solid var(--vert-nuit);outline-offset:2px;}
/* CASES A COCHER (CGV, confidentialite) — ce sont des mentions legales, pas
   des intitules de champ : graisse NORMALE, corps reduit, seul le lien
   ressort (question Benoist du 20/08/2026 ; la regle generale des labels
   MemberPress les mettait en 600). Les deux cases sont groupees juste
   au-dessus du bouton. :has() couvre le balisage reel de MemberPress quel
   que soit le nom de ses classes ; les selecteurs nommes servent de filet. */
.brt-cases{margin:20px 0 0;display:flex;flex-direction:column;gap:12px;}
.mp_wrapper label:has(input[type="checkbox"]),
.mepr-form label:has(input[type="checkbox"]),
.mp_wrapper .brt-case,
.mepr_mepr_agree_to_tos label,
.mepr-form .mepr-tos label{
  display:flex;gap:10px;align-items:flex-start;margin:0;
  font-size:13px;font-weight:400;line-height:1.55;color:var(--texte-doux);}
.mp_wrapper label:has(input[type="checkbox"]) input[type="checkbox"],
.mp_wrapper .brt-case input[type="checkbox"],
.mepr_mepr_agree_to_tos label input[type="checkbox"]{
  margin:3px 0 0;flex:none;width:auto;accent-color:var(--vert);}
.mp_wrapper .mp-form-row:has(input[type="checkbox"]){margin-top:12px;}

/* --- Reprise du 26/08/2026, apres la replique fidele -------------------------
   Le formulaire etait style PAR ATTRIBUT type= ; tout ce qui n en portait pas
   passait au travers, et quatre morceaux du balisage reel de MemberPress
   n avaient AUCUNE regle. Constat Benoist : « des champs de toutes les
   tailles, des messages d erreur en texte standard ». */

/* 1. Le filet par CLASSE : MemberPress pose toujours un type=, mais un champ
   qui en manquerait recoit le meme habit. On vise input/select/textarea et
   JAMAIS la classe seule : MemberPress pose aussi .mepr-form-input sur le
   LABEL des cases a cocher — une regle sur la classe nue l aurait encadre
   de blanc comme un champ de saisie. */
.mp_wrapper input.mepr-form-input, .mepr-form input.mepr-form-input,
.mp_wrapper select.mepr-form-input, .mepr-form select.mepr-form-input,
.mp_wrapper textarea.mepr-form-input{
  width:100%;box-sizing:border-box;padding:12px 14px;font:inherit;font-size:16px;
  color:var(--texte);background:#FFFFFF;border:1px solid var(--bord-chaud);
  border-radius:10px;}

/* 2. Les messages d erreur (« Prenom necessaire », « E-mail non valide ») sont
   des <span class="cc-error"> TOUJOURS presents dans le balisage : c est le JS
   de MemberPress qui les revele a la faute, par un style inline qui gagne sur
   cette regle. Au repos ils doivent etre invisibles — sans cela ils se
   lisaient comme du texte courant sous chaque etiquette. */
.mp_wrapper .cc-error, .mepr-form .cc-error{display:none;}

/* 3. Le bouton d affichage du mot de passe (l oeil). Son icone est une
   dashicon, une police fournie par WordPress : il se dessinera sur le site
   reel, pas dans l apercu statique. On le loge DANS le champ, a droite,
   discret dans les deux cas. */
.mp_wrapper .mp-hide-pw{position:relative;}
.mp_wrapper div.mp-hide-pw button.mp-hide-pw{position:absolute;right:6px;top:50%;
  transform:translateY(-50%);width:36px;height:36px;margin:0;padding:0;border:0;
  background:transparent;color:var(--texte-doux);cursor:pointer;}

/* 4. Les cases de consentement : MemberPress fait du libelle ENTIER un lien et
   pose l asterisque obligatoire APRES </a>, en simple texte. En flex, cet
   asterisque devenait un item a part, rejete au bord droit de la ligne
   (constat Benoist, 26/08/2026). En bloc avec retrait, il coule a la fin de
   la phrase, comme sur le site de reference. La triple classe donne la
   specificite necessaire pour passer devant la regle flex generale. */
/* ATTENTION A LA SPECIFICITE. La regle generique ci-dessus vaut 0-2-2
   (.mp_wrapper + label + :has(input[type=checkbox]), :has() prenant le poids
   de son argument). Un selecteur en 0-2-1 y perdait : la case de
   confidentialite restait en flex et son asterisque repartait au bord droit.
   On passe donc par .mp-form-row, ce qui porte a 0-3-1. */
.mp_wrapper .mp-form-row.mepr_tos label, .mepr-form .mp-form-row.mepr_tos label,
.mp_wrapper .mp-form-row label[for="mepr_agree_to_privacy_policy"],
.mepr-form .mp-form-row label[for="mepr_agree_to_privacy_policy"]{
  display:block;position:relative;padding-left:26px;margin:0;
  font-size:13px;font-weight:400;line-height:1.55;color:var(--texte-doux);}
.mp_wrapper .mp-form-row.mepr_tos label input[type="checkbox"],
.mp_wrapper .mp-form-row label[for="mepr_agree_to_privacy_policy"] input[type="checkbox"]{
  position:absolute;left:0;top:3px;margin:0;width:auto;accent-color:var(--vert);}
.mp_wrapper .mp-form-row.mepr_tos{margin-top:12px;}
/* La case CONFIDENTIALITE n a PAS de classe dediee : MemberPress ne pose
   « mepr_tos » que sur la case des CGV, et rend la seconde dans un simple
   <div class="mp-form-row"> — seul l identifiant du champ l identifie
   (verifie le 26/08/2026 dans la source du plugin et sur un site en
   production). Sans le selecteur par [for], elle serait retombee sur la
   regle flex generale, celle qui rejetait l asterisque au bord droit. */
.mp_wrapper .mp-form-row:has(label[for="mepr_agree_to_privacy_policy"]){margin-top:12px;}
/* Le lien de la case CONFIDENTIALITE est ENCHASSE dans la phrase (MemberPress
   ne lie que la portion entre deux %), a la difference de celui des CGV qui
   EST le libelle entier. Enchasse, la seule couleur ne suffit pas a le
   signaler — c est le critere 1.4.1 des WCAG. On le souligne donc, et
   seulement lui : souligner les trois lignes des CGV alourdirait la page
   sans rien apprendre au lecteur. */
.mp_wrapper .mp-form-row label[for="mepr_agree_to_privacy_policy"] a,
.mepr-form .mp-form-row label[for="mepr_agree_to_privacy_policy"] a{
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;}

.mepr_error, .mepr-form-has-errors{color:#8C2B1B;background:#FBEFEA;
  border:1px solid #E5C4B8;border-radius:10px;padding:10px 14px;margin:12px 0;}
.mepr_price{font-weight:700;color:var(--vert-nuit);}

/* Une seule colonne, tout en vertical (Benoist, 20/08/2026 : « pas de bloc a
   droite, c est lourd a lire ») : apres le formulaire viennent les avis, le
   badge Trustpilot puis l essentiel de la commande. Aucune carte. */
.brt-recap{margin-top:40px;}

/* A partir de 1200px, la preuve sociale devient une carte FIXE a droite —
   seuil choisi pour couvrir un FHD a toutes les echelles usuelles (100% =
   1920, 125% = 1536, 150% = 1280 px CSS ; a 1360 le popup manquait a 1280,
   remonte par Benoist le 20/08/2026). La colonne RESERVE la place de la
   carte, exactement comme la bande des pages de vente reserve celle du popup
   de prix — et elle la reserve A TOUTES LES LARGEURS. J avais d abord borne
   cette reserve a 1499 en me disant qu au-dela « la place existe d elle-meme » :
   vrai pour la collision, faux pour l equilibre. Passe 1500 la colonne se
   recentrait sur la fenetre entiere pendant que la carte restait collee au
   bord ; a 2000px le texte partait 310px a droite du pied de page et
   l entre-deux passait de 136 a plus de 500 px (constat Benoist, 25/08/2026).
   C est le motif du
   popup de prix des pages de vente : badge Trustpilot + les 3 temoignages
   (choix Benoist du 20/08/2026), en corps compact pour rester glancable.
   Sous 1360px tout reste sous le bouton, et rien ne flotte jamais sur petit
   ecran (le site masque aussi son popup). */
@media(min-width:1200px){
  /* La caisse emploie EXACTEMENT la formule de .br-bande (br-site.css) : le
     visiteur qui quitte la page de vente pour la caisse ne voit pas la colonne
     de texte bouger d un pixel. Le retrait de droite ajoute la reserve de la
     carte flottante — sans elle, la carte recouvrait la fin du titre (constat
     Benoist, 20/08/2026) ; valeur ALIGNEE sur celle de la carte : a 388 contre
     372 les deux boites etaient decalees de 8px et le titre ne tombait pas pile
     sur le bord gauche de la colonne. Portee a 452 le 06/09/2026, quand la
     carte est passee de 320 a 400 px de large : les deux valeurs se suivent,
     l ecart de 52 px entre le texte et la carte ne bouge pas. */
  main.brt-caisse,
  .brt-bandeau{
    padding-left:max(var(--marge-bande,40px), calc((100% - var(--bande,1200px))/2));
    padding-right:max(412px, calc((100% - var(--bande,1200px))/2 + 412px));
  }
  /* Cale a GAUCHE sur la bande, et non plus centre dans la boite restante :
     centree, la colonne derivait vers la droite a mesure que la fenetre
     s elargissait — a 2000px elle partait 310px a droite du pied et laissait
     un grand vide a gauche (constat Benoist, 25/08/2026). Calee, le logo, le
     titre du bandeau, le corps de texte et le pied tombent sur la meme
     verticale. */
  .brt-carte,
  .brt-bandeau-interieur{margin-left:0;margin-right:auto;}
}
@media(min-width:1200px){
  .brt-recap{position:fixed;
    /* Alignee sur la PREMIERE LIGNE du texte, et non centree sur la
       fenetre. top:50% la faisait descendre avec la hauteur de l ecran :
       sur un 4K en 100% elle se retrouvait loin sous le contenu (constat
       Benoist, 25/08/2026). La valeur est posee par membres.js, qui lit la
       position reelle de .brt-carte — elle depend du bandeau, donc du
       nombre de lignes du titre : 198px de bandeau a une ligne, 233 a
       deux. Le repli 254px est la valeur juste pour un titre d une ligne,
       soit 9 des 11 pages. */
    top:var(--brt-carte-haut,254px);
    /* ancree sur le bord droit de la BANDE, pas sur celui de la
       fenetre : sinon elle part seule dans le coin sur grand ecran. */
    right:max(var(--marge-bande,40px), calc((100% - var(--bande,1200px))/2));
    /* 400px depuis le 06/09/2026 (Benoist : « mets la police plus grosse,
       quitte a elargir vers la gauche — il y a beaucoup d espace dispo ») :
       la carte grandit vers la GAUCHE, elle reste ancree au bord droit de la
       bande. L espace qu elle prend etait vide (220px sur un ecran de 1920) ;
       la reserve de droite suit a 452px, l ecart au texte est inchange. */
    width:360px;margin:0;display:flex;flex-direction:column;
    background:var(--ivoire);border:1px solid var(--bord-chaud);border-radius:16px;
    padding:20px 22px;box-shadow:0 1px 2px rgba(15,43,34,.04),
    0 12px 28px -14px rgba(15,43,34,.12);
    /* Plafond CONDITIONNEL. membres.js le met a none des que la carte tient
       entiere — c est le cas courant — et ne pose une valeur que sur une
       fenetre vraiment courte, ou meme remontee au maximum elle ne tient
       pas. Avant, le plafond etait systematique : sur une fenetre de 673px
       la carte passait en defilement interne alors qu il suffisait de la
       remonter de 40px (constat Benoist, 25/08/2026, 4K a 200%). */
    max-height:var(--brt-carte-plafond,
      calc(100vh - var(--brt-carte-haut,254px) - 24px));overflow:auto;
    /* S efface a l approche du pied de page (Benoist, 05/09/2026), comme sur
       les pages de vente : le pied recupere alors toute la largeur plutot
       que de la partager avec une carte qui n a plus de texte a
       accompagner. membres.js pose .brt-recap--efface des que le haut du
       pied entre dans la fenetre, et la retire des qu on remonte. */
    transition:opacity .2s ease;}
  .brt-recap.brt-recap--efface{opacity:0;pointer-events:none;}
  /* width:auto ECRASE le « fit-content » du site (.tp-badge) : dans la
     carte, le cadre blanc se dimensionnait sur son texte et non sur la
     carte — il paraissait tasse a droite (constat Benoist, 06/09/2026, sur
     une carte de 400px). En auto, l element flex prend toute la largeur
     offerte, et son texte reste centre. */
  /* Le cadre blanc reprend la largeur de son CONTENU et se centre dans la
     carte, avec des retraits equilibres (Benoist, 06/09/2026 : « harmonise
     les proportions, rapproche les bords droite et gauche du texte »).
     LE DEFAUT D ORIGINE N ETAIT PAS LA LARGEUR MAIS L ALIGNEMENT : la regle
     de la carte remplacait le « margin:18px auto 0 » du site par
     « margin:0 0 16px » — le « auto » disparu, le cadre se collait au bord et
     paraissait tasse. Le « auto » est ici retabli. Le texte etant sur trois
     lignes courtes, un cadre pleine largeur laissait au contraire de grands
     vides sur les cotes. */
  .brt-recap .tp-badge{order:-1;margin:0 auto 16px;
    justify-content:center;text-align:center;
    /* Retraits GENEREUX, et constants dans les six langues : 40px sur les
       cotes, 18 en haut et en bas (Benoist, 06/09/2026 : « les bords sont
       trop rapproches, ca ne respire pas — les proportions d avant etaient
       bien »). Le cadre du site respire parce que son texte REMPLIT ses
       lignes ; ici les trois lignes sont courtes, c est donc le retrait qui
       doit porter l air. Mesure : cadre de 227px en francais, 291 en
       allemand — il tient meme dans la carte etroite (316px utiles). */
    padding:18px 40px;}
  .brt-recap .brt-recap-label{display:none;}
  .brt-recap .brt-avis{margin:0 0 14px;}
  .brt-recap .brt-avis:last-of-type{margin-bottom:0;}
  /* Tailles remontees le 06/09/2026 avec l elargissement de la carte : le
     temoignage passe de 13 a 15px, sa signature de 11.5 a 13, le badge de 15
     a 17. La carte plus large compense la hauteur — un temoignage y tient en
     moins de lignes qu avant. */
  .brt-recap .brt-avis blockquote{font-size:15px;line-height:1.5;}
  .brt-recap .brt-avis figcaption{font-size:13px;}
  .brt-recap .tp-texte{font-size:15px;line-height:1.5;}
  /* Le badge des caisses porte son propre texte, avec un vrai saut de ligne
     apres « Trustpilot » (Benoist, 06/09/2026 : « je veux dissocier ceux des
     pages de vente et ceux des pages de paiement »). Il n y a donc plus rien
     a piloter ici : la mise en forme est dans le contenu, cote a cote avec
     celui des pages de vente qui, lui, reste sur une ligne. Les spans de
     travail (tp-l1, tp-lien, tp-l2, tp-sep2, tp-l3) ont ete retires des deux
     cotes le meme jour — ils n avaient de sens que pour tirer deux rendus
     d un seul texte. */
  /* Badge Trustpilot : le MEME flux de texte que sur le site (Benoist,
     06/09/2026 — il avait d abord demande trois lignes, puis « en 1 ligne
     comme sur le site » une heure apres). Le texte se repartit donc tout
     seul dans la largeur, sans coupure imposee.
     Les spans tp-l1 / tp-lien / tp-l2 restent dans le texte des six langues,
     sans aucune regle : des <span> sont inline par defaut, ils n ont aucun
     effet. On les garde plutot que de repasser sur 132 textes pour retirer
     du balisage inoffensif — et ils redonnent la main sur la coupure si le
     besoin revient. */
  /* --- Ajustement progressif sur fenetre courte ---------------------------
     Avant, la carte passait directement en defilement interne : sur une
     fenetre courte on voyait un ascenseur pour UNE ligne de depassement
     (constat Benoist, 26/08/2026). membres.js essaie desormais, dans l ordre :
     resserrer l espacement, puis replier les avis en partant du dernier, et
     ne pose le plafond qu en tout dernier recours. Le badge Trustpilot et le
     PREMIER avis ne sont jamais replies. */
  .brt-recap--serree{padding:12px 18px;}
  .brt-recap--serree .tp-badge{margin:0 0 10px;}
  .brt-recap--serree .brt-avis{margin:0 0 9px;}
  .brt-recap--serree .brt-avis blockquote{font-size:14px;line-height:1.42;}
  .brt-recap--serree .brt-avis figcaption{font-size:12.5px;}
  .brt-recap--serree .tp-texte{font-size:15.5px;}
  .brt-recap .brt-avis--repliee{display:none;}
}
/* Au-dela de 1280px, la carte s elargit a 440 (Benoist, 06/09/2026 : « il y a
   beaucoup d espace dispo »). Pourquoi un palier et non une largeur unique :
   sous 1280px l ecart entre la colonne de texte et la carte vaut « largeur de
   fenetre - 1180 » ; avec une carte de 440 il tombait a 12px sur une fenetre
   de 1200 et la colonne de texte commencait a etre comprimee (mesure du
   jour). En dessous de 1280 la carte reste donc a 360, au-dessus elle prend
   ses 440 — l ecart y vaut 100px, quelle que soit la fenetre. */
@media(min-width:1280px){
  main.brt-caisse,
  .brt-bandeau{
    padding-right:max(492px, calc((100% - var(--bande,1200px))/2 + 492px));
  }
  .brt-recap{width:440px;}
}
/* Mention de la langue des prestations en direct. Ecrite en FRANCAIS dans le
   contenu source, elle est masquee sur les caisses francaises : y annoncer que
   les sessions sont en francais n apprendrait rien. Meme mecanique que
   « html[lang="fr"] .carte-langue--fr » sur le site — et elle ne fonctionne
   QUE parce que header.php pose desormais la langue de la page (voir la note
   qui s y trouve). Depuis le 27/08/2026 elle ne clot plus le bloc mais se
   glisse JUSTE AVANT l encouragement : un filet horizontal y couperait le fil
   du texte, on passe donc a un filet lateral, qui detache sans separer. */
.brt-langue-live{margin:14px 0;padding:10px 14px;
  border-left:3px solid var(--bord-chaud);border-radius:0 8px 8px 0;
  background:rgba(0,0,0,.02);
  font-size:14px;line-height:1.5;color:var(--texte-doux);}
html[lang="fr"] .brt-langue-live{display:none;}
/* --- Formulaire MemberPress : les trois blocs que la feuille ne couvrait pas.
   Structure relevee le 26/08/2026 sur une page en production (MemberPress
   1.12.17). Avant cela l apercu montrait un cadre pointille : on ne pouvait
   pas savoir si ces regles tombaient juste — elles n existaient donc pas.
   Mesures faites sur la replique : le <fieldset> arrivait avec la bordure
   « groove » du navigateur, le tableau a 290px de large, et la ligne de prix
   empilait son etiquette au-dessus du montant. */

/* Ligne de prix de MemberPress : MASQUEE (decision Benoist, 26/08/2026).
   Le montant apparaissait TROIS fois sur la page — dans le texte de l offre,
   dans cette ligne, puis dans le recapitulatif. On retire celle-ci plutot que
   le texte : le contenu du site n est pas touche, rien ne repasse par la
   chaine de traduction, et le recapitulatif garde le detail de la TVA, qui
   est l information utile au moment de payer.
   Les regles de mise en forme sont conservees en commentaire : si la ligne
   devait revenir, elle est prete.
     .mp_wrapper .mepr_price{display:flex;align-items:baseline;
       justify-content:space-between;gap:14px;padding:13px 16px;margin:0 0 18px;
       background:var(--ivoire);border:1px solid var(--bord-chaud);
       border-radius:12px;}
     .mp_wrapper .mepr_price_cell_label{font-size:14px;color:var(--texte-doux);}
     .mp_wrapper .mepr_price_cell{font-size:20px;font-weight:700;color:var(--vert);} */
.mp_wrapper .mepr_price{display:none;}

/* Recapitulatif du paiement en une page. */
.mp_wrapper .mepr-transaction-invoice-wrapper{margin:18px 0;}
.mp_wrapper .mp_invoice{margin:0;}
.mp_wrapper .mp-table{width:100%;border-collapse:collapse;font-size:14px;}
.mp_wrapper .mp-table th,
.mp_wrapper .mp-table td{text-align:left;padding:9px 0;
  border-bottom:1px solid var(--bord-chaud);}
.mp_wrapper .mp-table thead th{font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--texte-doux);font-weight:500;}
.mp_wrapper .mp-table tfoot th{border-bottom:0;font-size:15px;}
.mp_wrapper .mp-currency-cell{text-align:right;white-space:nowrap;}

/* Moyen de paiement. min-inline-size:0 est INDISPENSABLE : un <fieldset> a une
   largeur minimale implicite qui l empeche de retrecir dans une colonne
   etroite, et il debordait en mobile. */
.mp_wrapper .mepr-payment-methods-wrapper{border:1px solid var(--bord-chaud);
  border-radius:12px;padding:12px 16px 14px;margin:0 0 18px;min-inline-size:0;}
.mp_wrapper .mepr-payment-methods-wrapper legend{font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--texte-doux);
  padding:0 6px;}
.mp_wrapper .mepr-payment-methods-icons{margin:0 0 8px;}

/* Champs imposes par la TVA : la liste deroulante des pays et les deux boutons
   radio du type de client. Sans ces regles la liste arrivait avec l habillage
   du navigateur, au milieu de champs habilles. */
.mp_wrapper .mepr-select-field{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--texte-doux) 50%),
    linear-gradient(135deg,var(--texte-doux) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),
    calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:42px;}
.mp_wrapper .mepr-radios-field{display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:6px 0 0;}
.mp_wrapper .mepr-radios-field-row{display:flex;align-items:center;gap:8px;}
.mp_wrapper .mepr-form-radios-label{font-size:15px;margin:0;cursor:pointer;}
.mp_wrapper .mepr_vat_customer_type_row > label{font-size:14px;
  color:var(--texte-doux);}
.mp_wrapper .mepr-payment-option-label{display:flex;align-items:center;gap:9px;
  font-size:15px;cursor:pointer;margin:0 0 4px;}
.mp_wrapper .mepr-payment-methods-wrapper hr{border:0;
  border-top:1px solid var(--bord-chaud);margin:12px 0;}
.mp_wrapper .mepr-stripe-gateway-description{font-size:13.5px;
  color:var(--texte-doux);line-height:1.5;}

.brt-prix-recap{display:none;}
.brt-recap-label{margin-top:28px;}

@media(max-width:767px){
  .brt-bandeau{padding:calc(var(--h-entete,62px) + 22px) 16px 26px;}
  .brt-bandeau h1{font-size:22px;letter-spacing:.02em;}
  .brt-bandeau-amorce{font-size:10.5px;letter-spacing:.1em;margin-bottom:8px;}
  /* main. est INDISPENSABLE : la ligne main.brt-caisse plus haut vaut
     0-1-1, .brt-caisse seul vaut 0-1-0, et une media query n ajoute
     aucune specificite. Sans le prefixe, ce reglage mobile ne s appliquait
     jamais et la caisse gardait 56/88px sous 768px (audit du 25/08/2026). */
  main.brt-caisse{padding:36px 16px 64px;}
}

/* --- Pied de page du tunnel : IDENTIQUE aux pages de vente (05/09/2026,
   Benoist — « le footer doit être EXACTEMENT le même que les pages de
   vente »). Les regles qui vivaient ici (colonne de marque forcee a 100% de
   large, avertissement non justifie, retraits mobiles reecrits) dataient
   toutes du pied a trois colonnes AMPUTE de ses deux colonnes de liens —
   c est justement ce qui vient d etre annule : le pied est de nouveau
   extrait tel quel, colonnes comprises, et n a donc plus besoin d aucun
   correctif de mise en page. Le laisser aurait force la colonne de marque
   sur toute la largeur et rejete les deux colonnes de liens sur une ligne
   du dessous — exactement le defaut signale le 05/09/2026. */
/* LA RESERVE DE PLACE POUR LA CARTE, DANS LE PIED, EST LEVEE (05/09/2026).
      Jusqu au 25/08/2026 la carte ne s effacait jamais — « la preuve sociale
      reste sous les yeux jusqu au bout » — d ou une reserve de 360px sur le
      bord droit du pied, pour qu elle ne recouvre jamais l avertissement sur
      les risques en arrivant en bas de page.
      Benoist revient sur ce choix le 05/09/2026 : la carte doit maintenant
      s effacer des que le pied entre a l ecran (membres.js, fonction
      positionner). Elle ne peut donc plus le recouvrir — la reserve n a
      plus d objet, et privait le pied de 360px qu il pouvait a nouveau
      utiliser. La bande du pied retrouve sa largeur normale (--bande-pied,
      1280px), identique a celle des pages de vente. */

/* Badge Trustpilot — regles reprises verbatim des pages de vente */
.tp-badge{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 0;width:fit-content;text-decoration:none;}
.tp-stars{color:#009a68;font-size:18px;line-height:1;vertical-align:-1.5px;}
.tp-verif{white-space:nowrap;}
.tp-coche{color:#009a68;font-weight:700;}
.tp-texte{font-size:16px;line-height:1.35;text-align:center;color:var(--ivoire);transition:color .16s ease;}
.tp-badge:hover .tp-texte{color:var(--menthe);}
.tp-bloc{background:#fff;border:1px solid var(--bord-chaud,#E5E1D6);border-radius:16px;padding:14px 26px;margin-top:24px;box-shadow:0 1px 2px rgba(15,43,34,.04), 0 8px 20px -12px rgba(15,43,34,.10);}
.tp-bloc .tp-texte{color:var(--vert-nuit,#06231D);}
.tp-bloc:hover .tp-texte{color:var(--vert,#076653);}
@media(max-width:767px){.tp-sep{display:none;}.tp-verif{display:block;}.tp-badge{padding-left:12px;padding-right:12px;}}

/* Accueil du site de caisse (front-page.php et modele « Accueil espace membres ») :
   regles du bloc a coller, generer_contenu_accueil.py — source unique. */
main.brt-accueil-membres{max-width:720px;margin:0 auto;padding:64px 24px 96px;}
.brt-accueil-carte{background:var(--ivoire);border:1px solid var(--bord-chaud);
  border-radius:16px;padding:40px 36px;text-align:center;}
.brt-accueil-carte p{font-size:17px;line-height:1.6;color:var(--texte);margin:0 0 28px;}
/* Meme animation que le bouton Membres de l entete (br-site.css) : le calque
   blanc glisse depuis la gauche en .45s, le texte passe au vert nuit
   (Benoist, 05/09/2026). Couleurs inversees pour la carte ivoire : fond vert
   nuit au repos, bordure vert nuit conservee sous le calque. position:relative
   + isolation:isolate gardent le calque (z-index:-1 dans br-site.css) DANS le
   bouton, au-dessus de son fond et sous son texte — sans contexte d empilement
   il passerait derriere la carte et l on ne verrait rien. */
.brt-accueil-membres-bouton{position:relative;isolation:isolate;display:flex;width:fit-content;
  margin:0 auto;transform:none;height:auto;padding:14px 30px;font-size:16px;
  background:var(--vert-nuit);border-color:var(--vert-nuit);color:#fff;}
/* br-site.css cache le LIBELLE du bouton Membres sous 1024px (icone seule,
   40x40 dans l entete) : ici c est l appel a l action de la page, le texte
   « Se connecter » doit rester lisible a toutes les largeurs (constat du
   05/09/2026 : a 375px le bouton n avait plus que son icone). */
.brt-accueil-membres-bouton .br-membres-texte{display:inline;}
.brt-accueil-membres-bouton{gap:10px;}
.brt-accueil-membres-bouton:hover{background:var(--vert-nuit);border-color:var(--vert-nuit);color:var(--vert-nuit);}