/* Polices hébergées sur le site (aucune requête vers un tiers) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url('assets/fonts/manrope.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url('assets/fonts/space-grotesk.woff2') format('woff2')}

:root{
  --bg:#06111f;--surface:#0a1a2e;--card:#071728;--line:#1d3856;--blue:#0b6fe0;--text:#f4f8ff;--muted:#a9b8cc;--link:#62abff;
  --input:#06111f;--input-line:#4a6f94;--nav-bg:rgba(6,17,31,.94);--quote-bg:linear-gradient(125deg,#09294c,#061525 65%);
  --ok-bg:#123725;--err-bg:#4a1a22;--nav-h:104px;--logo:92px;
}
.light{
  --bg:#edf4fa;--surface:#fff;--card:#fff;--line:#b6cce0;--text:#10233a;--muted:#455d74;--link:#0a5fc2;
  --input:#fff;--input-line:#7f9fbd;--nav-bg:rgba(247,251,255,.95);--quote-bg:linear-gradient(125deg,#d9ebfb,#eff7ff 65%);
  --ok-bg:#d8f3e3;--err-bg:#fbe0e3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Manrope,system-ui,Arial,sans-serif}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk',system-ui,sans-serif;line-height:1.15}
:focus-visible{outline:3px solid #58a6ff;outline-offset:2px}
section[id]{scroll-margin-top:calc(var(--nav-h) - 10px)}
.skip{position:absolute;left:-999px;top:8px;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px;z-index:20}
.skip:focus{left:8px}
.muted{color:var(--muted)}
code{background:var(--surface);border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:.9em}

/* Navigation */
.nav{height:var(--nav-h);position:sticky;top:0;z-index:5;display:flex;align-items:center;padding:6px 5vw;background:var(--nav-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(15px);gap:24px;transition:height .2s}
.nav.scrolled{--nav-h:76px;--logo:64px}
.brand{display:flex;flex:none}
.brand img{width:var(--logo);height:var(--logo);object-fit:contain;transition:width .2s,height .2s}
.nav nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:600}
.nav nav a:hover{color:var(--link)}
.nav-cta{display:none}
.menu{display:none;background:transparent;border:0;color:var(--text);font-size:28px;cursor:pointer;padding:6px 10px}
.theme-toggle{border:1px solid #3e78ad;background:transparent;color:var(--link);border-radius:8px;width:42px;height:42px;font-size:21px;cursor:pointer}

/* Boutons */
.button{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border:1px solid var(--blue);padding:13px 21px;border-radius:8px;font:inherit;font-weight:800;cursor:pointer}
.button:hover{filter:brightness(1.12)}
.button:disabled{opacity:.6;cursor:wait}
.ghost,.secondary{background:transparent;border-color:#6b92bb;color:var(--text)}
.hero .secondary{color:#fff;border-color:#9bb6d4}

/* Accueil */
.hero{min-height:620px;position:relative;display:flex;align-items:center;padding:80px 8vw;overflow:hidden;color:#f4f8ff}
.hero-image{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,17,31,.93) 0%,rgba(6,17,31,.72) 42%,rgba(6,17,31,.12) 73%),url('assets/hero.webp') center/cover}
.hero-copy{position:relative;max-width:700px}
.eyebrow{font-size:12px;letter-spacing:2.2px;color:var(--link);font-weight:800;margin:0 0 14px}
.hero .eyebrow{color:#7ebbff}
.hero h1{font-size:clamp(40px,6vw,75px);margin:0 0 22px}
.hero h1 em{font-style:normal;color:#3d9bff}
.hero-copy>p:not(.eyebrow){max-width:630px;color:#d3dcea;font-size:18px}
.actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.cards{max-width:1400px;margin:-54px auto 0;padding:0 4vw;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cards article{padding:25px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.cards span{color:#2b91ff;font-size:31px;float:left;margin-right:17px;line-height:1.2}
.cards h2{font-size:19px;margin:0}
.cards p,.section p{color:var(--muted);margin:8px 0 0;font-size:15px}
.section{max-width:1400px;padding:100px 5vw;margin:auto}
.heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px}
.heading h2,.section>h2,.split h2,.quote h2,.legal-page h1{font-size:clamp(31px,4vw,50px);margin:0}
.heading a{color:var(--link);font-weight:700}

/* Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gallery figure{margin:0}
.part{display:block;height:200px;border-radius:9px;background:#1f2c39;position:relative;overflow:hidden}
.part img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
a.part:hover img{transform:scale(1.04)}
.placeholder{background-image:radial-gradient(circle at 65% 35%,#6d7d8e 0 3%,transparent 4%),linear-gradient(135deg,#3b4652,#101b25)}
.placeholder:after{content:'';position:absolute;inset:25% 22%;border:26px solid #111b25;border-radius:28% 42% 20% 35%;box-shadow:0 0 0 3px #596a79}
figcaption{font-weight:800;margin-top:9px;font-size:14px}
figcaption small{display:block;text-transform:uppercase;color:var(--link);font-size:11px;letter-spacing:1.4px}
.project-desc{margin:5px 0 0!important;font-size:13px!important}

/* Matières, étapes */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.materials{display:grid;gap:13px}
.materials article{border-left:3px solid var(--blue);padding:14px 20px;background:var(--card)}
.materials h3{margin:0}
.materials ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.materials li{margin:4px 0}
.steps ol{padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none}
.steps li{border-top:1px solid #4374a6;padding:19px 0}
.steps b{color:#318fff;font-size:21px}
.steps h3{margin:18px 0 4px}

/* Autres activités */
.activity-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.activity{display:block;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:border-color .2s,transform .2s}
.activity:hover{border-color:var(--blue);transform:translateY(-3px)}
.activity span{font-size:34px;color:#2b91ff;line-height:1}
.activity h3{margin:12px 0 0;font-size:24px}
.activity b{display:block;margin-top:14px;color:var(--link)}

/* Devis */
.quote{padding:70px 7vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;background:var(--quote-bg);border-top:1px solid #2878c8;border-bottom:1px solid #2878c8}
.quote>div>p:not(.eyebrow){color:var(--muted)}
.quote form{padding:25px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
label{display:block;font-weight:700;font-size:14px}
input,textarea,select{display:block;width:100%;margin:5px 0 12px;padding:11px;background:var(--input);border:1px solid var(--input-line);border-radius:6px;color:var(--text);font:inherit}
fieldset{border:0;padding:0;margin:0 0 12px;display:flex;gap:6px 16px;flex-wrap:wrap}
legend{font-weight:700;font-size:14px;margin-bottom:6px;padding:0}
fieldset label,.consent{display:flex;align-items:flex-start;gap:8px;font-weight:600}
fieldset input,.consent input{width:auto;margin:3px 0 0}
.consent{font-size:13px;margin:6px 0 0}
.consent a{color:var(--link);text-decoration:underline}
.file{border:1px dashed #4d83b6;border-radius:6px;padding:14px;text-align:center;color:var(--link)}
.file input{border:0;padding:0;margin:7px auto 0;width:auto;background:transparent}
.file-info{display:block;color:var(--muted);font-size:13px;margin:-4px 0 10px}
.file-info.error{color:#ff8b8b;font-weight:700}
.light .file-info.error{color:#b4232f}
.quote form .button{width:100%;margin-top:15px}
.legal{font-size:12px!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{padding:15px;background:var(--err-bg);border-radius:8px;margin:0 0 16px;color:var(--text)!important}
.notice.ok{background:var(--ok-bg)}
.volume-card{margin-top:32px;border:1px solid var(--line);border-radius:16px;padding:25px;display:flex;align-items:center;gap:22px;background:var(--card)}
.volume-card svg{width:105px;height:88px;stroke:#49a9ff;fill:none;stroke-width:1.8;flex:none}
.volume-card strong{display:block;font:700 20px 'Space Grotesk',sans-serif}
.volume-card span{display:block;color:var(--muted);font-size:14px;margin-top:5px}

/* FAQ */
.faq{max-width:950px}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:800;cursor:pointer}
.faq a{color:var(--link);text-decoration:underline}

/* Pages légales */
.legal-page{max-width:850px}
.legal-page h2{font-size:22px;margin:34px 0 0}
.legal-page p{color:var(--text);opacity:.9}
.legal-page a:not(.button){color:var(--link);text-decoration:underline}
.todo{background:#5a4300;color:#ffd978;padding:1px 8px;border-radius:4px}

/* Pied de page */
.footer{border-top:1px solid var(--line);color:var(--muted);font-size:14px;padding:46px 5vw 22px}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;max-width:1400px;margin:auto}
.footer-brand img{width:130px;height:130px;object-fit:contain}
.footer-brand p{margin:6px 0 0}
.footer h2{font-size:15px;color:var(--text);margin:0 0 10px}
.footer-top a{display:block;color:var(--link);margin:6px 0}
.footer-bottom{display:flex;gap:22px;flex-wrap:wrap;max-width:1400px;margin:34px auto 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px}
.footer-bottom a{color:var(--link)}
.footer-bottom span{margin-right:auto}

/* ---------- Administration ---------- */
.admin-login{max-width:480px;margin:9vh auto;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.admin-login h1{font-size:28px;margin:0 0 10px}
.admin-login .button{width:100%}
.login-logo{display:block;margin:0 auto 6px}
.admin-bar{padding:10px 4vw;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:sticky;top:0;z-index:5}
.admin-brand{display:flex;align-items:center;gap:10px}
.admin-brand img{width:48px;height:48px}
.admin-nav{display:flex;gap:4px;flex-wrap:wrap}
.admin-nav a{padding:8px 13px;border-radius:8px;font-weight:600;font-size:14px;color:var(--muted)}
.admin-nav a:hover{color:var(--text)}
.admin-nav a[aria-current]{background:var(--blue);color:#fff}
.admin-tools{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px}
.admin-tools>a{color:var(--link)}
.admin{max-width:1100px;margin:auto;padding:32px 5vw 60px}
.admin h1{margin:0 0 18px}
.admin section{padding:26px;margin:22px 0;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.admin h2{margin:0 0 16px;font-size:22px}
.admin form:not(.inline):not(.settings){max-width:680px}
.settings{max-width:none}
.settings>.button{margin-top:6px}
.inline{display:inline-block;margin:0}
.mini{display:inline-flex;align-items:center;background:transparent;color:var(--text);border:1px solid var(--input-line);border-radius:6px;padding:5px 11px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mini:hover{border-color:var(--link);color:var(--link)}
.danger{color:#ff8b8b;border-color:#8a3b44}
.light .danger{color:#b4232f;border-color:#d89aa1}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}
.stats a{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.stats a:hover{border-color:var(--blue)}
.stats b{display:block;font:700 28px 'Space Grotesk',sans-serif}
.stats span{color:var(--muted);font-size:14px}
.checks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks li>span{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800}
.checks .ok>span{background:#1d6b43;color:#fff}
.checks .ko>span{background:#a3303b;color:#fff}
.checks small{display:block;color:var(--muted)}
.checks small a{color:var(--link);text-decoration:underline}
.table-wrap{overflow-x:auto}
.list{width:100%;border-collapse:collapse}
.list th,.list td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}
.list .actions{margin:0}
.admin-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.admin-list article{border:1px solid var(--line);padding:12px;border-radius:8px;background:var(--bg)}
.admin-list img{display:block;width:100%;height:130px;object-fit:cover;margin-bottom:8px;border-radius:6px}
.admin-list small,.item small{display:block;color:var(--muted);margin-top:2px}
.item{border:1px solid var(--line);border-radius:8px;padding:14px;margin:12px 0;background:var(--bg)}
.item-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.item-head .actions{margin:0}
details>summary{cursor:pointer;color:var(--link);font-weight:700;margin-top:10px}
details>form{margin-top:12px}
.quote-line{display:grid;grid-template-columns:1fr 90px 140px 40px;gap:8px;align-items:center}
.quote-line input{margin:0 0 8px}
.quote-line.head{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.totals-box{margin:18px 0 6px;text-align:right}
.totals-box p{margin:2px 0;color:var(--text)!important}
.totals-box .grand{font-size:20px}
.admin form#quote-form{max-width:none}

/* ---------- Adaptation mobile ---------- */
@media(max-width:1000px){.admin-list{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(2,1fr)}.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  :root{--nav-h:80px;--logo:68px}
  .nav.scrolled{--nav-h:68px;--logo:54px}
  .nav{padding:6px 5vw;gap:12px}
  .menu{display:block;margin-left:auto}
  .nav nav{display:none;position:absolute;top:var(--nav-h);left:0;right:0;padding:20px;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;margin:0;gap:18px}
  .nav nav.open{display:flex}
  .nav-cta{display:inline-flex;justify-content:center;background:var(--blue);color:#fff;padding:12px;border-radius:8px;font-weight:800}
  .nav>.nav-quote{display:none}
  .hero{min-height:580px;padding:70px 7vw;align-items:end}
  .hero-image{background:linear-gradient(0deg,rgba(6,17,31,.93) 0%,rgba(6,17,31,.45) 80%),url('assets/hero-900.webp') 65%/cover}
  .cards,.gallery,.steps ol{grid-template-columns:1fr 1fr}
  .split,.quote,.activity-grid{grid-template-columns:1fr;gap:35px}
  .section{padding:70px 6vw}
  .quote{padding:55px 6vw}
  .heading{align-items:start;gap:15px;flex-direction:column}
  .gallery{gap:18px}
  .part{height:150px}
  .admin-tools{margin-left:0;width:100%;justify-content:space-between}
}
@media(max-width:620px){.quote-line{grid-template-columns:1fr 70px 100px 36px}}
@media(max-width:520px){
  .hero h1{font-size:40px}
  .cards,.gallery,.steps ol,.form-grid,.footer-top,.admin-list{grid-template-columns:1fr}
  .hero{min-height:560px}
  .cards{margin:0;padding:20px 5vw}
  .section{padding:60px 6vw}
  .heading h2{font-size:34px}
  .quote{padding:50px 6vw}
  .quote form{padding:18px}
  .volume-card{flex-direction:column;align-items:flex-start}
  .admin section{padding:18px}
}

/* URSSAF */
.next-decl{border-left:5px solid var(--blue)!important}
.next-decl.retard{border-left-color:#d6404e!important}
.next-decl.adeclarer{border-left-color:#e5a100!important}
.next-decl p{margin:6px 0;color:var(--text)}
.next-decl h2{margin-bottom:8px!important}
.year-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.year-nav h2{margin:0!important}
.meters{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.meters label{font-weight:600}
meter{display:block;width:100%;height:14px;margin-top:6px}
.urssaf td,.urssaf th{white-space:nowrap}
.urssaf tr.total td{border-top:2px solid var(--text);font-weight:700}
.urssaf tr.st-na{opacity:.45}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;background:var(--line);color:var(--text)}
.badge.declare{background:#1d6b43;color:#fff}
.badge.retard{background:#a3303b;color:#fff}
.badge.adeclarer{background:#b87a00;color:#fff}
.rates input{margin:0;min-width:80px}
.rates td:first-child{font-weight:600}
@media(max-width:620px){.meters{grid-template-columns:1fr}}
.footer-bottom .admin-link{display:inline-flex;align-items:center;gap:6px;opacity:.8}
.footer-bottom .admin-link:hover,.footer-bottom .admin-link:focus-visible{opacity:1}

.badge.sent,.badge.encours{background:#1b4f86;color:#fff}
.badge.na{background:var(--line);color:var(--muted)}
tr.followup td{padding-top:0!important;background:var(--bg)}
.timeline{margin:8px 0;padding-left:18px;font-size:13px;color:var(--muted)}
.timeline time{font-weight:700;color:var(--text);margin-right:6px}

.cards .card-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--link);text-decoration:underline}

/* Mise en ligne */
.status-pill{border-radius:99px;padding:6px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:1px solid}
.status-pill.online{background:#123725;color:#8be0b2;border-color:#1d6b43}
.status-pill.offline{background:#4a3200;color:#ffd978;border-color:#8a6200}
.light .status-pill.online{background:#d8f3e3;color:#124b2d}
.light .status-pill.offline{background:#fff1cc;color:#7a5200}
.site-status{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-left:5px solid #b87a00!important}
.site-status.online{border-left-color:#1d6b43!important}
.site-status h2{margin:0 0 6px!important}
.site-status p{margin:0;color:var(--muted);max-width:640px}
.offline-banner{background:#ffd978;color:#3a2a00;padding:9px 5vw;font-size:14px;text-align:center}
.offline-banner a{color:#3a2a00;font-weight:800;text-decoration:underline}
.soon-body{display:grid;place-items:center;min-height:100vh}
.soon{max-width:560px;padding:32px 6vw;text-align:center}
.soon img{width:220px;height:220px;object-fit:contain}
.soon h1{font-size:clamp(38px,8vw,64px);margin:6px 0 10px}
.soon p{color:var(--muted)}
.soon-links a{color:var(--link);text-decoration:underline}

/* Carrousel de réalisation */
.work{margin:0}
.carousel{position:relative;border-radius:10px;overflow:hidden;background:#1f2c39}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;height:240px;display:block;cursor:zoom-in}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:50%;background:rgba(6,17,31,.72);color:#fff;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.car-btn:hover{background:rgba(11,111,224,.9)}
.car-btn.prev{left:8px}.car-btn.next{right:8px}
.car-count{position:absolute;right:8px;bottom:8px;background:rgba(6,17,31,.75);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px}
.work figcaption{margin-top:10px;font-size:16px}
.work .project-desc{font-size:14px!important}

/* Agrandissement */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(3,8,15,.94);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:94vw;text-align:center}
.lightbox img{max-width:94vw;max-height:82vh;object-fit:contain;border-radius:6px;background:#111}
.lightbox figcaption{color:#e6eefb;margin-top:10px;font-weight:700}
.lb-count{opacity:.7;font-weight:500;margin-left:8px}
.lb-close,.lb-nav{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;border-radius:50%;display:grid;place-items:center}
.lb-close:hover,.lb-nav:hover{background:rgba(11,111,224,.85)}
.lb-close{top:14px;right:14px;width:44px;height:44px;font-size:30px;line-height:1}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:34px;line-height:1;padding-bottom:4px}
.lb-prev{left:14px}.lb-next{right:14px}
.lightbox.single .lb-nav{display:none}
body.lb-open{overflow:hidden}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr}.slide{height:200px}}
@media(max-width:520px){.gallery{grid-template-columns:1fr}.slide{height:230px}.lb-nav{width:40px;height:40px}}

/* Admin : photos d'une réalisation */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:14px}
.photo-item{position:relative;border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--surface)}
.photo-item img{display:block;width:100%;height:80px;object-fit:cover;border-radius:5px}
.photo-item .badge{position:absolute;top:10px;left:10px}
.photo-item .actions{margin-top:6px;gap:4px}
.photo-item .mini{padding:3px 8px}

/* Filtre par catégorie */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.chip{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);border:1px solid var(--input-line);border-radius:99px;padding:8px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s}
.chip span{font-size:12px;font-weight:700;background:var(--line);color:var(--text);border-radius:99px;padding:1px 8px}
.chip:hover{border-color:var(--link)}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.active span{background:rgba(255,255,255,.25);color:#fff}
.filter-status{margin:-10px 0 16px!important;font-size:14px!important;color:var(--muted)}
.work[hidden]{display:none}

/* Page Réalisations et mises en avant */
.more{margin:28px 0 0;text-align:center}
.page-works h1{font-size:clamp(31px,4vw,50px);margin:0}
.page-works .lead{max-width:640px;color:var(--muted);margin:0 0 26px}
.admin .check{display:flex;gap:10px;align-items:center;font-weight:600;margin:6px 0 14px}
.admin .check input{width:auto;margin:0}
.mini.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* Sélection de photos (admin) */
.photo-item .sel{position:absolute;top:10px;right:10px;z-index:2;background:rgba(6,17,31,.75);border-radius:6px;padding:4px 6px;cursor:pointer;line-height:0}
.photo-item .sel input{width:18px;height:18px;margin:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bulk{margin-top:16px;padding:14px;border:1px dashed var(--input-line);border-radius:8px;max-width:none!important}
.bulk select{display:block;width:100%;margin:5px 0 12px;padding:11px;background:var(--input);border:1px solid var(--input-line);border-radius:6px;color:var(--text);font:inherit}

/* Fonds et détourage (admin) */
.bg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:12px 0}
.bg-item{border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg)}
.bg-item img{display:block;width:100%;height:100px;object-fit:cover;border-radius:5px;margin-bottom:6px}
.cutout-opt{border:1px dashed var(--input-line);border-radius:8px;padding:10px 12px;margin:4px 0 14px!important}
.cp-overlay{position:fixed;inset:0;z-index:200;background:rgba(3,8,15,.9);overflow-y:auto;padding:3vh 3vw}
.cp-box{max-width:1100px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.cp-box header{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:6px}
.cp-box h2{margin:0;font-size:24px}
.cp-bgsel{display:flex;align-items:center;gap:8px}
.cp-bgsel select{margin:0;width:auto;padding:7px 10px;background:var(--input);border:1px solid var(--input-line);border-radius:6px;color:var(--text);font:inherit}
.cp-count{margin-left:auto;color:var(--muted);font-weight:700}
.cp-note{color:var(--muted);margin:4px 0 16px}
.cp-card{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.cp-card.skipped{opacity:.4}
.cp-views{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;align-items:start}
.cp-views figure{margin:0}
.cp-views canvas{width:100%;height:auto;display:block;border-radius:8px;background:#111}
.cp-views figcaption{font-size:12px;color:var(--muted);margin-top:4px;text-align:center}
.cp-ctrl{display:flex;flex-direction:column;gap:6px}
.cp-ctrl label{display:flex;align-items:center;gap:10px;justify-content:space-between;font-weight:600;font-size:13px}
.cp-ctrl input[type=range]{width:55%;margin:0;padding:0}
.cp-ctrl .chk{justify-content:flex-start}
.cp-ctrl .chk input{width:auto;margin:0}
.cp-state{color:var(--muted);font-size:13px;min-height:1.4em}
.cp-card.failed .cp-state{color:#ff8b8b}
.cp-box footer{display:flex;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:800px){.cp-card{grid-template-columns:1fr}.cp-views{grid-template-columns:1fr 1fr}}

/* Aide détourage */
.help-note{margin:-6px 0 14px;font-size:13px}
.help-note a{color:var(--link);text-decoration:underline}
.help-box h3{margin:20px 0 6px;font-size:17px}
.help-box pre{margin:8px 0;padding:10px 12px;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow-x:auto}
.help-box pre code{background:none;border:0;padding:0}
.help-box ol,.help-box ul{padding-left:22px}
.help-box li{margin:6px 0}

/* Retouche au pinceau et rotation (détourage) */
.cp-tools{border:1px dashed var(--input-line);border-radius:8px;padding:8px 10px;margin:6px 0}
.cp-tools legend{font-size:13px;font-weight:700;padding:0 6px}
.cp-rotbtn{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.cp-views canvas.painting{cursor:crosshair;touch-action:none;outline:2px solid var(--blue)}
.cp-views canvas.painting{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ---------- Administration et détourage sur téléphone ---------- */
@media (max-width: 760px) {
  .admin-bar { position: static; padding: 10px 4vw; gap: 10px; }
  .admin-brand { width: 100%; }
  .admin-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px; padding-bottom: 4px; }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav a { flex: none; white-space: nowrap; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; }
  .admin-nav a[aria-current] { border-color: var(--blue); }
  .admin-tools { width: 100%; margin-left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; }
  .admin-tools > a, .admin-tools .mini, .admin-tools .theme-toggle, .admin-tools .mkout > button { white-space: nowrap; }
  .admin-tools { gap: 6px; }
  .admin-tools > a { padding: 6px 2px; font-size: 13px; }
  .admin-tools .mini { padding: 6px 10px; font-size: 13px; }
  .admin-tools .theme-toggle { width: 38px; height: 38px; font-size: 18px; }
  .admin-brand img { width: 40px; height: 40px; }
  .admin-tools form.inline:has(.status-pill) { order: 9; flex: 1 1 100%; }
  .status-pill { width: 100%; white-space: nowrap; text-align: center; padding: 10px 12px; border-radius: 12px; }
  .admin { padding: 20px 4vw 50px; }
}
@media (max-width: 800px) {
  .cp-overlay { padding: 0; }
  .cp-box { border-radius: 0; min-height: 100%; padding: 14px 12px 0; }
  .cp-box header { gap: 8px; }
  .cp-box h2 { font-size: 20px; width: 100%; }
  .cp-bgsel { width: 100%; }
  .cp-bgsel select { flex: 1; width: auto; }
  .cp-count { margin-left: 0; width: 100%; }
  .cp-note { font-size: 14px; }
  .cp-card { grid-template-columns: 1fr; gap: 12px; }
  .cp-views { grid-template-columns: 1fr; gap: 10px; }
  .cp-views figure:nth-child(2) { order: -1; }          /* le résultat d'abord, en pleine largeur */
  .cp-views figure:nth-child(1) { max-width: 55%; }
  .cp-ctrl label { font-size: 15px; min-height: 36px; }
  .cp-ctrl input[type=range] { width: 58%; height: 30px; }
  .cp-tools .mini, .cp-rotbtn .mini { padding: 10px 14px; font-size: 14px; }
  .cp-box footer { position: sticky; bottom: 0; background: var(--surface); padding: 12px 0; margin-top: 8px; z-index: 2; }
  .cp-box footer .button, .cp-box footer .mini { flex: 1; padding: 14px; justify-content: center; }
}

/* Sous-onglets de l'administration */
[data-tab][hidden]{display:none!important}
.sub-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px;border-bottom:1px solid var(--line)}
.sub-tabs a{padding:10px 16px;border-radius:10px 10px 0 0;border:1px solid transparent;border-bottom:0;text-decoration:none;color:var(--muted);font-weight:600}
.sub-tabs a:hover{color:var(--text)}
.sub-tabs a[aria-current="page"]{color:var(--text);border-color:var(--line);margin-bottom:-1px;box-shadow:inset 0 -2px 0 var(--accent,#3b82f6)}

/* URSSAF : le tableau des déclarations tient dans la page, la colonne « Statut » reste visible */
.admin:has(table.urssaf){max-width:1320px}
.urssaf th,.urssaf td{padding:9px 7px;font-size:13px}
.urssaf td.actions{white-space:normal}
.urssaf th:last-child,.urssaf td:last-child{position:sticky;right:0;background:var(--surface);box-shadow:-8px 0 8px -8px rgba(0,0,0,.45)}
.urssaf tr.total td:last-child{background:var(--surface)}

/* Connexion : bouton « Se connecter avec Google » (la CSP bloque les styles en ligne, donc mis en forme ici) */
.admin-login a[href*="/auth/sso.php"]{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;width:100%;margin:12px 0 4px;padding:11px 14px;border:1px solid #d0d7de;border-radius:8px;background:#fff;color:#1f1f1f;font-weight:600;font-size:15px;line-height:1.2;font-family:inherit;text-decoration:none;transition:background .15s,box-shadow .15s}
.admin-login a[href*="/auth/sso.php"]:hover,.admin-login a[href*="/auth/sso.php"]:focus-visible{background:#f3f4f6;box-shadow:0 0 0 3px rgba(66,133,244,.35)}
.admin-login a[href*="/auth/sso.php"] svg{flex:none}
