/* ==========================================================================
   SALMA WEBO — Agence web
   Design premium, sombre, mobile-first. FR / EN / AR (RTL).
   ========================================================================== */

:root{
  --fond:#06060a;
  --fond-2:#0a0a12;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --bord:rgba(255,255,255,.09);
  --bord-fort:rgba(255,255,255,.16);
  --texte:#f3f4f8;
  --doux:#a2a6ba;
  --violet:#7c5cff;
  --violet-clair:#a98bff;
  --violet-fonce:#5b3ce0;
  --or:#f0b429;
  --vert-wa:#25d366;
  --rayon:18px;
  --rayon-l:26px;
  --max:1180px;
  --t:.35s cubic-bezier(.22,.61,.36,1);
  --police:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --police-titre:'Space Grotesk','Inter',system-ui,sans-serif;
}
html[lang="ar"]{
  --police:'Cairo',system-ui,'Segoe UI',sans-serif;
  --police-titre:'Cairo','Space Grotesk',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--police);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--police-titre);line-height:1.15;margin:0;letter-spacing:-.02em}
p{margin:0}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}
.conteneur--etroit{max-width:760px}

/* Lien d'accès rapide : masqué sans décalage hors écran, sinon il crée un
   défilement latéral en arabe (RTL). Il réapparaît au focus clavier. */
.saut-contenu{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0
}
.saut-contenu:focus{
  position:fixed;inset-block-start:0;inset-inline-start:0;z-index:100;
  width:auto;height:auto;clip-path:none;padding:12px 18px;
  background:var(--violet);color:#fff;border-radius:0 0 12px 0
}
:focus-visible{outline:2px solid var(--violet-clair);outline-offset:3px;border-radius:6px}

/* ------------------------------------------------------------- BOUTONS -- */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:100px;border:1px solid transparent;
  font-family:var(--police-titre);font-weight:600;font-size:.94rem;
  cursor:pointer;transition:transform var(--t),box-shadow var(--t),background var(--t),border-color var(--t);
  white-space:nowrap;
}
.bouton svg{width:18px;height:18px;flex:none;stroke-width:2}
.bouton--primaire{
  background:linear-gradient(135deg,var(--violet) 0%,var(--violet-fonce) 100%);
  color:#fff;box-shadow:0 8px 26px -10px rgba(124,92,255,.85);
}
.bouton--primaire:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(124,92,255,.95)}
.bouton--fantome{background:var(--surface);border-color:var(--bord);color:var(--texte)}
.bouton--fantome:hover{background:var(--surface-2);border-color:var(--bord-fort);transform:translateY(-2px)}
.bouton--whatsapp{background:var(--vert-wa);color:#04220f;box-shadow:0 10px 28px -12px rgba(37,211,102,.9)}
.bouton--whatsapp:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bouton--whatsapp svg{fill:none;stroke-width:1.6}
.bouton--grand{padding:16px 28px;font-size:1rem}
.bouton--bloc{width:100%}
.bouton .fleche{transition:transform var(--t)}
.bouton:hover .fleche{transform:translateX(4px)}
[dir="rtl"] .bouton .fleche{transform:scaleX(-1)}
[dir="rtl"] .bouton:hover .fleche{transform:scaleX(-1) translateX(4px)}

/* -------------------------------------------------------------- HEADER -- */
.entete{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  background:rgba(6,6,10,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:border-color var(--t),background var(--t);
}
.entete.colle{border-bottom-color:var(--bord);background:rgba(6,6,10,.92)}
.entete__interieur{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px}
.entete__droite{display:flex;align-items:center;gap:10px}

.logo{direction:ltr;display:flex;align-items:baseline;gap:5px;font-family:var(--police-titre);font-weight:700;font-size:1.08rem;letter-spacing:.03em;flex:none;white-space:nowrap}
.logo__marque{color:#fff}
.logo__accent{background:linear-gradient(120deg,var(--violet-clair),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo__baseline{
  display:none;margin-inline-start:10px;padding-inline-start:10px;border-inline-start:1px solid var(--bord);
  font-family:var(--police);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)
}
@media(min-width:1280px){.logo__baseline{display:inline}}

.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex;align-items:center;gap:22px}
  .nav a{font-size:.92rem;color:var(--doux);transition:color var(--t);position:relative;white-space:nowrap}
  .nav a:hover{color:#fff}
  .nav a:not(.nav__cta)::after{content:"";position:absolute;inset-block-end:-6px;inset-inline-start:0;width:0;height:2px;background:var(--violet);transition:width var(--t)}
  .nav a:not(.nav__cta):hover::after{width:100%}
  .nav__cta{display:none}
}

.langues{display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--bord);border-radius:100px}
.langues button{
  border:0;background:none;color:var(--doux);font-family:var(--police-titre);font-weight:600;
  font-size:.76rem;letter-spacing:.06em;padding:6px 10px;border-radius:100px;cursor:pointer;transition:all var(--t)
}
.langues button:hover{color:#fff}
.langues button.actif{background:linear-gradient(135deg,var(--violet),var(--violet-fonce));color:#fff}

.entete__cta{display:none}
@media(min-width:560px){.entete__cta{display:inline-flex}}

.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;background:var(--surface);border:1px solid var(--bord);border-radius:12px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform var(--t),opacity var(--t)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

@media(max-width:999px){
  .nav{
    position:fixed;inset-block-start:72px;inset-inline:0;display:flex;flex-direction:column;gap:0;
    background:rgba(8,8,14,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--bord);
    padding:8px 20px 22px;transform:translateY(-14px);opacity:0;pointer-events:none;transition:all var(--t)
  }
  .nav.ouvert{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav a{padding:15px 4px;border-bottom:1px solid var(--bord);font-size:1.02rem}
  .nav__cta{margin-top:16px;border:0;justify-content:center}
}

/* ---------------------------------------------------------------- HERO -- */
.hero{position:relative;padding-block:112px 0;overflow:hidden}
@media(min-width:900px){.hero{padding-block:150px 0}}
.hero__lueur{
  position:absolute;inset-block-start:-320px;inset-inline-start:50%;transform:translateX(-50%);
  width:900px;height:900px;pointer-events:none;
  background:radial-gradient(circle,rgba(124,92,255,.30) 0%,rgba(124,92,255,.09) 38%,transparent 66%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 40%,transparent 100%);
}
.hero__grille{position:relative;display:grid;gap:52px;padding-bottom:64px}
@media(min-width:1000px){.hero__grille{grid-template-columns:1.05fr .95fr;align-items:center;gap:44px;padding-bottom:88px}}

.badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;margin-bottom:22px;
  background:var(--surface);border:1px solid var(--bord);border-radius:100px;
  font-size:.79rem;font-weight:500;letter-spacing:.04em;color:#d8d9e6
}
.badge__point{width:7px;height:7px;border-radius:50%;background:var(--or);box-shadow:0 0 0 4px rgba(240,180,41,.16);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(240,180,41,0)}}

.hero__titre{font-size:clamp(2.35rem,8.2vw,4.15rem);font-weight:700;margin-bottom:20px}
.degrade{background:linear-gradient(100deg,var(--violet-clair) 10%,var(--violet) 55%,#c9a6ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sous-titre{font-size:clamp(1rem,2.6vw,1.14rem);color:var(--doux);max-width:37em;margin-bottom:30px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.hero__actions .bouton{flex:1 1 auto;min-width:210px}
@media(min-width:560px){.hero__actions .bouton{flex:0 0 auto}}
.hero__tags{font-size:.83rem;color:#7d819a;letter-spacing:.02em}

/* Visuel hero */
.hero__visuel{position:relative;margin-inline:auto;width:100%;max-width:520px}
.fenetre{
  background:linear-gradient(160deg,rgba(24,20,44,.96),rgba(10,10,18,.96));
  border:1px solid var(--bord-fort);border-radius:var(--rayon-l);overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(124,92,255,.12) inset;
}
.fenetre__barre{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--bord);background:rgba(255,255,255,.02)}
.pastille{width:10px;height:10px;border-radius:50%}
.pastille--1{background:#ff5f57}.pastille--2{background:#febc2e}.pastille--3{background:#28c840}
.fenetre__url{margin-inline-start:auto;font-size:.7rem;color:#71748c;letter-spacing:.06em;direction:ltr}
.fenetre__corps{padding:18px}
.code{
  margin:0 0 16px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.76rem;line-height:1.85;
  color:#b9bcd0;direction:ltr;text-align:left;overflow-x:auto
}
.code .l{display:block;white-space:pre}
.code i{color:#ff79c6;font-style:normal}
.code b{color:#8be9fd;font-weight:500}
.code s{color:#f1fa8c;text-decoration:none}
.code n{color:#bd93f9}
.code k{color:#50fa7b}
.code f{color:var(--violet-clair)}

.dashboard{padding:16px;background:rgba(255,255,255,.03);border:1px solid var(--bord);border-radius:14px}
.dashboard__ligne{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;color:var(--doux);margin-bottom:6px}
.dashboard__ligne b{font-family:var(--police-titre);color:#fff;font-size:.86rem}
.barre{height:5px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden;margin-bottom:14px}
.barre i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--violet),var(--violet-clair));animation:remplir 1.4s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:.4s}
@keyframes remplir{to{width:var(--w)}}
.barre:last-child{margin-bottom:0}

.carte-flottante{
  position:absolute;display:flex;align-items:center;gap:11px;padding:12px 15px;
  background:rgba(14,14,24,.94);backdrop-filter:blur(12px);border:1px solid var(--bord-fort);
  border-radius:16px;box-shadow:0 20px 46px -22px rgba(0,0,0,.95);animation:flotte 5.5s ease-in-out infinite
}
.carte-flottante svg{width:20px;height:20px;flex:none;color:var(--or)}
.carte-flottante strong{display:block;font-family:var(--police-titre);font-size:.82rem;color:#fff}
.carte-flottante span{display:block;font-size:.7rem;color:var(--doux)}
.carte-flottante--haut{inset-block-start:-22px;inset-inline-end:-8px}
.carte-flottante--bas{inset-block-end:-26px;inset-inline-start:-8px;animation-delay:1.6s}
.carte-flottante--bas svg{color:var(--violet-clair)}
@keyframes flotte{50%{transform:translateY(-9px)}}
@media(max-width:520px){.carte-flottante{display:none}}

.bandeau{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;
  padding:20px;border-block:1px solid var(--bord);background:rgba(255,255,255,.015)
}
.bandeau li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--doux);letter-spacing:.03em}
.bandeau li::before{content:"";width:14px;height:14px;border-radius:50%;border:1.5px solid var(--or);flex:none}

/* ------------------------------------------------------------ SECTIONS -- */
.section{padding-block:74px;position:relative}
@media(min-width:900px){.section{padding-block:104px}}
.section--alt{background:linear-gradient(180deg,transparent,rgba(124,92,255,.045),transparent)}
.surtitre{font-family:var(--police-titre);font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-clair);margin-bottom:14px}
.titre-section{font-size:clamp(1.75rem,5.2vw,2.65rem);font-weight:700;margin-bottom:16px}
.texte{color:var(--doux);font-size:1.02rem;max-width:60ch}
.texte--centre{margin-inline:auto}
.entete-section{text-align:center;margin-bottom:44px}
@media(min-width:900px){.entete-section{margin-bottom:56px}}

/* ------------------------------------------------------------ À PROPOS -- */
.apropos{display:grid;gap:40px}
@media(min-width:940px){.apropos{grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
  .apropos__intro{position:sticky;top:110px}}
.apropos__intro .bouton{margin-top:26px}
.apropos__points{display:grid;gap:16px}
@media(min-width:560px){.apropos__points{grid-template-columns:1fr 1fr}}
.point{padding:24px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--rayon);transition:transform var(--t),border-color var(--t),background var(--t)}
.point:hover{transform:translateY(-4px);border-color:rgba(124,92,255,.45);background:var(--surface-2)}
.point__icone{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;border-radius:13px;background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.3);color:var(--violet-clair)}
.point__icone svg{width:22px;height:22px}
.point h3{font-size:1.04rem;margin-bottom:8px}
.point p{color:var(--doux);font-size:.9rem}

/* ------------------------------------------------------------ SERVICES -- */
.grille-services{display:grid;gap:16px}
@media(min-width:620px){.grille-services{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grille-services{grid-template-columns:repeat(3,1fr)}}
.service{
  position:relative;padding:28px 24px;background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--rayon-l);overflow:hidden;transition:transform var(--t),border-color var(--t)
}
.service::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);opacity:0;transition:opacity var(--t)
}
.service:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.45)}
.service:hover::before{opacity:1}
.service__icone{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:20px;border-radius:15px;background:linear-gradient(140deg,rgba(124,92,255,.22),rgba(124,92,255,.06));border:1px solid rgba(124,92,255,.28);color:var(--violet-clair);transition:transform var(--t)}
.service:hover .service__icone{transform:scale(1.07) rotate(-4deg)}
.service__icone svg{width:25px;height:25px}
.service h3{font-size:1.08rem;margin-bottom:10px}
.service p{color:var(--doux);font-size:.9rem}

/* ----------------------------------------------------------- EXPERTISE -- */
.grille-expertise{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:700px){.grille-expertise{grid-template-columns:repeat(4,1fr)}}
.expertise{
  display:flex;align-items:center;gap:10px;padding:18px 16px;background:var(--surface);
  border:1px solid var(--bord);border-radius:14px;font-family:var(--police-titre);font-weight:500;
  font-size:.86rem;transition:all var(--t);direction:ltr
}
[dir="rtl"] .expertise{flex-direction:row-reverse}
.expertise::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);flex:none;transition:box-shadow var(--t)}
.expertise:hover{border-color:rgba(124,92,255,.5);background:var(--surface-2);transform:translateY(-3px)}
.expertise:hover::before{box-shadow:0 0 0 5px rgba(124,92,255,.2)}

/* -------------------------------------------------------------- PROJETS -- */
.grille-projets{display:grid;gap:20px}
@media(min-width:620px){.grille-projets{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grille-projets{grid-template-columns:repeat(3,1fr)}}
.projet{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--rayon-l);overflow:hidden;transition:transform var(--t),border-color var(--t),box-shadow var(--t)
}
.projet:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.45);box-shadow:0 26px 54px -30px rgba(124,92,255,.6)}
.projet__image{position:relative;aspect-ratio:16/10;overflow:hidden;background:#101018}
.projet__image img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.projet:hover .projet__image img{transform:scale(1.06)}
.projet__cat{
  position:absolute;inset-block-start:12px;inset-inline-start:12px;padding:5px 12px;border-radius:100px;
  background:rgba(6,6,10,.82);backdrop-filter:blur(8px);border:1px solid var(--bord-fort);
  font-size:.7rem;font-weight:500;letter-spacing:.05em
}
.projet__corps{display:flex;flex-direction:column;gap:8px;padding:20px;flex:1}
.projet__corps h3{font-size:1.06rem}
.projet__corps p{color:var(--doux);font-size:.88rem;flex:1}
.projet__lien{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-family:var(--police-titre);font-weight:600;font-size:.87rem;color:var(--violet-clair);transition:gap var(--t)}
.projet__lien:hover{gap:12px}
.projet__lien svg{width:15px;height:15px;stroke-width:2.2}
[dir="rtl"] .projet__lien svg{transform:scaleX(-1)}

/* ------------------------------------------------------------ TIMELINE -- */
.timeline{display:grid;gap:18px;position:relative}
@media(min-width:900px){.timeline{grid-template-columns:repeat(4,1fr);gap:20px}
  .timeline::before{content:"";position:absolute;inset-block-start:34px;inset-inline:12%;height:1px;background:linear-gradient(90deg,transparent,var(--bord-fort),var(--bord-fort),transparent)}}
.etape{position:relative;padding:26px 22px;background:var(--surface);border:1px solid var(--bord);border-radius:var(--rayon);transition:transform var(--t),border-color var(--t)}
.etape:hover{transform:translateY(-5px);border-color:rgba(124,92,255,.45)}
.etape__num{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:16px;
  border-radius:50%;background:var(--fond-2);border:1px solid rgba(124,92,255,.4);
  font-family:var(--police-titre);font-weight:700;font-size:.9rem;color:var(--violet-clair);direction:ltr
}
.etape h3{font-size:1.04rem;margin-bottom:8px}
.etape p{color:var(--doux);font-size:.89rem}

/* ---------------------------------------------------------- FORMULAIRE -- */
.section--form{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(124,92,255,.12),transparent 70%)}
.carte-form{
  padding:26px 20px;background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--bord-fort);border-radius:var(--rayon-l);
  box-shadow:0 40px 90px -50px rgba(124,92,255,.7)
}
@media(min-width:620px){.carte-form{padding:38px 34px}}
.champ{margin:0 0 22px;padding:0;border:0}
.champ label,.champ legend{display:block;margin-bottom:9px;padding:0;font-family:var(--police-titre);font-weight:600;font-size:.92rem}
.champ input{
  width:100%;padding:15px 17px;background:rgba(6,6,10,.6);border:1px solid var(--bord);
  border-radius:14px;color:var(--texte);font-family:var(--police);font-size:1rem;transition:all var(--t)
}
.champ input::placeholder{color:#6b6e85}
.champ input:focus{outline:none;border-color:var(--violet);background:rgba(6,6,10,.9);box-shadow:0 0 0 4px rgba(124,92,255,.16)}
.champ input[aria-invalid="true"]{border-color:#ff6b6b}
.erreur{margin-top:8px;font-size:.83rem;color:#ff8585}

.choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choix__item{position:relative}
.choix__item input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.choix__item label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:104px;padding:16px 10px;margin:0;text-align:center;
  background:rgba(6,6,10,.5);border:1px solid var(--bord);border-radius:16px;
  font-size:.86rem;font-weight:500;cursor:pointer;transition:all var(--t)
}
.choix__item label svg{width:23px;height:23px;color:var(--doux);transition:color var(--t)}
.choix__item input:hover+label{border-color:var(--bord-fort);background:rgba(255,255,255,.05)}
.choix__item input:focus-visible+label{outline:2px solid var(--violet-clair);outline-offset:2px}
.choix__item input:checked+label{
  border-color:var(--violet);background:linear-gradient(150deg,rgba(124,92,255,.22),rgba(124,92,255,.07));
  box-shadow:0 0 0 3px rgba(124,92,255,.16)
}
.choix__item input:checked+label svg{color:var(--violet-clair)}
.note{margin-top:16px;text-align:center;font-size:.82rem;color:#7d819a}

/* États après envoi */
.etat{text-align:center;animation:apparait .45s cubic-bezier(.22,.61,.36,1)}
@keyframes apparait{from{opacity:0;transform:translateY(14px)}}
.etat__icone{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:20px;border-radius:50%;background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);color:var(--vert-wa)}
.etat__icone svg{width:30px;height:30px;stroke-width:2.4}
.etat__icone--or{background:rgba(240,180,41,.14);border-color:rgba(240,180,41,.4);color:var(--or)}
.etat h3{font-size:1.45rem;margin-bottom:12px}
.etat>p{color:var(--doux);font-size:.97rem;max-width:46ch;margin:0 auto 22px}
.recap{display:grid;gap:9px;padding:18px;margin-bottom:22px;text-align:start;background:rgba(6,6,10,.55);border:1px solid var(--bord);border-radius:16px}
.recap__ligne{display:flex;justify-content:space-between;gap:14px;font-size:.9rem}
.recap__ligne span{color:var(--doux);flex:none}
.recap__ligne b{font-weight:600;text-align:end;word-break:break-word}
.etapes{display:grid;gap:9px;margin-top:22px;text-align:start}
.etapes li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;
  background:rgba(255,255,255,.03);border:1px solid var(--bord);border-radius:12px;
  font-size:.87rem;color:var(--doux);transition:all var(--t)
}
.etapes li b{color:var(--doux)}
.etapes li.fait{border-color:rgba(37,211,102,.4);color:var(--texte)}
.etapes li.fait b{color:var(--vert-wa)}
.lien-retour{display:inline-block;margin-top:18px;background:none;border:0;color:var(--doux);font-family:var(--police);font-size:.86rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:color var(--t)}
.lien-retour:hover{color:#fff}

/* ---------------------------------------------------------------- PIED -- */
.pied{padding-top:60px;border-top:1px solid var(--bord);background:var(--fond-2)}
.pied__grille{display:grid;gap:34px;padding-bottom:44px}
@media(min-width:760px){.pied__grille{grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:30px}}
.pied__marque .logo{margin-bottom:14px}
.pied__texte{color:var(--doux);font-size:.88rem;max-width:38ch;margin-bottom:18px}
.reseaux{display:flex;gap:10px}
.reseaux a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--surface);border:1px solid var(--bord);border-radius:12px;color:var(--doux);transition:all var(--t)}
.reseaux a:hover{color:#fff;border-color:var(--violet);background:rgba(124,92,255,.16);transform:translateY(-3px)}
.reseaux svg{width:18px;height:18px}
.pied__colonne h4{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.pied__colonne li{margin-bottom:10px}
.pied__colonne a,.pied__colonne li{color:var(--doux);font-size:.89rem;transition:color var(--t)}
.pied__colonne a:hover{color:var(--violet-clair)}
.pied__contact a{display:flex;align-items:center;gap:9px}
.pied__contact svg{width:16px;height:16px;flex:none;color:var(--violet-clair)}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-block:20px;border-top:1px solid var(--bord);font-size:.8rem;color:#71748c}

/* ------------------------------------------------------------ BULLE WA -- */
.bulle-wa{
  position:fixed;inset-block-end:18px;inset-inline-end:18px;z-index:55;
  display:flex;align-items:center;gap:9px;padding:13px 18px;
  background:linear-gradient(135deg,var(--violet),var(--violet-fonce));color:#fff;border-radius:100px;
  font-family:var(--police-titre);font-weight:600;font-size:.88rem;
  box-shadow:0 14px 34px -12px rgba(124,92,255,.95);transition:transform var(--t),opacity var(--t);
  opacity:0;transform:translateY(20px);pointer-events:none
}
.bulle-wa.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.bulle-wa:hover{transform:translateY(-3px)}
.bulle-wa svg{width:20px;height:20px;flex:none;stroke-width:1.6}
@media(max-width:520px){.bulle-wa span{display:none}.bulle-wa{padding:15px;inset-block-end:14px;inset-inline-end:14px}}

/* ---------------------------------------------------------- ANIMATIONS -- */
.anim{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.anim.vu{opacity:1;transform:none}
.anim[data-delai="1"]{transition-delay:.08s}
.anim[data-delai="2"]{transition-delay:.16s}
.anim[data-delai="3"]{transition-delay:.24s}
.anim[data-delai="4"]{transition-delay:.32s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .anim{opacity:1;transform:none}
  .barre i{width:var(--w)}
}

/* ---------------------------------------------------- CHIFFRES CLÉS ----- */
.chiffres{
  position:relative;display:grid;gap:14px;padding-bottom:44px
}
@media(min-width:760px){.chiffres{grid-template-columns:repeat(3,1fr);gap:18px}}
.chiffre{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--rayon);
  transition:transform var(--t),border-color var(--t)
}
.chiffre:hover{transform:translateY(-4px);border-color:rgba(240,180,41,.4)}
.chiffre__icone{
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;
  border-radius:15px;background:rgba(240,180,41,.16);border:1px solid rgba(240,180,41,.42);color:#ffc94d
}
.chiffre__icone svg{width:24px;height:24px;stroke-width:1.9}
.chiffre b{display:block;font-family:var(--police-titre);font-size:1.5rem;line-height:1.1;color:#fff;direction:ltr}
.chiffre span{display:block;font-size:.86rem;color:var(--doux)}

/* ----------------------------------------------------- TECHNOLOGIES ----- */
.section--tech{background:linear-gradient(180deg,transparent,rgba(240,180,41,.035),transparent)}
.grille-tech{display:flex;flex-wrap:wrap;justify-content:center;gap:11px}
.tech{
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;
  background:var(--surface);border:1px solid var(--bord);border-radius:100px;
  font-family:var(--police-titre);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  transition:transform var(--t),border-color var(--t),background var(--t);direction:ltr
}
.tech__point{width:9px;height:9px;border-radius:50%;background:var(--c,var(--violet));box-shadow:0 0 12px -1px var(--c,var(--violet));flex:none}
.tech:hover{transform:translateY(-3px);border-color:var(--c,var(--violet));background:var(--surface-2)}

/* ==========================================================================
   PASSE DESIGN & ANIMATIONS
   ========================================================================== */

/* --- Barre de progression de lecture ------------------------------------ */
.progression{
  position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:70;
  background:linear-gradient(90deg,var(--violet),var(--violet-clair),var(--or));
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  transition:transform .12s linear;pointer-events:none
}
[dir="rtl"] .progression{transform-origin:100% 50%}

/* --- Aurores animées du hero -------------------------------------------- */
.aurore{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.aurore i{
  position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:derive 22s ease-in-out infinite
}
.aurore i:nth-child(1){width:520px;height:520px;inset-block-start:-160px;inset-inline-start:-80px;background:rgba(124,92,255,.42)}
.aurore i:nth-child(2){width:420px;height:420px;inset-block-start:120px;inset-inline-end:-100px;background:rgba(169,139,255,.30);animation-delay:-7s;animation-duration:26s}
.aurore i:nth-child(3){width:340px;height:340px;inset-block-end:-120px;inset-inline-start:38%;background:rgba(240,180,41,.16);animation-delay:-14s;animation-duration:30s}
@keyframes derive{
  33%{transform:translate3d(60px,40px,0) scale(1.12)}
  66%{transform:translate3d(-40px,70px,0) scale(.94)}
}

/* --- Boutons : reflet au survol ----------------------------------------- */
.bouton{position:relative;overflow:hidden;isolation:isolate}
.bouton--primaire::after,.bouton--whatsapp::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);transition:inset-inline-start .55s cubic-bezier(.22,.61,.36,1)
}
.bouton--primaire:hover::after,.bouton--whatsapp:hover::after{inset-inline-start:120%}

/* --- Titres de section : trait dégradé ---------------------------------- */
.entete-section .titre-section{position:relative;display:inline-block;padding-bottom:14px}
.entete-section .titre-section::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:50%;transform:translateX(-50%) scaleX(0);
  width:74px;height:3px;border-radius:3px;transform-origin:center;
  background:linear-gradient(90deg,var(--violet),var(--or));
  transition:transform .7s cubic-bezier(.22,.61,.36,1) .15s
}
.entete-section.vu .titre-section::after{transform:translateX(-50%) scaleX(1)}

/* --- Effet spotlight sur les cartes ------------------------------------- */
.service,.point,.projet,.etape,.chiffre{position:relative}
.service::after,.point::after,.etape::after,.chiffre::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(124,92,255,.16),transparent 62%);
  transition:opacity .4s ease
}
.service:hover::after,.point:hover::after,.etape:hover::after,.chiffre:hover::after{opacity:1}
.chiffre::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(240,180,41,.14),transparent 62%)}

/* --- Cartes projets : voile et libellé au survol ------------------------- */
.projet__image::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:linear-gradient(180deg,rgba(6,6,10,0) 35%,rgba(46,26,110,.55) 100%)
}
.projet:hover .projet__image::after{opacity:1}

/* --- Timeline : ligne qui se remplit ------------------------------------ */
@media(min-width:900px){
  .timeline::after{
    content:"";position:absolute;inset-block-start:34px;inset-inline-start:12%;width:76%;height:1px;
    background:linear-gradient(90deg,var(--violet),var(--violet-clair),var(--or));
    transform:scaleX(var(--t,0));transform-origin:0 50%;transition:transform .9s cubic-bezier(.22,.61,.36,1)
  }
  [dir="rtl"] .timeline::after{transform-origin:100% 50%}
}
.etape:hover .etape__num{border-color:var(--violet);background:rgba(124,92,255,.16);color:#fff;transform:scale(1.06)}
.etape__num{transition:all var(--t)}

/* --- Technologies : bandeau défilant ------------------------------------ */
.defilement{
  position:relative;display:flex;gap:11px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.defilement__piste{display:flex;gap:11px;flex:none;animation:defile 38s linear infinite;direction:ltr}
.defilement:hover .defilement__piste{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-100%)}}
[dir="rtl"] .defilement__piste{animation-direction:reverse}

/* --- Navigation : lien de la section visible ---------------------------- */
@media(min-width:1000px){
  .nav a.actif{color:#fff}
  .nav a.actif:not(.nav__cta)::after{width:100%}
}

/* --- Formulaire : sélection animée --------------------------------------- */
.choix__item label{position:relative;overflow:hidden}
.choix__item label::before{
  content:"";position:absolute;inset-block-start:10px;inset-inline-end:10px;width:18px;height:18px;
  border-radius:50%;border:1px solid var(--bord-fort);opacity:.6;transition:all var(--t)
}
.choix__item input:checked+label::before{
  background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--violet);opacity:1;transform:scale(1.06)
}
.choix__item input:checked+label{animation:choisi .32s cubic-bezier(.22,.61,.36,1)}
@keyframes choisi{40%{transform:scale(.97)}}

/* --- Révélations : variantes -------------------------------------------- */
.anim{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.anim[data-delai="5"]{transition-delay:.4s}
.anim[data-delai="6"]{transition-delay:.48s}
.anim[data-delai="7"]{transition-delay:.56s}
.hero__visuel{transition-duration:.9s}

/* --- Bulle WhatsApp : halo respirant ------------------------------------ */
.bulle-wa::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg,var(--violet-clair),var(--violet));
  opacity:.5;filter:blur(10px);animation:halo 3.2s ease-in-out infinite
}
@keyframes halo{50%{opacity:.85;filter:blur(16px)}}

@media(prefers-reduced-motion:reduce){
  .aurore i,.defilement__piste,.bulle-wa::before{animation:none}
  .entete-section .titre-section::after{transform:translateX(-50%) scaleX(1)}
  .timeline::after{transform:scaleX(1)}
}

/* --- Note sous les services --------------------------------------------- */
.note-services{
  display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:36px;padding:28px 24px;
  text-align:center;background:linear-gradient(150deg,rgba(124,92,255,.14),rgba(255,255,255,.03));
  border:1px solid rgba(124,92,255,.28);border-radius:var(--rayon-l)
}
@media(min-width:820px){
  .note-services{flex-direction:row;justify-content:space-between;text-align:start;padding:26px 32px}
}
.note-services p{color:#d9dae7;font-size:1rem;max-width:62ch}
.note-services .bouton{flex:none}

/* --- Filtres du portfolio ------------------------------------------------ */
.filtres{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:32px}
.filtre{
  padding:10px 18px;background:var(--surface);border:1px solid var(--bord);border-radius:100px;
  color:var(--doux);font-family:var(--police-titre);font-weight:600;font-size:.85rem;
  cursor:pointer;transition:all var(--t)
}
.filtre:hover{color:#fff;border-color:var(--bord-fort);transform:translateY(-2px)}
.filtre.actif{
  background:linear-gradient(135deg,var(--violet),var(--violet-fonce));border-color:transparent;color:#fff;
  box-shadow:0 8px 22px -12px rgba(124,92,255,.9)
}

/* --- Cartes projets : étiquettes, visite et vignette de secours ---------- */
a.projet{color:inherit}
.projet__voir{
  position:absolute;inset-block-end:12px;inset-inline-end:12px;padding:7px 14px;border-radius:100px;
  background:rgba(124,92,255,.92);color:#fff;font-family:var(--police-titre);font-weight:600;font-size:.76rem;
  opacity:0;transform:translateY(8px);transition:all var(--t);z-index:2;white-space:nowrap
}
.projet:hover .projet__voir,.projet:focus-visible .projet__voir{opacity:1;transform:translateY(0)}
.projet__initiale{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:linear-gradient(150deg,rgba(124,92,255,.30),rgba(10,10,18,.9));
  font-family:var(--police-titre);font-weight:700;font-size:3.4rem;color:rgba(255,255,255,.86)
}
.projet--sans-lien{opacity:.94}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tags li{
  padding:5px 11px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.24);
  border-radius:100px;font-size:.72rem;color:#c9c9dd;letter-spacing:.01em
}

/* ==========================================================================
   IDENTITÉ VISUELLE — palette plus chaleureuse et contrastée
   ========================================================================== */
:root{
  --fond:#07060f;
  --fond-2:#0c0a18;
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --bord:rgba(255,255,255,.11);
  --bord-fort:rgba(255,255,255,.19);
  --texte:#f7f6fc;
  --doux:#b6b5cd;
  --violet:#7c5cff;
  --violet-clair:#b49cff;
  --violet-fonce:#5a34e8;
  --rose:#ff4d9d;
  --or:#ffb020;
  --duo:linear-gradient(120deg,#7c5cff 0%,#a855f7 45%,#ff4d9d 100%);
}

/* Boutons et éléments d'action : dégradé violet → rose */
.bouton--primaire{background:var(--duo);box-shadow:0 10px 30px -12px rgba(168,85,247,.9)}
.bouton--primaire:hover{box-shadow:0 16px 40px -12px rgba(255,77,157,.75)}
.filtre.actif,.langues button.actif,.nav__cta{background:var(--duo)}
.progression{background:linear-gradient(90deg,#7c5cff,#ff4d9d,#ffb020)}
.bulle-wa{background:var(--duo)}
.bulle-wa::before{background:var(--duo)}

/* Titres : dégradé plus lumineux */
.degrade{background:linear-gradient(105deg,#b49cff 0%,#c084fc 40%,#ff6fae 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo__accent{background:linear-gradient(120deg,#b49cff,#ff6fae);-webkit-background-clip:text;background-clip:text;color:transparent}
.entete-section .titre-section::after{background:linear-gradient(90deg,#7c5cff,#ff4d9d,#ffb020);width:88px}
.surtitre{color:#c8a6ff}

/* Cartes : liseré coloré au survol */
.service:hover,.point:hover,.projet:hover,.etape:hover{border-color:rgba(255,77,157,.42)}
.service::before{background:linear-gradient(90deg,transparent,var(--rose),var(--violet),transparent)}
.projet:hover{box-shadow:0 28px 60px -32px rgba(168,85,247,.75)}
.service__icone{background:linear-gradient(140deg,rgba(124,92,255,.28),rgba(255,77,157,.12));border-color:rgba(180,156,255,.34);color:#cbb6ff}
.service:hover .service__icone{background:linear-gradient(140deg,rgba(255,77,157,.28),rgba(124,92,255,.16));color:#ffb3d6}
.point__icone{background:linear-gradient(140deg,rgba(124,92,255,.2),rgba(255,77,157,.1));border-color:rgba(180,156,255,.32);color:#cbb6ff}
.tags li{background:rgba(168,85,247,.14);border-color:rgba(255,77,157,.22);color:#d5d2e8}
.service::after,.point::after,.etape::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,77,157,.14),transparent 62%)
}
.badge{background:linear-gradient(120deg,rgba(124,92,255,.18),rgba(255,77,157,.10));border-color:rgba(180,156,255,.30);color:#eae6ff}
.aurore i:nth-child(2){background:rgba(255,77,157,.26)}
.aurore i:nth-child(3){background:rgba(255,176,32,.18)}
.hero__lueur{background:radial-gradient(circle,rgba(124,92,255,.34) 0%,rgba(255,77,157,.12) 40%,transparent 68%)}
.expertise:hover{border-color:rgba(255,77,157,.5)}
.note-services{background:linear-gradient(140deg,rgba(124,92,255,.20),rgba(255,77,157,.09));border-color:rgba(180,156,255,.34)}
.section--alt{background:linear-gradient(180deg,transparent,rgba(168,85,247,.06),transparent)}
.section--tech{background:linear-gradient(180deg,transparent,rgba(255,176,32,.045),transparent)}
.section--form{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(168,85,247,.16),transparent 72%)}

/* Confirmation d'envoi vers l'email de l'agence */
.recu{
  display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto 18px;padding:11px 16px;
  max-width:max-content;background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.34);
  border-radius:100px;font-size:.87rem;color:#c9f5da
}
.recu svg{width:17px;height:17px;flex:none;color:var(--vert-wa)}

/* ==========================================================================
   VISUEL D'EXPERTISE — architecture d'un projet
   ========================================================================== */
.architecture{
  margin:0 auto 44px;max-width:880px;padding:26px 20px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--bord);border-radius:var(--rayon-l);overflow:hidden
}
@media(min-width:760px){.architecture{padding:32px}}
.architecture svg{width:100%;height:auto;stroke:none;fill:none;display:block}
.arc-carte{fill:rgba(255,255,255,.045);stroke:rgba(255,255,255,.16)}
.arc-carte-accent{fill:rgba(124,92,255,.16);stroke:rgba(180,156,255,.45)}
.arc-titre{fill:#f2f0fa;font:600 13px/1 'Space Grotesk',sans-serif}
.arc-legende{fill:#b6b5cd;font:400 11px/1 Inter,sans-serif}
.arc-puce{fill:rgba(255,255,255,.28)}
.arc-lien{stroke:rgba(180,156,255,.55);stroke-width:1.6;stroke-dasharray:5 6;animation:flux 1.6s linear infinite}
.arc-halo{fill:url(#gradArc);opacity:.5}
@keyframes flux{to{stroke-dashoffset:-22}}
@media(prefers-reduced-motion:reduce){.arc-lien{animation:none}}

/* Pied : pas de marge résiduelle quand la liste des réseaux est vide */
.reseaux:empty{display:none}
.pied__texte{margin-bottom:0}