/* =========================================================================
   TIME CONSTRUCTION — Design system
   Style: Exaggerated Minimalism (oversized type, high contrast, industrial)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap');

:root{
  /* --- color tokens --- */
  --ink:        #12181F;   /* near-black navy — deep surfaces */
  --navy:       #16232F;   /* brand navy — cards / footer on paper */
  --paper:      #F3F1EC;   /* warm off-white — main light bg */
  --paper-2:    #EAE5D8;   /* deeper warm — alternating sections */
  --white:      #FFFFFF;
  --orange:     #FF7A00;   /* safety orange — brand accent */
  --orange-deep:#E56A00;
  --yellow:     #FFC400;   /* safety yellow — hazard accent, badges */
  --ink-2:      #29343E;   /* body text on paper */
  --muted:      #5C6A76;   /* secondary text on paper */
  --muted-dark: #8FA1B0;   /* secondary text on navy/ink */
  --line:       rgba(22,35,47,.12);
  --line-dark:  rgba(255,255,255,.14);
  --shadow-lg:  0 24px 70px rgba(18,24,31,.16);
  --shadow-md:  0 12px 32px rgba(18,24,31,.10);

  /* --- type scale --- */
  --font: 'Archivo', system-ui, sans-serif;
  --fs-hero:  clamp(2.75rem, 8.5vw, 9rem);
  --fs-h1:    clamp(2.25rem, 5.5vw, 4.75rem);
  --fs-h2:    clamp(1.9rem, 4vw, 3.25rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.65rem);
  --fs-lead:  clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:  1rem;
  --fs-small: 0.8125rem;

  /* --- spacing --- */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 140px;

  --container: 1480px;
  --header-h: 88px;
  --ease: cubic-bezier(.16,.8,.28,1);
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink-2);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{ font-family:var(--font); font-size:1rem; }
button{ cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--orange); color:var(--white); }

:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

.section{ padding:var(--sp-7) 0; }
.section--tight{ padding:var(--sp-6) 0; }
.section--dark{ background:var(--ink); color:var(--white); }
.section--navy{ background:var(--navy); color:var(--white); }
.section--alt{ background:var(--paper-2); }

.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--muted);
}
.section--dark .eyebrow, .section--navy .eyebrow{ color:var(--muted-dark); }
.eyebrow::before{ content:''; width:10px; height:10px; background:var(--orange); flex-shrink:0; }

h1, .h1{ font-size:var(--fs-h1); font-weight:900; font-stretch:115%; line-height:.98; letter-spacing:-.02em; text-transform:uppercase; }
h2, .h2{ font-size:var(--fs-h2); font-weight:900; font-stretch:112%; line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; }
h3, .h3{ font-size:var(--fs-h3); font-weight:800; font-stretch:110%; line-height:1.2; }
.lead{ font-size:var(--fs-lead); line-height:1.65; color:var(--muted); max-width:640px; }
.section--dark .lead, .section--navy .lead{ color:var(--muted-dark); }
.accent{ color:var(--orange); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 32px; font-size:14px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  border:2px solid transparent; white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn svg{ width:18px; height:18px; flex-shrink:0; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:scale(.97); }
.btn--primary{ background:var(--orange); color:var(--white); }
.btn--primary:hover{ background:var(--orange-deep); }
.btn--dark{ background:var(--ink); color:var(--white); }
.btn--dark:hover{ background:var(--orange); }
.btn--ghost{ background:transparent; color:var(--ink-2); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink-2); }
.section--dark .btn--ghost, .section--navy .btn--ghost{ color:var(--white); border-color:var(--line-dark); }
.section--dark .btn--ghost:hover, .section--navy .btn--ghost:hover{ border-color:var(--white); }
.btn--sm{ padding:12px 22px; font-size:12px; }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 40px; height:var(--header-h);
  background:rgba(243,241,236,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
header.site.is-scrolled{ box-shadow:0 10px 30px rgba(18,24,31,.08); }
.logo{
  display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:2.5px; font-size:15px; color:var(--ink);
  flex-shrink:0;
}
.logo .sq{ width:14px; height:14px; background:var(--orange); display:inline-block; }
.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--ink-2);
  padding:6px 0; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.main-nav a:hover{ color:var(--orange); }
.main-nav a.is-active{ color:var(--orange); border-color:var(--orange); }
.header-cta{ flex-shrink:0; }
.nav-toggle{
  display:none; width:44px; height:44px; align-items:center; justify-content:center;
  background:none; border:none; flex-shrink:0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:''; display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:transform .25s var(--ease), opacity .2s;
}
.nav-toggle::before{ position:absolute; transform:translateY(-7px); }
.nav-toggle::after{ position:absolute; transform:translateY(7px); }
.nav-toggle span{ background:transparent; }
.nav-toggle span::before, .nav-toggle span::after{ display:none; }
header.site.is-open .nav-toggle::before{ transform:rotate(45deg); }
header.site.is-open .nav-toggle::after{ transform:rotate(-45deg); }

@media (max-width:900px){
  header.site{ padding:0 20px; }
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; inset:var(--header-h) 0 0 0; height:calc(100dvh - var(--header-h));
    background:var(--paper); flex-direction:column; justify-content:center; gap:28px;
    transform:translateX(100%); transition:transform .35s var(--ease);
    border-top:1px solid var(--line);
  }
  header.site.is-open .main-nav{ transform:translateX(0); }
  .main-nav a{ font-size:20px; }
  .header-cta{ display:none; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{ padding:calc(var(--header-h) + 64px) 0 var(--sp-6); position:relative; overflow:hidden; }
.hero-grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 60% 20%, #000 40%, transparent 85%);
}
.section--dark .hero-grid-bg, .section--navy .hero-grid-bg{ opacity:.16; background-image:linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); }
.hero-content{ position:relative; z-index:1; }
.hero h1{ margin:22px 0 0; }
.hero h1 span.line{ display:block; }
.hero .lead{ margin:28px 0 0; max-width:600px; }
.hero-meta{
  margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--line);
  display:flex; gap:var(--sp-5); flex-wrap:wrap;
}
.hero-meta div{ display:flex; flex-direction:column; gap:4px; }
.hero-meta .num{ font-size:2rem; font-weight:900; font-stretch:112%; }
.hero-meta .lbl{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }

.page-hero{ padding:calc(var(--header-h) + 60px) 0 var(--sp-5); }
.page-hero h1{ margin:22px 0 0; }
.page-hero .lead{ margin:26px 0 0; }

/* =========================================================================
   HAZARD STRIPE — construction-site motif divider
   ========================================================================= */
.hazard{
  height:14px; width:100%;
  background:repeating-linear-gradient(135deg, var(--ink) 0 22px, var(--yellow) 22px 44px);
}
.hazard--thin{ height:8px; }

/* =========================================================================
   MARQUEE
   ========================================================================= */
.marquee{
  overflow:hidden; background:var(--ink); color:var(--white);
  padding:22px 0; white-space:nowrap; border-bottom:1px solid var(--line-dark);
}
.marquee-track{ display:inline-flex; gap:56px; animation:marquee 32s linear infinite; will-change:transform; }
.marquee-track span{
  font-size:15px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted-dark);
  display:inline-flex; align-items:center; gap:56px;
}
.marquee-track span b{ color:var(--white); }
.marquee-track span::after{ content:'\2726'; color:var(--orange); margin-left:56px; font-size:12px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =========================================================================
   STATS
   ========================================================================= */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat .num{ font-size:clamp(2.4rem,4.5vw,4rem); font-weight:900; font-stretch:114%; letter-spacing:-.02em; color:var(--white); }
.stat .num .accent{ color:var(--orange); }
.stat .lbl{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted-dark); }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); gap:var(--sp-4) var(--sp-3); } }

/* =========================================================================
   CARDS — services / values / team / timeline
   ========================================================================= */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
@media (max-width:1024px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .grid-3, .grid-2, .grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--white); padding:var(--sp-4); border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.card .icon{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); color:var(--ink); margin-bottom:var(--sp-3); flex-shrink:0;
}
.card .icon svg{ width:26px; height:26px; stroke:var(--ink); }
.card:hover .icon{ background:var(--orange); }
.card:hover .icon svg{ stroke:var(--white); }
.card h3{ margin-bottom:10px; }
.card p{ color:var(--muted); line-height:1.65; font-size:15px; }
.card .num-tag{ font-size:12px; font-weight:800; letter-spacing:2px; color:var(--orange); margin-bottom:14px; display:block; }

.card--dark{ background:var(--navy); color:var(--white); border-color:var(--line-dark); }
.card--dark p{ color:var(--muted-dark); }
.card--dark .icon{ background:rgba(255,255,255,.08); }
.card--dark .icon svg{ stroke:var(--white); }

/* service list row (services.html) */
.service-row{
  display:grid; grid-template-columns:.9fr 1.6fr; gap:var(--sp-5);
  padding:var(--sp-5) 0; border-top:1px solid var(--line);
  align-items:start;
}
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row .num{ font-size:14px; font-weight:800; letter-spacing:2px; color:var(--muted); }
.service-row h3{ margin-top:14px; }
.service-row .icon{ width:60px; height:60px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2); }
.service-row .icon svg{ width:28px; height:28px; stroke:var(--ink); }
.service-features{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:var(--sp-3); }
.service-features li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--muted); line-height:1.5; }
.service-features svg{ width:16px; height:16px; stroke:var(--orange); flex-shrink:0; margin-top:3px; }
@media (max-width:800px){
  .service-row{ grid-template-columns:1fr; gap:var(--sp-2); }
  .service-features{ grid-template-columns:1fr; }
}

/* =========================================================================
   PROCESS TIMELINE
   ========================================================================= */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); counter-reset:step; }
.timeline-step{ position:relative; padding-top:var(--sp-3); border-top:3px solid var(--ink); }
.section--dark .timeline-step, .section--navy .timeline-step{ border-color:var(--orange); }
.timeline-step .step-num{ font-size:13px; font-weight:800; letter-spacing:2px; color:var(--orange); }
.timeline-step h3{ margin:14px 0 10px; font-size:1.15rem; }
.timeline-step p{ font-size:14px; color:var(--muted); line-height:1.6; }
.section--dark .timeline-step p, .section--navy .timeline-step p{ color:var(--muted-dark); }
@media (max-width:1024px){ .timeline{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .timeline{ grid-template-columns:1fr; } }

/* =========================================================================
   GALLERY (réalisations)
   ========================================================================= */
.filter-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:var(--sp-4); }
.filter-btn{
  padding:11px 22px; font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  background:transparent; border:2px solid var(--line); color:var(--ink-2);
  transition:all .2s var(--ease);
}
.filter-btn:hover{ border-color:var(--ink); }
.filter-btn.is-active{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
@media (max-width:1024px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr; } }

.project-card{ position:relative; overflow:hidden; background:var(--ink); aspect-ratio:4/3.1; transition:transform .3s var(--ease); }
.project-card.is-hidden{ display:none; }
.project-art{ position:absolute; inset:0; }
.project-card .overlay{
  position:absolute; inset:0; padding:var(--sp-3);
  display:flex; flex-direction:column; justify-content:flex-end;
  background:linear-gradient(180deg, rgba(18,24,31,0) 45%, rgba(18,24,31,.92) 100%);
}
.project-card .tag{ font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:8px; }
.project-card h3{ color:var(--white); font-size:1.3rem; }
.project-card .meta{ margin-top:8px; font-size:13px; color:var(--muted-dark); display:flex; gap:14px; flex-wrap:wrap; }
.project-card:hover{ transform:translateY(-6px); }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.testimonial{ background:var(--white); border:1px solid var(--line); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); height:100%; }
.testimonial .quote-mark{ width:34px; height:26px; stroke:var(--orange); }
.testimonial p{ font-size:16px; line-height:1.7; color:var(--ink-2); flex:1; }
.testimonial .who{ display:flex; align-items:center; gap:12px; }
.testimonial .avatar{
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0;
}
.testimonial .name{ font-weight:800; font-size:14.5px; }
.testimonial .role{ font-size:13px; color:var(--muted); }
.testimonial .stars{ display:flex; gap:3px; }
.testimonial .stars svg{ width:14px; height:14px; fill:var(--orange); stroke:none; }

/* =========================================================================
   CTA BANNER
   ========================================================================= */
.cta-banner{
  background:var(--ink); color:var(--white); padding:var(--sp-7) var(--sp-4); text-align:center;
  position:relative; overflow:hidden;
}
.cta-banner h2{ max-width:900px; margin:0 auto; }
.cta-banner .lead{ margin:20px auto 0; color:var(--muted-dark); }
.cta-banner .btn-row{ justify-content:center; margin-top:var(--sp-4); }

/* =========================================================================
   VALUES / CERTIFICATIONS (a-propos)
   ========================================================================= */
.badge-row{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.cert-badge{
  display:flex; align-items:center; gap:12px; padding:16px 22px; border:1px solid var(--line);
  font-size:13px; font-weight:700; letter-spacing:.5px;
}
.cert-badge svg{ width:24px; height:24px; stroke:var(--orange); flex-shrink:0; }

.team-card{ text-align:left; }
.team-card .avatar-lg{
  width:100%; aspect-ratio:1; background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:900; margin-bottom:var(--sp-2);
}
.team-card h3{ font-size:1.1rem; }
.team-card .role{ font-size:13px; color:var(--orange); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:4px; }
.team-card p{ margin-top:10px; font-size:14px; color:var(--muted); line-height:1.6; }

/* =========================================================================
   CONTACT FORM
   ========================================================================= */
.contact-block{ display:flex; flex-direction:column; gap:0; }
.contact-link{
  display:flex; flex-direction:column; gap:10px; padding:34px 0; border-top:2px solid var(--ink);
  transition:color .2s;
}
.contact-link:hover{ color:var(--orange); }
.contact-link .lbl{ font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); }
.contact-link .val{ font-size:clamp(24px,3vw,40px); font-weight:900; font-stretch:112%; letter-spacing:-.5px; }
.contact-link .sub{ font-size:14px; color:var(--muted); }

.zone-box{ margin-top:var(--sp-4); background:var(--ink); color:var(--white); padding:var(--sp-3); }
.zone-box p{ margin-top:14px; color:var(--muted-dark); line-height:1.7; }

form.contact-form{ background:var(--white); padding:var(--sp-4); box-shadow:var(--shadow-lg); display:grid; gap:var(--sp-2); }
.field{ display:grid; gap:8px; }
.field label{ font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.field input, .field select, .field textarea{
  border:1px solid var(--line); padding:14px 16px; background:var(--paper); color:var(--ink);
  transition:border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--orange); background:var(--white); }
.field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.form-note{ font-size:12px; color:var(--muted); line-height:1.5; }

/* =========================================================================
   FOOTER
   ========================================================================= */
footer.site{ background:var(--ink); color:var(--white); padding:var(--sp-6) 0 var(--sp-3); }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-4); }
.footer-brand p{ margin-top:16px; max-width:340px; font-size:15px; line-height:1.65; color:var(--muted-dark); }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col .ttl{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--muted-dark); margin-bottom:6px; }
.footer-col a{ font-size:14.5px; font-weight:600; color:var(--white); transition:color .2s; }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{
  max-width:var(--container); margin:var(--sp-5) auto 0; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:12px; color:var(--muted-dark); letter-spacing:1px;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-3); } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* =========================================================================
   REVEAL ON SCROLL
   ========================================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-group .reveal:nth-child(1){ transition-delay:0ms; }
.reveal-group .reveal:nth-child(2){ transition-delay:80ms; }
.reveal-group .reveal:nth-child(3){ transition-delay:160ms; }
.reveal-group .reveal:nth-child(4){ transition-delay:240ms; }
.reveal-group .reveal:nth-child(5){ transition-delay:320ms; }

/* =========================================================================
   MISC
   ========================================================================= */
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:center; }
@media (max-width:900px){ .split-2{ grid-template-columns:1fr; gap:var(--sp-4); } }

.blueprint-house{ width:100%; height:auto; }

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-5); flex-wrap:wrap; }
.section-head .lead{ margin:0; }

.three-d-banner{
  position:relative; overflow:hidden; background:var(--navy); color:var(--white);
  padding:var(--sp-6); display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp-5); align-items:center;
}
@media (max-width:900px){ .three-d-banner{ grid-template-columns:1fr; padding:var(--sp-5) var(--sp-3); } }

/* =========================================================================
   RDV / CALENDRIER (devis express en visio Teams)
   ========================================================================= */
.rdv-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-5); align-items:start; }
@media (max-width:900px){ .rdv-grid{ grid-template-columns:1fr; } }

.cal{ background:var(--white); border:1px solid var(--line); padding:var(--sp-3); }
.cal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); }
.cal-head .month{ font-weight:900; font-stretch:112%; text-transform:uppercase; letter-spacing:1px; font-size:1.05rem; }
.cal-nav{ display:flex; gap:8px; }
.cal-nav button{
  width:44px; height:44px; border:1px solid var(--line); background:var(--paper);
  font-size:17px; font-weight:800; transition:background .2s, color .2s, border-color .2s;
}
.cal-nav button:hover:not(:disabled){ background:var(--ink); border-color:var(--ink); color:var(--white); }
.cal-nav button:disabled{ opacity:.3; cursor:default; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.cal-dow span{ text-align:center; font-size:11px; font-weight:700; letter-spacing:1px; color:var(--muted); text-transform:uppercase; padding:6px 0; }
.cal-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-days button{
  aspect-ratio:1; border:1px solid transparent; background:var(--paper);
  font-weight:700; font-size:14px; transition:border-color .15s, background .15s, color .15s;
}
.cal-days button:hover:not(:disabled){ border-color:var(--ink); }
.cal-days button:disabled{ opacity:.25; cursor:default; background:transparent; }
.cal-days button.is-selected{ background:var(--orange); color:var(--white); }
.cal-days .cal-empty{ background:transparent; }

.slots h3{ font-size:1rem; }
.slots-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; margin-top:12px; }
.slot-btn{
  padding:12px 6px; border:1px solid var(--line); background:var(--paper);
  font-weight:700; font-size:13.5px; transition:border-color .15s, background .15s, color .15s;
}
.slot-btn:hover{ border-color:var(--ink); }
.slot-btn.is-selected{ background:var(--ink); border-color:var(--ink); color:var(--white); }

.rdv-summary{
  display:flex; gap:12px; align-items:center; margin-top:var(--sp-3);
  background:var(--navy); color:var(--white); padding:16px 18px; font-size:14.5px; line-height:1.5;
}
.rdv-summary svg{ width:22px; height:22px; stroke:var(--orange); flex-shrink:0; }
.rdv-summary b{ color:var(--yellow); }

.teams-chip{
  display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  padding:10px 16px; background:#464EB8; color:var(--white);
  font-size:12.5px; font-weight:700; letter-spacing:1px;
}
.teams-chip svg{ width:16px; height:16px; stroke:currentColor; }

/* responsive header spacing at 375 */
@media (max-width:400px){ h1, .h1{ font-size:clamp(2rem,11vw,3rem); } }