/* ===================================================================
   Souvenir d'un moment — Styles
   Noir profond en fond principal, blanc pour le texte,
   violet / lavande du logo en accent lumineux.
   Style photographe haut de gamme, glassmorphism, mobile-first.
   =================================================================== */

:root{
  /* Accent unique : le violet / lavande du logo "Souvenir d'un moment" */
  --rose:#c4a2ff;        /* accent lavande clair */
  --rose-2:#dccbff;      /* accent lavande tres clair */
  --violet:#b18aff;      /* violet moyen */
  --violet-2:#c9b6ff;    /* lavande claire */
  --violet-deep:#7c3aed; /* violet profond */
  --violet-glow:rgba(150,110,255,1);
  --violet-rgb:177,138,255;
  --ink:#f2eefb;         /* texte courant : blanc casse */
  --title:#ffffff;       /* titres : blanc pur */
  --noir:#030207;        /* noir profond : couleur principale du site */
  --muted:#a79fbd;       /* texte secondaire */
  --bg:#030207;
  --bg-2:#0a0616;
  --bg-deep:#020105;
  --white:#ffffff;
  --glass:rgba(255,255,255,.022);
  --glass-2:rgba(255,255,255,.012);
  --glass-brd:rgba(var(--violet-rgb),.13);
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 28px 62px rgba(0,0,0,.66);
  --shadow-soft:0 10px 30px rgba(0,0,0,.5);
  --glow:0 0 30px rgba(150,110,255,.30);
  --grad:linear-gradient(115deg,#8b5cf6 0%,#a78bfa 50%,#dccbff 100%);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background-color:#030207;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* Fond : NOIR PROFOND (couleur principale du site) + deux lueurs violettes
   tres diffuses. Aucun aplat violet : la couleur ne vient que de la lumiere.
   Pose en calque fixe : meme rendu sur ordinateur et sur telephone
   (le fond "fixed" classique est mal gere par les telephones). */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:#030207;
  background-image:
    radial-gradient(1200px 780px at 84% -10%, rgba(124,58,237,.20), rgba(3,2,7,0) 68%),
    radial-gradient(900px 640px at 2% 108%, rgba(88,50,168,.15), rgba(3,2,7,0) 70%),
    url("images/fond-nebule.jpg");
  background-size:auto, auto, cover;
  background-position:center, center, center top;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration:none}
a:hover{color:var(--rose)}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800;color:var(--title)}
h1{font-size:clamp(1.9rem,7vw,3.4rem)}
h2{font-size:clamp(1.5rem,5.4vw,2.4rem)}
h3{font-size:clamp(1.1rem,4vw,1.35rem)}
p{margin:0 0 1rem}
ul{margin:0 0 1rem;padding-left:1.1rem}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.section{padding:44px 0}
.section-tight{padding:30px 0}
@media(min-width:768px){
  .section{padding:80px 0}
  .wrap{padding:0 24px}
}

/* ---------- Titres de section ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--rose);
  background:none;
  border:0;
  padding:0;
  border-radius:0;
  margin-bottom:16px;
}
/* Petit filet lumineux violet a la place de la pastille */
.eyebrow::before{
  content:"";
  width:26px;height:1px;
  flex:0 0 26px;
  background:linear-gradient(90deg,rgba(196,162,255,0) 0%,var(--rose) 100%);
  box-shadow:0 0 10px rgba(150,110,255,.7);
}
.section-head{max-width:660px;margin-bottom:26px}
.section-head p{color:var(--muted)}
/* Icone de prestation : filet violet lumineux, pas de pastille pleine */
.ico{
  width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  border-radius:12px;
  background:rgba(124,58,237,.14);
  border:1px solid rgba(196,162,255,.34);
  box-shadow:0 0 22px rgba(124,58,237,.22) inset;
  margin-bottom:16px;
}
.gradient-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 18px;
  font-size:.92rem;
  font-weight:600;
  line-height:1.2;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-align:center;
}
.btn-primary{
  background:linear-gradient(115deg,#6d28d9 0%,#8b5cf6 58%,#a78bfa 100%);
  color:#fff;
  box-shadow:0 8px 22px rgba(124,58,237,.4), 0 0 0 1px rgba(196,162,255,.3);
}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px rgba(124,58,237,.5), 0 0 24px rgba(168,120,255,.42)}
/* Bouton secondaire : contour violet fin sur fond noir, aucun aplat */
.btn-ghost{
  background:rgba(3,2,7,.42);
  color:var(--violet-2);
  border-color:rgba(178,138,255,.42);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{color:#fff;background:rgba(124,58,237,.16);border-color:rgba(196,162,255,.74);transform:translateY(-2px)}
.btn-sm{padding:7px 14px;font-size:.85rem}
.btn-block{width:100%}

/* ---------- Navigation (transparente, fond visible) ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.nav.scrolled{
  background:rgba(3,2,7,.78);
  backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid rgba(196,162,255,.14);
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.nav-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:12px;
  padding-bottom:12px;
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:1rem;letter-spacing:-.01em}
.nav.scrolled .brand{color:var(--ink)}
.brand small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
/* Logo original du client, affiche tel quel sur le noir (aucune pastille,
   aucun fond : le logo est lumineux et se detache seul). */
.brand-dot{
  width:52px;height:52px;flex:0 0 52px;border-radius:0;
  background:url("images/logo.png") center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(150,110,255,.55));
  position:relative;
}
.brand-dot::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,110,255,.22),rgba(150,110,255,0) 68%);
  animation:haloPulse 7s ease-in-out infinite;
  pointer-events:none;
}
@keyframes haloPulse{
  0%,100%{opacity:.45}
  50%{opacity:1}
}
.brand span{line-height:1.15}
.brand small{color:var(--violet-2);opacity:.9}
.brand{font-size:1.05rem;letter-spacing:.01em}
.burger{
  width:40px;height:40px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:rgba(3,2,7,.42);
  border:1px solid rgba(255,255,255,.28);
  border-radius:9px;
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.nav.scrolled .burger{background:rgba(3,2,7,.6);border-color:rgba(196,162,255,.3)}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;transition:transform .25s ease,opacity .2s ease}
.nav.scrolled .burger span{background:var(--violet)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu{
  position:absolute;
  left:12px;right:12px;
  top:calc(100% + 6px);
  display:none;
  flex-direction:column;
  gap:2px;
  padding:14px;
  background:rgba(3,2,7,.96);
  backdrop-filter:blur(18px) saturate(130%);
  border:1px solid rgba(196,162,255,.18);
  border-radius:var(--radius);
  box-shadow:0 22px 50px rgba(0,0,0,.7);
}
.menu.open{display:flex}
.menu a{
  padding:11px 8px;
  color:var(--ink);
  font-weight:600;
  font-size:.98rem;
  border-radius:var(--radius-sm);
}
.menu a:hover{background:rgba(124,58,237,.14);color:var(--rose)}
.menu a.active{color:var(--rose)}
.menu .btn{margin-top:8px}
@media(min-width:900px){
  .burger{display:none}
  .menu{
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:4px;
    background:none;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    padding:0;
  }
  .menu a{padding:8px 12px;color:#fff;font-size:.92rem}
  .nav.scrolled .menu a{color:var(--ink)}
  .menu a:hover{background:rgba(124,58,237,.2);color:#fff}
  .nav.scrolled .menu a:hover{background:rgba(124,58,237,.16);color:var(--rose)}
  .menu a.active{color:#fff}
  .nav.scrolled .menu a.active{color:var(--rose)}
  .menu .btn{margin-top:0;margin-left:8px}
  .menu .btn,.menu .btn:hover{color:#fff}
}

/* ---------- Hero avec image d'en-tête ---------- */
.hero{
  position:relative;
  min-height:94vh;
  display:flex;
  align-items:center;
  padding:126px 0 78px;
  overflow:hidden;
  isolation:isolate;
  background:#030207;
}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* La photo reste GRANDE et lisible : simple voile noir degressif
   (aucun filtre violet sur toute l'image). */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(3,2,7,.90) 0%,rgba(3,2,7,.66) 34%,rgba(3,2,7,.20) 64%,rgba(3,2,7,.04) 100%),
    linear-gradient(180deg,rgba(3,2,7,.44) 0%,rgba(3,2,7,.18) 34%,rgba(3,2,7,.64) 76%,rgba(3,2,7,.98) 100%);
}
@media(max-width:767px){
  .hero{min-height:auto;padding:114px 0 66px}
  .hero-bg img{object-position:center 28%}
  .hero-bg::after{
    background:linear-gradient(180deg,rgba(3,2,7,.46) 0%,rgba(3,2,7,.52) 38%,rgba(3,2,7,.82) 72%,rgba(3,2,7,.99) 100%);
  }
}
.hero-blob{
  position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);
  animation:float 13s ease-in-out infinite;
}
.hero-blob.b1{width:340px;height:340px;background:#7c3aed;top:10%;right:-120px;opacity:.20}
.hero-blob.b2{width:280px;height:280px;background:#c4a2ff;bottom:4%;left:-130px;animation-delay:3s;opacity:.12}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-24px,0)}
}
.hero-inner{color:#fff;max-width:720px;position:relative;z-index:1}
.hero h1{color:#fff;text-shadow:0 6px 34px rgba(0,0,0,.6)}
.hero .lead{font-size:1.03rem;color:rgba(255,255,255,.9);max-width:56ch}
.hero .eyebrow{color:var(--rose-2);background:rgba(3,2,7,.42);border-color:rgba(196,162,255,.38);backdrop-filter:blur(8px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero .btn-ghost{background:rgba(3,2,7,.38);color:#fff;border-color:rgba(255,255,255,.42);backdrop-filter:blur(8px)}
.hero .btn-ghost:hover{background:rgba(3,2,7,.7);border-color:rgba(196,162,255,.7);color:#fff}

.hero-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:38px;
}
@media(min-width:560px){ .hero-stats{grid-template-columns:repeat(2,1fr)} }
@media(min-width:900px){ .hero-stats{grid-template-columns:repeat(4,1fr)} }
/* Chiffres du hero : simples, sans panneau gris — un filet violet tres fin */
.stat{
  padding:12px 0 12px 16px;
  background:none;
  border:0;
  border-left:1px solid rgba(196,162,255,.34);
}
.stat b{display:block;font-size:1.5rem;color:#fff;line-height:1.1;font-weight:800}
.stat span{font-size:.8rem;color:rgba(255,255,255,.68)}

/* ---------- Cartes : verre tres sombre, filet violet fin ---------- */
/* Pas d'aplat gris/violet : le fond reste noir, la carte est juste delimitee. */
.card{
  background:linear-gradient(165deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%);
  border:1px solid rgba(196,162,255,.16);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(10px);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(196,162,255,.42);
  box-shadow:0 26px 54px rgba(0,0,0,.56), 0 0 30px rgba(124,58,237,.16);
}
.card p:last-child{margin-bottom:0}

.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1040px){
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Cartes services (effet 3D conserve) ---------- */
.tilt-wrap{perspective:1000px}
.service{
  position:relative;
  height:100%;
  padding:24px 22px;
  border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(255,255,255,.035) 0%,rgba(255,255,255,.012) 100%);
  border:1px solid rgba(196,162,255,.16);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-soft);
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .3s ease, border-color .3s ease;
  will-change:transform;
}
.service:hover{
  box-shadow:0 30px 56px rgba(0,0,0,.6), 0 0 34px rgba(124,58,237,.20);
  border-color:rgba(196,162,255,.5);
}
/* L'icone : plus de pastille violette pleine, juste un filet lumineux */
.service .ico{
  width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  border-radius:12px;
  background:rgba(124,58,237,.14);
  border:1px solid rgba(196,162,255,.34);
  box-shadow:0 0 22px rgba(124,58,237,.22) inset;
  margin-bottom:16px;
  transform:translateZ(34px);
}
.service h3{margin-bottom:8px;transform:translateZ(22px)}
.service p{color:var(--muted);font-size:.95rem;transform:translateZ(14px)}
.service .service-tag{
  display:inline-block;
  margin-top:6px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--violet);
  transform:translateZ(18px);
}

/* ---------- Grille photos : grandes images ---------- */
.gallery-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:620px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} }
.shot{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow-soft);
  background:#060409;
  aspect-ratio:4/3;
}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.06)}
.shot figcaption{
  position:absolute;left:10px;right:10px;bottom:10px;
  padding:7px 12px;
  font-size:.82rem;font-weight:600;color:#fff;
  background:rgba(3,2,7,.62);
  border:1px solid rgba(196,162,255,.22);
  border-radius:10px;
  backdrop-filter:blur(10px);
}
.shot.tall{aspect-ratio:3/4}
@media(min-width:620px){
  .gallery-grid .span-2{grid-column:span 2}
}

/* ---------- Formules tarifs ---------- */
.price-card{display:flex;flex-direction:column;height:100%}
.price-card .badge{
  align-self:flex-start;
  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-2);background:none;
  border:1px solid rgba(196,162,255,.42);
  padding:4px 11px;border-radius:999px;margin-bottom:12px;
  box-shadow:0 0 18px rgba(124,58,237,.22);
}
.price-card .amount{
  font-size:1.5rem;font-weight:800;
  color:var(--violet);
  margin:6px 0 10px;
}
.price-card ul{list-style:none;padding:0;margin:0 0 18px;color:var(--muted);font-size:.94rem}
.price-card li{padding:6px 0 6px 24px;position:relative}
.price-card li::before{
  content:"✦";position:absolute;left:0;top:6px;color:var(--rose);font-size:.85rem;
}
.price-card .btn{margin-top:auto}

/* ---------- Formulaire + coordonnées ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){ .contact-grid{grid-template-columns:1.15fr .85fr} }

form .field{margin-bottom:14px}
label{display:block;font-size:.88rem;font-weight:600;margin-bottom:6px;color:var(--ink)}
input,select,textarea{
  width:100%;
  font-family:var(--font);
  font-size:16px;
  padding:12px 14px;
  color:var(--ink);
  background:rgba(3,2,7,.55);
  border:1px solid rgba(178,138,255,.28);
  border-radius:9px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input::placeholder,textarea::placeholder{color:rgba(167,159,189,.75)}
select option{background:#0a0616;color:var(--ink)}
input:focus,select:focus,textarea:focus{
  background:rgba(3,2,7,.8);
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(150,110,255,.18), 0 0 22px rgba(124,58,237,.24);
}
textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){ .form-row{grid-template-columns:repeat(2,1fr)} }
.form-note{font-size:.82rem;color:var(--muted)}
.form-msg{
  display:none;
  margin-top:14px;
  padding:12px 14px;
  border-radius:12px;
  font-size:.92rem;
  font-weight:600;
}
.form-msg.ok{display:block;background:rgba(16,185,129,.14);border:1px solid rgba(52,211,153,.45);color:#6ee7b7}
.form-msg.err{display:block;background:rgba(239,68,68,.14);border:1px solid rgba(248,113,113,.45);color:#fca5a5}

.info-list{list-style:none;padding:0;margin:0}
.info-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed rgba(178,138,255,.24)}
.info-list li:last-child{border-bottom:0}
.info-list .k{font-weight:700;min-width:96px;color:var(--violet)}
.info-list .v{color:var(--muted);word-break:break-word}

/* ---------- Avis / témoignages ---------- */
.review{height:100%;display:flex;flex-direction:column}
.stars{color:#c4a2ff;letter-spacing:2px;font-size:.95rem;margin-bottom:8px}
.review p{font-style:italic;color:var(--muted)}
.review .who{display:flex;align-items:center;gap:10px;margin-top:auto;font-weight:700;font-size:.9rem}
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:rgba(124,58,237,.2);color:var(--rose-2);
  border:1px solid rgba(196,162,255,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;
}
.notice{
  margin-top:16px;
  font-size:.8rem;
  color:var(--muted);
  background:rgba(3,2,7,.5);
  border:1px dashed rgba(178,138,255,.28);
  border-radius:11px;
  padding:10px 14px;
}

/* ---------- Bandeau CTA ---------- */
.cta-band{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:40px 26px;
  background:rgba(3,2,7,.6);
  border:1px solid rgba(196,162,255,.24);
  color:#fff;
  box-shadow:0 26px 60px rgba(0,0,0,.6), 0 0 70px rgba(124,58,237,.16);
  backdrop-filter:blur(10px);
}
.cta-band::before{
  content:"";position:absolute;top:-90px;right:-60px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(150,110,255,.30),rgba(150,110,255,0) 70%);
  pointer-events:none;
  filter:blur(14px);
}
.cta-band::after{
  content:"";position:absolute;bottom:-110px;left:-70px;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.26),rgba(124,58,237,0) 70%);
  pointer-events:none;
  filter:blur(16px);
}
.cta-band h2,.cta-band p,.cta-actions{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.88);margin-bottom:20px}
.cta-band .btn-ghost{background:rgba(3,2,7,.5);color:#fff;border-color:rgba(255,255,255,.36)}
.cta-band .btn-ghost:hover{background:rgba(3,2,7,.8);border-color:rgba(196,162,255,.7);color:#fff}
.cta-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- Bandeau defilant : simple filet lumineux, aucun aplat ---------- */
.marquee{
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(3,2,7,.5);
  padding:14px 0;
}
.marquee-track{
  display:flex;
  gap:34px;
  width:max-content;
  animation:slide 30s linear infinite;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}
.marquee-track span{opacity:.8}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Page en-tete (pages internes) ---------- */
.page-head{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:64vh;
  padding:150px 0 56px;
  overflow:hidden;
  isolation:isolate;
  background:#030207;
}
.page-head .hero-bg{z-index:-2}
.page-head .hero-bg img{object-position:center 38%}
.page-head .hero-bg::after{
  background:
    linear-gradient(90deg,rgba(3,2,7,.90) 0%,rgba(3,2,7,.66) 38%,rgba(3,2,7,.24) 68%,rgba(3,2,7,.06) 100%),
    linear-gradient(180deg,rgba(3,2,7,.42) 0%,rgba(3,2,7,.22) 36%,rgba(3,2,7,.66) 78%,rgba(3,2,7,.99) 100%);
}
@media(max-width:767px){
  .page-head{min-height:52vh;padding:126px 0 46px}
  .page-head .hero-bg img{object-position:center 32%}
  .page-head .hero-bg::after{
    background:linear-gradient(180deg,rgba(3,2,7,.48) 0%,rgba(3,2,7,.56) 40%,rgba(3,2,7,.86) 76%,rgba(3,2,7,.99) 100%);
  }
}
.page-head .wrap{width:100%}
.page-head .inner{color:#fff;max-width:720px}
.page-head h1{color:#fff;text-shadow:0 6px 34px rgba(0,0,0,.6)}
.page-head p{color:rgba(255,255,255,.88);margin-bottom:0}
.crumb{font-size:.82rem;color:rgba(255,255,255,.8);margin-bottom:12px}
.crumb a{color:#fff;text-decoration:underline}

/* ---------- Footer : noir profond, simple filet de lumiere violette ---------- */
footer{
  margin-top:56px;
  padding:44px 0 30px;
  background:linear-gradient(180deg,rgba(3,2,7,0) 0%,rgba(3,2,7,.72) 46%,rgba(2,1,5,.96) 100%);
  border-top:1px solid rgba(196,162,255,.16);
}
.foot-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:620px){ .foot-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:960px){ .foot-grid{grid-template-columns:1.4fr 1fr 1fr} }
footer .brand{color:#fff !important}
footer .brand small{color:var(--rose-2)}
footer p{color:rgba(255,255,255,.72) !important}
footer h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-2);margin-bottom:12px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:8px;font-size:.92rem;color:rgba(255,255,255,.72)}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:var(--rose-2)}
footer .socials a{background:rgba(3,2,7,.55);color:#fff;border-color:rgba(196,162,255,.3)}
footer .socials a:hover{background:rgba(124,58,237,.2);border-color:rgba(196,162,255,.6);color:#fff}
.socials{display:flex;gap:10px;margin-top:14px}
.socials a{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  font-size:.85rem;font-weight:600;color:var(--violet-2);
  background:rgba(3,2,7,.5);
  border:1px solid rgba(178,138,255,.3);
  border-radius:var(--radius-sm);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.socials a:hover{transform:translateY(-2px);background:rgba(124,58,237,.18);border-color:rgba(196,162,255,.6);color:#fff}
.foot-bottom{
  margin-top:26px;padding-top:16px;
  border-top:1px solid rgba(196,162,255,.14);
  font-size:.82rem;color:rgba(255,255,255,.55);
  display:flex;flex-direction:column;gap:6px;
}
@media(min-width:768px){ .foot-bottom{flex-direction:row;justify-content:space-between;align-items:center} }

/* ---------- Animations d'apparition ---------- */
/* Sans JavaScript, rien n'est masque : le contenu reste toujours visible. */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero-blob,.marquee-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Fleurs decoratives fines (inspirees de la fleur du logo) ---------- */
/* Decoration uniquement, tres discrete : aucun impact sur le contenu. */
.wrap:has(> .section-head){position:relative}
.wrap:has(> .section-head)::after{
  content:"";
  position:absolute;
  right:14px;
  top:-10px;
  z-index:0;
  width:62px;
  height:92px;
  background:url("images/fleur.svg") center/contain no-repeat;
  opacity:.26;
  transform:rotate(10deg);
  pointer-events:none;
}
.section-head{position:relative;z-index:1}
.hero::after{
  content:"";
  position:absolute;
  left:2px;
  bottom:96px;
  z-index:0;
  width:120px;
  height:180px;
  background:url("images/fleur.svg") center/contain no-repeat;
  opacity:.22;
  transform:rotate(-9deg);
  pointer-events:none;
}
.page-head::after{
  content:"";
  position:absolute;
  right:8px;
  top:112px;
  z-index:0;
  width:100px;
  height:150px;
  background:url("images/fleur.svg") center/contain no-repeat;
  opacity:.2;
  transform:rotate(13deg);
  pointer-events:none;
}
.page-head .inner{position:relative;z-index:1}
@media(max-width:767px){
  .wrap:has(> .section-head)::after{width:44px;height:64px;opacity:.18;right:6px;top:-6px}
  .hero::after{width:76px;height:112px;opacity:.16;bottom:64px}
  .page-head::after{width:66px;height:98px;opacity:.15;top:84px;right:2px}
}

/* ---------- Transitions douces entre les sections ---------- */
/* Simple filet de lumiere violette : le noir reste continu, sans cassure. */
.section + .section{position:relative}
.section + .section::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:min(340px,58%);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(180,140,255,.4),transparent);
  pointer-events:none;
}
.hero::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:220px;
  background:linear-gradient(180deg,rgba(3,2,7,0) 0%,rgba(3,2,7,.6) 58%,rgba(3,2,7,.99) 100%);
  pointer-events:none;
}

/* ---------- Titres : petite ligne lumineuse ---------- */
.section-head h2{position:relative}
.section-head h2::after{
  content:"";
  display:block;
  width:70px;
  height:2px;
  margin-top:14px;
  border-radius:2px;
  background:linear-gradient(90deg,#c4a2ff 0%,rgba(168,120,255,.35) 60%,transparent 100%);
  box-shadow:0 0 14px rgba(150,110,255,.5);
}

/* ---------- Photos mises en valeur (grandes images, lumiere douce) ---------- */
.frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(196,162,255,.22);
  box-shadow:0 34px 70px rgba(0,0,0,.66), 0 0 66px rgba(124,58,237,.18);
  transition:box-shadow .4s ease, border-color .4s ease;
}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frame::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%);
  box-shadow:inset 0 0 0 1px rgba(196,162,255,.16);
}
.frame:hover{
  border-color:rgba(196,162,255,.44);
  box-shadow:0 38px 80px rgba(0,0,0,.7), 0 0 80px rgba(124,58,237,.3);
}
.shot{
  border-color:rgba(196,162,255,.14);
  box-shadow:0 16px 38px rgba(0,0,0,.55);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.shot::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.3) 100%);
}
.shot:hover{
  transform:translateY(-4px);
  border-color:rgba(196,162,255,.48);
  box-shadow:0 30px 66px rgba(0,0,0,.66), 0 0 44px rgba(124,58,237,.28);
}
.frame:hover{
  box-shadow:0 38px 80px rgba(0,0,0,.7), 0 0 80px rgba(124,58,237,.3);
  transition:box-shadow .4s ease;
}

/* ---------- Utilitaires ---------- */


/* ---------- Utilitaires ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.lead{font-size:1.03rem;color:var(--muted)}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.pill-row li{
  font-size:.84rem;font-weight:600;color:var(--violet-2);
  background:rgba(3,2,7,.4);
  border:1px solid rgba(178,138,255,.3);
  padding:6px 12px;border-radius:999px;
}
.split{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
@media(min-width:900px){ .split{grid-template-columns:1fr 1fr;gap:48px} }
.frame{
  border-radius:22px;overflow:hidden;
  border:1px solid var(--glass-brd);
  box-shadow:var(--shadow);
}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.steps{list-style:none;padding:0;margin:0;counter-reset:step}
.steps li{
  position:relative;
  padding:14px 0 14px 54px;
  border-bottom:1px dashed rgba(178,138,255,.24);
}
.steps li:last-child{border-bottom:0}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:12px;
  width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(124,58,237,.16);
  border:1px solid rgba(196,162,255,.4);
  color:var(--rose-2);font-weight:800;
  box-shadow:0 0 20px rgba(124,58,237,.25);
}
.steps strong{display:block}
.steps span{color:var(--muted);font-size:.94rem}
.legal{max-width:840px}
.legal h2{margin-top:34px;font-size:1.25rem}
.legal h3{font-size:1.02rem;margin-top:22px}
.legal p,.legal li{color:var(--muted)}
.table-wrap{overflow-x:auto}