@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#090c12;
  --bg-2:#0f141c;
  --bg-3:#161d27;
  --steel:#232c38;
  --steel-2:#2d3744;
  --steel-3:#445161;

  --panel:rgba(16,20,27,.76);
  --panel-2:rgba(9,12,17,.92);

  --text:#f3f1ec;
  --muted:#d1cbc3;

  --title:#d8dde6;
  --title-soft:#c9d0db;

  --gold:#d7b27e;
  --gold-soft:#ba8c58;

  --fire:#ff5a32;
  --fire-2:#ff7a49;
  --fire-3:#ca2b1f;

  --line-soft:rgba(255,255,255,.08);
  --line-metal:rgba(180,196,214,.12);
  --shadow:0 18px 38px rgba(0,0,0,.28);

  --radius:24px;
  --max:1180px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text);
  line-height:1.72;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -2%, rgba(255,98,48,.11), transparent 18%),
    radial-gradient(circle at 18% 18%, rgba(255,94,40,.045), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(255,94,40,.045), transparent 22%),
    linear-gradient(180deg, #232d3b 0%, #1a222d 12%, #141b24 26%, #10161e 46%, #0d1218 68%, #090c12 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.55;
  background:
    linear-gradient(rgba(255,255,255,.013), rgba(255,255,255,0)),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 76px,
      rgba(255,255,255,.005) 77px,
      transparent 78px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 76px,
      rgba(255,255,255,.003) 77px,
      transparent 78px
    );
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,118,58,.045), transparent 16%),
    radial-gradient(circle at 24% 54%, rgba(255,94,40,.03), transparent 18%),
    radial-gradient(circle at 76% 46%, rgba(255,94,40,.03), transparent 18%);
}

header,
.hero,
section,
footer{
  position:relative;
  z-index:1;
}

h1,h2,h3{ margin:0; }
h1,h2{ font-family:'Cinzel',serif; }

a{
  color:inherit;
  text-decoration:none;
}

.hero,
header{
  text-align:center;
  padding:72px 20px 78px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,108,52,.16), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.015) 0%, rgba(0,0,0,.02) 100%);
}

.hero::before,
header::before{
  content:"";
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:210px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(220,226,236,.3), var(--fire-2), rgba(220,226,236,.3), transparent);
  box-shadow:0 0 18px rgba(255,120,58,.2);
}

.hero-content{
  max-width:960px;
  margin:0 auto;
}

.hero-logo-wrap{
  display:flex;
  justify-content:center;
  margin:0 0 18px;
}

.hero-logo{
  width:96px;
  height:96px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,118,58,.12), transparent 42%),
    linear-gradient(180deg, #394656 0%, #1b2430 52%, #0d1218 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 26px rgba(0,0,0,.22),
    0 0 18px rgba(255,108,52,.1);
  position:relative;
}

.hero-logo::before{
  content:"LOGO";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e6d5c3;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:.12em;
}

.eyebrow{
  margin:0 0 14px;
  text-transform:uppercase;
  letter-spacing:4px;
  font-size:.82rem;
  font-weight:700;
  color:var(--gold-soft);
}

.hero h1,
header h1{
  font-size:clamp(2.7rem, 7vw, 5rem);
  line-height:1.05;
  color:#fff8f1;
  margin-bottom:14px;
  text-shadow:
    0 2px 0 rgba(0,0,0,.14),
    0 10px 24px rgba(0,0,0,.1);
}

.hero-subtitle{
  margin:0 0 10px;
  font-size:1.08rem;
  font-weight:700;
  color:#eff2f6;
}

.hero-text{
  margin:0 0 30px;
  color:var(--muted);
  font-size:1rem;
}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border-radius:18px;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.cta:hover{
  transform:translateY(-2px);
}

.cta-main{
  color:#fffaf6;
  background:linear-gradient(180deg, var(--fire-2) 0%, var(--fire) 44%, var(--fire-3) 100%);
  box-shadow:
    0 12px 28px rgba(210,70,30,.28),
    0 0 22px rgba(255,120,58,.2);
}

.cta-soft{
  color:#edf1f7;
  background:
    linear-gradient(180deg, rgba(44,53,66,.84) 0%, rgba(17,21,28,.95) 100%);
  border:1px solid var(--line-metal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 22px rgba(0,0,0,.18);
}

section{
  max-width:var(--max);
  margin:0 auto;
  padding:54px 20px;
  background:transparent;
}

section + section{
  padding-top:34px;
}

section::before{
  content:"";
  position:absolute;
  inset:8px 6px;
  z-index:-1;
  border-radius:34px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.007), rgba(0,0,0,.01));
  opacity:.18;
}

section h2{
  text-align:center;
  margin-bottom:18px;
  font-size:clamp(2rem, 4.2vw, 3rem);
  color:var(--title);
}

section h2::after{
  content:"";
  display:block;
  width:112px;
  height:3px;
  margin:14px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--fire), var(--gold), var(--fire), transparent);
  box-shadow:0 0 14px rgba(255,122,64,.14);
}

section > p{
  max-width:920px;
  margin-left:auto;
  margin-right:auto;
}

.section-intro,
#instructeurs > p{
  text-align:center;
  color:var(--muted);
  margin-top:0;
  margin-bottom:0;
}

.center{ text-align:center; }

.location{
  text-align:center;
  font-size:1.06rem;
  color:#eef1f5;
  margin-top:6px;
}

.grid,
.instructors-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin-top:30px;
}

.card,
.instructor-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line-metal);
  box-shadow:var(--shadow);
  backdrop-filter:blur(2px);
}

.card{
  padding:24px 22px;
  background:
    linear-gradient(180deg, rgba(42,52,65,.74) 0%, rgba(15,19,26,.94) 100%);
}

.card::before,
.instructor-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

.card::after,
.instructor-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:26%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  opacity:.18;
}

/* Variantes plus premium */
#avantages .card:nth-child(1),
#pour-qui .card:nth-child(1),
#cours .card:nth-child(1),
#reseaux .card:nth-child(1){
  background:linear-gradient(180deg, rgba(49,60,74,.78) 0%, rgba(15,19,25,.94) 100%);
}
#avantages .card:nth-child(1)::before,
#pour-qui .card:nth-child(1)::before,
#cours .card:nth-child(1)::before,
#reseaux .card:nth-child(1)::before{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,124,64,.07), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 36%);
}

#avantages .card:nth-child(2),
#pour-qui .card:nth-child(2),
#cours .card:nth-child(2),
#reseaux .card:nth-child(2){
  background:linear-gradient(180deg, rgba(39,49,63,.78) 0%, rgba(13,17,23,.94) 100%);
}
#avantages .card:nth-child(2)::before,
#pour-qui .card:nth-child(2)::before,
#cours .card:nth-child(2)::before,
#reseaux .card:nth-child(2)::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.03) 0%, transparent 32%),
    radial-gradient(circle at 80% 18%, rgba(255,104,54,.07), transparent 22%);
}

#avantages .card:nth-child(3),
#pour-qui .card:nth-child(3),
#cours .card:nth-child(3),
#reseaux .card:nth-child(3){
  background:linear-gradient(180deg, rgba(35,44,56,.74) 0%, rgba(11,14,19,.94) 100%);
}
#avantages .card:nth-child(3)::before,
#pour-qui .card:nth-child(3)::before,
#cours .card:nth-child(3)::before,
#reseaux .card:nth-child(3)::before{
  background:radial-gradient(circle at 50% 0%, rgba(255,114,58,.06), transparent 24%);
}

#avantages .card:nth-child(4),
#pour-qui .card:nth-child(4),
#cours .card:nth-child(4),
#reseaux .card:nth-child(4){
  background:linear-gradient(180deg, rgba(52,62,74,.74) 0%, rgba(14,17,23,.94) 100%);
}
#avantages .card:nth-child(4)::before,
#pour-qui .card:nth-child(4)::before,
#cours .card:nth-child(4)::before,
#reseaux .card:nth-child(4)::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.03)),
    radial-gradient(circle at 22% 16%, rgba(255,124,66,.06), transparent 20%);
}

.card h3{
  margin-bottom:10px;
  font-size:1.35rem;
  color:#f7f4ef;
  position:relative;
  z-index:1;
}

.card p{
  margin:0;
  color:var(--muted);
  position:relative;
  z-index:1;
}

.card .cta{
  margin-top:18px;
  position:relative;
  z-index:1;
}

.grid-for-who{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-for-who .card-centered{
  grid-column:1 / -1;
  max-width:calc(50% - 10px);
  width:100%;
  margin:0 auto;
}

/* Instructeurs */
.instructor-card{
  min-height:390px;
  perspective:1200px;
  touch-action:manipulation;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(42,51,62,.74) 0%, rgba(12,15,20,.92) 100%);
}

.instructor-card::before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 36%),
    radial-gradient(circle at 50% 0%, rgba(255,114,58,.06), transparent 22%);
}

.instructor-flip{
  position:relative;
  width:100%;
  height:100%;
  min-height:390px;
  transform-style:preserve-3d;
  transition:transform .65s ease;
}

.instructor-card.is-flipped .instructor-flip{
  transform:rotateY(180deg);
}

.instructor-front,
.instructor-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
}

.instructor-back{
  transform:rotateY(180deg);
  padding:24px 22px;
  justify-content:center;
  background:linear-gradient(180deg, rgba(47,57,68,.96) 0%, rgba(14,17,21,.98) 100%);
}

.instructor-photo{
  flex:1 1 auto;
  min-height:250px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,148,92,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05)),
    linear-gradient(180deg, #7d8896 0%, #3c4551 34%, #181d24 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ead0aa;
  font-size:1.4rem;
  font-weight:600;
}

.instructor-info{
  padding:20px 20px 22px;
  background:linear-gradient(180deg, rgba(18,20,24,.16), rgba(9,10,13,.76));
  border-top:1px solid rgba(255,255,255,.06);
}

.instructor-name{
  margin:0 0 8px;
  font-size:1.45rem;
  color:#fff5e9;
  font-weight:700;
}

.instructor-role,
.instructor-text{
  margin:0;
  color:var(--muted);
}

.time{
  margin-top:10px !important;
  font-weight:700;
  color:#fff3e8;
}

#reseaux .card h3{
  display:flex;
  align-items:center;
  gap:10px;
}

#reseaux .card:nth-child(1) h3::before,
#reseaux .card:nth-child(2) h3::before,
#reseaux .card:nth-child(3) h3::before{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  font-size:.9rem;
  color:#fff;
  flex:0 0 28px;
  position:relative;
  z-index:1;
}

#reseaux .card:nth-child(1) h3::before{
  content:"▶";
  background:linear-gradient(180deg,#ff6654,#d93425);
}
#reseaux .card:nth-child(2) h3::before{
  content:"♪";
  background:linear-gradient(180deg,#ff9b75,#e74c65);
}
#reseaux .card:nth-child(3) h3::before{
  content:"f";
  background:linear-gradient(180deg,#4a78ff,#2445c8);
  font-weight:800;
}

.map-wrap{
  margin-top:26px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 16px 34px rgba(0,0,0,.2);
}

.map-wrap iframe{
  display:block;
  width:100%;
  min-height:350px;
  border:0;
}

footer{
  max-width:var(--max);
  margin:0 auto;
  padding:36px 20px 54px;
  text-align:center;
  color:#c8c0b7;
  font-size:.96rem;
}

footer p{ margin:6px 0; }

@media (max-width: 900px){
  .hero,
  header{
    padding:66px 18px 72px;
  }

  section{
    padding:48px 18px;
  }

  .card{
    padding:22px 18px;
  }

  .instructors-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 820px){
  .grid{
    grid-template-columns:1fr;
  }

  .grid-for-who{
    grid-template-columns:1fr;
  }

  .grid-for-who .card-centered{
    grid-column:auto;
    max-width:none;
  }
}

@media (max-width: 640px){
  body{ line-height:1.64; }

  .hero-logo{
    width:84px;
    height:84px;
  }

  .hero-logo::before{
    font-size:.84rem;
  }

  .eyebrow{
    letter-spacing:3px;
    font-size:.76rem;
  }

  .hero h1,
  header h1{
    font-size:clamp(2.2rem, 10vw, 3.25rem);
  }

  .hero-subtitle,
  .hero-text,
  .section-intro,
  #instructeurs > p,
  .card p,
  .location,
  footer{
    font-size:.98rem;
  }

  section{
    padding:42px 16px;
  }

  section + section{
    padding-top:24px;
  }

  section::before{
    inset:4px 2px;
    border-radius:26px;
    opacity:.14;
  }

  section h2{
    font-size:clamp(1.8rem, 8vw, 2.35rem);
  }

  .cta{
    min-height:50px;
    padding:0 20px;
    border-radius:16px;
  }

  .card,
  .instructor-card{
    border-radius:22px;
  }

  .instructor-card,
  .instructor-flip{
    min-height:360px;
  }

  .instructor-photo{
    min-height:220px;
    font-size:1.2rem;
  }

  .map-wrap{
    border-radius:20px;
  }

  .map-wrap iframe{
    min-height:300px;
  }
}

/* ===== V6 GALERIE / CONVERSION ===== */

#galerie .section-intro{
  max-width:880px;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
  margin-top:30px;
}

.gallery-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(180,196,214,.12);
  background:linear-gradient(180deg, rgba(39,49,63,.78) 0%, rgba(13,17,23,.94) 100%);
  box-shadow:0 18px 38px rgba(0,0,0,.22);
}

.gallery-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(255,104,54,.06), transparent 22%);
}

.gallery-media{
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  color:#ead7bf;
  font-weight:700;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,148,92,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05)),
    linear-gradient(180deg, #7d8896 0%, #3c4551 34%, #181d24 100%);
}

.gallery-caption{
  padding:16px 18px 18px;
  color:#eef2f7;
  font-weight:600;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(18,20,24,.12), rgba(9,10,13,.74));
}

.gallery-card-wide{
  grid-column:1 / -1;
}

#contact .section-intro,
#en-savoir-plus .section-intro,
#lieu .location{
  max-width:760px;
}

@media (max-width: 820px){
  .gallery-grid{
    grid-template-columns:1fr;
  }

  .gallery-card-wide{
    grid-column:auto;
  }

  .gallery-media{
    min-height:210px;
  }
}

/* ===== V6.1 HERO / TITRES / LISIBILITE ===== */

.eyebrow{
  color:#e6d9c8 !important;
  font-size:.9rem !important;
  font-weight:800 !important;
  letter-spacing:4.6px !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(255,140,70,.08);
  opacity:1 !important;
}

.hero-subtitle{
  color:#f4f6fa !important;
  font-size:1.12rem !important;
  font-weight:800 !important;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}

.hero-text{
  color:#eef2f7 !important;
  font-size:1.03rem !important;
  font-weight:500 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.16);
}

.hero h1,
header h1{
  color:#fffaf4 !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.16),
    0 10px 24px rgba(0,0,0,.12),
    0 0 18px rgba(255,255,255,.03);
}

section h2{
  color:#e3e8f0 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 8px 18px rgba(0,0,0,.08);
}

#esprit h2,
#avantages h2,
#pour-qui h2,
#instructeurs h2,
#cours h2,
#reseaux h2,
#galerie h2,
#contact h2,
#en-savoir-plus h2,
#lieu h2{
  color:#e3e8f0 !important;
}

.hero::before,
header::before{
  box-shadow:
    0 0 20px rgba(255,120,58,.22),
    0 0 34px rgba(255,120,58,.08) !important;
}

@media (max-width: 640px){
  .eyebrow{
    font-size:.82rem !important;
    letter-spacing:3.8px !important;
  }

  .hero-subtitle{
    font-size:1.02rem !important;
  }

  .hero-text{
    font-size:1rem !important;
  }
}

/* ===== V6.2 SHINE / RELIEF / PREMIUM ===== */

.hero-logo{
  border:1px solid rgba(210,220,235,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -12px 24px rgba(0,0,0,.18),
    0 14px 28px rgba(0,0,0,.24),
    0 0 22px rgba(255,110,52,.12) !important;
}

.hero-logo::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  top:8%;
  height:24%;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity:.55;
}

.hero h1,
header h1,
section h2{
  background:linear-gradient(180deg, #ffffff 0%, #eef3f9 42%, #cfd7e2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.18)) drop-shadow(0 8px 18px rgba(0,0,0,.12));
}

.eyebrow{
  color:#f0dfcb !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 12px rgba(255,160,95,.10) !important;
}

.hero-subtitle{
  color:#f9fbff !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 8px rgba(255,255,255,.04) !important;
}

.hero-text{
  color:#f2f5fa !important;
}

.cta-main{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,220,190,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 12px 30px rgba(210,70,30,.30),
    0 0 24px rgba(255,120,58,.22) !important;
}

.cta-main::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:6%;
  height:34%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  pointer-events:none;
}

.card,
.instructor-card,
.gallery-card{
  border:1px solid rgba(190,205,222,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 38px rgba(0,0,0,.26) !important;
}

.card::after,
.instructor-card::after,
.gallery-card::after{
  opacity:.28 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0)) !important;
}

.card::before,
.instructor-card::before,
.gallery-card::before{
  background-blend-mode:screen;
}

.card h3,
.instructor-name{
  color:#fbf8f2 !important;
  text-shadow:0 1px 0 rgba(0,0,0,.16);
}

section h2::after{
  height:4px !important;
  box-shadow:
    0 0 14px rgba(255,122,64,.18),
    0 0 24px rgba(255,122,64,.08) !important;
}

@media (max-width: 640px){
  .hero h1,
  header h1,
  section h2{
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.16)) drop-shadow(0 6px 12px rgba(0,0,0,.10));
  }
}

/* ===== V6.3 HERO HIERARCHIE / RELIEF / COULEURS ===== */

.hero,
header{
  padding-top:78px !important;
  padding-bottom:88px !important;
}

.hero-content{
  max-width:980px !important;
}

.hero-logo-wrap{
  margin:0 0 22px !important;
}

.hero-logo{
  width:88px !important;
  height:88px !important;
}

.eyebrow{
  margin:0 0 22px !important;
  font-size:.76rem !important;
  letter-spacing:5.4px !important;
  font-weight:700 !important;
  color:#f1d8bb !important;
  opacity:.96 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 10px rgba(255,145,80,.10) !important;
}

.hero h1,
header h1{
  font-size:clamp(3rem, 7.4vw, 5.4rem) !important;
  line-height:1.02 !important;
  margin:0 0 20px !important;
  background:linear-gradient(180deg, #ffffff 0%, #f6f8fb 38%, #d7dee8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.20))
    drop-shadow(0 12px 24px rgba(0,0,0,.16)) !important;
}

.hero-subtitle{
  margin:0 0 16px !important;
  font-size:1.12rem !important;
  font-weight:800 !important;
  color:#f8fbff !important;
  letter-spacing:.02em !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 8px rgba(255,255,255,.04) !important;
}

.hero-text{
  max-width:760px;
  margin:0 auto 34px !important;
  font-size:1rem !important;
  line-height:1.8 !important;
  font-weight:500 !important;
  color:#d9e0ea !important;
  text-shadow:0 1px 0 rgba(0,0,0,.16) !important;
}

.hero::after,
header::after{
  content:"";
  position:absolute;
  left:50%;
  top:110px;
  transform:translateX(-50%);
  width:min(82vw, 760px);
  height:320px;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,122,62,.10), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(120,160,220,.06), transparent 44%);
  filter:blur(18px);
  opacity:.9;
}

.hero-content > *{
  position:relative;
  z-index:1;
}

.cta-main{
  min-height:58px !important;
  padding:0 30px !important;
  font-size:1.02rem !important;
  border-radius:20px !important;
  background:linear-gradient(180deg, #ff8a54 0%, #ff6338 42%, #d92d1f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 30px rgba(215,70,30,.34),
    0 0 28px rgba(255,120,58,.24) !important;
}

.cta-main::before{
  opacity:.78 !important;
}

section h2{
  margin-bottom:22px !important;
  background:linear-gradient(180deg, #ffffff 0%, #eef3fa 44%, #d5dde8 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.18))
    drop-shadow(0 8px 16px rgba(0,0,0,.10)) !important;
}

section h2::after{
  width:128px !important;
  height:4px !important;
  background:linear-gradient(90deg, transparent, #ff6e42, #ffd09a, #ff6e42, transparent) !important;
  box-shadow:
    0 0 14px rgba(255,122,64,.24),
    0 0 28px rgba(255,122,64,.10) !important;
}

.card,
.instructor-card,
.gallery-card{
  background-blend-mode:screen, normal !important;
}

.card{
  background:
    linear-gradient(180deg, rgba(56,68,84,.82) 0%, rgba(16,20,27,.95) 100%) !important;
}

.card::after,
.instructor-card::after,
.gallery-card::after{
  opacity:.34 !important;
}

@media (max-width: 640px){
  .hero,
  header{
    padding-top:72px !important;
    padding-bottom:74px !important;
  }

  .hero-logo{
    width:78px !important;
    height:78px !important;
  }

  .eyebrow{
    margin:0 0 18px !important;
    font-size:.70rem !important;
    letter-spacing:4.4px !important;
  }

  .hero h1,
  header h1{
    font-size:clamp(2.7rem, 10.8vw, 3.9rem) !important;
    margin:0 0 16px !important;
  }

  .hero-subtitle{
    margin:0 0 12px !important;
    font-size:1rem !important;
  }

  .hero-text{
    margin:0 auto 28px !important;
    font-size:.96rem !important;
    line-height:1.7 !important;
  }

  .cta-main{
    min-height:54px !important;
    padding:0 24px !important;
    font-size:1rem !important;
  }
}

/* ===== V7 ALIGNEMENT LOGO : CHROME / ROUGE / NOIR ===== */

:root{
  --logo-black:#050608;
  --logo-anth:#0d1117;
  --logo-steel:#171d26;
  --logo-steel-2:#222b36;
  --logo-chrome:#dfe6ee;
  --logo-chrome-2:#f7fbff;
  --logo-red:#ff3a22;
  --logo-red-2:#ff2418;
  --logo-red-3:#ff5a32;
}

/* fond global plus noir / acier */
body{
  background:
    radial-gradient(circle at 50% -2%, rgba(255,58,34,.14), transparent 18%),
    radial-gradient(circle at 18% 18%, rgba(255,58,34,.05), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(255,58,34,.05), transparent 22%),
    linear-gradient(180deg, #171d26 0%, #10151c 18%, #0b0f15 40%, #080b10 68%, #050608 100%) !important;
}

body::after{
  background:
    radial-gradient(circle at 50% 8%, rgba(255,58,34,.06), transparent 16%),
    radial-gradient(circle at 24% 54%, rgba(255,36,24,.04), transparent 18%),
    radial-gradient(circle at 76% 46%, rgba(255,36,24,.04), transparent 18%) !important;
}

/* hero plus sombre avec braise rouge */
.hero,
header{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,58,34,.18), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.01) 0%, rgba(0,0,0,.03) 100%) !important;
}

.hero::before,
header::before{
  background:linear-gradient(
    90deg,
    transparent,
    rgba(230,236,244,.34),
    var(--logo-red),
    rgba(230,236,244,.34),
    transparent
  ) !important;
  box-shadow:
    0 0 18px rgba(255,58,34,.26),
    0 0 34px rgba(255,58,34,.10) !important;
}

.hero::after,
header::after{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,58,34,.12), transparent 34%),
    radial-gradient(circle at 50% 48%, rgba(180,200,225,.05), transparent 44%) !important;
}

/* vrai logo */
.hero-logo{
  width:96px !important;
  height:96px !important;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(223,230,238,.18) !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,58,34,.10), transparent 42%),
    linear-gradient(180deg, #222a35 0%, #12171e 55%, #07090c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -12px 24px rgba(0,0,0,.18),
    0 14px 28px rgba(0,0,0,.24),
    0 0 22px rgba(255,58,34,.14) !important;
}

.hero-logo::before{
  display:none !important;
}

.hero-logo::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:6%;
  height:22%;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
  opacity:.42;
  z-index:2;
}

.hero-logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:1;
}

/* si l'image manque, le conteneur reste propre */
.hero-logo-img[src="images/logo-pencak-silat-mouscron.png"]{
  background:transparent;
}

/* textes du hero : plus chrome, moins crème */
.eyebrow{
  color:#d9dee6 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.22),
    0 0 10px rgba(255,58,34,.08) !important;
}

.hero h1,
header h1,
section h2{
  background:linear-gradient(180deg, var(--logo-chrome-2) 0%, var(--logo-chrome) 42%, #aeb8c4 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}

.hero-subtitle{
  color:#eef4fb !important;
}

.hero-text{
  color:#d7e0ea !important;
}

/* accents rouges plus francs */
.cta-main{
  background:linear-gradient(180deg, #ff6a44 0%, var(--logo-red-3) 26%, var(--logo-red) 56%, var(--logo-red-2) 100%) !important;
  border:1px solid rgba(255,220,210,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 30px rgba(255,58,34,.34),
    0 0 28px rgba(255,58,34,.24) !important;
}

section h2::after{
  background:linear-gradient(
    90deg,
    transparent,
    var(--logo-red),
    #ffd4ad,
    var(--logo-red),
    transparent
  ) !important;
  box-shadow:
    0 0 14px rgba(255,58,34,.24),
    0 0 28px rgba(255,58,34,.10) !important;
}

/* cartes plus chrome / anthracite */
.card,
.instructor-card,
.gallery-card{
  border:1px solid rgba(210,220,234,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 38px rgba(0,0,0,.28) !important;
}

.card{
  background:
    linear-gradient(180deg, rgba(58,70,86,.80) 0%, rgba(14,18,24,.96) 100%) !important;
}

#avantages .card:nth-child(1),
#pour-qui .card:nth-child(1),
#cours .card:nth-child(1),
#reseaux .card:nth-child(1){
  background:linear-gradient(180deg, rgba(66,79,96,.82) 0%, rgba(15,19,25,.96) 100%) !important;
}

#avantages .card:nth-child(2),
#pour-qui .card:nth-child(2),
#cours .card:nth-child(2),
#reseaux .card:nth-child(2){
  background:linear-gradient(180deg, rgba(51,63,79,.82) 0%, rgba(13,17,23,.96) 100%) !important;
}

#avantages .card:nth-child(3),
#pour-qui .card:nth-child(3),
#cours .card:nth-child(3),
#reseaux .card:nth-child(3){
  background:linear-gradient(180deg, rgba(42,53,66,.80) 0%, rgba(11,14,19,.96) 100%) !important;
}

#avantages .card:nth-child(4),
#pour-qui .card:nth-child(4),
#cours .card:nth-child(4),
#reseaux .card:nth-child(4){
  background:linear-gradient(180deg, rgba(71,83,98,.80) 0%, rgba(14,17,23,.96) 100%) !important;
}

.card::after,
.instructor-card::after,
.gallery-card::after{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)) !important;
  opacity:.26 !important;
}

.card h3,
.instructor-name{
  color:#f8fbff !important;
}

/* instructeurs / galerie plus raccord au logo */
.instructor-card{
  background:linear-gradient(180deg, rgba(50,61,75,.80) 0%, rgba(12,15,20,.94) 100%) !important;
}

.instructor-back{
  background:linear-gradient(180deg, rgba(55,67,80,.96) 0%, rgba(14,17,21,.99) 100%) !important;
}

.instructor-photo,
.gallery-media{
  background:
    radial-gradient(circle at 50% 18%, rgba(255,58,34,.08), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05)),
    linear-gradient(180deg, #8a95a4 0%, #424d5b 34%, #171c23 100%) !important;
  color:#f0ddc5 !important;
}

/* boutons secondaires plus chrome */
.cta-soft{
  color:#eef3fa !important;
  background:
    linear-gradient(180deg, rgba(46,56,69,.88) 0%, rgba(16,19,25,.96) 100%) !important;
  border:1px solid rgba(210,220,234,.12) !important;
}

/* responsive logo */
@media (max-width: 640px){
  .hero-logo{
    width:82px !important;
    height:82px !important;
  }
}

/* ===== V7.1 MICRO-EFFETS PREMIUM ===== */

/* HERO : effet signature plus noble */
.hero h1,
header h1{
  letter-spacing:-0.01em !important;
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 20%,
    #e9eef5 48%,
    #c8d2df 78%,
    #aab5c3 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:
    drop-shadow(0 2px 0 rgba(0,0,0,.22))
    drop-shadow(0 10px 22px rgba(0,0,0,.14))
    drop-shadow(0 0 10px rgba(255,255,255,.03)) !important;
}

/* léger halo centré derrière le H1 */
.hero-content{
  position:relative;
}

.hero-content::before{
  content:"";
  position:absolute;
  left:50%;
  top:120px;
  transform:translateX(-50%);
  width:min(70vw, 620px);
  height:160px;
  pointer-events:none;
  border-radius:999px;
  background:
    radial-gradient(circle, rgba(255,48,28,.10) 0%, rgba(255,48,28,.04) 35%, transparent 72%);
  filter:blur(22px);
  z-index:0;
}

.hero-content > *{
  position:relative;
  z-index:1;
}

/* Eyebrow : plus nette, plus haut de gamme */
.eyebrow{
  text-transform:uppercase !important;
  color:#dde3eb !important;
  opacity:.98 !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.24),
    0 0 8px rgba(255,80,50,.08) !important;
}

/* Sous-titre : plus lisible mais toujours sobre */
.hero-subtitle{
  color:#f6f9fd !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 6px rgba(255,255,255,.03) !important;
}

/* Ligne publics : un peu plus douce pour créer la hiérarchie */
.hero-text{
  color:#d5dde8 !important;
  opacity:.96;
}

/* H2 : chrome plus propre et plus fin */
section h2{
  background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f0f4fa 38%,
    #d9e1eb 70%,
    #b7c2cf 100%
  ) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.18))
    drop-shadow(0 6px 12px rgba(0,0,0,.10)) !important;
}

/* Soulignement : braise un peu plus vivante */
section h2::after{
  background:linear-gradient(
    90deg,
    transparent,
    #ff3a22,
    #ffd9b5,
    #ff3a22,
    transparent
  ) !important;
  box-shadow:
    0 0 12px rgba(255,58,34,.24),
    0 0 22px rgba(255,58,34,.08) !important;
}

/* Bouton principal : surface plus laquée */
.cta-main{
  position:relative;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    #ff8657 0%,
    #ff653c 26%,
    #ff4528 58%,
    #d62016 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 14px rgba(120,0,0,.10),
    0 14px 30px rgba(255,58,34,.34),
    0 0 26px rgba(255,58,34,.20) !important;
}

.cta-main::before{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:7%;
  height:36%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0));
  opacity:.9;
  pointer-events:none;
}

/* cartes : juste un poil plus de relief, pas plus */
.card::after,
.instructor-card::after,
.gallery-card::after{
  opacity:.30 !important;
}

.card h3,
.instructor-name{
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 4px rgba(255,255,255,.02);
}

/* responsive */
@media (max-width: 640px){
  .hero-content::before{
    top:110px;
    width:min(84vw, 420px);
    height:130px;
    filter:blur(18px);
  }

  .hero h1,
  header h1{
    filter:
      drop-shadow(0 2px 0 rgba(0,0,0,.20))
      drop-shadow(0 8px 16px rgba(0,0,0,.12))
      drop-shadow(0 0 8px rgba(255,255,255,.02)) !important;
  }
}

/* =========================
   V7.2 BOUTONS RESEAUX
========================= */

.youtube-btn{
background:linear-gradient(180deg,#ff4e45,#cc1e1e);
box-shadow:0 10px 22px rgba(255,0,0,.35);
}

.tiktok-btn{
background:linear-gradient(180deg,#ff4f70,#e60073);
box-shadow:0 10px 22px rgba(255,0,100,.35);
}

.facebook-btn{
background:linear-gradient(180deg,#4c79ff,#2d4ed8);
box-shadow:0 10px 22px rgba(0,80,255,.35);
}

/* =========================
   BOUTON SECONDAIRE
========================= */

.cta-secondary{
background:linear-gradient(180deg,#323842,#1d222a);
border:1px solid rgba(255,255,255,.1);
color:#e6edf6;
}

.cta-secondary:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.4);
}

/* =========================
   TITRES MOBILE
========================= */

@media (max-width:640px){

h2{
font-size:1.8rem;
line-height:1.2;
margin-bottom:12px;
}

section{
padding-top:50px;
padding-bottom:50px;
}

}

/* =========================
   CARTES MOBILE
========================= */

@media (max-width:640px){

.card,
.instructor-card,
.social-card{
padding:22px;
}

.gallery-card{
height:210px;
}

}

/* =========================
   CARTES HOVER
========================= */

.card:hover,
.instructor-card:hover,
.social-card:hover{

transform:translateY(-4px);
box-shadow:
0 18px 35px rgba(0,0,0,.45),
0 0 20px rgba(255,58,34,.08);

}

/* =========================
   PETIT GLOW SUR TITRES
========================= */

h2::after{
box-shadow:
0 0 14px rgba(255,60,40,.35),
0 0 28px rgba(255,60,40,.15);
}

/* =========================
   AMELIORATION TEXTE MOBILE
========================= */

@media (max-width:640px){

.hero-text{
font-size:0.95rem;
line-height:1.4;
}

.hero-subtitle{
font-size:1.1rem;
}

}

/* =========================
   BOUTONS GLOBAL
========================= */

button,
.cta{

transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease;

}

button:hover,
.cta:hover{

transform:translateY(-2px);

}

/* =========================
   FIN PATCH
========================= */


/* Base commune */
#reseaux .card .cta,
#en-savoir-plus .cta,



/* mobile : bouton un peu plus large */

@media (max-width:640px){

  #en-savoir-plus .cta,
  #lieu .cta{
    min-height:52px;
    padding:0 22px;
    border-radius:16px;
  }

}


/* =============================== */




/* ===================================== */
/* SYSTEME BOUTONS PROPRE — VERSION FINALE */
/* ===================================== */

/* Base bouton secondaire */
.cta-soft{
  background:linear-gradient(180deg,#46505d 0%, #2a313b 55%, #171c22 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#eef3fa !important;
  border-radius:16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 22px rgba(0,0,0,.30) !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

.cta-soft:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 14px 28px rgba(0,0,0,.42) !important;
}

/* Bouton 'Voir le site complet' */
#en-savoir-plus .cta-soft{
  background:linear-gradient(180deg,#4f5a69 0%, #303845 55%, #1c222a 100%) !important;
  padding-right:38px !important;
  position:relative;
}

#en-savoir-plus .cta-soft::after{
  content:"↗";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:.78;
}

/* Bouton 'Ouvrir l’itinéraire' */
#lieu .cta-soft{
  background:linear-gradient(180deg,#434d59 0%, #29303a 55%, #171c21 100%) !important;
  padding-right:38px !important;
  position:relative;
}

#lieu .cta-soft::after{
  content:"↗";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  opacity:.78;
}

/* Boutons réseaux */
#reseaux .card:nth-child(1) .cta-soft{
  background:linear-gradient(180deg,#ff6857 0%, #ff4637 45%, #c91f1f 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 22px rgba(255,50,30,.30),
    0 0 18px rgba(255,50,30,.12) !important;
}

#reseaux .card:nth-child(2) .cta-soft{
  background:linear-gradient(180deg,#ff8a8f 0%, #ff5a74 45%, #d83c74 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 22px rgba(255,70,120,.28),
    0 0 18px rgba(255,70,120,.12) !important;
}

#reseaux .card:nth-child(3) .cta-soft{
  background:linear-gradient(180deg,#5b86ff 0%, #3f67ea 45%, #2747c8 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 22px rgba(50,90,255,.28),
    0 0 18px rgba(50,90,255,.12) !important;
}

@media (max-width:640px){
  .cta-soft{
    min-height:52px !important;
    padding:0 22px !important;
    border-radius:16px !important;
  }

  #en-savoir-plus .cta-soft,
  #lieu .cta-soft{
    padding-right:40px !important;
  }
}

/* ===================================== */
/* FINITION VISUELLE FINALE              */
/* ===================================== */

/* Hero un peu plus compact */
.hero,
header{
  padding-top: 64px !important;
  padding-bottom: 68px !important;
}

/* Logo un peu plus présent */
.hero-logo{
  width: 108px !important;
  height: 108px !important;
  margin-bottom: 8px !important;
}

.hero-logo-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ajustement mobile du hero */
@media (max-width: 640px){
  .hero,
  header{
    padding-top: 56px !important;
    padding-bottom: 58px !important;
  }

  .hero-logo{
    width: 96px !important;
    height: 96px !important;
  }

  .hero h1,
  header h1{
    margin-bottom: 14px !important;
  }

  .hero-subtitle{
    margin-bottom: 10px !important;
  }

  .hero-text{
    margin-bottom: 22px !important;
  }
}

/* Mini relief premium sur les cartes */
.card,
.instructor-card,
.gallery-card{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease !important;
}

.card:hover,
.instructor-card:hover,
.gallery-card:hover{
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 16px 30px rgba(0,0,0,.34),
    0 0 14px rgba(255,58,34,.08) !important;
}

/* Un poil plus premium sur les titres de cartes */
.card h3,
.instructor-name,
.gallery-caption{
  text-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 0 4px rgba(255,255,255,.02);
}

/* Soulignement légèrement plus net */
section h2::after{
  height: 4px !important;
  box-shadow:
    0 0 12px rgba(255,58,34,.22),
    0 0 24px rgba(255,58,34,.08) !important;
}


/* ===================================== */
/* BOUTONS SECONDAIRES COULEUR OR        */
/* ===================================== */

.cta-soft{

  background: linear-gradient(
    180deg,
    #e3c46a 0%,
    #caa54d 50%,
    #9f7e33 100%
  );

  border:1px solid rgba(255,215,120,.35);

  color:#2b1e07;

  font-weight:600;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 18px rgba(0,0,0,.35),
    0 0 10px rgba(230,180,70,.15);

}

.cta-soft:hover{

  transform: translateY(-2px);

  background: linear-gradient(
    180deg,
    #f0d680 0%,
    #d4b35c 50%,
    #a7863b 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 14px 28px rgba(0,0,0,.45),
    0 0 14px rgba(230,180,70,.25);

}


/* ===================================== */
/* FORCE OR — VOIR LE SITE + ITINERAIRE  */
/* ===================================== */

#en-savoir-plus .cta.cta-soft,
#lieu .cta.cta-soft{
  background:linear-gradient(180deg, #e3c978 0%, #caa553 52%, #9c7932 100%) !important;
  border:1px solid rgba(255,220,140,.36) !important;
  color:#2f2208 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 10px 20px rgba(0,0,0,.34),
    0 0 12px rgba(210,170,70,.16) !important;
}

#en-savoir-plus .cta.cta-soft:hover,
#lieu .cta.cta-soft:hover{
  background:linear-gradient(180deg, #efd88d 0%, #d7b564 52%, #aa853b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),
    0 14px 26px rgba(0,0,0,.42),
    0 0 16px rgba(210,170,70,.24) !important;
}

#en-savoir-plus .cta.cta-soft::after,
#lieu .cta.cta-soft::after{
  color:#5a4312 !important;
  opacity:.82 !important;
}


/* ===================================== */
/* SEO / FAQ / HERO NOTE                 */
/* ===================================== */

.hero-note{
  margin:16px auto 0;
  max-width:720px;
  text-align:center;
  color:#dfe6ef;
  font-size:.96rem;
  font-weight:600;
  opacity:.95;
}

#faq .grid{
  margin-top:26px;
}

#faq .card h3{
  margin-bottom:10px;
}

#faq .card p{
  line-height:1.68;
}

@media (max-width:640px){
  .hero-note{
    font-size:.92rem;
    line-height:1.45;
    margin-top:14px;
  }
}

/* ===================================== */
/* CORRECTION TEXTE ESPRIT MOBILE        */
/* ===================================== */

#esprit .section-intro{
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

@media (max-width:640px){

  #esprit .section-intro{
    max-width:95%;
    line-height:1.65;
  }

}


/* ===================================== */
/* FIX TEXTE MOBILE — PARAGRAPHES SEO    */
/* ===================================== */

#esprit .section-intro,
#avantages .section-intro,
#lieu .section-intro{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px){

  #esprit .section-intro,
  #avantages .section-intro,
  #lieu .section-intro{
    max-width: 92% !important;
    text-align: left !important;
    line-height: 1.7 !important;
    font-size: 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}


/* ===================================== */
/* SILAT — FINAL HERO FIX                */
/* ===================================== */

header.hero,
.hero{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
  padding:72px 20px 78px !important;
  margin:0 auto !important;
}

.hero-content{
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
  text-align:center !important;
  display:block !important;
}

.hero-content > *{
  margin-left:auto !important;
  margin-right:auto !important;
}

.hero-logo-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 0 18px !important;
}

.hero-logo{
  width:96px !important;
  height:96px !important;
  min-width:96px !important;
  min-height:96px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  margin:0 auto !important;
}

.hero-logo::before,
.hero-logo::after{
  content:none !important;
  display:none !important;
}

.hero-logo-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

.eyebrow{
  text-align:center !important;
  max-width:900px !important;
  margin:0 auto 14px !important;
}

.hero h1,
header h1{
  text-align:center !important;
  max-width:980px !important;
  margin:0 auto 14px !important;
}

.hero-subtitle{
  text-align:center !important;
  max-width:980px !important;
  margin:0 auto 10px !important;
}

.hero-text{
  text-align:center !important;
  max-width:980px !important;
  margin:0 auto 30px !important;
}

.hero-note{
  text-align:center !important;
  max-width:980px !important;
  margin:14px auto 0 !important;
}

.hero .cta-main{
  display:inline-flex !important;
  margin:0 auto !important;
}

@media (max-width: 768px){
  header.hero,
  .hero{
    padding:58px 16px 64px !important;
  }

  .hero-content{
    max-width:100% !important;
  }

  .hero-logo{
    width:82px !important;
    height:82px !important;
    min-width:82px !important;
    min-height:82px !important;
  }

  .eyebrow{
    letter-spacing:3px !important;
    font-size:.72rem !important;
  }

  .hero h1,
  header h1{
    font-size:clamp(2.5rem, 8vw, 4rem) !important;
    line-height:1.06 !important;
  }

  .hero-subtitle{
    font-size:1rem !important;
  }

  .hero-text,
  .hero-note{
    font-size:.95rem !important;
    line-height:1.55 !important;
  }
}

/* ===================================== */
/* SILAT — HERO FINITION                 */
/* ===================================== */

/* logo un peu plus grand */
.hero-logo{
  width:110px !important;
  height:110px !important;
}

/* mobile */
@media (max-width:768px){

  .hero-logo{
    width:95px !important;
    height:95px !important;
  }

  .hero-note{
    font-size:.88rem !important;
    opacity:.85 !important;
  }

}


/* ===================================== */
/* HERO FINAL — LOGO + MOBILE TUNING     */
/* ===================================== */

/* logo desktop */
.hero-logo{
  width:110px !important;
  height:110px !important;
}

/* image logo */
.hero-logo-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:50% !important;
}

/* texte discret sous bouton */
.hero-note{
  font-size:0.95rem !important;
  opacity:0.85 !important;
}

/* mobile optimisation */
@media (max-width:768px){

  .hero-logo{
    width:95px !important;
    height:95px !important;
  }

  .hero-note{
    font-size:0.88rem !important;
    opacity:0.80 !important;
  }

}


/* ===================================== */
/* SILAT — INSTRUCTEURS HIERARCHIE       */
/* ===================================== */

.instructor-info{
  padding:18px 18px 20px !important;
  background:linear-gradient(180deg, rgba(8,12,18,.12) 0%, rgba(5,8,13,.82) 42%, rgba(4,7,12,.96) 100%) !important;
}

.instructor-name{
  font-size:1.9rem !important;
  line-height:1.05 !important;
  font-weight:800 !important;
  color:#f5f7fb !important;
  margin:0 0 8px !important;
  text-shadow:0 2px 12px rgba(0,0,0,.28) !important;
}

.instructor-role{
  display:inline-block !important;
  margin:0 0 10px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  font-size:.88rem !important;
  font-weight:700 !important;
  color:#ffd9b8 !important;
  background:linear-gradient(180deg, rgba(255,90,40,.20), rgba(255,90,40,.08)) !important;
  border:1px solid rgba(255,120,60,.18) !important;
}

.instructor-rank{
  margin:0 0 8px !important;
  color:#e6edf6 !important;
  font-size:.98rem !important;
  font-weight:700 !important;
  line-height:1.45 !important;
}

.instructor-hint{
  margin:8px 0 0 !important;
  color:rgba(230,237,246,.68) !important;
  font-size:.82rem !important;
  font-weight:600 !important;
  letter-spacing:.02em !important;
}

.instructor-back{
  padding:22px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  background:
    linear-gradient(180deg, rgba(13,17,24,.88) 0%, rgba(7,10,15,.96) 100%),
    radial-gradient(circle at 50% 0%, rgba(255,94,40,.10), transparent 42%) !important;
}

.instructor-back .instructor-name{
  font-size:1.55rem !important;
  margin:0 0 8px !important;
}

.instructor-rank-back{
  margin:0 0 10px !important;
  color:#ffd8b0 !important;
  font-size:.92rem !important;
  font-weight:700 !important;
}

.instructor-text{
  margin:0 !important;
  color:#dfe6ef !important;
  font-size:.95rem !important;
  line-height:1.55 !important;
  max-width:32ch !important;
}

@media (max-width:768px){
  .instructor-name{
    font-size:1.55rem !important;
  }

  .instructor-role{
    font-size:.82rem !important;
    padding:4px 9px !important;
  }

  .instructor-rank{
    font-size:.9rem !important;
  }

  .instructor-hint{
    font-size:.78rem !important;
  }

  .instructor-back .instructor-name{
    font-size:1.3rem !important;
  }

  .instructor-text{
    font-size:.9rem !important;
    line-height:1.5 !important;
  }
}

/* ===================================== */
/* SILAT — INSTRUCTEURS CLEAN            */
/* ===================================== */

.instructor-info{
  padding:18px 18px 20px !important;
  background:linear-gradient(180deg, rgba(8,12,18,.10) 0%, rgba(5,8,13,.78) 42%, rgba(4,7,12,.94) 100%) !important;
}

.instructor-name{
  font-size:1.25rem !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  color:#f5f7fb !important;
  margin:0 0 6px !important;
  text-shadow:none !important;
}

.instructor-role{
  display:block !important;
  margin:0 0 8px !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  border-radius:0 !important;
  font-size:.92rem !important;
  font-weight:600 !important;
  color:#cfd7e2 !important;
  box-shadow:none !important;
}

.instructor-rank{
  margin:0 !important;
  color:#f0d7b2 !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  line-height:1.4 !important;
}

.instructor-hint{
  display:none !important;
}

.instructor-back{
  padding:18px !important;
  background:
    linear-gradient(180deg, rgba(10,13,19,.88) 0%, rgba(6,9,14,.96) 100%) !important;
}

.instructor-back .instructor-name{
  font-size:1.2rem !important;
  margin:0 0 6px !important;
}

.instructor-rank-back{
  margin:0 0 8px !important;
  color:#f0d7b2 !important;
  font-size:.88rem !important;
  font-weight:700 !important;
}

.instructor-text{
  margin:0 !important;
  color:#d8e0ea !important;
  font-size:.88rem !important;
  line-height:1.45 !important;
  max-width:none !important;
}

@media (max-width:768px){
  .instructor-name{
    font-size:1.05rem !important;
  }

  .instructor-role{
    font-size:.82rem !important;
  }

  .instructor-rank{
    font-size:.8rem !important;
  }

  .instructor-back .instructor-name{
    font-size:1.02rem !important;
  }

  .instructor-text{
    font-size:.8rem !important;
    line-height:1.4 !important;
  }
}

/* ===================================== */
/* SILAT — FLIP INSTRUCTEURS PROPRE      */
/* ===================================== */

.instructor-card{
  perspective:1200px !important;
  min-height:420px !important;
}

.instructor-flip{
  position:relative !important;
  width:100% !important;
  min-height:420px !important;
  transform-style:preserve-3d !important;
  transition:transform .55s ease !important;
}

.instructor-card.is-flipped .instructor-flip{
  transform:rotateY(180deg) !important;
}

.instructor-front,
.instructor-back{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  border-radius:inherit !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  overflow:hidden !important;
}

.instructor-front{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-end !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(8,12,18,.14) 26%, rgba(4,7,12,.92) 100%) !important;
}

.instructor-back{
  transform:rotateY(180deg) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding:28px 22px !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,88,38,.10), transparent 30%),
    linear-gradient(180deg, rgba(10,14,20,.96) 0%, rgba(5,8,13,.98) 100%) !important;
}

.instructor-photo{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:2rem !important;
  color:#e8dcc8 !important;
  background:
    linear-gradient(180deg, rgba(205,214,224,.85) 0%, rgba(72,84,98,.56) 34%, rgba(12,18,26,.96) 100%) !important;
}

.instructor-info{
  position:relative !important;
  z-index:2 !important;
  padding:20px !important;
  background:linear-gradient(180deg, transparent 0%, rgba(4,7,12,.28) 12%, rgba(4,7,12,.92) 100%) !important;
}

.instructor-front .instructor-name{
  font-size:1.1rem !important;
  line-height:1.08 !important;
  font-weight:800 !important;
  margin:0 0 6px !important;
  color:#f5f7fb !important;
  text-align:left !important;
}

.instructor-front .instructor-role{
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  color:#d4dbe5 !important;
  font-size:.92rem !important;
  font-weight:600 !important;
  text-align:left !important;
}

.instructor-front .instructor-rank,
.instructor-front .instructor-hint{
  display:none !important;
}

.instructor-back .instructor-name{
  font-size:1.45rem !important;
  line-height:1.12 !important;
  margin:0 0 10px !important;
  color:#ffffff !important;
  text-align:center !important;
}

.instructor-back .instructor-role{
  margin:0 0 10px !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  box-shadow:none !important;
  color:#ffd3ad !important;
  font-size:1rem !important;
  font-weight:700 !important;
  text-align:center !important;
}

.instructor-back .instructor-rank{
  margin:0 0 14px !important;
  color:#f3dfbf !important;
  font-size:.96rem !important;
  font-weight:700 !important;
  text-align:center !important;
}

.instructor-back .instructor-text{
  margin:0 auto !important;
  max-width:30ch !important;
  color:#e4ebf3 !important;
  font-size:.98rem !important;
  line-height:1.6 !important;
  text-align:center !important;
}

@media (max-width:768px){
  .instructor-card,
  .instructor-flip{
    min-height:360px !important;
  }

  .instructor-front .instructor-name{
    font-size:1rem !important;
  }

  .instructor-front .instructor-role{
    font-size:.84rem !important;
  }

  .instructor-back{
    padding:22px 18px !important;
  }

  .instructor-back .instructor-name{
    font-size:1.2rem !important;
  }

  .instructor-back .instructor-role{
    font-size:.9rem !important;
  }

  .instructor-back .instructor-rank{
    font-size:.86rem !important;
  }

  .instructor-back .instructor-text{
    font-size:.9rem !important;
    line-height:1.5 !important;
  }
}

/* ===================================== */
/* SILAT — STYLE NOBLE INSTRUCTEURS      */
/* ===================================== */

.instructor-front .instructor-name,
.instructor-back .instructor-name{
  font-family:'Cinzel', serif !important;
  letter-spacing:.02em !important;
  color:#f4efe8 !important;
}

.instructor-front .instructor-name{
  font-size:1.15rem !important;
  margin:0 0 8px !important;
}

.instructor-front .instructor-role{
  color:#d7dde6 !important;
  font-size:.88rem !important;
  font-weight:600 !important;
  margin:0 0 8px !important;
}

.instructor-front .instructor-rank{
  display:block !important;
  color:#d8bb85 !important;
  font-size:.84rem !important;
  font-weight:700 !important;
  line-height:1.4 !important;
}

.instructor-back .instructor-name{
  font-size:1.35rem !important;
  margin:0 0 10px !important;
}

.instructor-back .instructor-role{
  color:#e7d7bf !important;
  font-size:.92rem !important;
  font-weight:600 !important;
  margin:0 0 10px !important;
}

.instructor-back .instructor-rank{
  color:#d8bb85 !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  line-height:1.45 !important;
  margin:0 0 14px !important;
}

.instructor-back .instructor-text{
  color:#e7edf5 !important;
  font-size:.96rem !important;
  line-height:1.65 !important;
  max-width:28ch !important;
}

@media (max-width:768px){

  .instructor-front .instructor-name{
    font-size:1.02rem !important;
  }

  .instructor-front .instructor-role{
    font-size:.82rem !important;
  }

  .instructor-front .instructor-rank{
    font-size:.78rem !important;
  }

  .instructor-back .instructor-name{
    font-size:1.18rem !important;
  }

  .instructor-back .instructor-role{
    font-size:.86rem !important;
  }

  .instructor-back .instructor-rank{
    font-size:.82rem !important;
  }

  .instructor-back .instructor-text{
    font-size:.88rem !important;
    line-height:1.55 !important;
  }

}


/* ===================================== */
/* SILAT — INSTRUCTEURS FINAL TYPO       */
/* ===================================== */

.instructor-front .instructor-name,
.instructor-back .instructor-name{
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight:700 !important;
  letter-spacing:.01em !important;
  color:#f5efe6 !important;
  text-shadow:0 1px 10px rgba(0,0,0,.18) !important;
}

.instructor-front .instructor-name{
  font-size:1.22rem !important;
  line-height:1.12 !important;
  margin:0 0 8px !important;
}

.instructor-front .instructor-role{
  margin:0 0 8px !important;
  color:#d9dee6 !important;
  font-size:.9rem !important;
  font-weight:600 !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

.instructor-front .instructor-rank{
  display:block !important;
  margin:0 !important;
  color:#e1c38d !important;
  font-size:.86rem !important;
  font-weight:700 !important;
  line-height:1.45 !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

.instructor-back{
  justify-content:center !important;
  align-items:center !important;
  text-align:center !important;
  padding:26px 20px !important;
}

.instructor-back .instructor-name{
  font-size:1.55rem !important;
  line-height:1.14 !important;
  margin:0 0 10px !important;
}

.instructor-back .instructor-role{
  margin:0 0 10px !important;
  color:#e7dcc8 !important;
  font-size:.95rem !important;
  font-weight:600 !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

.instructor-back .instructor-rank{
  margin:0 0 14px !important;
  color:#e1c38d !important;
  font-size:.92rem !important;
  font-weight:700 !important;
  line-height:1.45 !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

.instructor-back .instructor-text{
  margin:0 auto !important;
  max-width:30ch !important;
  color:#edf2f8 !important;
  font-size:1rem !important;
  line-height:1.65 !important;
  text-align:center !important;
  font-family:Arial, Helvetica, sans-serif !important;
}

@media (max-width:768px){

  .instructor-front .instructor-name{
    font-size:1.1rem !important;
  }

  .instructor-front .instructor-role{
    font-size:.84rem !important;
  }

  .instructor-front .instructor-rank{
    font-size:.8rem !important;
  }

  .instructor-back .instructor-name{
    font-size:1.3rem !important;
  }

  .instructor-back .instructor-role{
    font-size:.88rem !important;
  }

  .instructor-back .instructor-rank{
    font-size:.84rem !important;
  }

  .instructor-back .instructor-text{
    font-size:.92rem !important;
    line-height:1.55 !important;
  }

}