/* =========================
   FONTS
   ========================= */
@font-face{
  font-family:"Brunson Rough";
  src:url("../fonts/Brunson Rough.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"Brunson";
  src:url("../fonts/Brunson.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"Coolvetica";
  src:url("../fonts/Coolvetica Rg.otf") format("opentype");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"AerosoldierBasic";
  src:url("../fonts/AerosoldierBasic_PERSONAL_USE_ONLY.otf") format("opentype");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"AerosoldierSymbol";
  src:url("../fonts/AerosoldierSymbol_PERSONAL_USE_ONLY.otf") format("opentype");
  font-weight:400;
  font-style:normal;
}

/* =========================
   ROOT
   ========================= */
:root{
  --bg-light:#e5e5e5;
  --bg-dark:#000;
  --red:#C03A42;
  --white:#fff;
  --black:#000;
}

/* =========================
   RESET + SAFE MOBILE
   ========================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  padding:0;
  min-height:100vh;
  font-family:"Coolvetica", Arial, sans-serif;
  background:var(--bg-dark);
  color:var(--white);
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* =========================
   LAYOUT
   ========================= */
main{ width:100%; }

.section{
  width:100%;
  padding:0 60px;
}

/* ✅ iPhone: 100svh évite les bugs de barre Safari */
.full-screen{
  min-height:100svh;
  height:auto;
  position:relative;
}

/* =========================
   HEADER (FIXE, PROPRE)
   ========================= */
.main-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:90px;
  padding:0 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:1000;
  background:transparent;
}

.logo-area{ display:flex; align-items:center; }

.logo img{
  height:56px;
  width:auto;
  display:block;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:60px;
  font-size:14px;
  letter-spacing:.08em;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-link{
  color:var(--white);
  position:relative;
}
.nav-link.active{ color:var(--red); }

/* =========================
   HOME PAGE
   ========================= */
.home-page{
  background:var(--bg-light);
  color:#0E0E0F;
}

/* Home: garde les liens du header en blanc */
.home-page .nav-link{ color:var(--white); }
.home-page .nav-link.active{ color:var(--red); }

/* =========================
   HOME HERO
   ========================= */
.home-hero{
  color:#0E0E0F;
  min-height:100svh;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding-top:90px;

  position:relative;
  overflow:hidden;

  /* IMPORTANT: on enlève le fond fixe */
  background: none !important;
}

/* === GIF background === */
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/showreelgif.gif") center/cover no-repeat;
  z-index:0;
}

/* overlay clair pour garder ton look + lisibilité */
.home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(229,229,229,.75);
  z-index:1;
}

/* le contenu au-dessus (SANS casser les absolute) */
.home-hero .hero-inner{
  position:relative;
  z-index:2;
}

.home-hero .home-bottom-left,
.home-hero .home-bottom-center,
.home-hero .home-bottom-right{
  z-index:2;
}

/* (optionnel) sur home, enlève le padding 60px du .section si tu veux un centrage parfait */
.home-page .home-hero.section{
  padding-left:60px;
  padding-right:60px;
}

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:1100px;
  padding:0 16px;
}

.small-intro{
  font-size:12px;
  letter-spacing:.15em;
  margin:0 0 22px;
  color:#0E0E0F;
}

.hero-title-wrapper{
  width:min(604px, 92vw);
  display:flex;
  justify-content:center;
  margin:0 auto 18px;
}

.hero-title{
  margin:0;
  color:#0E0E0F;
  text-align:center;
  font-family:"Brunson Rough";
  font-size:clamp(36px, 7.5vw, 64px);
  font-weight:400;
  line-height:1.02;
}

.btn-showreel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-radius:999px;
  padding:14px 44px;
  border:2px solid var(--red);
  color:var(--red);
  font-size:14px;
  letter-spacing:.08em;
  background:transparent;
  cursor:pointer;
  margin-top:8px;
}
.btn-showreel .btn-play{ font-size:14px; }

/* HOME bottom */
.home-bottom-left,
.home-bottom-center,
.home-bottom-right{
  position:absolute;
  bottom:30px;
}

.home-bottom-left{
  left:60px;
  display:flex;
  align-items:center;
  gap:16px;
}
.home-bottom-center{
  left:50%;
  transform:translateX(-50%);
}
.home-bottom-right{
  right:60px;
}

.symbol-circle{
  width:46px;
  height:46px;
  border-radius:999px;
  border:2px solid var(--red);
  background:transparent;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.symbol-circle.small-circle{
  width:36px;
  height:36px;
}

.symbol-circle .symbol-char{
  font-family:"AerosoldierSymbol", Arial, sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1;
  color:var(--red);
  display:inline-block;
}

.btn-outline{
  height:46px;
  padding:0 26px;
  border-radius:999px;
  border:2px solid #0E0E0F;
  background:transparent;
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  color:#0E0E0F;
}

.btn-miss{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Coolvetica", Arial, sans-serif;
  letter-spacing:.08em;
  text-align:center;
}

/* =========================
   QUOTE SCREEN (HOME)
   ========================= */
.quote-screen{
  background:#000;
  color:#fff;
  min-height:100svh;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding-top:90px;
  padding-bottom:40px;
}

.quote-inner{
  width:100%;
  max-width:1100px;
  padding:0 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.symbol-crown{
  font-family:"AerosoldierSymbol", Arial, sans-serif;
  font-size:70px;
  margin:0 0 18px;
  color:#fff;
}

.quote-box{
  width:min(814px, 92vw);
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.quote-box .big-quote{
  margin:0;
  text-align:center;
  font-family:"Brunson Rough";
  font-size:clamp(52px, 9vw, 128px);
  font-weight:400;
  line-height:.80;
}

.big-quote .red{ color:var(--red); }
.big-quote .white{ color:var(--white); }

.quote-box .tagline{
  margin-top:18px;
  font-family:"AerosoldierBasic";
  font-size:24px;
  letter-spacing:1.92px;
  color:#fff;
  transform:rotate(3.8deg);
  max-width:92vw;
  align-self:flex-start;
}

/* =========================
   HOME – 3 GIF PAGES
   ========================= */
.home-project-screen{
  background:#0E0E0F;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding-top:90px;
  padding-bottom:40px;
}

.home-project-card{
  position:relative;
  width:min(1180px, 92vw);
  aspect-ratio:21/9;
  display:block;
  text-decoration:none;
}

.home-project-card > img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:46px;
}

.home-project-title{
  position:absolute;
  top:-55px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  text-align:center;
  pointer-events:none;
  z-index:50;

  color:var(--red);
  font-family:"Brunson Rough";
  font-size:clamp(48px, 6vw, 120px);
  font-weight:400;
  line-height:.80;
  text-transform:uppercase;
  letter-spacing:1px;
  white-space:nowrap;
}

.home-project-bottom-center{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:5;
}

.home-project-bottom-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:999px;
  border:2px solid var(--red);
  color:var(--red);
  font-family:"AerosoldierSymbol", Arial, sans-serif;
  font-size:20px;
  line-height:1;
}

/* =========================
   PROJECTS HERO + TABS + GRID
   ========================= */
.projects-hero{
  background:#000;
  min-height:100svh;

  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding-top:90px;
  padding-bottom:40px;
}

.projects-quote-wrapper{
  position:relative;
  width:min(814px, 92vw);
  height:auto;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.projects-quote{
  margin:0;
  font-family:"Brunson Rough";
  font-size:clamp(52px, 9vw, 128px);
  font-weight:400;
  line-height:.80;
  text-align:center;
}

/* Colors spans (works everywhere) */
.projects-quote .red { color: var(--red) !important; }
.projects-quote .white { color: var(--white) !important; }

.projects-handwritten-overlay{
  position:absolute;
  left:-60px;
  bottom:70px;
  display:flex;
  width:394px;
  height:auto;
  flex-direction:column;
  justify-content:center;
  transform:rotate(6.5deg);
  color:#fff;
  text-align:center;
  font-family:"AerosoldierBasic";
  font-size:24px;
  letter-spacing:1.92px;
  z-index:5;
  pointer-events:none;
  max-width:92vw;
}

.projects-tabs{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:120px;
}

/* grid */
.projects-grid-section{ padding:40px 60px 120px; }
.projects-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.project-item{
  display:block;
  position:relative;
  border-radius:22px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  box-shadow:0 12px 40px rgba(0,0,0,.45);
  transform:translateZ(0);
  transition:.2s ease;
}
.project-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.project-item:hover{ transform:translateY(-3px); }
.project-large{
  grid-column:1 / -1;
  height:420px;
}
.project-item:not(.project-large){ height:220px; }

/* =========================
   ABOUT
   ========================= */
.about-hero{
  background:#000;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding-top:90px;
  padding-bottom:40px;
}

.about-quote-box{
  width:min(814px, 92vw);
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  padding:0 16px;
}
.about-quote-box .big-quote{
  margin:0;
  text-align:center;
  font-family:"Brunson Rough";
  font-size:clamp(52px, 9vw, 128px);
  font-weight:400;
  line-height:.80;
}
.about-tagline{
  font-family:"AerosoldierBasic";
  font-size:24px;
  color:#fff;
  margin-top:18px;
  align-self:flex-start;
  max-width:92vw;
}

.about-tagline-overlay{
  font-family:"AerosoldierBasic", Arial, sans-serif !important;
  font-size:32px;
  letter-spacing:2px;

  position:absolute;
  left:40px;
  top:120px;

  transform:rotate(6deg);
  color:#ffffff;
  white-space:nowrap;
}

.about-content{
  background:#000;
  padding-top:40px;
  padding-bottom:120px;
}

.about-content-inner{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 60px;

  display:flex;
  gap:80px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.about-left{
  flex:1 1 420px;
  min-width:280px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:32px;
}

.about-apo-img{
  width:100%;
  max-width:650px;
  height:auto;
  transform:rotate(-8deg) scale(1.06);
  transform-origin:left center;
}

.about-subtitle{
  font-family:"Brunson";
  font-size:clamp(18px, 2.2vw, 30px);
  letter-spacing:1.6px;
  margin:0 0 14px;
  font-weight:400;
}
.about-subtitle.red{ color:var(--red); }

.about-personal-projects p{
  font-size:clamp(18px, 2vw, 20px);
  line-height:1.55;
  margin:0;
}

.about-bottom-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:18px;
}

.about-chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border:1.5px solid #fff;
  border-radius:999px;
  font-size:14px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
}

.chip-icon{
  width:20px;
  height:20px;
  display:block;
}

.about-chip-discord{
  border-color:var(--red);
  color:var(--red);
}
.about-chip-instagram{
  border-color:#fff;
  color:#fff;
}

.about-right{
  flex:1 1 520px;
  min-width:280px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  color:#fff;
  overflow-wrap:anywhere;
}

.about-tag-hand{
  font-family:"AerosoldierBasic";
  color:var(--red);
  font-size:40px;
  letter-spacing:3.2px;
  margin:0 0 10px;
  transform:rotate(3deg);
  z-index:2;
}

.about-title{
  font-family:"Brunson Rough";
  font-size:clamp(56px, 6vw, 110px);
  font-weight:400;
  line-height:.95;
  margin:0 0 18px;
}

.about-text-block p{
  font-size:clamp(16px, 2vw, 18px);
  line-height:1.45;
  margin:0 0 14px;
  max-width:720px;
}
.txt-red{ color:var(--red); }

.about-tools-row{
  display:flex;
  align-items:center;
  gap:18px;
  margin:22px 0 18px;
  flex-wrap:wrap;
}

.btn-about-tools{
  border-radius:999px;
  border:2px solid #fff;
  background:transparent;
  padding:12px 26px;
  font-family:"Coolvetica";
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}

.tools-strip{
  height:70px;
  width:auto;
  display:block;
  max-width:100%;
}

.about-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:18px;
  margin-bottom:24px;
}

.about-col p,
.about-formation p{
  font-size:16px;
  line-height:1.6;
  margin:0;
}

.about-formation{ margin-top:28px; }

.about-website-link-row{
  margin-top:40px;
  display:flex;
  justify-content:flex-end;
  width:100%;
}

.about-website-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:999px;
  border:2px solid #fff;
  padding:12px 22px;
  font-family:"Coolvetica";
  font-size:14px;
  color:#fff;
  text-align:center;

  min-width:280px;
  max-width:100%;
  white-space:nowrap;
}

/* =========================
   CONTACT
   ========================= */
.contact-hero{
  background:#000;
  min-height:100svh;
  display:flex;
  justify-content:center;
  align-items:stretch;
  padding-top:90px;
  padding-bottom:40px;
}

.contact-hero-inner{
  max-width:1100px;
  width:100%;
  height:auto;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.contact-quote-box{
  width:min(814px, 92vw);
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.contact-big-quote{
  margin:0;
  font-family:"Brunson Rough";
  font-size:clamp(52px, 9vw, 128px);
  font-weight:400;
  line-height:.80;
}
.contact-big-quote .red{ color:var(--red); }
.contact-big-quote .white{ color:#fff; }

.contact-tagline{
  margin-top:16px;
  font-family:"AerosoldierBasic";
  font-size:25px;
  color:#fff;
  transform:rotate(6deg);
  max-width:92vw;
}

.contact-bottom{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  flex-wrap:wrap;
}

.contact-text-box{ flex:1 1 320px; min-width:280px; }
.contact-intro{
  width:100%;
  color:#fff;
  font-size:20px;
  line-height:1.35;
  margin:0;
}
.contact-intro .txt-red{ color:var(--red); }

.contact-buttons{
  flex:1 1 280px;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:10px 40px;
  font-family:"Coolvetica";
  font-size:16px;
  text-transform:lowercase;
  cursor:pointer;
}
.contact-btn-outline{
  border:2px solid #fff;
  background:transparent;
  color:#fff;
}
.contact-btn-red{
  border:2px solid var(--red);
  background:transparent;
  color:var(--red);
}

/* =========================
   END SCREEN (MADEBYAPO)
   ========================= */
.apo-end-screen{ background:#000; }

.apo-end-inner{
  min-height:100svh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:90px;
  padding-bottom:40px;
}

.apo-end-top-left{
  position:absolute;
  top:100px;
  left:28px;
  font-size:14px;
  line-height:1.2;
  color:#fff;
  max-width:420px;
}

.apo-end-top-right{
  position:absolute;
  top:100px;
  right:28px;
  font-size:14px;
  line-height:1.2;
  color:#fff;
  text-align:right;
  max-width:420px;
}

.apo-end-top-right .red{ color:var(--red); }

.apo-end-center{
  width:min(814px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.apo-title{
  color:var(--red);
  font-family:"Brunson Rough";
  font-size:clamp(56px, 7vw, 96px);
  font-weight:400;
  margin:0;
}

.apo-subtag{
  color:#fff;
  font-family:"AerosoldierBasic";
  font-size:24px;
  letter-spacing:1.92px;
  margin-top:10px;
  margin-bottom:18px;
  transform:rotate(-3deg);
  max-width:92vw;
}

.apo-cloud{
  width:min(604px, 92vw);
  height:auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.apo-row{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  margin:3px 0;
  flex-wrap:wrap;
}

.apo-word.big{
  font-family:"Brunson Rough";
  font-size:clamp(28px, 5vw, 48px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.96px;
}
.apo-word.small{
  font-family:"Brunson";
  font-size:clamp(14px, 3.5vw, 20px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.4px;
}
.apo-word.red{ color:var(--red); }
.apo-word.white{ color:#fff; }
.apo-word.link{ cursor:pointer; }

.apo-end-bottom-left{
  position:absolute;
  left:28px;
  bottom:28px;
  z-index:50;
}

.apo-end-bottom-right{
  position:absolute;
  right:28px;
  bottom:28px;
}

.btn-who{
  height:44px;
  padding:0 34px;
  border-radius:999px;
  border:2px solid #ffffff;
  background:transparent;
  font-family:"Coolvetica", Arial, sans-serif;
  font-size:14px;
  letter-spacing:.08em;
  color:#ffffff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn-who:hover{
  border-color:var(--red);
  color:var(--red);
}

.corner-circle{
  width:44px;
  height:44px;
  border-radius:999px;
  border:2px solid var(--red);
  display:flex;
  align-items:center;
  justify-content:center;
}
.corner-circle-icon{
  font-family:"AerosoldierSymbol", Arial, sans-serif;
  font-size:22px;
  color:var(--red);
  line-height:1;
  display:block;
}

/* =========================
   REVEAL
   ========================= */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .8s ease-out, transform .8s ease-out;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================
   BUTTON HOVERS (SANS OMBRE)
   ========================= */
.btn-showreel,
.btn-outline,
.btn-about-tools,
.contact-btn,
.btn-who,
.symbol-circle,
.home-project-bottom-symbol,
.corner-circle,
.about-chip,
.about-website-link{
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  will-change: transform;
}

.btn-showreel:hover,
.btn-outline:hover,
.btn-about-tools:hover,
.contact-btn:hover,
.btn-who:hover,
.symbol-circle:hover,
.home-project-bottom-symbol:hover,
.corner-circle:hover,
.about-chip:hover,
.about-website-link:hover{
  transform: translateY(-2px) scale(1.03);
}

.btn-showreel:active,
.btn-outline:active,
.btn-about-tools:active,
.contact-btn:active,
.btn-who:active,
.symbol-circle:active,
.home-project-bottom-symbol:active,
.corner-circle:active,
.about-chip:active,
.about-website-link:active{
  transform: translateY(0) scale(.98);
}

.btn-showreel:focus-visible,
.btn-outline:focus-visible,
.btn-about-tools:focus-visible,
.contact-btn:focus-visible,
.btn-who:focus-visible,
.symbol-circle:focus-visible,
.home-project-bottom-symbol:focus-visible,
.corner-circle:focus-visible,
.about-chip:focus-visible,
.about-website-link:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 4px;
}


/* =========================
   RESPONSIVE
   ========================= */
@media (max-width:1100px){
  .section{ padding:0 24px; }
  .projects-grid{ grid-template-columns:repeat(2, 1fr); }
  .project-large{ height:360px; }
  .about-content-inner{ padding:0 24px; }
}

@media (max-width:768px){

  .main-header{
    height:70px;
    padding:0 16px;
  }
  .logo img{ height:44px; }

  .main-nav{
    gap:16px;
    font-size:12px;
  }

  .home-hero{ padding-top:70px; }

  .home-bottom-left{ left:16px; gap:12px; }
  .home-bottom-right{ right:16px; }
  .home-bottom-left,
  .home-bottom-center,
  .home-bottom-right{ bottom:16px; }

  /* logo du milieu disparaît sur mobile */
  .home-bottom-center{ display:none !important; }

  .quote-screen,
  .projects-hero,
  .about-hero,
  .contact-hero,
  .home-project-screen,
  .apo-end-inner{
    padding-top:70px;
  }

  .quote-box .tagline{
    align-self:center;
    text-align:center;
    transform:none;
  }

  .projects-handwritten-overlay{
    position:static;
    width:auto;
    margin-top:14px;
    transform:none;
  }

  .projects-grid{ grid-template-columns:1fr; }
  .project-large{ height:280px; }
  .project-item:not(.project-large){ height:220px; }

  .about-columns{ grid-template-columns:1fr; gap:18px; }
  .about-apo-img{
    width:min(650px, 92vw);
    max-width:92vw;
    transform:none;
  }
  .about-website-link{
    width:100%;
    min-width:0;
  }

  .contact-bottom{ flex-direction:column; align-items:stretch; }

  /* end texts anti-overlap */
  .apo-end-top-left,
  .apo-end-top-right{
    font-size:12px;
    max-width:45vw;
    line-height:1.3;
  }
  .apo-end-top-left{ left:16px; top:70px; }
  .apo-end-top-right{ right:16px; top:70px; text-align:right; }
}

@media (max-width:520px){
  .home-project-card > img{ border-radius:26px; }
  .home-project-title{ top:4px; font-size:42px; }
}

/* =========================
   SHOWREEL PAGE
   ========================= */

/* fond + pas de scroll */
.showreel-page{
  background:#000;
  color:#fff;
  overflow:hidden;
}

/* section plein écran */
.showreel-hero{
  position:relative;
  min-height:100svh;
  padding:0 !important;
  background:#000;
  overflow:hidden;
}

/* vidéo full screen */
.showreel-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* sécurité: tout le contenu au-dessus de la vidéo */
.showreel-hero > *{
  position:relative;
  z-index:1;
}

/* IMPORTANT: la vidéo doit rester visible même si ton CSS home met des overlays */
.showreel-page .home-hero::before,
.showreel-page .home-hero::after{
  display:none !important;
}

/* bouton son (haut gauche) */
.sound-toggle{
  position:fixed;
  top:100px; /* sous header 90px */
  left:28px;
  z-index:2000;

  height:44px;
  padding:0 18px;
  border-radius:999px;

  border:2px solid #fff;
  background:rgba(0,0,0,.35);
  color:#fff;

  font-family:"Coolvetica", Arial, sans-serif;
  font-size:14px;
  letter-spacing:.08em;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  cursor:pointer;
  user-select:none;

  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.sound-toggle:hover{
  transform: translateY(-2px) scale(1.03);
  background:rgba(0,0,0,.55);
  border-color: var(--red);
  color: var(--red);
}

.sound-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#fff;
  transition: transform .18s ease, background-color .18s ease;
}

.sound-toggle:hover .sound-dot{
  background: var(--red);
  transform: scale(1.15);
}

/* muted */
.sound-toggle.is-muted .sound-dot{
  background: rgba(255,255,255,.45);
}

/* mobile */
@media (max-width:768px){
  .sound-toggle{
    top:80px;
    left:16px;
  }
}

/* ===== FIX MOBILE : centrage HOME + titres "à cheval" au-dessus des GIF ===== */
@media (max-width: 768px){

  /* 1) Sur mobile, la section avait encore padding 60px -> ça décale tout */
  .section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 2) HOME screen : garde un centrage propre */
  .home-hero .hero-inner{
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 !important;
    text-align: center;
  }

  /* 3) Project screens : le GIF descend un peu pour laisser la place au titre */
  .home-project-card{
    margin-top: 70px !important;
  }

  /* 4) IMPORTANT : force le titre AU-DESSUS (et pas sur le GIF) */
  .home-project-title{
    top: -55px !important;
    font-size: clamp(44px, 9vw, 80px) !important;
    line-height: .85 !important;
    white-space: normal !important; /* évite que ça déborde */
  }
}

/* encore plus petit (remplace ton ancien @media max-width:520px qui faisait top:4px) */
@media (max-width: 520px){
  .home-project-category-title-card{
    margin-top: 64px !important;
  }
  .home-project-category-title{
    top: 0px !important;
    font-size: 42px !important;
  }
}

/* =========================
   PROJECTS — FIX TITRES ROUGES SUR MOBILE
   (évite que le titre tombe sur les GIF)
   ========================= */

@media (max-width: 768px){

  /* Le titre rouge (PROJECT / catégories) */
  .projects-category-title{
    margin-top: 60px !important;   /* espace sous le header */
    margin-bottom: 40px !important; /* espace avant les GIF */
    transform: none !important;    /* enlève les décalages */
    position: relative !important;
    z-index: 5 !important;
  }

  /* La section juste après (grid / cartes) descend bien */
  .projects-grid-section{
    padding-top: 0 !important;
  }
}

/* PROJECTS — TITRES DE CATEGORIES (DESKTOP + MOBILE pareil) */
.projects-page .projects-category-title{
  text-align: center !important;
  color: var(--red) !important;
  font-family: "Brunson Rough", serif !important;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(48px, 8vw, 110px);
  line-height: .9;
  margin: 0 0 40px;
}

@media (min-width: 1920px){

  .hero-title{
    font-size: clamp(96px, 6.5vw, 160px);
  }

  .projects-quote,
  .big-quote,
  .contact-big-quote{
    font-size: clamp(120px, 8vw, 220px);
    line-height: 0.85;
  }

  .projects-category-title{
    font-size: clamp(120px, 8vw, 220px);
    line-height: 0.85;
    margin-bottom: 120px;
  }
}

/* =========================
   END PAGE — WORD LINKS
   ========================= */

.apo-end-inner .apo-link{
  cursor: pointer;
  position: relative;
  display: inline-block;

  transition: transform .18s ease;
}

/* underline (par défaut caché) */
.apo-end-inner .apo-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

/* hover */
.apo-end-inner .apo-link:hover{
  transform: translateY(-2px);
}
.apo-end-inner .apo-link:hover::after{
  transform: scaleX(1);
}

/* focus clavier */
.apo-end-inner .apo-link:focus-visible{
  outline-offset: 4px;
}

/* =========================
   VARIANTES COULEUR
   ========================= */

/* TEXTE ROUGE → ANIMATION BLANCHE */
.apo-link-red{
  color: var(--red);
}
.apo-link-red::after{
  background: #fff;
}
.apo-link-red:focus-visible{
  outline: 2px solid #fff;
}

/* TEXTE BLANC → ANIMATION ROUGE */
.apo-link-white{
  color: #fff;
}
.apo-link-white::after{
  background: var(--red);
}
.apo-link-white:focus-visible{
  outline: 2px solid var(--red);
}

/* =========================
   END PAGE — OLD HOVER ANIMATION
   ========================= */

.apo-word.apo-link{
  cursor: pointer;
  transition: transform .18s ease, color .18s ease;
  will-change: transform;
}

/* animation originale */
.apo-word.apo-link:hover{
  transform: translateY(-2px) scale(1.03);
}

.apo-word.apo-link:active{
  transform: translateY(0) scale(.98);
}

/* TEXTE ROUGE → animation BLANCHE */
.apo-link-red{
  color: var(--red);
}
.apo-link-red:hover{
  color: #fff;
}
.apo-link-red:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* TEXTE BLANC → animation ROUGE */
.apo-link-white{
  color: #fff;
}
.apo-link-white:hover{
  color: var(--red);
}
.apo-link-white:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

/* =========================
   FIX — END PAGE SMALL WORDS RED
   ========================= */

.apo-end-screen .apo-word.small{
  color: var(--red);               /* ROUGE */
}

/* =========================
   PROJECTS — TITRES CENTRÉS
   ========================= */

.projects-category-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;   /* CENTRE HORIZONTAL */
}

/* TITRES : VIDEO / GRAPHIC DESIGN */
.projects-category-title{
  font-family: "Brunson Rough";
  color: var(--red);
  text-transform: uppercase;

  text-align: center;
  width: 100%;

  font-size: clamp(56px, 7vw, 120px);
  line-height: 0.9;

  margin: 0 0 48px;  /* espace avec les gifs */
}

/* ajuste légèrement la position verticale des titres */
.projects-category-title{
  margin-top: 10px; /* augmente / diminue ici si besoin */
}

/* Décale UNIQUEMENT le titre VIDEO */
#personal .projects-category-title{
  transform: translateY(20px);
}

/* ❌ PAS D’ANIMATION pour le bouton "TOOL I USE" */
.btn-about-tools,
.btn-about-tools:hover,
.btn-about-tools:active,
.btn-about-tools:focus-visible{
  transform: none !important;
  transition: none !important;
}