/* ============================================================
   B.D.D — Basil Diouf Development & Données
   Feuille de style partagée (accueil + pages projet)
   Palette : espace profond / violet nébuleuse / doré étoile
   ============================================================ */

:root{
  --espace:#070B1C;
  --nebuleuse:#131A3A;
  --brume:#232D5E;
  --violet:#8F7CF7;
  --violet-fonce:#6C5CE7;
  --etoile:#F5C97B;
  --lumiere:#EAECFA;
  --poussiere:#9AA3C7;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(143,124,247,.16), transparent 60%),
    radial-gradient(900px 700px at -10% 40%, rgba(76,90,200,.14), transparent 60%),
    radial-gradient(700px 500px at 70% 100%, rgba(245,201,123,.07), transparent 60%),
    var(--espace);
  color:var(--lumiere);
  font-family:'Space Grotesk',sans-serif;
  font-weight:300;
  line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--violet);color:var(--espace)}

/* liens inline (texte courant, hors nav/boutons/cartes déjà stylés) */
a{color:var(--violet);text-underline-offset:3px}
a:hover,a:focus-visible{color:var(--etoile)}

/* barre de défilement thématique */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--espace)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--violet-fonce),var(--brume));
  border-radius:99px;border:2px solid var(--espace);
}
::-webkit-scrollbar-thumb:hover{background:var(--violet)}

/* ciel étoilé */
#ciel{position:fixed;inset:0;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}

.conteneur{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---------- navigation ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:10;
  backdrop-filter:blur(14px);
  background:rgba(7,11,28,.7);
  border-bottom:1px solid rgba(143,124,247,.18);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.nav-int{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{font-family:'Unbounded',sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.06em;color:var(--lumiere);text-decoration:none;text-shadow:0 0 18px rgba(143,124,247,.5)}
.logo em{font-style:normal;color:var(--etoile)}
.nav-liens{display:flex;gap:26px}
.nav-liens a{
  color:var(--poussiere);text-decoration:none;font-size:.9rem;letter-spacing:.04em;
  position:relative;transition:color .2s;
}
.nav-liens a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:linear-gradient(90deg,var(--violet),var(--etoile));
  transition:right .25s ease;
}
.nav-liens a:hover,.nav-liens a:focus-visible{color:var(--lumiere)}
.nav-liens a:hover::after,.nav-liens a:focus-visible::after{right:0}

/* burger — masqué sur desktop */
.burger{
  display:none;width:38px;height:38px;flex-shrink:0;
  border:1px solid var(--brume);border-radius:10px;
  background:rgba(19,26,58,.5);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;
}
.burger span{display:block;width:18px;height:2px;background:var(--lumiere);transition:transform .25s,opacity .25s}
.burger.ouvert span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.ouvert span:nth-child(2){opacity:0}
.burger.ouvert span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
a:focus-visible,button:focus-visible{outline:2px solid var(--etoile);outline-offset:3px;border-radius:4px}

/* ---------- héros (accueil) ---------- */
.heros{min-height:100vh;display:flex;align-items:center;padding:120px 0 80px}
.heros-grille{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.sur-titre{
  display:inline-block;font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--etoile);border:1px solid rgba(245,201,123,.35);
  padding:6px 14px;border-radius:999px;margin-bottom:22px;
  background:rgba(245,201,123,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 22px rgba(245,201,123,.1);
}
h1{
  font-family:'Unbounded',sans-serif;font-weight:800;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.12;letter-spacing:-.01em;
}
.grad{
  background:linear-gradient(100deg,var(--violet) 20%,var(--etoile) 50%,var(--violet) 80%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:miroiter 6s linear infinite;
}
@keyframes miroiter{to{background-position:-200% 0}}
.heros p{color:var(--poussiere);font-size:1.08rem;max-width:52ch;margin:22px 0 34px}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:13px 26px;border-radius:999px;text-decoration:none;
  font-weight:500;font-size:.95rem;letter-spacing:.03em;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;
}
.btn-plein{
  background:linear-gradient(180deg,#A091FF 0%,var(--violet) 35%,var(--violet-fonce) 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px rgba(0,0,0,.45),0 0 28px rgba(143,124,247,.35);
}
.btn-plein:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px rgba(0,0,0,.5),0 0 44px rgba(143,124,247,.55)}
.btn-ligne{border:1px solid var(--brume);color:var(--lumiere);background:rgba(19,26,58,.4)}
.btn-ligne:hover{border-color:var(--etoile);color:var(--etoile);box-shadow:0 0 22px rgba(245,201,123,.15)}

/* constellation — élément signature */
.constellation{position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto;width:100%}
.constellation svg{width:100%;height:100%;overflow:visible}
.orbite{
  fill:none;stroke:rgba(143,124,247,.22);stroke-width:1;stroke-dasharray:3 7;
  transform-origin:200px 200px;animation:orbiter 60s linear infinite;
}
@keyframes orbiter{to{transform:rotate(360deg)}}
.const-ligne{stroke:rgba(143,124,247,.5);stroke-width:1.2}
.const-noeud{fill:var(--etoile);filter:drop-shadow(0 0 6px rgba(245,201,123,.8))}
.const-coeur{fill:var(--violet);filter:drop-shadow(0 0 12px rgba(143,124,247,.9))}
.const-label{fill:var(--poussiere);font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.08em}
.pulse{animation:pulser 3.2s ease-in-out infinite}
@keyframes pulser{0%,100%{opacity:1}50%{opacity:.55}}
.scintille{animation:scintiller 4s ease-in-out infinite}
.scintille:nth-of-type(2n){animation-delay:1.3s}
.scintille:nth-of-type(3n){animation-delay:2.1s}
@keyframes scintiller{0%,100%{opacity:1}50%{opacity:.6}}

/* ---------- sections ---------- */
section{padding:96px 0}
.titre-section{display:flex;align-items:baseline;gap:18px;margin-bottom:46px}
.titre-section h2{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem)}
.titre-section .code{font-size:.8rem;color:var(--etoile);letter-spacing:.24em;white-space:nowrap}
.titre-section .code::before{content:"✦ ";opacity:.7}
.filet{flex:1;height:1px;background:linear-gradient(90deg,var(--brume),transparent)}

/* à propos */
.a-propos{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}
.a-propos p{color:var(--poussiere);margin-bottom:16px;max-width:60ch}
.a-propos strong{color:var(--lumiere);font-weight:500}
.a-propos-side{display:grid;gap:20px}
.portrait{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--brume);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.5);
  aspect-ratio:4/5;
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.carte-stats{
  margin-top:44px;
  background:linear-gradient(165deg,#1A2350,#0E1434);
  border:1px solid var(--brume);border-radius:var(--radius);
  padding:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.5);
}
.stat{position:relative;padding-left:28px;border-left:1px solid var(--brume)}
.stat:first-child{padding-left:0;border-left:none}
.stat .chiffre{font-family:'Unbounded',sans-serif;font-weight:600;font-size:1.6rem;color:var(--etoile);text-shadow:0 0 24px rgba(245,201,123,.35);margin-bottom:6px}
.stat .legende{color:var(--poussiere);font-size:.88rem}

@media (max-width:820px){
  .carte-stats{grid-template-columns:1fr;gap:22px}
  .stat{padding-left:0;border-left:none;padding-top:18px;border-top:1px solid var(--brume)}
  .stat:first-child{padding-top:0;border-top:none}
}

/* services */
.grille-services{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.service{
  background:linear-gradient(165deg,#1A2350 0%,#121A3E 55%,#0E1434 100%);
  border:1px solid var(--brume);border-radius:var(--radius);
  padding:30px;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -18px 34px rgba(0,0,0,.28),
    0 14px 34px rgba(0,0,0,.45);
}
.service::before{
  content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(143,124,247,.2),transparent 70%);
}
.service:hover{
  transform:translateY(-5px);border-color:var(--violet);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 34px rgba(0,0,0,.28),
    0 22px 48px rgba(0,0,0,.55),
    0 0 38px rgba(143,124,247,.22);
}
.service .icone{font-size:1.5rem;margin-bottom:14px;display:block}
.service h3{font-family:'Unbounded',sans-serif;font-weight:600;font-size:1.02rem;margin-bottom:10px}
.service p{color:var(--poussiere);font-size:.94rem}
.service ul{margin-top:14px;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.service li{
  font-size:.76rem;letter-spacing:.05em;color:var(--etoile);
  border:1px solid rgba(245,201,123,.3);border-radius:999px;padding:4px 12px;
  background:rgba(245,201,123,.04);
}

/* projet vedette (mise en avant, format paysage) */
.projet-vedette{
  display:flex;flex-direction:column;
  background:linear-gradient(170deg,#1A2350,#0D1330);
  border:1px solid var(--brume);border-radius:var(--radius);overflow:hidden;
  color:inherit;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.55);
  transition:transform .25s,border-color .25s,box-shadow .25s;
  margin-bottom:26px;
}
.projet-vedette:hover{
  transform:translateY(-6px);border-color:var(--etoile);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 28px 60px rgba(0,0,0,.6),0 0 34px rgba(245,201,123,.16);
}
.projet-vedette-visuel{position:relative;overflow:hidden;aspect-ratio:21/8;border-bottom:1px solid var(--brume)}
.projet-vedette-visuel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.projet-vedette:hover .projet-vedette-visuel img{transform:scale(1.05)}
.vedette-badge{
  position:absolute;top:18px;left:18px;z-index:1;
  background:var(--etoile);color:#241a08;font-family:'Unbounded',sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.projet-vedette-corps{
  padding:32px 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.projet-vedette-texte{display:flex;flex-direction:column;gap:8px}
.projet-vedette-corps h3{font-family:'Unbounded',sans-serif;font-weight:600;font-size:1.6rem}
.projet-vedette-corps p{color:var(--poussiere);font-size:.98rem;max-width:62ch}
.projet-vedette .projet-lien{color:var(--violet);font-size:.92rem;font-weight:500;white-space:nowrap;transition:color .2s}
.projet-vedette:hover .projet-lien{color:var(--etoile)}

/* projets (cartes accueil) */
.grille-projets{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.projet{
  background:linear-gradient(170deg,#1A2350,#0D1330);
  border:1px solid var(--brume);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.5);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.projet:hover{
  transform:translateY(-6px);border-color:var(--etoile);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 52px rgba(0,0,0,.6),0 0 34px rgba(245,201,123,.16);
}
.projet-visuel{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--brume);
}
.projet-visuel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.projet:hover .projet-visuel img{transform:scale(1.05)}
.placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:2.4rem;transition:transform .4s}
.projet:hover .placeholder{transform:scale(1.06)}
.ph-1{background:radial-gradient(circle at 30% 30%,#3A2F7D,#141B3C 70%)}
.ph-2{background:radial-gradient(circle at 70% 40%,#7A5C2E,#141B3C 70%)}
.ph-3{background:radial-gradient(circle at 50% 70%,#274069,#141B3C 70%)}
.projet-corps{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.projet-tag{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--etoile)}
.projet h3{font-family:'Unbounded',sans-serif;font-weight:600;font-size:.98rem}
.projet p{color:var(--poussiere);font-size:.9rem;flex:1}
.projet-lien{color:var(--violet);font-size:.88rem;font-weight:500;transition:color .2s}
.projet:hover .projet-lien{color:var(--etoile)}

/* démarche */
.demarche{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.etape{border-left:1px solid var(--brume);padding:4px 0 4px 22px;position:relative}
.etape::before{
  content:"";position:absolute;left:-5px;top:10px;width:9px;height:9px;border-radius:50%;
  background:var(--etoile);box-shadow:0 0 10px rgba(245,201,123,.8);
}
.etape h3{font-weight:500;font-size:1rem;margin-bottom:8px}
.etape p{color:var(--poussiere);font-size:.92rem}

/* contact */
.contact{
  background:linear-gradient(140deg,var(--nebuleuse),#0D1230);
  border:1px solid var(--brume);border-radius:calc(var(--radius) + 6px);
  padding:60px 40px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -30px 60px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.55);
}
.contact h2{font-family:'Unbounded',sans-serif;font-weight:600;font-size:clamp(1.3rem,3vw,1.9rem);margin-bottom:14px}
.contact p{color:var(--poussiere);max-width:48ch;margin:0 auto 30px}

.form-contact{max-width:480px;margin:0 auto 30px;text-align:left}
.champ-piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.champ{margin-bottom:18px}
.champ label{display:block;font-size:.82rem;letter-spacing:.05em;color:var(--poussiere);margin-bottom:6px}
.champ input,.champ textarea{
  width:100%;padding:12px 14px;border-radius:10px;
  background:rgba(7,11,28,.5);border:1px solid var(--brume);color:var(--lumiere);
  font-family:'Space Grotesk',sans-serif;font-size:.95rem;resize:vertical;
  transition:border-color .2s,box-shadow .2s;
}
.champ input:focus,.champ textarea:focus{
  outline:none;border-color:var(--etoile);box-shadow:0 0 0 3px rgba(245,201,123,.15);
}
.form-contact .btn{width:100%;border:none;cursor:pointer}
.form-statut{margin-top:14px;font-size:.9rem;text-align:center;min-height:1.2em}
.form-statut.ok{color:var(--etoile)}
.form-statut.erreur{color:#F58B7B}

footer{border-top:1px solid rgba(143,124,247,.12);padding:28px 0;text-align:center;color:var(--poussiere);font-size:.85rem}
footer .logo{font-size:.9rem}

/* apparition au défilement */
.revele{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.revele.visible{opacity:1;transform:none}

/* ============================================================
   PAGES PROJET
   ============================================================ */
.banniere{
  position:relative;min-height:32vh;display:flex;align-items:flex-end;
  padding:110px 0 50px;overflow:hidden;
  border-bottom:1px solid var(--brume);
}
/* fond de bannière : dégradé placeholder OU ta photo via .banniere-img */
.banniere-fond{position:absolute;inset:0;z-index:-2}
.banniere-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.bg-1{background:
  radial-gradient(900px 500px at 75% 20%, rgba(143,124,247,.35), transparent 65%),
  radial-gradient(700px 400px at 15% 80%, rgba(58,47,125,.6), transparent 60%),
  linear-gradient(180deg,#10163A,#070B1C)}
.bg-2{background:
  radial-gradient(900px 500px at 70% 15%, rgba(245,201,123,.16), transparent 65%),
  radial-gradient(700px 400px at 20% 85%, rgba(122,92,46,.28), transparent 60%),
  linear-gradient(180deg,#171338,#070B1C)}
.bg-3{background:
  radial-gradient(900px 500px at 70% 20%, rgba(90,140,220,.3), transparent 65%),
  radial-gradient(700px 400px at 20% 80%, rgba(39,64,105,.6), transparent 60%),
  linear-gradient(180deg,#0E1838,#070B1C)}
.bg-4{background:
  radial-gradient(900px 500px at 70% 15%, rgba(224,80,58,.3), transparent 65%),
  radial-gradient(700px 400px at 20% 85%, rgba(120,30,20,.55), transparent 60%),
  linear-gradient(180deg,#341226,#070B1C)}
.banniere-voile{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,11,28,.4) 0%,rgba(7,11,28,.62) 60%,var(--espace) 100%);
}
.banniere .filigrane{
  position:absolute;right:6%;top:18%;font-size:clamp(5rem,14vw,10rem);
  opacity:.14;z-index:-1;filter:drop-shadow(0 0 40px rgba(143,124,247,.6));
}
.fil-ariane{font-size:.85rem;margin-bottom:18px}
.fil-ariane a{color:var(--poussiere);text-decoration:none;transition:color .2s}
.fil-ariane a:hover{color:var(--etoile)}
.fil-ariane span{color:var(--brume);margin:0 8px}
.banniere .projet-tag{display:block;margin-bottom:12px;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.banniere h1{font-size:clamp(1.8rem,4.5vw,3rem);text-shadow:0 6px 40px rgba(0,0,0,.6)}
.banniere .accroche{color:var(--poussiere);max-width:58ch;margin-top:16px;font-size:1.05rem;text-shadow:0 2px 12px rgba(0,0,0,.7)}

.page-projet{display:grid;grid-template-columns:1.4fr .6fr;gap:44px;align-items:start;padding-top:70px;padding-bottom:70px}
.page-projet h2{
  font-family:'Unbounded',sans-serif;font-weight:600;font-size:1.15rem;
  margin:34px 0 14px;color:var(--lumiere);
}
.page-projet h2:first-child{margin-top:0}
.page-projet h2::before{content:"✦ ";color:var(--etoile);font-size:.8em}
.page-projet p{color:var(--poussiere);margin-bottom:14px}
.meta-carte{
  position:sticky;top:96px;
  background:linear-gradient(165deg,#1A2350,#0E1434);
  border:1px solid var(--brume);border-radius:var(--radius);padding:26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(0,0,0,.5);
  display:grid;gap:18px;
}
.meta-carte .meta strong{display:block;font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--etoile);margin-bottom:4px}
.meta-carte .meta span{color:var(--poussiere);font-size:.92rem}
.meta-carte .btn{text-align:center}

.galerie{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.galerie .cadre{
  aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--brume);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.4);
}
.galerie img{width:100%;height:100%;object-fit:cover;display:block}
.galerie .cadre-large{grid-column:1/-1}

/* aperçu — capture sous la bannière, dans son propre espace, discrète */
.apercu-projet{max-width:1080px;margin:0 auto;padding:44px 24px 0}
.apercu-projet img{
  width:100%;display:block;border-radius:var(--radius);border:1px solid var(--brume);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.55);
}

/* zoom des captures projet */
img.zoomable{cursor:zoom-in;transition:filter .25s}
img.zoomable:hover{filter:brightness(1.08)}

.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(4,6,16,.92);
  display:flex;align-items:center;justify-content:center;
  padding:40px;opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.ouvert{opacity:1;pointer-events:auto}
.lightbox img{
  max-width:100%;max-height:100%;border-radius:var(--radius);
  border:1px solid var(--brume);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  cursor:zoom-out;
}
.lightbox-fermer{
  position:absolute;top:24px;right:28px;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--brume);background:rgba(19,26,58,.85);
  color:var(--lumiere);font-size:1.4rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,color .2s;
}
.lightbox-fermer:hover{border-color:var(--etoile);color:var(--etoile)}

.nav-projets{
  display:flex;justify-content:space-between;gap:14px;
  border-top:1px solid var(--brume);padding-top:34px;padding-bottom:70px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .revele{opacity:1;transform:none}
  .const-ligne{stroke-dashoffset:0!important;stroke-dasharray:none!important}
}

@media (max-width:820px){
  .heros-grille,.a-propos,.page-projet{grid-template-columns:1fr}
  .grille-services,.grille-projets{grid-template-columns:1fr}
  .demarche{grid-template-columns:1fr;gap:28px}
  .burger{display:flex}
  .nav-liens{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--espace);
    border-bottom:1px solid rgba(143,124,247,.18);
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-liens.ouvert{max-height:600px}
  .nav-liens a{padding:16px 24px;border-top:1px solid rgba(143,124,247,.1)}
  .nav-liens a::after{display:none}
  .constellation{display:none}
  section{padding:70px 0}
  .meta-carte{position:static}
  .banniere{min-height:24vh;padding:90px 0 36px}
  .projet-vedette-visuel{aspect-ratio:16/11}
  .projet-vedette-corps{padding:24px;flex-direction:column;align-items:flex-start}
}