/* ===== Panache Production — design system ===== */

@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-display-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-display-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-display-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-display-latin-700-italic.woff2') format('woff2');font-weight:700;font-style:italic;}
@font-face{font-family:'Playfair Display';src:url('assets/fonts/playfair-display-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');font-weight:400;}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-500-normal.woff2') format('woff2');font-weight:500;}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2');font-weight:600;}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');font-weight:700;}

:root{
  --ink:        #141311;   /* near-black, warm */
  --paper:      #ECEBE7;   /* brand cream */
  --paper-dim:  #E2E0D9;
  --cloud:      #EDEAE2;   /* warm off-white text-on-dark */
  --teal:       #1B9C8A;
  --orange:     #EE7150;
  --line-dark:  rgba(237,234,226,0.16);
  --line-light: rgba(20,19,17,0.14);
  --gray:       #6B6B63;
  --serif: 'Playfair Display', serif;
  --sans:  'DM Sans', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--sans);
  background: var(--ink);
  color: var(--cloud);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 65% 55% at 12% -8%, rgba(27,156,138,0.20), transparent 60%),
    radial-gradient(ellipse 55% 45% at 105% 25%, rgba(238,113,80,0.11), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 105%, rgba(27,156,138,0.10), transparent 60%);
}
.nav, section, footer{ position:relative; z-index:1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.container{ max-width:1240px; margin:0 auto; padding:0 48px; }
@media (max-width:720px){ .container{ padding:0 24px; } }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 48px;
  mix-blend-mode:normal;
  transition:background .3s ease, padding .3s ease;
}
.nav.scrolled{ background:rgba(15,14,13,0.98); padding:16px 48px; border-bottom:1px solid var(--line-dark); }
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand svg{ width:30px; height:30px; flex-shrink:0; }
.nav-brand .word{ font-family:var(--serif); font-weight:700; font-size:17px; letter-spacing:0.2px; color:var(--cloud); }
.nav-links{ display:flex; align-items:center; gap:40px; }
.nav-links a{ font-size:14px; color:var(--cloud); opacity:0.82; position:relative; }
.nav-links a:hover{ opacity:1; }
.nav-links a.current{ opacity:1; }
.nav-links a.current::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--orange); }
.nav-cta{ font-size:13px; padding:10px 20px; border:1px solid rgba(237,234,226,0.35); border-radius:100px; }
.nav-cta:hover{ border-color:var(--cloud); }
.nav-toggle{ display:none; }

@media (max-width:860px){
  .nav{ flex-wrap:wrap; row-gap:14px; padding:20px 24px; align-items:flex-start; }
  .nav-links{
    order:3; width:100%; gap:20px; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:2px; scrollbar-width:none;
    touch-action:pan-x; overscroll-behavior-x:contain;
    max-height:60px; opacity:1;
    transition:max-height .25s ease, opacity .2s ease, margin .25s ease;
  }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ white-space:nowrap; flex-shrink:0; }
  .nav-cta{ font-size:12px; padding:8px 16px; }

  /* Version compacte du menu au defilement : la ligne de liens se replie */
  .nav.scrolled{ row-gap:0; padding:14px 24px; }
  .nav.scrolled .nav-links{
    max-height:0; opacity:0; overflow:hidden;
    margin-top:0; padding-bottom:0; pointer-events:none;
  }
}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:600; letter-spacing:0.2px;
  padding:15px 28px; border-radius:100px;
  background:var(--orange); color:var(--ink);
  border:1px solid var(--orange);
  transition:transform .25s ease, background .25s ease;
}
.btn:hover{ background:#f68765; }
.btn.outline{ background:transparent; color:var(--cloud); border-color:rgba(237,234,226,0.4); }
.btn.outline:hover{ border-color:var(--cloud); }
.btn.on-light{ color:var(--paper); background:var(--ink); border-color:var(--ink); }
.btn.on-light:hover{ background:#2a2823; }
.link-arrow{ font-size:14px; border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---------- Section rhythm ---------- */
section{ position:relative; }
.section{ padding:140px 0; }
@media (max-width:860px){ .section{ padding:90px 0; } }
.section.tight{ padding:90px 0; }
.on-paper{ background:var(--paper); color:var(--ink); }
.on-paper .gray{ color:var(--gray); }
.on-ink{ background:transparent; color:var(--cloud); }

.eyebrow{ font-family:var(--sans); font-size:13px; color:var(--orange); font-weight:600; margin-bottom:18px; }
h1,h2,h3{ font-family:var(--serif); font-weight:700; line-height:1.18; }
h2{ font-size:46px; letter-spacing:-0.2px; }
h3{ font-size:26px; }
p{ line-height:1.65; }
.lede{ font-size:19px; line-height:1.6; max-width:640px; color:var(--gray); }
.on-ink .lede{ color:rgba(237,234,226,0.72); }

@media (max-width:720px){ h2{ font-size:34px; } }

/* ---------- Placeholder visuals (brand gradient, stand-in for real photos) ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:2px;
  background: linear-gradient(135deg,#1B9C8A 0%, #114f47 38%, #141311 62%, #b5502f 100%);
}
.ph::after{
  content:attr(data-label);
  position:absolute; left:16px; bottom:14px;
  font-family:var(--sans); font-size:11px; letter-spacing:0.4px;
  color:rgba(237,234,226,0.55);
}
.ph::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), transparent 55%);
}

/* ---------- Footer ---------- */
.footer{ padding:80px 0 40px; border-top:1px solid var(--line-dark); }
.footer-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:60px; }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-brand svg{ width:40px; height:40px; }
.footer-brand .word{ font-family:var(--serif); font-weight:700; font-size:22px; }
.footer-cols{ display:flex; gap:80px; flex-wrap:wrap; }
.footer-col h4{ font-size:12px; letter-spacing:0.5px; color:rgba(237,234,226,0.5); margin-bottom:16px; font-weight:600; }
.footer-col a, .footer-col p{ display:block; font-size:14.5px; color:var(--cloud); opacity:0.85; margin-bottom:10px; }
.footer-col a:hover{ opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; font-size:12.5px; color:rgba(237,234,226,0.45); flex-wrap:wrap; gap:10px; }

/* ---------- Misc ---------- */
.hr{ height:1px; background:var(--line-dark); border:none; }
.on-paper .hr{ background:var(--line-light); }

/* ===== Home ===== */
.hero{ min-height:100vh; display:flex; align-items:flex-end; padding-bottom:110px; }
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 60% at 20% 0%, rgba(27,156,138,0.22), transparent 60%),
    radial-gradient(ellipse 70% 55% at 100% 30%, rgba(238,113,80,0.16), transparent 60%),
    var(--ink);
}
.hero-inner{ position:relative; padding-top:160px; }
.hero h1{ font-size:76px; max-width:820px; margin:20px 0 26px; }
.hero h1 em{ font-style:italic; color:var(--orange); }
.hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }
@media (max-width:720px){ .hero h1{ font-size:44px; } }

.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px; }
.cat-card{ display:block; }
.cat-img{ aspect-ratio:3/4; margin-bottom:16px; transition:transform .4s ease; }
.cat-card:hover .cat-img{ transform:translateY(-4px); }
.cat-meta h3{ font-size:18px; margin-bottom:6px; }
.cat-meta p{ font-size:13.5px; color:rgba(237,234,226,0.6); line-height:1.5; }
@media (max-width:960px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

.about-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:80px; align-items:center; }
.about-img-wrap{ max-width:360px; margin-left:auto; }
.checklist{ margin-top:28px; display:flex; flex-direction:column; gap:14px; }
.checklist li{ padding-left:26px; position:relative; font-size:15px; color:var(--ink); }
.checklist li::before{ content:''; position:absolute; left:0; top:8px; width:12px; height:1px; background:var(--orange); }
.about-img{ aspect-ratio:4/5; width:100%; object-fit:cover; border-radius:4px; position:relative; z-index:1; }
.about-img-wrap{ position:relative; }
.about-img-frame{
  position:absolute; z-index:0;
  top:36px; left:36px; right:-36px; bottom:-36px;
  border:2px solid var(--teal);
  border-radius:4px;
}
@media (max-width:860px){ .about-img-frame{ top:20px; left:20px; right:-20px; bottom:-20px; } }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:40px; } .about-img-wrap{ order:-1; max-width:300px; margin:0 auto; } }

.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:44px 50px; margin-top:50px; }
.svc h3{ margin-bottom:14px; }
.svc p{ font-size:15px; line-height:1.6; }
@media (max-width:860px){ .svc-grid{ grid-template-columns:1fr; gap:36px; } }

.svc-list{ margin-top:50px; border-top:1px solid var(--line-dark); }
.svc-row{
  display:grid; grid-template-columns:70px 260px 1fr; align-items:start; gap:36px;
  padding:38px 0; border-bottom:1px solid var(--line-dark);
  transition:background .25s ease;
}
.svc-row:hover{ background:rgba(237,234,226,0.03); }
.svc-num{
  font-family:var(--serif); font-style:italic; font-weight:700;
  font-size:28px; color:var(--orange); opacity:0.85; line-height:1;
  padding-top:4px;
}
.svc-title{ font-size:24px; }
.svc-desc{ font-size:15px; line-height:1.65; color:rgba(237,234,226,0.68); max-width:560px; }
@media (max-width:760px){
  .svc-row{ grid-template-columns:40px 1fr; }
  .svc-title{ grid-column:2; }
  .svc-desc{ grid-column:1 / -1; margin-top:8px; }
}

.quote-layout{ margin-top:56px; display:grid; grid-template-columns:1.3fr 1fr; gap:70px; align-items:start; }
.quote-featured{ position:relative; padding-left:8px; }
.quote-mark{
  display:block; font-family:var(--serif); font-size:110px; line-height:0.6;
  color:var(--orange); opacity:0.35; margin-bottom:6px;
}
.quote-featured blockquote{
  font-family:var(--serif); font-size:30px; font-style:italic; font-weight:700;
  line-height:1.38; color:var(--ink);
}
.quote-featured-name{ margin-top:22px; font-size:14px; font-weight:600; }
.quote-rest{ display:flex; flex-direction:column; }
.quote-row{ padding:22px 0; border-top:1px solid var(--line-light); }
.quote-row:last-child{ border-bottom:1px solid var(--line-light); }
.quote-row-text{ font-size:14.5px; line-height:1.55; color:#3d3d3b; margin-bottom:10px; }
.quote-row-name{ font-size:12.5px; font-weight:600; }
@media (max-width:860px){
  .quote-layout{ grid-template-columns:1fr; gap:40px; }
  .quote-featured blockquote{ font-size:24px; }
}

.cta-section .container{ text-align:center; }
.cta-inner{ display:flex; flex-direction:column; align-items:center; }
.cta-inner .lede{ margin:18px 0 10px; text-align:center; }

/* ===== Réalisations ===== */
.real-hero{ padding-top:190px; padding-bottom:40px; }
.page-title{ font-size:58px; margin:16px 0 20px; }
@media (max-width:720px){ .page-title{ font-size:38px; } }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; }
.filter-btn{
  font-family:var(--sans); font-size:13.5px; color:var(--cloud);
  background:transparent; border:1px solid var(--line-dark);
  padding:9px 18px; border-radius:100px; cursor:pointer;
  transition:all .2s ease;
}
.filter-btn:hover{ border-color:rgba(237,234,226,0.5); }
.filter-btn.active{ background:var(--cloud); color:var(--ink); border-color:var(--cloud); }

.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.proj-img{ aspect-ratio:16/9; margin-bottom:16px; }
.proj-card.ratio-4-5 .proj-img{ aspect-ratio:4/5; }
.proj-meta span{ font-size:12px; color:rgba(237,234,226,0.5); }
.proj-meta h3{ font-size:18px; margin-top:4px; }
@media (max-width:960px){ .proj-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .proj-grid{ grid-template-columns:1fr; } }

/* ===== Tarifs / devis builder ===== */
.gray-on-ink{ color:rgba(237,234,226,0.55); }
.devis-layout{ display:grid; grid-template-columns:1fr 360px; gap:70px; align-items:start; }
.devis-block{ margin-bottom:54px; }
.devis-block h3{ margin-bottom:8px; }
.block-note{ font-size:14px; margin-bottom:22px; max-width:520px; }

.opt-list{ display:flex; flex-direction:column; border-top:1px solid var(--line-dark); }
.opt-row{
  display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:18px;
  padding:18px 4px; border-bottom:1px solid var(--line-dark);
  cursor:pointer;
}
.opt-row input[type="radio"], .opt-row input[type="checkbox"]{
  width:18px; height:18px; accent-color:var(--orange); cursor:pointer;
}
.opt-title{ display:block; font-size:15.5px; font-weight:500; }
.opt-sub{ display:block; font-size:13px; color:rgba(237,234,226,0.5); margin-top:4px; }
.opt-price{ font-family:var(--serif); font-weight:700; font-size:17px; white-space:nowrap; }
.opt-price .unit{ font-family:var(--sans); font-weight:500; font-size:12.5px; color:rgba(237,234,226,0.5); }
.hours-input{
  width:70px; padding:8px 10px; border-radius:6px; border:1px solid var(--line-dark);
  background:transparent; color:var(--cloud); font-family:var(--sans); font-size:14px; justify-self:end;
}

.devis-summary{ position:sticky; top:110px; }
.summary-card{
  background:rgba(237,234,226,0.04); border:1px solid var(--line-dark);
  border-radius:16px; padding:30px;
}
.summary-card h4{ font-family:var(--serif); font-size:20px; margin-bottom:18px; }
.summary-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; min-height:24px; }
.summary-list li{ display:flex; justify-content:space-between; font-size:13.5px; gap:12px; }
.summary-empty{ color:rgba(237,234,226,0.45); }
.summary-total{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-top:18px; border-top:1px solid var(--line-dark);
  font-family:var(--serif); font-weight:700; font-size:22px;
}
.summary-total span:first-child{ font-family:var(--sans); font-weight:600; font-size:14px; }
.summary-note{ font-size:12px; color:rgba(237,234,226,0.45); margin-top:14px; line-height:1.5; }

@media (max-width:960px){
  .devis-layout{ grid-template-columns:1fr; }
  .devis-summary{ position:static; }
}

/* ===== Contact ===== */
.contact-layout{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:80px; }
.contact-form{ display:flex; flex-direction:column; gap:24px; }
.contact-form label{ display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:rgba(237,234,226,0.6); }
.contact-form input, .contact-form textarea{
  font-family:var(--sans); font-size:15px; color:var(--cloud);
  background:transparent; border:1px solid var(--line-dark); border-radius:8px;
  padding:14px 16px; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--orange); }
.contact-form button{ align-self:flex-start; border:none; cursor:pointer; }

.contact-info{ display:flex; flex-direction:column; gap:36px; }
.contact-info h4{ font-size:12px; letter-spacing:0.5px; color:rgba(237,234,226,0.5); margin-bottom:10px; font-weight:600; }
.contact-info a, .contact-info p{ font-size:16px; }
.contact-info a{ display:block; margin-bottom:4px; }

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

/* ===== Matériel ===== */
.mat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px 70px; }
.mat-block h3{ font-size:20px; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line-dark); }
.mat-list{ display:flex; flex-direction:column; }
.mat-row{
  display:grid; grid-template-columns:200px 1fr; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line-dark);
  font-size:14.5px;
}
.mat-row:last-child{ border-bottom:none; }
.mat-role{ color:rgba(237,234,226,0.5); }
.mat-item{ color:var(--cloud); }
@media (max-width:860px){
  .mat-grid{ grid-template-columns:1fr; gap:40px; }
  .mat-row{ grid-template-columns:1fr; gap:4px; }
}



/* ===== Main tabs (Réalisations: Vidéo / Photo) ===== */
.main-tabs{ display:flex; gap:8px; margin-bottom:40px; border-bottom:1px solid var(--line-dark); }
.main-tab{
  font-family:var(--serif); font-size:20px; font-weight:700; color:rgba(237,234,226,0.45);
  background:none; border:none; cursor:pointer;
  padding:0 0 18px; margin-right:34px; position:relative;
}
.main-tab.active{ color:var(--cloud); }
.main-tab.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange); }
.main-tab:hover{ color:var(--cloud); }

/* ===== Form status ===== */
.form-status{ font-size:13.5px; margin-top:4px; min-height:18px; }
.form-status.success{ color:var(--teal); }
.form-status.error{ color:var(--orange); }

/* ===== Mentions légales ===== */
.legal-content{ max-width:760px; }
.legal-content h3{ font-size:19px; margin:44px 0 14px; }
.legal-content h3:first-child{ margin-top:0; }
.legal-content p{ font-size:15px; line-height:1.7; color:rgba(237,234,226,0.72); margin-bottom:14px; }
.legal-content a{ text-decoration:underline; text-underline-offset:2px; }
.legal-todo{
  font-size:13px; color:var(--orange); font-style:italic;
  border-left:2px solid var(--orange); padding-left:12px;
}

.opt-price .opt-from{ display:block; font-family:var(--sans); font-weight:500; font-size:11px; color:rgba(237,234,226,0.5); margin-bottom:2px; }

/* ===== Video cards (YouTube thumbnails) ===== */
.proj-img.yt-thumb{
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.proj-img.yt-thumb::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
}
.play-btn{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:50%;
  background:rgba(20,19,17,0.72); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.play-btn svg{ width:22px; height:22px; color:#fff; margin-left:3px; }
.proj-card:hover .play-btn{ transform:scale(1.08); background:var(--orange); }

.proj-card.ratio-9-16 .proj-img{ aspect-ratio:9/16; }

/* real <img> photo cards */
img.proj-img{ width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:16px; border-radius:2px; }

/* ===== Video lightbox ===== */
.video-lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,10,9,0.92);
  display:none; align-items:center; justify-content:center;
  padding:40px;
}
.video-lightbox.open{ display:flex; }
.video-lightbox-inner{ position:relative; width:100%; max-width:1000px; }
.video-lightbox-inner.vertical{ max-width:400px; }
.video-lightbox-inner.vertical .video-lightbox-frame{ aspect-ratio:9/16; }
.video-lightbox-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.video-lightbox-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-lightbox-close{
  position:absolute; top:-44px; right:0; background:none; border:none;
  color:var(--cloud); font-size:32px; line-height:1; cursor:pointer;
}

/* ===== Reels / Shorts grid ===== */
.shorts-grid{ grid-template-columns:repeat(4,1fr); max-width:900px; }
@media (max-width:960px){ .shorts-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .shorts-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== Featured video ===== */
.featured-video{
  position:relative; display:block; overflow:hidden;
  border-radius:12px; margin-bottom:44px;
  aspect-ratio:21/9; background:#0c0c0b;
}
.featured-video-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .5s ease;
}
.featured-video:hover .featured-video-bg{ transform:scale(1.03); }
.featured-video-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,10,9,0.92) 0%, rgba(10,10,9,0.35) 45%, rgba(10,10,9,0.05) 70%);
}
.featured-video .play-btn-lg{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:1; background:rgba(20,19,17,0.55); border:1px solid rgba(237,234,226,0.4);
}
.featured-video:hover .play-btn-lg{ background:var(--orange); border-color:var(--orange); }
.featured-video-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:36px 40px;
}
.featured-video-meta h3{ font-family:var(--serif); font-size:30px; font-weight:700; color:var(--cloud); }
.play-btn-lg{ width:76px; height:76px; }
.play-btn-lg svg{ width:30px; height:30px; }
@media (max-width:760px){
  .featured-video{ aspect-ratio:4/5; }
  .featured-video-meta{ padding:24px; }
  .featured-video-meta h3{ font-size:23px; }
  .play-btn-lg{ width:60px; height:60px; }
  .play-btn-lg svg{ width:24px; height:24px; }
}

/* ===== Photo grid (tailles variees) ===== */
.photo-grid{ grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; }
.photo-grid .photo-big{ grid-column:span 2; grid-row:span 2; }
.photo-grid .photo-big .proj-img{ aspect-ratio:1/1; height:100%; }
.photo-grid .photo-wide{ grid-column:span 2; }
.photo-grid .photo-wide .proj-img{ aspect-ratio:16/9; }
.photo-card{ cursor:pointer; }
@media (max-width:960px){
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
  .photo-grid .photo-big{ grid-column:span 2; grid-row:span 1; }
  .photo-grid .photo-big .proj-img{ aspect-ratio:4/5; }
}
@media (max-width:600px){
  .photo-grid{ grid-template-columns:1fr; }
  .photo-grid .photo-big, .photo-grid .photo-wide{ grid-column:span 1; }
  .photo-grid .photo-big .proj-img, .photo-grid .photo-wide .proj-img{ aspect-ratio:4/5; }
}

/* ===== Photo lightbox (agrandi, pas plein ecran) ===== */
.photo-lightbox-inner{
  position:relative; max-width:900px; max-height:85vh;
  display:flex; align-items:center; justify-content:center;
}
.photo-lightbox-inner img{
  max-width:100%; max-height:85vh; width:auto; height:auto;
  border-radius:4px; display:block;
}

/* ===== Micro-animations (hover) ===== */

/* Liens de nav : soulignement qui glisse au survol */
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
  background:currentColor; transition:width .25s ease;
}
.nav-links a:hover::after{ width:100%; }

/* Boutons : leger soulevement + ombre douce */
.btn{ transition:background .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.18); }
.btn:active{ transform:translateY(0); box-shadow:none; }

/* Cartes projet (video/photo) : zoom doux de l'image, carte qui se souleve */
.proj-card{ display:block; }
.proj-card .proj-img, .proj-card img.proj-img{ transition:transform .45s ease; overflow:hidden; }
.proj-card{ overflow:hidden; border-radius:2px; }
.proj-card:hover .proj-img{ transform:scale(1.04); }
.proj-card .proj-meta h3{ transition:color .2s ease; }
.proj-card:hover .proj-meta h3{ color:var(--orange); }

/* Logo : petite rotation ludique mais discrete */
.logo-mark{ transition:transform .35s ease; }
.nav-brand:hover .logo-mark, .footer-brand:hover .logo-mark{ transform:rotate(8deg); }

/* Footer : soulignement au survol, coherent avec la nav */
.footer-col a{ position:relative; transition:opacity .2s ease; }
.footer-col a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:currentColor; transition:width .25s ease;
}
.footer-col a:hover::after{ width:100%; }

/* Lignes de service : la puce s'allonge doucement au survol */
.svc-row{ transition:background .25s ease; }
.svc-row .svc-num{ transition:transform .25s ease; display:inline-block; }
.svc-row:hover .svc-num{ transform:translateX(4px); }

/* Cartes de tarifs / options devis : legere mise en avant au survol */
.opt-row{ transition:background .2s ease, border-color .2s ease; }
.opt-row:hover{ background:rgba(237,234,226,0.03); }

/* Onglets de filtre et tabs : transition douce deja partielle, on ajoute la couleur de fond */
.filter-btn{ transition:border-color .2s ease, background .2s ease; }
.filter-btn:hover{ background:rgba(237,234,226,0.04); }

/* ===== Apparition au defilement ===== */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ===== Apercu video au survol ===== */
.preview-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; border:0; }
.featured-video-scrim{ z-index:3; }
.featured-video .play-btn-lg{ z-index:4; }
.featured-video-meta{ z-index:4; }



/* ===== Champs contact dans le recap devis ===== */
.summary-contact{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.summary-contact label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:rgba(237,234,226,0.6); }
.summary-contact input{
  font-family:var(--sans); font-size:14.5px; color:var(--cloud);
  background:transparent; border:1px solid var(--line-dark); border-radius:8px;
  padding:11px 14px;
}
.summary-contact input:focus{ outline:none; border-color:var(--orange); }

.opt-label-hint{ opacity:0.55; font-weight:400; }

/* ===== Mini-recap de devis flottant (persiste sur tout le site) ===== */
.devis-mini-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:150; display:flex; align-items:center; gap:18px;
  background:var(--ink); border:1px solid rgba(237,234,226,0.18);
  border-radius:100px; padding:10px 10px 10px 22px;
  box-shadow:0 12px 30px rgba(0,0,0,0.35);
  text-decoration:none; color:var(--cloud);
  transition:transform .2s ease, box-shadow .2s ease;
  max-width:calc(100vw - 32px);
}
.devis-mini-bar:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,0.42); }
.devis-mini-bar-info{ display:flex; flex-direction:column; line-height:1.25; white-space:nowrap; }
.devis-mini-bar-label{ font-size:11px; opacity:0.6; }
.devis-mini-bar-total{ font-family:var(--serif); font-weight:700; font-size:17px; }
.devis-mini-bar-cta{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--ink);
  background:var(--orange); padding:10px 18px; border-radius:100px; white-space:nowrap;
}
@media (max-width:600px){
  .devis-mini-bar{ left:16px; right:16px; bottom:16px; transform:none; max-width:none; padding:11px 11px 11px 20px; }
  .devis-mini-bar:hover{ transform:translateY(-2px); }
  .devis-mini-bar-label{ font-size:12px; }
  .devis-mini-bar-total{ font-size:19px; }
  .devis-mini-bar-cta{ font-size:12px; padding:9px 14px; }
}

/* ===== FAQ (accordeon natif) ===== */
.faq-list{ max-width:820px; }
.faq-item{
  border-bottom:1px solid var(--line-dark);
  padding:22px 0;
}
.faq-item summary{
  cursor:pointer; list-style:none; font-family:var(--serif);
  font-size:19px; font-weight:600; color:var(--cloud);
  display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:var(--sans); font-size:22px; font-weight:400;
  color:var(--orange); flex-shrink:0; transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{
  margin-top:14px; color:rgba(237,234,226,0.65); font-size:15.5px; line-height:1.65;
  max-width:680px;
}
@media (max-width:600px){
  .faq-item summary{ font-size:17px; }
}