/* ==========================================================================
   Styles complémentaires pour les sous-pages
   Aligne les pages secondaires sur la direction artistique (couleurs, typo)
   ========================================================================== */

/* ---------- Héros compacts ---------- */
.hero.hero--small{
  --hero-accent: var(--gold-500);
  min-height: 320px;
  padding: clamp(130px, 22vh, 180px) 1rem 90px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  text-align:center;
  position:relative;
  background:
    radial-gradient(72% 72% at 50% 0%, color-mix(in oklab, var(--hero-accent) 18%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(11,11,11,0.96), rgba(18,18,18,0.98));
  overflow:hidden;
}
/* Photo de fond floutée (optionnelle) */
.hero .hero-photo{
  position:absolute;
  inset:0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: blur(2.5px) saturate(1.05);
  transform: scale(1.06);
  z-index:0;
}
.hero.hero--small .hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.85));
  opacity:0.9;
}
.hero.hero--small .hero-content{
  position:relative;
  z-index:1;
  max-width:min(780px, 94vw);
  display:grid;
  gap:12px;
}
.hero.hero--small .eyebrow{
  letter-spacing:.08em;
  text-transform:uppercase;
  color: color-mix(in oklab, var(--hero-accent) 72%, #ffffff);
  font-size:12px;
  font-weight:800;
  opacity:0.92;
}
.hero.hero--small h1{
  font-size: clamp(32px, 4vw, 52px);
  line-height:1.04;
}
.hero.hero--small p{
  color:var(--text-dim);
  font-size: clamp(16px, 2vw, 20px);
  margin:0 auto;
  max-width: 60ch;
}
.hero.hero--small .hero-actions{
  margin-top:14px;
}

.hero--about{ --hero-accent: var(--green-400); }
.hero--cases{ --hero-accent: var(--gold-400); }
.hero--expertises{ --hero-accent: color-mix(in oklab, var(--gold-500) 40%, var(--green-400) 60%); }
.hero--legal{ --hero-accent: var(--gold-500); }
.hero--resources{ --hero-accent: color-mix(in oklab, var(--gold-400) 45%, #58c56a 55%); }

/* ---------- Fil d'Ariane ---------- */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:13px;
  color:var(--text-weak);
  justify-content:center;
}
.breadcrumbs a{
  color:inherit;
  text-decoration:none;
  opacity:0.86;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible{
  opacity:1;
  text-decoration:underline;
}

/* ---------- Sections et conteneurs ---------- */
.page-main{
  background:
    radial-gradient(70% 70% at 90% 0%, rgba(184,134,10,0.08), transparent 60%),
    linear-gradient(180deg, var(--blue-900), var(--blue-800));
}
.page-section{
  padding: clamp(64px, 9vw, 110px) 0;
}
.page-section--light{
  background: var(--ivory);
  color:#0b0b0b;
}
.page-section--dark{
  background:
    radial-gradient(60% 70% at 16% 0%, rgba(184,134,10,0.08), transparent 70%),
    linear-gradient(180deg, var(--blue-900), var(--blue-800));
}
.page-container{
  width:min(1100px, 92%);
  margin:0 auto;
  display:grid;
  gap:30px;
}
.page-lede{
  text-align:center;
  max-width: 780px;
  margin:0 auto 14px;
  display:grid;
  gap:12px;
}
.page-lede h2{
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight:900;
  letter-spacing:.2px;
}
.page-lede p{
  color:var(--text-dim);
  margin:0 auto;
  max-width: 70ch;
}
.page-lede.page-lede--left{
  text-align:left;
  margin-left:0;
}

/* ---------- Grilles ----------- */
.page-metrics{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:18px;
}
.page-metric{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:22px 18px;
  text-align:center;
  box-shadow:0 20px 48px rgba(0,0,0,0.28);
  display:grid;
  gap:6px;
}
.page-metric__num{
  font-size: clamp(26px, 4vw, 38px);
  font-weight:900;
  color: var(--gold-300);
}
.page-metric__label{
  color:var(--text-weak);
  font-weight:600;
  line-height:1.5;
}
.page-section--light .page-metric{
  background:#fff;
  border:1px solid rgba(184,134,10,0.18);
  box-shadow:0 16px 36px rgba(184,134,10,0.16);
}
.page-section--light .page-metric__label{
  color:#334155;
}

.cards-grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cards-grid.cards-grid--stretch{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cards-grid.cards-grid--columns-2{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.card-link{
  display:flex;
  flex-direction:column;
  gap:12px;
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:24px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 18px 44px rgba(0,0,0,0.32);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-link:hover,
.card-link:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(0,0,0,0.48);
  border-color:rgba(184,134,10,0.45);
}
.card-link__label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-weak);
  font-weight:800;
}
.card-link__title{
  font-size:20px;
  font-weight:800;
  line-height:1.3;
}
.card-link__desc{
  color:var(--text-dim);
  line-height:1.65;
  flex-grow:1;
}
.card-link__cta{
  font-weight:700;
  color: var(--gold-300);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.card-link__cta::after{
  content:"→";
  transform:translateY(-1px);
}

.page-section--light .card-link{
  background:#ffffff;
  border:1px solid rgba(184,134,10,0.18);
  color:#0b0b0b;
  box-shadow:0 18px 44px rgba(184,134,10,0.18);
}
.page-section--light .card-link__label{
  color:#8c7a3c;
}
.page-section--light .card-link__desc{
  color:#334155;
}
.page-section--light .card-link__cta{
  color: var(--gold-500);
}

/* ---------- Listes "tag" ---------- */
.page-tags{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}
.page-tag{
  font-size:13px;
  font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
  color:var(--text-dim);
}

/* ---------- Cartes cas pour la liste ---------- */
.cases-v2__grid{
  display:grid;
  gap:24px;
  width:min(1100px, 94%);
  margin:0 auto;
}
.case-card.case-card--list{
  grid-template-rows: 220px auto;
}
.case-card.case-card--list .case-body{
  padding:24px;
  gap:14px;
}
.case-card.case-card--list .case-title{
  font-size:22px;
}
.case-card.case-card--list .case-tags{
  gap:10px;
}
.case-card.case-card--list .case-tags li{
  border-color:rgba(184,134,10,0.38);
  background:rgba(184,134,10,0.12);
}
.case-card.case-card--list .case-cta{
  display:flex;
  align-items:center;
  gap:6px;
}
.case-card.case-card--list .case-cta::after{
  content:"→";
  position:relative;
  transform:none;
}

/* ---------- Articles & ressources ---------- */
.articles-hero{
  padding: clamp(130px, 22vh, 170px) 0 40px;
  text-align:center;
  display:grid;
  gap:12px;
}
.articles-hero h1{
  font-size: clamp(32px, 4vw, 48px);
  font-weight:900;
}
.articles-hero p{
  color:var(--text-dim);
  max-width: 60ch;
  margin:0 auto;
}
.articles-grid{
  display:grid;
  gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  padding-bottom:80px;
}
.article-card{
  display:grid;
  gap:10px;
  padding:24px;
  border-radius:18px;
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
}
.article-card h3{
  font-size:18px;
  font-weight:800;
}
.article-card p{
  color:var(--text-dim);
  line-height:1.55;
}
.article-card .hero-btn{
  align-self:flex-start;
}
.article-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 60px rgba(0,0,0,0.42);
  border-color:rgba(184,134,10,0.35);
}

/* ---------- Motion & Micro-interactions ---------- */
:root{
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pop: cubic-bezier(0.2, 0.8, 0.25, 1);
}

@keyframes floaty{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-12px,0); }
  100%{ transform:translate3d(0,0,0); }
}

@keyframes shimmer{
  0%{ opacity:0; transform:translateX(-20px); }
  20%,80%{ opacity:0.75; transform:translateX(0); }
  100%{ opacity:0; transform:translateX(20px); }
}

[data-animate]{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .68s var(--ease-smooth), transform .68s var(--ease-smooth), filter .68s var(--ease-smooth);
  transition-delay:var(--reveal-delay, 0s);
  filter:blur(4px);
}
[data-animate="fade-up"]{ transform:translateY(36px); }
[data-animate="fade-down"]{ transform:translateY(-36px); }
[data-animate="fade-left"]{ transform:translateX(-36px); }
[data-animate="fade-right"]{ transform:translateX(36px); }
[data-animate="scale-in"]{ transform:scale(.92); }
[data-animate].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}
[data-animate="scale-in"].is-visible{
  transform:scale(1);
}

.reveal-group>[data-animate]{
  --reveal-delay: calc(var(--reveal-index, 0) * 0.08s);
}

/* ---------- Pills & badges ---------- */
.eyebrow-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#755516;
  background:rgba(184,134,10,0.12);
  border:1px solid rgba(184,134,10,0.3);
}
.eyebrow-pill--emerald{
  color:#1f8b44;
  background:rgba(63,168,77,0.14);
  border-color:rgba(63,168,77,0.3);
}
.eyebrow-pill--onyx{
  color:var(--mint-100);
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.18);
}

.chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  color:color-mix(in srgb, var(--mint-100) 78%, rgba(255,255,255,0.58));
  text-decoration:none;
}
.page-section--light .chip{
  background:rgba(184,134,10,0.1);
  border-color:rgba(184,134,10,0.22);
  color:#5e420d;
}

/* ---------- Glow surfaces ---------- */
.glow-grid{
  display:grid;
  gap:clamp(24px, 4vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.glow-grid--wide{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.glow-grid--split{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items:stretch;
}

.glow-card{
  position:relative;
  padding:clamp(28px, 4vw, 36px);
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(150deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  box-shadow:0 24px 60px rgba(0,0,0,0.32);
  display:grid;
  gap:18px;
  overflow:hidden;
  isolation:isolate;
}
.glow-card::before{
  content:"";
  position:absolute;
  inset:auto -30% 0;
  height:55%;
  background:radial-gradient(60% 60% at 50% 50%, rgba(184,134,10,0.22), transparent 75%);
  opacity:0.8;
  filter:blur(40px);
  transform:translate3d(0,40px,0);
  pointer-events:none;
}
.glow-card::after{
  content:"";
  position:absolute;
  inset:-40% -40% 50% 50%;
  background:radial-gradient(50% 50% at 0% 0%, rgba(255,255,255,0.12), transparent 70%);
  opacity:0.55;
  pointer-events:none;
}
.glow-card[data-tone="gold"]{
  border-color:rgba(184,134,10,0.35);
  background:linear-gradient(150deg, rgba(184,134,10,0.16), rgba(10,10,10,0.12));
}
.glow-card[data-tone="emerald"]{
  border-color:rgba(63,168,77,0.38);
  background:linear-gradient(150deg, rgba(63,168,77,0.18), rgba(12,18,16,0.12));
}
.glow-card[data-tone="onyx"]{
  border-color:rgba(255,255,255,0.1);
  background:linear-gradient(150deg, rgba(24,24,24,0.92), rgba(12,12,12,0.88));
}
.page-section--light .glow-card{
  background:linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
  border:1px solid rgba(184,134,10,0.18);
  box-shadow:0 24px 60px rgba(184,134,10,0.18);
}
.page-section--light .glow-card::before{
  background:radial-gradient(60% 60% at 50% 50%, rgba(184,134,10,0.12), transparent 75%);
  opacity:1;
}
.page-section--light .glow-card::after{
  background:radial-gradient(60% 60% at 0% 0%, rgba(255,255,255,0.6), transparent 75%);
  opacity:0.65;
}

.glow-card__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.glow-card__heading{
  display:grid;
  gap:8px;
}
.glow-card__title{
  font-size:clamp(20px, 3vw, 28px);
  line-height:1.2;
  font-weight:900;
}
.glow-card__desc{
  color:var(--text-dim);
  line-height:1.6;
}
.page-section--light .glow-card__desc{
  color:#334155;
}

.icon-bubble{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:20px;
  font-size:32px;
  background:linear-gradient(135deg, rgba(184,134,10,0.85), rgba(255,215,0,0.65));
  box-shadow:0 18px 40px rgba(184,134,10,0.28);
  animation:floaty 6s ease-in-out infinite;
}
.icon-bubble--round{
  border-radius:999px;
}
.icon-bubble--emerald{
  background:linear-gradient(135deg, rgba(63,168,77,0.85), rgba(88,197,106,0.65));
  box-shadow:0 18px 40px rgba(63,168,77,0.28);
}
.icon-bubble--onyx{
  background:linear-gradient(135deg, rgba(11,11,11,0.9), rgba(46,46,46,0.65));
  box-shadow:0 18px 40px rgba(0,0,0,0.45);
}

.feature-list{
  display:grid;
  gap:10px;
  padding:0;
  margin:0;
  list-style:none;
}
.feature-list li{
  position:relative;
  padding-left:22px;
  font-weight:600;
  color:var(--text-dim);
  line-height:1.6;
}
.feature-list li::before{
  content:"";
  position:absolute;
  top:8px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold-300);
  box-shadow:0 0 0 4px rgba(184,134,10,0.18);
}
.page-section--light .feature-list li{
  color:#334155;
}
.page-section--light .feature-list li::before{
  background:var(--gold-500);
  box-shadow:0 0 0 4px rgba(184,134,10,0.18);
}

/* ---------- Layout helpers ---------- */
.split-layout{
  display:grid;
  gap:clamp(30px, 5vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items:center;
}
.stack{
  display:grid;
  gap:clamp(16px, 2.4vw, 26px);
}
.stack--tight{
  gap:12px;
}
.balanced-columns{
  columns:2;
  column-gap:26px;
}
@media(max-width:720px){
  .balanced-columns{
    columns:1;
  }
}

/* ---------- Bento blocks ---------- */
.bento-grid{
  display:grid;
  gap:clamp(20px, 3vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bento-grid__item{
  position:relative;
  border-radius:26px;
  padding:clamp(24px, 3.5vw, 32px);
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.04);
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,0.32);
}
.bento-grid__item::before{
  content:"";
  position:absolute;
  inset:-20% auto auto -20%;
  width:220px;
  height:220px;
  background:radial-gradient(circle, rgba(184,134,10,0.16), transparent 70%);
  opacity:0.7;
}
.bento-grid__item[data-tone="emerald"]::before{
  background:radial-gradient(circle, rgba(63,168,77,0.18), transparent 70%);
}
.bento-grid__item[data-tone="onyx"]{
  border-color:rgba(255,255,255,0.08);
  background:linear-gradient(160deg, rgba(16,16,16,0.92), rgba(12,12,12,0.88));
}
.page-section--light .bento-grid__item{
  background:linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.78));
  border-color:rgba(184,134,10,0.2);
  box-shadow:0 18px 40px rgba(184,134,10,0.18);
}

.bento-grid__title{
  font-size:clamp(20px, 2.8vw, 26px);
  font-weight:800;
  margin-bottom:10px;
}
.bento-grid__body{
  color:var(--text-dim);
  line-height:1.6;
}
.page-section--light .bento-grid__body{
  color:#2f3d4f;
}

/* ---------- Timeline ---------- */
.timeline{
  position:relative;
  display:grid;
  gap:clamp(20px, 3vw, 28px);
}
.timeline::before{
  content:"";
  position:absolute;
  top:0;
  left:22px;
  width:2px;
  height:100%;
  background:linear-gradient(180deg, rgba(184,134,10,0), rgba(184,134,10,0.6), rgba(184,134,10,0));
}
.timeline-item{
  position:relative;
  padding-left:60px;
}
.timeline-item::before{
  content:attr(data-step);
  position:absolute;
  left:0;
  top:0;
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:14px;
  color:#0b0b0b;
  background:linear-gradient(135deg, #FFD700, #DAA520);
  box-shadow:0 12px 24px rgba(184,134,10,0.28);
}
.timeline-item__title{
  font-size:clamp(20px, 2.8vw, 26px);
  font-weight:800;
  margin-bottom:8px;
}
.timeline-item__body{
  color:var(--text-dim);
  line-height:1.65;
}
.page-section--light .timeline-item__body{
  color:#2f3d4f;
}

/* ---------- Spotlight CTA ---------- */
.spotlight-cta{
  position:relative;
  padding:clamp(52px, 6vw, 70px);
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(184,134,10,0.28);
  background:linear-gradient(135deg, rgba(184,134,10,0.12), rgba(218,165,32,0.08));
  box-shadow:0 24px 60px rgba(184,134,10,0.2);
  text-align:center;
}
.spotlight-cta::before,
.spotlight-cta::after{
  content:"";
  position:absolute;
  inset:auto;
  width:260px;
  height:260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(184,134,10,0.18), transparent 70%);
  filter:blur(20px);
}
.spotlight-cta::before{
  top:-120px;
  right:-120px;
}
.spotlight-cta::after{
  bottom:-140px;
  left:-140px;
}
.spotlight-cta h3{
  font-size:clamp(28px, 3.6vw, 40px);
  line-height:1.2;
  font-weight:900;
  color:#0b0b0b;
}
.spotlight-cta p{
  color:#334155;
  max-width:60ch;
  margin:12px auto 24px;
  line-height:1.6;
}
.spotlight-cta .hero-btn{
  margin-top:12px;
}


/* ---------- Royal layout system ---------- */
.royal-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(60% 90% at 50% 18%, rgba(184,134,10,0.18), transparent 70%),
    linear-gradient(180deg, rgba(7,7,7,0.88), rgba(6,6,6,0.96));
}
.royal-hero .hero-overlay{
  background:linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.88));
  opacity:1;
}
.royal-hero .hero-content{
  max-width:min(950px, 95vw);
  display:grid;
  gap:16px;
  text-align:center;
  align-items:center;
  justify-items:center;
  padding-top:30px;
}
.royal-hero h1{
  font-size:clamp(34px, 5vw, 64px);
  line-height:1.05;
}
.royal-hero p{
  font-size:clamp(18px, 2.2vw, 22px);
  max-width:70ch;
  color:color-mix(in srgb, var(--mint-100) 88%, rgba(255,255,255,0.75));
}

.royal-section{
  padding: clamp(110px, 12vw, 160px) 0;
  position:relative;
}
.royal-section--light{
  background:
    radial-gradient(70% 80% at 10% 15%, rgba(184,134,10,0.08), transparent 70%),
    linear-gradient(180deg, #fdfaf0, #f7f3e5);
  color:#0b0b0b;
}
.royal-section--dark{
  background:
    radial-gradient(70% 80% at 86% 0%, rgba(184,134,10,0.16), transparent 70%),
    linear-gradient(180deg, var(--blue-900), #080808);
  color:var(--mint-100);
}
.royal-section--ink{
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(12,60,38,0.2), transparent 70%),
    linear-gradient(180deg, #0d1418, #06090b);
  color:var(--mint-100);
}

.royal-wrap{
  width:min(1180px, 92%);
  margin:0 auto;
  display:grid;
  gap:clamp(28px, 4vw, 44px);
}

.royal-heading{
  display:grid;
  gap:14px;
  text-align:center;
  justify-items:center;
}
.royal-heading--left{
  text-align:left;
  justify-items:start;
}
.royal-heading h2{
  font-size:clamp(30px, 4.6vw, 58px);
  line-height:1.08;
  font-weight:900;
}
.royal-heading p{
  max-width:72ch;
  line-height:1.65;
  color:var(--text-dim);
}
.royal-section--dark .royal-heading p,
.royal-section--ink .royal-heading p{
  color:color-mix(in srgb, var(--mint-100) 82%, rgba(255,255,255,0.68));
}

.royal-grid{
  display:grid;
  gap:clamp(24px, 3.6vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.royal-grid--split{
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.royal-grid--wide{
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}

.royal-card{
  position:relative;
  display:grid;
  gap:clamp(16px, 2.4vw, 24px);
  padding:clamp(28px, 3.8vw, 40px);
  border-radius:28px;
  border:1px solid rgba(184,134,10,0.22);
  background:linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.75));
  box-shadow:0 26px 60px rgba(184,134,10,0.16);
  overflow:hidden;
}
.royal-card::before{
  content:"";
  position:absolute;
  inset:-40% -30% 50% 20%;
  background:radial-gradient(60% 60% at 0% 0%, rgba(184,134,10,0.2), transparent 72%);
  opacity:0.7;
  pointer-events:none;
}
.royal-card[data-tone="emerald"]{
  border-color:rgba(63,168,77,0.28);
  background:linear-gradient(150deg, rgba(255,255,255,0.92), rgba(236,255,244,0.78));
  box-shadow:0 24px 60px rgba(63,168,77,0.16);
}
.royal-section--dark .royal-card,
.royal-section--ink .royal-card{
  background:linear-gradient(150deg, rgba(12,12,12,0.92), rgba(18,18,18,0.88));
  border-color:rgba(255,255,255,0.1);
  box-shadow:0 28px 60px rgba(0,0,0,0.45);
  color:var(--mint-100);
}
.royal-section--dark .royal-card::before,
.royal-section--ink .royal-card::before{
  background:radial-gradient(60% 60% at 0% 0%, rgba(184,134,10,0.3), transparent 72%);
  opacity:0.6;
}
.royal-card h3{
  font-size:clamp(22px, 3.2vw, 30px);
  font-weight:900;
  line-height:1.18;
}
.royal-card p{
  line-height:1.65;
  color:#334155;
}
.royal-section--dark .royal-card p,
.royal-section--ink .royal-card p{
  color:color-mix(in srgb, var(--mint-100) 88%, rgba(255,255,255,0.62));
}

.royal-list{
  display:grid;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0;
}
.royal-list li{
  position:relative;
  padding-left:26px;
  font-weight:600;
  line-height:1.6;
  color:#2f3d4f;
}
.royal-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--gold-300);
  box-shadow:0 0 0 4px rgba(184,134,10,0.18);
}
.royal-section--dark .royal-list li,
.royal-section--ink .royal-list li{
  color:color-mix(in srgb, var(--mint-100) 80%, rgba(255,255,255,0.62));
}
.royal-section--dark .royal-list li::before,
.royal-section--ink .royal-list li::before{
  background:var(--gold-400);
  box-shadow:0 0 0 4px rgba(184,134,10,0.22);
}

.royal-metrics{
  display:grid;
  gap:clamp(18px, 3vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.royal-metric{
  padding:clamp(24px, 3vw, 32px);
  border-radius:24px;
  border:1px solid rgba(184,134,10,0.24);
  background:linear-gradient(150deg, rgba(255,255,255,0.9), rgba(255,255,255,0.72));
  box-shadow:0 24px 50px rgba(184,134,10,0.18);
  text-align:center;
  display:grid;
  gap:8px;
}
.royal-metric strong{
  font-size:clamp(26px, 4vw, 40px);
  font-weight:900;
  color:#6f4f11;
}
.royal-metric span{
  font-weight:600;
  color:#2f3d4f;
  line-height:1.45;
}
.royal-section--dark .royal-metric,
.royal-section--ink .royal-metric{
  background:linear-gradient(150deg, rgba(16,16,16,0.92), rgba(10,10,10,0.88));
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 28px 60px rgba(0,0,0,0.45);
}
.royal-section--dark .royal-metric strong,
.royal-section--ink .royal-metric strong{
  color:#dabf76;
}
.royal-section--dark .royal-metric span,
.royal-section--ink .royal-metric span{
  color:color-mix(in srgb, var(--mint-100) 82%, rgba(255,255,255,0.64));
}

.royal-cta{
  display:grid;
  gap:16px;
  text-align:center;
  justify-items:center;
}
.royal-cta p{
  max-width:70ch;
  line-height:1.6;
}
.royal-section--dark .royal-cta p,
.royal-section--ink .royal-cta p{
  color:color-mix(in srgb, var(--mint-100) 84%, rgba(255,255,255,0.7));
}

.royal-divider{
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0));
  margin:20px 0;
}
.royal-section--light .royal-divider{
  background:linear-gradient(90deg, rgba(10,10,10,0), rgba(10,10,10,0.2), rgba(10,10,10,0));
}

@media (max-width: 720px){
  .royal-hero{
    border-radius:0;
  }
  .royal-wrap{
    gap:24px;
  }
  .royal-card{
    padding:24px;
  }
}

/* ---------- Luxe variations ---------- */
.luxe-section{
  padding:clamp(90px, 10vw, 140px) 0;
}
.luxe-section--cream{
  background:linear-gradient(180deg, #fefaf2, #f6f1e6);
  color:#101010;
}
/* Contrast fixes on light/cream sections */
.luxe-section--cream p,
.luxe-section--cream .royal-heading p,
.luxe-section--cream .luxe-columns p,
.luxe-section--cream .luxe-timeline__body,
.luxe-section--cream .royal-card p,
.luxe-section--cream .royal-metric span,
.luxe-section--cream .royal-list li,
.royal-section--light p,
.royal-section--light .royal-heading p,
.royal-section--light .royal-card p,
.royal-section--light .royal-metric span,
.royal-section--light .royal-list li{ 
  color:#2f3d4f; /* dark slate for readability */
}

.luxe-section--cream a,
.royal-section--light a{
  color:#6f4f11; /* stronger link color on light bg */
}
.luxe-section--cream a:hover,
.royal-section--light a:hover{ text-decoration: underline; }

/* Ensure pills have enough contrast on light background */
.luxe-section--cream .eyebrow-pill{ 
  color:#6f4f11; 
  background:rgba(184,134,10,0.18);
  border-color:rgba(184,134,10,0.32);
}
.luxe-section--noir{
  background:linear-gradient(180deg, #090909, #040404);
  color:var(--mint-100);
}
.luxe-section--emerald{
  background:linear-gradient(180deg, #071916, #05110f);
  color:var(--mint-100);
}

.luxe-wrap{
  width:min(1200px, 90%);
  margin:0 auto;
  display:grid;
  gap:clamp(30px, 4vw, 48px);
}

.luxe-split{
  display:grid;
  gap:clamp(26px, 4vw, 40px);
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1.2fr);
  align-items:center;
}
@media(max-width:960px){
  .luxe-split{
    grid-template-columns:1fr;
  }
}

.luxe-block{
  padding:clamp(28px, 4vw, 42px);
  border-radius:32px;
  background:linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.72));
  border:1px solid rgba(184,134,10,0.2);
  box-shadow:0 24px 60px rgba(184,134,10,0.14);
  color:#101010;
}
.luxe-block h3{
  font-size:clamp(24px, 3.4vw, 34px);
  font-weight:900;
  margin-bottom:12px;
}
.luxe-block p{
  line-height:1.65;
  color:#2f3d4f;
}

.luxe-block[data-tone="onyx"]{
  background:linear-gradient(150deg, rgba(12,12,12,0.92), rgba(18,18,18,0.88));
  border-color:rgba(255,255,255,0.1);
  color:var(--mint-100);
  box-shadow:0 28px 60px rgba(0,0,0,0.5);
}
.luxe-block[data-tone="onyx"] p{
  color:color-mix(in srgb, var(--mint-100) 86%, rgba(255,255,255,0.65));
}

.luxe-ribbon{
  display:grid;
  gap:clamp(16px, 3vw, 28px);
  padding:clamp(24px, 3.8vw, 36px);
  border-radius:26px;
  background:linear-gradient(135deg, rgba(184,134,10,0.14), rgba(255,215,0,0.12));
  border:1px solid rgba(184,134,10,0.32);
  box-shadow:0 22px 52px rgba(184,134,10,0.22);
}
.luxe-ribbon strong{
  font-size:clamp(28px, 4vw, 46px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#715114;
}

.luxe-columns{
  column-count:2;
  column-gap:clamp(24px, 4vw, 36px);
}
.luxe-columns p{
  margin-bottom:1.4em;
  line-height:1.7;
}
@media(max-width:960px){
  .luxe-columns{
    column-count:1;
  }
}

.luxe-timeline{
  display:grid;
  gap:clamp(24px, 3vw, 32px);
  border-left:1px solid rgba(184,134,10,0.32);
  padding-left:24px;
}
.luxe-timeline__item{
  position:relative;
  padding-left:10px;
}
.luxe-timeline__item::before{
  content:"";
  position:absolute;
  left:-33px;
  top:8px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold-400);
  box-shadow:0 0 0 6px rgba(184,134,10,0.15);
}
.luxe-timeline__title{
  font-weight:900;
  font-size:clamp(20px, 3vw, 28px);
  margin-bottom:10px;
}
.luxe-timeline__body{
  color:#2f3d4f;
  line-height:1.6;
}
.luxe-section--noir .luxe-timeline__body,
.luxe-section--emerald .luxe-timeline__body{
  color:color-mix(in srgb, var(--mint-100) 82%, rgba(255,255,255,0.65));
}

.luxe-highlight{
  display:grid;
  gap:10px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
}
.luxe-section--light .luxe-highlight{
  border-color:rgba(184,134,10,0.2);
  background:rgba(184,134,10,0.1);
}
.luxe-highlight span{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0.82;
  color:#705014;
}
.luxe-highlight h4{
  font-size:clamp(18px, 2.6vw, 24px);
  font-weight:800;
  color:#1c2738;
}
.luxe-section--dark .luxe-highlight,
.luxe-section--emerald .luxe-highlight{
  color:color-mix(in srgb, var(--mint-100) 82%, rgba(255,255,255,0.62));
}
.luxe-section--dark .luxe-highlight h4,
.luxe-section--emerald .luxe-highlight h4{
  color:color-mix(in srgb, var(--mint-100) 88%, rgba(255,255,255,0.7));
}
.luxe-section--dark .luxe-highlight span,
.luxe-section--emerald .luxe-highlight span{
  color:color-mix(in srgb, var(--mint-100) 80%, rgba(255,255,255,0.58));
}

.luxe-quote{
  font-size:clamp(20px, 3vw, 28px);
  line-height:1.6;
  font-weight:600;
  color:color-mix(in srgb, var(--mint-100) 85%, rgba(255,255,255,0.7));
}
.luxe-section--light .luxe-quote{
  color:#2b3647;
}

.luxe-media{
  position:relative;
  border-radius:32px;
  padding:clamp(28px, 4vw, 38px);
  background:linear-gradient(130deg, rgba(7,15,20,0.92), rgba(8,11,14,0.88));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 28px 60px rgba(0,0,0,0.45);
  color:var(--mint-100);
}
.luxe-media::before{
  content:"";
  position:absolute;
  inset:-20% -10% 50% 60%;
  background:radial-gradient(80% 80% at 0% 0%, rgba(63,168,77,0.3), transparent 70%);
  opacity:0.6;
}
.luxe-media h3{
  font-size:clamp(22px, 3vw, 30px);
  font-weight:900;
  margin-bottom:12px;
}
.luxe-media p{
  color:color-mix(in srgb, var(--mint-100) 84%, rgba(255,255,255,0.68));
  line-height:1.65;
}


/* ---------- Page À propos ---------- */
.about-body{
  padding: 48px 0 96px;
  display:grid;
  gap:40px;
}
.about-body section{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px;
  padding:28px;
  box-shadow:0 18px 40px rgba(0,0,0,0.28);
  display:grid;
  gap:16px;
}
.about-list{
  list-style:none;
  display:grid;
  gap:12px;
}
.about-list li{
  font-weight:600;
  color:var(--text-dim);
}
.about-highlights{
  display:grid;
  gap:12px;
  color:var(--text-dim);
}
.about-highlights p{
  line-height:1.65;
}

/* ---------- Pages légales ---------- */
body.legal{
  background:
    radial-gradient(60% 70% at 10% 0%, rgba(184,134,10,0.08), transparent 70%),
    linear-gradient(180deg, var(--blue-900), var(--blue-800));
}
.legal-hero{
  padding: clamp(130px, 22vh, 170px) 0 40px;
  text-align:center;
  display:grid;
  gap:16px;
}
.legal-hero h1{
  font-size: clamp(32px, 4vw, 46px);
  font-weight:900;
}
.legal-hero .breadcrumbs{
  justify-content:center;
}
body.legal main.container{
  padding:0 0 96px;
  display:grid;
  gap:32px;
}
body.legal main.container section{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:26px 24px;
  box-shadow:0 18px 44px rgba(0,0,0,0.28);
  display:grid;
  gap:14px;
}
body.legal h2{
  font-size:20px;
  font-weight:800;
}
body.legal dl{
  display:grid;
  grid-template-columns: minmax(160px, 240px) 1fr;
  gap:10px 20px;
  align-items:start;
}
body.legal dt{
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--text-weak);
}
body.legal dd{
  color:var(--text-dim);
}
@media (max-width:680px){
  body.legal dl{
    grid-template-columns: 1fr;
  }
}

/* ---------- Pages cas détaillées ---------- */
.case-hero{
  padding: clamp(130px, 22vh, 170px) 0 40px;
  text-align:center;
  display:grid;
  gap:16px;
}
.case-hero h1{
  font-size: clamp(32px, 4vw, 48px);
  font-weight:900;
}
.case-hero p{
  color:var(--text-dim);
  max-width:70ch;
  margin:0 auto;
  line-height:1.6;
}
.case-body{
  padding:0 0 96px;
  display:grid;
  gap:40px;
}
.case-body section{
  display:grid;
  gap:16px;
}
.case-body h2{
  font-size:24px;
  font-weight:800;
}
.case-body ul{
  list-style:disc;
  margin-left:20px;
  display:grid;
  gap:8px;
  color:var(--text-dim);
}
.case-body blockquote{
  padding:18px 24px;
  background: rgba(255,255,255,0.035);
  border-left:4px solid var(--gold-400);
  border-radius:10px;
  font-style:italic;
  color:var(--text-dim);
  box-shadow:0 14px 32px rgba(0,0,0,0.24);
}
.two-col{
  display:grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap:28px;
  align-items:start;
}
.two-col aside{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 44px rgba(0,0,0,0.28);
  display:grid;
  gap:16px;
}
.two-col aside h3{
  font-size:18px;
  font-weight:800;
}
.two-col .kpis{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
.two-col .kpi{
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:16px;
  text-align:center;
  font-weight:700;
  color:var(--text-dim);
  box-shadow:0 16px 36px rgba(0,0,0,0.24);
}
.two-col .kpi strong{
  display:block;
  font-size:20px;
  color:var(--gold-300);
}
@media (max-width:900px){
  .two-col{
    grid-template-columns:1fr;
  }
  .two-col .kpis{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width:520px){
  .two-col .kpis{
    grid-template-columns:1fr;
  }
}

/* ---------- Typo riche ---------- */
.rich{
  display:grid;
  gap:18px;
  color:var(--text-dim);
}
.rich h2{
  font-size:24px;
  font-weight:800;
  color:var(--mint-100);
}
.rich h3{
  font-size:20px;
  font-weight:800;
  color:var(--mint-100);
}
.rich p{
  line-height:1.7;
}
.rich ul,
.rich ol{
  margin-left:20px;
  display:grid;
  gap:10px;
}
.rich li{
  line-height:1.6;
}

/* ---------- Ressources : catégories ---------- */
.resource-categories{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.resource-category{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:20px;
  padding:24px;
  box-shadow:0 18px 44px rgba(0,0,0,0.32);
  display:grid;
  gap:10px;
}
.resource-category h3{
  font-size:20px;
  font-weight:800;
}
.resource-category p{
  color:var(--text-dim);
  line-height:1.55;
}
.resource-category a{
  justify-self:flex-start;
}

/* ---------- Utilitaires ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* ===== VARIATIONS DE DESIGN POUR PAGES ===== */

/* Layout Zig-Zag alternant */
.zigzag-section{
  padding: clamp(70px, 9vw, 120px) 0;
}
.zigzag-container{
  width: min(1180px, 92%);
  margin: 0 auto;
  display: grid;
  gap: clamp(60px, 8vw, 100px);
}
.zigzag-item{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 70px);
  align-items: center;
}
.zigzag-item:nth-child(even){
  direction: rtl;
}
.zigzag-item:nth-child(even) > *{
  direction: ltr;
}
.zigzag-visual{
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  color: #fff;
  box-shadow: 0 12px 40px rgba(184,134,10,0.25);
}
.zigzag-content h3{
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 16px;
  color: #fff;
}
.zigzag-content p{
  color: var(--text-dim);
  line-height: 1.7;
}

/* Bento Grid */
.bento-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: clamp(60px, 8vw, 100px) 0;
}
.bento-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
  transition: all 0.3s ease;
}
.bento-card:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.bento-card.span-2{
  grid-column: span 2;
}
.bento-card h3{
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--gold-300);
}

/* Split Layout moderne */
.modern-split{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: start;
  padding: clamp(60px, 8vw, 100px) 0;
}
.modern-split__content{
  position: sticky;
  top: 120px;
}
.modern-split__sidebar{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 32px;
}

/* Cards avec images en overlay */
.overlay-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  padding: clamp(60px, 8vw, 100px) 0;
}
.overlay-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(180deg, rgba(15,15,15,0.6), rgba(15,15,15,0.95)),
              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23111" width="100" height="100"/></svg>');
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  transition: transform 0.3s ease;
}
.overlay-card:hover{
  transform: scale(1.02);
}
.overlay-card h3{
  font-size: 24px;
  margin-bottom: 10px;
  color: #fff;
}
.overlay-card p{
  color: var(--text-dim);
  font-size: 14px;
}

/* Timeline horizontale */
.horizontal-timeline{
  padding: clamp(60px, 8vw, 100px) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.timeline-track{
  display: flex;
  gap: 40px;
  padding-bottom: 20px;
  min-width: max-content;
}
.timeline-step{
  min-width: 300px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
  position: relative;
}
.timeline-step::before{
  content: '';
  position: absolute;
  top: 50%;
  right: -40px;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(184,134,10,0.6), transparent);
}
.timeline-step:last-child::before{
  display: none;
}
.timeline-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 16px;
}

/* Stats Grid */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  padding: clamp(40px, 6vw, 70px) 0;
}
.stat-card{
  text-align: center;
  padding: 32px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: all 0.3s ease;
}
.stat-card:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(184,134,10,0.3);
}
.stat-number{
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold-400), var(--gold-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}
.stat-label{
  font-size: 14px;
  color: var(--text-dim);
  font-weight: 600;
}

@media (max-width:960px){
  .zigzag-item{
    grid-template-columns: 1fr;
  }
  .zigzag-item:nth-child(even){
    direction: ltr;
  }
  .modern-split{
    grid-template-columns: 1fr;
  }
  .modern-split__content{
    position: static;
  }
}

@media (max-width:720px){
  .hero.hero--small{
    padding: 120px 1rem 72px;
  }
  .page-section{
    padding:64px 0;
  }
  .page-container{
    gap:24px;
  }
  .card-link{
    padding:22px;
  }
  .bento-card.span-2{
    grid-column: span 1;
  }
}