/* public/assets/css */

:root{
  --earth:#c4452a;
  --earth-2:#ff3b2f;
  --gold:#ffbf00;
  --ink:#070707;
  --glass: rgba(0,0,0,.55);
}

body{ background:#0b0b0b; }

.nav-glass{
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.35));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(255,191,0,.45);
}

.btn-pill{ border-radius:999px; padding-left:16px; padding-right:16px; }

/* ===== HERO SLIDER “TERRE” ===== */
.hero-slider{
  position:relative;
  /* min-height: calc(100vh - 72px); */
  min-height: calc(100vh - 122px);
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
}

.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform: scale(1.03);
  transition: opacity 900ms ease, transform 1800ms ease;
  filter:saturate(1.05) contrast(1.05);
}
.hero-slide.is-active{
  opacity:1;
  transform: scale(1);
}

.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,191,0,.12), transparent 55%),
    radial-gradient(900px 500px at 80% 60%, rgba(196,69,42,.22), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.65));
}

/* Texture briques (terre cuite) par-dessus, très légère */
.hero-bricks{
  position:absolute; inset:0; z-index:2;
  background-image: url("../img/brick.jpg");
  background-size: 900px auto;
  opacity:.10;
  mix-blend-mode: overlay;
  filter: contrast(1.1);
}

/* petit “sheen” qui bouge */
.hero-sheen{
  position:absolute;
  inset:0;
  left:-20%;
  width:140%;
  z-index:3;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  transform: translateX(-30%) rotate(8deg);
  animation: sheen 6.5s linear infinite;
  pointer-events:none;
}

@keyframes sheen{ to { transform: translateX(30%) rotate(8deg);} }

.hero-content{
  position:relative;
  z-index:5;
  padding: 80px 0;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
  font-weight:600;
}

.text-accent{ color: var(--earth-2) !important; text-shadow: 0 10px 40px rgba(255,59,47,.18); }
.hero-lead{ max-width: 820px; margin-left:auto; margin-right:auto; opacity:.88; }

.btn-soft{
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transform: translateY(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-soft:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 65px rgba(0,0,0,.45);
}

/* ===== SECTIONS: apparition “cinéma” ===== */
.reveal{
  opacity:0;
  transform: translateY(26px);
  transition: opacity 700ms ease, transform 900ms ease;
}
.reveal.is-in{
  opacity:1;
  transform: translateY(0);
}

/* cartes terre */
.card-earth{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}



.section-soft{
  background: radial-gradient(900px 500px at 20% 0%, rgba(255,191,0,.08), transparent 60%),
              linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.00));
}

.kicker{
  letter-spacing: .22em;
  font-weight: 700;
  font-size: .75rem;
  color: var(--earth-2);
  margin-bottom: .6rem;
}

.card-lift{ transition: transform .2s ease, box-shadow .2s ease; }
.card-lift:hover{ transform: translateY(-4px); }

.icon-badge{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,191,0,.12);
  border: 1px solid rgba(255,191,0,.20);
}
.icon-badge i{ font-size:18px; color: var(--gold); }

.link-accent{
  color: var(--earth-2);
  text-decoration: none;
  font-weight: 700;
}
.link-accent:hover{ text-decoration: underline; }

.card-ember{
  background: linear-gradient(180deg, rgba(255,59,47,.16), rgba(255,255,255,.03));
  border-color: rgba(255,59,47,.18);
}

.checkline{
  display:flex; align-items:center; gap:10px;
  padding:6px 0;
  opacity:.9;
}
.checkline i{ color: var(--earth-2); }



.stat-card{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border-radius:18px;
  background: rgba(255,59,47,.18);
  border: 1px solid rgba(255,59,47,.22);
  max-width: 320px;
}
.stat-icon{
  width:46px;height:46px;border-radius:16px;
  display:grid; place-items:center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  color:#fff;
}
.stat-big{ font-size: 28px; font-weight: 900; color:#fff; line-height:1; }
.stat-sub{ opacity:.85; color:#fff; }

.lesson-card{
  position:relative;
  border-radius: 22px;
  overflow:hidden;
  min-height: 340px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}
.lesson-bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position:center;
  transform: scale(1.06);
  transition: transform 900ms ease;
  filter: contrast(1.05) saturate(1.05);
}
.lesson-card:hover .lesson-bg{ transform: scale(1.0); }

.lesson-panel{
  position:absolute;
  left: 16px; right: 16px; bottom: 16px;
  background: rgba(0,0,0,.58);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 16px;
}
.lesson-icon{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,191,0,.14);
  border: 1px solid rgba(255,191,0,.22);
  color: var(--gold);
  margin-bottom: 10px;
}

.contact-mini{
  padding:16px 18px;
  border-radius:18px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.mini-line{ display:flex; gap:10px; align-items:center; padding:5px 0; opacity:.9; }
.mini-line i{ color: var(--earth-2); width:18px; text-align:center; }

.cta-band{
  position:relative;
  background-size: cover;
  background-position:center;
  overflow:hidden;
}
.cta-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.55));
}

.stats-bar{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,59,47,.18);
  border: 1px solid rgba(255,59,47,.22);
}
.stat-item{ text-align:center; color:#fff; }
.stat-num{ font-size: 28px; font-weight: 900; line-height:1.1; }
.stat-label{ opacity:.85; font-size: .9rem; }

/* =========================
   ABOUT: IMAGE STACK PROPRE
========================= */
.img-stack{
  position:relative;
  max-width: 560px;           /* évite les monstres trop larges */
  margin-left: auto;
  margin-right: auto;
}

.img-stack img{
  display:block;
  width:100%;
}

/* image principale: un ratio stable (moins de vide) */
.img-stack > img{
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* float: mieux placé, moins bas, moins de “vide” */
.img-stack .img-float{
  position:absolute;
  width: 54%;
  left: -10%;
  bottom: -26px;
  border-radius: 18px;
  border: 8px solid rgba(0,0,0,.55);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

/* sur mobile: pas de float */
@media (max-width: 992px){
  .img-stack{ max-width: 100%; }
  .img-stack .img-float{
    position:static;
    width:100%;
    margin-top:14px;
    left:auto; bottom:auto;
    border:none;
  }
}



/* =========================
   LISIBILITÉ GÉNÉRALE
========================= */
body{
  color: rgba(255,255,255,.92);
  background: #0b0b0b;
}

.opacity-75{ opacity: .90 !important; } /* oui, on “triche” volontairement */
.hero-lead{ opacity: .95; text-shadow: 0 10px 40px rgba(0,0,0,.55); }

h1,h2,h3,h4,h5{ text-shadow: 0 10px 40px rgba(0,0,0,.55); }

/* HERO: overlay un peu moins “boueux”, plus ciné */
.hero-overlay{
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,191,0,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 60%, rgba(196,69,42,.26), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.72));
}

/* Cartes: plus de “verre”, moins d’ombre noire */
.card-earth{
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}
.card-earth .link-accent{ text-shadow:none; }

/* Leçons: panneau trop sombre = texte mort */
.lesson-panel{
  background: rgba(0,0,0,.46);
  border: 1px solid rgba(255,255,255,.14);
}
.lesson-panel p{ opacity: .92 !important; }

/* Contact mini: même combat */
.contact-mini{
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.10);
}


/* =========================
   FOOTER: JAMAIS FIXE ICI
========================= */
footer, .site-footer{
  position: static !important;
}

/*
html, body{
  height: auto !important;
  overflow-y: auto !important;
}
*/


.earth-divider{
  height: 34px;
  background:
    radial-gradient(18px 18px at 10% 50%, rgba(255,191,0,.25), transparent 60%),
    linear-gradient(to right, rgba(196,69,42,.0), rgba(196,69,42,.25), rgba(196,69,42,.0));
  opacity:.9;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}


.brand-logo{
  height: 50px;
  width: auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.45));
}
@media (max-width: 992px){
  .brand-logo{ height: 34px; }
}

/*
html, body{
  width: 100%;
  overflow-x: hidden;
  height: auto;
}
*/

body{
  overflow-y: auto;
}

/* IMPORTANT: si un wrapper existe (ex: .page, .app, main) */
main, .page, .app{
  height: auto !important;
  overflow: visible !important;
}


/* :root{ --navH: 72px; } /* fallback */ */
:root{ --navH: 122px; } /* fallback */

.hero-slider{
  min-height: calc(100svh - var(--navH)); /* svh = stable viewport */
}


/* Lisibilité globale */
.hero-content *{
  text-shadow: 0 12px 45px rgba(0,0,0,.70);
}

.card-earth{
  background: rgba(255,255,255,.075);          /* + clair */
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.card-earth p{ color: rgba(255,255,255,.88); } /* pas gris mort */

.lesson-panel{
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  border: 1px solid rgba(255,255,255,.16);
}

.lesson-panel p{ color: rgba(255,255,255,.90); }


.stats-bar{
  padding: 22px;
  gap: 16px;
}

.stat-gauge{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 160px;
}

.gauge{
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.35));
}

.gauge-track{
  fill: none;
  stroke: rgba(255,255,255,.14);
  stroke-width: 10;
}

.gauge-bar{
  fill: none;
  stroke: rgba(255,191,0,.95); /* or */
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 289;       /* 2πr ~ 2*3.14*46 = 289 */
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 1400ms ease;
}

.stat-center{
  position: absolute;
  text-align: center;
  width: 100%;
  padding-top: 6px;
}

.stat-center .stat-num{
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.stat-center .stat-label{
  margin-top: 6px;
  opacity: .88;
  font-size: .92rem;
}


/* Anti scroll fantôme (horizontal + barres internes) */
html, body{
  max-width: 100%;
  overflow-x: clip; /* mieux que hidden (évite scrollbars fantômes) */
}

/* sécurité: tout média ne doit jamais déborder */
img, svg, video, canvas{
  max-width: 100%;
}

/* Corrige le float d'image (évite dépassement à gauche) */
.img-stack{ overflow: visible; }
.img-stack .img-float{
  left: 0;                 /* au lieu de -10% */
  transform: translateX(-12%);
}


.stat-gauge{ --ring: rgba(255,191,0,.95); }
.stat-gauge .gauge-bar{ stroke: var(--ring); }

.stat-gauge.stat-gold{  --ring: rgba(255,191,0,.95); }
.stat-gauge.stat-red{   --ring: rgba(255,59,47,.95); }
.stat-gauge.stat-earth{ --ring: rgba(196,69,42,.95); }
.stat-gauge.stat-white{ --ring: rgba(255,255,255,.85); }


.plan-card{
  position:relative;
  overflow:hidden;
}

.plan-card::before{
  content:"";
  position:absolute; left:0; top:0; right:0; height:3px;
  background: linear-gradient(to right, rgba(255,191,0,.9), rgba(255,59,47,.7), rgba(196,69,42,.7));
  opacity:.9;
}

.plan-card h5{ color: rgba(255,191,0,.92); } /* Starter/Pro/Elite */


.site-footer{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(255,191,0,.10), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.72));
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer a{ color: rgba(255,255,255,.78); text-decoration:none; }
.site-footer a:hover{ color: rgba(255,191,0,.92); }

.site-footer .footer-title{
  color:#fff;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.site-footer .newsletter input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff;
}
.site-footer .newsletter input::placeholder{ color: rgba(255,255,255,.55); }







/* =========================
   MAIN: BACKGROUND BRIQUES (header exclu)
========================= */
/*
.site-main{
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding-bottom: 30px;
}

///* couche briques /
.site-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background-image: url("../img/brick.jpg"); 
  background-repeat: repeat;
  background-size: 820px auto;
  background-position: 0 0;

  opacity: .16;
  filter: contrast(1.12) saturate(1.18) brightness(.82);

  animation: bricksDrift 22s linear infinite;
}

/// couche cinéma
.site-main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(255,191,0,.08), transparent 55%),
    radial-gradient(1000px 650px at 80% 30%, rgba(196,69,42,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.92));
}

/// remet le contenu AU-DESSUS 
.site-main > *{
  position: relative;
  z-index: 2;
}

@keyframes bricksDrift{
  0%   { background-position: 0 0; }
  50%  { background-position: 220px 120px; }
  100% { background-position: 0 0; }
}
*/


/* =========================
   MAIN: BACKGROUND BRIQUES (header exclu)
========================= */


/* animation: respiration de la lumière */
@keyframes warmthPulse{
  0%,100% { filter: saturate(1) brightness(1); }
  50%     { filter: saturate(1.08) brightness(1.06); }
}

/*
background-image: url("../img/brick.jpg");
background-size: 820px auto; 
opacity: .18;               
filter: contrast(1.12) saturate(1.18) brightness(.82);
*/

/* ===== MAIN comme le HERO (même rendu) ===== */
.site-main{
  position:relative;
  isolation:isolate;
  overflow:hidden; /* important */
}

/* couches derrière le contenu */
.site-main .main-overlay,
.site-main .main-bricks,
.site-main .main-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* overlay cinéma (copie du hero-overlay) */
.site-main .main-overlay{
  z-index:0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,191,0,.14), transparent 55%),
    radial-gradient(900px 500px at 80% 60%, rgba(196,69,42,.26), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.72));
}

/* briques (copie du hero-bricks) */
.site-main .main-bricks{
  z-index:1;
  background-image: url("../img/brick.jpg");
  background-size: 900px auto;
  opacity:.10;
  mix-blend-mode: overlay;
  filter: contrast(1.1);
}

/* sheen (copie du hero-sheen) */
.site-main .main-sheen{
  z-index:2;
  left:-20%;
  width:140%;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(255,255,255,.07) 50%,
    transparent 65%
  );
  transform: translateX(-30%) rotate(8deg);
  animation: sheen 6.5s linear infinite;
}

/* contenu au-dessus */
.site-main > section,
.site-main > .container,
.site-main > .section-soft,
.site-main > .cta-band{
  position:relative;
  z-index:5;
}



.earth-divider{
  height: 24px;
  background:
    radial-gradient(18px 18px at 10% 50%, rgba(255,191,0,.22), transparent 60%),
    linear-gradient(to right, rgba(196,69,42,.0), rgba(196,69,42,.22), rgba(196,69,42,.0));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  opacity:.9;
}

/* un peu plus “présent” sous le hero */
.earth-divider--hero{
  height: 30px;
  background:
    radial-gradient(22px 22px at 12% 55%, rgba(255,191,0,.26), transparent 62%),
    radial-gradient(22px 22px at 88% 45%, rgba(255,59,47,.18), transparent 62%),
    linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,.10), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}


/* ===== séparateur doux entre sections ===== */
.site-main > section{
  position: relative;
}

/* un petit halo + ligne fine entre sections */
.site-main > section:not(:first-of-type)::before{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(to right,
    rgba(0,0,0,0),
    rgba(255,255,255,.10),
    rgba(255,191,0,.10),
    rgba(255,59,47,.08),
    rgba(0,0,0,0)
  );
  opacity: .9;
}

.site-main > section:not(:first-of-type)::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 36px;
  background: radial-gradient(closest-side at 50% 50%, rgba(255,191,0,.08), transparent 70%);
  pointer-events:none;
}


/* ===== cadre doux optionnel ===== */
.section-frame{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 26px;
  box-shadow: 0 20px 80px rgba(0,0,0,.25);
}

/* garde le padding Bootstrap mais ajoute du “souffle” */
.section-frame.container{
  padding-left: 24px;
  padding-right: 24px;
}
@media (max-width: 576px){
  .section-frame.container{
    padding-left: 16px;
    padding-right: 16px;
  }
}



/* =========================
   FOOTER (comme la capture)
========================= */
.site-footer{
  position: relative;
  background:
    radial-gradient(1100px 520px at 15% 0%, rgba(255,191,0,.10), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.70));
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-logo{
  height: 56px;
  width: auto;
  filter: drop-shadow(0 14px 35px rgba(0,0,0,.55));
}

.footer-brand-name{
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  font-size: 1.6rem;
}

.footer-desc{
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}

.footer-title{
  color:#fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .95rem;
}

.footer-line{
  height: 2px;
  width: 72px;
  background: var(--earth-2);
  margin-top: 10px;
  opacity: .9;
}

.footer-links,
.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li{
  margin: 10px 0;
}

.footer-links a,
.footer-contact a{
  color: rgba(255,255,255,.70);
  text-decoration: none;
}

.footer-links a:hover,
.footer-contact a:hover{
  color: rgba(255,191,0,.92);
}

.footer-contact li{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: rgba(255,255,255,.72);
}
.footer-contact i{
  color: var(--earth-2);
  width: 18px;
  text-align: center;
}

.footer-newsletter .form-control{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  padding: 12px 14px;
}
.footer-newsletter .form-control::placeholder{
  color: rgba(255,255,255,.55);
}
.footer-newsletter .btn{
  padding-left: 18px;
  padding-right: 18px;
  letter-spacing: .06em;
}

.footer-mini{
  color: rgba(255,255,255,.55);
  max-width: 320px;
}

.footer-social{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-social .soc{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,59,47,.90);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  transition: transform .15s ease, filter .15s ease;
}
.footer-social .soc:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
}
.footer-bottom-left,
.footer-bottom-right{
  color: rgba(255,255,255,.55);
  font-size: .92rem;
}


/* intl-tel-input: toujours full width */
.iti { width: 100%; }
.iti input { width: 100%; }

/* rendu dark dans modal */
.modal .iti__country-list{
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
}
.modal .iti__country-name,
.modal .iti__dial-code{
  color: rgba(255,255,255,.9);
}
.modal .iti__divider{
  border-color: rgba(255,255,255,.10);
}


/* accordion arrondi propre */
.accordion-item { border-radius: 5px; overflow: hidden; }
.accordion-button { border-radius: inherit; }
.accordion-button:not(.collapsed) { box-shadow: none; }


























/* =========================
   THEME SYSTEM (dark / light)
========================= */
/* Light theme (Studio Blanc) */
:root[data-theme="light"]{
  /* fond clair mais vivant */
  --bg: radial-gradient(1200px 700px at 15% 0%, rgba(255,191,0,.14), transparent 55%),
        radial-gradient(900px 600px at 85% 20%, rgba(196,69,42,.10), transparent 60%),
        linear-gradient(to bottom, #fbfbfd, #f4f6fb);

  --text: rgba(10,10,10,.92);
  --muted: rgba(10,10,10,.62);

  /* surfaces */
  --surface: rgba(255,255,255,.92);
  --surface2: rgba(255,255,255,.78);

  --glass: rgba(255,255,255,.74);
  --glass-2: rgba(255,255,255,.55);

  --border: rgba(10,10,10,.10);

  /* overlays: plus “vignette claire” que “voile” */
  --overlayA: rgba(255,191,0,.14);
  --overlayB: rgba(196,69,42,.10);
  --overlayC1: rgba(255,255,255,.30);
  --overlayC2: rgba(255,255,255,.62);

  /* briques: très faible + mode multiply (effet papier/terre) */
  --brickOpacity: .06;

  /* cards/panels */
  --cardBg: rgba(255,255,255,.92);
  --cardBorder: rgba(10,10,10,.10);

  --panelBg1: rgba(255,255,255,.82);
  --panelBg2: rgba(255,255,255,.92);

  --shadow: 0 18px 55px rgba(10,10,10,.10);
}

/* Body */
:root[data-theme="light"] body{
  background: var(--bg);
  color: var(--text);
}

/* NAV ok chez toi, on garde juste une ombre soft */
:root[data-theme="light"] .nav-glass{
  box-shadow: 0 10px 35px rgba(10,10,10,.08);
}

/* HERO: pas de voile “gris” global */
:root[data-theme="light"] .hero-overlay{
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,191,0,.14), transparent 58%),
    radial-gradient(900px 520px at 80% 55%, rgba(196,69,42,.10), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,.55));
}


:root[data-theme="light"] .hero-box{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(10,10,10,.10);
  box-shadow: 0 18px 60px rgba(10,10,10,.12);
}


/* HERO: lisibilité sans “opacity”, via un socle derrière le texte */
:root[data-theme="light"] .hero-content{
  padding: 90px 0;
}

/*
:root[data-theme="light"] .hero-content::before{
  content:"";
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: 52%;
  width: min(980px, 92vw);
  height: 310px;
  border-radius: 28px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 80px rgba(10,10,10,.14);
  z-index:-1;
}
*/

/* Briques en light: MULTIPLY + faible */
:root[data-theme="light"] .hero-bricks,
:root[data-theme="light"] .site-main .main-bricks{
  opacity: var(--brickOpacity);
  mix-blend-mode: multiply;
  filter: contrast(1.05) saturate(1.05) brightness(1.15);
}

/* MAIN overlay: clair, pas noir */
:root[data-theme="light"] .site-main .main-overlay{
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(255,191,0,.12), transparent 58%),
    radial-gradient(1000px 650px at 85% 25%, rgba(196,69,42,.08), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.72), rgba(245,246,250,.92));
}

/* Sheen: on le garde mais discret (sinon ça fait “film plastique”) */
:root[data-theme="light"] .site-main .main-sheen{
  opacity: .25;
  filter: blur(0.2px);
}

/* Cartes: vraies surfaces blanches */
:root[data-theme="light"] .card-earth,
:root[data-theme="light"] .section-frame{
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  box-shadow: var(--shadow);
}

/* Lesson panels sur images: blanc glass, texte foncé */
:root[data-theme="light"] .lesson-panel{
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(10,10,10,.10);
  backdrop-filter: blur(12px);
}
:root[data-theme="light"] .lesson-panel,
:root[data-theme="light"] .lesson-panel *{
  color: rgba(10,10,10,.88) !important;
  text-shadow: none !important;
}

/* Titres: stop aux grosses ombres en light */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5{
  text-shadow: none !important;
}

/* Sections “gris” actuelles: on les rend claires */
:root[data-theme="light"] .section-soft{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(255,191,0,.10), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.65), rgba(255,255,255,.92));
}

/* Stats bar: fini le gros rectangle sombre */
:root[data-theme="light"] .stats-bar{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(10,10,10,.10);
  box-shadow: 0 18px 60px rgba(10,10,10,.10);
}
:root[data-theme="light"] .stat-item{ color: rgba(10,10,10,.88); }
:root[data-theme="light"] .gauge-track{ stroke: rgba(10,10,10,.10); }

/* Footer en light: clair, mais séparé visuellement */
:root[data-theme="light"] .site-footer{
  background:
    radial-gradient(1100px 520px at 15% 0%, rgba(255,191,0,.08), transparent 60%),
    linear-gradient(to top, rgba(255,255,255,.95), rgba(245,246,250,.98));
}
:root[data-theme="light"] .site-footer a,
:root[data-theme="light"] .footer-desc,
:root[data-theme="light"] .footer-mini,
:root[data-theme="light"] .footer-bottom-left,
:root[data-theme="light"] .footer-bottom-right{
  color: rgba(10,10,10,.62);
}


/* =========================
   LIGHT: pas de briques du tout
   (dark inchangé)
========================= */
:root[data-theme="light"] .hero-bricks,
:root[data-theme="light"] .site-main .main-bricks{
  background-image: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* optionnel: un fond plus "clean" en light */
:root[data-theme="light"] .site-main .main-overlay{
  background:
    radial-gradient(1200px 600px at 20% 15%, rgba(255,191,0,.16), transparent 58%),
    radial-gradient(900px 500px at 85% 55%, rgba(196,69,42,.10), transparent 62%),
    linear-gradient(to bottom, rgba(255,255,255,.92), rgba(245,246,250,.98));
}


/* boîte du hero (stable en dark et light) */
/*
.hero-content{
  padding: 50px 0;          
  display: grid;
  place-items: center;
}
*/

.hero-content{
  position: relative;
  z-index: 5;

  /* IMPORTANT: centre vraiment au milieu du hero */
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;

  /* enlève l’effet “box qui tombe en bas” */
  padding: 0;
}




.hero-box{
  width: min(990px, 92vw);
  margin: 0 auto;            /* pas de margin qui décale */
  text-align: center;

  border-radius: 26px;
  padding: 28px 24px;

  background: rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}


/* en light: box blanche propre */
:root[data-theme="light"] .hero-box{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(10,10,10,.10);
  box-shadow: 0 18px 60px rgba(10,10,10,.12);
}

/* mobile: un peu plus serré */
@media (max-width: 576px){
  .hero-box{ padding: 20px 16px; border-radius: 22px; }
}



.footer-bottom-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* gauche | centre | droite */
  align-items: center;
  gap: .75rem;
}

.footer-bottom-left{
  justify-self: start;   /* reste à gauche */
}

.footer-bottom-right{
  justify-self: end;     /* reste à droite */
}

.footer-admin-link{
  justify-self: center;  /* reste au centre */
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;
  opacity: .35;          /* discret */
  color: inherit;
  transition: opacity .15s ease, text-decoration-color .15s ease;
}

.footer-admin-link:hover,
.footer-admin-link:focus{
  opacity: .85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: on empile proprement */
@media (max-width: 576px){
  .footer-bottom-row{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-bottom-left,
  .footer-bottom-right{
    justify-self: center;
  }
}











/* =========================================================
   LIGHT THEME: contours + typos + cadres (ONLY LIGHT)
========================================================= */
:root[data-theme="light"]{
  /* contours & ombres plus “design system” */
  --line: rgba(10,10,10,.10);
  --line2: rgba(10,10,10,.14);
  --softShadow: 0 16px 45px rgba(10,10,10,.10);
  --softShadow2: 0 22px 70px rgba(10,10,10,.12);

  /* couleurs de texte plus propres */
  --text: rgba(10,10,10,.92);
  --muted: rgba(10,10,10,.64);

  /* accents */
  --accent: var(--earth-2);
  --accent2: var(--gold);
}

/* Typo générale en light (sans casser Bootstrap) */
:root[data-theme="light"] body{
  color: var(--text);
}
:root[data-theme="light"] p,
:root[data-theme="light"] .opacity-75{
  color: var(--muted) !important;
  opacity: 1 !important;
}
:root[data-theme="light"] .kicker{
  color: var(--accent) !important;
  font-weight: 800;
}

/* HERO: badge + textes plus nets */
:root[data-theme="light"] .hero-badge{
  background: rgba(10,10,10,.06);
  border: 1px solid var(--line);
  color: rgba(10,10,10,.78);
  box-shadow: var(--softShadow);
}
:root[data-theme="light"] .hero-lead{
  color: rgba(10,10,10,.72) !important;
  text-shadow: none !important;
}

/* ====== CADRES / CONTOURS des sections ====== */

/* le “cadre” principal (tes .section-frame) */
:root[data-theme="light"] .section-frame{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: var(--softShadow2) !important;
  border-radius: 26px;
}

/* les cartes (3 cards / plans / blog etc.) */
:root[data-theme="light"] .card-earth{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: var(--softShadow) !important;
}
:root[data-theme="light"] .card-earth h5,
:root[data-theme="light"] .card-earth .fw-bold{
  color: rgba(10,10,10,.92) !important;
  text-shadow: none !important;
}

/* icônes en badge: plus “premium” en light */
:root[data-theme="light"] .icon-badge{
  background: rgba(255,191,0,.16) !important;
  border: 1px solid rgba(255,191,0,.35) !important;
  box-shadow: 0 10px 30px rgba(10,10,10,.08);
}
:root[data-theme="light"] .icon-badge i{
  color: rgba(196,69,42,.95) !important; /* terre */
}

/* liens accent */
:root[data-theme="light"] .link-accent{
  color: rgba(196,69,42,.98) !important;
}
:root[data-theme="light"] .link-accent:hover{
  color: rgba(255,59,47,.98) !important;
}

/* bloc “section-soft” (à propos, études etc.) */
:root[data-theme="light"] .section-soft{
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(255,191,0,.12), transparent 65%),
    radial-gradient(900px 520px at 90% 25%, rgba(196,69,42,.08), transparent 68%),
    linear-gradient(to bottom, rgba(255,255,255,.72), rgba(255,255,255,.92)) !important;
  border-top: 1px solid rgba(10,10,10,.06);
  border-bottom: 1px solid rgba(10,10,10,.06);
}

/* checklist lines: texte noir + icône rouge */
:root[data-theme="light"] .checkline{
  opacity: 1 !important;
  color: rgba(10,10,10,.82);
}
:root[data-theme="light"] .checkline i{
  color: rgba(255,59,47,.95) !important;
}

/* stat card “+350” dans À propos */
:root[data-theme="light"] .stat-card{
  background: rgba(255,59,47,.10) !important;
  border: 1px solid rgba(255,59,47,.22) !important;
  box-shadow: var(--softShadow) !important;
}
:root[data-theme="light"] .stat-card *{
  color: rgba(10,10,10,.88) !important;
}
:root[data-theme="light"] .stat-icon{
  background: rgba(255,255,255,.75) !important;
  border: 1px solid var(--line) !important;
  color: rgba(10,10,10,.88) !important;
}

/* lesson cards: bordure plus nette */
:root[data-theme="light"] .lesson-card{
  border: 1px solid var(--line2) !important;
  box-shadow: var(--softShadow2) !important;
}

/* stats bar (les cercles) */
:root[data-theme="light"] .stats-bar{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--line2) !important;
  box-shadow: var(--softShadow2) !important;
}
:root[data-theme="light"] .stat-item{
  color: rgba(10,10,10,.90) !important;
}
:root[data-theme="light"] .gauge-track{
  stroke: rgba(10,10,10,.12) !important;
}

/* CTA band overlay (garder lisible en light si jamais) */
:root[data-theme="light"] .cta-overlay{
  background: linear-gradient(to right, rgba(255,255,255,.78), rgba(255,255,255,.35)) !important;
}

/* Footer en light: titres + bordures */
:root[data-theme="light"] .site-footer{
  border-top: 1px solid rgba(10,10,10,.10) !important;
}
:root[data-theme="light"] .footer-title{
  color: rgba(10,10,10,.90) !important;
}
:root[data-theme="light"] .footer-line{
  background: rgba(196,69,42,.95) !important;
}
:root[data-theme="light"] .footer-bottom{
  background: rgba(10,10,10,.04) !important;
  border-top: 1px solid rgba(10,10,10,.10) !important;
}

/* Earth divider: plus fin et clair en light */
:root[data-theme="light"] .earth-divider,
:root[data-theme="light"] .earth-divider--hero{
  border-top: 1px solid rgba(10,10,10,.08) !important;
  border-bottom: 1px solid rgba(10,10,10,.08) !important;
  opacity: .8;
}











/* =========================================================
   LIGHT ONLY: 3 ZONES = SOLID (NO OPACITY / NO BG GAMES)
   Zones visées: hero box, stats bar (les cercles), gros panels/frames
========================================================= */
:root[data-theme="light"]{
  --solid: #ffffff;                 /* vrai blanc */
  --solid2:#fbfcff;                 /* blanc très léger */
  --line:  rgba(10,10,10,.12);
  --line2: rgba(10,10,10,.18);
  --shadowSoft: 0 18px 55px rgba(10,10,10,.10);
  --shadowSoft2: 0 26px 80px rgba(10,10,10,.12);
}

/* 1) HERO BOX (capture “CENTRE INTERNATIONAL…”) */
:root[data-theme="light"] .hero-box{
  background: var(--solid) !important;   /* pas rgba */
  border: 1px solid var(--line2) !important;
  box-shadow: var(--shadowSoft2) !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .hero-box *{
  text-shadow: none !important;
}

/* 2) STATS BAR (capture des 4 cercles) */
:root[data-theme="light"] .stats-bar{
  background: var(--solid) !important;   /* pas rgba / pas gradient */
  border: 1px solid var(--line2) !important;
  box-shadow: var(--shadowSoft2) !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .stat-item,
:root[data-theme="light"] .stat-item *{
  color: rgba(10,10,10,.90) !important;
  text-shadow: none !important;
}

/* 3) GROS CADRES / PANELS (tes grands rectangles blancs des sections) */
:root[data-theme="light"] .section-frame,
:root[data-theme="light"] .card-earth,
:root[data-theme="light"] .contact-mini{
  background: var(--solid) !important;   /* solide */
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadowSoft) !important;
  backdrop-filter: none !important;
}

/* Bonus: si tu as des overlays sur ces zones, on les neutralise en light */
:root[data-theme="light"] .cta-overlay,
:root[data-theme="light"] .hero-overlay{
  background: none !important;           /* plus de voile */
}



/* ==========================================
   PATCH LIGHT: hero box + newsletter + cadres
   (à coller en toute fin)
========================================== */

/* Variables un peu plus “marquées” */
:root[data-theme="light"]{
  --lineStrong: rgba(10,10,10,.22);
  --lineMid:    rgba(10,10,10,.16);
  --shadowPop:  0 24px 85px rgba(10,10,10,.14);
}

/* 1) HERO BOX (capture 1): léger sombre + très légère transparence */
:root[data-theme="light"] .hero-box{
  background: rgba(245,246,250,.92) !important;   /* un poil plus sombre que blanc pur */
  border: 1px solid var(--lineStrong) !important;
  box-shadow: var(--shadowPop) !important;
  backdrop-filter: blur(8px) !important;          /* ok car léger */
}

/* (optionnel) un micro dégradé interne “studio” */
:root[data-theme="light"] .hero-box{
  background:
    linear-gradient(to bottom, rgba(255,255,255,.78), rgba(240,242,248,.92)) !important;
}

/* 2) FOOTER: input newsletter + textes trop blancs */
:root[data-theme="light"] .site-footer{
  border-top: 1px solid var(--lineStrong) !important;
}

/* input bien visible */
:root[data-theme="light"] .footer-newsletter .form-control{
  background: rgba(255,255,255,.95) !important;
  border: 1px solid var(--lineStrong) !important;
  color: rgba(10,10,10,.86) !important;
  box-shadow: 0 10px 30px rgba(10,10,10,.08);
}
:root[data-theme="light"] .footer-newsletter .form-control::placeholder{
  color: rgba(10,10,10,.52) !important;
}

/* titres + liens plus lisibles en light */
:root[data-theme="light"] .footer-title{
  color: rgba(10,10,10,.92) !important;
}
:root[data-theme="light"] .site-footer a,
:root[data-theme="light"] .footer-desc,
:root[data-theme="light"] .footer-mini{
  color: rgba(10,10,10,.70) !important;
}
:root[data-theme="light"] .site-footer a:hover{
  color: rgba(196,69,42,.95) !important;
}

/* 3) BORDURES DES SECTIONS: un peu plus foncées / remarquables */
:root[data-theme="light"] .section-frame,
:root[data-theme="light"] .card-earth,
:root[data-theme="light"] .stats-bar,
:root[data-theme="light"] .contact-mini{
  border: 1px solid var(--lineStrong) !important;
  box-shadow: 0 18px 60px rgba(10,10,10,.12) !important;
}

/* si tu utilises les séparateurs automatiques entre sections */
:root[data-theme="light"] .site-main > section:not(:first-of-type)::before{
  background: linear-gradient(to right,
    rgba(0,0,0,0),
    rgba(10,10,10,.18),
    rgba(196,69,42,.12),
    rgba(0,0,0,0)
  ) !important;
  opacity: 1 !important;
}



/* ==========================================
   DARK ONLY: lisibilité textes dans .plan-card
   (ne touche PAS le theme light)
========================================== */

/* cible le dark = tout sauf light */
:root:not([data-theme="light"]) .plan-card{
  /* un voile interne pour calmer le fond et aider le texte */
  position: relative;
}
:root:not([data-theme="light"]) .plan-card::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.82));
  z-index:0;
}
:root:not([data-theme="light"]) .plan-card > *{
  position: relative;
  z-index: 1; /* au-dessus du voile */
}

/* Titre + sous-texte */
:root:not([data-theme="light"]) .plan-card h4,
:root:not([data-theme="light"]) .plan-card h5{
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 10px 35px rgba(0,0,0,.55);
}
:root:not([data-theme="light"]) .plan-card p,
:root:not([data-theme="light"]) .plan-card .small,
:root:not([data-theme="light"]) .plan-card small{
  color: rgba(255,255,255,.78) !important;
}

/* Listes / features (là où ça “disparaît”) */
:root:not([data-theme="light"]) .plan-card li,
:root:not([data-theme="light"]) .plan-card .checkline{
  color: rgba(255,255,255,.84) !important;
  opacity: 1 !important; /* stop le fade */
}

/* Si tu as des "muted" Bootstrap dans ces cards */
:root:not([data-theme="light"]) .plan-card .text-muted,
:root:not([data-theme="light"]) .plan-card .opacity-75{
  color: rgba(255,255,255,.72) !important;
  opacity: 1 !important;
}

/* Bonus: icônes check plus visibles (si FontAwesome) */
:root:not([data-theme="light"]) .plan-card .fa-check,
:root:not([data-theme="light"]) .plan-card .fa-circle-check,
:root:not([data-theme="light"]) .plan-card .checkline i{
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55));
}








/* ===== Membres > Formations : accordion dark + radius 5 ===== */
.accordion-item{
  border-radius: 5px !important;
  overflow: hidden;
}

.accordion-button{
  background: rgba(0,0,0,.35) !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* état ouvert */
.accordion-button:not(.collapsed){
  background: rgba(0,0,0,.45) !important;
  color: #fff !important;
}

/* chevron visible sur fond sombre */
.accordion-button::after{
  filter: invert(1) opacity(.9);
}

/* body */
.accordion-body{
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.88);
}

/* petites lignes modules */
.form-check{
  margin-bottom: 0;
}



/* util manquant (tu l'utilises déjà dans le HTML) */
.place-content-center{ display:grid; place-items:center; }

/* ====== Accordion header: titre + badges à gauche, chevron seul à droite ====== */

/* laisse la place au chevron Bootstrap */
.accordion-button{
  padding-right: 3.25rem !important;
}

/* chevron toujours tout à droite */
.accordion-button::after{
  margin-left: auto !important;
}

/* layout interne */
.acc-head{
  display:flex;
  align-items:center;
  gap: .55rem;
  min-width: 0; /* important pour text-truncate */
  flex-wrap: wrap;
}

.acc-title{
  font-weight: 800;
  min-width: 0;
}

.acc-meta{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  flex-wrap: wrap;
}

.acc-count{
  font-weight: 800;
  opacity: .95;
}

/* badge un peu plus “inline” */
.acc-meta .badge{
  transform: translateY(-1px);
}



/* ==========================================
   PATCH MEMBRE: avatar + bloc identité (sidebar)
========================================== */

/* Cas 1: si ton conteneur identité est un flex (souvent .card / .card-body) */
.member-card .card-body,
.member-profile,
.member-sidebar .member-profile,
.member-sidebar .profile-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Avatar rond (zone encerclée à gauche) */
.member-card .avatar,
.member-card .profile-avatar,
.member-sidebar .avatar,
.member-sidebar .profile-avatar,
.member-profile .avatar,
.member-profile .profile-avatar{
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  flex: 0 0 46px !important;
  display: grid !important;
  place-items: center !important;

  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* Icône dans l’avatar */
.member-card .avatar i,
.member-card .profile-avatar i,
.member-sidebar .avatar i,
.member-sidebar .profile-avatar i{
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: .95;
}

/* Texte identité: évite le “débordement” + email discret */
.member-card .profile-text,
.member-sidebar .profile-text{
  min-width: 0;
}
.member-card .profile-text .name,
.member-sidebar .profile-text .name{
  font-weight: 800;
  line-height: 1.15;
}
.member-card .profile-text .email,
.member-sidebar .profile-text .email{
  font-size: .86rem;
  opacity: .75;
}



/* ==========================================
   PATCH MEMBRE: bandeau "Comment ça marche"
========================================== */

/* Le bandeau (zone encerclée à droite) doit être un flex centré */
.howto-banner,
.member-howto,
.alert-howto{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Icône carré arrondi du bandeau */
.howto-banner .icon-badge,
.member-howto .icon-badge,
.alert-howto .icon-badge{
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  flex: 0 0 42px !important;

  display: grid !important;
  place-items: center !important;

  background: rgba(255,191,0,.14) !important;
  border: 1px solid rgba(255,191,0,.26) !important;
}

/* Si l'icône est un <i> */
.howto-banner .icon-badge i,
.member-howto .icon-badge i,
.alert-howto .icon-badge i{
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--gold) !important;
}