/* ══════════════════════════════════════════════════════════
   PORTFOLIO NEIDJAH ANICET — style.css
   Thème Kuromi · Rose × Violet × Fond sombre
   Couvre : index.html · project.html · contact.html
   ══════════════════════════════════════════════════════════ */

/* ── RESET & VARIABLES ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-primary:      #0f0a1a;
  --bg-secondary:    #1a1327;
  --bg-muted:        #2d2438;
  --text-primary:    #ffffff;
  --text-muted:      #c7b8d9;
  --color-primary:   #FF69B4;
  --color-secondary: #9333EA;
  --color-accent:    #FFB7D5;
  --border-color:    rgba(255,105,180,0.2);
  --border-soft:     rgba(255,105,180,0.15);
  --base-font-size:  16px;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: var(--base-font-size);
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
a    { text-decoration: none; color: inherit; }
img  { max-width: 100%; display: block; }

/* ── Accessibilité ── */
body.text-large  { --base-font-size: 19px; }
body.text-xlarge { --base-font-size: 22px; }
body.high-contrast { --bg-primary:#000; --bg-secondary:#111; --bg-muted:#222; --text-primary:#fff; --text-muted:#ddd; --color-primary:#ff90c8; --border-color:rgba(255,144,200,.5); }
body.no-animations *, body.no-animations *::before, body.no-animations *::after { animation:none !important; transition:none !important; }

/* ── Utilitaires ── */
.text-gray-900 { color: var(--text-primary); }
.text-gray-700 { color: var(--text-muted); }
.text-gray-600 { color: #a89cc0; }

/* ══ NAVBAR (index) ══ */
.navbar { position:fixed; top:0; left:0; right:0; background:rgba(15,10,26,.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-color); z-index:1000; }
.nav-container { max-width:1200px; margin:0 auto; padding:1rem 2rem; display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:.5rem; transition:transform .3s; }
.logo:hover { transform:scale(1.05); }
.logo-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.logo-icon svg, .logo-icon svg path { fill:white !important; }
.logo-text { font-size:1.1rem; font-weight:700; background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; gap:2rem; }
.nav-link { position:relative; color:rgba(255,255,255,.8); transition:color .3s; font-size:.95rem; }
.nav-link:hover { color:var(--color-primary); }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); transition:width .3s; }
.nav-link:hover::after { width:100%; }
.menu-toggle { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; }
.menu-toggle span { width:25px; height:3px; background:var(--text-primary); border-radius:2px; transition:all .3s; }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px,-6px); }

/* ══ HEADER (project / contact) ══ */
#main-header { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(15,10,26,.92) !important; backdrop-filter:blur(20px); border-bottom:1px solid var(--border-color) !important; }
#main-header a:not(.nav-link) { color:rgba(255,255,255,.8) !important; transition:color .3s; }
#main-header a:not(.nav-link):hover { color:var(--color-primary) !important; }
#main-header div[style] { color:var(--text-primary) !important; }

/* Page active dans la nav */
.nav-link.active { color:var(--color-primary); }
.nav-link.active::after { width:100%; }

/* ══ MENU MOBILE ══ */
.mobile-menu { display:none; background:rgba(26,19,39,.98); backdrop-filter:blur(20px); border-top:1px solid var(--border-color); }
.mobile-menu.open { display:block; }
.mobile-link { color:rgba(255,255,255,.8) !important; transition:color .2s; }
.mobile-link:hover { color:var(--color-primary) !important; }

/* ══ ACCESSIBILITÉ UI ══ */
#a11y-btn { background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)) !important; box-shadow:0 4px 20px rgba(255,105,180,.4) !important; }
.a11y-panel { display:none; }
.a11y-panel.visible { display:block; }
.a11y-panel-bg { background:var(--bg-secondary) !important; border:1px solid var(--border-color) !important; }
.a11y-panel-bg h3 { color:var(--text-primary) !important; }
.a11y-panel-bg span, .a11y-panel-bg p { color:var(--text-muted) !important; }

.toggle { position:relative; width:44px; height:24px; border-radius:12px; background:var(--bg-muted); border:1px solid var(--border-color); cursor:pointer; transition:background .3s; flex-shrink:0; }
.toggle[aria-checked="true"] { background:var(--color-secondary); }
.toggle-circle { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:white; transition:transform .3s; }
.toggle[aria-checked="true"] .toggle-circle { transform:translateX(20px); }

.size-btn { padding:6px 12px; border-radius:6px; border:1px solid var(--border-color); background:var(--bg-muted); color:var(--text-muted); cursor:pointer; font-size:13px; transition:all .2s; }
.size-btn.active, .size-btn:hover { background:var(--color-primary); color:var(--bg-primary); border-color:var(--color-primary); }

#reset-btn { background:var(--bg-muted) !important; color:var(--text-muted) !important; border:1px solid var(--border-color) !important; cursor:pointer; transition:all .2s; border-radius:8px; width:100%; padding:10px; font-size:14px; }
#reset-btn:hover { background:var(--color-primary) !important; color:var(--bg-primary) !important; }

/* ══ BOUTONS ══ */
.btn { display:inline-block; padding:.875rem 2rem; border-radius:.5rem; font-weight:600; transition:all .3s; cursor:pointer; border:none; font-size:1rem; }
.btn-primary { background:var(--color-primary); color:var(--bg-primary); box-shadow:0 10px 25px rgba(255,105,180,.35); }
.btn-primary:hover { background:#ff5aa8; transform:translateY(-2px); box-shadow:0 15px 35px rgba(255,105,180,.45); }
.btn-secondary { background:transparent; color:var(--color-secondary); border:2px solid var(--color-secondary); box-shadow:0 10px 25px rgba(147,51,234,.2); }
.btn-secondary:hover { background:var(--color-secondary); color:white; }
.btn-gradient { background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); color:white; width:100%; box-shadow:0 10px 25px rgba(255,105,180,.3); }
.btn-gradient:hover { transform:translateY(-2px); box-shadow:0 15px 35px rgba(255,105,180,.4); }

/* ══ LAYOUT ══ */
.container       { max-width:1200px; margin:0 auto; padding:0 2rem; }
.container-small { max-width:900px;  margin:0 auto; padding:0 2rem; }
section { padding:5rem 0; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-title  { font-size:clamp(2rem,5vw,3rem); margin-bottom:1rem; font-weight:700; }
.section-subtitle { color:var(--text-muted); font-size:1.1rem; }
.gradient-text        { background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-alt    { background:linear-gradient(to right,var(--color-secondary),var(--color-primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-accent { background:linear-gradient(to right,var(--color-accent),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text-full   { background:linear-gradient(to right,var(--color-primary),var(--color-secondary),var(--color-accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ══ FOOTER ══ */
.footer, .footer-bg { background:var(--bg-secondary) !important; border-top:1px solid var(--border-color); padding:2rem 0; text-align:center; }
.footer-text { color:var(--text-muted); margin-bottom:.5rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.footer-copyright { font-size:.875rem; color:var(--text-muted); }
.heart-pulse { color:var(--color-primary); animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.3);} }
.footer-icon-bg { width:40px; height:40px; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)) !important; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.footer-link { color:var(--text-muted) !important; font-size:.875rem; transition:color .2s; }
.footer-link:hover { color:var(--color-primary) !important; }
.footer-bg h3  { color:var(--text-primary) !important; }
.footer-bg p   { color:var(--text-muted) !important; }
.footer-bg div[style*="border-top"] { border-color:var(--border-color) !important; color:var(--text-muted) !important; }

/* ══ SCROLL ANIMATION ══ */
.animate-on-scroll { opacity:0; transform:translateY(30px); transition:opacity .6s,transform .6s; }
.animate-on-scroll.animated { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════════
   INDEX.HTML
   ══════════════════════════════════════════════════════════ */

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:6rem 2rem 4rem; }
.floating-elements { position:absolute; inset:0; pointer-events:none; }
.float-icon { position:absolute; font-size:2rem; opacity:.55; }
.star-1  { top:10%;    left:10%;  color:var(--color-primary);   animation:floatAnim 3s ease-in-out infinite; }
.heart-1 { top:25%;   right:15%; color:var(--color-accent);    animation:floatAnim 4s ease-in-out infinite .5s; }
.skull-1 { bottom:20%; left:20%;  color:var(--color-secondary); animation:floatAnim 3.5s ease-in-out infinite 1s; }
.star-2  { top:33%;   right:8%;  color:var(--color-primary);   animation:spinAnim 5s linear infinite; }
.heart-2 { bottom:15%; right:30%; color:var(--color-accent);   animation:floatAnim 2.5s ease-in-out infinite .8s; }
@keyframes floatAnim { 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-20px) rotate(10deg);} }
@keyframes spinAnim  { 0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(180deg) scale(1.2);} 100%{transform:rotate(360deg) scale(1);} }
@keyframes wiggle    { 0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-5deg);} 75%{transform:rotate(5deg);} }

.hero-content { max-width:900px; text-align:center; z-index:10; }
.hero-badge { display:inline-block; padding:.5rem 1.5rem; background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); border-radius:50px; font-size:.875rem; margin-bottom:1.5rem; animation:wiggle .5s ease .8s; }
.hero-title { font-size:clamp(2.5rem,8vw,5rem); font-weight:800; margin-bottom:1rem; background:linear-gradient(to right,var(--color-primary),var(--color-accent),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.15; }
.hero-subtitle { font-size:clamp(1rem,2.5vw,1.35rem); color:var(--text-muted); margin-bottom:2rem; }
.hero-buttons  { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-wave { position:absolute; bottom:0; left:0; right:0; height:8rem; background:linear-gradient(to top,var(--bg-secondary),transparent); }

/* À propos */
.about { background:var(--bg-secondary); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.image-wrapper { position:relative; border-radius:1rem; overflow:hidden; border:3px solid rgba(255,105,180,.35); box-shadow:0 20px 60px rgba(255,105,180,.2); }
.image-wrapper img { width:100%; height:400px; object-fit:cover; }
.image-overlay { position:absolute; inset:0; background:linear-gradient(to top,var(--bg-secondary),transparent); opacity:.5; }
.sparkle-icon { position:absolute; top:-1rem; right:-1rem; width:56px; height:56px; background:var(--color-secondary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.75rem; box-shadow:0 10px 30px rgba(147,51,234,.5); animation:wiggle 2s ease-in-out infinite; }
.about-content { display:flex; flex-direction:column; gap:1.5rem; }
.about-text { font-size:1.1rem; line-height:1.8; }
.about-text.muted { color:var(--text-muted); }
.about-stat  { font-size:2.5rem; font-weight:800; color:var(--color-primary); }
.about-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
.about-card  { background:rgba(15,10,26,.5); border-radius:.75rem; padding:1.25rem 1rem; text-align:center; border:1px solid var(--border-color); transition:transform .3s; }
.about-card:hover { transform:translateY(-5px); }
.card-icon   { font-size:1.75rem; margin-bottom:.5rem; }
.about-card h4 { font-size:.95rem; font-weight:600; }

/* Projets section index */
.projects-section { background:var(--bg-primary); }
.projects-grid    { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2rem; }
.project-image    { position:relative; height:200px; overflow:hidden; }
.project-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.project-card:hover .project-image img { transform:scale(1.1); }
.project-content  { padding:1.5rem; }
.project-content h3 { font-size:1.15rem; margin-bottom:.6rem; font-weight:700; }
.project-content p  { color:var(--text-muted); font-size:.875rem; margin-bottom:1rem; line-height:1.6; }
.project-tags     { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.view-all-wrap    { text-align:right; margin-top:2rem; }

/* Compétences */
.skills-section   { background:var(--bg-secondary); }
.skills-grid      { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; }
.skill-category   { background:rgba(15,10,26,.5); border-radius:1rem; padding:2rem; border:1px solid var(--border-color); }
.category-title   { color:var(--color-primary); margin-bottom:1.25rem; font-size:1.1rem; font-weight:700; }
.skill-tags       { display:flex; flex-wrap:wrap; gap:.5rem; }
.skill-tag        { padding:.55rem .9rem; background:rgba(45,36,56,.5); color:var(--text-primary); border-radius:.5rem; font-size:.875rem; transition:all .3s; }
.skill-tag:hover  { background:var(--color-primary); color:var(--bg-primary); transform:scale(1.05); }
.skills-footer    { text-align:center; margin-top:3rem; color:var(--text-muted); font-style:italic; }

/* Contact section index */
.contact-grid     { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-form h3, .contact-info h3 { margin-bottom:1.5rem; font-size:1.4rem; font-weight:700; }
.contact-info     { display:flex; flex-direction:column; gap:2rem; }
.contact-info p   { color:var(--text-muted); line-height:1.7; text-align:center; }
.contact-email    { display:inline-flex; align-items:center; gap:1rem; padding:.75rem 1.25rem; background:var(--bg-secondary); border-radius:.75rem; border:1px solid var(--border-color); }
.contact-info > div { display:flex; flex-direction:column; align-items:center; }
.email-icon       { width:50px; height:50px; background:rgba(255,105,180,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.email-label      { font-size:.8rem; color:var(--text-muted); margin-bottom:.2rem; }
.email-address    { font-weight:600; color:var(--color-primary); }
.social-links h4  { margin-bottom:1rem; font-weight:700; }
.social-icons     { display:flex; gap:.75rem; }
.social-icon      { width:48px; height:48px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all .3s; }
.social-icon:hover { border-color:var(--color-primary); background:rgba(255,105,180,.1); transform:scale(1.1) rotate(5deg); }

/* ══════════════════════════════════════════════════════════
   PROJECT.HTML
   ══════════════════════════════════════════════════════════ */
.projects-section-bg { background:var(--bg-primary) !important; min-height:100vh; padding:100px 24px 80px; }
.projects-section-bg h2 { color:var(--text-primary) !important; }

.project-card { background:var(--bg-secondary) !important; border-radius:1rem; overflow:hidden; border:1px solid var(--border-color); box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .3s,box-shadow .3s; }
.project-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(255,105,180,.2); }
.project-card h3 { color:var(--text-primary) !important; }
.project-card p  { color:var(--text-muted) !important; }

.project-overlay { position:absolute; inset:0; background:rgba(15,10,26,.6) !important; display:flex; align-items:center; justify-content:center; }

.tag { font-size:.75rem; padding:.35rem .75rem; background:var(--bg-muted) !important; color:var(--color-accent) !important; border-radius:50px; border:1px solid var(--border-soft); cursor:pointer; }
.tag:hover { background:var(--color-primary) !important; color:var(--bg-primary) !important; }

.filter-bar { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:2.5rem; justify-content:center; }
.filter-btn { padding:.55rem 1.4rem; border-radius:50px; border:1px solid var(--border-color); background:var(--bg-muted); color:var(--text-muted); font-size:.875rem; cursor:pointer; transition:all .3s; }
.filter-btn:hover { border-color:var(--color-primary); color:var(--color-primary); }
.filter-btn.active { background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); color:white; border-color:transparent; }

.tag-search-wrapper { position:relative; margin-bottom:2rem; max-width:400px; }
.tag-search { width:100%; padding:.75rem 1rem .75rem 2.75rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:.75rem; color:var(--text-primary); font-size:.95rem; transition:border-color .3s; }
.tag-search:focus { outline:none; border-color:var(--color-primary); }
.tag-search::placeholder { color:var(--text-muted); }

/* ══════════════════════════════════════════════════════════
   CONTACT.HTML
   ══════════════════════════════════════════════════════════ */
.contact-hero { padding:120px 24px 60px; text-align:center; background:linear-gradient(180deg,rgba(147,51,234,.08) 0%,transparent 100%); border-bottom:1px solid var(--border-color); }
.contact-hero-title { font-size:clamp(2.2rem,6vw,4rem); font-weight:800; margin-bottom:1rem; background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.contact-hero-sub { color:var(--text-muted); font-size:1.05rem; max-width:520px; margin:0 auto; }
.section-divider { height:3px; background:linear-gradient(to right,var(--color-primary),var(--color-secondary),var(--color-accent)); opacity:.5; }

.contact-section { padding:60px 24px 80px; }
.contact-main { max-width:1000px; margin:0 auto; display:grid; grid-template-columns:1fr 1.5fr; gap:3rem; }

.info-card { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.25rem; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:.875rem; transition:border-color .3s,transform .3s; }
.info-card:hover { border-color:var(--color-primary); transform:translateX(4px); }
.info-icon { width:46px; height:46px; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.info-label { font-size:.78rem; color:var(--text-muted); margin-bottom:2px; }
.info-value { font-weight:600; color:var(--text-primary); font-size:.95rem; }
.info-value a { color:var(--color-primary); transition:opacity .2s; }
.info-value a:hover { opacity:.8; }

.avail-badge { display:inline-flex; align-items:center; gap:.6rem; margin-top:1.5rem; padding:.6rem 1.2rem; background:rgba(147,51,234,.15); border:1px solid rgba(147,51,234,.35); border-radius:50px; font-size:.875rem; color:var(--color-accent); font-weight:500; }
.avail-dot   { width:9px; height:9px; background:#4ade80; border-radius:50%; animation:pulseDot 1.5s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6);} 50%{box-shadow:0 0 0 6px rgba(74,222,128,0);} }

.social-row { display:flex; gap:.75rem; }
.social-btn { width:44px; height:44px; background:var(--bg-muted); border:1px solid var(--border-color); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text-muted); transition:all .3s; }
.social-btn:hover { background:var(--color-primary); border-color:var(--color-primary); color:white; transform:scale(1.1) rotate(5deg); }

.form-card { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:1.25rem; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.form-title { font-size:1.35rem; font-weight:700; margin-bottom:1.5rem; background:linear-gradient(to right,var(--color-primary),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { margin-bottom:1.25rem; display:flex; flex-direction:column; gap:.4rem; }
.form-label { font-size:.875rem; color:var(--text-muted); font-weight:500; }
.form-input, .form-select, .form-textarea { width:100%; padding:.875rem 1rem; background:var(--bg-muted); border:1px solid var(--border-color); border-radius:.625rem; color:var(--text-primary); font-size:.95rem; transition:border-color .3s,box-shadow .3s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(255,105,180,.15); }
.form-input::placeholder, .form-textarea::placeholder { color:#7a6a8a; }
.form-select { appearance:none; cursor:pointer; }
.form-select option { background:var(--bg-muted); color:var(--text-primary); }
.form-textarea { resize:vertical; font-family:inherit; min-height:130px; }
.char-count  { font-size:.78rem; color:var(--text-muted); text-align:right; }
.field-error { font-size:.8rem; color:#f87171; display:none; }
.field-error.visible { display:block; }
.form-input.error, .form-textarea.error { border-color:#f87171; }

.alert { display:none; align-items:flex-start; gap:.75rem; padding:1rem 1.25rem; border-radius:.75rem; margin-bottom:1.25rem; font-size:.9rem; }
.alert.visible { display:flex; }
.alert-success { background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.3); color:#4ade80; }
.alert-error   { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:#f87171; }

.submit-btn { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%; padding:1rem; border-radius:.75rem; border:none; background:linear-gradient(135deg,var(--color-primary),var(--color-secondary)); color:white; font-size:1rem; font-weight:600; cursor:pointer; box-shadow:0 10px 25px rgba(255,105,180,.3); transition:transform .3s,box-shadow .3s,opacity .3s; }
.submit-btn:hover    { transform:translateY(-2px); box-shadow:0 15px 35px rgba(255,105,180,.45); }
.submit-btn:disabled { opacity:.7; cursor:not-allowed; transform:none; }
.btn-text { pointer-events:none; }
.spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.3); border-top-color:white; border-radius:50%; display:none; animation:spin .7s linear infinite; }
.spinner.visible { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ══ RESPONSIVE ══ */
@media (max-width: 768px) {
  .nav-links { position:fixed; top:68px; left:0; right:0; background:rgba(26,19,39,.98); backdrop-filter:blur(20px); flex-direction:column; padding:2rem; gap:1.25rem; border-bottom:1px solid var(--border-color); transform:translateY(-110%); transition:transform .3s; opacity:0; pointer-events:none; }
  .nav-links.active { transform:translateY(0); opacity:1; pointer-events:all; }
  .menu-toggle { display:flex; }
  .about-grid, .contact-grid, .contact-main { grid-template-columns:1fr; }
  .about-cards { grid-template-columns:1fr 1fr; }
  .form-row    { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; align-items:stretch; }
  .btn { width:100%; }
}
@media (max-width: 480px) {
  .nav-container { padding:1rem; }
  .container, .container-small { padding:0 1rem; }
  section { padding:3rem 0; }
  .hero   { padding:5rem 1rem 3rem; }
  .float-icon { font-size:1.4rem; }
  .about-cards { grid-template-columns:1fr; }
  .contact-hero { padding:100px 16px 40px; }
  .contact-section { padding:40px 16px 60px; }
  .form-card { padding:1.25rem; }
  .filter-bar { gap:8px; }
}

/* ══ RESPONSIVE — project.html / contact.html ══ */
/* Mobile-btn caché par défaut, visible sur petit écran */
#mobile-btn { display: none; }

@media (max-width: 768px) {
  #desktop-nav { display: none !important; }
  #mobile-btn  { display: flex !important; align-items: center; justify-content: center; }

  /* Menu mobile qui s'étend sous le header */
  .mobile-menu {
    position: absolute;
    top: 64px; left: 0; right: 0;
    border-top: 1px solid var(--border-color) !important;
  }

  /* Liens dans le menu mobile */
  .mobile-menu a {
    color: rgba(255,255,255,.85) !important;
    font-size: 16px;
    padding: 4px 0;
    display: block;
    transition: color .2s;
  }
  .mobile-menu a:hover { color: var(--color-primary) !important; }

  /* Icônes menu/close en blanc */
  #mobile-btn svg { stroke: var(--text-primary); }
}
    /* Overlay caché par défaut, visible au survol */
      .project-overlay {
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
      }
      .project-card:hover .project-overlay {
        opacity: 1 !important;
      }
     /* Carte masquée par le filtre */
      .project-card.hidden {
        display: none !important;
      }
/* Correction pour le panneau d'accessibilité */
.a11y-panel {
  display: none;
}

.a11y-panel.visible {
  display: block !important;
}

/* Styles pour les toggles (interrupteurs) */
.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--bg-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
}

.toggle[aria-checked="true"] {
  background: var(--color-secondary) !important;
}

.toggle-circle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: transform 0.3s;
}

.toggle[aria-checked="true"] .toggle-circle {
  transform: translateX(20px);
}