/* ===========================================================
   Variables & reset
=========================================================== */
:root{
  --bg: #05070c;
  --text: #e8ecf8;
  --muted: rgba(255,255,255,.72);

  --accent: #6C63FF;
  --accent-2: #00B3FF;

  --card: #111521;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.30);

  --header-h: 64px;

  /* BG lines */
  --bg-line-duration: 2600ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
/* Laisse JS gérer le smooth si souhaité */
html{ scroll-behavior:smooth; }
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:16px/1.6 "Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1100px; margin:0 auto; padding:0 20px; }

.muted{ color:var(--muted); }
.small{ font-size:.9rem; }
.center{ text-align:center; }

/* ===========================================================
   Typo titres — Jersey 10 partout
=========================================================== */
h1,h2,h3,h4,
.section-title,
.card-title,
.work-title,
.pixel-title,
.hero-title{
  font-family:"Jersey 10", system-ui, sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  color:#fff;
}

/* ===========================================================
   Header “glass” (fixe, floute le contenu derrière)
=========================================================== */
.site-header{
  position: fixed;      /* ← fixe, ne disparaît pas en bas de page */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: transparent;     /* le fond est géré par ::before */
  color:#fff;
  border-bottom:none;          /* pas de petite ligne grise */
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: linear-gradient(to bottom, rgba(8,12,24,.55), rgba(8,12,24,.22));
}
.site-header .nav-wrap{
  position:relative;
  z-index:1;
  height:var(--header-h);
}
/* Espace sous le header fixe */
body{ padding-top:var(--header-h); }

main, footer{ position: relative; z-index: 1; }

.nav-wrap{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:600; color:#fff; }
.brand-mark{
  width:34px; height:34px; display:grid; place-items:center;
  background:rgba(255,255,255,.12);
  color:#fff; border-radius:10px; border:1px solid rgba(255,255,255,.18);
}
.brand-name{ letter-spacing:.3px; color:#fff; }

.site-nav ul{ display:flex; gap:1.2rem; list-style:none; margin:0; padding:0; }
.site-nav a{
  position:relative; z-index:0;
  padding:.4rem .6rem; border-radius:10px;
  color:rgba(255,255,255,.92);
  background:transparent !important; border-color:transparent !important;
}
.site-nav a::after{
  content:""; position:absolute; inset:-6px -10px;
  border-radius:12px; background:#000; opacity:0; z-index:-1;
  transition:opacity .35s ease;
}
.site-nav a:hover::after{ opacity:.18; }
.site-nav a.active::after{ opacity:.35; animation:navActiveIn .40s ease-out .05s both; }
@keyframes navActiveIn{ from{opacity:0;transform:scale(.96)} to{opacity:.35;transform:scale(1)} }

.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0; padding:8px; border-radius:10px; }
.nav-toggle .bar{ width:22px; height:2px; background:#fff; display:block; }

/* Menu mobile “verre” */
@media (max-width: 900px){
  .site-nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    transform:translateY(-120%);
    transition:transform .25s ease;
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    background: rgba(8,12,24,.72);
    border-bottom:none;
  }
  .site-nav.open{ transform:none; }
  .nav-toggle{ display:flex; }
  .site-nav ul{ flex-direction:column; padding:14px 18px 22px; }
}

/* ===========================================================
   Hero (gradient noir→bleu)
=========================================================== */
.hero.hero-gradient{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  margin-top:calc(-1 * var(--header-h));
  padding:calc(96px + var(--header-h)) 0 110px;
  display:grid; place-items:center;
  color:#fff;
  background: radial-gradient(150% 120% at 0% 0%,
    #05070c 0%, #0a1224 30%, #0e1b36 55%, #173a7a 78%, #3f73f0 100%);
  overflow:hidden;
}
.hero-v2{ text-align:center; max-width:820px; }

/* Open to work pill */
.otw-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:.45rem .75rem; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#cdebd7; font-weight:600; letter-spacing:.2px;
}

/* Point vert + double halo (1 fixe, 1 pulsé) */
.otw-dot{
  width:10px; height:10px; border-radius:50%;
  background:#2ee47a;
  box-shadow:
    0 0 0 4px rgba(46,228,122,.18),  /* halo fixe */
    0 0 0 0  rgba(46,228,122,.45);  /* halo animé */
  animation: otw-pulse 1.8s ease-out infinite;
}
@keyframes otw-pulse{
  0%{
    box-shadow:
      0 0 0 4px rgba(46,228,122,.18),
      0 0 0 0 rgba(46,228,122,.45);
  }
  70%{
    box-shadow:
      0 0 0 4px rgba(46,228,122,.18),
      0 0 0 12px rgba(46,228,122,0);
  }
  100%{
    box-shadow:
      0 0 0 4px rgba(46,228,122,.18),
      0 0 0 0 rgba(46,228,122,0);
  }
}

.pixel-title{ margin:18px 0 8px; font-size:clamp(48px, 9vw, 120px); line-height:.95; }
.hero-lead{ margin:8px auto 18px; color:rgba(255,255,255,.84); font-size:clamp(16px, 2.2vw, 18px); max-width:720px; }

.hero-actions{ display:flex; gap:12px; justify-content:center; margin:12px 0 8px; }
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:12px; border:1px solid transparent; transition:transform .06s ease, background .2s ease; position:relative; overflow:hidden; --x:50%; --y:50%; }
.btn:active{ transform:translateY(1px); }
.btn-white{ background:#fff; color:#0b1020; }
.btn-dark{ background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.22); }
.btn-white::before{ content:""; position:absolute; right:100%; top:0; width:0; height:0; border:10px solid transparent; border-right-color:#fff; transform:translateX(4px) translateY(4px); }
.btn::after{ content:""; position:absolute; inset:-1px; background:radial-gradient(140px 140px at var(--x) var(--y), rgba(255,255,255,.22), rgba(255,255,255,0) 60%); opacity:0; transition:opacity .18s ease; mix-blend-mode:soft-light; pointer-events:none; }
.btn:hover::after, .btn:focus-visible::after{ opacity:1; }

.hero-socials{ display:flex; gap:12px; justify-content:center; margin-top:14px; }
.hero-socials a{ width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); transition:transform .15s ease, background .2s ease; }
.hero-socials a:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); }
.hero-socials img{ width:20px; height:20px; }

/* ===========================================================
   Sections / grilles / cartes
=========================================================== */
.section{ padding:56px 0; }
.section-head{ margin-bottom:18px; }
.section-title{ font-size:2rem; line-height:1.1; margin:0 0 6px; }

/* Header de section "work" */
.work .section-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; margin:6px 0 18px; }
.work .work-title{ margin:0; font-size:clamp(22px,3.6vw,42px); }
.work .muted{ color:rgba(255,255,255,.72); }
.work .work-link{ position:relative; display:inline-block; padding:10px 14px; color:rgba(255,255,255,.88); }
.work .work-link:hover{ color:#fff; transform:translateY(-1px); }
.work .work-link::before,
.work .work-link::after{ content:""; position:absolute; width:16px; height:16px; pointer-events:none; }
.work .work-link::before{ left:-8px; bottom:-8px; border-left:2px solid rgba(255,255,255,.9); border-bottom:2px solid rgba(255,255,255,.9); }
.work .work-link::after{ right:-8px; top:-8px; border-right:2px solid rgba(255,255,255,.9); border-top:2px solid rgba(255,255,255,.9); }

/* Grille "cartes visuelles" (home style) */
.grid.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:28px; }
.work .card{ grid-column:span 6; position:relative; background:transparent !important; border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .25s ease, box-shadow .25s ease; }
.work .card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.card-media{ display:block; height:clamp(230px, 36vw, 380px); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); transform:scale(1.001); }
.work .card .card-body{
  position:absolute; inset:auto 0 0 0;
  padding:16px 18px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 36%, rgba(0,0,0,.70) 100%);
  color:#fff; border:0; border-radius:0 0 16px 16px; backdrop-filter:blur(2px);
}
.card-title{ margin:2px 0 6px; font-size:1.4rem; }
.card-text{ margin:0; color:rgba(255,255,255,.86); }

/* ===========================================================
   Grille générique de projets / albums
=========================================================== */
.projects-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
.project-item{ grid-column:span 4; background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.project-body{ padding:14px 16px 16px; }
.project-title{ margin:2px 0 4px; font-size:1.25rem; }
.project-text{ margin:0; color:rgba(255,255,255,.9); }

/* Media wrappers — ratios */
.project-media{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background:#0d1322;
}
.project-media.square{     aspect-ratio: 1 / 1; height:auto; }
.project-media.vertical{   aspect-ratio: 9 / 16; height:auto; }
.project-media.horizontal{ aspect-ratio: 16 / 9; height:auto; }

.project-media img,
.project-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Label en bas des vignettes */
.thumb-label{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.78) 100%);
}

/* (facultatif) classes d’appoint pour <video> */
.video-vertical{ width:100%; height:100%; object-fit:cover; }
.video-horizontal{ width:100%; height:100%; object-fit:cover; }

/* CTA */
.cta{ text-align:center; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.cta h2{ margin:0 0 6px; }
.cta p{ margin:0 0 16px; }
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
/* Masque le fond animé (lignes) uniquement dans la CTA de la home */
.cta.no-lines{
  position: relative;
  background: #0b1020;        /* opaque = aucun trait visible derrière */
  isolation: isolate;         /* sécurise l'empilement interne */
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.cta.no-lines > .container{
  position: relative;
  z-index: 1;
}

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.08); padding:28px 0; }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.socials{ list-style:none; display:flex; gap:14px; margin:0; padding:0; }
.socials a{ display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); }
.socials a:hover{ background:rgba(255,255,255,.10); }
.socials img{ width:20px; height:20px; }

/* ===========================================================
   Contact (dark)
=========================================================== */
.contact-wrap{ display:grid; grid-template-columns:1.12fr .88fr; gap:28px; }
.contact-card{ background:var(--card); border:1px solid rgba(255,255,255,.10); border-radius:16px; box-shadow:var(--shadow); padding:18px; }
.contact-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.contact-list li{ display:flex; gap:10px; align-items:center; }
.contact-list a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
form .row-1{ grid-template-columns:1fr; }
label{ font-weight:600; display:block; margin:8px 0 6px; }
input, textarea{
  width:100%; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.18); border-radius:12px;
  background:#0e1423; color:#fff; font:16px/1.5 Poppins, system-ui;
}
textarea{ min-height:140px; resize:vertical; }
.form-actions{ display:flex; gap:12px; align-items:center; margin-top:12px; }
.note{ font-size:.9rem; color:var(--muted) }
.contact-socials{ display:flex; gap:10px; margin-top:8px; }
.contact-socials .social-icon{ width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); }
.contact-socials img{ width:18px; height:18px; }

/* ===========================================================
   BG "lignes"
=========================================================== */
#bg-lines{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.line{ position:absolute; border-radius:1em; animation-duration:var(--bg-line-duration); animation-timing-function:cubic-bezier(.2,.7,.2,1); will-change:transform,opacity; opacity:.9; }
.line-wide{ transform:scaleX(1); animation-name:bg-change-width; }
.line-high{ transform:scaleY(1); animation-name:bg-change-height; }
@keyframes bg-change-width{ 0%{transform:scaleX(0);opacity:0} 100%{transform:scaleX(1);opacity:.9} }
@keyframes bg-change-height{ 0%{transform:scaleY(0);opacity:0} 100%{transform:scaleY(1);opacity:.9} }

/* ===========================================================
   Reveal (fade/slide)
=========================================================== */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* ===========================================================
   Cursor "dot" + ring
=========================================================== */
.cursor{
  position:fixed; left:0; top:0;
  width:16px; height:16px; border-radius:50%;
  pointer-events:none; z-index:10000;
  background:#fff; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  /* on n’anime plus le transform en CSS, le JS animera left/top */
  transition: opacity .15s ease;
  will-change: left, top;
}

.cursor.click{ transform:translate(-50%,-50%) scale(1.35); }
.cursor.hidden{ opacity:0; }
.cursor.hover{ transform:translate(-50%,-50%) scale(1.15); }

.cursor-ring{
  position:fixed; left:0; top:0; width:26px; height:26px; border-radius:50%;
  border:1.8px solid #fff; pointer-events:none; z-index:10000; mix-blend-mode:difference;
  --s:0; --b:1; transform:translate(-50%,-50%) scale(calc(var(--s)*var(--b))); opacity:var(--s);
}

/* ===========================================================
   Lightbox
=========================================================== */
.lightbox{
  position: fixed;
  inset: 0;
  display: none !important;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.82);
  z-index: 3000;
}
.lightbox.active{ display: flex !important; }
.lightbox img{
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,.6);
}
.lightbox-close{
  position: absolute; top: 14px; right: 18px;
  font-size: 28px; color:#fff; cursor: pointer; user-select: none;
}
.lightbox-controls{
  position: absolute; inset: auto 0 24px 0;
  display: flex; gap: 12px; justify-content: center;
}
.lightbox-btn{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff; width:42px; height:42px; border-radius:10px; font-size:18px;
}

/* ===========================================================
   Responsive
=========================================================== */
@media (max-width: 1100px){
  .work .card{ grid-column:span 12; }
}
@media (max-width: 900px){
  .projects-grid{ grid-template-columns:repeat(6,1fr); }
  .project-item{ grid-column:span 6; }
  .contact-wrap{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .grid.cards{ grid-template-columns:repeat(6,1fr); gap:18px; }
  .projects-grid{ grid-template-columns:repeat(6,1fr); gap:18px; }
  .project-item{ grid-column:span 6; }
  .hero-actions{ flex-direction:column; }
}

/* Carte mise en avant (≈2.5x plus large → 10 colonnes sur 12) */
.project-item.xl { grid-column: span 10; }
@media (max-width: 1100px){ .project-item.xl { grid-column: span 12; } }
@media (max-width: 900px){  .project-item.xl { grid-column: span 6;  } }
@media (max-width: 640px){  .project-item.xl { grid-column: span 6;  } }

/* Flou en dégradé (net en haut → flou en bas) sur les albums */
.project-media.square::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:clamp(90px, 28%, 160px);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  background: rgba(5,7,12,.35);
  mask-image: linear-gradient(to top,
               rgba(0,0,0,1) 0%,
               rgba(0,0,0,.85) 35%,
               rgba(0,0,0,.45) 65%,
               rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top,
               rgba(0,0,0,1) 0%,
               rgba(0,0,0,.85) 35%,
               rgba(0,0,0,.45) 65%,
               rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:1;
}
/* le libellé reste au-dessus */
.thumb-label{
  position:absolute; left:0; right:0; bottom:0;
  padding:12px 14px 14px;
  z-index:2;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.28) 70%,
    rgba(0,0,0,.50) 100%);
}

/* Matériel — flou dégradé en bas de l’image (net → flou) */
.equip-media,
.equip-media-inner{ position: relative; overflow: hidden; }
.equip-media::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:clamp(80px, 28%, 150px);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  background: rgba(5,7,12,.35);
  mask-image: linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.45) 65%,
    rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 35%,
    rgba(0,0,0,.45) 65%,
    rgba(0,0,0,0) 100%);
  pointer-events:none;
  z-index:1;
}
.equip-media img,
.equip-media-inner img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===== Compétences : une ligne par logiciel + révélation droite ===== */
.skill-logo{
  flex:0 0 auto;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#121826;
  border:1px solid #263147;
  overflow:hidden;
}
.skill-logo img{ width:72%; height:72%; object-fit:contain; display:block; }
/* Compétences */
.skills-stack{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }

.skill-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:14px;
  background:#0f1421;                 /* OPAQUE → les lignes de fond ne traversent plus */
  border:1px solid #1f2740;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  overflow:hidden; position:relative; isolation:isolate;
}
.skill-row:hover,.skill-row:focus-within{ background:#121a2b; border-color:#2a3553; }

.skill-logo{
  flex:0 0 auto; width:56px; height:56px; display:grid; place-items:center;
  border-radius:12px; background:#121826; border:1px solid #263147; overflow:hidden;
}
.skill-logo img{ width:72%; height:72%; object-fit:contain; display:block; }

/* ⚠️ visible par défaut : le JS se charge juste d’animer */
.skill-text{ overflow:hidden; }
.skill-title{ margin:0 0 2px; font-size:1.15rem; }
.skill-desc{ margin:0; color:rgba(255,255,255,.88); }

/* Reveal (utilisé sur .container.reveal de about.html) */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* Cartes Compétences OPAQUES — uniquement sur la page À propos */
body.page-about .skills-section,
body.page-about .skills-section .skills-stack{ background:transparent !important; }
body.page-about .skills-section .skill-row{
  position:relative;
  background:#0f1421 !important;
  border:1px solid #1f2740 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  isolation:isolate;
}
body.page-about .skills-section .skill-row:hover,
body.page-about .skills-section .skill-row:focus-within{
  background:#121a2b !important;
  border-color:#2a3553 !important;
}
body.page-about .skills-section .skill-logo{
  background:#121826 !important;
  border:1px solid #263147 !important;
}
/* Masque le fond animé derrière le footer */
.site-footer.no-lines{
  position: relative;
  background: #060912;   /* fond opaque */
  isolation: isolate;    /* évite les mélanges avec #bg-lines */
}

/* S'assure que le contenu passe au-dessus */
.site-footer.no-lines > .container{
  position: relative;
  z-index: 1;
}
/* --- Sticky footer layout --- */
html, body { height: 100%; }              /* déjà présent : OK */
body{
  min-height: 100vh;                      /* assure au moins la hauteur écran */
  display: flex;                          /* <main> prend l'espace restant */
  flex-direction: column;
  /* garde ton padding-top existant pour compenser le header fixe */
  /* padding-top: var(--header-h);  ← tu l'as déjà, ne le duplique pas */
}
main { flex: 1 0 auto; }                  /* pousse le footer en bas */
.site-footer { flex-shrink: 0; }          /* le footer ne rétrécit pas */
/* ===== Bloc À propos : plus grand (texte + photo) ===== */
.about-block{
  display:grid;
  grid-template-columns: 1.3fr .7fr;   /* plus de place pour le texte */
  gap: 28px;
  align-items: stretch;
  background: var(--card);             /* opaque → pas de lignes en dessous */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.about-text{
  padding: 28px 28px 26px;
}

.about-block .section-title{
  /* titre nettement plus grand */
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1.02;
  margin: 4px 0 10px;
}

.about-text p{
  font-size: clamp(1rem, 1.9vw, 1.12rem);  /* texte un peu plus grand */
  line-height: 1.75;
  margin: 0 0 14px;
  color: rgba(255,255,255,.92);
}

.about-photo{
  position: relative;
  min-height: 420px;                   /* bloc global plus “présent” */
  background: #0d1322;
}

.about-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive : pile sur mobile, image en dessous */
@media (max-width: 900px){
  .about-block{
    grid-template-columns: 1fr;
  }
  .about-text{
    padding: 20px 18px;
  }
  .about-photo{
    height: 300px;
    min-height: 0;
  }
  .about-block .section-title{
    font-size: clamp(2rem, 10vw, 3rem);
  }
}
/* === Agrandir Compétences (noms + textes) — page À propos === */
.page-about .skill-row{ padding:14px 16px; }
.page-about .skill-title{
  font-size: clamp(1.25rem, 2.4vw, 1.8rem); /* +grand pour les noms (Premiere Pro, etc.) */
  letter-spacing: .2px;
}
.page-about .skill-desc{
  font-size: clamp(1rem, 1.9vw, 1.15rem);   /* descriptif un peu plus grand aussi */
  line-height: 1.6;
  color: rgba(255,255,255,.92);
}

/* (optionnel) si tu veux donner un poil plus de présence à l’icône */
.page-about .skill-logo{ width:64px; height:64px; }

/* === Agrandir “Matériel” (noms des matériels) — page À propos === */
.page-about .project-title{
  font-size: clamp(1.3rem, 2.2vw, 1.75rem); /* titres sous les cartes Matériel */
  line-height: 1.25;
}

/* Etiquette en bas des vignettes (Sony A7 IV, etc.) un peu plus lisible */
.page-about .thumb-label{
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  padding: 14px 16px 16px;
}