/* ══════════════════════════════════════════════════════
   NIYYAH — FEUILLE DE STYLE PRINCIPALE
   Plateforme Matrimoniale Islamique
   ══════════════════════════════════════════════════════ */

/* ─── VARIABLES ─── */
:root {
  --gold:        #C9A84C;
  --gold-light:  #E2C97E;
  --gold-pale:   #F5EDD6;
  --night:       #0E1A12;
  --forest:      #1A2E1F;
  --sage:        #2D4A35;
  --cream:       #FAF6EE;
  --warm:        #F0E8D5;
  --text:        #2A1F0E;
  --text-muted:  #6B5B3E;
  --border-gold: rgba(201,168,76,.2);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:17px }
body {
  background: var(--cream);
  color: var(--text);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── AUGMENTATION GLOBALE DES PARAGRAPHES ─── */
p, li, label, .form-control, select, textarea, input {
  font-size: 1rem;
  line-height: 1.85;
}
.hero-sub         { font-size: 1.1rem  !important; line-height: 1.85 !important; }
.problem-intro    { font-size: 1.05rem !important; line-height: 1.9  !important; }
.solution-intro   { font-size: 1.05rem !important; line-height: 1.9  !important; }
.sol-card-text    { font-size: .98rem  !important; line-height: 1.8  !important; }
.garantie-text    { font-size: .98rem  !important; line-height: 1.8  !important; }
.step-text        { font-size: .95rem  !important; line-height: 1.75 !important; }
.aqui-intro       { font-size: 1.05rem !important; line-height: 1.9  !important; }
.aqui-list li     { font-size: 1.02rem !important; }
.aqui-closing     { font-size: 1.02rem !important; line-height: 1.85 !important; }
.confiance-text   { font-size: 1.1rem  !important; line-height: 1.9  !important; }
.cta-text         { font-size: 1.05rem !important; line-height: 1.9  !important; }
.faq-answer p     { font-size: 1rem    !important; line-height: 1.85 !important; }
.form-intro       { font-size: 1.05rem !important; line-height: 1.85 !important; }
.tarif-desc       { font-size: .98rem  !important; line-height: 1.8  !important; }
.tarifs-intro     { font-size: 1.05rem !important; line-height: 1.9  !important; }
.tarifs-reassurance-text p { font-size: .98rem !important; line-height: 1.8 !important; }
.tarifs-rarete p  { font-size: .98rem  !important; line-height: 1.8  !important; }
.problem-list li  { font-size: 1rem    !important; line-height: 1.7  !important; }
.valeur-bloc-desc { font-size: .98rem  !important; line-height: 1.8  !important; }
.valeur-bloc-list li { font-size: .95rem !important; }
.steps-conclusion { font-size: 1.35rem !important; }
.reassure-item    { font-size: .85rem  !important; }
.form-label       { font-size: .78rem  !important; }
.tarif-features li{ font-size: .95rem  !important; }
.form-note        { font-size: .85rem  !important; }

img { display:block; max-width:100%; height:100%; object-fit:cover }

::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background: var(--warm) }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius:2px }

/* ─── TYPOGRAPHY ─── */
.section-label {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--gold);
}
.section-label.center-label { justify-content: center }
.section-label.gold-label { color: var(--gold) }

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.6rem;
  color: var(--text);
}
.section-title em { font-style:italic; color:var(--gold) }
.section-title.white-title { color: #fff }
.section-title.center-title { text-align: center }

/* ─── BUTTONS ─── */
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--night);
  border: none;
  padding: .9rem 2.4rem;
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,168,76,.3) }
.btn-primary::after { content:''; position:absolute; inset:0; background:#fff; opacity:0; transition:opacity .3s }
.btn-primary:hover::after { opacity:.1 }

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  padding: .9rem 2.4rem;
  font-family: 'Jost', sans-serif;
  font-size: .85rem;
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}
.btn-secondary:hover { border-color: var(--gold); color: var(--gold) }

/* ─── REVEAL ─── */
.reveal { opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease }
.reveal.visible { opacity:1; transform:translateY(0) }
.delay-1 { transition-delay: .1s }
.delay-2 { transition-delay: .2s }
.delay-3 { transition-delay: .3s }
.delay-4 { transition-delay: .4s }

/* ─── NAV ─── */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:200;
  padding: 1.4rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all .4s;
}
#navbar.scrolled {
  background: rgba(14,26,18,.94);
  backdrop-filter: blur(14px);
  padding: 1rem 4rem;
  border-bottom: 1px solid var(--border-gold);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: .1em;
}
.nav-logo em { font-style:italic; color:var(--gold-light) }
.nav-links { display:flex; gap:2.4rem; list-style:none }
.nav-links a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s;
}
.nav-links a:hover { color: var(--gold-light) }
.nav-cta {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: .55rem 1.4rem;
  font-family: 'Jost', sans-serif;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
}
.nav-cta:hover { background:var(--gold); color:var(--night) }

.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px }
.nav-burger span { display:block; width:22px; height:1px; background:rgba(255,255,255,.7); transition:all .3s }

/* ─── MOBILE MENU ─── */
.mobile-menu {
  display: none;
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  z-index: 150;
  background: rgba(14,26,18,.97);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}
.mobile-menu.open { display:flex }
.mobile-menu ul { list-style:none; text-align:center; display:flex; flex-direction:column; gap:2rem }
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  letter-spacing: .08em;
  transition: color .3s;
}
.mobile-menu a:hover { color: var(--gold-light) }

/* ─── HERO ─── */
#hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-image-bg {
  position: absolute;
  inset: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(10,20,14,.92) 45%, rgba(10,20,14,.5) 100%);
}

.star-ornament {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 520px;
  height: 520px;
  pointer-events: none;
  opacity: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 8rem 4rem 6rem;
  max-width: 700px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid rgba(201,168,76,.35);
  padding: .4rem 1rem;
  margin-bottom: 2.5rem;
  animation: fadeUp .8s .2s both;
}
.hero-badge-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--gold);
  animation: pulse 2s infinite;
}
.hero-badge span { font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-light) }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 5vw, 4.6rem);
  font-weight: 300;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.6rem;
  animation: fadeUp .8s .3s both;
}
.hero-title em { font-style:italic; color:var(--gold-light); display:block }

.hero-sub {
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(255,255,255,.6);
  margin-bottom: 2.8rem;
  max-width: 540px;
  animation: fadeUp .8s .4s both;
}

.hero-buttons { display:flex; gap:1.2rem; flex-wrap:wrap; animation: fadeUp .8s .5s both }

.hero-reassurance {
  margin-top: 2rem;
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  animation: fadeUp .8s .6s both;
}
.reassure-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .05em;
}
.reassure-item::before { content:''; width:4px; height:4px; border-radius:50%; background:var(--gold); flex-shrink:0 }

.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  animation: fadeUp .8s .9s both;
}
.scroll-hint span { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.3) }
.scroll-line {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, rgba(201,168,76,.8), transparent);
  animation: scrollPulse 2s 1s infinite;
}
@keyframes scrollPulse {
  0%   { transform:scaleY(0); transform-origin:top }
  50%  { transform:scaleY(1); transform-origin:top }
  51%  { transform:scaleY(1); transform-origin:bottom }
  100% { transform:scaleY(0); transform-origin:bottom }
}
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

/* ─── PROBLÈME ─── */
#probleme {
  background: var(--warm);
  padding: 7rem 4rem;
  position: relative;
  overflow: hidden;
}
#probleme::before {
  content:'';
  position:absolute; right:-100px; top:-100px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(201,168,76,.07), transparent 70%);
  pointer-events:none;
}
.problem-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center }

.problem-intro { font-size:1rem; line-height:1.9; color:var(--text-muted); margin-bottom:2rem }

.problem-list { list-style:none; display:flex; flex-direction:column; gap:.9rem }
.problem-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-muted);
  padding: .8rem 1rem;
  border-left: 2px solid transparent;
  transition: border-color .3s, background .3s;
  cursor: default;
}
.problem-list li:hover { border-left-color: var(--gold); background: rgba(201,168,76,.05) }
.problem-list li::before { content:'—'; color:var(--gold); flex-shrink:0; font-size:.85rem; margin-top:.1em }

/* Image frames */
.img-frame {
  position: relative;
  border-radius: 0;
  overflow: hidden;
}
.img-frame--dark { background: var(--night) }
.img-frame img { width:100%; height:360px; object-fit:cover; display:block; opacity:.75 }
.img-frame-caption {
  position: absolute;
  bottom: 0; left:0; right:0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(10,20,14,.95) 0%, transparent 100%);
}
.img-frame-label { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.6rem }
.img-frame-quote { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:300; font-style:italic; color:#fff; line-height:1.4 }

/* ─── SOLUTION ─── */
#solution { background:var(--cream); padding:7rem 4rem }
.solution-intro { max-width:640px; font-size:1rem; line-height:1.9; color:var(--text-muted); margin-bottom:4rem }
.solution-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem }
.sol-card {
  padding: 2.5rem 2rem;
  border: 1px solid var(--border-gold);
  position: relative;
  transition: all .4s;
  cursor: default;
  background: var(--cream);
}
.sol-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(to right, var(--gold), var(--gold-light));
  transform:scaleX(0); transform-origin:left; transition:transform .4s;
}
.sol-card:hover { background:var(--warm); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.08) }
.sol-card:hover::before { transform:scaleX(1) }
.sol-card-num { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; color:rgba(201,168,76,.15); line-height:1; margin-bottom:1.2rem }
.sol-card-title { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:400; color:var(--text); margin-bottom:.8rem }
.sol-card-text { font-size:.9rem; line-height:1.8; color:var(--text-muted) }

/* ─── PHOTO BAND ─── */
.photo-band {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr 1.4fr 1fr;
  height: 300px;
  overflow: hidden;
  gap: 3px;
  position: relative;
}
.photo-band-item { overflow:hidden; position:relative }
.photo-band-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease }
.photo-band-item:hover img { transform:scale(1.06) }
.photo-band-item--tall { height:100% }
.photo-band::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to right, rgba(10,26,18,.3) 0%, transparent 20%, transparent 80%, rgba(10,26,18,.3) 100%);
  pointer-events:none;
  z-index:1;
}

/* ─── PHOTO BAND MOBILE : carrousel scrollable ─── */
@media (max-width: 768px) {
  .photo-band {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    height: 220px;
    gap: 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .photo-band::-webkit-scrollbar { display: none; }
  .photo-band::before { display: none; }
  .photo-band-item {
    flex: 0 0 75vw;
    max-width: 75vw;
    height: 220px;
    scroll-snap-align: center;
  }
  .photo-band-item--tall {
    flex: 0 0 75vw;
    max-width: 75vw;
    height: 220px;
  }
  .photo-band-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ─── GARANTIES ─── */
#garanties {
  background: var(--night);
  padding: 7rem 4rem;
  position: relative;
  overflow: hidden;
}
#garanties::before {
  content: '';
  position: absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(201,168,76,0.04)' stroke-width='0.5'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events:none;
}
.garanties-inner { position:relative; z-index:1 }

.garanties-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 2px;
  margin-top: 3.5rem;
  background: rgba(201,168,76,.08);
}
.garantie-item {
  background: var(--night);
  padding: 3rem;
  transition: background .35s;
}
.garantie-item:hover { background: var(--forest) }
.garantie-icon {
  width: 44px; height: 44px;
  border: 1px solid rgba(201,168,76,.35);
  display: flex; align-items:center; justify-content:center;
  margin-bottom: 1.5rem;
  color: var(--gold);
}
.garantie-icon svg { width:20px; height:20px }
.garantie-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:400; color:var(--gold-light); margin-bottom:.8rem }
.garantie-text { font-size:.9rem; line-height:1.8; color:rgba(255,255,255,.5) }

/* ─── COMMENT ─── */
#comment { background:var(--warm); padding:7rem 4rem }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; margin-top:4rem }
.steps::before {
  content:''; position:absolute;
  top:2rem; left:calc(12.5%); right:calc(12.5%);
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), var(--gold), var(--gold), transparent);
}
.step { padding:0 1.5rem; text-align:center }
.step-num {
  width:4rem; height:4rem; border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 2rem;
  background:var(--warm);
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem; font-weight:300; color:var(--gold);
  position:relative; z-index:1;
  transition:all .3s;
}
.step:hover .step-num { background:var(--gold); color:var(--night) }
.step-title { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--text); margin-bottom:.6rem }
.step-text { font-size:.86rem; line-height:1.75; color:var(--text-muted) }
.steps-conclusion {
  text-align:center; margin-top:4rem;
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem; font-weight:300; font-style:italic;
  color:var(--text-muted);
}

/* ─── À QUI ─── */
#aqui { background:var(--cream); padding:7rem 4rem; display:grid; grid-template-columns:1fr 1fr; gap:6rem; align-items:center }
.aqui-intro { font-size:.98rem; line-height:1.9; color:var(--text-muted); margin-bottom:1.5rem }
.aqui-list { list-style:none; display:flex; flex-direction:column; gap:.85rem; margin:2rem 0 }
.aqui-list li {
  display:flex; align-items:center; gap:1rem;
  font-size:.95rem; line-height:1.6; color:var(--text-muted);
}
.aqui-list li::before { content:''; width:22px; height:1px; background:var(--gold); flex-shrink:0 }
.aqui-closing {
  font-style:italic; font-size:.95rem; line-height:1.8; color:var(--text-muted);
  border-left:2px solid var(--gold); padding-left:1.2rem;
}

.aqui-img-wrap { position:relative; overflow:hidden }
.aqui-img-wrap img { width:100%; height:500px; object-fit:cover; display:block }
.aqui-img-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:2.5rem;
  background:linear-gradient(to top, rgba(10,20,14,.9) 0%, transparent 100%);
}
.aqui-quote-label { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem }
.aqui-quote { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:300; font-style:italic; color:#fff; line-height:1.5; margin-bottom:1.5rem }
.aqui-meta { display:flex; align-items:center; gap:1rem }
.aqui-line { flex:1; height:1px; background:rgba(201,168,76,.25) }
.aqui-meta-text { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.35) }

/* ─── CONFIANCE ─── */
#confiance {
  position:relative; padding:9rem 4rem;
  overflow:hidden; text-align:center;
}
.confiance-bg { position:absolute; inset:0 }
.confiance-bg img { width:100%; height:100%; object-fit:cover; filter:saturate(.6) }
.confiance-bg-overlay {
  position:absolute; inset:0;
  background:rgba(10,20,14,.82);
}
.confiance-inner { position:relative; z-index:2; max-width:680px; margin:0 auto }
.confiance-text { font-size:1.05rem; line-height:1.9; color:rgba(255,255,255,.55); margin:1.5rem 0 3rem }
.citation-box {
  border:1px solid rgba(201,168,76,.28);
  padding:2rem 3rem;
  position:relative; display:inline-block;
}
.citation-box::before {
  content:'"';
  position:absolute; top:-20px; left:2rem;
  font-family:'Cormorant Garamond',serif;
  font-size:4rem; color:var(--gold); line-height:1;
}
.citation-text { font-family:'Cormorant Garamond',serif; font-size:1.35rem; font-style:italic; color:var(--gold-light); font-weight:300 }

/* ─── CTA ─── */
#cta {
  background:linear-gradient(135deg, var(--forest), var(--night));
  padding:8rem 4rem; text-align:center;
  position:relative; overflow:hidden;
}
.cta-bg-text {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:'Cormorant Garamond',serif;
  font-size:18vw; font-weight:300;
  color:rgba(201,168,76,.03);
  white-space:nowrap; pointer-events:none; letter-spacing:.1em;
  user-select:none;
}
.cta-inner { position:relative; z-index:1; max-width:620px; margin:0 auto }
.cta-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:300; color:#fff; margin-bottom:1.2rem }
.cta-text { font-size:.98rem; line-height:1.9; color:rgba(255,255,255,.5); margin-bottom:2.8rem }
.cta-buttons { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap }
.cta-reassurance { margin-top:1.5rem; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.28) }

/* ─── FAQ ─── */
#faq { background:var(--cream); padding:7rem 4rem; max-width:860px; margin:0 auto }
.faq-list { margin-top:3rem }
.faq-item { border-bottom:1px solid rgba(201,168,76,.18) }
.faq-question {
  width:100%; background:none; border:none;
  padding:1.5rem 0;
  display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; text-align:left;
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem; font-weight:400; color:var(--text);
  transition:color .3s;
}
.faq-question:hover { color:var(--gold) }
.faq-icon {
  width:22px; height:22px; border-radius:50%;
  border:1px solid rgba(201,168,76,.4);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--gold); font-size:.85rem;
  transition:all .35s;
}
.faq-answer { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s }
.faq-answer.open { max-height:220px; padding-bottom:1.5rem }
.faq-answer p { font-size:.93rem; line-height:1.85; color:var(--text-muted) }
.faq-item.active .faq-icon { background:var(--gold); border-color:var(--gold); color:var(--night); transform:rotate(45deg) }
.faq-item.active .faq-question { color:var(--gold) }

/* ─── FORMULAIRE ─── */
#inscription {
  background: var(--night);
  padding: 7rem 4rem;
  position:relative; overflow:hidden;
}
#inscription::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
}
.form-intro { font-size:.98rem; line-height:1.8; color:rgba(255,255,255,.45); margin-bottom:3rem; max-width:560px }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.3rem; max-width:900px }
.form-full { grid-column:1/-1 }
.form-group { display:flex; flex-direction:column; gap:.45rem }
.form-label { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold) }
.form-control {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,168,76,.18);
  color: #fff;
  padding: .85rem 1rem;
  font-family:'Jost',sans-serif; font-size:.9rem; font-weight:300;
  transition: border-color .3s, background .3s;
  outline: none; -webkit-appearance:none; appearance:none;
  border-radius: 0;
}
.form-control:focus { border-color:rgba(201,168,76,.55); background:rgba(255,255,255,.06) }
.form-control option { background:var(--night) }
.form-control::placeholder { color:rgba(255,255,255,.22) }
textarea.form-control { resize:vertical }

.form-submit { margin-top:1rem; text-align:center }
.btn-form {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--night); border:none;
  padding:1rem 3.2rem;
  font-family:'Jost',sans-serif; font-size:.88rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.btn-form:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,.25) }
.btn-form::before { content:''; position:absolute; inset:0; background:#fff; opacity:0; transition:opacity .3s }
.btn-form:hover::before { opacity:.1 }
.form-note { margin-top:1.2rem; font-size:.78rem; color:rgba(255,255,255,.28); letter-spacing:.04em; font-style:italic }

.success-msg { padding:4rem; text-align:center }
.success-inner { display:flex; flex-direction:column; align-items:center; gap:1.2rem; border:1px solid rgba(201,168,76,.2); padding:3rem; max-width:480px; margin:0 auto }
.success-title { font-family:'Cormorant Garamond',serif; font-size:2rem; font-style:italic; color:var(--gold-light) }
.success-text { font-size:.95rem; line-height:1.8; color:rgba(255,255,255,.5) }

/* ─── FOOTER ─── */
footer { background:var(--night); padding:3.5rem 4rem }
.footer-top { display:flex; align-items:center; gap:2rem; margin-bottom:1.5rem }
.footer-logo { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:400; color:var(--gold) }
.footer-logo em { font-style:italic; color:var(--gold-light) }
.footer-tagline { font-size:.82rem; color:rgba(255,255,255,.28); letter-spacing:.06em }
.footer-divider { height:1px; background:rgba(201,168,76,.1); margin-bottom:1.5rem }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem }
.footer-text { font-size:.76rem; color:rgba(255,255,255,.22); letter-spacing:.05em }

/* ─── RESPONSIVE ─── */
@media (max-width:1100px) {
  #aqui { grid-template-columns:1fr; gap:3rem }
  .problem-grid { grid-template-columns:1fr; gap:3rem }
}
@media (max-width:900px) {
  #navbar { padding:1.2rem 1.5rem }
  #navbar.scrolled { padding:.9rem 1.5rem }
  .nav-links, .nav-cta { display:none }
  .nav-burger { display:flex }
  section { padding:5rem 1.5rem }
  #probleme, #solution, #comment, #garanties, #confiance, #cta, #faq, #inscription, #aqui {
    padding:5rem 1.5rem;
  }
  .hero-content { padding:7rem 1.5rem 5rem }
  .solution-cards { grid-template-columns:1fr }
  .garanties-grid { grid-template-columns:1fr }
  .steps { grid-template-columns:repeat(2,1fr); gap:2.5rem }
  .steps::before { display:none }
  .photo-band { grid-template-columns:1fr 1fr 1fr; height:200px }
  .photo-band-item:nth-child(4) { display:none }
  .form-grid { grid-template-columns:1fr }
  .form-full { grid-column:1 }
  .footer-bottom { flex-direction:column; gap:.6rem; text-align:center }
  .footer-top { flex-direction:column; text-align:center }
  .star-ornament { width:280px; height:280px; opacity:.5 }
}
@media (max-width:600px) {
  .photo-band { height:160px }
  .photo-band-item:nth-child(3),
  .photo-band-item:nth-child(5) { display:none }
  .hero-buttons { flex-direction:column }
  .hero-reassurance { gap:1rem }
  .steps { grid-template-columns:1fr }
}

/* ─── TARIFS ─── */
#tarifs {
  background: var(--cream);
  padding: 7rem 4rem;
}
.tarifs-intro {
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text-muted);
  margin: 0 auto 4rem;
  text-align: center;
}
.tarifs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* Card base */
.tarif-card {
  border: 1px solid rgba(201,168,76,.18);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}
.tarif-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.07);
}
.tarif-card-top {
  padding: 2.2rem 2rem 1.5rem;
  flex: 1;
}

/* Featured card */
.tarif-card--featured {
  border-color: var(--gold);
  background: var(--night);
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.tarif-card--featured:hover {
  transform: translateY(-14px);
  box-shadow: 0 32px 70px rgba(0,0,0,.22);
}
.tarif-featured-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--night);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .28rem 1.1rem;
  white-space: nowrap;
}

/* Badge */
.tarif-badge {
  display: inline-block;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,.3);
  padding: .22rem .75rem;
  margin-bottom: 1rem;
}
.tarif-badge--gold {
  background: rgba(201,168,76,.1);
  border-color: rgba(201,168,76,.5);
}

/* Name */
.tarif-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: .8rem;
  line-height: 1.2;
}
.tarif-card--featured .tarif-name { color: #fff }

/* Price */
.tarif-price {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  margin-bottom: 1rem;
}
.tarif-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
}
.tarif-period {
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .04em;
}
.tarif-card--featured .tarif-period { color: rgba(255,255,255,.45) }

/* Desc */
.tarif-desc {
  font-size: .88rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.tarif-card--featured .tarif-desc { color: rgba(255,255,255,.5) }

/* Features */
.tarif-features {
  list-style: none;
  padding: 1.2rem 2rem;
  border-top: 1px solid rgba(201,168,76,.12);
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.tarif-card--featured .tarif-features { border-top-color: rgba(201,168,76,.2) }
.tarif-features li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.tarif-card--featured .tarif-features li { color: rgba(255,255,255,.55) }
.tarif-features li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  flex-shrink: 0;
  margin-top: .15em;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7l3 3 5-5' stroke='%23C9A84C' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Bottom */
.tarif-card-bottom {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}
.tarif-note {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tarif-card--featured .tarif-note { color: rgba(255,255,255,.3) }

/* Buttons */
.tarif-btn {
  width: 100%;
  padding: .85rem 1.2rem;
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  border: none;
}
.tarif-btn--outline {
  background: transparent;
  border: 1px solid rgba(201,168,76,.35);
  color: var(--gold);
}
.tarif-btn--outline:hover {
  background: rgba(201,168,76,.07);
  border-color: var(--gold);
}
.tarif-btn--gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--night);
}
.tarif-btn--gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,.3);
}

/* Réassurance */
.tarifs-reassurance {
  margin-top: 4rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.tarifs-reassurance-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(201,168,76,.18);
}
.tarifs-reassurance-text {
  padding: 2.2rem 2.5rem;
  border-right: 1px solid rgba(201,168,76,.12);
}
.tarifs-reassurance-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: .8rem;
}
.tarifs-reassurance-text p {
  font-size: .88rem;
  line-height: 1.8;
  color: var(--text-muted);
}
.tarifs-rarete {
  padding: 2.2rem 2.5rem;
  background: var(--warm);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.tarifs-rarete-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: .35em;
  animation: pulse 2s infinite;
}
.tarifs-rarete p {
  font-size: .9rem;
  line-height: 1.8;
  color: var(--text-muted);
  font-style: italic;
}
.tarifs-rarete strong {
  color: var(--text);
  font-weight: 500;
  font-style: normal;
}

/* Responsive tarifs */
@media (max-width: 900px) {
  .tarifs-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  .tarif-card--featured {
    transform: none;
  }
  .tarifs-reassurance-inner {
    grid-template-columns: 1fr;
  }
  .tarifs-reassurance-text {
    border-right: none;
    border-bottom: 1px solid rgba(201,168,76,.12);
  }
}

/* ─── CROISSANT MOBILE : plus transparent pour lisibilité du texte ─── */
@media (max-width: 900px) {
  .star-ornament {
    opacity: 0.18 !important;
    width: 280px !important;
    height: 280px !important;
    right: -40px !important;
    top: 30% !important;
  }
}
@media (max-width: 600px) {
  .star-ornament {
    opacity: 0.12 !important;
    width: 220px !important;
    height: 220px !important;
    right: -30px !important;
    top: 20% !important;
  }
}

/* ─── BLOC TÉLÉCHARGEMENT GUIDE ─── */
.guide-download {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.guide-download-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--night);
  border: 1px solid rgba(201,168,76,.25);
  border-left: 3px solid var(--gold);
  padding: 2rem 2.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .3s;
}
.guide-download-inner::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 200px;
  background: radial-gradient(ellipse at right, rgba(201,168,76,.06), transparent 70%);
  pointer-events: none;
}
.guide-download-inner:hover {
  border-color: rgba(201,168,76,.5);
}
.guide-download-icon {
  width: 56px; height: 56px;
  border: 1px solid rgba(201,168,76,.35);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--gold);
}
.guide-download-text { flex: 1 }
.guide-download-label {
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .4rem;
}
.guide-download-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem; font-weight: 300; color: #fff;
  margin-bottom: .5rem; line-height: 1.2;
}
.guide-download-title em { font-style: italic; color: var(--gold-light) }
.guide-download-desc {
  font-size: .88rem; line-height: 1.75;
  color: rgba(255,255,255,.45); max-width: 420px;
}
.guide-download-btn {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--night);
  padding: .9rem 1.8rem;
  font-family: 'Jost', sans-serif;
  font-size: .8rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none;
  flex-shrink: 0; transition: all .3s; white-space: nowrap;
  gap: .3rem;
}
.guide-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,168,76,.3);
  color: var(--night);
}
.guide-download-size {
  font-size: .65rem; font-weight: 300;
  letter-spacing: .08em; opacity: .7;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .guide-download-inner {
    flex-direction: column;
    text-align: center;
    padding: 1.8rem 1.5rem;
    gap: 1.4rem;
  }
  .guide-download-desc { max-width: 100% }
  .guide-download-btn { width: 100% }
}