:root{
  --ink:#0a0f1d; --ink-2:#0f1830; --ink-3:#13203c;
  --gold:#e6be50; --gold-soft:#f3da93; --sky:#5bc8f5;
  --text:#f6f8fc; --muted:#9aa7bd; --line:rgba(255,255,255,.10);
  --maxw:1180px;
  --font-display:"Outfit",system-ui,sans-serif;
  --font-body:"Outfit",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text);background:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(230,190,80,.16), transparent 60%),
    radial-gradient(55% 45% at 95% 10%, rgba(91,200,245,.14), transparent 60%),
    radial-gradient(50% 60% at 50% 100%, rgba(230,190,80,.08), transparent 70%),
    var(--ink)}
body::after{content:"";position:fixed;inset:0;z-index:-1;opacity:.035;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-weight:600;letter-spacing:.28em;text-transform:uppercase;font-size:.72rem;color:var(--gold)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.gold{color:var(--gold)}
.italic{font-style:italic;font-weight:500}

header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(10,15,29,.72);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.brand img{width:42px;height:42px;border-radius:50%;background:#fff;padding:3px}
.brand small{display:block;font-family:var(--font-body);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);font-weight:600}
.menu{display:flex;gap:28px;align-items:center}
.menu a{font-size:.93rem;color:var(--muted);font-weight:500;transition:color .25s;position:relative}
.menu a:hover,.menu a.active{color:var(--text)}
.menu a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--gold);transition:width .25s}
.menu a:hover::after,.menu a.active::after{width:100%}
.btn{display:inline-block;font-weight:600;font-size:.9rem;letter-spacing:.02em;padding:13px 28px;border-radius:50px;
  background:linear-gradient(135deg,var(--gold),#caa23c);color:#1a1407;border:1px solid rgba(255,255,255,.15);
  box-shadow:0 6px 24px rgba(230,190,80,.25);transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(230,190,80,.4)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:0;padding:8px}
.burger span{width:26px;height:2px;background:var(--text);transition:.3s}

.hero{position:relative;padding:96px 0 80px;overflow:hidden}
.hero .wave{position:absolute;right:-8%;top:-10%;width:62%;max-width:760px;opacity:.5;filter:hue-rotate(8deg) saturate(.8);pointer-events:none;mix-blend-mode:screen}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);margin:18px 0 10px}
.hero h1 .sub{display:block;font-size:.42em;font-weight:500;font-style:italic;color:var(--muted);margin-top:14px;font-family:var(--font-body);letter-spacing:0}
.lead{font-size:1.12rem;color:#c6cfde;max-width:40ch;margin:18px 0 30px}
.lead strong{color:var(--text);font-weight:700}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-art .halo{position:absolute;inset:-10% -6% -10% -6%;border-radius:50%;background:radial-gradient(circle,rgba(230,190,80,.30),transparent 62%);filter:blur(10px)}
.hero-art img{position:relative;width:100%;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* Page hero (sous-pages) */
.phero{position:relative;padding:70px 0 30px;text-align:center}
.phero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);margin:14px 0 10px}
.phero p{color:var(--muted);max-width:60ch;margin:0 auto;font-size:1.05rem}
.crumb{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.crumb a{color:var(--gold)}

.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);padding:26px 0;text-align:center}
.marquee p{font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--gold-soft)}

section{padding:80px 0}
.shead{max-width:62ch;margin-bottom:46px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:14px 0 12px}
.shead p{color:var(--muted);font-size:1.05rem}

.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:18px;padding:34px 30px;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:rgba(230,190,80,.5);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(230,190,80,.25),rgba(91,200,245,.15));font-size:1.5rem}
.card h3{font-size:1.3rem;margin-bottom:10px;color:var(--text)}
.card p{color:var(--muted);font-size:.98rem}

.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center}
.about-card{background:linear-gradient(160deg,var(--ink-2),var(--ink-3));border:1px solid var(--line);border-radius:24px;padding:40px;text-align:center}
.about-card img{width:180px;height:180px;object-fit:cover;object-position:center top;margin:0 auto 20px;border-radius:50%;background:#fff;padding:6px;display:block}
.about-card .name{font-family:var(--font-display);font-size:1.5rem;font-weight:700}
.about-card .role{color:var(--gold);font-weight:600;font-size:.9rem;letter-spacing:.05em}
.stats{display:flex;gap:26px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.stats div{text-align:center}
.stats b{display:block;font-family:var(--font-display);font-size:1.8rem;color:var(--gold)}
.stats span{font-size:.78rem;color:var(--muted)}
.about p{color:#c6cfde;margin-bottom:16px}
.about h2{font-size:clamp(1.8rem,3.2vw,2.5rem);margin-bottom:18px}
.tick{list-style:none;margin:8px 0 20px}
.tick li{color:#c6cfde;margin-bottom:10px;padding-left:30px;position:relative}
.tick li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.tick strong{color:var(--text)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:transform .3s,border-color .3s;display:flex;flex-direction:column}
.svc:hover{transform:translateY(-6px);border-color:rgba(230,190,80,.5)}
.svc .thumb{aspect-ratio:3/2;overflow:hidden}
.svc .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:saturate(.9)}
.svc:hover .thumb img{transform:scale(1.07)}
.svc .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column}
.svc h3{font-size:1.12rem;line-height:1.25;color:var(--text);margin-bottom:10px}
.svc p{color:var(--muted);font-size:.9rem;flex:1}
.svc .more{margin-top:16px;font-weight:600;font-size:.85rem;color:var(--gold);letter-spacing:.03em}
.svc .more::after{content:" →";transition:margin .25s}
.svc:hover .more::after{margin-left:5px}

.band{background:linear-gradient(135deg,rgba(230,190,80,.14),rgba(91,200,245,.10));border:1px solid var(--line);border-radius:26px;padding:56px;text-align:center;margin:0 24px}
.band h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:14px}
.band p{color:#c6cfde;max-width:52ch;margin:0 auto 28px}

/* Témoignages */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:30px}
.quote .stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px}
.quote h3{font-size:1.12rem;color:var(--text);margin-bottom:10px}
.quote p{color:#d3dbe9;font-size:.96rem;margin-bottom:10px}
.quote .who{color:var(--gold);font-size:.82rem;font-weight:600;margin-top:12px}
.quote .shot{border-radius:12px;border:1px solid var(--line);margin-bottom:16px;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}

/* Créations */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proj{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.proj:hover{transform:translateY(-6px);border-color:rgba(230,190,80,.5)}
.proj .thumb{aspect-ratio:16/10;overflow:hidden;background:#fff}
.proj .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.proj:hover .thumb img{transform:scale(1.06)}
.proj .cap{padding:16px 18px;font-weight:600;font-size:.96rem;color:var(--text)}
.proj .cap span{display:block;font-size:.78rem;color:var(--gold);font-weight:600;margin-top:6px}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cinfo li{list-style:none;display:flex;gap:14px;align-items:flex-start;margin-bottom:22px}
.cinfo .ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:linear-gradient(135deg,rgba(230,190,80,.22),rgba(91,200,245,.14));font-size:1.15rem}
.cinfo b{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.cinfo a,.cinfo span{color:#d3dbe9}
form{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;padding:32px}
label{display:block;font-size:.82rem;color:var(--muted);margin:0 0 6px;font-weight:600}
input,textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:.95rem;margin-bottom:16px}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:120px;resize:vertical}

/* Article (pages services) */
.article{max-width:820px;margin:0 auto}
.article p{color:#c6cfde;margin-bottom:18px;font-size:1.05rem}
.article h2{font-size:1.6rem;margin:34px 0 14px}
.article ul{margin:0 0 20px;padding-left:0;list-style:none}
.article ul li{color:#c6cfde;margin-bottom:10px;padding-left:28px;position:relative}
.article ul li::before{content:"✦";position:absolute;left:0;color:var(--gold)}
.article .figure{border-radius:18px;overflow:hidden;border:1px solid var(--line);margin:0 0 30px;background:#fff}

footer{border-top:1px solid var(--line);padding:54px 0 36px;background:rgba(0,0,0,.25)}
.fgrid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
footer .brand img{width:60px;height:60px}
footer p{color:var(--muted);font-size:.85rem}
.fnav{display:flex;gap:18px;flex-wrap:wrap}
.fnav a{color:var(--muted);font-size:.9rem}
.fnav a:hover{color:var(--gold)}
.legal{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:.8rem}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .hero-grid,.about,.contact{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:320px;margin:0 auto}
  .pillars,.svc-grid,.quotes,.gal{grid-template-columns:1fr 1fr}
  .menu{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:var(--ink-2);padding:24px;gap:18px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .35s;height:auto}
  .menu.open{transform:none}
  .burger{display:flex}
  .band{padding:40px 26px}
}
@media(max-width:600px){
  .pillars,.svc-grid,.quotes,.gal{grid-template-columns:1fr}
  section{padding:58px 0}
}

/* ============================================
   v2 — Améliorations design, animations, .com
   ============================================ */

/* Le ".com" en doré, à côté de "Guenver" */
.brand .dot{
  color:var(--gold);
  font-style:normal;
  font-weight:700;
  letter-spacing:-.01em;
  margin-left:1px;
  background:linear-gradient(120deg,var(--gold) 0%,var(--gold-soft) 45%,#fff5d9 55%,var(--gold) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:brandShine 7s ease-in-out infinite;
}
@keyframes brandShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Eyebrows et accents .gold animés (lueur subtile) */
.eyebrow{
  background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:brandShine 6s linear infinite;
}
.gold{
  background:linear-gradient(120deg,var(--gold) 0%,#fff3c8 50%,var(--gold) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:brandShine 8s ease-in-out infinite;
}

/* Marquee : devise animée façon "encre dorée" */
.marquee p{
  background:linear-gradient(90deg,var(--gold-soft) 0%,#fff5d9 25%,var(--gold) 50%,#fff5d9 75%,var(--gold-soft) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:brandShine 9s ease-in-out infinite;
}

/* Vignettes services : meilleur cadrage (4/3 + recentrage) */
.svc .thumb{aspect-ratio:4/3;background:linear-gradient(135deg,#0f1830,#1a2547)}
.svc .thumb img{object-position:center 38%;filter:saturate(.95) contrast(1.05)}
.svc:hover .thumb img{filter:saturate(1.1) contrast(1.08)}

/* Vignettes créations : aussi un peu plus de hauteur */
.proj .thumb{aspect-ratio:3/2}
.proj .thumb img{object-position:center top}

/* Overlay doré au survol sur les cartes */
.svc .thumb,.proj .thumb{position:relative;overflow:hidden}
.svc .thumb::after,.proj .thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(230,190,80,.18) 100%);
  opacity:0;transition:opacity .45s ease;pointer-events:none
}
.svc:hover .thumb::after,.proj:hover .thumb::after{opacity:1}

/* Cartes : liseré doré qui apparaît au survol */
.card,.svc,.proj,.quote{position:relative;isolation:isolate}
.card::before,.svc::before,.proj::before,.quote::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,transparent 20%,rgba(230,190,80,.7) 50%,transparent 80%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:1
}
.card:hover::before,.svc:hover::before,.proj:hover::before,.quote:hover::before{opacity:1}

/* Boutons : dégradé qui glisse au survol */
.btn{
  background:linear-gradient(135deg,var(--gold) 0%,#caa23c 50%,var(--gold) 100%);
  background-size:220% 100%;background-position:0% 0%;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background-position .6s ease
}
.btn:hover{background-position:100% 0%;transform:translateY(-3px) scale(1.02);box-shadow:0 14px 36px rgba(230,190,80,.45)}

/* Hero : halo qui respire, vague qui dérive doucement */
@keyframes haloPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes waveDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-22px,12px) rotate(-1.5deg)}}
.hero-art .halo{animation:haloPulse 7s ease-in-out infinite}
.hero .wave{animation:waveDrift 16s ease-in-out infinite}

/* Reveal : courbe plus douce, mouvement un peu plus généreux */
.reveal{opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}

/* Lien menu : trait doré plus élégant */
.menu a::after{height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:width .35s ease}

/* Stats : chiffres avec léger glow */
.stats b{text-shadow:0 0 24px rgba(230,190,80,.35)}

/* Bands (CTA centraux) : lueur subtile en arrière-plan */
.band{position:relative;overflow:hidden}
.band::before{
  content:"";position:absolute;inset:-40%;
  background:radial-gradient(circle at 30% 30%,rgba(230,190,80,.18),transparent 50%),
             radial-gradient(circle at 70% 70%,rgba(91,200,245,.12),transparent 50%);
  animation:bandFloat 18s ease-in-out infinite;pointer-events:none;z-index:0
}
.band > *{position:relative;z-index:1}
@keyframes bandFloat{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(2%,-2%) rotate(8deg)}}

/* Article (pages services) : titres avec accent doré sur la gauche */
.article h2{padding-left:18px;position:relative}
.article h2::before{
  content:"";position:absolute;left:0;top:.4em;bottom:.4em;width:3px;
  background:linear-gradient(180deg,var(--gold),transparent);border-radius:2px
}

/* Respect des préférences d'animations réduites */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================
   v3 — Images des services en cercle
   ============================================ */

/* Vignettes services (page d'accueil + page services) : passage en cercle */
.svc{
  text-align:center;
  padding:34px 22px 28px;
  display:flex;flex-direction:column;align-items:center
}
.svc .thumb{
  width:140px;height:140px;
  aspect-ratio:1/1;
  border-radius:50%;
  margin:0 auto 22px;
  padding:4px;
  background:linear-gradient(135deg,rgba(230,190,80,.35),rgba(91,200,245,.12) 60%,rgba(230,190,80,.20));
  box-shadow:0 0 0 1px rgba(230,190,80,.25), 0 16px 38px rgba(0,0,0,.45);
  flex:none;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s
}
.svc:hover .thumb{
  transform:scale(1.06) rotate(-2deg);
  box-shadow:0 0 0 1px rgba(230,190,80,.5), 0 22px 50px rgba(230,190,80,.25)
}
.svc .thumb img{
  width:100%;height:100%;
  border-radius:50%;
  object-fit:cover;object-position:center;
  display:block;
  border:2px solid rgba(0,0,0,.3)
}
.svc .thumb::after{display:none} /* on enleve l'overlay rectangulaire */
.svc .body{padding:0;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center}
.svc h3{font-size:1.15rem;text-align:center;margin-bottom:8px}
.svc p{text-align:center;font-size:.92rem;margin-bottom:14px}
.svc .more{margin-top:auto}

@media(max-width:600px){
  .svc .thumb{width:120px;height:120px}
  .article 
}

/* FAQ accordeon */
.faq-item{border:1px solid var(--line);border-radius:14px;margin-bottom:14px;background:rgba(255,255,255,.03);overflow:hidden;transition:border-color .3s}
.faq-item[open]{border-color:rgba(230,190,80,.45)}
.faq-item summary{padding:20px 56px 20px 24px;font-weight:600;font-size:1.02rem;cursor:pointer;list-style:none;position:relative;color:var(--text);transition:color .25s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--gold);transition:transform .3s;font-weight:300;line-height:1}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item summary:hover{color:var(--gold)}
.faq-a{padding:0 24px 22px;color:#c6cfde;line-height:1.7}

/* v4 — Fix <picture> pour WebP : transparent au layout, l'img remplit son conteneur */
picture{display:contents}

/* ============================================
   v5 — Redesign menu + page d'accueil
   ============================================ */

/* ---- HEADER & MENU ---- */
header{background:rgba(8,12,24,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid rgba(230,190,80,.14)}
.nav{height:82px}
.brand{font-size:1.22rem;gap:13px}
.brand img{width:44px;height:44px}
.brand small{letter-spacing:.26em;font-size:.6rem;opacity:.95}

.menu{gap:30px}
.menu a:not(.btn){color:#d6deee;font-size:.96rem;font-weight:600;letter-spacing:.005em;padding:6px 0;transition:color .25s ease}
.menu a:not(.btn):hover{color:#fff}
.menu a.active:not(.btn){color:var(--gold)}
.menu a:not(.btn)::after{content:"";position:absolute;left:50%;bottom:-3px;width:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:translateX(-50%);transition:width .3s ease}
.menu a:not(.btn):hover::after,.menu a.active:not(.btn)::after{width:130%}
.menu a.btn{color:#1a1407;padding:11px 24px;font-size:.9rem;margin-left:8px}
.burger span{width:26px;height:2.5px;border-radius:2px}

/* ---- HERO ---- */
.hero{padding:100px 0 90px}
.hero-grid{gap:56px}
.avail{display:inline-flex;align-items:center;gap:9px;padding:7px 16px 7px 13px;border-radius:50px;background:rgba(91,200,245,.08);border:1px solid rgba(91,200,245,.28);font-size:.8rem;font-weight:600;color:#c3e6f8;letter-spacing:.02em;margin-bottom:18px}
.avail .pulse{width:9px;height:9px;border-radius:50%;background:#4ade80;position:relative;flex:none}
.avail .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;background:#4ade80;opacity:.45;animation:availPulse 2.2s ease-out infinite}
@keyframes availPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}
.hero h1{font-size:clamp(2.7rem,5.6vw,4.7rem);line-height:1.03;letter-spacing:-.02em;margin:14px 0 6px}
.hero h1 .sub{display:block;font-size:.32em;font-weight:500;font-style:normal;color:#b2bdd0;margin-top:22px;line-height:1.45;letter-spacing:0;font-family:var(--font-body);max-width:34ch}
.lead{font-size:1.14rem;color:#cbd4e4;max-width:42ch;margin:20px 0 30px}
.hero-stats{display:flex;gap:30px;margin-top:40px;flex-wrap:wrap;align-items:center}
.hero-stats div:not(.sep){display:flex;flex-direction:column}
.hero-stats b{font-family:var(--font-display);font-size:1.85rem;font-weight:700;color:var(--gold);line-height:1;text-shadow:0 0 26px rgba(230,190,80,.3)}
.hero-stats span{font-size:.78rem;color:var(--muted);margin-top:6px;letter-spacing:.02em}
.hero-stats .sep{width:1px;height:38px;background:linear-gradient(180deg,transparent,var(--line),transparent)}

/* ---- Marquee plus raffiné ---- */
.marquee{padding:30px 0}
.marquee p{font-size:clamp(1.25rem,2.4vw,1.85rem)}

/* ---- Sections : titres un peu plus aérés ---- */
.shead h2{letter-spacing:-.015em}
.pillars .card .ic{font-size:1.6rem}

@media(max-width:900px){
  .hero{padding:70px 0 60px}
  .hero-stats{gap:22px}
  .hero-stats .sep{display:none}
  .menu{gap:18px}
}


/* ============================================
   v8 — Menu Outfit (sans-serif fin & classe)
   ============================================ */
.avail{display:none!important}
.menu a:not(.btn){font-family:"Outfit",system-ui,sans-serif;font-weight:200;font-size:1rem;letter-spacing:.06em}
.menu a.active:not(.btn){font-weight:400}
.menu a.btn{font-family:"Outfit",system-ui,sans-serif;font-weight:500;letter-spacing:.04em}
.brand{font-family:"Outfit",system-ui,sans-serif;font-weight:300;letter-spacing:.02em}
.brand small{font-family:"Outfit",system-ui,sans-serif;font-weight:400;letter-spacing:.24em}
.brand .dot{font-weight:600}

/* ============================================
   v9 — Header agrandi + rétrécissement au scroll
   ============================================ */
header{transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}
.nav{height:112px;transition:height .4s cubic-bezier(.4,0,.2,1)}
.brand img{transition:width .4s ease,height .4s ease}
header.shrink .nav{height:66px}
header.shrink .brand img{width:36px;height:36px}
header.shrink{box-shadow:0 8px 30px rgba(0,0,0,.45);background:rgba(8,12,24,.92)}

/* Le hero compense la hauteur du header */
.hero{padding-top:88px}

@media(max-width:900px){
  .nav{height:74px}
  header.shrink .nav{height:64px}
  .menu{inset:74px 0 auto 0}
  header.shrink .menu{inset:64px 0 auto 0}
}

/* ============================================
   v10 — Hero immersif + menu intégré (accueil)
   ============================================ */

/* --- Menu transparent intégré, uniquement sur l'accueil --- */
body.home header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.home header.shrink{background:rgba(8,12,24,.92);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:rgba(230,190,80,.14);box-shadow:0 8px 30px rgba(0,0,0,.45)}

/* --- Hero plein écran immersif --- */
body.home .hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 70px;position:relative;overflow:hidden}
body.home .hero .wave{display:none}
body.home .hero-grid{position:relative;z-index:3}

/* Ambiance dégradée animée (aurora or + bleu) */
body.home .hero::before{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 48% at 18% 28%, rgba(230,190,80,.20), transparent 70%),
    radial-gradient(34% 44% at 82% 22%, rgba(91,200,245,.18), transparent 70%),
    radial-gradient(46% 42% at 62% 92%, rgba(230,190,80,.12), transparent 72%);
  animation:auroraDrift 22s ease-in-out infinite}
@keyframes auroraDrift{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.18) translate(2%,-2.5%)}}

/* --- Orbe SVG élégant (remplace le cercle orange) --- */
.hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.hero-art .orb{width:100%;max-width:480px;height:auto;animation:orbFloat 7s ease-in-out infinite;overflow:visible}
.hero-art .orb .rings{transform-origin:240px 240px;animation:orbSpin 48s linear infinite}
.hero-art .orb .orbits{transform-origin:240px 240px;animation:orbSpin 30s linear infinite reverse}
.hero-art .orb .orbits circle{filter:drop-shadow(0 0 6px rgba(247,227,166,.8))}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
body.home .hero-art .halo{position:absolute;inset:-6% -4%;border-radius:50%;background:radial-gradient(circle,rgba(230,190,80,.22),transparent 62%);filter:blur(14px);animation:haloPulse 7s ease-in-out infinite}

/* --- Indicateur de défilement --- */
.scrolldown{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:26px;height:42px;border:1.5px solid rgba(230,190,80,.5);border-radius:14px;z-index:4;display:block}
.scrolldown span{position:absolute;top:8px;left:50%;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}40%{opacity:1}80%{opacity:0;transform:translateY(14px)}}
.scrolldown:hover{border-color:var(--gold)}

@media(max-width:900px){
  body.home .hero{min-height:auto;padding:110px 0 60px}
  .scrolldown{display:none}
  .hero-art .orb{max-width:300px}
}

/* ============================================
   v11 — Héros immersifs sur les pages principales
   ============================================ */
body.immersive header{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.immersive header.shrink{background:rgba(8,12,24,.92);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:rgba(230,190,80,.14);box-shadow:0 8px 30px rgba(0,0,0,.45)}

.immersive .phero{min-height:60vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 64px;position:relative;overflow:hidden}
.immersive .phero .wrap{position:relative;z-index:3}
.immersive .phero::before{content:"";position:absolute;inset:-12%;z-index:0;pointer-events:none;background:radial-gradient(36% 46% at 20% 30%,rgba(230,190,80,.18),transparent 70%),radial-gradient(32% 42% at 82% 26%,rgba(91,200,245,.16),transparent 70%),radial-gradient(44% 40% at 60% 92%,rgba(230,190,80,.10),transparent 72%);animation:auroraDrift 24s ease-in-out infinite}
.phero-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.phero-bg .phero-svg{position:absolute;inset:0;width:100%;height:100%;opacity:.55}

/* accents d'aurore par page */
body.imm-presentation .phero::before{background:radial-gradient(40% 50% at 78% 30%,rgba(91,200,245,.22),transparent 70%),radial-gradient(36% 44% at 15% 70%,rgba(230,190,80,.14),transparent 72%)}
body.imm-services .phero::before{background:radial-gradient(42% 50% at 75% 35%,rgba(230,190,80,.22),transparent 70%),radial-gradient(34% 42% at 18% 28%,rgba(91,200,245,.12),transparent 72%)}
body.imm-creations .phero::before{background:radial-gradient(40% 48% at 25% 30%,rgba(230,190,80,.18),transparent 70%),radial-gradient(38% 46% at 80% 70%,rgba(91,200,245,.18),transparent 72%)}
body.imm-temoignages .phero::before{background:radial-gradient(44% 52% at 70% 30%,rgba(247,227,166,.20),transparent 70%),radial-gradient(34% 40% at 20% 75%,rgba(230,190,80,.14),transparent 72%)}
body.imm-contact .phero::before{background:radial-gradient(40% 50% at 75% 32%,rgba(91,200,245,.22),transparent 70%),radial-gradient(36% 44% at 22% 70%,rgba(91,200,245,.12),transparent 72%)}
body.imm-blog .phero::before{background:radial-gradient(40% 50% at 78% 28%,rgba(230,190,80,.20),transparent 70%),radial-gradient(36% 46% at 18% 72%,rgba(91,200,245,.16),transparent 72%)}

/* animations distinctes */
.cst-dot{animation:twinkle 3.2s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.poly{transform-box:fill-box;transform-origin:center}
.poly-a{animation:spinCW 46s linear infinite}
.poly-b{animation:spinCW 30s linear infinite reverse}
.poly-c{animation:spinCW 64s linear infinite}
@keyframes spinCW{to{transform:rotate(360deg)}}
.wv{animation:waveShift 9s ease-in-out infinite}
.wv-b{animation:waveShift 13s ease-in-out infinite reverse}
@keyframes waveShift{0%,100%{transform:translateX(0)}50%{transform:translateX(-42px)}}
.rpl{transform-box:fill-box;transform-origin:center;animation:ripple 4.5s ease-out infinite}
@keyframes ripple{0%{transform:scale(.22);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.radar-sweep{transform-box:fill-box;transform-origin:center;animation:spinCW 7s linear infinite}
.bok{animation:bokFloat 14s ease-in-out infinite}
.bok-b{animation:bokFloat 18s ease-in-out infinite reverse}
.bok-c{animation:bokFloat 22s ease-in-out infinite}
@keyframes bokFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-32px)}}

@media(max-width:900px){.immersive .phero{min-height:auto;padding:110px 0 50px}.phero-bg .phero-svg{opacity:.4}}

/* clin d'oeil slogan */
.wink{display:inline-block;font-style:normal;font-size:.9em;vertical-align:middle;margin-left:6px;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:initial!important;color:initial!important;animation:none!important}

/* ============================================
   v12 — Maillage interne : liens pastilles
   ============================================ */
.related{padding:72px 0;border-top:1px solid var(--line)}
.related .shead{margin-bottom:34px}
.svc-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:920px;margin:0 auto}
.svc-links a{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:50px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#d6deee;font-size:.92rem;font-weight:300;letter-spacing:.01em;transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease}
.svc-links a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.55;transition:opacity .25s;flex:none}
.svc-links a:hover{border-color:rgba(230,190,80,.5);color:#fff;transform:translateY(-2px);background:rgba(230,190,80,.06)}
.svc-links a:hover::before{opacity:1}
.svc-links a.solid{background:linear-gradient(135deg,var(--gold),#caa23c);color:#1a1407;border-color:transparent;font-weight:500}
.svc-links a.solid::before{background:#1a1407;opacity:.5}

/* ============================================
   v13 — Études de cas
   ============================================ */
.cs-quote{margin:18px 0;padding:24px 28px;border-left:3px solid var(--gold);background:rgba(230,190,80,.06);border-radius:0 12px 12px 0;font-size:1.12rem;font-style:italic;color:#e8eefc;line-height:1.6}
.cs-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.9rem;color:var(--gold);font-weight:500}
.article .rep-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.article .rep-list li{margin:0}
.article .rep-list a{display:inline-flex;padding:9px 16px;border-radius:50px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:#d6deee;font-size:.9rem;transition:all .25s}
.article .rep-list a:hover{border-color:rgba(230,190,80,.5);color:#fff;background:rgba(230,190,80,.06)}

/* ============================================
   v13 — Études de cas
   ============================================ */
.case-quote{margin:32px 0;padding:26px 30px;border-left:3px solid var(--gold);background:rgba(230,190,80,.06);border-radius:0 14px 14px 0;font-size:1.12rem;line-height:1.6;color:var(--text);font-style:italic}
.case-quote cite{display:block;margin-top:14px;font-style:normal;font-weight:500;font-size:.92rem;color:var(--gold);letter-spacing:.01em}
.reponse-list{list-style:none;padding:0}
.reponse-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.reponse-list li a{color:#d6deee;display:inline-flex;align-items:center;gap:10px;transition:color .2s,padding-left .2s}
.reponse-list li a::before{content:"→";color:var(--gold);font-weight:600}
.reponse-list li a:hover{color:#fff;padding-left:6px}

/* v14 — lien etude de cas depuis temoignages */
.case-link{display:inline-block;margin-top:10px;font-size:.86rem;color:var(--gold);font-weight:400;letter-spacing:.01em;transition:color .2s,padding-left .2s}
.case-link:hover{color:var(--gold-soft);padding-left:4px}

/* v15 — figures avec légende (zones, etc.) */
.figure figcaption{margin-top:10px;font-size:.84rem;color:var(--muted);text-align:center;letter-spacing:.03em;font-weight:300}
.zone-figure{margin:0 0 30px}

/* v16 — fix portrait carre dans cercle */
.about-card picture{display:block;width:180px;height:180px;margin:0 auto 20px}
.about-card picture img{margin:0}


/* ============================================
   v17 — Galerie créations : cartes uniformes
   ============================================ */
/* picture est enfant direct du .proj (qui est le <a>) */
.gal .proj > picture{display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:#0a0f1d;flex:none}
.gal .proj > picture img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
/* fallback : image directe sans picture */
.gal .proj > img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center top;display:block;flex:none}
/* carte = colonne, même hauteur dans la rangée */
.gal{align-items:stretch}
.gal .proj{display:flex;flex-direction:column;height:100%}
.gal .proj .cap{flex:1 1 auto}

/* ============================================
   v18 — Fix global cadrage images (anti-étirement)
   ============================================ */
/* Toute figure : l'image remplit sans déformer */
.figure{display:block}
.figure > picture{display:block;width:100%}
.figure > picture > img,
.figure > img{width:100%;height:auto;display:block;object-fit:cover}
/* Figures avec ratio imposé (zones, présentation) : hauteur cadrée */
.figure.ratio-16-9 > picture, .figure.ratio-16-9 > img{aspect-ratio:16/9}
.figure.ratio-16-9 > picture > img{width:100%;height:100%;object-fit:cover}
/* picture transparent au layout pour hériter correctement */
picture{display:contents}
.figure picture, .about-card picture, .gal .proj > picture{display:block}

/* ============================================
   v19 — Fix cartes temoignages
   ============================================ */
.quote picture{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;margin-bottom:16px}
.quote picture .shot,.quote picture img{width:100%;height:100%;object-fit:cover;object-position:center top;aspect-ratio:auto;margin:0;border-radius:12px;display:block}
.quotes{align-items:start}
.quote{height:auto}

/* ============================================
   v20 — Figure article rectangulaire (blog + services)
   ============================================ */
.article .figure{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);margin:0 0 30px;background:#0a0f1d;padding:0;box-shadow:none}
.article .figure picture{display:block;width:100%;height:100%}
.article .figure img{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:18px;border:0;display:block}

/* ============================================
   v21 — Vidéo de présentation (embed lite)
   ============================================ */
.video-section{padding:40px 0 10px}
.video-wrap{max-width:880px;margin:0 auto}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;cursor:pointer;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.video-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s,filter .3s;filter:brightness(.78)}
.video-frame:hover img{transform:scale(1.04);filter:brightness(.62)}
.video-frame .play{position:absolute;inset:0;margin:auto;width:84px;height:84px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),#caa23c);border-radius:50%;box-shadow:0 10px 36px rgba(230,190,80,.5);transition:transform .3s}
.video-frame:hover .play{transform:scale(1.1)}
.video-frame .play::before{content:"";border-style:solid;border-width:15px 0 15px 26px;border-color:transparent transparent transparent #0a0f1d;margin-left:6px}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{text-align:center;color:var(--muted);font-size:.86rem;margin-top:14px;font-weight:300;letter-spacing:.02em}


/* ============================================
   v22 — Bandeau cookies (très discret)
   ============================================ */
.cookie-banner{position:fixed;left:50%;bottom:14px;transform:translate(-50%,160%);z-index:9999;display:flex;align-items:center;gap:12px;max-width:none;width:auto;background:rgba(12,17,30,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:40px;padding:8px 10px 8px 18px;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:.78rem;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cookie-banner.show{transform:translate(-50%,0)}
.cookie-banner p{margin:0;color:#aeb8c8;font-weight:300;white-space:nowrap}
.cookie-banner a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.cookie-banner a:hover{border-bottom-color:var(--gold)}
.cookie-banner .c-ok{cursor:pointer;border:0;border-radius:30px;padding:6px 16px;font-family:"Outfit",sans-serif;font-size:.78rem;font-weight:500;background:rgba(230,190,80,.16);color:var(--gold);transition:background .2s}
.cookie-banner .c-ok:hover{background:rgba(230,190,80,.28)}
@media(max-width:560px){.cookie-banner{left:10px;right:10px;transform:translateY(160%);padding:8px 10px 8px 14px}.cookie-banner.show{transform:translateY(0)}.cookie-banner p{white-space:normal;font-size:.74rem}}

/* ============================================
   v23 — Logo au centre de l'orbe (accueil)
   ============================================ */
.hero-art{position:relative}
.orb-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38%;max-width:175px;z-index:2;display:block;animation:logoFloat 7s ease-in-out infinite;filter:drop-shadow(0 8px 28px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(230,190,80,.25))}
.orb-logo img{width:100%;height:auto;display:block}
@keyframes logoFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 14px))}}
@media(max-width:900px){.orb-logo{width:42%;max-width:140px}}

/* ============================================
   v24 — Menu mobile centré
   ============================================ */
@media(max-width:900px){
  .menu{align-items:center!important;text-align:center}
  .menu a{width:auto;text-align:center;display:block}
  .menu a:not(.btn)::after{display:none}
  .menu a.btn{margin-left:0;margin-top:6px}
}

/* ============================================
   v25 — Fix débordement orbe mobile (scroll horizontal)
   ============================================ */
html,body{overflow-x:hidden;max-width:100%}
body.home .hero{overflow-x:hidden}
.hero-art{max-width:100%;overflow:hidden;margin-left:auto;margin-right:auto}
.hero-art .orb{overflow:visible;max-width:100%}
@media(max-width:900px){
  .hero-art{max-width:300px;overflow:visible}
  .hero-art .orb{max-width:260px}
  .orb-logo{width:40%;max-width:120px}
}

/* ============================================
   v26 — Raffinements design (subtils, police Outfit conservée)
   ============================================ */

/* ---- 1. TITRES plus travaillés (toujours Outfit) ---- */
/* Léger dégradé clair sur les gros titres + meilleure tenue typographique */
h1{font-weight:600;letter-spacing:-.025em;line-height:1.04}
.shead h2,.article h2{font-weight:600;letter-spacing:-.018em;line-height:1.18}
/* Filet doré animé sous les titres de section */
.shead h2{line-height:1.2}



/* Le mot doré (.gold) : lueur via drop-shadow (compatible background-clip) */
.gold{filter:drop-shadow(0 0 18px rgba(230,190,80,.20))}

/* ---- 2. MICRO-ANIMATIONS au survol ---- */
/* Cartes projet : ombre + halo doré progressif */
.proj{transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s ease,box-shadow .4s ease}
.proj:hover{transform:translateY(-8px);border-color:rgba(230,190,80,.45);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 1px rgba(230,190,80,.12)}
.proj > picture img{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.proj:hover > picture img{transform:scale(1.05)}
/* Le titre de carte glisse légèrement en doré au survol */
.proj .cap{transition:color .3s ease}
.proj:hover .cap{color:#fff}
/* Boutons : effet de brillance qui traverse */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn:hover::after{left:140%}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(230,190,80,.4)}
/* Liens pastilles (svc-links) : léger lift doré */
.svc-links a{transition:transform .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.svc-links a:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.3)}
/* FAQ : la flèche/croix tourne déjà ; on adoucit l'ouverture */
.faq-item{transition:border-color .3s ease,box-shadow .3s ease}
.faq-item:hover{box-shadow:0 6px 20px rgba(0,0,0,.25)}

/* ---- 3. EFFETS DE LUMIÈRE / détails dorés ---- */
/* Liseré dégradé très fin en haut des sections "related" */
.related{position:relative}
.related::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(680px,80%);height:1px;background:linear-gradient(90deg,transparent,rgba(230,190,80,.5),transparent)}
/* Halo doux derrière les figures d'article au survol */
.article .figure{transition:box-shadow .5s ease,transform .5s ease}
.article .figure:hover{box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 40px rgba(230,190,80,.1)}

/* ---- 4. TRANSITIONS douces au scroll ---- */
/* On enrichit le reveal existant : montée + léger flou qui se dissipe */
.reveal{opacity:0;transform:translateY(34px);filter:blur(4px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s ease}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
/* Respect des préférences d'accessibilité (mouvement réduit) */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .proj:hover,.btn:hover,.svc-links a:hover{transform:none}
  .btn::after{display:none}
}

/* v27 — air pour les jambages des mots dorés dans les titres */
.phero h1 .gold,.hero h1 .gold,
h1{line-height:1.12}

/* ============================================
   v28 — Bandeau logos clients (confiance)
   ============================================ */
.trust{padding:46px 0 30px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.trust .trust-label{text-align:center;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:30px;font-weight:500}
.trust-track-wrap{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trust-track{display:flex;align-items:flex-start;gap:56px;width:max-content;animation:trustScroll 42s linear infinite}
.trust:hover .trust-track{animation-play-state:paused}
/* ── Logos clients (trust) ── */

.trust-item{display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;flex:none;padding:6px 4px;border-radius:8px;transition:transform .25s ease}
.trust-item img{height:48px;width:auto;opacity:.78;filter:grayscale(100%) brightness(0) invert(1);transition:opacity .3s ease,filter .3s ease;display:block}
.trust-item .trust-name{font-size:.66rem;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;white-space:nowrap;transition:color .3s ease}
.trust-item:hover{transform:translateY(-3px)}
.trust-item:hover img{opacity:1;filter:grayscale(0%) brightness(1) invert(0)}
.trust-item:hover .trust-name{color:var(--text,#e8e8e8)}



@keyframes trustScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){}