/* ==========================================================================
   GESTION SL · Développement immobilier
   Feuille de styles isolée sous « .sl » : rien ne fuit vers le thème.
   ========================================================================== */

.sl {
  /* ===== COULEURS DE MARQUE ===== */
  --bg:            #0A0A0C;
  --bg-deep:       #000000;
  --surface:       #131317;
  --surface-2:     #1A1A1F;
  --border:        #26262D;

  --primary:       #D62027;
  --primary-hover: #EE3A40;
  --primary-deep:  #93131A;
  --glow:          #FF7A5A;

  --text:          #FFFFFF;
  --muted:         #A3A3AC;
  --subtle:        #6B6B75;

  --gradient-brand: linear-gradient(135deg, #93131A 0%, #D62027 55%, #FF7A5A 100%);

  /* ===== TYPOGRAPHIE ===== */
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --fs-hero: clamp(2.3rem, 4.4vw, 3.9rem);
  --fs-h2:   clamp(1.9rem, 3.6vw, 2.9rem);
  --fs-h3:   clamp(1.15rem, 2vw, 1.45rem);

  /* ===== ESPACEMENT / FORMES ===== */
  --container: min(1220px, calc(100% - 2.5rem));
  --pad-y: clamp(4.5rem, 9vw, 8rem);
  --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;
  --shadow: 0 26px 70px -26px rgba(0,0,0,.9);
  --b1: 1px solid var(--border);

  /* ===== VERRE ===== */
  --verre-fond: linear-gradient(168deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 34%, rgba(255,255,255,.018) 100%);
  --verre-teinte: rgba(11,11,14,.62);
  --verre-bord: rgba(255,255,255,.12);
  --verre-reflet: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
  --verre-flou: blur(24px) saturate(180%);
}

/* ---------- RESET LOCAL ---------- */
.sl, .sl * { box-sizing: border-box; }
.sl :where(h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd) { margin: 0; padding: 0; }
.sl :where(ul,ol) { list-style: none; }
.sl :where(a) { color: inherit; text-decoration: none; }
.sl :where(img) { display: block; max-width: 100%; height: auto; }
.sl :where(button,input,textarea,select) { font: inherit; color: inherit; }

.sl {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body { margin: 0; background: #0A0A0C; }

/* ---------- LAYOUT ---------- */
.sl .wrap { width: var(--container); margin-inline: auto; }
.sl section { padding-block: var(--pad-y); position: relative; }
.sl section.sec-tight { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); }
.sl section.pt-tight { padding-top: clamp(2.5rem, 4.5vw, 3.75rem); }
.sl .sec-dark { background: var(--bg-deep); border-block: 1px solid var(--border); }
.sl .eyebrow {
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); display: inline-flex; align-items: center; gap: .55rem;
}
.sl .eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); display: block; }
.sl h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin-top: 1rem; }
.sl h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.sl .lead { color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.12rem); max-width: 62ch; }
.sl .sec-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sl .sec-head.center { max-width: 100%; margin-inline: auto; text-align: center; }
.sl .sec-head.center h2 { max-width: none; }
.sl .sec-head.center .lead { margin-inline: auto; }
.sl .sec-head p.lead { margin-top: 1.1rem; }
.sl .sec-foot { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: flex; justify-content: center; }

/* ---------- BOUTONS ---------- */
.sl .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: .95rem 1.6rem; border-radius: var(--r-pill); border: 0; cursor: pointer;
  position: relative; isolation: isolate; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.sl .btn:hover { transform: translateY(-2px); }
.sl .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

.sl .btn-primary { color: #fff; }
.sl .btn-primary::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -2;
  background: conic-gradient(from var(--spin, 0deg), #93131A 0%, #D62027 40%, #FF7A5A 62%, #D62027 82%, #93131A 100%);
  animation: sl-spin 3.4s linear infinite;
}
.sl .btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--gradient-brand); }
.sl .btn-primary:hover { box-shadow: 0 14px 40px -14px rgba(214,32,39,.75); }
.sl .btn-primary:hover::before { animation-duration: 1.4s; }

.sl .btn-outline { color: var(--text); background: transparent; border: 1px solid rgba(255,255,255,.34); }
.sl .btn-outline:hover { background: #fff; color: #0A0A0C; border-color: #fff; }

@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sl-spin { to { --spin: 360deg; } }

/* ---------- MENU TÉLÉPHONE (appeler / texto) ---------- */
.sl .tel { position: relative; display: inline-flex; }
.sl .tel-btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; background: none; border: 0; padding: 0;
  transition: color .2s ease;
}
.sl .tel-btn:hover { color: var(--primary-hover); }
.sl .tel-btn .chev, .sl .info-row .chev { transition: transform .25s ease; }
.sl [data-tel][data-open="1"] .chev { transform: rotate(180deg); }
.sl .tel-pop {
  position: absolute; top: calc(100% + .6rem); right: 0; min-width: 265px; z-index: 60;
  padding: .4rem; border-radius: var(--r-md); display: none;
  background: var(--verre-teinte); backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou);
  border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet), 0 24px 60px -24px rgba(0,0,0,.92);
}
.sl [data-tel][data-open="1"] .tel-pop { display: block; animation: sl-pop .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes sl-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sl .tel-btn > svg { width: 15px; height: 15px; flex: 0 0 auto; }
.sl .tel-btn > span { white-space: nowrap; }
.sl .tel-btn .chev { display: inline-flex; }
.sl .tel-pop a {
  display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: var(--r-sm);
  color: #E7E7EE; transition: background .2s ease, color .2s ease;
}
.sl .tel-pop a:hover { background: rgba(255,255,255,.08); color: #fff; }
.sl .tel-pop .tp-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(214,32,39,.12); border: 1px solid rgba(214,32,39,.28); color: var(--primary-hover); }
.sl .tel-pop .tp-ic svg { width: 17px; height: 17px; }
.sl .tel-pop .tp-txt { display: block; }
.sl .tel-pop .tp-txt b { display: block; font-family: var(--font-display); font-weight: 600; font-size: .93rem; line-height: 1.3; white-space: nowrap; }
.sl .tel-pop .tp-txt em { display: block; font-style: normal; font-size: .76rem; color: var(--subtle); line-height: 1.35; white-space: nowrap; }
.sl .tel.tel-left .tel-pop { right: auto; left: 0; }
.sl .tel.tel-cta .tel-btn { padding: .95rem 1.6rem; border-radius: var(--r-pill); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  position: relative; isolation: isolate; }
.sl .tel.tel-cta .tel-btn::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -2;
  background: conic-gradient(from var(--spin, 0deg), #93131A 0%, #D62027 40%, #FF7A5A 62%, #D62027 82%, #93131A 100%); animation: sl-spin 3.4s linear infinite; }
.sl .tel.tel-cta .tel-btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--gradient-brand); }
.sl .tel.tel-cta .tel-btn:hover { color: #fff; box-shadow: 0 14px 40px -14px rgba(214,32,39,.75); }
.sl .tel.tel-center .tel-pop { right: 50%; transform: translateX(50%); }

/* ---------- BARRE D'INFO ---------- */
.sl .topbar { background: var(--bg-deep); border-bottom: 1px solid rgba(255,255,255,.06); font-size: .82rem; color: var(--muted); position: relative; z-index: 95; }
.sl .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 42px; }
.sl .topbar .tb-right { display: flex; align-items: center; gap: 1.6rem; }
.sl .topbar a.mail { display: inline-flex; align-items: center; gap: .45rem; transition: color .2s; }
.sl .topbar a.mail:hover { color: var(--primary-hover); }
@media (max-width: 780px) { .sl .topbar .tb-left { display: none; } .sl .topbar .wrap { justify-content: center; } }

/* ---------- ENTÊTE VERRE ---------- */
.sl .site-head { position: sticky; top: 0; z-index: 90; padding: .7rem 0; }
.sl .site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--verre-teinte); backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou);
  border-bottom: 1px solid var(--verre-bord);
}
.sl .head-grid { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 1.5rem; }
.sl .brand { display: flex; align-items: center; gap: .8rem; }
.sl .brand img { height: 54px; width: auto; border-radius: 50%; }
.sl .brand span { font-family: var(--font-display); font-weight: 700; letter-spacing: .02em; font-size: 1.02rem; line-height: 1.15; }
.sl .brand small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sl .nav { display: flex; align-items: center; gap: .25rem; justify-self: center;
  background: var(--verre-fond); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet);
  backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou);
  padding: .35rem; border-radius: var(--r-pill); }
.sl .nav a { font-family: var(--font-display); font-size: .88rem; font-weight: 500; padding: .55rem 1rem; border-radius: var(--r-pill); color: var(--muted); transition: color .22s ease, background .22s ease; white-space: nowrap; }
.sl .nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.sl .nav a.on { color: #fff; background: rgba(255,255,255,.1); }
.sl .head-cta { justify-self: end; display: flex; align-items: center; gap: .7rem; }
.sl .burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--verre-bord); background: var(--verre-fond); place-items: center; cursor: pointer; }
.sl .burger span { display: block; width: 18px; height: 2px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff; }
@media (max-width: 1140px) {
  .sl .head-grid { grid-template-columns: 1fr auto; }
  .sl .nav { display: none; position: absolute; top: calc(100% + .6rem); left: 1.25rem; right: 1.25rem; flex-direction: column; align-items: stretch; padding: .8rem; border-radius: var(--r-md); }
  .sl .nav.open { display: flex; }
  .sl .nav a { padding: .85rem 1rem; }
  .sl .head-cta .btn, .sl .head-cta .tel { display: none; }
}

/* ---------- HERO ---------- */
.sl .hero { padding: 0; min-height: min(86svh, 800px); display: grid; align-items: center; position: relative; overflow: hidden; isolation: isolate; }
.sl .hero-media { position: absolute; inset: 0; z-index: -2; }
.sl .hero-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: sl-drift 22s ease-in-out infinite alternate; }
@keyframes sl-drift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.5%,-1.5%,0); } }
.sl .hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.86) 0%, rgba(10,10,12,.5) 30%, rgba(10,10,12,.8) 70%, #0A0A0C 100%),
              radial-gradient(90% 60% at 15% 85%, rgba(214,32,39,.22), transparent 70%);
}
.sl .hero-inner { padding-block: clamp(2.5rem, 6vh, 4rem) clamp(2.5rem, 5vw, 4rem); }

.sl .hero-kicker { font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  font-size: clamp(1.35rem, 2.6vw, 2.15rem); letter-spacing: -.01em; color: #D8D8E0; max-width: 24ch; }
.sl .hero-kicker b { font-weight: 700; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl .hero-kicker .count { font-variant-numeric: tabular-nums; }
.sl .hero h1 { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; margin-top: .9rem; }
.sl .hero h1 span { display: block; }
.sl .hero h1 .l2 { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl .hero .lead { margin-top: 1.4rem; font-size: clamp(1.02rem, 1.35vw, 1.18rem); max-width: 58ch; color: #C9C9D2; }
.sl .hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.sl .hero-foot { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.1); }
.sl .hero-foot span { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.11); backdrop-filter: blur(10px);
  font-size: .84rem; color: #D6D6DE; }
.sl .hero-foot span svg { width: 13px; height: 13px; color: rgba(255,255,255,.5); flex: 0 0 auto; }

/* ---------- ENTÊTE DE PAGE INTÉRIEURE ---------- */
.sl .page-head { padding: 0; position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: end; min-height: clamp(340px, 46vh, 460px); }
.sl .page-head .hero-media::after {
  background: linear-gradient(180deg, rgba(10,10,12,.9) 0%, rgba(10,10,12,.62) 40%, rgba(10,10,12,.9) 78%, #0A0A0C 100%),
              radial-gradient(80% 70% at 12% 90%, rgba(214,32,39,.24), transparent 70%);
}
.sl .page-head .inner { padding-block: clamp(4.5rem, 10vh, 6.5rem) clamp(2.5rem, 5vw, 3.5rem); }
.sl .page-head h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 4vw, 3.3rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; margin-top: 1rem; max-width: 22ch; }
.sl .page-head .lead { margin-top: 1.2rem; color: #C4C4CE; }
.sl .crumbs { font-size: .82rem; color: var(--subtle); display: flex; gap: .5rem; align-items: center; }
.sl .crumbs a:hover { color: var(--primary-hover); }
.sl .page-head + section { padding-top: clamp(3rem, 5vw, 4.5rem); }
.sl .tel-block { position: relative; }
.sl .tel-block .info-row { margin-bottom: 0; }
.sl .tel-block .tel-pop { top: calc(100% + .4rem); left: 0; right: auto; min-width: min(340px, 100%); }

@media (max-width: 560px) {
  .sl .hero { min-height: auto; }
  .sl .hero-inner { padding-block: 4rem 3rem; }
  .sl .hero-actions .btn, .sl .hero-actions .tel, .sl .hero-actions .tel-btn { width: 100%; }
  .sl .hero-foot { gap: .45rem; }
  .sl .hero-foot span { font-size: .78rem; padding: .42rem .8rem; }
  .sl .brand img { height: 44px; }
  .sl .page-head { min-height: auto; }
}

/* ---------- BANDEAU DÉFILANT ---------- */
.sl .marquee-wrap { margin-block: clamp(2rem, 4vw, 3rem); }
.sl .marquee { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-deep); padding-block: 1.05rem; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.sl .marquee-track { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); width: max-content; animation: sl-scroll 42s linear infinite; }
.sl .marquee:hover .marquee-track { animation-play-state: paused; }
.sl .marquee-item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-size: .95rem; font-weight: 500; color: #8C8C96; letter-spacing: .04em; transition: color .3s ease; }
.sl .marquee-item:hover { color: #fff; }
.sl .marquee-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: .8; }
@keyframes sl-scroll { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

/* ---------- STATISTIQUES ---------- */
.sl .stats { display: grid; gap: 1.1rem; grid-template-columns: repeat(4, 1fr); }
.sl .stat { text-align: center; padding: 2.2rem 1.1rem; background: var(--surface); border: var(--b1); border-radius: var(--r-md); position: relative; overflow: hidden; }
.sl .stat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--gradient-brand); opacity: .7; }
.sl .stat .num { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 3.3rem); font-weight: 700; line-height: 1;
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl .stat .label { color: var(--muted); font-size: .9rem; margin-top: .65rem; }
@media (max-width: 860px) { .sl .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- APPROCHE (titre pleine largeur, photo à gauche) ---------- */
.sl .approche-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .sl .approche-body { grid-template-columns: 1fr; } }
.sl .approche-body .split-media { margin-top: clamp(1.75rem, 3.5vw, 3.25rem); }
.sl .split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; border: var(--b1); box-shadow: var(--shadow); }
.sl .split-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.sl .split-media:hover img { transform: scale(1.04); }
.sl .split-media .tag { position: absolute; left: 1.1rem; bottom: 1.1rem; padding: .5rem 1rem; border-radius: var(--r-pill);
  background: rgba(10,10,12,.66); backdrop-filter: blur(14px); border: 1px solid var(--verre-bord); font-size: .8rem; }

/* ---------- PASTILLES À ICÔNE ---------- */
.sl .pills { display: grid; gap: 1rem; align-content: start; }
.sl .pill { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: var(--r-md);
  background: var(--surface); border: var(--b1); transition: border-color .3s ease, transform .3s ease, background .3s ease; }
.sl .pill:hover { border-color: rgba(214,32,39,.55); transform: translateX(4px); background: var(--surface-2); }
.sl .pill .ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(214,32,39,.12); border: 1px solid rgba(214,32,39,.28); color: var(--primary-hover); }
.sl .pill .ic svg { width: 20px; height: 20px; }
.sl .pill h4 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.sl .pill p { color: var(--muted); font-size: .92rem; margin-top: .2rem; }

/* ---------- PARCOURS ---------- */
.sl .journey { position: relative; margin-top: 1rem; }
.sl .journey::before { content: ""; position: absolute; left: 27px; top: 40px; bottom: 40px; width: 2px;
  background: linear-gradient(180deg, var(--primary) 0%, rgba(214,32,39,.35) 45%, var(--border) 100%); }
.sl .jstep { display: grid; grid-template-columns: 56px 1fr; gap: 1.4rem; align-items: start; padding-block: 1.1rem; position: relative; }
.sl .jstep .node { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); position: relative; z-index: 1; transition: border-color .3s ease, background .3s ease; }
.sl .jstep .node svg { width: 22px; height: 22px; color: var(--muted); transition: color .3s ease; }
.sl .jstep:hover .node { border-color: var(--primary); background: rgba(214,32,39,.1); }
.sl .jstep:hover .node svg { color: var(--primary-hover); }
.sl .jstep.start .node, .sl .jstep.end .node { background: var(--gradient-brand); border-color: transparent; }
.sl .jstep.start .node svg, .sl .jstep.end .node svg { color: #fff; }
.sl .jstep h4 { font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; padding-top: .55rem; }
.sl .jstep p { color: var(--muted); font-size: .94rem; margin-top: .3rem; max-width: 60ch; }

/* ---------- PARCOURS HORIZONTAL (accueil) ---------- */
.sl .journey-h { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.4rem; position: relative; margin-top: 1rem; }
.sl .journey-h::before { content: ""; position: absolute; left: 8.5%; right: 8.5%; top: 27px; height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(214,32,39,.45) 45%, var(--border) 100%); }
.sl .jh-step { text-align: center; position: relative; }
.sl .jh-step .node { width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); position: relative; z-index: 1;
  transition: border-color .3s ease, background .3s ease, transform .3s ease; }
.sl .jh-step .node svg { width: 22px; height: 22px; color: var(--muted); transition: color .3s ease; }
.sl .jh-step:hover .node { border-color: var(--primary); background: rgba(214,32,39,.1); transform: translateY(-4px); }
.sl .jh-step:hover .node svg { color: var(--primary-hover); }
.sl .jh-step.start .node, .sl .jh-step.end .node { background: var(--gradient-brand); border-color: transparent; }
.sl .jh-step.start .node svg, .sl .jh-step.end .node svg { color: #fff; }
.sl .jh-step .no { display: block; font-family: var(--font-display); font-size: .74rem; font-weight: 600; letter-spacing: .14em; color: var(--subtle); margin-bottom: .35rem; }
.sl .jh-step h4 { font-family: var(--font-display); font-size: .97rem; font-weight: 600; line-height: 1.3; min-height: 2.6em; }
@media (max-width: 1100px) { .sl .jh-step h4 { min-height: 0; } }
.sl .jh-step p { color: var(--muted); font-size: .83rem; line-height: 1.5; margin-top: .45rem; }
@media (max-width: 1100px) { .sl .journey-h { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; } .sl .journey-h::before { display: none; } }
@media (max-width: 620px) { .sl .journey-h { grid-template-columns: repeat(2, 1fr); } }

/* ---------- FILTRES ---------- */
.sl .filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 2.6rem; }
.sl .filters button {
  font-family: var(--font-display); font-size: .87rem; font-weight: 500;
  padding: .6rem 1.15rem; border-radius: var(--r-pill); cursor: pointer; color: var(--muted);
  background: var(--verre-fond); border: 1px solid var(--verre-bord); backdrop-filter: var(--verre-flou);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.sl .filters button:hover { color: #fff; border-color: rgba(255,255,255,.28); }
.sl .filters button.on { color: #fff; border-color: transparent; background: var(--gradient-brand); box-shadow: 0 10px 30px -12px rgba(214,32,39,.8); }

/* ---------- GRILLES ET CARTES ---------- */
.sl .grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(4, 1fr); }
.sl .grid.g3 { grid-template-columns: repeat(3, 1fr); }
.sl .grid.g2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .sl .grid, .sl .grid.g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sl .grid, .sl .grid.g3, .sl .grid.g2 { grid-template-columns: 1fr; } }

.sl .card { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--surface); border: var(--b1);
  display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s ease, box-shadow .4s ease; }
.sl .card:hover { transform: translateY(-6px); border-color: rgba(214,32,39,.5); box-shadow: var(--shadow); }
.sl .card.hide { display: none; }
.sl .card-media { position: relative; overflow: hidden; aspect-ratio: 3/2; background: var(--surface-2); }
.sl .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.sl .card:hover .card-media img { transform: scale(1.07); }
.sl .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10,10,12,.85) 100%); }
.sl .card-loc { position: absolute; left: .8rem; top: .8rem; z-index: 2; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .75rem; border-radius: var(--r-pill); background: rgba(10,10,12,.62); backdrop-filter: blur(12px);
  border: 1px solid var(--verre-bord); color: #E4E4EC; }
.sl .card-body { padding: 1.25rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.sl .card-body h3 { font-size: 1.12rem; }
.sl .card-body p { color: var(--muted); font-size: .9rem; margin-top: .6rem; flex: 1; }
.sl .card-link { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display);
  font-size: .87rem; font-weight: 600; color: var(--primary-hover); transition: gap .25s ease; }
.sl .card:hover .card-link { gap: .8rem; }
.sl .card-link svg { width: 15px; height: 15px; }
.sl .badge-done { position: absolute; right: .8rem; top: .8rem; z-index: 2; font-size: .7rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: .35rem .7rem; border-radius: var(--r-pill); background: var(--gradient-brand); color: #fff; }

/* ---------- PARTENAIRES ---------- */
.sl .partner { padding: 2rem 1.8rem; border-radius: var(--r-md); background: var(--surface); border: var(--b1); transition: border-color .35s ease, transform .35s ease; }
.sl .partner:hover { border-color: rgba(214,32,39,.5); transform: translateY(-5px); }
.sl .partner .init { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 700; font-size: 1.1rem; color: #fff; background: var(--gradient-brand); margin-bottom: 1.3rem; }
.sl .partner h3 { font-size: 1.12rem; }
.sl .partner .role { color: var(--primary-hover); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .35rem; font-weight: 600; }
.sl .partner p { color: var(--muted); font-size: .93rem; margin-top: .9rem; }

/* ---------- FAQ ---------- */
.sl .faq { max-width: 880px; margin-inline: auto; display: grid; gap: .8rem; }
.sl .faq details { background: var(--surface); border: var(--b1); border-radius: var(--r-md); overflow: hidden; transition: border-color .3s ease; }
.sl .faq details[open] { border-color: rgba(214,32,39,.45); }
.sl .faq summary { list-style: none; cursor: pointer; padding: 1.25rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.sl .faq summary::-webkit-details-marker { display: none; }
.sl .faq summary .chev { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); transition: transform .35s ease, background .3s ease, border-color .3s ease; }
.sl .faq details[open] summary .chev { transform: rotate(45deg); background: var(--gradient-brand); border-color: transparent; }
.sl .faq summary .chev svg { width: 14px; height: 14px; }
.sl .faq .answer { padding: 0 1.5rem 1.4rem; color: var(--muted); font-size: .96rem; }

/* ---------- BANDE CTA ---------- */
.sl .cta-section { margin-top: -1px; padding-top: clamp(4rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--bg-deep) 0%, #060608 30%, var(--bg) 68%); }
.sl .cta-band { position: relative; overflow: hidden; border-radius: var(--r-lg); border: var(--b1); background: var(--surface);
  padding: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.sl .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 50% 0%, rgba(214,32,39,.28), transparent 68%); }
.sl .cta-band > * { position: relative; }
.sl .cta-band h2 { max-width: 26ch; margin-inline: auto; }
.sl .cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-top: 2rem; }

/* ---------- CONTACT ---------- */
.sl .contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 940px) { .sl .contact { grid-template-columns: 1fr; } }
.sl .form-card { background: var(--surface); border: var(--b1); border-radius: var(--r-lg); padding: clamp(1.6rem, 3vw, 2.4rem); }
.sl .field { margin-bottom: 1rem; }
.sl .field label { display: block; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; }
.sl .field input, .sl .field textarea, .sl .field select {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--border);
  color: #fff; transition: border-color .25s ease, box-shadow .25s ease; }
.sl .field input:focus, .sl .field textarea:focus, .sl .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(214,32,39,.16); }
.sl .field textarea { min-height: 130px; resize: vertical; }
.sl .info-row { display: flex; gap: 1rem; align-items: center; padding: 1.15rem 1.2rem; border-radius: var(--r-md); background: var(--surface); border: var(--b1); margin-bottom: .9rem; transition: border-color .3s ease; width: 100%; text-align: left; cursor: pointer; }
.sl .info-row:hover { border-color: rgba(214,32,39,.5); }
.sl .info-row.static { cursor: default; }
.sl .info-row .ic { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: rgba(214,32,39,.12); border: 1px solid rgba(214,32,39,.28); color: var(--primary-hover); }
.sl .info-row .ic svg { width: 20px; height: 20px; }
.sl .info-row .txt { display: block; }
.sl .info-row .lbl { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); }
.sl .info-row strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: normal; text-transform: none; color: var(--text); }
.sl .info-row .chev { margin-left: auto; color: var(--subtle); transition: transform .25s ease; }
.sl .tel-block { position: relative; }
.sl .tel-block[data-open="1"] .chev { transform: rotate(180deg); }

.sl .next-steps { margin-top: 1.8rem; padding: 1.6rem 1.5rem; border-radius: var(--r-md);
  background: var(--verre-fond); border: 1px solid var(--verre-bord); box-shadow: var(--verre-reflet);
  backdrop-filter: var(--verre-flou); -webkit-backdrop-filter: var(--verre-flou); }
.sl .next-steps h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); font-weight: 600; }
.sl .next-steps ol { margin-top: 1.2rem; display: grid; gap: .95rem; }
.sl .next-steps li { display: flex; gap: .85rem; align-items: flex-start; color: var(--muted); font-size: .93rem; }
.sl .next-steps li span { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .78rem; font-weight: 700; color: #fff; background: var(--gradient-brand); }

/* ---------- PIED DE PAGE ---------- */
.sl .site-foot { background: var(--bg-deep); border-top: 1px solid var(--border); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.sl .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; }
@media (max-width: 900px) { .sl .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sl .foot-grid { grid-template-columns: 1fr; } }
.sl .foot-grid h5 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--subtle); margin-bottom: 1.1rem; font-weight: 600; }
.sl .foot-grid li { margin-bottom: .6rem; }
.sl .foot-grid a { color: var(--muted); font-size: .93rem; transition: color .22s ease; }
.sl .foot-grid a:hover { color: var(--primary-hover); }
.sl .foot-brand p { color: var(--muted); font-size: .93rem; margin-top: 1.1rem; max-width: 34ch; }
.sl .foot-bottom { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center; color: var(--subtle); font-size: .84rem; }
.sl .foot-bottom a { color: var(--muted); }
.sl .foot-bottom a:hover { color: var(--primary-hover); }

/* ---------- ANIMATIONS AU DÉFILEMENT ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sl .card, .sl .stat, .sl .pill, .sl .jstep, .sl .partner, .sl .faq details, .sl .info-row, .sl .form-card {
      animation: sl-rise .8s cubic-bezier(.2,.8,.2,1) both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    .sl .split-media { animation: sl-left .9s cubic-bezier(.2,.8,.2,1) both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
  }
  .sl .hero-kicker, .sl .hero h1, .sl .hero .lead, .sl .hero-actions, .sl .hero-foot { animation: sl-in .8s cubic-bezier(.2,.8,.2,1) both; }
  .sl .hero h1 { animation-delay: .08s; }
  .sl .hero .lead { animation-delay: .18s; }
  .sl .hero-actions { animation-delay: .28s; }
  .sl .hero-foot { animation-delay: .38s; }
}
@keyframes sl-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes sl-left { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes sl-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sl *, .sl *::before, .sl *::after { animation: none !important; transition: none !important; }
  .sl .marquee-track { flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* ---------- HALO DE CURSEUR ---------- */
.sl .cursor-glow { position: fixed; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(214,32,39,.14), transparent 62%); transform: translate(-50%,-50%); transition: opacity .5s ease; }
@media (hover: hover) and (pointer: fine) { .sl .cursor-glow.on { opacity: 1; } }

/* ---------- FICHIER DE RÉVISION : une vue à la fois ---------- */
.sl .page[hidden] { display: none; }
/* ---------- FORMULAIRE CONTACT FORM 7 ---------- */
.sl .form-card .wpcf7-form-control-wrap { display: block; }
.sl .form-card .wpcf7-not-valid-tip { color: var(--primary-hover); font-size: .82rem; margin-top: .35rem; }
.sl .form-card .wpcf7-response-output {
  margin: 1.2rem 0 0; padding: .9rem 1.1rem; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: .92rem;
}
.sl .form-card form.sent .wpcf7-response-output { border-color: rgba(76,175,80,.5); background: rgba(76,175,80,.10); }
.sl .form-card form.invalid .wpcf7-response-output,
.sl .form-card form.failed .wpcf7-response-output { border-color: rgba(214,32,39,.55); background: rgba(214,32,39,.10); }
.sl .form-card .wpcf7-spinner { display: block; margin: .8rem auto 0; }
.sl .form-card input[type="submit"] { width: 100%; margin-top: .4rem; cursor: pointer; }
.sl .form-card input[type="submit"].btn-primary { background: var(--gradient-brand); color: #fff; border: 0; }
.sl .form-card input[type="submit"].btn-primary:hover { box-shadow: 0 14px 40px -14px rgba(214,32,39,.75); }
.sl .form-card .wpcf7-list-item { margin: 0; }


/* ---------- BANDEAU TEMOINS (COOKIES) ---------- */
.sl-cookies {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(140%); bottom: 1.1rem;
  width: min(720px, calc(100% - 1.6rem)); z-index: 9000;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1.05rem 1.25rem; border-radius: 18px;
  background: rgba(11,11,14,.82); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 26px 70px -26px rgba(0,0,0,.9);
  font-family: 'Inter', -apple-system, system-ui, sans-serif; color: #fff;
  opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.sl-cookies.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.sl-cookies p { margin: 0; font-size: .88rem; line-height: 1.6; color: #C9C9D2; flex: 1 1 300px; }
.sl-cookies a { color: #EE3A40; text-decoration: none; }
.sl-cookies a:hover { text-decoration: underline; }
.sl-cookies .sl-ck-actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.sl-cookies button {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 600; font-size: .85rem;
  padding: .7rem 1.2rem; border-radius: 999px; border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.sl-cookies button:hover { transform: translateY(-2px); }
.sl-cookies .sl-ck-ok { background: linear-gradient(135deg,#93131A 0%,#D62027 55%,#FF7A5A 100%); color: #fff; }
.sl-cookies .sl-ck-ok:hover { box-shadow: 0 14px 40px -14px rgba(214,32,39,.75); }
.sl-cookies .sl-ck-no { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.34); }
.sl-cookies .sl-ck-no:hover { background: #fff; color: #0A0A0C; }
@media (max-width: 560px) {
  .sl-cookies { flex-direction: column; align-items: stretch; text-align: left; }
  .sl-cookies .sl-ck-actions { justify-content: stretch; }
  .sl-cookies .sl-ck-actions button { flex: 1; }
}

/* ---------- CORRECTIF : NAVIGATION MOBILE ----------
   Le bouton menu doit apparaitre des que la barre de navigation est repliee,
   sinon les visiteurs sur telephone n'ont aucun moyen de naviguer.          */
@media (max-width: 1140px) {
  .sl .burger { display: grid; }
}

/* Bandeau temoins : plus compact sur petit ecran */
@media (max-width: 560px) {
  .sl-cookies { padding: .9rem 1rem; gap: .7rem; bottom: .7rem; }
  .sl-cookies p { font-size: .8rem; line-height: 1.5; flex: 0 1 auto; }
  .sl-cookies button { padding: .62rem 1rem; font-size: .8rem; }
}

/* Menu deroulant mobile : fond opaque garanti, meme sans effet de verre */
@media (max-width: 1140px) {
  .sl .nav.open {
    background: rgba(11,11,14,.97);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.95);
  }
}

/* ==========================================================================
   AJUSTEMENTS — révision du 21 août 2026
   ========================================================================== */

/* Les titres de section tiennent sur une seule ligne sur grand écran ;
   le paragraphe d'intro garde une largeur de lecture confortable. */
.sl .sec-head { max-width: 100%; }
.sl .sec-head h2 { max-width: none; text-wrap: balance; }
.sl .sec-head > p.lead { max-width: 68ch; }
.sl .sec-head.center > p.lead { margin-inline: auto; }

/* Le menu « Appelez-nous » du bloc d'appel à l'action n'est plus coupé
   par le bord arrondi de la bande. */
.sl .cta-band { overflow: visible; }
.sl .cta-band::before { border-radius: inherit; }
.sl .cta-section { position: relative; z-index: 4; }
.sl .cta-band .tel-pop { z-index: 80; }

/* Colonne des coordonnées alignée sur la hauteur du formulaire. */
@media (min-width: 941px) {
  .sl .contact { align-items: center; }
}

/* Fil d'Ariane retiré du site. */
.sl .crumbs { display: none; }

/* Le menu téléphone du bloc d'appel à l'action est centré sous son bouton.
   On utilise `translate` et non `transform` : l'animation d'ouverture remet
   `transform: none` en fin de course et annulerait le centrage. */
.sl .tel.tel-center .tel-pop { left: 50%; right: auto; transform: none; translate: -50% 0; }

/* Survol des blocs d'information : au lieu d'un simple contour rouge vif,
   le bloc s'éclaircit, se soulève légèrement et son icône s'anime. */
.sl .info-row, .sl .pill {
  transition: border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.sl .info-row:hover, .sl .pill:hover {
  border-color: rgba(255,255,255,.20);
  background: var(--surface-2);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.9);
}
.sl .info-row .ic, .sl .pill .ic {
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}
.sl .info-row:hover .ic, .sl .pill:hover .ic {
  background: rgba(214,32,39,.20);
  border-color: rgba(214,32,39,.45);
  transform: scale(1.06);
}

/* Titre de page : une seule ligne quand la longueur le permet. */
.sl .page-head h1 { max-width: 40ch; text-wrap: balance; }

/* ==========================================================================
   AJUSTEMENTS — révision 2
   ========================================================================== */

/* Un h1 placé dans un en-tête de section garde l'allure d'un titre de section. */
.sl .sec-head h1 {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700;
  line-height: 1.08; letter-spacing: -.02em; margin-top: 1rem;
  max-width: none; text-wrap: balance;
}

/* Le trait vertical du parcours s'arrête à la dernière étape. */
.sl .journey::before { bottom: 66px; }

/* Page Contact : la colonne des coordonnées suit le défilement du formulaire. */
@media (min-width: 941px) {
  .sl .contact { align-items: start; }
  .sl .contact > :first-child { position: sticky; top: 92px; align-self: start; }
}

/* `overflow-x: hidden` crée un conteneur de défilement qui neutralise
   `position: sticky` ; `clip` masque le débordement sans cet effet. */
.sl { overflow-x: clip; }

/* ---------- SÉLECTEUR DE LANGUE ---------- */
.sl .lang {
  display: inline-flex; align-items: center; gap: .15rem;
  padding: .15rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .05em;
}
.sl .lang > a, .sl .lang > span {
  display: inline-block; padding: .26rem .6rem; border-radius: var(--r-pill); line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.sl .lang > span { background: var(--gradient-brand); color: #fff; }
.sl .lang > a { color: var(--muted); }
.sl .lang > a:hover { background: rgba(255,255,255,.10); color: #fff; }
@media (max-width: 620px) {
  .sl .topbar .tb-right { gap: .85rem; }
  .sl .topbar a.mail { display: none; }
}

/* La photo et les repères de la section « Notre approche » sont alignés
   sur le même axe : plus de décalage vers le bas de l'image. */
.sl .approche-body { align-items: center; }
.sl .approche-body .split-media { margin-top: 0; }

/* Menu mobile : le panneau s'ouvre sous le bouton, ancre en haut a droite.
   Sans cette regle, le panneau herite du justify-self: center de la barre
   de navigation et s'affiche retreci au milieu de la page. */
@media (max-width: 1140px) {
  .sl .nav {
    justify-self: end;
    left: auto;
    right: 1.25rem;
    width: min(280px, calc(100vw - 2.5rem));
    transform-origin: top right;
  }
  .sl .nav a { text-align: left; }
}

/* ==========================================================================
   ACCESSIBILITE — revision du 22 aout 2026
   ========================================================================== */

/* Les petits libelles secondaires (etapes du cycle, intitules de contact,
   mention de copyright) etaient a 3,5:1 sur fond sombre, sous le seuil de
   4,5:1 exige par le WCAG AA pour du texte de cette taille. Teinte eclaircie
   juste ce qu'il faut : la hierarchie visuelle avec --muted reste lisible. */
.sl {
  --subtle: #82828D;
}

/* Le bandeau des municipalites duplique sa liste pour boucler sans couture.
   Quand le visiteur a demande a reduire les animations, le defilement
   s'arrete : la copie n'a plus de raison d'etre et deplierait le bandeau sur
   dix lignes. On ne garde alors que la liste reelle. */
@media (prefers-reduced-motion: reduce) {
  .sl .marquee-item[aria-hidden="true"] { display: none; }
  .sl .marquee { padding-block: 1.4rem; }
  .sl .marquee-track { row-gap: 1rem; }
}

/* Apercu de l'approche sur l'accueil : les quatre reperes de la page Approche,
   presentes sur une rangee pour rester compacts entre les chiffres et les
   projets. Le survol suit celui des cartes plutot que le glissement lateral
   des reperes en colonne. */
.sl .approche-apercu .pills-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.sl .approche-apercu .pills-row .pill { flex-direction: column; gap: .85rem; }
.sl .approche-apercu .pills-row .pill:hover { transform: translateY(-4px); }
.sl .approche-apercu .pills-row .pill h4 { font-size: .97rem; line-height: 1.35; }
.sl .approche-apercu .sec-foot { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }
@media (max-width: 1000px) {
  .sl .approche-apercu .pills-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sl .approche-apercu .pills-row { grid-template-columns: 1fr; }
  .sl .approche-apercu .pills-row .pill { flex-direction: row; align-items: center; gap: 1rem; }
}

/* ==========================================================================
   MEDIAS DES FICHES DE PROJET — revision du 24 aout 2026
   ========================================================================== */

/* ----- Video : vignette locale, le lecteur YouTube n'est charge qu'au clic.
   Rien ne part vers Google tant que le visiteur n'a pas demande la video. ----- */
.sl .video { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--bg-deep); }
.sl .video::before { content: ""; display: block; padding-top: 56.25%; }
.sl .video > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl .video iframe { border: 0; }
.sl .video-play { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.sl .video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.sl .video-play:hover img, .sl .video-play:focus-visible img { transform: scale(1.03); opacity: .85; }
.sl .video-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gradient-brand); box-shadow: 0 18px 50px -12px rgba(214,32,39,.75);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.sl .video-play:hover .video-btn, .sl .video-play:focus-visible .video-btn { transform: translate(-50%,-50%) scale(1.08); }
.sl .video-btn svg { width: 26px; height: 26px; color: #fff; margin-left: 4px; }
.sl .video-play:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 3px; }
@media (max-width: 560px) { .sl .video-btn { width: 60px; height: 60px; } .sl .video-btn svg { width: 22px; height: 22px; } }

/* ----- Galerie photo ----- */
.sl .shots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.sl .shot { margin: 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.sl .shot img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.sl .shot:hover img { transform: scale(1.05); }
@media (max-width: 1100px) { .sl .shots { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px)  { .sl .shots { grid-template-columns: 1fr; } }

/* ----- Carte ----- */
.sl .map { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.sl .map iframe { display: block; width: 100%; height: clamp(320px, 42vw, 460px); border: 0; filter: grayscale(.35) contrast(1.05); }
.sl .map:hover iframe { filter: none; }

/* ----- Visionneuse plein ecran de la galerie ----- */
.sl .shot-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sl .shot-open:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 3px; }

.sl .loupe {
  position: fixed; inset: 0; z-index: 200; display: grid;
  grid-template-rows: auto 1fr auto; gap: .75rem; padding: clamp(.75rem, 2vw, 1.5rem);
  background: rgba(6,6,8,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: sl-loupe-in .25s ease both;
}
@keyframes sl-loupe-in { from { opacity: 0; } to { opacity: 1; } }
.sl .loupe-haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sl .loupe-compteur { font-family: var(--font-display); font-size: .85rem; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
.sl .loupe-scene { position: relative; display: grid; place-items: center; min-height: 0; }
.sl .loupe-scene img {
  /* Centrage absolu : dans une rangee de grille, un max-height en pourcentage
     n'est pas fiable (la hauteur de reference reste indefinie) et l'image
     depassait le bas de l'ecran. Ancree sur les quatre cotes, la contrainte
     se calcule sur une hauteur definie. */
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: var(--r-md);
}
.sl .loupe-bas { display: flex; align-items: center; justify-content: center; gap: .75rem; }
.sl .loupe-legende { font-size: .85rem; color: var(--muted); text-align: center; max-width: 60ch; }

.sl .loupe button {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: 50%; cursor: pointer; color: #fff;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.sl .loupe button:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); }
.sl .loupe button:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 3px; }
.sl .loupe button svg { width: 20px; height: 20px; }
.sl .loupe-prec, .sl .loupe-suiv { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.sl .loupe-prec { left: 0; }
.sl .loupe-suiv { right: 0; }
.sl .loupe[data-seule="1"] .loupe-prec, .sl .loupe[data-seule="1"] .loupe-suiv { display: none; }
@media (max-width: 620px) {
  .sl .loupe button { width: 42px; height: 42px; }
  .sl .loupe-prec { left: -.4rem; } .sl .loupe-suiv { right: -.4rem; }
}
@media (prefers-reduced-motion: reduce) { .sl .loupe { animation: none; } }

/* ----- Bouton « Plan 2D » : le plan de lotissement en PDF ----- */
.sl .sec-foot { flex-wrap: wrap; gap: .85rem; }
.sl .btn-plan { gap: .55rem; }
.sl .btn-plan svg { width: 17px; height: 17px; flex: 0 0 auto; }
@media (max-width: 620px) {
  .sl .sec-foot[style*="flex-start"] { flex-wrap: wrap; }
  .sl .btn-plan { width: 100%; justify-content: center; }
}

/* ----- Carte de projet cliquable sur toute sa surface -----
   Le lien « En savoir plus » etend sa zone cliquable a la carte entiere par un
   pseudo-element. Il reste un seul vrai lien : rien de duplique pour les
   lecteurs d'ecran ni pour Google, et aucun JavaScript. Chaque carte ne
   contient qu'un lien, verifie sur les 184 cartes du site. */
.sl .card { cursor: pointer; }
.sl .card-link::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit;
}
/* Le contour de focus au clavier entoure la carte, pas seulement le libelle. */
.sl .card:has(.card-link:focus-visible) { outline: 2px solid var(--primary-hover); outline-offset: 3px; }
.sl .card:has(.card-link:focus-visible) .card-link { outline: none; }