/* Denis Frech — feuille de style (extraite du prototype une-page) */

  :root{
    --red:#E24B4A; --red-dark:#791F1F; --black:#111111; --white:#ffffff;
    --grey-bg:#F4F4F2; --text-secondary:#6b6b6b; --border:#e3e3e1;
    --surtitre:#837870;
    --font-serif:'Playfair Display', Georgia, serif;
    --font-sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:'Space Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{font-family:var(--font-sans); color:var(--black); background:var(--white); -webkit-font-smoothing:antialiased;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
  h1,h2,h3{font-family:var(--font-serif); margin:0; line-height:1.05;}
  .eyebrow{font-family:var(--font-serif); font-style:normal; color:var(--red); font-size:20px; letter-spacing:.02em; margin-bottom:6px;}
  .btn{display:inline-block; padding:14px 28px; background:var(--black); color:var(--white); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; border-radius:2px; transition:transform .25s ease, background .25s ease;}
  .btn:hover{background:var(--red); transform:translateY(-2px);}

  /* ---------- Bandeau debug (à retirer en version finale) ---------- */

  /* ---------- Header ---------- */
  header.site{position:relative; z-index:5; background:var(--white); border-bottom:1px solid var(--border);}
  header.site .wrap{display:flex; align-items:center; justify-content:center; gap:64px; height:84px;}
  .logo{font-family:var(--font-serif); font-weight:700; font-size:22px; letter-spacing:.01em; color:var(--black); text-decoration:none;}
  nav.main{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
  nav.main a{color:var(--black); text-decoration:none; font-size:14px; font-weight:600; letter-spacing:.02em; opacity:.55; transition:opacity .2s;}
  nav.main a:hover{opacity:1;}
  .menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; border:none; background:none; cursor:pointer;}
  .menu-toggle span{display:block; width:100%; height:2px; background:var(--black); transition:transform .25s ease, opacity .25s ease;}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .mobile-nav{display:none;}

  .section{position:relative; z-index:1; background:var(--white);}
  #hero{min-height:calc(100vh - 85px - 110px); display:flex; align-items:center;}
  .section-pad{padding:160px 0;}

  /* ---------- Parallax : page de fond (2 images) plus lente que la page d'avant-plan (blocs + trous) ---------- */
  .parallax-bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--black);}
  .parallax-bg-inner{position:relative; width:100%; height:100%; will-change:transform;}
  .bg-slot{position:absolute; left:0; width:100%; height:100vh; background-size:cover; background-position:center;}
  .trou{position:relative; z-index:1; background:transparent; height:90vh;}
  @media (max-width:800px){ .trou{height:65vh;} }

  /* ---------- Hero ---------- */
  .hero{padding:40px 0; text-align:center;}
  .hero h1{font-size:130px; margin:20px 0 70px;}
  .hero p.lead{margin:0 auto 28px; color:var(--text-secondary); font-size:16px;}
  .social{display:flex; gap:14px; justify-content:center; margin:22px 0;}
  .social a{width:38px; height:38px; border-radius:50%; background:var(--black); display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; font-size:14px;}
  .meta-row{display:flex; justify-content:space-between; font-size:13px; font-weight:500; color:var(--text-secondary); position:absolute; left:50%; bottom:32px; transform:translateX(-50%); width:100vw; box-sizing:border-box; padding:0 40px; margin:0;}

  /* ---------- Grille compétences ---------- */
  .skills-grid{display:grid; grid-template-columns:repeat(6,1fr); row-gap:40px; column-gap:24px;}
  .skill-card{background:none; padding:0; text-align:center; cursor:pointer;}
  .skill-icon{width:52px; height:52px; margin:0 auto 26px; color:#9a9a9a;}
  .skill-icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}
  .skill-card h3{font-size:15px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 12px; font-family:var(--font-sans); font-weight:700;}
  .skill-card p{font-size:12px; color:var(--red); line-height:1.6; margin:0;}

  /* ---------- Motivation ---------- */
  .motivation{text-align:center; margin:0 auto;}
  .motivation h2{font-size:58px; margin:0 0 30px;}
  .motivation p{color:var(--text-secondary); line-height:2; font-size:16px; text-align:justify;}

  /* ---------- A propos ---------- */
  .about-stack{display:flex; flex-direction:column; align-items:center; text-align:center; gap:40px;}
  .about-photo-center{width:100%; max-width:820px; aspect-ratio:1.5894/1; object-fit:cover; object-position:center; background:var(--grey-bg); border-radius:4px; filter:grayscale(1);}
  .about-text-center{width:100%;}
  .about-text-center h2{font-size:64px; margin-bottom:20px;}
  .about-text-center p{color:var(--text-secondary); line-height:1.7; margin-bottom:0; font-size:16px; text-align:justify;}
  .clients-marquee{width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; display:flex; flex-direction:column; gap:56px; overflow:hidden;}
  .marquee-row{width:100%; overflow:hidden;}
  .marquee-track{display:flex; align-items:center; gap:90px; width:max-content; animation-name:marquee-scroll; animation-timing-function:linear; animation-iteration-count:infinite;}
  .marquee-logo{flex:0 0 auto; display:flex; align-items:center; justify-content:center;}
  .marquee-logo img{height:100px; width:auto; object-fit:contain; filter:grayscale(1);}
  .marquee-logo.logo-lg img{height:130px;}
  .marquee-logo.logo-sm img{height:72px;}
  @keyframes marquee-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

  /* ---------- Gros logo ---------- */
  .clients-section{text-align:center; padding-top:60px; padding-bottom:40px;}

  /* ---------- Projets ---------- */
  #projets{padding-top:100px; padding-bottom:100px;}
  .projects-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .project-tile{position:relative; aspect-ratio:16/10; background:var(--grey-bg); overflow:hidden; cursor:pointer;}
  .project-tile img.skill-tile-logo{position:absolute; top:14px; left:14px; height:26px; width:auto; background:#fff; padding:5px; border-radius:4px; transition:none;}
  .project-tile .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 16px; background:linear-gradient(transparent,rgba(0,0,0,.7)); color:#fff; font-size:24px; font-weight:700; text-shadow:2px 2px 6px rgba(0,0,0,.75);}
  @media (max-width:800px){ .projects-grid{grid-template-columns:1fr;} }

  /* ---------- Galerie carrousel (trou rectangulaire + morph) ---------- */
  .carousel-section{text-align:center;}
  .carousel-frame{position:relative; width:min(960px,100%); aspect-ratio:16/12; margin:48px auto 0; border-radius:24px; overflow:hidden; background:var(--grey-bg);}
  .carousel-panel{position:absolute; inset:0; display:flex; flex-direction:column; padding:28px; gap:16px; color:#fff; opacity:0; transform:scale(.55); transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); pointer-events:none;}
  .carousel-panel.is-active{opacity:1; transform:scale(1); pointer-events:auto;}
  .panel-screen{flex:1 1 auto; background:#000; border-radius:0; border:1px solid rgba(0,0,0,.35); display:flex; align-items:flex-end; padding:22px; text-align:left;}
  .carousel-panel h3{font-family:var(--font-sans); color:#fff; font-size:42px; font-weight:700; margin-bottom:6px; text-shadow:2px 2px 6px rgba(0,0,0,.75);}
  .carousel-panel span{font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; opacity:.7;}
  .carousel-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; flex:0 0 auto;}
  .carousel-thumbs div{aspect-ratio:5/2; background:rgba(255,255,255,.16); border-radius:0; outline:1px solid var(--black); outline-offset:-1px; transition:outline-color .15s;}
  .carousel-dots{display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between; margin:22px auto 0; width:min(960px,100%);}
  .carousel-dots button{flex:1 1 0; min-width:0; border:none; background:none; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-secondary); cursor:pointer; padding:6px 4px; border-bottom:2px solid transparent; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;}
  .carousel-dots .dot-label{display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; word-break:break-word; line-height:1.35;}
  .carousel-dots button svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2;}
  .carousel-dots button.is-active{color:var(--black); border-color:var(--red); font-weight:700;}
  .panel-screen{position:relative;}
  .panel-screen > div{width:100%;}
  .panel-skill-tag{color:#fff; font-size:12px; font-weight:700; letter-spacing:.04em; margin-bottom:6px; text-shadow:2px 2px 6px rgba(0,0,0,.75);}
  .panel-desc{font-family:var(--font-sans); font-size:14px; color:#fff; margin-top:6px; line-height:1.5; max-width:none; text-shadow:2px 2px 6px rgba(0,0,0,.75);}
  .carousel-thumbs div[data-img]{cursor:pointer; background-size:cover; background-position:center; transition:outline-color .15s;}
  .carousel-thumbs div:not([data-img]){display:none;}
  .carousel-thumbs div.is-active{outline:1px solid var(--red); outline-offset:-1px;}
  .screen-arrow{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff; cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center; z-index:2; pointer-events:auto;}
  .screen-arrow:hover{background:rgba(255,255,255,.2);}
  .screen-arrow.prev{left:14px;}
  .screen-arrow.next{right:14px;}

  /* ---------- Contact ---------- */
  .contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:32px 56px; justify-content:center;}
  .contact-form{min-width:0;}
  .contact-message{grid-column:1 / -1; min-width:0;}
  .contact-form label, .contact-message label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; color:var(--text-secondary);}
  .contact-form input, .contact-message textarea{width:100%; max-width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--border); background:var(--grey-bg); font-family:var(--font-sans); font-size:14px; margin-bottom:18px;}
  .contact-message textarea{resize:vertical;}
  .contact-info div{margin-bottom:18px;}
  .contact-info b{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); margin-bottom:4px;}

  /* ---------- Footer ---------- */
  footer.site{position:relative; z-index:1; background:var(--black); color:#fff; text-align:center; padding:32px 0; font-size:13px;}
  footer.site a{color:#fff;}
  footer.site .footer-nav a{color:var(--red); text-decoration:none;}

  @media (max-width:800px){
    .hero h1{font-size:46px;}
    .motivation h2{font-size:38px;}
    .about-text-center h2{font-size:34px;}
    .skills-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .projects-grid{grid-template-columns:repeat(2,1fr);}
    .clients-marquee{gap:36px;}
    .marquee-track{gap:50px;}
    .marquee-logo img{height:64px;}
    .marquee-logo.logo-lg img{height:84px;}
    .marquee-logo.logo-sm img{height:46px;}
    .carousel-thumbs{grid-template-columns:repeat(3,1fr);}
    nav.main{display:none;}
    .carousel-frame{aspect-ratio:3/4;}
    .panel-screen{padding:14px;}
    .carousel-panel h3{font-size:24px;}
    .panel-skill-tag{font-size:10px;}
    .panel-desc{font-size:12px; line-height:1.4;}

    header.site .wrap{justify-content:space-between;}
    .menu-toggle{display:flex;}
    .mobile-nav{position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:1px solid var(--border); box-shadow:0 12px 24px rgba(0,0,0,.08); flex-direction:column; padding:8px 32px 20px;}
    .mobile-nav.is-open{display:flex;}
    .mobile-nav a{color:var(--black); text-decoration:none; font-size:15px; font-weight:600; letter-spacing:.02em; padding:14px 0; border-bottom:1px solid var(--border);}
    .mobile-nav a:last-child{border-bottom:none;}

    .hero{padding:60px 0;}
    .hero .eyebrow{position:static !important; transform:none !important; white-space:normal !important; font-size:16px !important; margin:0 0 14px !important;}
    .hero h1{position:static !important; transform:none !important; white-space:normal !important; margin:0 0 22px !important;}
    .hero h1 img, .hero h1 span[aria-hidden]{display:none;}
    .hero p.lead{position:static !important; transform:none !important; margin:0 auto 22px !important; max-width:320px;}
    .meta-row{position:static !important; transform:none !important; left:auto !important; bottom:auto !important; width:100% !important; flex-direction:column; gap:8px; padding:0 !important;}
    .meta-row span{font-size:18px !important;}

    .carousel-dots{justify-content:center;}
    .carousel-dots button{flex:0 0 calc(33.333% - 8px);}
    .carousel-dots .dot-label{-webkit-line-clamp:4; font-size:10px;}
  }