/* ============================================================
   Pépinière d'Entreprises Damas — Système visuel partagé
   Direction "Dynamique" : noir / blanc / orange
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  --orange:#F26F29;
  --orange-deep:#D95813;
  --orange-soft:#FCE9DB;
  --ink:#111110;
  --ink-2:#1b1b19;
  --ink-soft:#4f4f49;
  --paper:#F6F4EF;
  --paper-2:#EFECE4;
  --line:#E4E0D7;
  --line-dark:#2c2c29;
  --white:#ffffff;
  --display:"Bricolage Grotesque", sans-serif;
  --ui:"Space Grotesk", sans-serif;
  --body:"Hanken Grotesk", sans-serif;
  --maxw:1240px;
  --radius:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(17,17,16,.04),0 4px 12px -6px rgba(17,17,16,.12);
  --shadow-md:0 6px 16px -8px rgba(17,17,16,.16),0 24px 48px -28px rgba(17,17,16,.28);
  --shadow-lg:0 12px 28px -12px rgba(17,17,16,.18),0 40px 80px -32px rgba(17,17,16,.34);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-size:17px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
.eyebrow{
  font-family:var(--ui);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--orange-deep);
}
h1,h2,h3{font-family:var(--display);letter-spacing:-.022em;line-height:1;text-wrap:balance;}
::selection{background:var(--orange);color:#fff;}
::-moz-selection{background:var(--orange);color:#fff;}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;}
.section{padding:96px 0;}
.section-tight{padding:64px 0;}

/* ---------- placeholders ---------- */
.ph{
  background-color:var(--paper-2);
  background-image:repeating-linear-gradient(135deg,#0000000f 0 11px,#00000003 11px 22px);
  display:grid;place-items:center;color:#8c887e;
  font-family:var(--ui);font-size:12.5px;font-weight:500;letter-spacing:.04em;
  text-align:center;text-transform:uppercase;padding:14px;
  border-radius:10px;
}
.ph.dark{background-color:#222220;background-image:repeating-linear-gradient(135deg,#ffffff10 0 11px,#ffffff03 11px 22px);color:#9c988d;}
.ph.has-photo{background-image:none;background-color:transparent;background-size:cover;background-position:center;color:transparent;font-size:0;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--ui);font-weight:600;font-size:15px;
  padding:14px 24px;border-radius:999px;text-decoration:none;
  display:inline-flex;align-items:center;gap:9px;border:1.5px solid transparent;
  cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .35s var(--ease), border-color .25s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);transition-duration:.08s;}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 20px -10px rgba(242,111,41,.7);}
.btn-orange:hover{background:var(--orange-deep);box-shadow:0 14px 30px -10px rgba(242,111,41,.78);}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 8px 22px -12px rgba(17,17,16,.6);}
.btn-dark:hover{background:#000;box-shadow:0 16px 34px -12px rgba(17,17,16,.7);}
.btn-line{background:transparent;border-color:currentColor;color:var(--ink);}
.btn-line:hover{background:var(--ink);color:#fff;}
.btn-line-light{background:transparent;border-color:#ffffff44;color:#fff;}
.btn-line-light:hover{background:#fff;color:var(--ink);}
.btn-sm{padding:10px 18px;font-size:14px;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;background:var(--ink);color:#fff;transition:background .4s var(--ease),box-shadow .4s var(--ease),backdrop-filter .4s var(--ease);}
.site-header.scrolled{background:rgba(17,17,16,.78);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 rgba(255,255,255,.07),0 18px 44px -30px rgba(0,0,0,.8);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;transition:height .4s var(--ease);}
.site-header.scrolled .wrap{height:64px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;}
.logo .mark{
  width:36px;height:36px;border-radius:9px;background:var(--orange);
  display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:20px;color:#fff;flex:none;
}
.logo .name{line-height:1;}
.logo .name b{display:block;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.02em;}
.logo .name small{font-family:var(--body);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;}
.nav{display:flex;align-items:center;gap:30px;}
.nav-links{display:flex;gap:26px;list-style:none;}
.nav-links a{font-family:var(--ui);font-size:14.5px;font-weight:500;text-decoration:none;opacity:.82;transition:opacity .15s;position:relative;padding:4px 0;}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.nav-links a:hover{opacity:1;}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-links a.active{opacity:1;}
.nav-links a.active::after{transform:scaleX(1);}
.header-right{display:flex;align-items:center;gap:18px;}
.lang-toggle{display:flex;font-family:var(--ui);font-size:13px;font-weight:600;border:1px solid #ffffff2e;border-radius:999px;overflow:hidden;}
.lang-toggle button{background:none;border:none;color:#fff;opacity:.55;cursor:pointer;padding:7px 12px;font:inherit;transition:.15s;}
.lang-toggle button.active{background:#fff;color:var(--ink);opacity:1;}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.2s;}

/* mobile menu */
.mobile-menu{display:none;position:fixed;inset:74px 0 0;background:var(--ink);z-index:55;padding:32px;flex-direction:column;gap:6px;}
.mobile-menu a{font-family:var(--display);font-weight:600;font-size:30px;text-decoration:none;color:#fff;padding:12px 0;border-bottom:1px solid var(--line-dark);}
.mobile-menu.open{display:flex;}

/* ============================================================
   PAGE HEADER (sous-pages)
   ============================================================ */
.page-head{background:var(--ink);color:#fff;padding:76px 0 88px;position:relative;overflow:hidden;}
.page-head::before{content:"";position:absolute;top:-30%;left:50%;width:760px;height:760px;transform:translateX(-50%);background:radial-gradient(circle,rgba(242,111,41,.16) 0%,rgba(242,111,41,0) 62%);pointer-events:none;}
.page-head .wrap{position:relative;z-index:2;}
.page-head .bigmark{position:absolute;top:-60px;right:-20px;font-family:var(--display);font-weight:800;font-size:300px;line-height:.8;color:#ffffff0a;pointer-events:none;}
.page-head .eyebrow{color:var(--orange);}
.page-head h1{font-size:clamp(40px,6vw,72px);font-weight:800;margin:18px 0 0;max-width:14ch;}
.page-head h1 em{font-style:normal;color:var(--orange);}
.page-head p{font-size:19px;line-height:1.55;color:#c9c7c0;max-width:560px;margin-top:22px;}
.crumb{font-family:var(--ui);font-size:13px;letter-spacing:.04em;color:#8c887e;}
.crumb a{text-decoration:none;color:#8c887e;}
.crumb a:hover{color:#fff;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink);color:#cfccc3;padding:72px 0 36px;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-dark);}
.footer-top .logo .name small{opacity:.7;}
.site-footer h4{font-family:var(--ui);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600;}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:11px;}
.site-footer a{text-decoration:none;color:#cfccc3;font-size:15px;transition:color .2s var(--ease);}
.site-footer ul a{position:relative;}
.site-footer ul a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.site-footer ul a:hover::after{transform:scaleX(1);}
.site-footer a:hover{color:var(--orange);}
.footer-blurb{font-size:15px;line-height:1.6;color:#a8a499;max-width:34ch;margin:18px 0 0;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-family:var(--ui);font-size:13px;color:#8c887e;flex-wrap:wrap;gap:12px;}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{background:var(--orange);color:#fff;overflow:hidden;white-space:nowrap;padding:16px 0;}
.marquee-track{display:inline-flex;animation:scroll 32s linear infinite;}
.marquee-track span{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.01em;padding:0 22px;display:inline-flex;align-items:center;gap:22px;}
.marquee-track span i{font-style:normal;opacity:.7;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;}}

/* ============================================================
   CARDS / GRIDS générique
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);}
.card.hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent;}
.card h3{font-size:21px;font-weight:700;margin-bottom:10px;}
.card p{font-size:15.5px;color:var(--ink-soft);line-height:1.6;}

.section-label{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap;}
.section-label h2{font-size:clamp(30px,4vw,46px);font-weight:800;max-width:18ch;}
.section-label p{color:var(--ink-soft);font-size:17px;max-width:42ch;}

/* ============================================================
   FORMS
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--ui);font-size:13.5px;font-weight:600;letter-spacing:.02em;}
.field label .req{color:var(--orange-deep);}
.field input,.field textarea,.field select{
  font-family:var(--body);font-size:16px;padding:14px 16px;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);transition:border .15s, box-shadow .15s;
}
.field textarea{resize:vertical;min-height:130px;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft);}
.field.error input,.field.error textarea,.field.error select{border-color:var(--orange-deep);}
.field .err-msg{font-size:13px;color:var(--orange-deep);font-family:var(--ui);display:none;}
.field.error .err-msg{display:block;}
.form-success{background:var(--orange-soft);border:1.5px solid var(--orange);border-radius:var(--radius);padding:32px;text-align:center;}
.form-success h3{font-size:26px;font-weight:800;margin-bottom:10px;}
.form-success p{color:var(--ink-soft);}
.choice-row{display:flex;gap:12px;flex-wrap:wrap;}
.choice{position:relative;}
.choice input{position:absolute;opacity:0;}
.choice span{display:inline-block;font-family:var(--ui);font-size:14px;font-weight:500;padding:11px 18px;border:1.5px solid var(--line);border-radius:999px;cursor:pointer;transition:.15s;}
.choice input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink);}
.choice input:focus-visible + span{box-shadow:0 0 0 3px var(--orange-soft);}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-orange{color:var(--orange);}
.bg-paper{background:var(--paper);}
.bg-ink{background:var(--ink);color:#fff;}
.lead{font-size:20px;line-height:1.6;color:var(--ink-soft);}
.tag-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--orange-soft);color:var(--orange-deep);padding:7px 14px;border-radius:999px;}
.tag-pill.light{background:#ffffff1a;color:#fff;}
.note{font-family:var(--ui);font-size:12.5px;color:#9c988d;font-style:italic;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .header-right .btn{display:none;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .section{padding:64px 0;}
}
@media(max-width:560px){
  .wrap{padding:0 20px;}
  .grid-4{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
}


.logo-img{height:46px;width:auto;display:block;}
@media(max-width:560px){.logo-img{height:38px;}}

/* ---------- cartes d'espaces dynamiques ---------- */
.img-wrap{position:relative;}
.card-badge{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--ink);color:#fff;z-index:2;box-shadow:0 6px 18px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.18);}
.card-badge .d{width:7px;height:7px;border-radius:50%;flex:none;}
.card-badge.dispo .d{background:#3ddc84;box-shadow:0 0 0 3px #3ddc8440;}
.card-badge.bientot .d{background:#ffcf5c;}
.card-badge.complet{background:#6e2a2a;}
.card-badge.complet .d{background:#ff8a8a;}

/* ---------- carrousel hero (diaporama des espaces mis en avant) ---------- */
.hero-fade{transition:opacity .42s ease;}
.hero-fade.out{opacity:0;}
.hero-dots{display:flex;gap:7px;justify-content:center;margin-top:14px;}
.hero-dots button{width:8px;height:8px;border-radius:999px;border:none;background:#d6d2c8;cursor:pointer;padding:0;transition:width .25s ease, background .25s ease;}
.hero-dots button:hover{background:#b9b4a8;}
.hero-dots button.active{background:var(--orange);width:22px;}

/* ============================================================
   POLISH PREMIUM — mouvement, profondeur, détails
   ============================================================ */

/* Révélation au défilement (activée par site.js via <html class="reveal-on">) */
.reveal-on [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);will-change:opacity,transform;}
.reveal-on [data-reveal].in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .reveal-on [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Barre de progression de lecture */
.read-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--orange),var(--orange-deep));z-index:90;pointer-events:none;transition:transform .1s linear;}

/* Scrollbar raffinée (navigateurs WebKit) */
@media(pointer:fine){
  html::-webkit-scrollbar{width:11px;}
  html::-webkit-scrollbar-track{background:var(--paper);}
  html::-webkit-scrollbar-thumb{background:#cfcabd;border:3px solid var(--paper);border-radius:99px;}
  html::-webkit-scrollbar-thumb:hover{background:var(--orange);}
}

/* Placeholders : grille plus fine, plus « art-directée » */
.ph{position:relative;}
.ph::after{content:"";position:absolute;inset:10px;border:1px solid #0000000d;border-radius:7px;pointer-events:none;}
.ph.dark::after{border-color:#ffffff12;}
.ph.has-photo::after{display:none;}

/* Photocard hero — profondeur soignée */
.photocard{box-shadow:var(--shadow-lg)!important;}

/* Compteur de stats : police tabulaire pendant l'animation */
.stats .n .num{font-variant-numeric:tabular-nums;}