/* ================================================
   OWLL — style.css
   https://owll.fr
================================================ */

:root {
  --orange:        #F7A800;
  --orange-dark:   #D98C00;
  --brown:         #7B4F2E;
  --brown-light:   #A0693D;
  --yellow:        #F5C518;
  --dark:          #0F0F0F;
  --dark-2:        #171717;
  --dark-3:        #1E1E1E;
  --warm-dark:     #1D1815;
  --warm-dark-2:   #251F1A;
  --warm-dark-3:   #2E2620;
  --gray-mid:      #6B6B6B;
  --gray-light:    #ABABAB;
  --light:         #F8F3EC;
  --light-2:       #EDE8DF;
  --white:         #FFFFFF;
  --radius:        14px;
  --radius-lg:     24px;
  --shadow-orange: 0 8px 40px rgba(247,168,0,0.25);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: var(--dark); color: var(--white); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
/* Focus visible accessible */
/* Skip link - lecteurs d'écran */
.skip-link { position:absolute; top:-100px; left:1rem; background:var(--orange); color:var(--dark); padding:.5rem 1rem; border-radius:6px; font-weight:700; font-size:.9rem; z-index:999; transition:top .2s; }
.skip-link:focus { top:1rem; }

/* Focus visible accessible */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 10px; }

/* ---- NAV ---- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 5%; display: flex; align-items: center; justify-content: space-between;
  height: 70px; transition: background .4s, box-shadow .4s;
}
nav.scrolled { background: rgba(248,243,236,.97); backdrop-filter: blur(14px); box-shadow: 0 2px 0 rgba(123,79,46,.1); }
nav.scrolled .nav-links a { color: var(--dark) !important; }
nav.scrolled .nav-links a:hover { color: var(--orange) !important; }
nav.scrolled .nav-links a::after { background: var(--orange); }
nav.scrolled .nav-cta { background: var(--orange); color: var(--dark) !important; box-shadow: none; }
nav.scrolled .nav-burger span { background: var(--dark); }
.nav-logo img { height: 34px; }
.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a { font-family:'Syne',sans-serif; font-size:.83rem; font-weight:600; color:var(--gray-light); letter-spacing:.06em; text-transform:uppercase; transition:color .2s; position:relative; }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--orange); transition:width .3s; }
.nav-links a:hover { color:var(--orange); }
.nav-links a:hover::after { width:100%; }
.nav-cta { display:inline-flex; align-items:center; gap:.4rem; background:var(--orange); color:var(--dark)!important; padding:.48rem 1.15rem; border-radius:50px; font-weight:700!important; transition:background .2s,transform .2s!important; }
.nav-cta:hover { background:var(--yellow)!important; transform:translateY(-1px); }
.nav-cta::after { display:none!important; }

/* ---- HERO ---- */
#hero { position:relative; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:120px 5% 90px; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(247,168,0,.07) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 80% 80%, rgba(123,79,46,.08) 0%, transparent 60%), var(--dark); }
.grid-overlay { position:absolute; inset:0; background-image: linear-gradient(rgba(247,168,0,.034) 1px,transparent 1px), linear-gradient(90deg,rgba(247,168,0,.034) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 0%,transparent 70%); }
.particles { position:absolute; inset:0; pointer-events:none; }
.particle { position:absolute; border-radius:50%; animation:floatUp linear infinite; opacity:0; }
@keyframes floatUp { 0%{opacity:0;transform:translateY(0) scale(.5)} 10%{opacity:.9} 90%{opacity:.4} 100%{opacity:0;transform:translateY(-120vh) scale(1.3)} }
.hero-content { position:relative; z-index:2; max-width:820px; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(247,168,0,.1); border:1px solid rgba(247,168,0,.25); color:var(--orange); padding:.38rem 1.1rem; border-radius:50px; font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:2rem; animation:fadeUp .8s ease .2s both; }
.hero-logo { width:290px; margin:0 auto 2.2rem; animation:fadeUp .8s ease .4s both; filter:drop-shadow(0 0 50px rgba(247,168,0,.35)); mix-blend-mode:screen; }
.hero-headline { font-family:'Syne',sans-serif; font-size:clamp(1.7rem,4.5vw,3.4rem); font-weight:800; line-height:1.2; margin-bottom:1.2rem; animation:fadeUp .8s ease .6s both; }
.hero-headline em { font-style:normal; color:var(--orange); }
.hero-sub { font-size:clamp(.98rem,1.8vw,1.13rem); color:var(--gray-light); line-height:1.78; max-width:600px; margin:0 auto 2.5rem; animation:fadeUp .8s ease .8s both; }
.hero-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; animation:fadeUp .8s ease 1s both; }
.btn-primary { display:inline-flex; align-items:center; gap:.55rem; background:var(--orange); color:var(--dark); padding:.88rem 2rem; border-radius:50px; font-family:'Syne',sans-serif; font-weight:700; font-size:.93rem; transition:all .25s; box-shadow:var(--shadow-orange); }
.btn-primary:hover { background:var(--yellow); transform:translateY(-2px); box-shadow:0 12px 50px rgba(247,168,0,.4); }
.btn-secondary { display:inline-flex; align-items:center; gap:.55rem; background:transparent; color:var(--white); padding:.88rem 2rem; border-radius:50px; font-family:'Syne',sans-serif; font-weight:600; font-size:.93rem; border:1.5px solid rgba(255,255,255,.18); transition:all .25s; }
.btn-secondary:hover { border-color:var(--orange); color:var(--orange); transform:translateY(-2px); }
.hero-stats { display:flex; gap:3rem; justify-content:center; margin-top:3rem; flex-wrap:wrap; animation:fadeUp .8s ease 1.2s both; }
.stat { text-align:center; }
.stat-number { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--orange); display:block; }
.stat-label { font-size:.76rem; color:var(--gray-mid); text-transform:uppercase; letter-spacing:.06em; }
.hero-scroll { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.45rem; color:var(--gray-mid); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; animation:fadeUp .8s ease 1.6s both; }
.scroll-line { width:1px; height:34px; background:linear-gradient(to bottom,var(--orange),transparent); animation:scrollPulse 2s ease infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ---- SHARED ---- */
section { padding:100px 5%; }
.section-tag { display:inline-flex; align-items:center; gap:.5rem; color:var(--orange); font-family:'Syne',sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
.section-tag::before { content:''; width:20px; height:2px; background:var(--orange); }
.section-title { font-family:'Syne',sans-serif; font-size:clamp(1.5rem,3.5vw,2.8rem); font-weight:800; line-height:1.18; margin-bottom:1rem; }
.section-intro { font-size:1rem; line-height:1.75; max-width:560px; }
.wave { display:block; overflow:hidden; line-height:0; }
.wave svg { display:block; width:100%; }
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity:0; transform:translateY(36px); transition:opacity .65s ease,transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}

/* ---- SERVICES ---- */
#services { background:var(--light); color:var(--dark); }
#services .section-tag { color:var(--brown); }
#services .section-tag::before { background:var(--brown); }
.services-header { max-width:640px; margin-bottom:3rem; }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.service-card { background:var(--white); border-radius:var(--radius-lg); padding:2.2rem 2rem; position:relative; overflow:hidden; border:1.5px solid transparent; transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.service-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(247,168,0,.05),transparent); opacity:0; transition:opacity .3s; }
.service-card:hover { transform:translateY(-6px); border-color:var(--orange); box-shadow:0 20px 60px rgba(247,168,0,.12),0 4px 16px rgba(0,0,0,.05); }
.service-card:hover::before { opacity:1; }
.service-card.featured { background:linear-gradient(145deg,#1A1A1A,#1E1E1E); color:var(--white); border-color:rgba(247,168,0,.18); }
.service-card.featured .service-name { color:var(--orange); }
.service-card.featured .service-desc { color:var(--gray-light); }
.service-card.featured .pill { background:rgba(247,168,0,.1); color:var(--orange); }
.srank { position:absolute; top:1.4rem; right:1.4rem; font-family:'Syne',sans-serif; font-size:.67rem; font-weight:800; color:rgba(247,168,0,.3); letter-spacing:.08em; }
.sicon-bg { position:absolute; bottom:-18px; right:-14px; font-size:8.5rem; opacity:.07; color:var(--dark); pointer-events:none; line-height:1; }
.service-card.featured .sicon-bg { color:var(--orange); opacity:.14; }
.service-name { font-family:'Syne',sans-serif; font-size:1.08rem; font-weight:700; color:var(--dark); margin-bottom:.6rem; position:relative; z-index:1; }
.service-desc { font-size:.88rem; color:#7A7060; line-height:1.65; position:relative; z-index:1; }
.service-card.featured .service-name { color:var(--orange); }
.service-card.featured .service-desc { color:var(--gray-light); }
.pills { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.3rem; }
.pill { background:var(--light-2); color:var(--brown); font-size:.7rem; font-weight:600; padding:.25rem .65rem; border-radius:50px; }

/* ---- PORTFOLIO ---- */
#portfolio { background:var(--warm-dark); }
#portfolio .section-tag { color:var(--orange); }
#portfolio .section-tag::before { background:var(--orange); }
#portfolio .section-title { color:var(--white); }
.portfolio-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; flex-wrap:wrap; gap:1.5rem; }
.apps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem; }
.apps-grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:820px; }

/* Labels de groupe thématique */
.apps-group-label {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Syne', sans-serif;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 0;
  margin-bottom: 1.4rem;
  padding: .4rem 1rem .4rem .7rem;
  background: rgba(247,168,0,.08);
  border: 1px solid rgba(247,168,0,.18);
  border-radius: 50px;
}
/* Séparateur visuel au-dessus du second groupe */
.apps-group-label--alt {
  margin-top: 4rem;
}
.apps-group-label i { font-size: 1rem; }
/* Variante brun pour le groupe hors-pédagogie */
.apps-group-label--alt { color:var(--brown-light); background:rgba(123,79,46,.08); border-color:rgba(123,79,46,.2); margin-top:4rem; }
.app-card { background:var(--warm-dark-2); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg); overflow:hidden; transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.app-card:hover { transform:translateY(-5px); border-color:rgba(247,168,0,.35); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.app-preview { height:148px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.app-preview i { font-size:3.2rem; opacity:.65; position:relative; z-index:2; }
.app-preview::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px); background-size:28px 28px; }
.app-badge { position:absolute; top:1rem; right:1rem; background:rgba(247,168,0,.15); border:1px solid rgba(247,168,0,.3); color:var(--orange); font-size:.67rem; font-weight:700; padding:.2rem .6rem; border-radius:50px; letter-spacing:.06em; text-transform:uppercase; }
.app-info { padding:1.4rem; }
.app-name { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.4rem; color:var(--white); }
.app-desc { font-size:.86rem; color:var(--gray-light); line-height:1.6; margin-bottom:1rem; }
.app-tech { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; }
.app-tech span { background:rgba(255,255,255,.06); color:var(--gray-light); font-size:.68rem; font-weight:600; padding:.2rem .52rem; border-radius:4px; }
.app-link { display:inline-flex; align-items:center; gap:.4rem; color:var(--orange); font-family:'Syne',sans-serif; font-size:.79rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; transition:gap .2s; }
.app-link:hover { gap:.7rem; }

/* ---- À PROPOS ---- */
#apropos { background:var(--light); color:var(--dark); }
#apropos .section-tag { color:var(--brown); }
#apropos .section-tag::before { background:var(--brown); }
.about-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; margin-top:3rem; }
.about-card { background:var(--white); border-radius:var(--radius); padding:1.7rem 2rem; border-left:4px solid var(--orange); margin-bottom:1.4rem; transition:box-shadow .3s; }
.about-card:hover { box-shadow:0 8px 30px rgba(247,168,0,.08); }
.about-card-label { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; color:var(--orange); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.7rem; }
.about-card p { font-size:.91rem; color:#6B6050; line-height:1.78; }
.about-card p+p { margin-top:.7rem; }
.about-card p strong { color:var(--dark); font-weight:700; }
/* -- Valeurs : mini-cartes avec bande colorée -- */
.about-values { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1.2rem; }
.vcard { background:var(--white); border-radius:14px; padding:1.3rem 1.4rem; border-top:3px solid; transition:box-shadow .3s,transform .3s; }
.vcard:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.07); }
.vcard.vc1 { border-color:var(--orange); }
.vcard.vc2 { border-color:var(--brown); }
.vcard.vc3 { border-color:var(--yellow); }
.vcard.vc4 { border-color:#3D3D3D; }
.vcard i { font-size:1.7rem; display:block; margin-bottom:.6rem; }
.vcard.vc1 i { color:var(--orange); }
.vcard.vc2 i { color:var(--brown-light); }
.vcard.vc3 i { color:var(--yellow); }
.vcard.vc4 i { color:#3D3D3D; }
.vcard strong { font-family:'Syne',sans-serif; font-size:.93rem; font-weight:700; color:var(--dark); display:block; margin-bottom:.3rem; }
.vcard p { font-size:.83rem; color:#7A7060; line-height:1.55; margin:0; }
/* -- Outils -- */
.tools-block { margin-top:1.8rem; }
.tools-label { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; color:var(--brown); letter-spacing:.1em; text-transform:uppercase; margin-bottom:.7rem; display:flex; align-items:center; gap:.4rem; }
.tools-label::before { content:''; width:16px; height:2px; background:var(--brown); }
.tools-row { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { display:inline-flex; align-items:center; gap:.35rem; background:var(--white); color:var(--dark); font-size:.78rem; font-weight:600; padding:.32rem .82rem; border-radius:50px; border:1.5px solid var(--light-2); transition:border-color .2s,color .2s; }
.chip:hover { border-color:var(--orange); color:var(--orange); }
.chip i { font-size:.9rem; }
/* Conteneur plus grand pour laisser les badges orbiter */
.owl-container { position:relative; width:420px; height:420px; margin:0 auto; flex-shrink:0; }
.owl-circle { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:260px; height:260px; border-radius:50%; background:linear-gradient(145deg,var(--dark-2),var(--dark-3)); display:flex; align-items:center; justify-content:center; box-shadow:0 20px 80px rgba(247,168,0,.12); border:3px solid rgba(247,168,0,.15); overflow:hidden; }
.owl-circle img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.fbadge { position:absolute; font-family:'Syne',sans-serif; font-weight:700; font-size:.74rem; padding:.42rem .88rem; border-radius:50px; white-space:nowrap; display:flex; align-items:center; gap:.35rem; box-shadow:0 4px 18px rgba(0,0,0,.15); z-index:2; }
/* Satellites : heures différentes autour du cercle, jamais alignés */
.fbadge.b1 { background:var(--orange); color:var(--dark);  top:55px;     right:10px; } /* ~1h */
.fbadge.b3 { background:var(--yellow); color:var(--dark);  top:105px;    left:10px;  } /* ~10h */
.fbadge.b4 { background:#3D3D3D;       color:var(--white); bottom:65px;  right:10px; } /* ~4h */
.fbadge.b2 { background:var(--brown);  color:var(--white); bottom:40px;  left:10px;  } /* ~8h */

/* ---- CONTACT ---- */
#contact { background:var(--warm-dark); position:relative; overflow:hidden; }
#contact::before { content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(247,168,0,.08) 0%,transparent 70%); pointer-events:none; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; position:relative; z-index:2; }
.cinfo-list { list-style:none; display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
.cinfo-item { display:flex; align-items:center; gap:.85rem; color:var(--gray-light); font-size:.88rem; }
.cinfo-icon { width:36px; height:36px; flex-shrink:0; background:rgba(247,168,0,.08); border:1px solid rgba(247,168,0,.15); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.05rem; color:var(--orange); }
.cinfo-item a { color:var(--orange); }
.cinfo-item a:hover { opacity:.8; }
.cform { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fgroup { display:flex; flex-direction:column; gap:.42rem; }
.fgroup label { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; color:var(--gray-light); letter-spacing:.06em; text-transform:uppercase; }
.fgroup input, .fgroup textarea, .fgroup select { background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:.82rem 1.05rem; color:var(--white); font-family:'Nunito',sans-serif; font-size:.9rem; transition:border-color .2s,background .2s; outline:none; width:100%; }
.fgroup select option { background:var(--warm-dark-2); color:var(--white); }
.fgroup input::placeholder, .fgroup textarea::placeholder { color:#666; }
.fgroup input:focus, .fgroup textarea:focus, .fgroup select:focus { border-color:var(--orange); background:rgba(247,168,0,.06); }
.fgroup textarea { resize:vertical; min-height:118px; }
.fsubmit { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; background:var(--orange); color:var(--dark); padding:.95rem 2.2rem; border-radius:50px; font-family:'Syne',sans-serif; font-weight:700; font-size:.93rem; border:none; cursor:pointer; transition:all .25s; box-shadow:var(--shadow-orange); align-self:flex-start; }
.fsubmit:hover { background:var(--yellow); transform:translateY(-2px); box-shadow:0 12px 50px rgba(247,168,0,.4); }

/* ---- FOOTER ---- */
footer { background:var(--warm-dark-2); border-top:1px solid rgba(247,168,0,.08); padding:1.7rem 5%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; flex-shrink:0; }
footer img { height:24px; }
.ft { color:var(--gray-mid); font-size:.79rem; }
.ft a { color:var(--orange); }
.ft2 { font-family:'Syne',sans-serif; font-size:.74rem; color:var(--gray-light); letter-spacing:.05em; }

/* ---- MOBILE MENU ---- */
.nav-burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--white); border-radius:2px; transition:all .3s; transform-origin:center; }
.nav-burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-burger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { position:fixed; top:0; right:0; bottom:0; width:min(300px,80vw); background:var(--dark-2); border-left:1px solid rgba(247,168,0,.12); z-index:200; display:flex; flex-direction:column; padding:90px 2rem 2rem; gap:1.8rem; transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); }
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:600; color:var(--gray-light); letter-spacing:.05em; text-transform:uppercase; transition:color .2s; display:flex; align-items:center; gap:.6rem; }
.mobile-menu a:hover { color:var(--orange); }
.mobile-menu .mob-cta { display:inline-flex; align-items:center; gap:.5rem; background:var(--orange); color:var(--dark)!important; padding:.75rem 1.5rem; border-radius:50px; font-weight:700!important; margin-top:.5rem; justify-content:center; }
.mobile-menu .mob-cta:hover { background:var(--yellow); }
.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:199; opacity:0; pointer-events:none; transition:opacity .35s; }
.menu-overlay.open { opacity:1; pointer-events:auto; }
@media(max-width:960px){ .about-layout,.contact-layout{grid-template-columns:1fr;gap:3rem} .about-visual{order:-1} }
@media(max-width:720px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  section{padding:70px 6%}
  .hero-stats{gap:1.5rem}
  .services-grid{grid-template-columns:1fr}
  .apps-grid{grid-template-columns:1fr}
  .apps-grid-2{grid-template-columns:1fr;max-width:100%}
  .about-values{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  footer{flex-direction:column;text-align:center}
  .owl-circle{width:200px;height:200px}
  .owl-container{width:320px;height:320px}
  .fbadge{font-size:.68rem;padding:.32rem .62rem}
  .fbadge.b1{top:40px;right:5px}
  .fbadge.b3{top:80px;left:5px}
  .fbadge.b4{bottom:50px;right:5px}
  .fbadge.b2{bottom:28px;left:5px}
}
/* Honeypot anti-spam — caché visuellement, invisible aux humains */
.hp-field { position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }

/* ---- BACK TO TOP ---- */
.back-top { position:fixed; bottom:1.5rem; right:1.5rem; z-index:90; width:44px; height:44px; border-radius:50%; background:var(--orange); color:var(--dark); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 4px 20px rgba(247,168,0,.35); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s, transform .3s, background .2s; }
.back-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-top:hover { background:var(--yellow); }
@media(min-width:721px){ .back-top{ display:none; } }

/* ============================================
   ANIMATIONS SUBTILES
============================================ */

/* Hero logo — flottement doux */
@keyframes floatLogo {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.hero-logo { animation: fadeUp .8s ease .4s both, floatLogo 5s ease-in-out 1.5s infinite; }

/* Badges avatar — flottement décalé */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.fbadge.b1 { animation: floatBadge 4s ease-in-out .0s infinite; }
.fbadge.b2 { animation: floatBadge 4.5s ease-in-out .8s infinite; }
.fbadge.b3 { animation: floatBadge 3.8s ease-in-out 1.4s infinite; }
.fbadge.b4 { animation: floatBadge 4.2s ease-in-out .4s infinite; }

/* Stats — pop discret à l'apparition */
@keyframes statPop {
  0%   { opacity:0; transform: scale(.7) translateY(10px); }
  70%  { transform: scale(1.08); }
  100% { opacity:1; transform: scale(1) translateY(0); }
}
.stat { animation: statPop .6s cubic-bezier(.34,1.56,.64,1) both; }
.stat:nth-child(1) { animation-delay: 1.3s; }
.stat:nth-child(2) { animation-delay: 1.5s; }
.stat:nth-child(3) { animation-delay: 1.7s; }

/* Service cards — icône filigrane monte au hover */
.service-card { transition: all .35s cubic-bezier(.34,1.56,.64,1); }
.service-card .sicon-bg { transition: transform .4s ease, opacity .4s ease; }
.service-card:hover .sicon-bg { transform: translateY(-8px) scale(1.05); opacity:.13; }

/* App cards — icône preview tourne doucement au hover */
.app-preview i { transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s; }
.app-card:hover .app-preview i { transform: rotate(-8deg) scale(1.15); opacity:.9; }

/* Chips outils — légère élévation */
.chip { transition: all .2s ease; }
.chip:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(247,168,0,.15); }

/* Bouton CTA hero — pulse glow */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 8px 40px rgba(247,168,0,.25); }
  50%       { box-shadow: 0 8px 50px rgba(247,168,0,.5); }
}
.btn-primary { animation: ctaPulse 3s ease-in-out 2s infinite; }
.btn-primary:hover { animation: none; }

/* Value cards — légère rotation 3D au hover */
.vcard { transition: all .3s ease; transform-style: preserve-3d; }
.vcard:hover { transform: translateY(-4px) rotate3d(1,0,0,2deg); }

/* App cards — scale subtil */
.app-card { transition: all .35s cubic-bezier(.34,1.56,.64,1); }

/* Scroll line — déjà animé, ok */

/* Réduire animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ================================================
   404 — Styles spécifiques à la page introuvable
================================================ */

/* Réinitialisation propre pour la 404 */

.notfound-page {
  font-family: 'Nunito', sans-serif;
  background: var(--dark);
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.notfound-page::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(247,168,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,168,0,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.notfound-page::after {
  content: '';
  position: fixed;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247,168,0,.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.notfound-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  z-index: 2;
}

.notfound-container {
  max-width: 560px;
  text-align: center;
  width: 100%;
}

.notfound-logo {
  width: 160px;
  margin: 0 auto 2.5rem;
  animation: floatLogo 5s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(247,168,0,.2));
  mix-blend-mode: screen;
}

.notfound-code {
  font-family: 'Syne', sans-serif;
  font-size: clamp(5rem, 22vw, 10rem);
  font-weight: 800;
  line-height: 1;
  color: var(--orange);
  opacity: .25;
  display: block;
  margin-bottom: 1.5rem;
}

.notfound-container h1 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  margin-bottom: .75rem;
  line-height: 1.2;
}

.notfound-container h1 em { font-style: normal; color: var(--orange); }

.notfound-container p {
  color: var(--gray-light);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.notfound-actions {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.notfound-btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--orange);
  color: var(--dark);
  padding: .8rem 1.8rem;
  border-radius: 50px;
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: .9rem;
  text-decoration: none;
  transition: all .25s;
  box-shadow: 0 8px 30px rgba(247,168,0,.25);
}

.notfound-btn-primary:hover {
  background: #F5C518;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(247,168,0,.4);
}

.notfound-btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: transparent;
  color: white;
  padding: .8rem 1.8rem;
  border-radius: 50px;
  font-family: 'Syne', sans-serif;
  font-weight: 600; font-size: .9rem;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.15);
  transition: all .25s;
}

.notfound-btn-secondary:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}
/* Icônes réelles des applications dans le portfolio */
.app-icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 18px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.app-card:hover .app-icon { transform: scale(1.1) rotate(-4deg); }

/* Fonds colorés des cartes application (couleurs réelles des apps) */
.app-preview.a-toolbox   { background: linear-gradient(145deg, #1e1750, #5844e6bb); }
.app-preview.a-pocket    { background: linear-gradient(145deg, #2e1548, #843dcebb); }
.app-preview.a-hubscol   { background: linear-gradient(145deg, #542a13, #f27838bb); }
.app-preview.a-tempohub  { background: linear-gradient(145deg, #16302c, #408b7ebb); }
.app-preview.a-tracktime { background: linear-gradient(145deg, #023424, #079668bb); }
.app-preview.a-nomad     { background: linear-gradient(145deg, #30351f, #8a9a5bbb); }

/* Icône de secours : cachée par défaut via classe CSS (pas style inline) */
.app-icon-fallback { display: none; }
/* Icône PNG : visible par défaut */
.app-icon { display: block; }
/* Si l'image échoue, JS ajoute .img-failed au parent */
.img-failed .app-icon          { display: none !important; }
.img-failed .app-icon-fallback { display: block !important; font-size: 3.2rem; opacity: .65; }