:root{
  /* Palette DesignPro — fond noir, accent bleu clair, typographie Inter.
     Choix de Laurent, 2026-08-05. */
  --bg:#000000;
  --bg-alt:#000000;
  --bg-alt-hover:#0A0A0A;
  --accent:#64CEFB;              /* accent bleu clair : liens, brillance, pilules */
  --accent-text:#64CEFB;
  --accent-light:#8FDCFC;
  --accent-dark:#2AA8E0;
  --accent-soft:rgba(100,206,251,0.15);
  --accent-glow-1:rgba(100,206,251,0.10);
  --accent-glow-2:rgba(100,206,251,0.06);
  --accent-glow-3:rgba(100,206,251,0.025);
  --text:#FFFFFF;                /* titres et états survolés */
  --text-muted:rgba(255,255,255,0.8);   /* texte courant : blanc à 80 % */
  --text-dim:rgba(255,255,255,0.55);
  --border:#374151;              /* gris 700 : bordure de la pilule de navigation */
  --border-soft:rgba(255,255,255,0.14);
  --border-outline:#374151;
  --nav-bg:transparent;
  --nav-bg-scrolled:rgba(0,0,0,0.85);
  --nav-mobile-bg:rgba(0,0,0,0.97);
  --error:#F87171;
  --hero-overlay:rgba(0,0,0,0.45);
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:rgba(255,255,255,0.8);
  --cinematic-bg:#000000;
  --cinematic-glass:rgba(255,255,255,0.05);
  --cinematic-glass-hover:rgba(255,255,255,0.09);
  --cinematic-glass-border:#374151;
  --gray-900:#111827;
  --max-w:1280px;                /* équivalent max-w-7xl */
  --font-heading:'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'Inter', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

h1, h2, h3{ font-family:var(--font-heading); }

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ max-width:100%; display:block; }

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

section{ position:relative; }

/* ---------- Fade-in on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{ transition-delay:0.12s; }
.reveal-delay-2{ transition-delay:0.24s; }
.reveal-delay-3{ transition-delay:0.36s; }

/* ---------- Navbar ---------- */
.navbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color 0.4s ease, background 0.4s ease;
}
.navbar.scrolled{
  border-bottom-color:var(--border);
  background:var(--nav-bg-scrolled);
}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.logo{
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:10px;
}
.logo-mark{
  width:72px; height:28px;
  flex-shrink:0;
}
.logo span{ color:var(--accent-text); font-style:italic; font-weight:500; }

.nav-links{
  display:flex;
  gap:34px;
}
.nav-links a{
  font-size:0.92rem;
  letter-spacing:0.03em;
  color:var(--text-muted);
  position:relative;
  padding:4px 0;
  transition:color 0.3s ease;
}
.nav-links a::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--accent-text);
  transition:width 0.3s ease;
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ width:100%; }

.nav-cta{
  border:1px solid var(--accent-text);
  color:var(--accent-text) !important;
  padding:9px 20px;
  border-radius:2px;
  font-size:0.85rem !important;
  transition:background 0.3s ease, color 0.3s ease !important;
}
.nav-cta::after{ display:none; }
.nav-cta:hover,
.nav-cta.active{
  background:var(--accent);
  color:var(--text) !important;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
  z-index:1100;
}
.nav-toggle span{
  width:24px; height:1px;
  background:var(--text);
  transition:all 0.3s ease;
}
.nav-toggle.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero (page d'accueil) ---------- */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  padding-top:140px;
  padding-bottom:80px;
  padding-left:clamp(32px, 8vw, 140px);
  padding-right:24px;
  /* Le fond photo (601 Ko) etait recouvert par la video : retire. */
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-glow-1), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 80% 60% at 20% 100%, var(--accent-glow-2), rgba(0,0,0,0) 60%),
    linear-gradient(var(--hero-overlay), var(--hero-overlay));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, transparent 0, transparent 60px, var(--accent-glow-3) 61px);
  pointer-events:none;
}
.hero-inner{
  max-width:640px;
  position:relative;
  z-index:1;
}
.hero-eyebrow{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:1.05rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:28px;
  font-weight:600;
  background:rgba(255,255,255,0.88);
  padding:10px 18px;
  border-radius:4px;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
}
.hero h1{
  color:var(--text-on-dark);
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-0.01em;
  margin-bottom:26px;
}
.hero h1 em{
  font-style:italic;
  color:var(--accent);
  font-weight:500;
}
.hero p.subtitle{
  font-size:1.1rem;
  color:var(--text-on-dark-muted);
  max-width:560px;
  margin:0 0 44px;
  font-weight:300;
}
.hero-tagline{
  font-style:italic;
  font-weight:500;
  font-size:1.2rem;
  color:var(--text-on-dark);
  max-width:600px;
  margin:0 0 44px;
}
.hero-tagline em{
  font-style:italic;
  color:var(--accent);
  font-weight:600;
}

.btn{
  display:inline-block;
  padding:16px 38px;
  border-radius:2px;
  font-size:0.92rem;
  letter-spacing:0.05em;
  font-weight:500;
  cursor:pointer;
  transition:all 0.35s ease;
  border:1px solid var(--accent);
}
.btn-primary{
  background:var(--accent);
  color:var(--text);
}
.btn-primary:hover{
  background:transparent;
  color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.btn-outline{
  background:transparent;
  color:var(--text);
  border-color:var(--border-outline);
}
.btn-outline:hover{
  border-color:var(--accent-text);
  color:var(--accent-text);
}

.scroll-hint{
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  width:1px; height:50px;
  background:linear-gradient(var(--accent), transparent);
  z-index:1;
}
.scroll-hint::after{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:5px; height:5px;
  border-radius:50%;
  background:var(--accent);
  animation:scrollDot 2.2s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ top:0; opacity:1; }
  80%{ opacity:0.4; }
  100%{ top:44px; opacity:0; }
}

/* ---------- Page header (pages secondaires, sans photo) ---------- */
.page-header{
  padding:168px 0 76px;
  text-align:center;
  background:var(--bg-alt);
}
.page-header .section-eyebrow{ margin-bottom:16px; }
.page-header h1{
  font-size:clamp(2rem, 4.4vw, 3.1rem);
  font-weight:600;
  letter-spacing:-0.01em;
}
.page-header p{
  color:var(--text-muted);
  max-width:620px;
  margin:22px auto 0;
  font-weight:300;
  font-size:1.05rem;
}
.page-header .divider{ margin-top:24px; }

/* ---------- Section heading shared ---------- */
.section-pad{ padding:120px 0; }
.section-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 72px;
}
.section-eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:16px;
}
.section-head h2{
  font-size:clamp(1.7rem, 3.4vw, 2.4rem);
  font-weight:600;
  letter-spacing:-0.01em;
}
.divider{
  width:48px; height:1px;
  background:var(--accent-text);
  margin:24px auto 0;
}

/* ---------- About ---------- */
.about{ background:var(--bg-alt); }
.about-grid{
  display:grid;
  /* La troisieme colonne etait vide : le bloc paraissait cale a gauche.
     Deux colonnes, centrees dans la page. */
  grid-template-columns:0.72fr 1.28fr;
  gap:56px;
  align-items:center;
  max-width:1020px;
  margin-inline:auto;
}
.about-grid.about-grid-2col{
  grid-template-columns:1.1fr 0.9fr;
}
.about-portrait img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:50%;
  border:2px solid var(--accent-text);
  box-shadow:0 0 0 8px var(--accent-soft);
}
.about-text .section-eyebrow{ text-align:left; margin-bottom:16px; }
.about-text h2{
  text-align:left;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  font-weight:600;
  margin-bottom:24px;
  line-height:1.35;
}
.about-text p{
  color:var(--text-muted);
  margin-bottom:18px;
  font-weight:300;
  font-size:1.02rem;
}
.about-text p:last-of-type{ margin-bottom:0; }

.points-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  border-left:1px solid var(--border);
  padding-left:32px;
}
.point-item{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.point-mark{
  flex-shrink:0;
  width:34px; height:34px;
  border:1px solid var(--accent-text);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent-text);
  font-family:var(--font-mono);
  font-size:0.85rem;
  margin-top:2px;
}
.point-item h3{
  font-size:1.02rem;
  font-weight:600;
  margin-bottom:4px;
}
.point-item p{
  color:var(--text-muted);
  font-size:0.94rem;
  font-weight:300;
}

/* ---------- Services (section cinématique) ---------- */
.services{
  background:var(--cinematic-bg);
  overflow:hidden;
}
.services::before{
  content:'';
  position:absolute;
  inset:-15%;
  background:
    radial-gradient(circle at 22% 28%, var(--accent-glow-1) 0%, transparent 45%),
    radial-gradient(circle at 78% 68%, rgba(201,160,78,0.14) 0%, transparent 45%),
    radial-gradient(circle at 50% 95%, rgba(224,192,122,0.08) 0%, transparent 55%);
  animation:driftGlow 26s ease-in-out infinite alternate;
  pointer-events:none;
  /* Les halos se coupaient net au bord et dessinaient une ligne : on les efface
     sur les 260 px du haut et du bas, la ou le fond fond vers la section voisine. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 440px, #000 calc(100% - 440px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 440px, #000 calc(100% - 440px), transparent 100%);
}

/* Le fondu de 440 px mange le haut et le bas de la section : le contenu se
   decale d'autant, sinon le titre blanc tombe sur la zone claire du fondu. */
.services.section-pad{ padding-top:500px; padding-bottom:500px; }
@media (max-width:768px){
  .services.section-pad{ padding-top:300px; padding-bottom:300px; }
  .services{
    background-image:
      linear-gradient(to bottom, rgba(247,239,228,1) 0, rgba(247,239,228,0.86) 78px, rgba(247,239,228,0.5) 154px, rgba(247,239,228,0.15) 226px, rgba(247,239,228,0) 280px),
      linear-gradient(to top, rgba(242,228,206,1) 0, rgba(242,228,206,0.86) 78px, rgba(242,228,206,0.5) 154px, rgba(242,228,206,0.15) 226px, rgba(242,228,206,0) 280px),
      radial-gradient(ellipse 60% 50% at 15% 10%, rgba(154,200,189,0.22), rgba(154,200,189,0) 60%),
      radial-gradient(ellipse 55% 45% at 90% 90%, rgba(232,187,96,0.20), rgba(232,187,96,0) 60%);
  }
  .services::before{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 280px, #000 calc(100% - 280px), transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 280px, #000 calc(100% - 280px), transparent 100%);
  }
}
.services::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(224,192,122,0.4) 1px, transparent 1.5px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 90%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 90%);
  opacity:0.3;
  animation:particleDrift 70s linear infinite;
  pointer-events:none;
}
@keyframes driftGlow{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(3%,-3%) scale(1.08); }
  100%{ transform:translate(-3%,2%) scale(1.03); }
}
@keyframes particleDrift{
  from{ background-position:0 0; }
  to{ background-position:440px 440px; }
}
@media (prefers-reduced-motion:reduce){
  .services::before, .services::after{ animation:none; }
}
.services .section-eyebrow{ color:var(--accent); }
.services .section-head h2{ color:var(--text-on-dark); }
.services .divider{ background:var(--accent); }
.services-cta{
  text-align:center;
  margin-top:56px;
  position:relative;
  z-index:1;
}
.services .btn-outline{
  border-color:var(--accent);
  color:var(--text-on-dark);
}
.services .btn-outline:hover{
  border-color:var(--accent);
  color:var(--text-on-dark);
  background:var(--accent-soft);
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  position:relative;
  z-index:1;
}
.service-card{
  background:var(--bg-alt);
  border:1px solid var(--border);
  padding:44px 34px;
  border-radius:4px;
  transition:transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  position:relative;
}
.service-card:hover{
  transform:translateY(-8px);
  border-color:var(--accent-text);
  background:var(--bg-alt-hover);
}
.service-icon{
  width:54px; height:54px;
  border:1px solid var(--accent-text);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:28px;
  color:var(--accent-text);
}
.service-icon svg{ width:26px; height:26px; }
.service-card h3{
  font-size:1.2rem;
  font-weight:600;
  margin-bottom:14px;
}
.service-card p{
  color:var(--text-muted);
  font-size:0.96rem;
  font-weight:300;
  margin-bottom:22px;
}
.service-link{
  font-size:0.85rem;
  letter-spacing:0.03em;
  color:var(--accent-text);
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid transparent;
  transition:gap 0.3s ease;
}
.service-card:hover .service-link{ gap:12px; }

/* ---------- Pricing cards (mon-accompagnement.html) ---------- */
.pricing-card .price{
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:600;
  color:var(--text);
  margin:18px 0 4px;
}
.pricing-card .price-note{
  display:block;
  font-size:0.8rem;
  color:var(--text-muted);
  margin-bottom:20px;
}
.pricing-card .price-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent-text);
  border:1px solid var(--border);
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:18px;
}
.pricing-card ul{
  margin:0 0 22px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.pricing-card ul li{
  font-size:0.92rem;
  color:var(--text-muted);
  padding-left:16px;
  position:relative;
}
.pricing-card ul li::before{
  content:'•';
  position:absolute;
  left:0;
  color:var(--accent-text);
}

/* ---------- Timeline (mon-approche.html) ---------- */
.timeline{
  position:relative;
  max-width:760px;
  margin:0 auto;
  padding-left:44px;
}
.timeline::before{
  content:'';
  position:absolute;
  left:15px; top:6px; bottom:6px;
  width:1px;
  background:var(--border);
}
.timeline-item{
  position:relative;
  padding-bottom:52px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  position:absolute;
  left:-44px; top:0;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--bg);
  border:1px solid var(--accent-text);
  color:var(--accent-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:0.8rem;
}
.timeline-meta{
  display:block;
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent-text);
  margin-bottom:8px;
}
.timeline-item h3{
  font-size:1.12rem;
  font-weight:600;
  margin-bottom:8px;
}
.timeline-item p{
  color:var(--text-muted);
  font-weight:300;
  font-size:0.98rem;
}

/* ---------- Qualify list (pour-qui.html) ---------- */
.qualify-list{
  display:flex;
  flex-direction:column;
  gap:22px;
  max-width:780px;
  margin:0 auto;
}
.qualify-item{
  display:flex;
  gap:20px;
  align-items:flex-start;
  padding:28px 30px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:4px;
  transition:border-color 0.3s ease, background 0.3s ease;
}
.qualify-item:hover{
  border-color:var(--accent-text);
  background:var(--bg-alt-hover);
}
.qualify-icon{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--accent-text);
  color:var(--accent-text);
  display:flex;
  align-items:center;
  justify-content:center;
}
.qualify-icon svg{ width:18px; height:18px; }
.qualify-item p{
  font-size:1.04rem;
  color:var(--text);
  line-height:1.6;
  font-weight:400;
}

/* ---------- Quote block (a-propos.html) ---------- */
.quote-block{
  border-left:2px solid var(--accent-text);
  padding-left:28px;
  margin:36px 0;
  font-family:var(--font-heading);
  font-style:italic;
  font-size:1.35rem;
  color:var(--text);
  line-height:1.5;
}
.quote-block cite{
  display:block;
  margin-top:14px;
  font-family:var(--font-body);
  font-style:normal;
  font-size:0.85rem;
  color:var(--text-muted);
}

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.testimonial-card{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:4px;
  padding:32px;
}
.testimonial-card p{
  font-size:0.95rem;
  color:var(--text);
  line-height:1.75;
  margin-bottom:20px;
  font-style:italic;
}
.testimonial-card .author{
  font-family:var(--font-mono);
  font-size:0.76rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--accent-text);
}

/* ---------- FAQ (details/summary natif, sans JS) ---------- */
.faq-list{
  max-width:760px;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid var(--border);
  padding:22px 0;
}
.faq-item summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  flex-shrink:0;
  color:var(--accent-text);
  font-size:1.3rem;
  line-height:1;
}
.faq-item[open] summary::after{ content:'–'; }
.faq-item p{
  margin-top:14px;
  color:var(--text-muted);
  font-weight:300;
  line-height:1.7;
}

/* ---------- Map embed (contact.html) ---------- */
.map-embed{
  width:100%;
  aspect-ratio:16/9;
  margin-top:28px;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  filter:saturate(0.75) contrast(1.02) brightness(0.98);
}
.map-embed iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ---------- Contact ---------- */
.contact{ background:var(--bg-alt); }
.contact-teaser .container{ text-align:center; }
.contact-teaser p{
  max-width:560px;
  margin:0 auto 36px;
  color:var(--text-muted);
  font-weight:300;
}
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:72px;
}
.contact-info .section-eyebrow{ text-align:left; }
.contact-info h2{
  text-align:left;
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  font-weight:600;
  margin-bottom:22px;
  line-height:1.35;
}
.contact-info p{
  color:var(--text-muted);
  font-weight:300;
  margin-bottom:32px;
}
.contact-detail{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:20px;
  font-size:0.95rem;
}
.contact-detail .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent-text);
  flex-shrink:0;
}

form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.field label{
  font-size:0.82rem;
  letter-spacing:0.03em;
  color:var(--text-muted);
}
.field input,
.field select,
.field textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-soft);
  color:var(--text);
  font-family:inherit;
  font-size:0.98rem;
  padding:10px 2px;
  transition:border-color 0.3s ease;
}
.field select{ cursor:pointer; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-bottom-color:var(--accent-text);
}
.field textarea{ resize:vertical; min-height:110px; }
.field.has-error input,
.field.has-error textarea{ border-bottom-color:var(--error); }
.error-msg{
  font-size:0.78rem;
  color:var(--error);
  min-height:14px;
  display:none;
}
.field.has-error .error-msg{ display:block; }

.submit-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:10px;
}
.submit-row button{
  border:1px solid var(--accent);
  background:var(--accent);
  color:var(--text);
  padding:16px 40px;
  font-size:0.92rem;
  letter-spacing:0.05em;
  font-weight:500;
  cursor:pointer;
  border-radius:2px;
  transition:all 0.35s ease;
}
.submit-row button:hover{
  background:transparent;
  color:var(--accent-text);
}
.form-status{
  font-size:0.88rem;
  color:var(--accent-text);
  opacity:0;
  transition:opacity 0.4s ease;
}
.form-status.visible{ opacity:1; }

/* ---------- Utilitaires ---------- */
.section-alt{ background:var(--bg-alt); }
.cta-buttons{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- Footer ---------- */
footer{
  padding:40px 0;
  border-top:1px solid var(--border);
  text-align:center;
}
footer p{
  font-size:0.82rem;
  color:var(--text-muted);
  font-weight:300;
  letter-spacing:0.02em;
}
footer span{ color:var(--accent-text); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .about-grid, .contact-grid{
    grid-template-columns:1fr;
    gap:48px;
  }
  .services-grid, .testimonial-grid{
    grid-template-columns:1fr;
  }
  .section-pad{ padding:88px 0; }
}

@media (max-width:768px){
  .nav-links{
    position:fixed;
    top:78px; left:0; right:0;
    /* height en vh plutôt que bottom:0 : .navbar a un backdrop-filter, ce qui en fait
       le containing block de ce descendant fixed — bottom:0 se calculerait alors par
       rapport aux 78px de la navbar (hauteur nulle) et non par rapport au viewport. */
    height:calc(100vh - 78px);
    background:var(--nav-mobile-bg);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:32px;
    transform:translateX(100%);
    transition:transform 0.4s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-links a{ font-size:1.05rem; }

  .form-row{ grid-template-columns:1fr; }

  .hero{
    min-height:auto;
    justify-content:center;
    text-align:center;
    padding:150px 32px 72px;
  }
  .hero-inner{ margin:0 auto; }
  .hero p.subtitle,
  .hero-tagline{ margin-left:auto; margin-right:auto; }
  .hero h1{
    font-size:clamp(1.7rem, 8vw, 2.4rem);
    margin-bottom:20px;
  }
  .hero p.subtitle{
    font-size:1rem;
    margin-bottom:36px;
  }

  .page-header{ padding:140px 0 56px; }

  .timeline{ padding-left:36px; }
  .timeline-marker{ left:-36px; width:28px; height:28px; }
}

@media (max-width:480px){
  .section-pad{ padding:64px 0; }
  .service-card{ padding:34px 24px; }
  .points-list{ padding-left:20px; }

  .hero{ padding:140px 24px 64px; }
  .hero h1{ font-size:clamp(1.5rem, 9vw, 2rem); }

  .qualify-item{ flex-direction:column; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BANNIÈRE COOKIES
   ═══════════════════════════════════════════════════════════════════════ */
.cookie-banner{
  position:fixed;
  left:1.25rem;
  right:1.25rem;
  bottom:1.25rem;
  z-index:500;
  max-width:460px;
  margin:0 auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:1.25rem 1.5rem;
  box-shadow:0 12px 32px rgba(26,21,16,0.18);
}

.cookie-banner__texte{
  font-family:var(--font-body);
  font-size:0.9rem;
  color:var(--text);
  line-height:1.6;
  margin-bottom:1.1rem;
}

.cookie-banner__actions{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
}

.cookie-banner__actions .btn{
  padding:0.6rem 1.4rem;
  font-size:0.8rem;
}

@media (min-width:640px){
  .cookie-banner{ left:auto; right:1.5rem; bottom:1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO VIDÉO — accueil
   Plein écran, vidéo de fond, titre géant avec un mot en doré animé.
   Reprend la palette du site : aucun noir pur, aucun blanc pur,
   une seule couleur d'accent (--accent).
   ═══════════════════════════════════════════════════════════════════════ */
.hero-video{
  min-height:100svh;
  background:var(--cinematic-bg);
  padding-top:120px;
  padding-bottom:96px;
  align-items:center;
}
.hero-video::before{ display:none; }

.hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}

/* Voile chaud : rend le texte lisible sans virer au noir. */
.hero-veil{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to right, rgba(26,21,16,0.86) 0%, rgba(26,21,16,0.72) 45%, rgba(26,21,16,0.30) 100%),
    linear-gradient(to top, rgba(26,21,16,0.75) 0%, transparent 42%);
}

.hero-video .hero-inner{
  z-index:2;
  max-width:min(900px, 92%);
}

/* Bandeau haut : positionnement à gauche, preuve à droite. */
.hero-band{
  position:absolute;
  z-index:2;
  top:108px;
  left:clamp(32px, 8vw, 140px);
  right:clamp(24px, 6vw, 96px);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}
.hero-band p{
  color:var(--text-on-dark-muted);
  font-size:0.95rem;
  font-weight:300;
  line-height:1.55;
  max-width:34ch;
  margin:0;
}
.hero-band-right{ text-align:right; }

.hero-kicker{
  display:block;
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-on-dark-muted);
  margin-bottom:26px;
}

.hero-video .hero-title{
  font-size:clamp(2.7rem, 7.6vw, 5.4rem);
  line-height:0.95;
  letter-spacing:-0.022em;
  font-weight:400;
  color:var(--text-on-dark);
  margin-bottom:34px;
}
.hero-title-line{ display:block; }

/* Balayage doré continu sur le second mot. */
.hero-shine{
  background:linear-gradient(100deg,
    var(--accent) 32%,
    var(--text-on-dark) 48%,
    var(--accent) 64%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  animation:heroShine 3s linear infinite;
}
@keyframes heroShine{
  from{ background-position:150% 0; }
  to{ background-position:-50% 0; }
}

.hero-video .hero-tagline{
  font-style:normal;
  font-weight:300;
  font-size:1.1rem;
  color:var(--text-on-dark-muted);
  max-width:52ch;
  margin:0 0 40px;
}
.hero-video .hero-tagline em{
  font-style:normal;
  color:var(--accent);
  font-weight:500;
}

.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 32px;
  border-radius:999px;
  background:var(--accent);
  color:var(--cinematic-bg);
  font-size:0.95rem;
  font-weight:600;
  letter-spacing:0.01em;
  border:1px solid var(--accent);
  transition:background 0.35s ease, border-color 0.35s ease;
}
.btn-pill:hover{
  background:var(--accent-light);
  border-color:var(--accent-light);
}
.btn-pill-arrow{
  width:18px;
  height:18px;
  transition:transform 0.35s ease;
}
.btn-pill:hover .btn-pill-arrow{ transform:translateX(5px); }

@media (max-width:768px){
  .hero-video{
    min-height:100svh;
    /* .hero est en flex : sans cette ligne, le bandeau se placerait à côté
       du titre au lieu de passer au-dessus. */
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    text-align:left;
    padding:150px 28px 150px;
  }
  .hero-video .hero-inner{ margin:0; max-width:100%; width:100%; }
  .hero-video .hero-tagline{ margin-left:0; margin-right:0; }
  .hero-band{
    position:static;
    width:100%;
    flex-direction:column;
    gap:10px;
    margin-bottom:22px;
    padding:0;
    inset:auto;
  }
  /* Sur mobile on ne garde que la preuve : la phrase de positionnement est
     déjà portée par l'accroche juste en dessous. Cela remonte le bouton
     au-dessus du bandeau cookies. */
  .hero-band-left{ display:none; }
  .hero-band-right{ text-align:left; }
  .hero-band p{ font-size:0.86rem; max-width:100%; }
  .hero-video .hero-title{
    font-size:clamp(2.3rem, 9.5vw, 3.4rem);
    margin-bottom:20px;
  }
  .hero-kicker{ margin-bottom:18px; }
  .hero-video .hero-tagline{ font-size:1rem; margin-bottom:26px; }
  .hero-veil{
    background:
      linear-gradient(to top, rgba(26,21,16,0.90) 0%, rgba(26,21,16,0.58) 60%, rgba(26,21,16,0.42) 100%);
  }
}

@media (max-width:480px){
  .hero-video{ padding:140px 24px 146px; }
  .hero-video .hero-title{ font-size:clamp(2.2rem, 11vw, 2.9rem); }
}

/* Mouvement réduit : on fige le balayage et la vidéo garde son image. */
@media (prefers-reduced-motion:reduce){
  .hero-shine{
    animation:none;
    -webkit-text-fill-color:var(--accent);
    color:var(--accent);
  }
  .btn-pill-arrow{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LANGAGE DESIGNPRO — fond noir, accent bleu, navigation en pilule
   Choix de Laurent (2026-08-05). Vanilla, aucun framework.
   ═══════════════════════════════════════════════════════════════════════ */

body{ background:var(--bg); color:var(--text-muted); }

/* ---------- Navigation en pilule ---------- */
.navbar{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:none;
}
.navbar.scrolled{
  background:var(--nav-bg-scrolled);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:none;
}
.navbar .container{
  max-width:var(--max-w);
  padding:0 24px;
  height:88px;
}

.logo{
  color:var(--text);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0;
  gap:10px;
}
.logo span{ color:var(--text); font-style:normal; font-weight:600; }

.nav-links{
  gap:0;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  padding:7px 10px;
}
.nav-links a{
  font-size:0.875rem;              /* text-sm */
  color:var(--text-muted);
  padding:8px 16px;
  border-radius:999px;
  letter-spacing:0;
  transition:color 0.25s ease, background 0.25s ease;
}
.nav-links a::after{ display:none; }
.nav-links a:hover,
.nav-links a.active{ color:var(--text); }

.nav-cta{
  border:none !important;
  color:var(--text-muted) !important;
  font-size:0.875rem !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.nav-cta:hover,
.nav-cta.active{
  background:transparent !important;
  color:var(--text) !important;
}
.nav-cta-arrow{
  width:14px; height:14px;
  transition:transform 0.25s ease;
}
.nav-cta:hover .nav-cta-arrow{ transform:translateX(3px); }

.nav-toggle span{ background:#FFFFFF; }

/* Le prompt bascule en menu hamburger sous 1024px, pas 768px. */
@media (max-width:1023px){
  .nav-links{
    position:fixed;
    top:88px; left:0; right:0;
    height:calc(100svh - 88px);
    background:var(--nav-mobile-bg);
    border:none;
    border-radius:0;
    padding:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:26px;
    transform:translateX(100%);
    transition:transform 0.4s ease;
    z-index:1050;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .nav-links a{ font-size:1.05rem; }
}

/* ---------- Hero ---------- */
.hero-video{ background:#000000; }
.hero-veil{
  background:
    linear-gradient(to right, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.22) 100%),
    linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 42%);
}
.hero-band p{ color:var(--text-muted); font-size:0.875rem; }
.hero-kicker{
  font-size:0.75rem;               /* text-xs sur mobile */
  letter-spacing:-0.01em;          /* tracking-tight */
  text-transform:uppercase;
  color:var(--text-muted);
}
.hero-video .hero-title{
  font-weight:400;
  letter-spacing:-0.022em;
  line-height:0.95;
  color:#FFFFFF;
}
/* Balayage bleu → blanc → bleu, 3 s, dégradé à 100°.
   Le raccourci `background` remet background-clip à sa valeur par défaut :
   il faut donc redéclarer le découpage dans le texte juste après. */
.hero-shine{
  background:linear-gradient(100deg,
    #64CEFB 32%,
    #FFFFFF 48%,
    #64CEFB 64%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero-video .hero-tagline{ color:var(--text-muted); }
.hero-video .hero-tagline em{ color:var(--accent); }

/* CTA : fond noir, gris 900 au survol, flèche qui glisse */
.btn-pill{
  background:#000000;
  color:#FFFFFF;
  border:1px solid rgba(255,255,255,0.18);
  padding:14px 26px;
  font-weight:500;
  transition:background 0.3s ease, border-color 0.3s ease;
}
.btn-pill:hover{
  background:var(--gray-900);
  border-color:rgba(255,255,255,0.3);
}
.scroll-hint{ background:linear-gradient(var(--accent), transparent); }

@media (min-width:768px){
  .hero-kicker{ font-size:0.875rem; }
  .hero-band p{ font-size:1rem; }
  .btn-pill{ padding:16px 32px; }
}

/* ---------- Sections courantes ---------- */
.section-pad{ padding:140px 0; }
.about, .services, .contact{ background:#000000; }
.about-text h2,
.section-head h2,
.page-header h1{
  color:#FFFFFF;
  font-weight:500;
  letter-spacing:-0.04em;
  line-height:0.95;
}
.section-head h2{ font-size:clamp(2rem, 4.2vw, 3.3rem); letter-spacing:-0.02em; }
.about-text h2{ font-size:clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing:-0.02em; }
.section-eyebrow,
.about-text .section-eyebrow{
  color:var(--text-muted);
  font-size:0.75rem;
  letter-spacing:0.14em;
}
.divider{ background:var(--accent); }
.about-text p, .point-item p, .service-card p, .contact p{ color:var(--text-muted); }
.point-item h3, .service-card h3{ color:#FFFFFF; font-weight:500; }
.point-mark{ color:var(--accent); border-color:var(--border); }
.about-portrait img{ border-color:var(--border); }

.service-card{
  background:var(--cinematic-glass);
  border:1px solid var(--border);
  border-radius:18px;
}
.service-card:hover{
  background:var(--cinematic-glass-hover);
  border-color:rgba(100,206,251,0.4);
}
.service-link{ color:var(--accent); }
.services .section-eyebrow{ color:var(--text-muted); }
.services .section-head h2{ color:#FFFFFF; }

.btn-primary{
  background:var(--accent);
  color:#000000;
  border-color:var(--accent);
  border-radius:999px;
}
.btn-primary:hover{
  background:var(--accent-light);
  border-color:var(--accent-light);
  color:#000000;
  box-shadow:none;
}
.btn-outline{
  color:#FFFFFF;
  border-color:var(--border);
  border-radius:999px;
}
.btn-outline:hover{ border-color:#FFFFFF; color:#FFFFFF; }

footer{ background:#000000; border-top:1px solid var(--border); }
footer p{ color:var(--text-dim); }
footer span{ color:var(--text-muted); }

/* Champs de formulaire sur fond noir */
input, select, textarea{
  background:transparent !important;
  color:#FFFFFF !important;
  border-color:var(--border) !important;
}
input::placeholder, textarea::placeholder{ color:rgba(255,255,255,0.4) !important; }
label{ color:var(--text-muted) !important; }

/* ---------- Offres : grille et prix en grand ---------- */
.offers-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
  margin-top:64px;
}
.offer-card{
  background:var(--cinematic-glass);
  border:1px solid var(--border);
  border-radius:20px;
  padding:38px 34px;
  display:flex;
  flex-direction:column;
  transition:background 0.35s ease, border-color 0.35s ease;
}
.offer-card:hover{
  background:var(--cinematic-glass-hover);
  border-color:rgba(100,206,251,0.4);
}
.offer-tag{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--accent);
  margin-bottom:18px;
}
.offer-card h3{
  font-size:1.6rem;
  font-weight:500;
  letter-spacing:-0.02em;
  color:#FFFFFF;
  margin-bottom:14px;
}
.offer-card p{
  color:var(--text-muted);
  font-size:0.95rem;
  font-weight:300;
  margin-bottom:28px;
  max-width:46ch;
}
.offer-price{
  font-size:clamp(2.8rem, 5vw, 4rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-0.045em;
  color:#FFFFFF;
  margin-top:auto;
  margin-bottom:20px;
}
.offer-price span{
  font-size:1rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--text-muted);
  margin-left:6px;
}
.offer-price-sm{ font-size:clamp(1.8rem, 3vw, 2.4rem); }
.offers-note{
  color:var(--text-muted);
  font-size:0.95rem;
  margin-bottom:24px;
}
.services-cta{ margin-top:56px; text-align:center; }

@media (max-width:860px){
  .offers-grid{ grid-template-columns:1fr; gap:16px; }
  .offer-card{ padding:30px 26px; }
  .offer-card h3{ font-size:1.35rem; }
}

/* Les titres de section étaient calibrés pour du petit texte : à cette taille
   il leur faut toute la largeur, sinon ils se cassent en trois lignes. */
.section-head{ max-width:none; }
.section-head h2{ max-width:18ch; margin-left:auto; margin-right:auto; }

/* ---------- En-têtes des pages intérieures ---------- */
.page-header{
  padding:200px 0 90px;
  background:#000000;
}
.page-header h1{
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight:400;
  /* Interlignage 0,9 et cremage tres serre etouffaient les titres longs. */
  line-height:1.14;
  letter-spacing:-0.012em;
  color:#FFFFFF;
  max-width:26ch;
  margin-bottom:32px;
}
.page-header .section-eyebrow{
  text-align:left;
  color:var(--text-muted);
  font-size:0.75rem;
  letter-spacing:0.16em;
}
.page-header p{
  color:var(--text-muted);
  font-size:1.05rem;
  font-weight:300;
  max-width:60ch;
}
.page-header .divider{ margin-top:32px; background:var(--accent); }

/* La brillance porte sur un segment de titre : elle doit rester dans le flux
   du texte, pas former un bloc à part. */
.page-header h1 .hero-shine,
.about-text h2 .hero-shine,
.section-head h2 .hero-shine,
.hero-band-left .hero-shine{ display:inline; }

@media (max-width:768px){
  .page-header{ padding:150px 0 64px; }
  .page-header h1{ font-size:clamp(2.2rem, 10vw, 3rem); }
}

/* ---------- Formulaire de contact sur fond noir ---------- */
.contact-detail, .contact-grid p, .form-status{ color:var(--text-muted); }
.field input, .field select, .field textarea{
  border-bottom-color:var(--border) !important;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color:var(--accent) !important;
  outline:none;
}
.field select option{ background:#111827; color:#FFFFFF; }
.submit-row button{
  background:var(--accent);
  color:#000000;
  border:1px solid var(--accent);
  border-radius:999px;
  padding:15px 34px;
  font-weight:600;
  cursor:pointer;
  transition:background 0.3s ease;
}
.submit-row button:hover:not(:disabled){ background:var(--accent-light); }
.submit-row button:disabled{ opacity:0.6; cursor:default; }
.error-msg{ color:var(--error) !important; }

/* Le menu mobile fermé est placé hors écran à droite : sans cela il élargit
   le document. `body` seul ne suffit pas, il faut aussi le poser sur `html`. */
html{ overflow-x:hidden; }

@media (max-width:1023px){
  /* Fermé, le menu ne doit pas non plus être atteignable au clavier. */
  .nav-links{
    visibility:hidden;
    transition:transform 0.4s ease, visibility 0s linear 0.4s;
  }
  .nav-links.open{
    visibility:visible;
    transition:transform 0.4s ease, visibility 0s linear 0s;
  }
}

/* Les en-têtes étaient centrés ; le langage DesignPro aligne à gauche. */
.page-header{ text-align:left; }
.page-header .container{ text-align:left; }
.page-header h1{ margin-left:0; margin-right:0; }
.page-header p{ margin-left:0; margin-right:0; }
.page-header .divider{ margin-left:0; }

/* ---------- Pied de page enrichi ---------- */
footer .container{ text-align:center; }
.footer-links{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 28px;
}
.footer-links a{
  color:var(--text-dim);
  font-size:0.85rem;
  transition:color 0.25s ease;
}
.footer-links a:hover{ color:var(--accent); }

/* ---------- Témoignages ---------- */
.quotes{
  display:grid;
  gap:22px;
  max-width:900px;
  margin:0 auto;
}
.quote{
  background:var(--cinematic-glass);
  border:1px solid var(--border);
  border-radius:20px;
  padding:44px 40px;
}
.quote blockquote{
  color:#FFFFFF;
  font-size:1.15rem;
  font-weight:300;
  line-height:1.65;
  letter-spacing:-0.01em;
}
.quote figcaption{
  margin-top:26px;
  color:var(--accent);
  font-size:0.9rem;
  font-weight:500;
}
.quote figcaption span{
  display:block;
  margin-top:5px;
  color:var(--text-dim);
  font-size:0.82rem;
  font-weight:400;
}

/* ---------- Questions fréquentes ---------- */
.faq-list{
  max-width:820px;
  margin:0 auto;
  display:grid;
  gap:20px;
}
.faq-item{
  border:1px solid var(--border);
  border-radius:20px;
  padding:38px 36px;
  background:var(--cinematic-glass);
}
.faq-item h2{
  color:#FFFFFF;
  font-size:1.45rem;
  font-weight:500;
  letter-spacing:-0.025em;
  margin-bottom:16px;
}
.faq-item p{
  color:var(--text-muted);
  font-weight:300;
  margin-bottom:14px;
}
.faq-item p:last-child{ margin-bottom:0; }
.faq-note{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:0.85rem;
  color:var(--text-dim) !important;
}

/* ---------- Pages légales ---------- */
.legal{ max-width:760px; }
.legal h2{
  color:#FFFFFF;
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:-0.02em;
  margin:44px 0 14px;
}
.legal h2:first-child{ margin-top:0; }
.legal p{
  color:var(--text-muted);
  font-weight:300;
  margin-bottom:14px;
}
.legal a{ color:var(--accent); }
.legal a:hover{ text-decoration:underline; }
/* Marqueur voyant : ces pages ne doivent pas partir en production tant qu'il
   reste un « à compléter ». */
.todo{
  background:var(--error);
  color:#FFFFFF;
  padding:1px 8px;
  border-radius:4px;
  font-size:0.85em;
  font-weight:600;
}

@media (max-width:768px){
  .quote{ padding:32px 26px; }
  .quote blockquote{ font-size:1.02rem; }
  .faq-item{ padding:28px 24px; }
  .faq-item h2{ font-size:1.2rem; }
}

/* Liens contextuels vers les pages de réassurance */
.ctx-link{ margin-top:22px; }
.ctx-link a{ color:var(--accent); font-size:0.95rem; }
.ctx-link a:hover{ text-decoration:underline; }
.ctx-band{
  border-top:1px solid var(--border);
  padding:44px 0;
  text-align:center;
}
.ctx-band p{ color:var(--text-muted); font-size:1rem; }
.ctx-band a{ color:var(--accent); }
.ctx-band a:hover{ text-decoration:underline; }

/* L'en-tête de page et la section suivante cumulaient leurs marges :
   plus de 200px de vide avant le premier contenu. */
.page-header + .section-pad{ padding-top:30px; }

/* ---------- Carte : écran de consentement avant chargement ---------- */
.map-embed{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  min-height:230px;
  display:flex;
}
.map-embed iframe{
  width:100%;
  min-height:230px;
  border:0;
  display:block;
}
.map-consent{
  width:100%;
  background:var(--cinematic-glass);
  border:none;
  cursor:pointer;
  padding:34px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  transition:background 0.3s ease;
  font-family:inherit;
}
.map-consent:hover{ background:var(--cinematic-glass-hover); }
.map-consent-title{
  color:var(--accent);
  font-size:0.98rem;
  font-weight:600;
}
.map-consent-note{
  color:var(--text-dim);
  font-size:0.82rem;
  font-weight:300;
  max-width:38ch;
  line-height:1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONVERSION — porte d'entrée, bandeaux d'appel, réassurance
   ═══════════════════════════════════════════════════════════════════════ */

/* La séance de rencontre : c'est la marche la plus basse, elle passe devant. */
.entry-offer{
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
  background:linear-gradient(120deg, rgba(100,206,251,0.12), rgba(100,206,251,0.03));
  border:1px solid rgba(100,206,251,0.45);
  border-radius:22px;
  padding:40px 42px;
  margin-top:64px;
}
.entry-offer-tag{
  display:block;
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.16em;
  color:var(--accent);
  margin-bottom:14px;
}
.entry-offer h3{
  color:#FFFFFF;
  font-size:1.85rem;
  font-weight:500;
  letter-spacing:-0.03em;
  margin-bottom:12px;
}
.entry-offer p{
  color:var(--text-muted);
  font-weight:300;
  max-width:52ch;
  margin:0;
}
.entry-offer-action{ text-align:right; }
.entry-offer-price{
  font-size:3.4rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-0.045em;
  color:#FFFFFF;
  margin-bottom:18px;
}
.entry-offer-price span{
  font-size:1rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--text-muted);
  margin-left:4px;
}
.entry-offer .reassurance{ text-align:right; }

/* Ligne factuelle du hero : ce qu'elle vend, où, à partir de combien. */
.hero-precision{
  color:var(--text-dim);
  font-size:0.88rem;
  font-weight:300;
  line-height:1.6;
  max-width:56ch;
  margin:0 0 30px;
}

/* Bandeau de fin : personne ne doit finir une page sans savoir quoi faire. */
.cta-band{
  border-top:1px solid var(--border);
  /* 200 px en bas : le texte ne doit jamais descendre dans le fondu vers le pied. */
  padding:110px 0 200px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 100% at 50% 100%, rgba(100,206,251,0.10), rgba(100,206,251,0) 70%);
}
.cta-band h2{
  color:#FFFFFF;
  font-size:clamp(2rem, 4.5vw, 3.2rem);
  font-weight:500;
  letter-spacing:-0.04em;
  line-height:1;
  margin-bottom:18px;
}
.cta-band-note{
  color:var(--text-muted);
  font-weight:300;
  max-width:52ch;
  margin:0 auto 32px;
}

.reassurance{
  margin-top:16px;
  color:var(--text-dim);
  font-size:0.82rem;
  font-weight:300;
  letter-spacing:0.01em;
}
.reassurance-form{ text-align:left; }

@media (max-width:860px){
  .entry-offer{
    grid-template-columns:1fr;
    gap:26px;
    padding:32px 26px;
    text-align:left;
  }
  .entry-offer-action{ text-align:left; }
  .entry-offer .reassurance{ text-align:left; }
  .entry-offer h3{ font-size:1.5rem; }
  .entry-offer-price{ font-size:2.8rem; }
  .cta-band{ padding:80px 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINITION — flou de bas de hero, verre liquide, apparition en flou montant
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Au lieu d'assombrir la vidéo, on la floute par le bas. Elle garde ses
   couleurs, le texte reste lisible. Le masque fait disparaître le flou vers
   le haut. Un voile très léger reste, uniquement pour garantir le contraste
   du titre sur les images claires. */
.hero-veil{
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 62%);
  mask-image:linear-gradient(to top, #000 0%, transparent 62%);
  background:
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 55%, transparent 100%);
}

/* 2. Verre liquide : fond quasi transparent, flou léger, et un liseré qui
   s'illumine en haut et en bas puis disparaît au milieu — un reflet. */
.liquid-glass{
  background:rgba(255,255,255,0.01);
  background-blend-mode:luminosity;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);
  position:relative;
  overflow:hidden;
}
.liquid-glass::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

/* Application : navigation, boutons secondaires, cartes */
.nav-links{ border:none; }
.btn-pill{ border:none; background:rgba(255,255,255,0.01); }
.btn-pill:hover{ background:rgba(255,255,255,0.06); }
.offer-card, .faq-item, .quote, .service-card{ border:none; }
.offer-card::before, .faq-item::before, .quote::before, .service-card::before{ opacity:0.55; }
.map-consent{ border-radius:18px; }

/* 3. Apparition : les éléments émergent d'un flou en montant. */
.reveal{
  opacity:0;
  filter:blur(20px);
  transform:translateY(40px);
  transition:opacity 1s ease-out, filter 1s ease-out, transform 1s ease-out;
}
.reveal.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}

/* Le hero est visible d'emblée : ses éléments s'animent au chargement,
   en cascade, plutôt qu'au défilement. */
@keyframes blurFadeUp{
  from{ opacity:0; filter:blur(20px); transform:translateY(40px); }
  to{ opacity:1; filter:blur(0); transform:translateY(0); }
}
.hero-band, .hero-kicker, .hero-video .hero-title,
.hero-video .hero-tagline, .hero-precision, .btn-pill{
  opacity:0;
  animation:blurFadeUp 1s ease-out forwards;
}
.hero-band{ animation-delay:0.1s; }
.hero-kicker{ animation-delay:0.25s; }
.hero-video .hero-title{ animation-delay:0.4s; }
.hero-video .hero-tagline{ animation-delay:0.55s; }
.hero-precision{ animation-delay:0.7s; }
.hero .btn-pill{ animation-delay:0.85s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ filter:none; transform:none; transition:opacity 0.3s ease; }
  .hero-band, .hero-kicker, .hero-video .hero-title,
  .hero-video .hero-tagline, .hero-precision, .btn-pill{
    animation:none;
    opacity:1;
  }
}

/* La porte d'entrée doit rester la carte la plus visible : son reflet est bleu,
   pas blanc comme les autres. */
.entry-offer::before{
  background:linear-gradient(180deg,
    rgba(100,206,251,0.85) 0%,
    rgba(100,206,251,0.35) 22%,
    rgba(100,206,251,0.10) 45%,
    rgba(100,206,251,0.10) 55%,
    rgba(100,206,251,0.35) 78%,
    rgba(100,206,251,0.85) 100%);
}
.entry-offer{
  background:linear-gradient(120deg, rgba(100,206,251,0.14), rgba(100,206,251,0.03));
}

/* Le masque du .hero-veil s'applique à tout l'élément : il efface donc aussi
   son fond au-dessus de 62 %. Le flou masqué et le voile doivent être deux
   couches distinctes.
   .hero-veil = le flou, masqué, en bas seulement.
   .hero-video::after = le voile, non masqué, là où se trouve le texte. */
.hero-veil{ background:none; }

.hero-video::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to top, rgba(247,239,228,1) 0px, rgba(247,239,228,0.945) 15px, rgba(247,239,228,0.85) 34px, rgba(247,239,228,0.7) 57px, rgba(247,239,228,0.5) 84px, rgba(247,239,228,0.3) 110px, rgba(247,239,228,0.14) 137px, rgba(247,239,228,0.045) 163px, rgba(247,239,228,0) 190px),
    linear-gradient(to bottom, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.40) 48%, rgba(0,0,0,0.14) 76%, rgba(0,0,0,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.28) 58%, rgba(0,0,0,0.06) 100%);
}

/* .liquid-glass est déclaré après la règle du menu mobile et lui vole sa
   position fixed et son fond opaque. On les lui rend, avec une spécificité
   supérieure. Sans cela le menu reste dans le flux et écrase le logo. */
@media (max-width:1023px){
  .nav-links.liquid-glass{
    position:fixed;
    background:var(--nav-mobile-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  /* Le reflet de verre n'a pas de sens sur un menu plein écran. */
  .nav-links.liquid-glass::before{ display:none; }
}
/* Le logo ne doit jamais se replier. */
.logo{ flex-shrink:0; white-space:nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   HERO « GRILLE ET FILAMENTS » — 2026-08-24
   Transposé en vanilla d'un prompt React/Tailwind. Périmètre retenu par
   Laurent : vidéo, grille, carte biseautée. Pas de nœuds ni de connecteurs.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---------- Navigation plate ---------- */
/* On ne touche NI au HTML du menu mobile NI à sa media query : seul
   l'habillage desktop change. La leçon du 5 août tient toujours. */
@media (min-width:1024px){
  .nav-links.nav-flat{
    border:none;
    border-radius:0;
    padding:0;
    gap:40px;
    background:transparent;
  }
  .nav-links.nav-flat a{
    padding:0;
    border-radius:0;
    font-size:0.8125rem;           /* 13px */
    line-height:15.6px;
  }
  .nav-links.nav-flat .nav-cta{
    padding:0 !important;
    border-radius:0 !important;
    font-size:0.8125rem !important;
  }
}
.nav-num{
  color:rgba(100,206,251,0.8);
  margin-right:3px;
}
/* En menu mobile les numéros restent, à la même échelle que le libellé. */
@media (max-width:1023px){
  .nav-num{ font-size:0.875rem; }
}

/* ---------- Voile ---------- */
/* La vidéo des filaments est déjà noire, le sujet est lumineux et décentré
   vers la droite. Le voile de la vidéo précédente (0,82 à gauche) effaçait
   les fleurs : il est ramené au minimum nécessaire à la lecture du texte. */
.hero-veil{
  background:
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 42%, rgba(0,0,0,0) 72%),
    linear-gradient(to top, rgba(0,0,0,0.62) 0%, transparent 38%);
}

/* ---------- Grille ---------- */
.hero-grid{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.hero-grid span{ position:absolute; display:block; }

.grid-v{
  top:0;
  width:1px;
  height:100%;
  background:rgba(255,255,255,0.04);
  opacity:0;
  transform-origin:top;
  animation:gridRevealV 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
.grid-h{
  left:0;
  height:1px;
  width:100%;
  background:rgba(255,255,255,0.04);
  opacity:0;
  transform-origin:left;
  animation:gridRevealH 1.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
/* La croix : deux barres décalées de la moitié de leur longueur, pour que
   le centre du signe tombe exactement sur l'intersection. */
.grid-plus{
  width:0; height:0;
  opacity:0;
  animation:plusIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
.grid-plus::before,
.grid-plus::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,0.7);
}
.grid-plus::before{ width:10px; height:1px; left:-5px; top:0; }
.grid-plus::after{ width:1px; height:10px; left:0; top:-5px; }

@keyframes gridRevealV{ from{ opacity:0; transform:scaleY(0); } to{ opacity:1; transform:scaleY(1); } }
@keyframes gridRevealH{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:scaleX(1); } }
@keyframes plusIn{ from{ opacity:0; transform:scale(0.85); } to{ opacity:1; transform:scale(1); } }

/* ---------- Bas du hero ---------- */
.hero-foot{
  position:absolute;
  left:20px; right:20px; bottom:20px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

/* Bouton plein accent, coins carrés : le seul aplat de couleur du hero. */
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--accent);
  color:#000000;
  padding:10px 16px;
  border-radius:0;
  text-decoration:none;
  transition:background 0.3s ease;
  opacity:0;
  animation:heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 900ms forwards;
}
.hero-cta:hover{ background:var(--accent-light); }
.hero-cta-star{ font-size:16px; line-height:1; }
.hero-cta-label{
  font-size:0.75rem;
  line-height:15.6px;
  text-transform:uppercase;
  letter-spacing:0.025em;
  font-weight:500;
}

/* Carte à coin inférieur gauche biseauté. */
.hero-card{
  max-width:280px;
  opacity:0;
  animation:heroSlideRight 0.8s cubic-bezier(0.16,1,0.3,1) 1100ms forwards;
}
.hero-card-badge{
  display:inline-block;
  background:var(--accent);
  color:#000000;
  font-size:0.75rem;
  line-height:15.6px;
  padding:2px 6px;
  margin-bottom:10px;
  border-radius:0;
}
.hero-card-body{ position:relative; padding:20px; }
.hero-card-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.hero-card-text{
  position:relative;
  color:var(--text-muted);
  font-size:0.8125rem;
  line-height:18px;
  margin:0 0 18px;
}
.hero-card-text em{ color:var(--accent); font-style:normal; }
.hero-card-link{
  position:relative;
  color:var(--accent);
  font-size:0.8125rem;
  line-height:15.6px;
  text-decoration:none;
}
.hero-card-link:hover{ text-decoration:underline; }

@keyframes heroFadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes heroSlideRight{ from{ opacity:0; transform:translateX(20px); } to{ opacity:1; transform:translateX(0); } }

/* Sous 640px la carte disparaît : le bouton doit rester la seule évidence. */
@media (max-width:639px){
  .hero-card{ display:none; }
  /* Le bouton etait pose en absolu au bas du hero, exactement sous le bandeau
     de consentement, qui le masquait entierement tant quon navait pas
     repondu. Remis dans le flux, il vient juste sous la ligne de precision. */
  .hero-foot{
    position:static;
    left:auto; right:auto; bottom:auto;
    margin-top:26px;
    padding:0;
  }
  .hero-video{ padding-bottom:96px; }
}
@media (min-width:768px){
  .hero-foot{
    left:35px; right:35px; bottom:35px;
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:0;
  }
  .hero-cta{ padding:12px 20px; }
  .hero-cta-label{ font-size:0.8125rem; }
}

/* Le bouton d'origine vivait dans .hero-inner ; il est passé dans .hero-foot.
   On redonne de l'air sous la ligne de précision, qui ferme maintenant le bloc. */
.hero-video .hero-inner{ padding-bottom:0; }
.hero-precision{ margin-bottom:0; }

/* ---------- Mouvement réduit ---------- */
/* Tout ce qui est ajouté ci-dessus s'affiche d'emblée, sans entrée animée. */
@media (prefers-reduced-motion:reduce){
  .grid-v, .grid-h, .grid-plus,
  .hero-cta, .hero-card{
    animation:none;
    opacity:1;
    transform:none;
  }
}

/* --- Reprises du 24 août, après lecture à 1440px --- */

/* Le badge tient sur une ligne : sur deux, à 2px de padding vertical,
   les lignes se touchaient et devenaient illisibles. */
.hero-card-badge{
  padding:4px 8px;
  white-space:nowrap;
  letter-spacing:0.01em;
}

/* La bande haute et le sur-titre se suivaient de trop près. */
.hero-band{ margin-bottom:6px; }

/* Un halo sombre derrière le titre. Mesuré sur les 10 secondes : 0,55 % des
   pixels de la zone du titre passent sous le seuil de contraste de 3,0, entre
   0,75 s et 2 s, quand une fleur lumineuse passe derrière les lettres.
   On traite le texte, pas la vidéo : réassombrir le voile aurait effacé les
   filaments, qui sont tout l'intérêt de cette image.
   `filter: drop-shadow` et non `text-shadow` : le second se peindrait à travers
   « votre fil. », dont le remplissage est transparent (dégradé découpé). */
.hero-video .hero-title{
  filter:
    drop-shadow(0 0 10px rgba(0,0,0,0.85))
    drop-shadow(0 2px 24px rgba(0,0,0,0.55));
}
.hero-video .hero-precision,
.hero-video .hero-kicker,
.hero-band p{
  text-shadow:0 1px 12px rgba(0,0,0,0.75);
}

/* Le fond du menu mobile laissait lire le titre du hero en filigrane.
   Le flou du prompt règle ça. Sans danger ici : .nav-links n'a aucun enfant
   en `position:fixed`, seul cas où un backdrop-filter change le référentiel. */
@media (max-width:1023px){
  .nav-links{
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   PALETTE « SIRÈNE » ET NACRÉ — 2026-09-11
   Choix d'Eulalie : une palette Pinterest (écailles de sirène) en base,
   avec des nuances nacrées. Mesurées sur l'image : bleu canard #347E87,
   bleu nuit #172F39, vert d'eau #9AC8BD, or #E8BB60, vieux rose #C2716E.
   Retour d'Eulalie (même jour) : « trop pâle et froid, où est le rose,
   l'orange ? ». L'or reste la seule couleur d'ACTION (boutons, liens) ;
   rose, pêche, corail et bleu canard deviennent des couleurs de FOND.
   Le site passe en clair. Trois zones restent sombres (bleu nuit) : le hero
   vidéo, la section des offres de l'accueil, le pied de page.
   Les couleurs sont portées par des variables redéfinies par zone : un même
   composant se lit sur fond clair comme sur fond sombre.
   Pour revenir à l'ancien rendu : supprimer ce bloc.
   Contrastes (WCAG) : texte 12,3 · texte secondaire 7,6 · texte discret 4,8
   · or texte 4,9 · or sur bleu nuit 7,8 · bouton or 7,8 · titre dégradé 3,4
   (grand texte, seuil 3).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --navy:#172F39;
  --teal:#347E87;
  --mint:#9AC8BD;
  --gold:#E8BB60;
  --rose:#C2716E;
  --rose-pale:#F2DCD6;
  --peach:#F8E3CF;
  --coral:#F0B49E;
  --teal-deep:#276069;

  --bg:#F7EFE4;                  /* ivoire chaud : fond de page et sections claires */
  --bg-alt:#F8E3CF;              /* pêche */
  --bg-alt-hover:#F4D9C1;
  --surface:#FCF6F0;             /* cartes */
  --heading:#172F39;
  --text:#172F39;
  --text-muted:#34505B;
  --text-dim:#4B636C;
  --border:rgba(23,47,57,0.14);
  --border-soft:rgba(23,47,57,0.22);
  --border-outline:rgba(23,47,57,0.30);
  --accent:#E8BB60;              /* or : aplats, filets, boutons */
  --accent-text:#7E5712;         /* or foncé : texte sur fond clair */
  --accent-light:#F0CD85;
  --accent-dark:#C99A3E;
  --accent-soft:rgba(232,187,96,0.18);
  --accent-glow-1:rgba(154,200,189,0.16);
  --accent-glow-2:rgba(232,187,96,0.08);
  --accent-glow-3:rgba(232,187,96,0.03);
  --glass-edge:rgba(23,47,57,0.10);
  --cinematic-bg:#172F39;
  --cinematic-glass:#FCF6F0;
  --cinematic-glass-hover:#FEFAF5;
  --nav-bg-scrolled:rgba(248,238,231,0.92);
  --nav-mobile-bg:rgba(248,238,231,0.97);
  --text-on-dark:#F7F3EA;
  --text-on-dark-muted:rgba(247,243,234,0.85);
  --error:#B3261E;
  --gray-900:#0F222B;
  --nacre:
    radial-gradient(ellipse 70% 60% at 10% 0%, rgba(232,187,96,0.20), rgba(232,187,96,0) 60%),
    radial-gradient(ellipse 60% 55% at 92% 12%, rgba(232,187,96,0.26), rgba(232,187,96,0) 60%),
    radial-gradient(ellipse 70% 60% at 70% 100%, rgba(154,200,189,0.30), rgba(154,200,189,0) 65%),
    radial-gradient(ellipse 50% 50% at 25% 85%, rgba(240,180,158,0.28), rgba(240,180,158,0) 65%);
}

/* Zones sombres : mêmes variables, valeurs inversées. */
.hero-video,
.services,
footer,
body.home .navbar:not(.scrolled){
  --heading:#F7F3EA;
  --text:#F4F0E8;
  --text-muted:rgba(244,240,232,0.82);
  --text-dim:rgba(244,240,232,0.62);
  --border:rgba(244,240,232,0.16);
  --border-soft:rgba(244,240,232,0.22);
  --border-outline:rgba(244,240,232,0.30);
  --accent-text:#E8BB60;
  --accent-glow-1:rgba(52,126,135,0.35);
  --glass-edge:rgba(244,240,232,0.40);
  --cinematic-glass:rgba(244,240,232,0.05);
  --cinematic-glass-hover:rgba(244,240,232,0.09);
  --nav-mobile-bg:rgba(23,47,57,0.97);
}
/* Bleu canard profond : l'or passe en or clair pour rester lisible (4,8). */
.services{
  --text-muted:rgba(247,243,234,0.92);
  --text-dim:rgba(247,243,234,0.84);
  --accent-text:#F3D08C;
  --cinematic-glass:rgba(247,243,234,0.07);
  --cinematic-glass-hover:rgba(247,243,234,0.12);
}
/* Corail : l'or clair ne tient pas, le texte fin passe en bleu nuit. */
.cta-band{
  --text-dim:#34505B;
  --accent-text:#172F39;
}

/* ---------- Fonds ---------- */
body{ background:var(--bg); color:var(--text-muted); }
.hero-video{ background:var(--navy); }
.services{
  /* Un seul degrade : le canard apparait et disparait dans sa propre transparence,
     le fond de page se voit des deux cotes, donc aucun raccord a rater.
     Les halos sont portes par ::before, qui est masque aux bords. */
  background:transparent;
  background-image:linear-gradient(to bottom, rgba(35,82,88,0) 0px, rgba(35,82,88,0.055) 35px, rgba(35,82,88,0.15) 79px, rgba(35,82,88,0.3) 132px, rgba(35,82,88,0.5) 194px, rgba(35,82,88,0.7) 255px, rgba(35,82,88,0.86) 317px, rgba(35,82,88,0.955) 378px, rgba(35,82,88,1) 440px, rgba(35,82,88,1) calc(100% - 440px), rgba(35,82,88,0.955) calc(100% - 378px), rgba(35,82,88,0.86) calc(100% - 317px), rgba(35,82,88,0.7) calc(100% - 255px), rgba(35,82,88,0.5) calc(100% - 194px), rgba(35,82,88,0.3) calc(100% - 132px), rgba(35,82,88,0.15) calc(100% - 79px), rgba(35,82,88,0.055) calc(100% - 35px), rgba(35,82,88,0) calc(100% - 0px));
}
.about{ background:transparent; }
.about.section-pad{ padding-top:200px; }
@media (max-width:768px){
  .about.section-pad{ padding-top:130px; }
}
.contact{ background:var(--bg); }
/* Le bandeau de titre des pages interieures fond vers le fond de page, comme le
   hero de l'accueil : son halo s'eteint au lieu de se couper net a son bord bas. */
.page-header{ background:transparent; position:relative; overflow:hidden; }
.page-header::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:var(--nacre);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 45%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.18) 89%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, #000 0, #000 45%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.18) 89%, rgba(0,0,0,0) 100%);
}
.page-header > *{ position:relative; z-index:1; }
footer{
  background:var(--navy);
  padding-top:64px;
  border-top:none;
}
.cta-band{
  background:transparent;
  background-image:
    linear-gradient(to top, rgba(23,47,57,1) 0px, rgba(23,47,57,0.945) 11px, rgba(23,47,57,0.85) 25px, rgba(23,47,57,0.7) 42px, rgba(23,47,57,0.5) 62px, rgba(23,47,57,0.3) 81px, rgba(23,47,57,0.14) 101px, rgba(23,47,57,0.045) 120px, rgba(23,47,57,0) 140px),
    linear-gradient(to bottom, rgba(242,228,206,0) 0px, rgba(242,228,206,0.055) 16px, rgba(242,228,206,0.15) 36px, rgba(242,228,206,0.3) 60px, rgba(242,228,206,0.5) 88px, rgba(242,228,206,0.7) 116px, rgba(242,228,206,0.86) 144px, rgba(242,228,206,0.955) 172px, rgba(242,228,206,1) 200px),
    /* Le halo dore culminait sur le bord bas et dessinait un trait la ou le pied
       repart sans lui : il remonte au centre de la bande. */
    radial-gradient(ellipse 62% 44% at 50% 38%, rgba(232,187,96,0.30), rgba(232,187,96,0) 72%),
    radial-gradient(ellipse 50% 40% at 12% 4%, rgba(35,82,88,0.16), rgba(35,82,88,0) 72%);
  border-top:none;
}
/* Sur le corail, le bouton or se perdrait : bouton bleu nuit, texte or. */
.cta-band .btn-primary{ background:var(--navy); border-color:var(--navy); color:var(--gold); }
.cta-band .btn-primary:hover{ background:var(--gray-900); border-color:var(--gray-900); color:var(--accent-light); }

/* ---------- Titres ---------- */
.about-text h2, .section-head h2, .page-header h1,
.services .section-head h2, .point-item h3, .service-card h3,
.offer-card h3, .offer-price, .entry-offer h3, .entry-offer-price,
.quote blockquote, .faq-item h2, .legal h2, .cta-band h2{
  color:var(--heading);
}
.hero-video .hero-title{ color:var(--text-on-dark); }

/* Balayage or → ivoire → or sur le hero (fond sombre). */
.hero-shine{
  background:linear-gradient(100deg, #E8BB60 32%, #F7F3EA 48%, #E8BB60 64%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* Sur fond clair, l'ivoire disparaîtrait : balayage or foncé → or. */
.page-header h1 .hero-shine,
.about-text h2 .hero-shine,
.section-head h2 .hero-shine{
  background:linear-gradient(100deg, #7E5712 32%, #A87A26 48%, #7E5712 64%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
}
@media (prefers-reduced-motion:reduce){
  .hero-shine{ -webkit-text-fill-color:var(--gold); color:var(--gold); }
  .page-header h1 .hero-shine{ -webkit-text-fill-color:var(--accent-text); color:var(--accent-text); }
}

/* ---------- Navigation ---------- */
.nav-toggle span{ background:var(--text); }
.nav-num{ color:var(--accent-text); }
.navbar.scrolled{ box-shadow:0 1px 0 var(--border); }

/* ---------- Boutons ---------- */
.btn-primary,
.submit-row button,
.hero-cta{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy);
}
.btn-primary:hover,
.submit-row button:hover:not(:disabled),
.hero-cta:hover{
  background:var(--accent-light);
  border-color:var(--accent-light);
  color:var(--navy);
}
.submit-row button:hover:not(:disabled){ color:var(--navy); }
.hero-card-badge{ background:var(--gold); color:var(--navy); }
.hero-card-frame polygon{ stroke:var(--gold); }
.btn-outline{ color:var(--heading); border-color:var(--border-outline); }
.btn-outline:hover{ color:var(--heading); border-color:var(--heading); }
.btn-pill{ background:var(--navy); color:var(--text-on-dark); }
.btn-pill:hover{ background:var(--gray-900); }

/* ---------- Liens en or ---------- */
.service-link, .offer-tag, .entry-offer-tag, .quote figcaption,
.legal a, .ctx-link a, .ctx-band a, .map-consent-title,
.footer-links a:hover, .hero-card-text em, .hero-card-link{
  color:var(--accent-text);
}

/* ---------- Cartes : surface nacrée sur fond clair, verre sur fond sombre ---------- */
.liquid-glass{ background:var(--cinematic-glass); }
.offer-card, .faq-item, .quote, .service-card, .map-consent{
  background:var(--cinematic-glass);
  box-shadow:0 1px 2px rgba(23,47,57,0.05), 0 10px 30px rgba(23,47,57,0.06);
}
.offer-card, .faq-item, .quote, .map-consent{
  /* Dégradé « écaille » : rose, pêche, vert d'eau. */
  background-image:linear-gradient(145deg, #F6DDD6 0%, #F9E7D2 50%, #E0EFE8 100%);
}
.services .offer-card, .services .service-card{
  background:var(--cinematic-glass);
  background-image:none;
  box-shadow:inset 0 1px 1px rgba(244,240,232,0.1);
}
.offer-card:hover, .service-card:hover{ border-color:rgba(232,187,96,0.45); }
.services .offer-card:hover{ background:var(--cinematic-glass-hover); }
.liquid-glass::before{
  background:linear-gradient(180deg,
    var(--glass-edge) 0%,
    transparent 30%,
    transparent 70%,
    var(--glass-edge) 100%);
}
/* Le menu ne porte pas de reflet. */
.nav-links.liquid-glass{ background:transparent; box-shadow:none; }
.nav-links.liquid-glass::before{ display:none; }

/* La porte d'entrée garde un reflet or, plus visible que les autres cartes. */
.entry-offer{
  background:linear-gradient(120deg, rgba(232,187,96,0.16), rgba(232,187,96,0.04));
}
.entry-offer::before{
  background:linear-gradient(180deg,
    rgba(232,187,96,0.85) 0%,
    rgba(232,187,96,0.30) 22%,
    rgba(232,187,96,0.08) 45%,
    rgba(232,187,96,0.08) 55%,
    rgba(232,187,96,0.30) 78%,
    rgba(232,187,96,0.85) 100%);
}

/* ---------- Formulaire ---------- */
input, select, textarea{ color:var(--text) !important; }
input::placeholder, textarea::placeholder{ color:rgba(23,47,57,0.45) !important; }
.field select option{ background:var(--surface); color:var(--navy); }
.todo{ color:var(--bg); }

/* ---------- Pied de page ---------- */
footer p{ color:var(--text-dim); }
footer span{ color:var(--text-muted); }

/* ---------- Bandeau cookies ---------- */
.cookie-banner{ background:var(--surface); box-shadow:0 12px 32px rgba(23,47,57,0.18); }

/* ═══════════════════════════════════════════════════════════════════════
   MENU « INITIATIONS » ET PAGE DE L'INITIATION — 2026-09-11
   ═══════════════════════════════════════════════════════════════════════ */

/* Sous-menu : déroulant au survol ou au clavier sur ordinateur,
   toujours déplié (en retrait) dans le menu mobile. Le lien parent mène
   aussi à la page, pour les écrans tactiles. */
.nav-has-sub{ position:relative; }
.nav-sub{ display:none; }
@media (min-width:1024px){
  /* .liquid-glass coupe ce qui déborde : le sous-menu en a besoin. */
  .nav-links.liquid-glass{ overflow:visible; }
  .nav-sub{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    padding-top:12px;
    z-index:1100;
  }
  .nav-has-sub:hover .nav-sub,
  .nav-has-sub:focus-within .nav-sub{ display:block; }
  .nav-sub a{
    display:block;
    white-space:nowrap;
    padding:12px 18px !important;
    border-radius:12px !important;
    background:var(--nav-mobile-bg);
    box-shadow:0 10px 30px rgba(23,47,57,0.14);
  }
}
@media (max-width:1023px){
  .nav-sub{ display:block; margin-top:10px; text-align:center; }
  .nav-sub a{ font-size:0.9rem !important; color:var(--text-dim) !important; }
}

/* Photos de la page d'initiation : rectangles arrondis, pas de cercle. */
.initiation-photo{ margin:0; }
.initiation-photo img{
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:18px;
}
.initiation-closing{ max-width:780px; margin:48px auto 0; }

/* La grille à 2 colonnes ne se repliait pas sur mobile : `.about-grid.about-grid-2col`
   (2 classes) l'emportait sur le repli `.about-grid` (1 classe) à 900px.
   Touchait aussi « Pour qui ? ». */
@media (max-width:900px){
  .about-grid.about-grid-2col{ grid-template-columns:1fr; gap:40px; }
}

/* Accueil : 3 offres dans une grille à 2 colonnes (cercle de parole retiré
   le 11/09). La dernière prend toute la largeur au lieu de rester seule. */
@media (min-width:861px){
  .offers-grid .offer-card:last-child:nth-child(odd){ grid-column:1 / -1; }
}


/* Un seul temoignage sur « Mon accompagnement » : il se centre au lieu de
   s'etirer sur toute la largeur de la grille. */
.testimonial-grid-solo{
  grid-template-columns:minmax(0, 620px);
  justify-content:center;
}


/* Sur le fond canard de la section Services, l'or fonce des titres clairs
   ne tiendrait pas : le balayage repasse en or clair. */
.services .section-head h2 .hero-shine{
  background:linear-gradient(100deg, #E8BB60 32%, #F7F3EA 48%, #E8BB60 64%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
}


/* Le bandeau d'appel suit la meme regle que les autres titres. Sur le sable,
   le balayage reste dans les ors fonces : 5,1 au depart, 4,0 au point le plus
   clair, la ou l'or moyen des fonds ivoire serait tombe a 3,1. */
.cta-band h2 .hero-shine{
  display:inline;
  background:linear-gradient(100deg, #7E5712 32%, #8C601A 48%, #7E5712 64%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}