/* ===========================
   detail.css — Cabinet GAC
   Optimisé UX/UI — Responsive — Webflow/Figma friendly
   Applies to detail.html classes: main-header, header-wrapper, detail-hero, detail-section, detail-layout...
   =========================== */

/* -------- Variables & reset (keeps consistent with main site) -------- */
:root{
  --primary: #00a199;
  --primary-dark: #007f74;
  --bg: #ffffff;
  --text: #1f2326;
  --muted: #6b6b6b;
  --line: #eef2f4;
  --radius: 14px;
  --container: 1180px;
  --gutter: 24px;
  --shadow-sm: 0 8px 24px rgba(17,24,39,0.06);
  --shadow-md: 0 18px 48px rgba(17,24,39,0.10);
  --ease: cubic-bezier(.2,.9,.2,1);
  --transition: 260ms var(--ease);
  --focus-ring: rgba(0,161,153,0.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* -------- Header (supports both .main-header and .header for safety) -------- */
.main-header,
.header{
  position:fixed; top:0; left:0; right:0; height:72px;
  background:var(--bg); border-bottom:1px solid var(--line); z-index:1200;
  display:flex; align-items:center; justify-content:center; padding:0 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.header-wrapper,
.header-inner{ width:min(96%, var(--container)); display:flex; align-items:center; justify-content:space-between; gap:18px }
.main-header .logo, .header .logo { font-weight:800; color:var(--primary); font-size:20px; letter-spacing:0.4px; }
.main-header nav, .header nav { display:flex; gap:14px; align-items:center }
.main-header nav a, .header nav a {
  padding:8px 12px; border-radius:10px; font-weight:700; color:var(--text); text-decoration:none; transition:all var(--transition);
}
.main-header nav a:hover, .header nav a:hover { color:var(--primary); transform:translateY(-2px); background:rgba(0,161,153,0.04) }
.main-header nav a:focus, .header nav a:focus { outline: 4px solid var(--focus-ring); border-radius:8px }

/* spacer to avoid content hidden by fixed header (used in HTML: margin-top) */
.detail-top-spacer { height:72px; }

/* -------- Detail hero: image + overlay + title --------
   - image uses object-fit: contain so entire diapo is visible (no crop)
   - hero height respects half screen but capped at 760px
------------------------------------------------------------------ */
.detail-hero{
  margin-top:72px; /* ensures header doesn't cover */
  width:100%;
  height:min(50vh, 760px); /* half viewport but not exceeding source height */
  max-height:760px;
  position:relative;
  display:block;
  overflow:hidden;
  background:#000;
  border-bottom:1px solid var(--line);
}

/* ensure slide image is fully visible: contain and centered */
.detail-hero img,
.detail-hero .hero-bg {
  width:100%;
  height:100%;
  object-fit:contain; /* preserves whole image (no cropping) */
  display:block;
  background-position:center;
  background-size:contain;
}

/* overlay to darken and make caption readable without cropping content */
.detail-hero .detail-hero-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.28),rgba(0,0,0,0.18)); pointer-events:none;
}

/* caption box — anchored lower-left but responsive */
.detail-hero .detail-hero-content{
  position:absolute; left:48px; bottom:36px; z-index:4; max-width:820px; color:#fff;
  text-shadow: 0 8px 22px rgba(0,0,0,0.55);
}
.detail-hero h1{
  font-size:34px; line-height:1.02; margin-bottom:8px; font-weight:800;
}
.detail-hero p{ font-size:16px; opacity:0.95; margin-bottom:12px; }

/* CTA cluster in hero */
.hero-ctas{ display:flex; gap:12px; margin-top:12px }
.hero-ctas .btn{ background:var(--primary); color:#fff; padding:10px 14px; border-radius:10px; font-weight:800; box-shadow:0 10px 26px rgba(0,161,153,0.14); transition: transform var(--transition) }
.hero-ctas .btn:hover{ transform:translateY(-4px); background:var(--primary-dark) }
.hero-ctas .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.12); color:#fff }

/* -------- Detail section layout: two columns on desktop, single on mobile -------- */
.detail-section{ padding:34px 0; background:var(--bg) }
.detail-layout{ width:min(96%, var(--container)); margin:0 auto; display:grid; grid-template-columns: 1fr 420px; gap:36px; align-items:start; }

/* text column */
.detail-text h2{ font-size:20px; color:var(--primary); margin-bottom:12px }
.detail-text p{ font-size:15px; color:var(--text); line-height:1.6; margin-bottom:18px }
.detail-text ul{ margin-left:18px; margin-bottom:18px; color:var(--text) }
.detail-text li{ margin-bottom:8px }

/* side image column */
.detail-image-wrapper{
  position:relative;
  background:#fff; padding:16px; border-radius:12px; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center;
  min-height:280px;
}
.detail-image-wrapper img{
  width:100%; height:auto; max-width:380px; max-height:760px; object-fit:contain; border-radius:10px; display:block;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* info blocks */
.detail-block{ background:#fff; padding:18px; border-radius:12px; box-shadow:var(--shadow-sm); margin-bottom:18px; border-left:4px solid var(--primary) }
.detail-block h3{ margin-bottom:12px; color:var(--primary) }

/* CTA section */
.detail-cta{ margin-top:22px; background:linear-gradient(180deg,#fff,#fafafa); padding:22px 0; border-top:1px solid var(--line) }
.detail-cta .cta-inner{ width:min(96%, var(--container)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px }
.detail-cta .cta-inner h2{ font-size:20px; color:var(--text); margin:0 }
.detail-cta .cta-inner p{ color:var(--muted); margin:0 }

/* contact section styles (form & info) */
.contact-section{ padding:42px 0; background: #f8fafb; border-top:1px solid var(--line) }
.contact-grid{ width:min(96%, var(--container)); margin:0 auto; display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:start }
.contact-info p{ margin-bottom:8px; color:var(--text) }
.contact-form{ background:#fff; padding:18px; border-radius:12px; box-shadow:var(--shadow-sm) }
.contact-form .form-group{ display:flex; flex-direction:column; margin-bottom:12px }
.contact-form label{ font-size:13px; color:var(--muted); margin-bottom:6px }
.contact-form input, .contact-form textarea{ padding:12px 14px; border-radius:10px; border:1px solid var(--line); font-size:14px; color:var(--text) }
.contact-form textarea{ min-height:120px; resize:vertical }

/* actions */
.cta-btn{ display:inline-block; background:var(--primary); color:#fff; padding:12px 18px; border-radius:10px; font-weight:800; text-decoration:none; transition:transform var(--transition) }
.cta-btn:hover{ transform:translateY(-3px); background:var(--primary-dark) }

/* floating quick-inscription button */
.detail-floating{
  position:fixed; right:18px; bottom:92px; z-index:1500; background:var(--primary); color:#fff; padding:12px 16px; border-radius:999px; box-shadow:0 18px 36px rgba(0,161,153,0.14); cursor:pointer;
}
.detail-floating:focus{ outline: 4px solid rgba(0,161,153,0.12) }

/* footer safe area for fixed footer in base site */
.footer-safe-space{ height:64px }

/* -------- Responsive rules -------- */
@media (max-width:1100px){
  .detail-layout{ grid-template-columns: 1fr 360px; gap:28px }
  .detail-image-wrapper img{ max-width:320px }
  .contact-grid{ grid-template-columns: 1fr 320px }
}

@media (max-width:820px){
  .detail-layout{ grid-template-columns: 1fr; }
  .detail-image-wrapper{ order:-1 } /* put image on top on small screens */
  .detail-image-wrapper img{ max-width:420px; max-height:520px }
  .contact-grid{ grid-template-columns:1fr; }
  .hero-ctas{ flex-direction:column; gap:10px }
  .detail-hero .detail-hero-content{ left:18px; right:18px; bottom:22px; max-width:calc(100% - 36px) }
}

/* accessibility focus */
button:focus, a:focus, input:focus, textarea:focus{ outline:none; box-shadow:0 6px 20px var(--focus-ring) }