/* =========================================================
   MED ALI KEDIDI — PORTFOLIO
   Direction : Studio Contemporain
   ========================================================= */

:root{
  /* --- Color tokens (dérivés du logo KMA) --- */
  --c-black:      #0A0A0A;
  --c-navy:       #0C1524;   /* fond hero, sombre premium */
  --c-white:      #FAFAF8;
  --c-paper:      #F3F2EF;   /* fond sections claires */
  --c-teal:       #14B8A6;
  --c-violet:     #7C5CFC;
  --c-gray-mid:   #6B7280;
  --c-gray-light: #B7BEC8;
  --c-line:       rgba(10,10,10,0.10);
  --c-line-dark:  rgba(255,255,255,0.14);

  /* --- Type --- */
  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* --- Scale --- */
  --fs-hero: clamp(2.6rem, 7vw, 6rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.2rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body: 1rem;

  --space-section: clamp(5.5rem, 10vw, 9.5rem);
  --max-w: 1200px;

  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--f-body);
  color: var(--c-black);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1,h2,h3{
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p{ margin:0 0 1em; color: rgba(10,10,10,0.72); }
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; border:none; background:none; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--c-teal); color:#fff;
  padding:.75rem 1.25rem; z-index:200;
}
.skip-link:focus{ left: 1rem; top:1rem; }

:focus-visible{ outline: 2px solid var(--c-teal); outline-offset: 3px; }

.section{ padding: var(--space-section) 1.5rem; }
.section-inner{ max-width: var(--max-w); margin: 0 auto; }

.eyebrow{
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .74rem;
  color: var(--c-teal);
  margin-bottom: 1.1rem;
  font-weight: 600;
}

.lead{ font-size: var(--fs-lead); color: rgba(10,10,10,0.82); }

/* ---------- Brand mark (signature : les 4 carrés du logo) ---------- */
.brand-mark{ display:inline-flex; gap:4px; margin-right:.6rem; }
.brand-mark .sq{ width:9px; height:9px; border-radius: 2px; display:inline-block; }
.brand-mark.small .sq{ width:7px; height:7px; }
.sq-1{ background: var(--c-gray-light); }
.sq-2{ background: var(--c-gray-mid); }
.sq-3{ background: var(--c-black); }
.sq-4{ background: var(--c-teal); }

/* ================= HEADER ================= */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  backdrop-filter: blur(0px);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--c-white);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.is-scrolled{
  backdrop-filter: blur(10px);
  background: rgba(250,250,248,0.82);
  border-bottom-color: var(--c-line);
  color: var(--c-black);
}
.header-inner{
  max-width: var(--max-w); margin:0 auto; padding: 1.1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; font-family: var(--f-display); font-weight:600; font-size:1rem; }
.main-nav{ display:flex; gap: 2.2rem; }
.main-nav a{
  font-size:.92rem; font-weight:500; position:relative; padding: .2rem 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background: var(--c-teal); transition: width .25s var(--ease);
}
.main-nav a:hover::after, .main-nav a:focus-visible::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-toggle span{ height:2px; background: currentColor; border-radius:2px; transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* Le menu mobile ouvert est toujours sur fond clair : forcer un header opaque + texte sombre pendant l'ouverture */
.site-header:has(.main-nav.is-open){
  background: rgba(250,250,248,0.98); color: var(--c-black); border-bottom-color: var(--c-line);
}

/* ================= HERO ================= */
.hero{
  position:relative; min-height: 100svh; display:flex; align-items:center;
  background: linear-gradient(150deg, #0A0F1C 0%, #12102A 45%, #241A4A 100%);
  color: var(--c-white); overflow:hidden;
  padding: 7rem 1.5rem 4rem;
}
.hero-bg{ position:absolute; inset:0; opacity:.06; pointer-events:none; }
.hero-kma-text{
  font-family: var(--f-display); font-weight:700; font-size: 340px;
  fill: var(--c-white);
}
.hero-inner{ position:relative; max-width: var(--max-w); margin:0 auto; width:100%; }
.hero .eyebrow{ color: var(--c-teal); }
.hero-title{ font-size: var(--fs-hero); color: var(--c-white); max-width: 16ch; }
.hero-title em{ font-style: normal; color: var(--c-teal); }
.hero-title span{ display:block; }
.hero-sub{ max-width: 46ch; color: rgba(250,250,248,0.72); font-size: var(--fs-lead); margin-top: 1.4rem; }
.hero-cta{ display:flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .95rem 1.8rem; border-radius: 999px; font-weight:500; font-size:.94rem; letter-spacing:.01em;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn-primary{
  background: var(--c-teal); color: var(--c-black);
  box-shadow: 0 6px 18px rgba(20,184,166,0.22);
}
.btn-primary:hover{
  transform: translateY(-2px); background:#0FA396;
  box-shadow: 0 8px 20px rgba(20,184,166,0.28), 0 4px 16px rgba(102,71,224,0.22);
}
.btn-ghost{ border: 1px solid var(--c-line-dark); color: var(--c-white); }
.btn-ghost:hover{ border-color: var(--c-violet); color: var(--c-violet); transform: translateY(-2px); }

.hero-scroll{
  position:absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: rgba(250,250,248,0.5); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
.hero-scroll span{
  width:1px; height: 32px; background: rgba(250,250,248,0.35); position:relative; overflow:hidden;
}
.hero-scroll span::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--c-teal); animation: scrollLine 1.8s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ================= ABOUT ================= */
.about{ background: var(--c-white); }
.about-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2.5rem, 6vw, 6rem); align-items:center; }
.about-media{ position:relative; }
.about-media img{ width:100%; aspect-ratio: 4/5; object-fit:cover; border-radius: 6px; background: var(--c-paper); }
.about-badge{
  position:absolute; bottom:-1rem; left:-1rem; background: var(--c-black); color:#fff;
  padding: .9rem 1.1rem; border-radius: 4px; display:flex; align-items:center; gap:.7rem;
}
.badge-number{ font-family: var(--f-display); font-size: 1.6rem; font-weight:700; color: var(--c-teal); }
.badge-label{ font-size:.68rem; line-height:1.25; letter-spacing:.02em; }

.about-content h2{ font-size: var(--fs-h2); max-width: 12ch; }
.skills-list{ display:flex; flex-wrap:wrap; gap:.6rem 0; margin-top: 1.6rem; }
.skills-list li{
  font-size:.85rem; font-weight:500; padding: .5rem 1rem; border: 1px solid var(--c-line);
  border-radius: 999px; margin: 0 .5rem .5rem 0;
}

/* ================= SERVICES ================= */
.services{ background: var(--c-paper); }
.services h2{ font-size: var(--fs-h2); margin-bottom: 3.5rem; max-width: 14ch; }
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.service-card{ background: var(--c-white); padding: 2.8rem 2.2rem; transition: background .25s var(--ease); }
.service-card:hover{ background: #fff; }
.service-sq{ display:inline-block; width:12px; height:12px; border-radius:3px; margin-bottom: 1.6rem; }
.service-card h3{ font-size: var(--fs-h3); margin-bottom: .6rem; }
.service-card p{ font-size: .92rem; margin:0; line-height:1.65; }

/* ================= PORTFOLIO ================= */
.portfolio{ background: var(--c-white); }
.portfolio h2{ font-size: var(--fs-h2); margin-bottom: 2.6rem; }

.filters{ display:flex; flex-wrap:wrap; gap: .7rem; margin-bottom: 3.6rem; }
.filter-btn{
  font-size:.82rem; font-weight:600; padding:.55rem 1.15rem; border-radius: 999px;
  border: 1px solid var(--c-line); color: rgba(10,10,10,.6);
  transition: all .25s var(--ease);
}
.filter-btn:hover{ border-color: var(--c-black); color: var(--c-black); }
.filter-btn.is-active{ background: var(--c-black); border-color: var(--c-black); color:#fff; }

.project-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 3.2rem 2.4rem; }
.project-card{ transition: opacity .3s var(--ease), transform .3s var(--ease); }
.project-card.is-hidden{ display:none; }

.project-visual{
  aspect-ratio: 16/10; border-radius: 6px; margin-bottom: 1.4rem;
  overflow:hidden; background: var(--c-paper);
}
.project-visual img{ width:100%; height:100%; object-fit: cover; display:block; }
.ph-1::before{ background: linear-gradient(135deg, #0C1524, #1c2c44); }
.ph-2::before{ background: linear-gradient(135deg, #14B8A6, #0c7d70); }
.ph-3::before{ background: linear-gradient(135deg, #2b2b2b, #0A0A0A); }
.ph-4::before{ background: linear-gradient(135deg, #6B7280, #3f434b); }
.ph-5::before{ background: linear-gradient(135deg, #14B8A6, #0C1524); }
.ph-6::before{ background: linear-gradient(135deg, #B7BEC8, #6B7280); }
.ph-7::before{ background: linear-gradient(135deg, #0A0A0A, #14B8A6); }
.ph-8::before{ background: linear-gradient(135deg, #1c2c44, #6B7280); }

.project-info h3{ font-size: 1.1rem; margin-bottom:.35rem; }
.project-tags{ font-size:.72rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color: var(--c-teal); margin-bottom:.7rem; }
.project-desc{ font-size:.9rem; line-height:1.65; max-width: 46ch; margin:0; }
.project-mandate{ font-size:.78rem; color: var(--c-gray-mid); margin:.5rem 0 0; font-style: italic; }

.portfolio-note{ margin-top: 3rem; font-size:.9rem; text-align:center; }
.portfolio-note a{ color: var(--c-teal); font-weight:600; }

/* ================= MOTION DESIGN (PLAYLISTS) ================= */
.motion{ background: var(--c-white); }
.motion h2{ font-size: var(--fs-h2); margin-bottom: 3rem; }

.playlist-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; margin-top: 0; }
.playlist-card{
  border-radius: 6px; overflow:hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.playlist-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,10,10,0.08); }

.playlist-thumb{
  aspect-ratio: 16/10; position:relative; overflow:hidden;
  border-radius: 6px; margin-bottom: 1rem; background: var(--c-paper);
}
.playlist-thumb img{ width:100%; height:100%; object-fit: cover; display:block; }
.playlist-count{
  position:absolute; bottom:.7rem; left:.7rem; z-index:1;
  background: rgba(10,10,10,0.7); color:#fff; backdrop-filter: blur(3px);
  font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  padding: .3rem .6rem; border-radius: 999px;
}

.playlist-info{ padding: 0 .5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; }
.playlist-info h3{ font-size:.96rem; margin:0; line-height:1.4; }
.playlist-mandate{ font-size:.76rem; color: var(--c-gray-mid); margin:0; font-style: italic; }

/* ================= MAGAZINES ================= */
.magazines{ background: var(--c-paper); }
.magazines h2{ font-size: var(--fs-h2); }
.magazines-intro{ max-width: 58ch; margin-bottom: 3rem; }

.magazine-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem 1.5rem; }
.magazine-card{
  background: var(--c-white); border-radius: 6px; overflow:hidden;
  display:flex; flex-direction:column; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.magazine-card:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(10,10,10,0.08); }

.magazine-cover{
  aspect-ratio: 3/4; background: var(--c-paper); overflow: hidden; border-radius: 6px; margin-bottom: .9rem;
}
.magazine-cover img{ width:100%; height:100%; object-fit: cover; display:block; }

.magazine-info{ padding: 0 .5rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.6rem; flex:1; }
.magazine-info h3{ font-size: .86rem; margin:0; line-height:1.4; }
.placeholder-tag{
  display:inline-block; font-family: var(--f-body); font-size:.65rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color: var(--c-teal); background: rgba(20,184,166,0.1); padding: .15rem .5rem; border-radius: 999px;
  margin-left:.4rem; vertical-align: middle;
}
.magazine-info p{ font-size:.78rem; margin:0; flex:1; line-height:1.55; color: rgba(10,10,10,0.6); text-align:center; }

.btn-outline{
  align-self:flex-start; padding: .5rem .95rem; font-size:.76rem; border-radius: 999px;
  border: 1px solid var(--c-black); color: var(--c-black); margin-top:.1rem;
}
.btn-outline:hover{ background: var(--c-black); color:#fff; }
.magazine-info .btn-outline, .playlist-info .btn-outline{ align-self:center; }

/* ================= CONTACT ================= */
.contact{ background: var(--c-navy); color: var(--c-white); }
.contact-inner{ text-align:center; max-width: var(--max-w); }
.contact h2{ color: var(--c-white); font-size: var(--fs-h2); }
.contact .lead{ color: rgba(250,250,248,0.75); margin: 0 auto 3.2rem; max-width: 42ch; }

.contact-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); text-align:left; max-width: 920px; margin: 0 auto; }

/* --- Formulaire --- */
.hp-field{ display:none; }
.contact-form{ display:flex; flex-direction:column; gap: 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color: rgba(250,250,248,0.55); }
.field input, .field select, .field textarea{
  font-family: var(--f-body); font-size:.95rem; color: var(--c-white);
  background: rgba(250,250,248,0.06); border: 1px solid var(--c-line-dark); border-radius: 6px;
  padding: .75rem .9rem; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--c-teal); background: rgba(250,250,248,0.09);
}
.field select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23B7BEC8'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23B7BEC8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right .9rem center; }
.field select option{ background: var(--c-navy); color: var(--c-white); }
.field textarea{ resize: vertical; min-height: 100px; }

.form-submit{ align-self:flex-start; margin-top:.4rem; }
.form-submit:disabled{ opacity:.6; cursor: default; }
.form-status{ font-size:.85rem; margin:0; min-height: 1.2em; color: var(--c-teal); }
.form-status.is-error{ color: #ff8a8a; }

.contact-links{ display:flex; flex-direction:column; gap: 0; border-top: 1px solid var(--c-line-dark); align-self:start; }
.contact-link{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.5rem .5rem; border-bottom: 1px solid var(--c-line-dark);
  transition: padding-left .25s var(--ease), color .25s var(--ease);
}
.contact-link:hover{ padding-left: 1rem; color: var(--c-teal); }
.contact-label{ font-family: var(--f-display); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; color: rgba(250,250,248,0.5); }
.contact-value{ font-size: 1.1rem; font-weight:500; }

/* ================= FOOTER ================= */
.site-footer{ background: var(--c-black); color: rgba(250,250,248,0.6); padding: 2.2rem 1.5rem; }
.footer-inner{ max-width: var(--max-w); margin:0 auto; display:flex; align-items:center; gap:.8rem; font-size:.82rem; }

/* ================= CTA FLOAT — DEVIS GRATUIT ================= */
.cta-float{
  position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 150;
  background: linear-gradient(120deg, #0FA396, #6647E0); color: #fff;
  padding: .95rem 1.3rem; border-radius: 999px;
  display:flex; align-items:center; gap: .9rem;
  box-shadow: 0 8px 24px rgba(102,71,224,0.35), 0 4px 14px rgba(15,163,150,0.25);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  animation: ctaGlow 2.4s ease-in-out 2;
}
.cta-float:hover{ transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 30px rgba(102,71,224,0.45), 0 6px 18px rgba(15,163,150,0.3); }
.cta-float-text{ display:flex; flex-direction:column; gap:.1rem; }
.cta-float-label{ font-family: var(--f-body); font-weight:600; font-size:.98rem; letter-spacing:.01em; line-height:1.15; color:#fff; }
.cta-float-sub{ font-size:.72rem; font-weight:400; letter-spacing:.01em; color: rgba(255,255,255,0.82); line-height:1.2; }
.cta-float-arrow{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  background: rgba(255,255,255,0.16); display:flex; align-items:center; justify-content:center;
  transition: transform .25s var(--ease);
}
.cta-float:hover .cta-float-arrow{ transform: translateX(3px); }

@keyframes ctaGlow{
  0%, 100% { box-shadow: 0 8px 24px rgba(102,71,224,0.35), 0 4px 14px rgba(15,163,150,0.25); }
  50% { box-shadow: 0 8px 24px rgba(102,71,224,0.55), 0 4px 22px rgba(15,163,150,0.4), 0 0 0 7px rgba(124,92,252,0.12); }
}
@media (prefers-reduced-motion: reduce){
  .cta-float{ animation: none; }
}

@media (max-width: 720px){
  .cta-float{ left: 1rem; bottom: 1rem; padding:.8rem 1.1rem; gap:.7rem; }
  .cta-float-label{ font-size:.9rem; }
  .cta-float-sub{ font-size:.68rem; }
  .cta-float-arrow{ width:26px; height:26px; }
}

/* ================= WHATSAPP FLOAT ================= */
.whatsapp-float{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 150;
  width: 52px; height: 52px; border-radius: 50%;
  background: #1F2A21; color: #25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-float:hover{ transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(0,0,0,.3); }

/* ================= REVEAL ANIMATIONS ================= */
.reveal, .reveal-up{ opacity:0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible, .reveal-up.is-visible{ opacity:1; transform: translateY(0); }
.hero-title span.reveal{ transition-delay: calc(var(--i, 0) * 0.08s); }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .project-grid{ grid-template-columns: 1fr; }
  .magazine-grid{ grid-template-columns: repeat(2, 1fr); }
  .playlist-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 720px){
  .main-nav{
    position: fixed; inset: 64px 0 0 0; background: var(--c-white);
    flex-direction: column; padding: 2rem 1.5rem; gap: 1.5rem;
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .main-nav.is-open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .main-nav a{ font-size: 1.15rem; }
  .nav-toggle{ display:flex; }
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  .services-grid{ grid-template-columns: 1fr; }
  .magazine-grid{ grid-template-columns: 1fr 1fr; gap: 1rem; }
  .playlist-grid{ grid-template-columns: 1fr; }
  .about-badge{ left: 0; }
}