/* ==========================================================================
   FAOUZI LINGOUENE — PORTFOLIO
   Design system : sombre/clair mixte, trace de données (signature),
   typographie Bricolage Grotesque + Inter + JetBrains Mono
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Couleurs --- */
  --bg-dark:        #0A0D14;
  --bg-dark-2:      #10141F;
  --bg-dark-3:      #161B29;
  --bg-light:       #EEF1F7;
  --bg-light-2:     #E4E9F2;

  --text-on-dark:      #E9ECF5;
  --text-on-dark-mute: #8E96AC;
  --text-on-light:      #12141C;
  --text-on-light-mute: #565D74;

  --accent-teal:    #2FE0C4;
  --accent-teal-text: #0C7A6A; /* variante plus foncée : contraste AA sur fond clair */
  --accent-violet:  #8B6BFF;
  --accent-violet-text: #6D46E0; /* variante plus foncée : contraste AA sur fond clair */
  --accent-teal-rgb: 47,224,196;
  --accent-violet-rgb: 139,107,255;

  --line-dark:  rgba(233,236,245,0.10);
  --line-light: rgba(18,20,28,0.10);

  --gradient-signature: linear-gradient(135deg, var(--accent-teal), var(--accent-violet));

  /* --- Typo --- */
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Layout --- */
  --max-w: 1180px;
  --pad-side: clamp(24px, 6vw, 96px);
  --radius: 14px;
}

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

body{
  margin:0;
  background: var(--bg-dark);
  color: var(--text-on-dark);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:700; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }

::selection{ background: var(--accent-violet); color:#fff; }

:focus-visible{
  outline: 2px solid var(--accent-teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap{
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-side);
  padding-right: var(--pad-side);
}

.section-light{ background: var(--bg-light); color: var(--text-on-light); }
.section-light .muted{ color: var(--text-on-light-mute); }
.muted{ color: var(--text-on-dark-mute); }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-teal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 18px;
}
.eyebrow::before{
  content:'';
  width: 26px; height: 1px;
  background: var(--accent-teal);
  display:inline-block;
}
/* Sur fond clair, le teal clair (#2FE0C4) tombe sous le seuil de contraste AA :
   on bascule vers une variante plus foncée mais toujours dans la même teinte. */
.section-light .eyebrow{ color: var(--accent-teal-text); }
.section-light .eyebrow::before{ background: var(--accent-teal-text); }

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 20px var(--pad-side);
  display:flex; align-items:center; justify-content:space-between;
  transition: background 0.35s ease, padding 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled{
  padding-top: 14px; padding-bottom: 14px;
  background: rgba(10,13,20,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-dark);
}
.nav__logo{
  font-family: var(--font-display); font-weight:800; font-size:1.15rem;
  color: var(--text-on-dark);
  display:flex; align-items:center; gap:9px;
}
.nav__logo span{
  width:9px; height:9px; border-radius:50%;
  background: var(--gradient-signature);
  box-shadow: 0 0 10px rgba(var(--accent-teal-rgb),0.8);
}
.nav__links{
  display:flex; align-items:center; gap: 34px;
  font-family: var(--font-mono); font-size: 0.82rem;
}
.nav__links a{
  position:relative; color: var(--text-on-dark-mute);
  transition: color 0.25s ease;
  padding: 4px 0;
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--gradient-signature); transform: scaleX(0); transform-origin:left;
  transition: transform 0.3s ease;
}
.nav__links a:hover{ color: var(--text-on-dark); }
.nav__links a:hover::after{ transform: scaleX(1); }
.nav__cta{
  font-family: var(--font-mono); font-size:0.78rem;
  color: var(--bg-dark) !important;
  background: var(--gradient-signature);
  padding: 10px 18px !important; border-radius: 100px;
  font-weight:600;
}
.nav__toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px;
}
.nav__toggle span{ width:22px; height:2px; background:var(--text-on-dark); border-radius:2px; }

@media (max-width: 860px){
  .nav__links{
    position: fixed; top:0; right:0; height:100vh; width: min(78vw, 320px);
    background: var(--bg-dark-2); flex-direction:column; align-items:flex-start;
    padding: 100px 32px 40px; gap: 26px; font-size: 1rem;
    transform: translateX(100%); transition: transform 0.4s ease;
    border-left: 1px solid var(--line-dark);
  }
  .nav__links.is-open{ transform: translateX(0); }
  .nav__toggle{ display:flex; z-index: 600; }
}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono); font-size:0.85rem; font-weight:500;
  padding: 14px 26px; border-radius: 100px;
  border: 1px solid var(--line-dark);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{
  background: var(--gradient-signature); color: var(--bg-dark); border-color: transparent; font-weight:600;
}
.btn--primary:hover{ box-shadow: 0 10px 30px -8px rgba(var(--accent-teal-rgb),0.55); }
.btn--ghost{ color: var(--text-on-dark); }
.btn--ghost:hover{ border-color: var(--accent-teal); color: var(--accent-teal); }
.section-light .btn--ghost{ color: var(--text-on-light); border-color: var(--line-light); }
.section-light .btn--ghost:hover{ border-color: var(--accent-violet-text); color: var(--accent-violet-text); }

/* ==========================================================================
   HERO — narration au défilement
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
}
.hero__stage{
  position: relative; height: 100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(var(--accent-violet-rgb),0.16), transparent 70%),
    radial-gradient(50% 40% at 80% 100%, rgba(var(--accent-teal-rgb),0.12), transparent 70%),
    var(--bg-dark);
}
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(60% 60% at 50% 40%, black, transparent 85%);
  opacity: 0.6;
}
.hero__lines{
  position: relative; text-align:center;
  width: 100%;
  max-width: min(1240px, 88vw);
  padding: 0 24px;
  pointer-events: none;
}
.hero__line{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 3.4rem);
  color: var(--text-on-dark-mute);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  position:absolute; left:0; right:0; top:50%; margin-top:-0.7em;
  transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s linear 0.28s;
  will-change: opacity, transform;
}
.hero__line.is-active{
  opacity: 1; visibility: visible; transform: translateY(0); color: var(--text-on-dark);
  transition: opacity 0.32s ease, transform 0.32s ease, visibility 0s linear 0s;
}
.hero__line .hl{
  background: var(--gradient-signature);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero__finale{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; opacity:0; visibility:hidden; transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
  padding: 0 24px; pointer-events:none;
}
.hero__finale.is-active{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition: opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s, visibility 0s linear 0s;
}

.hero__progress{
  position:absolute; right: clamp(20px, 4vw, 56px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px; z-index:3;
}
.hero__progress span{
  width:6px; height:6px; border-radius:50%; background: var(--line-dark);
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.hero__progress span.is-active{
  background: var(--accent-teal); transform: scale(1.6);
  box-shadow: 0 0 10px rgba(var(--accent-teal-rgb),0.7);
}
.hero__progress span.is-done{ background: var(--accent-violet); }
@media (max-width: 720px){ .hero__progress{ display:none; } }
.hero__eyebrow{
  font-family: var(--font-mono); font-size:0.85rem; letter-spacing:0.16em; text-transform:uppercase;
  color: var(--accent-teal); margin-bottom: 22px;
}
.hero__name{
  font-size: clamp(2.6rem, 8vw, 5.6rem); line-height:0.98; letter-spacing:-0.03em;
}
.hero__role{
  margin-top: 18px; font-family: var(--font-mono); font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--text-on-dark-mute);
}
.hero__actions{ margin-top: 40px; display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.hero__scrollcue{
  position:absolute; bottom: 36px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:0.7rem; color: var(--text-on-dark-mute);
  letter-spacing: 0.14em; text-transform:uppercase;
  opacity: 0; transition: opacity 0.6s ease;
}
.hero__scrollcue.is-visible{ opacity: 0.8; }
.hero__scrollcue-line{ width:1px; height: 34px; background: linear-gradient(180deg, var(--accent-teal), transparent); animation: scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown{ 0%{ transform: scaleY(0); transform-origin:top;} 50%{ transform: scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform: scaleY(0); transform-origin:bottom;} }

/* ==========================================================================
   Section générique — header
   ========================================================================== */
.section{ padding: 140px 0; position:relative; }
.section__head{ max-width: 640px; margin-bottom: 72px; }
.section__title{ font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing:-0.02em; }
.section__desc{ margin-top: 18px; font-size: 1.05rem; max-width: 540px; }
.reveal{ opacity:0; transform: translateY(36px); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ==========================================================================
   À PROPOS
   ========================================================================== */
.about{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items:center; }
.about__portrait{
  position:relative; justify-self:start; width: min(100%, 340px);
}
.about__portrait-ring{
  position:absolute; inset:-14px; border-radius: 28px;
  background: var(--gradient-signature); opacity:0.35; filter: blur(18px);
}
.about__portrait img{
  position:relative; border-radius: 24px; width:100%; aspect-ratio: 1/1.08; object-fit:cover;
  border: 1px solid var(--line-light);
}
.about__portrait-tag{
  position:absolute; bottom:-18px; left: -18px;
  background: var(--bg-dark); color: var(--text-on-dark);
  font-family: var(--font-mono); font-size:0.72rem; letter-spacing:0.06em;
  padding: 10px 16px; border-radius: 10px; border:1px solid var(--line-dark);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.4);
}
.about__body p{ font-size: 1.08rem; color: var(--text-on-light-mute); margin-bottom: 18px; }
.about__body p strong{ color: var(--text-on-light); font-weight:600; }
.about__facts{
  margin-top: 34px; display:grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  border-top: 1px solid var(--line-light); padding-top: 28px;
}
.about__fact-label{ font-family: var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--text-on-light-mute); margin-bottom:6px; }
.about__fact-value{ font-weight:600; font-size:0.98rem; }

@media (max-width: 860px){
  .about{ grid-template-columns: 1fr; gap: 48px; }
  .about__portrait{ justify-self:center; }
  .about__facts{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Animations de fond ambiantes — discrètes, adaptées au thème de section
   ========================================================================== */
.ambient{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.ambient__blob{
  position:absolute; border-radius:50%; filter: blur(64px);
  animation: driftBlob 22s ease-in-out infinite alternate;
}
.ambient__blob--a{ width: 460px; height: 460px; top: -10%; left: -8%; animation-duration: 26s; }
.ambient__blob--b{ width: 400px; height: 400px; bottom: -12%; right: -10%; animation-duration: 20s; animation-delay: -6s; }
/* Fond sombre : lueurs teal/violet visibles mais douces */
.ambient__blob--teal{ background: radial-gradient(circle, rgba(var(--accent-teal-rgb),0.32), transparent 72%); }
.ambient__blob--violet{ background: radial-gradient(circle, rgba(var(--accent-violet-rgb),0.28), transparent 72%); }
/* Fond clair : version plus douce mais perceptible */
.section-light .ambient__blob--teal{ background: radial-gradient(circle, rgba(var(--accent-teal-rgb),0.20), transparent 72%); }
.section-light .ambient__blob--violet{ background: radial-gradient(circle, rgba(var(--accent-violet-rgb),0.18), transparent 72%); }
@keyframes driftBlob{
  0%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(60px,-46px) scale(1.15); }
  100%{ transform: translate(-40px,32px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce){ .ambient__blob{ animation: none; } }
.section > .wrap{ position:relative; z-index:1; }

/* ==========================================================================
   COMPÉTENCES — trace centrale, items en alternance (thème clair)
   ========================================================================== */
.skills{ position:relative; }
.skills__intro{ text-align:center; max-width: 620px; margin: 0 auto 40px; }
.skills__rail{ position:relative; }
.skills__spine{
  position:absolute; left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%);
  background: var(--line-light);
}
.skills__spine-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--accent-teal), var(--accent-violet));
  transition: height 0.1s linear;
}
.skill-row{
  position:relative; display:grid; grid-template-columns: 1fr 60px 1fr;
  align-items:center; padding: 26px 0;
}
.skill-row__node{
  grid-column:2; width:14px; height:14px; border-radius:50%; justify-self:center;
  background: #fff; border: 2px solid var(--line-light);
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}
.skill-row.is-active .skill-row__node{
  border-color: var(--accent-teal);
  background: var(--accent-teal);
  box-shadow: 0 0 18px rgba(var(--accent-teal-rgb),0.55);
}
.skill-card{
  display:flex; flex-direction:column; gap: 14px;
  padding: 24px 28px; border-radius: var(--radius);
  border: 1px solid var(--line-light);
  background: #fff;
  box-shadow: 0 14px 30px -24px rgba(20,20,40,0.25);
  opacity:0; transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s ease;
  max-width: 440px; width:100%;
}
.skill-row.is-active .skill-card{ border-color: rgba(var(--accent-teal-rgb),0.35); }
.skill-row--left .skill-card{ grid-column:1; justify-self:end; transform: translateX(-30px); }
.skill-row--right .skill-card{ grid-column:3; justify-self:start; transform: translateX(30px); }
.skill-row.is-active .skill-card{ opacity:1; transform: translateX(0); }
.skill-card__head{ display:flex; align-items:center; gap: 16px; }
.skill-card__icon{
  width: 44px; height:44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background: var(--bg-light-2); font-size: 1.5rem;
}
.skill-card__icon i{ font-size: 1.5rem; }
.skill-card__name{ font-weight:600; font-size:1rem; color: var(--text-on-light); }
.skill-card__tag{ font-family: var(--font-mono); font-size:0.68rem; color: var(--text-on-light-mute); text-transform:uppercase; letter-spacing:0.08em; }
.skill-card__desc{ font-size:0.88rem; line-height:1.6; color: var(--text-on-light-mute); }

.skills__certs{
  margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--line-light);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.skills__certs span{
  font-family: var(--font-mono); font-size:0.76rem; color: var(--text-on-light-mute);
  background: #fff; border: 1px solid var(--line-light); padding: 9px 16px; border-radius: 100px;
}
.skills__certs span strong{ color: var(--text-on-light); font-weight:600; }

@media (max-width: 720px){
  .skills__spine{ left: 22px; }
  .skill-row{ grid-template-columns: 44px 1fr; padding-left: 0; }
  .skill-row__node{ grid-column:1; margin-left: 16px; }
  .skill-row--left .skill-card,
  .skill-row--right .skill-card{ grid-column:2; justify-self:start; transform: translateX(20px); max-width:none; }
}

/* ==========================================================================
   EXPÉRIENCE — timeline (thème sombre)
   ========================================================================== */
.timeline{ position:relative; padding-left: 34px; border-left: 1px solid var(--line-dark); display:flex; flex-direction:column; gap: 52px; }
.timeline-item{ position:relative; }
.timeline-item::before{
  content:''; position:absolute; left: -40px; top: 4px; width: 12px; height:12px; border-radius:50%;
  background: var(--bg-dark-2); border: 2px solid var(--accent-violet);
}
.timeline-item__dates{ font-family: var(--font-mono); font-size:0.75rem; color: var(--accent-teal); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:8px; }
.timeline-item__role{ font-size: 1.3rem; margin-bottom:4px; }
.timeline-item__org{ font-family: var(--font-mono); font-size:0.85rem; color: var(--text-on-dark-mute); margin-bottom: 16px; }
.timeline-item__list{ display:flex; flex-direction:column; gap:9px; }
.timeline-item__list li{ position:relative; padding-left:20px; color: var(--text-on-dark-mute); font-size:0.96rem; }
.timeline-item__list li::before{ content:'—'; position:absolute; left:0; color: var(--accent-violet); }

/* ==========================================================================
   PROJETS — blocs en alternance (thème clair)
   ========================================================================== */
.projects-rail{ position:relative; }
.project-row{
  position:relative; display:grid;
  align-items:center; padding: 40px 0; column-gap: 24px;
}
.project-row--left{ grid-template-columns: 3fr 1fr; }
.project-row--right{ grid-template-columns: 1fr 3fr; }
.project-row__index{
  font-family: var(--font-mono); font-weight:700; font-size: 6rem; line-height:1;
  color: var(--text-on-light); opacity:0.05; user-select:none;
}
.project-row--left .project-row__index{ grid-column:2; text-align:left; padding-left: 16px; }
.project-row--right .project-row__index{ grid-column:1; text-align:right; padding-right: 16px; }

.project-block{
  border-radius: 20px; overflow:hidden; border: 1px solid var(--line-light);
  background:#fff; display:flex; flex-direction:column;
  box-shadow: 0 20px 44px -30px rgba(20,20,40,0.28);
  opacity:0; transition: opacity 0.7s ease, transform 0.7s ease;
}
.project-row--left .project-block{ grid-column:1; transform: translateX(-36px); }
.project-row--right .project-block{ grid-column:2; transform: translateX(36px); }
.project-row.is-active .project-block{ opacity:1; transform: translateX(0); }

.project-block__visual{
  height: 220px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.project-block__visual::after{
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.project-block__glyph{ position:relative; z-index:1; font-family: var(--font-mono); font-weight:700; font-size:2.4rem; color: rgba(255,255,255,0.92); letter-spacing:-0.02em; }
.project-block__body{ padding: 34px 38px 38px; display:flex; flex-direction:column; gap:16px; }
.project-block__status{ font-family: var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--text-on-light-mute); }
.project-block h3{ font-size: 1.45rem; }
.project-block p{ color: var(--text-on-light-mute); font-size:0.98rem; max-width: 62ch; }
.project-block__tags{ display:flex; gap:8px; flex-wrap:wrap; }
.project-block__tags span{ font-family: var(--font-mono); font-size:0.7rem; background: var(--bg-light-2); padding:5px 12px; border-radius: 100px; color: var(--text-on-light-mute); }
.project-block__link{ margin-top:4px; font-family: var(--font-mono); font-size:0.88rem; font-weight:600; display:flex; align-items:center; gap:8px; color: var(--text-on-light); }
.project-block__link svg{ transition: transform 0.25s ease; }
.project-block__link:hover svg{ transform: translate(3px,-3px); }
.project-block__link.is-disabled{ color: var(--text-on-light-mute); cursor:default; }

@media (max-width: 860px){
  .project-row{ grid-template-columns: 1fr !important; padding-left: 48px; row-gap: 14px; }
  .project-row__index{
    grid-column:1 !important; text-align:left !important; padding:0 !important;
    font-size: 1.6rem; opacity:1; order:-1;
    color: var(--accent-violet); display:flex; align-items:center; gap:10px;
  }
  .project-row__index::before{
    content:''; width:22px; height:2px; background: var(--gradient-signature); display:inline-block;
  }
  .project-row--left .project-block,
  .project-row--right .project-block{ grid-column:1; transform: translateX(20px); }
}


/* ==========================================================================
   ILS M'ONT FAIT CONFIANCE — marquee
   ========================================================================== */
.trust{ overflow:hidden; }
.trust__row{
  display:flex; gap: 0; width: max-content;
  animation: marquee 26s linear infinite;
}
.trust__row:hover{ animation-play-state: paused; }
.trust__item{
  display:flex; align-items:center; gap:14px;
  padding: 0 56px; font-family: var(--font-mono); font-size:1.3rem; font-weight:600;
  color: var(--text-on-dark-mute); white-space:nowrap;
  border-right: 1px solid var(--line-dark);
}
.trust__item span.dot{ width:7px; height:7px; border-radius:50%; background: var(--gradient-signature); }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.trust__fade-l, .trust__fade-r{ position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.trust__fade-l{ left:0; background: linear-gradient(90deg, var(--bg-dark), transparent); }
.trust__fade-r{ right:0; background: linear-gradient(270deg, var(--bg-dark), transparent); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; }
.contact__info h2{ margin-bottom:20px; }
.contact__info p{ color: var(--text-on-dark-mute); font-size:1.02rem; margin-bottom: 34px; max-width:420px; }
.contact__list{ display:flex; flex-direction:column; gap:20px; margin-bottom: 34px; }
.contact__list li{ display:flex; align-items:center; gap:14px; font-family: var(--font-mono); font-size:0.92rem; }
.contact__list .ico{
  width: 38px; height:38px; border-radius:10px; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--accent-teal);
}
.contact__socials{ display:flex; gap:12px; }
.contact__socials a{
  width: 42px; height:42px; border-radius:50%; border:1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; transition: border-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.contact__socials a:hover{ border-color: var(--accent-teal); color: var(--accent-teal); transform: translateY(-3px); }

.contact-form{ display:flex; flex-direction:column; gap: 20px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family: var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color: var(--text-on-dark-mute); }
.field input, .field textarea{
  background: var(--bg-dark-2); border:1px solid var(--line-dark); border-radius:10px;
  padding: 14px 16px; color: var(--text-on-dark); font-family: var(--font-body); font-size:0.96rem;
  transition: border-color 0.25s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color: var(--accent-teal); }
.field textarea{ resize: vertical; min-height: 130px; }
.contact-form__submit{ align-self:flex-start; border:none; }
.contact-form__status{ font-family: var(--font-mono); font-size:0.82rem; min-height: 1.2em; }
.contact-form__status[data-state="success"]{ color: var(--accent-teal); }
.contact-form__status[data-state="error"]{ color: #FF8B7A; }
.contact-form__status[data-state="sending"]{ color: var(--text-on-dark-mute); }

@media (max-width: 860px){
  .contact{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ border-top: 1px solid var(--line-dark); padding: 48px 0; }
.footer__row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 24px; }
.footer__brand{ font-family: var(--font-display); font-weight:700; }
.footer__nav{ display:flex; gap: 24px; font-family: var(--font-mono); font-size:0.8rem; color: var(--text-on-dark-mute); flex-wrap:wrap; }
.footer__nav a:hover{ color: var(--accent-teal); }
.footer__note{ font-family: var(--font-mono); font-size:0.76rem; color: var(--text-on-dark-mute); margin-top: 20px; text-align:center; }

/* ==========================================================================
   ACCESSIBILITÉ — lien d'évitement
   ========================================================================== */
.skip-link{
  position: fixed; top:-60px; left: 16px; z-index: 2000;
  background: var(--gradient-signature); color: var(--bg-dark);
  font-family: var(--font-mono); font-weight:600; font-size:0.85rem;
  padding: 12px 20px; border-radius: 10px;
  transition: top 0.25s ease;
}
.skip-link:focus{ top: 16px; }

/* ==========================================================================
   NAVIGATION — état actif (scrollspy)
   ========================================================================== */
.nav__links a.is-current{ color: var(--text-on-dark); }
.nav__links a.is-current::after{ transform: scaleX(1); }
.nav__links a.nav__cta.is-current{ box-shadow: 0 0 0 2px rgba(255,255,255,0.5) inset; }

/* ==========================================================================
   BOUTON RETOUR EN HAUT
   ========================================================================== */
.back-to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 400;
  width: 46px; height:46px; border-radius:50%;
  background: var(--bg-dark-2); border: 1px solid var(--line-dark);
  color: var(--text-on-dark);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, border-color 0.25s ease, background 0.25s ease;
  box-shadow: 0 10px 26px -12px rgba(0,0,0,0.5);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ border-color: var(--accent-teal); color: var(--accent-teal); }

/* ==========================================================================
   CTA CONTACT FLOTTANT — mobile uniquement
   ========================================================================== */
.mobile-contact-fab{
  display:none;
  position: fixed; left: 20px; bottom: 20px; z-index: 400;
  align-items:center; gap:8px;
  font-family: var(--font-mono); font-size:0.82rem; font-weight:600;
  background: var(--gradient-signature); color: var(--bg-dark);
  padding: 13px 20px; border-radius: 100px;
  box-shadow: 0 14px 30px -12px rgba(var(--accent-teal-rgb),0.5);
}
@media (max-width: 640px){
  .mobile-contact-fab{ display:inline-flex; }
  .back-to-top{ right: 16px; bottom: 16px; width:42px; height:42px; }
}

/* ==========================================================================
   Hover sur les cartes de compétences (indépendant du scroll)
   ========================================================================== */
.skill-card{ transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.skill-card:hover{
  border-color: rgba(var(--accent-teal-rgb),0.45);
  box-shadow: 0 20px 40px -26px rgba(var(--accent-teal-rgb),0.35);
  transform: translateY(-4px) translateX(0) !important;
}
.skill-row--left .skill-card:hover{ transform: translateY(-4px) !important; }
.skill-row--right .skill-card:hover{ transform: translateY(-4px) !important; }

/* ==========================================================================
   FORMULAIRE — validation visuelle + spinner de chargement
   ========================================================================== */
.field{ position:relative; }
.field input, .field textarea{ transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.field.is-invalid input, .field.is-invalid textarea{
  border-color: #FF8B7A;
  box-shadow: 0 0 0 3px rgba(255,139,122,0.15);
}
.field__error{
  display:none; font-family: var(--font-mono); font-size:0.72rem; color: #FF8B7A; margin-top:2px;
}
.field.is-invalid .field__error{ display:block; }

.btn__spinner{
  display:none; width:15px; height:15px; border-radius:50%;
  border: 2px solid rgba(10,13,20,0.25); border-top-color: var(--bg-dark);
  animation: spin 0.7s linear infinite;
}
.contact-form__submit.is-loading .btn__spinner{ display:inline-block; }
.contact-form__submit.is-loading{ opacity:0.85; pointer-events:none; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   TÉMOIGNAGES
   ========================================================================== */
.testimonials{ margin-top: 64px; display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testimonial-card{
  border: 1px solid var(--line-dark); border-radius: var(--radius);
  background: var(--bg-dark-2); padding: 28px 30px;
}
.testimonial-card__quote{ font-size:1rem; line-height:1.65; color: var(--text-on-dark); margin-bottom: 22px; }
.testimonial-card__author{ display:flex; align-items:center; gap:12px; }
.testimonial-card__avatar{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: var(--gradient-signature); color: var(--bg-dark); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono);
}
.testimonial-card__name{ font-weight:600; font-size:0.92rem; }
.testimonial-card__role{ font-family: var(--font-mono); font-size:0.76rem; color: var(--text-on-dark-mute); }

@media (max-width: 720px){ .testimonials{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Utilitaires responsive
   ========================================================================== */
@media (max-width: 640px){
  .section{ padding: 96px 0; }
  .hero{ min-height: 100vh; }
}