@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/manrope-normal-400-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/manrope-normal-400-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mrs-saint-delafield-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/mrs-saint-delafield-normal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/source-serif-4-italic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/source-serif-4-normal-400-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/source-serif-4-normal-400-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Bati Habitat — feuille de styles
   1. Base   2. Animations   3. Composants   4. Adaptations mobile
   ============================================================ */

/* ---------- 1. Base ---------- */
body { margin:0; background:#FFFFFF; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
a { color:#2E7D8A; }
a:hover { color:#12303F; }
::selection { background:#6FB5C0; color:#0B1C26; }
:focus:not(:focus-visible) { outline:none; }
:focus-visible { outline:2px solid #6FB5C0; outline-offset:3px; border-radius:4px; }
html { scrollbar-width:thin; scrollbar-color:#6FB5C0 #E3EAED; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:#E3EAED; }
::-webkit-scrollbar-thumb { background:#9CBFC8; border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:#6FB5C0; }
::placeholder { color:#7F949E; }

.page { font-family:Manrope,system-ui,sans-serif; color:#1A2B35; background:#FFFFFF; overflow-x:hidden; position:relative; }
.wrap { max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.wrap-z { position:relative; z-index:2; }
.sec { padding:clamp(72px,9vw,112px) 0; }
.grain { position:absolute; inset:0; background-image:url(../img/noise.png); background-size:140px 140px; opacity:0.03; pointer-events:none; }
.ic { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }

.kicker { font-size:12px; font-weight:600; letter-spacing:0.2em; color:#6FB5C0; margin-bottom:16px; }
.kicker-teal { color:#2E7D8A; }
.h2 { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:clamp(30px,3.4vw,40px); line-height:1.15; color:#1A2B35; margin:0 0 16px; text-wrap:balance; }
.h2-light { color:#FFFFFF; }
.rule { width:40px; height:2px; background:#6FB5C0; }
.rule-mb { margin-bottom:24px; }
.sec-head { display:flex; flex-wrap:wrap; gap:32px; align-items:flex-end; justify-content:space-between; margin-bottom:52px; }
.sec-head-l { flex:1 1 420px; }
.sec-head-p { flex:1 1 340px; max-width:440px; font-size:16px; line-height:1.6; color:#5B6B73; margin:0; text-wrap:pretty; }

/* ---------- 2. Animations ---------- */
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
@keyframes riseIn { from { transform:translateY(105%); opacity:0;} to { transform:none; opacity:1;} }
@keyframes fadeUp { from { transform:translateY(14px); opacity:0;} to { transform:none; opacity:1;} }
@keyframes heroZoom { from { transform:scale(1.06);} to { transform:scale(1);} }
@keyframes scrollLine { 0% { transform:scaleY(0); transform-origin:top;} 45% { transform:scaleY(1); transform-origin:top;} 55% { transform:scaleY(1); transform-origin:bottom;} 100% { transform:scaleY(0); transform-origin:bottom;} }
@keyframes drawSig { from { clip-path:inset(0 100% 0 0);} to { clip-path:inset(0 0 0 0);} }
@keyframes drawCheck { from { stroke-dashoffset:44;} to { stroke-dashoffset:0;} }
@keyframes spin { to { transform:rotate(360deg);} }
@keyframes slideUp { from { transform:translateY(100%);} to { transform:none;} }
@keyframes drawIcon { from { stroke-dashoffset:400; } to { stroke-dashoffset:0; } }

/* ---------- 3. Composants ---------- */

/* En-tête */
.hdr { position:fixed; top:0; left:0; right:0; z-index:60; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid transparent; transform:translateY(0%); transition:background .3s ease,height .3s ease,border-color .3s ease,transform .35s ease; height:80px; }
.hdr.is-scrolled { background:rgba(11,28,38,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:rgba(255,255,255,0.12); }
.hdr-in { max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,48px); height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hdr-logo { display:flex; align-items:center; text-decoration:none; height:60px; transition:height .3s ease; }
.hdr-logo img { height:100%; width:auto; display:block; }
.hdr-right { display:flex; align-items:center; gap:10px; }
.hdr-progress { position:absolute; left:0; bottom:0; height:2px; width:0%; background:#6FB5C0; transition:width .1s linear; }

.hdr-tel-icon { width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,0.35); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all .2s ease; color:#6FB5C0; }
.hdr-tel-icon:hover { border-color:#6FB5C0 !important; background:rgba(111,181,192,0.12) !important; }
.hdr-tel-icon:active { transform:scale(0.98) !important; }
.hdr-tel { display:none; align-items:center; gap:12px; text-decoration:none; line-height:1; }
.hdr-tel-circle { flex:none; width:40px; height:40px; border-radius:999px; background:rgba(111,181,192,0.12); color:#6FB5C0; display:flex; align-items:center; justify-content:center; transition:background .2s ease; }
.hdr-tel:hover .hdr-tel-circle { background:#6FB5C0; color:#0B1C26; }
.hdr-tel-num { font-weight:600; font-size:17px; color:#FFFFFF; font-variant-numeric:tabular-nums; white-space:nowrap; transition:color .2s ease; }
.hdr-tel:hover .hdr-tel-num { color:#6FB5C0; }
.hdr-cta { display:inline-flex; align-items:center; gap:10px; background:#6FB5C0; color:#0B1C26; font-weight:600; font-size:14px; padding:12px 20px; border-radius:8px; text-decoration:none; transition:gap .2s ease,background .2s ease,transform .2s ease; }
.hdr-cta:hover { background:#8CC7D0 !important; gap:14px !important; color:#0B1C26; }
.hdr-cta:active { transform:scale(0.98) !important; }
.lbl-full { display:none; }
@media (min-width:768px) {
  .hdr { height:100px; }
  .hdr.is-scrolled { height:80px; }
  .hdr.is-hidden { transform:translateY(-110%); }
  .hdr-logo { height:76px; }
  .hdr.is-scrolled .hdr-logo { height:60px; }
  .hdr-tel-icon { display:none; }
  .hdr-tel { display:flex; }
  .lbl-full { display:inline; }
  .lbl-short { display:none; }
}
@media (min-width:1024px) {
  .hdr { background:rgba(11,28,38,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:rgba(255,255,255,0.12); }
  .hdr { height:112px; }
  .hdr.is-scrolled { height:88px; }
  .hdr-logo { height:88px; }
  .hdr.is-scrolled .hdr-logo { height:68px; }
}

/* Hero */
.hero { position:relative; background:#0B1C26; min-height:min(86vh,740px); display:flex; align-items:center; overflow:hidden; }
.hero-img { position:absolute; top:0; right:0; bottom:0; left:38%; overflow:hidden; clip-path:none; }
.hero-img-zoom { position:absolute; inset:0; background:linear-gradient(150deg,#12303F 0%,#0B1C26 100%); animation:heroZoom 1.6s cubic-bezier(.22,.61,.36,1) both; }
.hero-img-zoom img { width:100%; height:100%; object-fit:cover; object-position:78% 40%; display:block; }
.hero-veil { position:absolute; inset:0; display:block; background:linear-gradient(90deg,#0B1C26 0%,rgba(11,28,38,0.94) 20%,rgba(11,28,38,0.62) 45%,rgba(11,28,38,0.34) 72%,rgba(11,28,38,0.22) 100%); }
.hero-fade { position:absolute; inset:0; display:none; background:linear-gradient(to right,#0B1C26 0%,rgba(11,28,38,0.92) 12%,rgba(11,28,38,0.6) 24%,rgba(11,28,38,0.2) 34%,transparent 42%); }
.hero-dim { position:absolute; inset:0; background:rgba(11,28,38,0.75); display:none; }
.hero-mob { display:none; position:relative; z-index:2; width:100%; height:clamp(210px,58vw,300px); }
.hero-mob img { width:100%; height:100%; object-fit:cover; object-position:70% center; display:block; }
.hero-mob-fade { position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(to bottom,rgba(11,28,38,0) 0%,#0B1C26 100%); }
.hero-inner { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:calc(48px + 100px) clamp(20px,4vw,48px) 56px; width:100%; }
.hero-text { max-width:760px; }
.hero-kicker { font-size:12px; font-weight:600; letter-spacing:0.2em; color:#6FB5C0; margin-bottom:16px; animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) .05s both; }
.hero-title { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:clamp(40px,4vw,58px); line-height:1.24; color:#FFFFFF; margin:0 0 24px; max-width:720px; text-wrap:balance; }
.hero-title > span { display:block; padding-bottom:0.12em; margin-bottom:-0.12em; }
.hero-title > span > span { display:block; animation:riseIn .75s cubic-bezier(.22,.61,.36,1) both; }
.hero-title > span:nth-child(1) > span { animation-delay:.13s; }
.hero-title > span:nth-child(2) > span { animation-delay:.21s; }
.hero-title > span:nth-child(3) > span { animation-delay:.29s; }
.hero-p { font-size:17px; line-height:1.6; color:#C8D5DB; margin:0 0 32px; max-width:560px; text-wrap:pretty; animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) .37s both; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:48px; animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) .45s both; }
.btn-lg { display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:15px; padding:15px 26px; border-radius:8px; text-decoration:none; min-height:48px; }
.btn-primary { background:#6FB5C0; color:#0B1C26; transition:gap .2s ease,background .2s ease,transform .2s ease; }
.btn-primary:hover { background:#8CC7D0 !important; gap:14px !important; color:#0B1C26; }
.btn-primary:active { transform:scale(0.98) !important; }
.btn-ghost { border:1px solid rgba(255,255,255,0.5); color:#FFFFFF; background:transparent; transition:gap .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
.btn-ghost:hover { border-color:#6FB5C0 !important; color:#6FB5C0 !important; gap:14px !important; }
.btn-ghost:active { transform:scale(0.98) !important; }
.reassure { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:clamp(16px,2.6vw,32px); align-items:center; animation:fadeUp .6s cubic-bezier(.22,.61,.36,1) .53s both; }
.reassure > li:not(.reassure-sep) { display:flex; align-items:center; gap:12px; }
.reassure-sep { width:1px; height:34px; background:rgba(255,255,255,0.12); }
.reassure-ic { flex:none; width:42px; height:42px; border-radius:999px; background:rgba(111,181,192,0.12); display:flex; align-items:center; justify-content:center; }
.reassure-t { display:block; font-size:14.5px; font-weight:600; color:#FFFFFF; }
.reassure-s { display:block; font-size:13px; color:#C8D5DB; }
.reassure-num { font-variant-numeric:tabular-nums; }
.scrollhint { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; opacity:1; transition:opacity .3s ease; }
.scrollhint.is-off { opacity:0; }
.scrollhint-lbl { font-size:10.5px; font-weight:600; letter-spacing:0.2em; color:#C8D5DB; }
.scrollhint-line { width:1px; height:34px; background:#6FB5C0; animation:scrollLine 2.2s ease-in-out infinite; }
@media (max-width:767px) { .hero-dim { display:block; } }
@media (min-width:1024px) {
  .hero-img { left:36%; }
  .hero-veil { display:none; }
  .hero-fade { display:block; }
  .hero-text { max-width:640px; }
  .hero-title { font-size:clamp(36px,3.2vw,44px); }
}

/* Prestations */
.sec-prest { background:#F4F7F8; }
.prest-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:stretch; }
.prest { height:100%; display:flex; flex-direction:column; background:#FFFFFF; border-radius:12px; overflow:hidden; background-image:linear-gradient(#6FB5C0,#6FB5C0); background-repeat:no-repeat; background-position:top left; background-size:0% 2px; box-shadow:0 8px 30px rgba(11,28,38,0.08); transform:translateY(0px); transition:transform .2s ease,box-shadow .2s ease,background-size .3s ease; }
.prest:hover { background-size:100% 2px; box-shadow:0 16px 44px rgba(11,28,38,0.14); transform:translateY(-4px); }
.prest-ph { aspect-ratio:4/3; overflow:hidden; background:#E3EAED; flex:none; }
.prest-ph img { width:100%; height:100%; object-fit:cover; display:block; background:linear-gradient(150deg,#E3EAED 0%,#F4F7F8 100%); transform:scale(1); transition:transform .3s ease; }
.prest:hover .prest-ph img { transform:scale(1.05); }
.prest-badge { display:flex; justify-content:center; margin-top:-24px; position:relative; z-index:1; }
.prest-circle { width:112px; height:112px; border-radius:999px; background:#FFFFFF; border:1px solid #E3EAED; box-shadow:0 6px 18px rgba(11,28,38,0.06); display:flex; align-items:center; justify-content:center; color:#4A5560; transition:color .25s ease; }
.prest:hover .prest-circle { color:#2E7D8A; }
.prest-circle img { object-fit:contain; display:block; }
.prest-body { padding:20px 22px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; flex:1; }
.prest-t { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:22px; line-height:1.25; color:#1A2B35; margin:0; text-wrap:balance; }
.prest-p { font-size:15px; line-height:1.6; color:#5B6B73; margin:0; text-wrap:pretty; }
@media (min-width:640px) { .prest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1200px) { .prest-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* Réalisations */
.sec-real { position:relative; background:#0B1C26; overflow:hidden; }
.sec-head-real { gap:28px; margin-bottom:40px; }
.sec-head-real .sec-head-l { flex:1 1 400px; }
.filters { display:flex; flex-direction:column; align-items:flex-start; gap:10px; max-width:100%; }
.chips { position:relative; display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; max-width:100%; scrollbar-width:none; }
.chips-ind { position:absolute; top:0; left:0; width:0; height:39px; border-radius:999px; background:#6FB5C0; transition:left .3s cubic-bezier(.22,.61,.36,1),width .3s cubic-bezier(.22,.61,.36,1); }
.chip { position:relative; z-index:1; flex:none; background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,0.12); font-family:Manrope,sans-serif; font-weight:500; font-size:13.5px; padding:10px 18px; border-radius:999px; cursor:pointer; white-space:nowrap; transition:color .2s ease,border-color .2s ease,transform .2s ease; }
.chip.is-on { color:#0B1C26; border-color:#6FB5C0; font-weight:600; }
.chip:hover { border-color:#6FB5C0 !important; }
.chip:active { transform:scale(0.98) !important; }
.chips-count { font-size:12.5px; color:#C8D5DB; font-variant-numeric:tabular-nums; }

.real-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:stretch; }
.comp-col { min-width:0; height:auto; display:flex; opacity:1; transition:opacity .2s ease; flex-direction:column; gap:10px; }
.comp { position:relative; width:100%; flex:1; border-radius:12px; overflow:hidden; cursor:ew-resize; touch-action:none; user-select:none; -webkit-user-select:none; background:#12303F; }
.comp-after { position:absolute; inset:0; background:linear-gradient(150deg,#16394A 0%,#0F2735 100%); }
.comp-after img { width:100%; height:100%; object-fit:cover; object-position:50% 52%; display:block; }
.comp-clip { position:absolute; top:0; left:0; bottom:0; width:50%; overflow:hidden; }
.comp-before { position:absolute; top:0; left:0; bottom:0; width:200%; background:linear-gradient(150deg,#12303F 0%,#0B1C26 100%); }
.comp-before img { width:100%; height:100%; object-fit:cover; object-position:50% 52%; display:block; }
.comp-bar { position:absolute; top:0; bottom:0; left:50%; width:2px; background:#FFFFFF; transform:translateX(-1px); }
.comp-handle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:999px; background:#0B1C26; border:2px solid #FFFFFF; display:flex; align-items:center; justify-content:center; gap:3px; color:#FFFFFF; font-size:13px; }
.comp-tag { position:absolute; bottom:14px; background:rgba(11,28,38,0.75); color:#FFFFFF; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:6px; opacity:1; transition:opacity .2s ease; }
.comp-tag-a { left:14px; }
.comp-tag-b { right:14px; }
.comp-cap { margin:0; font-size:12.5px; color:#C8D5DB; position:relative; }

.tiles { min-width:0; height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto; gap:20px; }
.tile { position:relative; padding:0; border:0; width:100%; height:100%; min-height:0px; aspect-ratio:4/3; background:#12303F; border-radius:12px; overflow:hidden; cursor:pointer; animation:fadeIn .35s ease both; transition:transform .2s ease; }
.tile:active { transform:scale(0.99) !important; }
.tile-media { position:absolute; inset:0; background:linear-gradient(150deg,#16394A 0%,#0F2735 100%); display:flex; align-items:center; justify-content:center; }
.tile-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.tile-ov { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:4px; padding:16px; text-align:left; background:linear-gradient(to top,rgba(11,28,38,0.92) 0%,rgba(11,28,38,0.45) 45%,rgba(11,28,38,0) 100%); opacity:0; transition:opacity .2s ease; }
.tile-ov:hover { opacity:1 !important; }
.tile-zoom { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:999px; background:rgba(11,28,38,0.7); border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; }
.tile-cat { font-size:11px; font-weight:600; letter-spacing:0.14em; color:#6FB5C0; text-transform:uppercase; }
.tile-ville { font-size:14px; font-weight:600; color:#FFFFFF; }
/* Voile « +N » de la dernière tuile de « Tous » (créé par main.js, N calculé) */
.tile-more { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(11,28,38,0.62); color:#FFFFFF; font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:clamp(34px,3.4vw,48px); line-height:1; pointer-events:none; transition:background .2s ease,color .2s ease; }
.tile[data-more]:hover .tile-more, .tile[data-more]:focus-visible .tile-more { background:rgba(11,28,38,0.42); color:#6FB5C0; }
.tile[data-more] .tile-ov { display:none; }
@media (max-width:767px) { .comp-col.is-off { display:none; opacity:0; } }
@media (min-width:768px) { .tiles { grid-template-columns:var(--tile-cols,repeat(3,minmax(0,1fr))); } }
@media (min-width:1024px) {
  .real-grid { grid-template-columns:5fr 7fr; }
  .comp-col { height:clamp(400px,34vw,520px); }
  .tiles { height:clamp(374px,32vw,494px); grid-template-rows:repeat(var(--tile-rows,2),minmax(0,1fr)); }
  .tile { aspect-ratio:auto; }
}

/* Savoir-faire */
.sf { background:#FFFFFF; display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; }
.sf-photo { position:relative; min-height:auto; }
.sf-photo-ph { position:absolute; inset:0; background:linear-gradient(150deg,#E3EAED 0%,#F4F7F8 100%); display:flex; align-items:center; justify-content:center; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,#000 72%,transparent 100%); }
/* Photo de l'artisan : elle remplit le cadre, qui porte deja le fondu (masque vers
   le bas en mobile, vers la droite a partir de 1024 px) et le ratio 4:5 sous 768 px. */
.sf-photo-ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Entre 768 et 1023 px le cadre passe en 16/10 : sur un portrait 4:5, seule la moitie
   de la hauteur reste visible et un cadrage centre couperait le haut du crane. Le point
   de cadrage est donc remonte sur le visage. Geometrie inchangee. */
@media (min-width:768px) and (max-width:1023px) { .sf-photo-ph img { object-position:50% 22%; } }
.sf-glass { position:absolute; right:20px; bottom:20px; display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:999px; background:rgba(255,255,255,0.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.9); box-shadow:0 8px 30px rgba(11,28,38,0.08); }
.sf-glass span { font-size:13px; font-weight:600; color:#1A2B35; white-space:nowrap; }
.sf-text { padding:clamp(48px,8vw,64px) clamp(20px,4vw,48px) 32px; max-width:620px; }
.sf-p { font-size:16.5px; line-height:1.6; color:#5B6B73; margin:0 0 24px; text-wrap:pretty; }
/* Signature manuscrite. Le clip-path de `drawSig` se cale sur la boîte de bordure et,
   avec animation-fill-mode:both, reste actif après l'animation. La marge intérieure
   donne la place aux boucles du K, du P et du q (l'encre déborde de 5 px en haut,
   1,7 px en bas, 1,6 px à gauche et 12,9 px à droite de la boîte de texte) ; les marges
   négatives la compensent exactement, pour que la position du texte et la hauteur de la
   section restent celles du prototype. Un peu moins à gauche qu'à droite pour que la boîte
   reste dans la colonne de texte à 390 px. */
.sf-sig { font-family:'Mrs Saint Delafield',cursive; font-size:46px; line-height:1.1; color:#0B1C26; width:fit-content; overflow:visible; padding:12px 24px 12px 16px; margin:-12px -24px -12px -16px; animation:none; }
.sf-sig.is-on { animation:drawSig 1.2s cubic-bezier(.22,.61,.36,1) both; }
.eng { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; align-content:center; border-left:0; padding:0 clamp(20px,4vw,48px) clamp(48px,8vw,64px); }
.eng-row { display:flex; align-items:center; gap:16px; }
.eng-ic { flex:none; width:48px; display:flex; align-items:center; justify-content:center; transition:filter .25s ease; filter:none; }
.eng-row:hover .eng-ic { filter:hue-rotate(-8deg) saturate(2.4) brightness(0.95); }
.eng-ic img { object-fit:contain; display:block; }
.eng-lbl { font-size:16px; font-weight:600; color:#1A2B35; }
@media (min-width:1024px) {
  .sf { grid-template-columns:minmax(260px,1fr) minmax(420px,1.6fr) minmax(280px,1fr); }
  .sf-photo { min-height:clamp(440px,36vw,560px); }
  /* Pas de fondu sur ordinateur : la photo est nette jusqu'a son bord droit.
     Il faut ecrire « none » et non retirer la declaration, sinon le fondu vers
     le bas defini plus haut (pour le telephone) s'appliquerait ici. */
  .sf-photo-ph { -webkit-mask-image:none; mask-image:none; }
  .sf-glass { right:22%; }
  .sf-text { padding:clamp(72px,7vw,104px) clamp(28px,3vw,48px); }
  .eng { grid-template-columns:minmax(0,1fr); border-left:1px solid #E3EAED; padding:clamp(72px,7vw,104px) clamp(28px,3vw,48px) clamp(72px,7vw,104px) clamp(28px,3vw,44px); }
}

/* Avis */
.sec-avis { background:#F4F7F8; padding:clamp(72px,9vw,112px) 0 0; }
.avis-wrap { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,4vw,48px); align-items:start; }
.avis-head { max-width:340px; }
.avis-col { min-width:0; }
.avis-track { display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:85%; gap:20px; align-items:stretch; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.avis { position:relative; scroll-snap-align:start; margin:0; height:100%; background:#FFFFFF; border-radius:12px; box-shadow:0 8px 30px rgba(11,28,38,0.08); padding:24px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; }
.avis:hover { transform:translateY(-4px) !important; box-shadow:0 16px 44px rgba(11,28,38,0.14) !important; }
.avis-quote { position:absolute; top:-14px; right:10px; font-family:'Source Serif 4',Georgia,serif; font-size:96px; line-height:1; color:rgba(111,181,192,0.15); pointer-events:none; }
.avis-cap { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.avis-ini { flex:none; width:42px; height:42px; border-radius:999px; background:rgba(111,181,192,0.2); color:#2E7D8A; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; }
.avis-nom { display:block; font-size:15px; font-weight:600; color:#1A2B35; }
.avis-ville { display:block; font-size:13px; color:#5B6B73; }
.avis-stars { color:#6FB5C0; font-size:15px; letter-spacing:2px; margin-bottom:12px; }
.avis-trav { font-size:14.5px; font-weight:600; color:#1A2B35; margin-bottom:8px; }
.avis-txt { margin:0; font-size:14.5px; line-height:1.6; color:#5B6B73; text-wrap:pretty; }
.avis-dots { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.avis-dots span { width:8px; height:8px; border-radius:999px; background:#C8D5DB; transition:background .2s ease; }
.avis-dots span.is-on { background:#2E7D8A; }
@media (min-width:768px) {
  .avis-track { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); overflow-x:visible; }
  .avis-dots { display:none; }
}
@media (min-width:1024px) { .avis-wrap { grid-template-columns:minmax(240px,0.8fr) minmax(0,2.2fr); } }

/* Fournisseurs */
.sec-fourn { background:#F4F7F8; padding:56px 0 64px; }
.fourn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; align-items:center; justify-items:center; }
.fourn-grid img { width:100%; max-width:140px; max-height:56px; height:auto; object-fit:contain; display:block; }
@media (min-width:768px) {
  .sec-fourn { padding:72px 0 96px; }
  .fourn-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
  .fourn-grid img { max-width:160px; max-height:64px; }
}
@media (min-width:1024px) {
  .fourn-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:48px; }
  .fourn-grid img { max-width:190px; max-height:80px; }
}

/* Matériel */
/* La photo garde ses proportions naturelles (largeur 100 %, hauteur auto) : jamais rognée ni
   déformée. Texte au-dessus sous 1024 px ; au-delà, photo à gauche et texte à droite. */
.sec-mat { background:#F4F7F8; padding:0 0 clamp(72px,9vw,112px); }
.mat-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,4vw,56px); align-items:center; }
.mat-h2 { color:#0B1C26; }
.mat-h2 > span { display:block; }
.mat-p { font-size:16px; line-height:1.6; color:#5B6B73; margin:0; max-width:560px; text-wrap:pretty; }
.mat-photo { border-radius:12px; overflow:hidden; background:#E3EAED; }
.mat-photo img { width:100%; height:auto; display:block; }
@media (min-width:1024px) {
  .mat-grid { grid-template-columns:minmax(0,5fr) minmax(0,6fr); }
  .mat-photo { grid-column:1; grid-row:1; }
  .mat-text { grid-column:2; grid-row:1; }
}

/* Contact */
.contact-holder { background:#F4F7F8; }
.sec-contact { position:relative; background:#0B1C26; padding:clamp(72px,9vw,112px) 0 clamp(64px,8vw,96px); border-top-left-radius:50% 34px; border-top-right-radius:50% 34px; margin-top:-1px; overflow:hidden; }
.contact-tri { position:absolute; left:0; bottom:0; width:clamp(72px,9vw,120px); height:clamp(47px,6vw,79px); background:#6FB5C0; clip-path:polygon(0 100%,0 0,100% 100%); }
.contact-tri2 { position:absolute; left:0; bottom:0; width:clamp(55px,6.6vw,90px); height:clamp(28px,3.6vw,47px); clip-path:polygon(0 100%,0 26%,100% 100%); background:linear-gradient(150deg,#16394A 0%,#0F2735 100%); }
.contact-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.5vw,44px); align-items:start; }
.contact-intro { max-width:400px; }
.contact-intro-p { font-size:16px; line-height:1.6; color:#C8D5DB; margin:0; text-wrap:pretty; }
.contact-form-col { min-width:0; }

.sent { background:#12303F; border:1px solid #6FB5C0; border-radius:12px; padding:36px 32px; text-align:center; animation:fadeIn .3s ease both; }
.sent > svg { display:block; margin:0 auto 16px; }
.sent > svg path { animation:drawCheck .7s cubic-bezier(.22,.61,.36,1) .1s both; }
.sent h3 { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:24px; color:#FFFFFF; margin:0 0 8px; text-wrap:balance; }
.sent p { font-size:16px; color:#C8D5DB; margin:0 0 22px; }
.sent .btn-ghost { display:inline-flex; align-items:center; gap:10px; font-family:Manrope,sans-serif; font-weight:600; font-size:15px; padding:14px 24px; border-radius:8px; min-height:48px; cursor:pointer; }

.form { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.fld { min-width:0; }
.fld-full { grid-column:1/-1; min-width:0; }
.fld > label { display:block; font-size:13px; font-weight:600; color:#C8D5DB; margin-bottom:7px; }
.fld > label span { color:#6FB5C0; }
.fld-in { position:relative; }
.fld-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; }
.fld-ok { position:absolute; right:14px; top:50%; transform:translateY(-50%); }
.fld-caret { position:absolute; right:16px; top:50%; transform:translateY(-50%); color:#6FB5C0; font-size:11px; pointer-events:none; }
input[data-field], select[data-field] { width:100%; background:#12303F; border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#FFFFFF; font-family:Manrope,sans-serif; font-size:16px; padding:13px 40px; min-height:48px; transition:border-color .2s ease,box-shadow .2s ease; }
select[data-field] { appearance:none; -webkit-appearance:none; cursor:pointer; }
select[data-field] option { background:#12303F; color:#FFFFFF; }
select[data-field] option[value=""] { color:#C8D5DB; }
.fld-num { font-variant-numeric:tabular-nums; }
.form textarea { width:100%; background:#12303F; border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#FFFFFF; font-family:Manrope,sans-serif; font-size:16px; line-height:1.6; padding:13px 14px; resize:vertical; transition:border-color .2s ease,box-shadow .2s ease; }
input.has-err, select.has-err, textarea.has-err { border-color:#6FB5C0; }
input[data-field]:focus, select[data-field]:focus, .form textarea:focus { border-color:#6FB5C0 !important; box-shadow:0 0 0 3px rgba(111,181,192,0.25) !important; outline:none !important; }
.fld-err { margin:7px 0 0; font-size:12.5px; color:#6FB5C0; }
.fld-foot { display:flex; justify-content:space-between; gap:12px; margin-top:7px; }
.fld-foot .fld-err { margin:0; }
.fld-count { margin-left:auto; font-size:12px; color:#C8D5DB; font-variant-numeric:tabular-nums; }
.send-err { grid-column:1/-1; margin:0; font-size:14px; line-height:1.5; color:#6FB5C0; }
.submit { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; background:#6FB5C0; color:#0B1C26; border:0; border-radius:8px; font-family:Manrope,sans-serif; font-weight:700; font-size:15.5px; padding:16px; min-height:52px; cursor:pointer; opacity:1; transition:gap .2s ease,background .2s ease,transform .2s ease; }
.submit:hover { background:#8CC7D0 !important; gap:14px !important; }
.submit:active { transform:scale(0.98) !important; }
.submit[disabled] { cursor:not-allowed; opacity:0.75; }
.spin { width:17px; height:17px; border-radius:999px; border:2px solid rgba(11,28,38,0.3); border-top-color:#0B1C26; animation:spin .7s linear infinite; display:block; }
.form-legal { margin:14px 0 0; font-size:12.5px; line-height:1.6; color:#C8D5DB; }
.form-lock { display:inline-block; vertical-align:-2px; margin-right:7px; }
.lnk { background:none; border:0; padding:0 0 1px; color:#6FB5C0; font-family:Manrope,sans-serif; font-size:12.5px; cursor:pointer; background-image:linear-gradient(#6FB5C0,#6FB5C0); background-repeat:no-repeat; background-position:left bottom; background-size:0% 1px; transition:background-size .2s ease; }
.lnk:hover { background-size:100% 1px !important; }
.lnk-legal { color:#C8D5DB; font-size:13px; transition:background-size .2s ease,color .2s ease; }
.lnk-legal:hover { color:#6FB5C0 !important; background-size:100% 1px !important; }

.coords { min-width:0; border-left:0; padding-left:0; display:grid; gap:14px; }
.coord-row { display:flex; align-items:center; gap:10px; }
.coord { display:flex; align-items:center; gap:14px; color:#FFFFFF; text-decoration:none; font-size:15px; padding:6px 8px; margin-left:-8px; border-radius:8px; transition:background .2s ease,color .2s ease; }
.coord-row > .coord { flex:1; white-space:nowrap; }
.coord-num { font-variant-numeric:tabular-nums; }
.coord .ic { flex:none; }
a.coord:hover { color:#6FB5C0 !important; background:rgba(111,181,192,0.08) !important; }
.coord-txt { color:#C8D5DB; border-radius:0; transition:none; }
.copy { flex:none; width:34px; height:34px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); background:transparent; color:#C8D5DB; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.copy:hover { border-color:#6FB5C0 !important; color:#6FB5C0 !important; }
.copy:active { transform:scale(0.98) !important; }
@media (min-width:768px) { .form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) {
  .contact-grid { grid-template-columns:minmax(260px,0.95fr) minmax(360px,1.5fr) minmax(290px,0.95fr); }
  .coords { border-left:1px solid rgba(255,255,255,0.12); padding-left:clamp(20px,2.5vw,36px); }
}

/* Pied de page */
.foot { position:relative; background:#07131A; border-top:1px solid rgba(111,181,192,0.4); padding:clamp(48px,6vw,72px) 0 0; overflow:hidden; }
.foot-word { position:absolute; left:0; right:0; bottom:-0.18em; text-align:center; font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:clamp(80px,15vw,220px); line-height:0.9; color:rgba(255,255,255,0.03); white-space:nowrap; pointer-events:none; }
.foot-top { display:flex; flex-wrap:wrap; gap:clamp(24px,3vw,40px); align-items:center; justify-content:space-between; text-align:center; padding-bottom:clamp(36px,5vw,56px); }
.foot-brand { flex:0 1 auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
.foot-brand img { height:90px; width:auto; display:block; }
.foot-brand p { margin:0; font-size:14px; color:#C8D5DB; }
.foot-mid { flex:1 1 380px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.foot-tag { margin:0; font-family:'Source Serif 4',Georgia,serif; font-style:italic; font-size:clamp(16px,1.5vw,20px); color:#FFFFFF; white-space:nowrap; }
.foot-serv { margin:0; font-size:clamp(11px,0.9vw,12px); font-weight:600; letter-spacing:0.12em; color:#6FB5C0; white-space:normal; text-wrap:balance; }
.foot-end { flex:0 1 auto; display:flex; flex-direction:column; align-items:center; gap:14px; }
.foot-tel { font-family:'Source Serif 4',Georgia,serif; font-size:24px; color:#FFFFFF; text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums; transition:color .2s ease; }
.foot-tel:hover { color:#6FB5C0 !important; }
.foot-mail { margin-top:-6px; font-size:16px; color:#C8D5DB; text-decoration:none; white-space:nowrap; padding-bottom:1px; background-image:linear-gradient(#6FB5C0,#6FB5C0); background-repeat:no-repeat; background-position:left bottom; background-size:0% 1px; transition:background-size .2s ease,color .2s ease; }
.foot-mail:hover { color:#6FB5C0 !important; background-size:100% 1px !important; }
.foot-social { display:flex; align-items:center; gap:12px; }
.foot-ig { width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; transition:all .2s ease; }
.foot-ig:hover { border-color:#6FB5C0 !important; background:rgba(111,181,192,0.12) !important; }
.foot-ig:active { transform:scale(0.98) !important; }
.foot-ring { width:46px; height:46px; border-radius:999px; padding:2px; background:conic-gradient(#6FB5C0 0%, rgba(255,255,255,0.12) 0); display:flex; align-items:center; justify-content:center; }
.foot-ring button { width:100%; height:100%; border-radius:999px; border:0; background:#07131A; color:#FFFFFF; font-size:16px; cursor:pointer; transition:background .2s ease,color .2s ease; }
.foot-ring button:hover { background:#6FB5C0 !important; color:#0B1C26 !important; }
.foot-ring button:active { transform:scale(0.98) !important; }
.foot-legal { border-top:1px solid rgba(255,255,255,0.12); padding:22px 0 26px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font-size:13px; color:#C8D5DB; }
.foot-legal-c { flex:1 1 240px; font-variant-numeric:tabular-nums; }
.foot-legal-m { flex:1 1 240px; text-align:center; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.foot-legal-r { flex:1 1 240px; text-align:center; }
@media (min-width:768px) {
  .foot-top { text-align:left; }
  .foot-brand { align-items:flex-start; }
  .foot-end { align-items:flex-end; }
  .foot-legal-r { text-align:right; }
}
@media (min-width:1024px) { .foot-brand img { height:104px; } }
@media (min-width:1200px) { .foot-serv { white-space:nowrap; } }

/* Barre mobile, toast, visionneuse, modales */
.bar { position:fixed; left:0; right:0; bottom:0; z-index:70; background:rgba(11,28,38,0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.12); padding:8px 16px calc(8px + env(safe-area-inset-bottom)); display:flex; gap:10px; align-items:center; animation:fadeIn .25s ease both; }
.bar-call { flex:1; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,255,255,0.5); border-radius:8px; color:#FFFFFF; font-weight:600; font-size:15px; text-decoration:none; }
.bar-call:active { transform:scale(0.98) !important; }
.bar-cta { flex:1; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; background:#6FB5C0; border-radius:8px; color:#0B1C26; font-weight:700; font-size:15px; text-decoration:none; }
.bar-cta:active { transform:scale(0.98) !important; }

.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:99; background:#12303F; border:1px solid #6FB5C0; color:#FFFFFF; font-size:14px; padding:12px 20px; border-radius:999px; box-shadow:0 8px 30px rgba(7,19,26,0.4); animation:fadeIn .2s ease both; }

.lb { position:fixed; inset:0; z-index:90; background:rgba(11,28,38,0.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); animation:fadeIn .2s ease both; }
.lb-close { position:absolute; top:18px; right:18px; width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:transparent; color:#FFFFFF; font-size:20px; cursor:pointer; transition:all .2s ease; }
.lb-close:hover { border-color:#6FB5C0 !important; color:#6FB5C0 !important; }
.lb-close:active { transform:scale(0.98) !important; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:transparent; color:#FFFFFF; font-size:20px; cursor:pointer; transition:all .2s ease; }
.lb-prev { left:14px; }
.lb-next { right:14px; }
.lb-nav:hover { border-color:#6FB5C0 !important; color:#6FB5C0 !important; }
.lb-fig { margin:0; max-width:960px; width:100%; }
.lb-media { position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:linear-gradient(150deg,#16394A 0%,#0F2735 100%); display:flex; align-items:center; justify-content:center; }
.lb-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#0B1C26; display:block; }
.lb-cap { margin-top:16px; display:flex; gap:12px; align-items:baseline; justify-content:center; flex-wrap:wrap; }
.lb-cat { font-size:12px; font-weight:600; letter-spacing:0.14em; color:#6FB5C0; text-transform:uppercase; }
.lb-ville { font-size:15px; color:#FFFFFF; }
.lb-count { font-size:13px; color:#C8D5DB; font-variant-numeric:tabular-nums; }

/* Panneau « toutes les réalisations » (grille et filtres générés par main.js) */
.gal { position:fixed; inset:0; z-index:85; background:#0B1C26; overflow-y:auto; overscroll-behavior:contain; animation:fadeIn .2s ease both; }
.gal-in { max-width:1200px; margin:0 auto; padding:clamp(80px,8vw,96px) clamp(20px,4vw,48px) clamp(32px,4vw,56px); }
.gal-bar { margin-bottom:28px; }
.gal-close { position:fixed; top:18px; right:18px; z-index:2; width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,0.12); background:#0B1C26; color:#FFFFFF; font-size:20px; cursor:pointer; transition:all .2s ease; }
.gal-close:hover { border-color:#6FB5C0 !important; color:#6FB5C0 !important; }
.gal-close:active { transform:scale(0.98) !important; }
.gal-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.gal-item { position:relative; padding:0; border:0; aspect-ratio:4/3; border-radius:12px; overflow:hidden; background:#12303F; cursor:pointer; animation:fadeIn .35s ease both; transition:transform .2s ease; }
.gal-item:active { transform:scale(0.99) !important; }
.gal-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.gal-item:focus-visible .tile-ov { opacity:1; }
@media (hover:none), (max-width:1023px) { .gal-item .tile-ov { opacity:1; } }
@media (max-width:767px) {
  .gal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .gal-item .tile-ov { padding:10px; }
  .gal-item .tile-cat { font-size:10px; }
  .gal-item .tile-ville { font-size:12.5px; }
}

.modal { position:fixed; inset:0; z-index:95; background:rgba(7,19,26,0.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); animation:fadeIn .2s ease both; }
.modal-box { background:#FFFFFF; border-radius:12px; max-width:720px; width:100%; max-height:82vh; overflow-y:auto; padding:clamp(24px,4vw,40px); position:relative; }
.modal-close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:999px; border:1px solid #E3EAED; background:#FFFFFF; color:#1A2B35; font-size:18px; cursor:pointer; transition:all .2s ease; }
.modal-close:hover { border-color:#6FB5C0 !important; color:#2E7D8A !important; }
.modal-close:active { transform:scale(0.98) !important; }
.modal-box h2 { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:28px; line-height:1.2; color:#1A2B35; margin:0 0 12px; padding-right:52px; text-wrap:balance; }
.modal-blk { margin-bottom:22px; }
.modal-blk h3 { font-family:'Source Serif 4',Georgia,serif; font-weight:600; font-size:19px; color:#1A2B35; margin:0 0 8px; }
.modal-blk p { margin:0; font-size:15px; line-height:1.65; color:#5B6B73; text-wrap:pretty; }

/* ---------- 4. Adaptations (reprises telles quelles du prototype) ---------- */
[data-icon-circle] img { transition:filter .25s ease; }
@media (hover: hover) { article:hover [data-icon-circle] img { filter:hue-rotate(-8deg) saturate(2.4) brightness(0.95); } }
[data-icon] [data-stroke] { stroke-dasharray:400; animation:drawIcon .7s ease both; animation-delay:inherit; }
@media (prefers-reduced-motion: reduce) { [data-icon] [data-stroke] { stroke-dasharray:none; animation:none; } }
@media (max-height: 899px) { [data-scrollhint] { display:none !important; } }
@media (min-width: 1024px) {
  [data-hero] { margin-top:112px; min-height:0 !important; height:clamp(640px, calc(100vh - 112px), 820px); }
  [data-hero-inner] { padding-top:72px !important; padding-bottom:64px !important; }
  [data-h1] span span { white-space:nowrap; }
  [data-hero-p] { max-width:560px !important; }
  [data-hero-cta] { flex-wrap:nowrap !important; gap:16px !important; margin-bottom:48px !important; }
  [data-reassure] { flex-wrap:nowrap !important; gap:20px !important; }
  [data-reassure] > li > span:first-child { width:40px !important; height:40px !important; }
  [data-reassure] span span:first-child { font-size:15px !important; }
  [data-reassure] span span:last-child { font-size:12.5px !important; }
  [data-reassure] > li > span:last-child { white-space:nowrap; }
}
@media (max-width: 767px) {
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media (max-width: 1023px) {
  * { -webkit-tap-highlight-color: transparent; }
  [data-grain] { display:none !important; }
  [data-sf-photo] { aspect-ratio:16/10; min-height:0 !important; max-height:52vh; }
  [data-chips] { scroll-snap-type:x mandatory; -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 100%); mask-image:linear-gradient(90deg,#000 82%,transparent 100%); padding-right:40px !important; }
  [data-chips] button { scroll-snap-align:start; }
  [data-comp] { aspect-ratio:16/10; max-height:44vh; flex:none !important; touch-action:pan-y !important; }
  [data-tile-overlay] { opacity:1 !important; }
  [data-lb-close] { width:44px !important; height:44px !important; top:14px !important; right:14px !important; }
}
@media (hover: none) { a:active, button:active { opacity:.8; } }
@media (max-width: 767px) {
  [data-sf-photo] { aspect-ratio:4/5; max-height:none; }
  [data-sec] { padding-top:64px !important; padding-bottom:64px !important; }
  [data-sec-avis] { padding-top:64px !important; }
  [data-icon-circle] { width:96px !important; height:96px !important; }
  [data-icon-badge] { margin-top:-20px !important; }
  [data-icon-circle] [data-icon] { width:52px !important; height:52px !important; }
  [data-comp] { aspect-ratio:4/3 !important; max-height:none !important; }
  [data-handle] { width:52px !important; height:52px !important; }
  [data-h1] { font-size:clamp(34px,9vw,40px) !important; }
  [data-h2] { font-size:28px !important; }
  [data-hero] { min-height:0 !important; flex-direction:column; align-items:stretch !important; padding-top:80px; }
  [data-hero-img], [data-grain] { display:none !important; }
  [data-hero-mob] { display:block !important; }
  [data-hero-inner] { padding-top:8px !important; padding-bottom:40px !important; }
  [data-hero-kicker] { font-size:10.5px !important; letter-spacing:0.12em !important; white-space:nowrap; margin-bottom:10px !important; }
  [data-h1] { font-size:clamp(28px,8.2vw,34px) !important; line-height:1.1 !important; margin-bottom:14px !important; }
  [data-h1] span { display:inline !important; padding-bottom:0 !important; margin-bottom:0 !important; }
  [data-h1] > span::after { content:' '; }
  [data-hero-p] { font-size:15px !important; line-height:1.55 !important; margin-bottom:22px !important; }
  [data-hero-cta] { gap:12px !important; margin-bottom:0 !important; }
  /* NB : le prototype déclarait ici `min-height:52px`, neutralisé par le style en ligne
     `min-height:48px` des boutons. Déclaration retirée pour conserver le rendu d'origine. */
  /* NB : `padding-top:16px` était neutralisé par le `padding:0` en ligne de la liste. */
  [data-reassure] { margin-top:28px !important; }
  [data-reassure] > li > span:first-child { width:36px !important; height:36px !important; }
  [data-tile] { aspect-ratio:auto !important; background:transparent !important; overflow:visible !important; display:flex; flex-direction:column; gap:8px; }
  [data-tile] > div:first-child { position:relative !important; inset:auto !important; aspect-ratio:4/3; border-radius:12px; overflow:hidden; }
  [data-tile-overlay] { position:relative !important; inset:auto !important; background:none !important; padding:0 !important; gap:2px !important; }
  [data-tile-zoom] { display:none !important; }
  [data-tile-cat] { font-size:10px !important; }
  [data-tile-ville] { font-size:13px !important; white-space:normal !important; }
  [data-hero-cta] { flex-direction:column; }
  [data-hero-cta] > a { width:100%; justify-content:center; }
  [data-reassure] { flex-direction:column; align-items:flex-start !important; gap:12px !important; }
  [data-sep] { display:none !important; }
  [data-scrollhint] { display:none !important; }
  [data-cta] { padding:11px 14px !important; }
  [data-prest-grid] { gap:16px !important; }
  [data-tiles] { gap:8px !important; }
  [data-field] { min-height:52px !important; }
  [data-submit] { min-height:56px !important; }
  [data-coord] { font-size:17px !important; padding:12px 8px !important; }
  [data-contact] { border-top-left-radius:50% 24px !important; border-top-right-radius:50% 24px !important; }
  [data-tri] { bottom:auto !important; top:0 !important; width:60px !important; height:40px !important; clip-path:polygon(0 0,100% 0,0 100%) !important; }
  [data-tri2] { display:none !important; }
  /* Photo de l'artisan : pleine largeur, nette jusqu'en bas, sans fondu.
     « none » et non une suppression : la declaration de base applique un fondu
     vers le bas, conserve sur tablette. */
  .sf-photo-ph { -webkit-mask-image:none; mask-image:none; }
  /* Pied de page centre. .foot-top est un flex en space-between : quand les trois
     blocs passent a la ligne, .foot-brand et .foot-end, en flex:0 1 auto, ne
     prennent pas toute la largeur et se collent a gauche (logo decale de 34 px,
     telephone et e-mail de 58 px). En leur donnant la largeur entiere, le
     centrage deja prevu par leur align-items:center s'applique. */
  .foot-top > * { flex:1 1 100%; }
  .foot-brand img { height:76px; }
  [data-foot-tag] { white-space:normal !important; }
  [data-foot-serv] { line-height:1.9 !important; }
  [data-foot-word] { font-size:64px !important; }
  [data-foot-legal] { padding-bottom:80px !important; }
  [data-foot-legal] > span { flex:1 1 100% !important; text-align:center !important; }
  [data-bar] { min-height:64px; background:rgba(11,28,38,0.95) !important; animation:slideUp .3s ease both !important; }
}