/* ===== DA « YOUR ACCOUNT » — porté de la preview (mf-preview-account-da.css).
   Chargé UNIQUEMENT pour adrien@greenbrothers.ch ET sur les pages compte (gate head.tpl).
   Réutilise les visuels /mf-preview-acc-*.png déjà en ligne. ===== */

/* fond graffiti PLEIN CADRE : posé sur <html> (sous tout) + body/wrappers rendus transparents,
   pour survivre à n'importe quel fond blanc de wrapper du thème. (CSS chargé QUE sur pages compte) */
html.mf-da{background:#f6f5f0 url("/mf-preview-account-bg.jpg") center top/cover no-repeat fixed !important;}
html.mf-da body,
html.mf-da #wrapper,
html.mf-da .row.row-wrapper,
html.mf-da .row-wrapper,
html.mf-da .page-title-wrapper,
html.mf-da #content-wrapper,
html.mf-da .content-sidebar,
html.mf-da #columns{background:transparent !important;box-shadow:none !important;}
/* le thème masque son <footer class="page-footer"> (il a son propre footer) : on le ré-affiche pour Adrien */
html.mf-da .page-footer{display:block !important;}
/* hub (#my-account) : on masque le titre natif (on a le nôtre) ; sous-pages : on le garde (stylé plus bas) */
html.mf-da body#my-account .page-header,
html.mf-da .breadcrumb,
html.mf-da #wrapper > .breadcrumb,
html.mf-da #content-wrapper > .breadcrumb{display:none !important;}
.mf-acc-crumb{display:none !important;}
/* trait résiduel (hr / séparateur du thème avant le footer) */
html.mf-da hr,html.mf-da #content hr,html.mf-da .page-footer hr{display:none !important;}
/* le <footer class="page-footer"> du thème a un fond sombre -> on le rend transparent
   pour que boutons graffiti + réassurance reposent sur le fond graffiti (parallaxe) */
html.mf-da #footer,
html.mf-da .page-footer,
html.mf-da #main > .page-footer,
html.mf-da #content-wrapper .page-footer{background:transparent !important;border:none !important;
  box-shadow:none !important;padding:0 !important;margin:0 !important;}
/* on aplatit les conteneurs du thème pour laisser voir le fond body */
html.mf-da #wrapper,
html.mf-da #main,
html.mf-da #content-wrapper,
html.mf-da .page-customer-account{background:transparent !important;box-shadow:none !important;border:none !important;padding:0 !important;margin:0 !important;}
/* hub : #content plein cadre transparent (les sous-pages, elles, auront un panneau) */
html.mf-da body#my-account #content,
html.mf-da body#my-account #main .page-content{background:transparent !important;box-shadow:none !important;border:none !important;padding:0 !important;margin:0 !important;}

.mf-acc-wrap{
  position:relative;background:transparent !important;
  padding:54px 20px 64px;margin:0;min-height:72vh;
}
.mf-acc-inner{max-width:1160px;margin:0 auto;}
.mf-acc-head{text-align:center;margin:0 0 8px;}
.mf-acc-title{
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;
  font-size:clamp(32px,5vw,52px);line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;color:#141a12;margin:0;
  display:inline-block;position:relative;
}
.mf-acc-title em{color:#7cbf1e;font-style:normal;}
.mf-acc-title::after{
  content:"";position:absolute;left:6%;right:6%;bottom:-10px;height:7px;border-radius:6px;
  background:#7cbf1e;transform:rotate(-.6deg);opacity:.9;
}
.mf-acc-crumb{margin:26px 0 4px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.02em;color:#6a726a;}
.mf-acc-crumb a{color:#141a12;text-decoration:none;}
.mf-acc-crumb a:hover{color:#7cbf1e;}
.mf-acc-crumb span{color:#7cbf1e;}
.mf-acc-crumb i{margin:0 8px;font-style:normal;color:#b7bdb2;}

.mf-acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:38px 0 28px;}
.mf-acc-card{
  position:relative;display:flex;align-items:flex-start;gap:16px;
  background:#141a12;border:1px solid rgba(124,191,30,.18);border-radius:16px;
  padding:24px 26px;text-decoration:none;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mf-acc-card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(120% 120% at 12% 0%,rgba(124,191,30,.12),transparent 55%);
}
.mf-acc-card:hover{transform:translateY(-3px);border-color:rgba(124,191,30,.55);box-shadow:0 16px 34px rgba(0,0,0,.28);}
.mf-acc-card__ico{
  width:68px;height:68px;flex-shrink:0;
  background:url("/mf-preview-star.png") center/contain no-repeat;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
/* icônes par rôle de carte (indépendant de la position) */
.mf-acc-card--reviews  .mf-acc-card__ico{background-image:url("/mf-preview-star.png") !important;}
.mf-acc-card--info     .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-person.png") !important;}
.mf-acc-card--addr     .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-pin.png") !important;}
.mf-acc-card--orders   .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-calendar.png") !important;}
.mf-acc-card--slips    .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-receipt.png") !important;}
.mf-acc-card--vouchers .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-tag.png") !important;}
.mf-acc-card--returns  .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-receipt.png") !important;}
.mf-acc-card--social   .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-social.png") !important;}
.mf-acc-card--signout  .mf-acc-card__ico{background-image:url("/mf-preview-acc-ic-signout.png") !important;}
.mf-acc-card__b{flex:1 1 auto;min-width:0;padding-top:2px;}
.mf-acc-card__b h3{
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;
  font-size:16px;line-height:1.12;text-transform:uppercase;letter-spacing:.01em;
  color:#fff !important;margin:0 0 8px;
}
.mf-acc-card__b p{font-size:13px;line-height:1.45;color:rgba(255,255,255,.62);margin:0;}
.mf-acc-card__arw{
  align-self:center;flex-shrink:0;color:#7cbf1e;font-size:22px;line-height:1;font-weight:900;
  transition:transform .18s ease;
}
.mf-acc-card:hover .mf-acc-card__arw{transform:translateX(4px);}
/* le thème colore parfois les <a> en olive au survol : on garde la carte intacte */
.mf-acc-card:hover .mf-acc-card__b h3{color:#fff !important;}

.mf-acc-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:10px 0 0;justify-content:flex-start;}
.mf-acc-imgbtn{display:inline-block;line-height:0;text-decoration:none;transition:transform .16s ease,filter .16s ease;}
.mf-acc-imgbtn img{height:92px;width:auto;display:block;}
.mf-acc-imgbtn:hover{transform:translateY(-2px);filter:drop-shadow(0 7px 16px rgba(0,0,0,.28));}
@media (max-width:620px){.mf-acc-imgbtn img{height:70px;}.mf-acc-actions{gap:12px;}}

@media (max-width:980px){.mf-acc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){
  .mf-acc-grid{grid-template-columns:1fr;}
  .mf-acc-wrap{padding:34px 14px 46px;}
  .mf-acc-card{padding:20px;}
  .mf-acc-actions{flex-direction:column;}
}

/* cartes injectées par des modules (hook displayCustomerAccount) -> look DA aussi */
.mf-acc-grid > a:not(.mf-acc-card){
  display:flex;align-items:center;gap:16px;width:auto !important;max-width:none !important;float:none !important;
  background:#141a12;border:1px solid rgba(124,191,30,.18);border-radius:16px;padding:24px 26px;
  text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.18);color:#fff;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:15px;
  transition:transform .18s ease,border-color .18s ease;
}
.mf-acc-grid > a:not(.mf-acc-card):hover{transform:translateY(-3px);border-color:rgba(124,191,30,.55);}
.mf-acc-grid > a:not(.mf-acc-card) .link-item{display:flex;align-items:center;gap:14px;color:#fff !important;padding:0;border:none;box-shadow:none;background:none;}
.mf-acc-grid > a:not(.mf-acc-card) .material-icons{color:#7cbf1e;font-size:34px;}

/* Carte "Connection with Social Networks" (module facebookpsconnect, id #bt_sl-link) :
   mise en page ISO carte DA -> icône à gauche, titre + description, flèche à droite. */
html.mf-da #bt_sl-link{position:relative;display:flex;align-items:center;min-height:116px;
  padding:24px 56px 24px 100px !important;}
html.mf-da #bt_sl-link .link-item{display:block !important;padding:0 !important;border:none !important;
  box-shadow:none !important;background:none !important;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:16px;line-height:1.12;
  text-transform:uppercase;letter-spacing:.01em;color:#fff !important;}
html.mf-da #bt_sl-link .material-icons{position:absolute;left:26px;top:50%;transform:translateY(-50%);
  margin:0 !important;width:68px;height:68px;font-size:0 !important;color:transparent !important;
  background:url("/mf-preview-acc-ic-social.png") center/contain no-repeat;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
html.mf-da #bt_sl-link .link-item::after{content:"Connect your social accounts for a faster experience.";
  display:block;margin-top:9px;font-family:Arial,sans-serif;font-weight:400;font-size:13px;line-height:1.45;
  text-transform:none;letter-spacing:0;color:rgba(255,255,255,.62);}
html.mf-da #bt_sl-link::after{content:"";position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cbf1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='18' y2='12'/%3E%3Cpolyline points='12 6 18 12 12 18'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .18s ease;}
html.mf-da #bt_sl-link:hover::after{transform:translate(4px,-50%);}

/* Flèches de TOUTES les cartes DA -> SVG (rendu identique quelle que soit la police) */
.mf-acc-card__arw{width:26px;height:26px;font-size:0 !important;color:transparent !important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cbf1e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='18' y2='12'/%3E%3Cpolyline points='12 6 18 12 12 18'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (max-width:620px){
  html.mf-da #bt_sl-link{padding:20px 48px 20px 104px !important;min-height:104px;}
  html.mf-da #bt_sl-link .material-icons{left:20px;width:64px;height:64px;}
}

/* ============ Bande de réassurance (portée de mf-preview-street-da, valeurs concrètes) ============ */
.mf-rb{background:transparent;padding:24px 20px 64px;}
.mf-rb-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.mf-rb-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  background:#141a12;border:1px solid rgba(124,191,30,.20);border-radius:20px;
  box-shadow:0 14px 34px rgba(0,0,0,.22);padding:34px 20px;}
.mf-rb-img{width:112px;height:112px;object-fit:contain;display:block;}
.mf-rb-title{margin:0;color:#fff;font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:15px;letter-spacing:.02em;line-height:1.15;}
.mf-rb-sub{margin:4px 0 0;color:rgba(255,255,255,.6);font-size:13px;line-height:1.4;}
@media(max-width:980px){.mf-rb-inner{grid-template-columns:repeat(2,1fr);}}
/* mobile : 2 colonnes x 2 lignes (au lieu d'une seule colonne empilée) */
@media(max-width:560px){.mf-rb-inner{grid-template-columns:repeat(2,1fr);gap:14px;}.mf-rb{padding:16px 14px 46px;}
  .mf-rb-item{padding:24px 12px;}.mf-rb-img{width:88px;height:88px;}
  .mf-rb-title{font-size:13px;}.mf-rb-sub{font-size:11.5px;}}

/* ================= SOUS-PAGES COMPTE (identity / addresses / history / order-detail /
   order-slip / discount / order-follow / avis) — skin DA du markup natif PrestaShop.
   Différenciation par <body id="{page_name}"> : tout SAUF #my-account. ================= */

/* titre natif -> style DA (charcoal, souligné lime) */
html.mf-da body:not(#my-account) .page-header{max-width:1100px;margin:34px auto 0 !important;padding:0 40px !important;text-align:left;}
html.mf-da body:not(#my-account) .page-header h1,
html.mf-da body:not(#my-account) .page-header .page-title{display:inline-block;position:relative;margin:0;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(26px,4vw,40px);line-height:1.05;color:#141a12;}
html.mf-da body:not(#my-account) .page-header h1::after,
html.mf-da body:not(#my-account) .page-header .page-title::after{content:"";position:absolute;left:0;right:8%;
  bottom:-8px;height:6px;border-radius:5px;background:#7cbf1e;transform:rotate(-.5deg);opacity:.9;}

/* #content -> panneau DA sombre centré sur le fond graffiti */
html.mf-da body:not(#my-account):not(#authentication) #content{max-width:1100px;margin:26px auto 48px !important;
  padding:32px 40px !important;background:#141a12 !important;border:1px solid rgba(124,191,30,.18) !important;
  border-radius:18px !important;box-shadow:0 16px 40px rgba(0,0,0,.28) !important;color:rgba(255,255,255,.85);}
html.mf-da body:not(#my-account) #content *{border-color:rgba(255,255,255,.12);}

/* titres internes */
html.mf-da body:not(#my-account) #content h1,
html.mf-da body:not(#my-account) #content h2,
html.mf-da body:not(#my-account) #content h3,
html.mf-da body:not(#my-account) #content h4,
html.mf-da body:not(#my-account) #content legend{color:#fff !important;font-family:'Arial Black',Arial,sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.02em;}
html.mf-da body:not(#my-account) #content p,
html.mf-da body:not(#my-account) #content li,
html.mf-da body:not(#my-account) #content span,
html.mf-da body:not(#my-account) #content td,
html.mf-da body:not(#my-account) #content .form-control-comment{color:rgba(255,255,255,.82);}

/* champs de formulaire */
html.mf-da body:not(#my-account) #content label{color:rgba(255,255,255,.6) !important;font-size:12px;
  text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
html.mf-da body:not(#my-account) #content .form-control,
html.mf-da body:not(#my-account) #content input[type=text],
html.mf-da body:not(#my-account) #content input[type=email],
html.mf-da body:not(#my-account) #content input[type=password],
html.mf-da body:not(#my-account) #content input[type=tel],
html.mf-da body:not(#my-account) #content input[type=number],
html.mf-da body:not(#my-account) #content input[type=date],
html.mf-da body:not(#my-account) #content select,
html.mf-da body:not(#my-account) #content textarea{background:#0f140d !important;
  border:1px solid rgba(255,255,255,.14) !important;color:#fff !important;border-radius:10px !important;
  box-shadow:none !important;}
html.mf-da body:not(#my-account) #content .form-control:focus,
html.mf-da body:not(#my-account) #content select:focus,
html.mf-da body:not(#my-account) #content textarea:focus{border-color:#7cbf1e !important;outline:none !important;}
html.mf-da body:not(#my-account) #content input::placeholder,
html.mf-da body:not(#my-account) #content textarea::placeholder{color:rgba(255,255,255,.35);}
html.mf-da body:not(#my-account) #content .input-group-addon,
html.mf-da body:not(#my-account) #content .input-group-btn > *{background:#0f140d !important;
  border-color:rgba(255,255,255,.14) !important;color:rgba(255,255,255,.7) !important;}

/* boutons -> pill rose DA (survol lime) */
html.mf-da body:not(#my-account) #content .btn-primary,
html.mf-da body:not(#my-account) #content button[type=submit],
html.mf-da body:not(#my-account) #content .btn.btn-primary{background:#F2387A !important;border:none !important;
  color:#fff !important;border-radius:40px !important;font-family:'Arial Black',Arial,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.04em;font-size:13px;padding:14px 30px !important;box-shadow:none !important;
  transition:background .16s ease,color .16s ease,transform .16s ease;}
html.mf-da body:not(#my-account) #content .btn-primary:hover,
html.mf-da body:not(#my-account) #content button[type=submit]:hover{background:#7cbf1e !important;color:#0d140b !important;transform:translateY(-2px);}
/* boutons secondaires (contour lime) */
html.mf-da body:not(#my-account) #content .btn-secondary,
html.mf-da body:not(#my-account) #content .btn-default,
html.mf-da body:not(#my-account) #content .btn-outline-secondary{background:transparent !important;
  border:2px solid rgba(124,191,30,.5) !important;color:#7cbf1e !important;border-radius:40px !important;
  font-family:'Arial Black',Arial,sans-serif;text-transform:uppercase;font-size:12px;padding:10px 22px !important;}
html.mf-da body:not(#my-account) #content .btn-secondary:hover{background:#7cbf1e !important;color:#0d140b !important;border-color:#7cbf1e !important;}

/* liens (dont "Back to my account") */
html.mf-da body:not(#my-account) #content a{color:#7cbf1e;}
html.mf-da body:not(#my-account) #content a:hover{color:#8fd42a;}
html.mf-da body:not(#my-account) #content .account-link,
html.mf-da body:not(#my-account) #content a[href*="my-account"]{font-family:'Arial Black',Arial,sans-serif;
  font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.03em;}

/* tables (historique commandes, avoirs) */
html.mf-da body:not(#my-account) #content table{width:100%;border-collapse:collapse;background:transparent !important;color:rgba(255,255,255,.82);}
html.mf-da body:not(#my-account) #content table th{color:#7cbf1e !important;font-family:'Arial Black',Arial,sans-serif;
  font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.05em;text-align:left;
  padding:0 14px 12px !important;border-bottom:1px solid rgba(255,255,255,.12) !important;background:transparent !important;}
html.mf-da body:not(#my-account) #content table td{padding:14px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;background:transparent !important;}
html.mf-da body:not(#my-account) #content table tr:last-child td{border-bottom:none !important;}
html.mf-da body:not(#my-account) #content .table-labeled .label,
html.mf-da body:not(#my-account) #content .badge,
html.mf-da body:not(#my-account) #content .label{border-radius:20px;padding:5px 12px;font-weight:900;
  font-family:'Arial Black',Arial,sans-serif;font-size:11px;text-transform:uppercase;}

/* cartes adresses */
html.mf-da body:not(#my-account) #content .address{background:#0f140d !important;border:1px solid rgba(255,255,255,.1) !important;
  border-radius:14px !important;box-shadow:none !important;color:rgba(255,255,255,.8);}
html.mf-da body:not(#my-account) #content .address .address-header,
html.mf-da body:not(#my-account) #content .address-footer{background:transparent !important;border-color:rgba(255,255,255,.1) !important;}

/* blocs d'info / alertes */
html.mf-da body:not(#my-account) #content .card,
html.mf-da body:not(#my-account) #content .well,
html.mf-da body:not(#my-account) #content .box{background:#0f140d !important;border:1px solid rgba(255,255,255,.1) !important;
  border-radius:14px !important;box-shadow:none !important;color:rgba(255,255,255,.82);}

@media (max-width:760px){
  html.mf-da body:not(#my-account) .page-header{padding:0 18px !important;}
  html.mf-da body:not(#my-account) #content{padding:22px 18px !important;margin:18px 12px 36px !important;}
}

/* pied DA des sous-pages (boutons graffiti alignés sur le panneau centré) */
.mf-acc-foot{max-width:1100px;margin:0 auto;padding:16px 40px 0;}
.mf-acc-foot .mf-acc-actions{margin:0;}
@media (max-width:760px){.mf-acc-foot{padding:12px 18px 0;}}

/* ============ Order history : ISO preview ============ */
/* intro + colonne actions (Details/Reorder) masquées ; badges de statut en pastille verte contour ;
   références (th de ligne) en blanc normal (pas lime) */
html.mf-da body#history #content > h6{display:none !important;}
html.mf-da body#history #content .table th:last-child,
html.mf-da body#history #content .table td:last-child{display:none !important;}
html.mf-da body#history #content .label-pill{background:transparent !important;
  border:1.5px solid rgba(124,191,30,.55) !important;color:#a6e34a !important;box-shadow:none !important;}
html.mf-da body:not(#my-account) #content table tbody th{color:rgba(255,255,255,.92) !important;
  font-family:Arial,sans-serif;font-weight:700;text-transform:none;letter-spacing:0;font-size:13px;}

/* ============ Credit slips : intro + alerte native masquées, état vide DA ============ */
html.mf-da body#order-slip #content > h6,
html.mf-da body#order-slip #content .alert{display:none !important;}

/* ============ État vide DA (réutilisable) ============ */
.mf-acc-empty{text-align:center;padding:40px 20px;}
.mf-acc-empty__ic{width:84px;height:84px;margin:0 auto 18px;background:center/contain no-repeat;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.mf-acc-empty h3{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:18px;
  text-transform:uppercase;color:#fff !important;margin:0 0 8px;}
.mf-acc-empty p{color:rgba(255,255,255,.55) !important;font-size:14px;margin:0 auto 22px;max-width:420px;line-height:1.5;}
.mf-acc-cta--ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;
  border:2px solid rgba(124,191,30,.5);color:#7cbf1e !important;border-radius:40px;padding:13px 28px;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;font-size:12px;
  letter-spacing:.04em;text-decoration:none;transition:background .16s ease,color .16s ease,transform .16s ease;}
.mf-acc-cta--ghost:hover{background:#7cbf1e;color:#0d140b !important;transform:translateY(-2px);}

/* ============ Page « Social Networks » (module facebookpsconnect/account) : DA « Follow us » ============ */
/* #content transparent (le panneau .mf-acc-panel fait la carte, pas de double panneau) */
html.mf-da body#module-facebookpsconnect-account #content{max-width:1100px;margin:26px auto 40px !important;
  padding:0 !important;background:transparent !important;border:none !important;box-shadow:none !important;}
/* titre en DA (charcoal + soulignement lime) puisqu'il est sur le fond graffiti clair */
html.mf-da body#module-facebookpsconnect-account #content h1.page-subheading{display:inline-block;position:relative;
  color:#141a12 !important;font-family:'Arial Black',Arial,sans-serif;font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(26px,4vw,40px);line-height:1.05;text-align:left;margin:0 0 26px;padding:0;}
html.mf-da body#module-facebookpsconnect-account #content h1.page-subheading::after{content:"";position:absolute;
  left:0;right:8%;bottom:-8px;height:6px;border-radius:5px;background:#7cbf1e;transform:rotate(-.5deg);opacity:.9;}

/* panneau + boutons sociaux (portés de la preview) */
.mf-acc-panel{background:#141a12;border:1px solid rgba(124,191,30,.18);border-radius:16px;padding:28px 30px;
  box-shadow:0 10px 26px rgba(0,0,0,.18);margin:0 0 22px;}
.mf-acc-panel__h{font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:14px;text-transform:uppercase;
  letter-spacing:.04em;color:#fff !important;margin:0 0 22px;display:flex;align-items:center;gap:10px;}
.mf-acc-panel__h::before{content:"";width:22px;height:4px;border-radius:3px;background:#7cbf1e;}
.mf-acc-lead{color:rgba(255,255,255,.6) !important;font-size:14px;line-height:1.55;margin:0 0 22px;max-width:560px;}
.mf-acc-social{display:flex;flex-direction:column;gap:14px;max-width:440px;}
.mf-acc-sbtn{display:flex;align-items:center;gap:14px;padding:15px 22px;border-radius:12px;text-decoration:none;
  font-family:'Arial Black',Arial,sans-serif;font-weight:900;font-size:14px;color:#fff !important;transition:transform .16s ease;}
.mf-acc-sbtn:hover{transform:translateY(-2px);}
.mf-acc-social .mf-acc-sbtn:hover,.mf-acc-social .mf-acc-sbtn:hover *,
.mf-acc-sbtn:hover,.mf-acc-sbtn:hover *{color:#fff !important;}
.mf-acc-sbtn--tp{background:#00B67A;}
.mf-acc-sbtn--ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.mf-acc-sbtn svg{width:22px;height:22px;flex-shrink:0;}

/* ==================== PAGES AUTH — LOGIN + PASSWORD RECOVERY (DA) 2026-09-06 ====================
   Sélecteurs : body.page-authentication (/login) et body.page-password (/password-recovery). */
/* ---------- /password-recovery (page-password) : carte blanche DA (inchangé) ---------- */
html.mf-da .page-password #content{
  max-width:640px !important;margin-left:auto !important;margin-right:auto !important;
  border:1px solid #e7e7e2 !important;border-radius:20px !important;
  box-shadow:0 12px 34px rgba(0,0,0,.07) !important;padding:28px 28px 34px !important;background:#fff !important;}
html.mf-da .page-password .form-control{border-radius:12px !important;border:1.5px solid #e3e3dd !important;
  background:#fff !important;padding:12px 14px !important;box-shadow:none !important;height:auto !important;}
html.mf-da .page-password .form-control:focus{border-color:#A8F000 !important;box-shadow:0 0 0 3px rgba(168,240,0,.25) !important;}
html.mf-da .page-password #send-reset-link,
html.mf-da .page-password .forgotten-password button[name="submit"]{
  background:#F2387A !important;border:none !important;color:#fff !important;font-weight:800 !important;
  text-transform:uppercase;letter-spacing:.03em;border-radius:999px !important;padding:14px 34px !important;min-width:210px;
  box-shadow:0 8px 20px rgba(242,56,122,.35) !important;transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;}
html.mf-da .page-password #send-reset-link:hover,
html.mf-da .page-password .forgotten-password button[name="submit"]:hover{
  transform:translateY(-1px);box-shadow:0 12px 26px rgba(242,56,122,.45) !important;}

/* ---------- /login (page-authentication) : CARTE STREET SOMBRE, iso preview mf-preview-login ----------
   Le .tpl enveloppe le form natif dans .mf-acc-wrap/.mf-acc-inner/.mf-acc-panel : on aplatit le layout
   thème pour laisser respirer le fond béton (base .mf-acc-wrap) puis on skin le form natif. */
html.mf-da .page-authentication #left-column,
html.mf-da .page-authentication #right-column{display:none !important;}
html.mf-da .page-authentication #wrapper > .container,
html.mf-da .page-authentication #content-wrapper,
html.mf-da .page-authentication #content-wrapper > #content,
html.mf-da .page-authentication #content{
  width:100% !important;max-width:none !important;flex:0 0 100% !important;
  margin:0 !important;padding:0 !important;background:transparent !important;
  border:none !important;box-shadow:none !important;border-radius:0 !important;float:none !important;}
html.mf-da .page-authentication .page-header,
html.mf-da .page-authentication .breadcrumb{display:none !important;}
html.mf-da .page-authentication .mf-acc-panel{max-width:520px;margin:0 auto 22px;}
html.mf-da .page-authentication .mf-acc-actions{justify-content:center;}
html.mf-da .page-authentication .mf-acc-lead__link{color:#7cbf1e !important;font-weight:700;text-decoration:none;}
html.mf-da .page-authentication .mf-acc-lead__link:hover{text-decoration:underline;}
/* form natif -> champs empilés type mf-acc-field--full */
html.mf-da .page-authentication .login-form form > div{display:block;}
html.mf-da .page-authentication .login-form .form-group,
html.mf-da .page-authentication .login-form .form-group.row{display:block !important;margin:0 0 18px !important;}
html.mf-da .page-authentication .login-form .form-control-label,
html.mf-da .page-authentication .login-form label{
  display:block !important;width:auto !important;max-width:none !important;flex:none !important;
  text-align:left !important;padding:0 0 7px !important;margin:0 !important;
  font-size:12px !important;font-weight:700 !important;letter-spacing:.03em;text-transform:uppercase;
  color:rgba(255,255,255,.55) !important;}
html.mf-da .page-authentication .login-form [class*="col-md"],
html.mf-da .page-authentication .login-form .col{
  max-width:100% !important;flex:0 0 100% !important;width:100% !important;padding:0 !important;}
html.mf-da .page-authentication .login-form .form-control{
  background:#0f140d !important;border:1px solid rgba(255,255,255,.14) !important;border-radius:10px !important;
  padding:12px 14px !important;color:#fff !important;font-size:14px !important;height:auto !important;box-shadow:none !important;}
html.mf-da .page-authentication .login-form .form-control:focus{
  border-color:#7cbf1e !important;box-shadow:none !important;outline:none !important;}
html.mf-da .page-authentication .login-form .form-control::placeholder{color:rgba(255,255,255,.35) !important;}
/* input-group password + œil sur fond sombre */
html.mf-da .page-authentication .login-form .input-group,
html.mf-da .page-authentication .login-form .input-group-append,
html.mf-da .page-authentication .login-form .input-group-btn{background:transparent !important;}
html.mf-da .page-authentication .login-form .mf-eye-btn,
html.mf-da .page-authentication .login-form [data-action="show-password"]{
  background:transparent !important;border:none !important;color:rgba(255,255,255,.6) !important;}
/* bouton principal -> mf-acc-cta pleine largeur rose */
html.mf-da .page-authentication #submit-login{
  display:inline-flex !important;align-items:center;justify-content:center;gap:8px;width:100% !important;
  background:#F2387A !important;color:#fff !important;font-family:'Arial Black',Arial,sans-serif;font-weight:900 !important;
  font-size:13px !important;text-transform:uppercase;letter-spacing:.04em;border:none !important;border-radius:40px !important;
  padding:14px 30px !important;min-width:0 !important;cursor:pointer;box-shadow:0 8px 20px rgba(242,56,122,.35) !important;
  transition:background .16s ease,transform .16s ease,color .16s ease;}
html.mf-da .page-authentication #submit-login:hover{background:#7cbf1e !important;color:#0d140b !important;transform:translateY(-2px);}
html.mf-da .page-authentication .form-footer{margin:0 !important;padding:0 !important;text-align:left !important;border:none !important;}
/* forgot -> lien gris souligné (mf-login-forgot), sous le bouton */
html.mf-da .page-authentication .forgot-password{margin:14px 0 0 !important;text-align:left !important;}
html.mf-da .page-authentication .forgot-password a{color:rgba(255,255,255,.6) !important;font-size:13px !important;font-weight:400 !important;text-decoration:underline !important;}
html.mf-da .page-authentication .forgot-password a:hover{color:#7cbf1e !important;}
/* messages d'erreur sur fond sombre */
html.mf-da .page-authentication .login-form .help-block,
html.mf-da .page-authentication .login-form li,
html.mf-da .page-authentication .login-form .alert{color:#e0567a !important;background:transparent !important;border:none !important;}
/* sécurité : hook social (Google) masqué (déjà géré par mf-da.css #fbpsc) */
html.mf-da .page-authentication #fbpsc{display:none !important;}
/* titre : "Sign" NOIR (l'em "In" reste vert) — override de la règle sous-pages #content h1{color:#fff} (2 id) */
html.mf-da body#authentication #content .mf-acc-title{color:#141a12 !important;}
html.mf-da body#authentication #content .mf-acc-title em{color:#7cbf1e !important;}
/* œil mot de passe : boîte sombre propre + on n'affiche QU'UN seul SVG à la fois (bascule) */
html.mf-da body#authentication #content .login-form .mf-eye-btn{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:48px !important;min-width:48px !important;padding:0 !important;margin-left:8px !important;
  background:#0f140d !important;border:1px solid rgba(255,255,255,.14) !important;border-radius:10px !important;
  color:rgba(255,255,255,.6) !important;box-shadow:none !important;cursor:pointer;}
html.mf-da body#authentication #content .login-form .mf-eye-btn:hover{color:#7cbf1e !important;border-color:#7cbf1e !important;}
html.mf-da body#authentication .mf-eye-btn .mf-eye{display:none !important;}
html.mf-da body#authentication .mf-eye-btn .mf-eye--off{display:block !important;}
html.mf-da body#authentication .mf-eye-btn.mf-eye-open .mf-eye--off{display:none !important;}
html.mf-da body#authentication .mf-eye-btn.mf-eye-open .mf-eye--on{display:block !important;}
html.mf-da body#password #content .send-renew-password-link{color:#fff !important;}
/* "Back to login" -> pill DA sombre centré (au lieu de la barre verte pleine largeur) */
html.mf-da .page-password .page-footer{background:transparent !important;text-align:center !important;padding:0 0 26px !important;}
html.mf-da .page-password #back-to-login{
  background:#14180f !important;color:#fff !important;border:none !important;border-radius:999px !important;
  display:inline-flex !important;align-items:center;gap:6px;width:auto !important;max-width:none !important;
  position:static !important;left:auto !important;transform:none !important;margin:18px auto 0 !important;
  padding:11px 24px !important;font-weight:700 !important;text-transform:uppercase;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(0,0,0,.18) !important;}
