/* Pages communes et métier par commune, version claire et colorée (10.11.2026) */
body.clair{--cl-navy:#0b2545;--cl-ink:#334155;--cl-muted:#52606d;--cl-orange:#ff922b;--cl-orange-d:#d9480f;--cl-blue:#1c7ed6;--cl-sky:#4dabf7;--cl-green:#2f9e44;--cl-yellow:#ffd43b;--cl-rose:#f06595}

/* 1. Premier écran */
.clair :is(.crx-hero,.comm-hero,.pg28){background:radial-gradient(circle at 6% 14%,rgba(255,212,59,.45) 0,rgba(255,212,59,0) 30%),radial-gradient(circle at 96% 8%,rgba(77,171,247,.35) 0,rgba(77,171,247,0) 32%),radial-gradient(circle at 62% 100%,rgba(105,219,124,.28) 0,rgba(105,219,124,0) 34%),linear-gradient(135deg,#fffaf0 0%,#fff1dc 46%,#e9f4ff 100%);color:var(--cl-navy);border-bottom:0}
.clair :is(.crx-hero,.comm-hero,.pg28) h1{color:var(--cl-navy)}
.clair :is(.crx-eyebrow,.comm-eyebrow,.pg28-surtitre){display:inline-flex;align-items:center;gap:10px;opacity:1;color:var(--cl-orange-d);font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:none;border:0;padding:0;border-radius:0}
.clair :is(.crx-eyebrow,.comm-eyebrow,.pg28-surtitre)::before{content:"";flex:none;width:56px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--cl-yellow),var(--cl-orange) 40%,var(--cl-blue) 75%,var(--cl-green))}
.clair :is(.crx-lead,.comm-hero .lead,.comm-hero p:not([class]),.pg28-intro,.pg28-intro p){color:var(--cl-ink)}
.clair :is(.crx-hero,.comm-hero,.pg28) .btn-o,.clair .pg28-devis{background:linear-gradient(135deg,#ffc53d,var(--cl-orange));color:var(--cl-navy);border:0;border-radius:999px;box-shadow:0 12px 26px rgba(255,146,43,.35)}
.clair :is(.crx-hero,.comm-hero,.pg28) .btn-o:hover,.clair .pg28-devis:hover{background:linear-gradient(135deg,#ffd43b,#ffa94d);color:var(--cl-navy)}
.clair :is(.crx-btn2,.comm-btn2){background:#fff;border:2px solid rgba(11,37,69,.18);color:var(--cl-navy);border-radius:999px}
.clair :is(.crx-btn2,.comm-btn2):hover{border-color:var(--cl-blue);color:var(--cl-blue)}
.clair .pg28-whatsapp{border-radius:999px}
.clair .pg28-galerie{color:var(--cl-blue)}
.clair .pg28 a:focus-visible{outline-color:var(--cl-navy)}
.clair .comm-ctx{border-left:6px solid var(--cl-orange);border-radius:6px 18px 18px 6px;background:linear-gradient(120deg,#fff4e6 0%,rgba(255,255,255,.85) 75%);color:var(--cl-ink);box-shadow:0 10px 26px rgba(11,37,69,.06)}
.clair .crx-facts li:nth-child(3n+2)::before{background-color:var(--cl-blue)}
.clair .crx-facts li:nth-child(3n+3)::before{background-color:var(--cl-green)}
.clair .crx-facts li::before{background-color:var(--cl-orange)}

/* hero des pages communes, texte et photo côte à côte */
.clair .comm-hero.clair-hero{padding-top:40px;padding-bottom:56px}
.clair .clair-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.clair .clair-hero-txt>:last-child{margin-bottom:0}

/* hero des pages en PHP */
.clair .pg28 .pg28-fond{display:none}
.clair .pg28::before,.clair .pg28::after{display:none}
.clair .pg28 :is(.pg28-texte,.pg28-texte p,.pg28-intro){color:var(--cl-ink)}
.clair .pg28 .pg28-texte h1{color:var(--cl-navy)}
.clair .pg28 .pg28-surtitre{color:var(--cl-orange-d)}

/* cadre photo coloré */
.clair :is(.crx-hero-ph,.clair-ph,.pg28-cadre){position:relative;margin:0;overflow:visible;background:none;box-shadow:none;border:0}
.clair :is(.crx-hero-ph,.clair-ph,.pg28-cadre)::before{content:"";position:absolute;inset:26px -20px -20px 26px;border-radius:26px;background:linear-gradient(140deg,var(--cl-yellow) 0%,var(--cl-orange) 38%,var(--cl-rose) 62%,var(--cl-sky) 100%);z-index:0}
.clair .crx-hero-ph::after,.clair .pg28-cadre::after{display:none}
.clair :is(.crx-hero-ph,.clair-ph,.pg28-cadre) img{position:relative;z-index:1;display:block;width:100%;border:8px solid #fff!important;border-radius:20px!important;background:#fff;box-shadow:0 24px 54px rgba(11,37,69,.24)}
.clair .clair-ph img{height:auto;aspect-ratio:4/3;object-fit:cover}

/* 2. Cartes et listes */
.clair :is(.crx-cards li,.comm-card){border:0;border-top:6px solid var(--cl-orange);border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(11,37,69,.08)}
.clair :is(.crx-cards li,.comm-card):nth-child(4n+2){border-top-color:var(--cl-blue)}
.clair :is(.crx-cards li,.comm-card):nth-child(4n+3){border-top-color:var(--cl-green)}
.clair :is(.crx-cards li,.comm-card):nth-child(4n+4){border-top-color:var(--cl-rose)}
.clair .crx-cards li::before{background-color:var(--cl-orange)}
.clair .crx-cards li:nth-child(4n+2)::before{background-color:var(--cl-blue)}
.clair .crx-cards li:nth-child(4n+3)::before{background-color:var(--cl-green)}
.clair .crx-cards li:nth-child(4n+4)::before{background-color:var(--cl-rose)}
.clair .comm-card h3{color:var(--cl-navy)}
.clair .crx-kicker{color:var(--cl-orange-d)}
.clair :is(.crx-sec,.comm-hero~.sec,.page-body) h2{position:relative}
.clair .comm-alt{background:linear-gradient(180deg,#f3f9ff 0%,#fff9f0 100%)}
.clair .comm-alt:nth-of-type(2n){background:linear-gradient(180deg,#fff9f0 0%,#f3f9ff 100%)}
.clair .comm-list{list-style:none;padding-left:0}
.clair .comm-list li{position:relative;padding-left:30px}
.clair .comm-list li::before{content:"";position:absolute;left:0;top:.38em;width:16px;height:16px;border-radius:50%;background:var(--cl-orange);box-shadow:0 0 0 4px rgba(255,146,43,.18)}
.clair .comm-list li:nth-child(4n+2)::before{background:var(--cl-blue);box-shadow:0 0 0 4px rgba(28,126,214,.16)}
.clair .comm-list li:nth-child(4n+3)::before{background:var(--cl-green);box-shadow:0 0 0 4px rgba(47,158,68,.16)}
.clair .comm-list li:nth-child(4n+4)::before{background:var(--cl-rose);box-shadow:0 0 0 4px rgba(240,101,149,.16)}
.clair .comm-limites{background:#fff;border-left:6px solid var(--cl-blue);border-radius:6px 16px 16px 6px;box-shadow:0 8px 22px rgba(11,37,69,.06)}
.clair .comm-part{background:linear-gradient(120deg,#fff 0%,#fff4e6 100%)}
.clair .crx-sand{background:linear-gradient(120deg,#fff9db 0%,#fff4e6 45%,#e7f5ff 100%)}
.clair .crx-ctx{border-left-color:var(--cl-blue);box-shadow:0 10px 26px rgba(11,37,69,.06)}

/* 3. Étapes */
.clair .crx-steps li{background:#fff;border-top:6px solid var(--cl-orange);box-shadow:0 10px 26px rgba(11,37,69,.07)}
.clair .crx-steps li:nth-child(3n+2){border-top-color:var(--cl-blue)}
.clair .crx-steps li:nth-child(3n+3){border-top-color:var(--cl-green)}
.clair .crx-steps li::before{color:var(--cl-orange)}
.clair .crx-steps li:nth-child(3n+2)::before{color:var(--cl-blue)}
.clair .crx-steps li:nth-child(3n+3)::before{color:var(--cl-green)}
.clair .steps{background:linear-gradient(180deg,#e9f4ff 0%,#fff 100%)}
.clair .steps li{border-top-color:var(--cl-orange)}
.clair .steps li:nth-child(4n+2){border-top-color:var(--cl-blue)}
.clair .steps li:nth-child(4n+3){border-top-color:var(--cl-green)}
.clair .steps li:nth-child(4n+4){border-top-color:var(--cl-rose)}
.clair .steps .n{color:var(--cl-orange)}
.clair .steps li:nth-child(4n+2) .n{color:var(--cl-blue)}
.clair .steps li:nth-child(4n+3) .n{color:var(--cl-green)}
.clair .steps li:nth-child(4n+4) .n{color:var(--cl-rose)}
.clair .crx-note{background:linear-gradient(120deg,#1c7ed6 0%,#339af0 45%,#22b8cf 100%);color:#fff}

/* 4. Liens vers les communes et les métiers */
.clair .crx-links{background:linear-gradient(180deg,#f3f9ff 0%,#fff9f0 100%)}
.clair .crx-linkbox{border:0;border-top:6px solid var(--cl-orange);box-shadow:0 10px 26px rgba(11,37,69,.07)}
.clair .crx-linkbox+.crx-linkbox{border-top-color:var(--cl-blue)}
.clair :is(.crx-linkbox a,.comm-links a){background:#fff;border:2px solid #e7f5ff;color:var(--cl-navy)}
.clair :is(.crx-linkbox a,.comm-links a):hover,.clair :is(.crx-linkbox a,.comm-links a):focus-visible{background:#fff4e6;border-color:var(--cl-orange);color:var(--cl-navy)}

/* 5. Pages en PHP, corps de page */
.clair .page-body .quick-answer{background:linear-gradient(120deg,#fff4e6 0%,#fff 70%);border:0;border-left:6px solid var(--cl-orange);border-radius:6px 20px 20px 6px;box-shadow:0 10px 26px rgba(11,37,69,.06)}
.clair .page-body h2{color:var(--cl-navy)}
.clair .page-body .copy>section:not(.quick-answer)>h2::after{content:"";display:block;width:56px;height:5px;margin-top:10px;border-radius:5px;background:linear-gradient(90deg,var(--cl-orange),var(--cl-blue) 60%,var(--cl-green))}
.clair .page-body .copy>section:not(.quick-answer):nth-of-type(3n+2)>h2::after{background:linear-gradient(90deg,var(--cl-blue),var(--cl-green) 60%,var(--cl-yellow))}
.clair .page-body .copy>section:not(.quick-answer):nth-of-type(3n+3)>h2::after{background:linear-gradient(90deg,var(--cl-green),var(--cl-orange) 60%,var(--cl-rose))}
.clair .page-body ul li::marker{color:var(--cl-orange)}
.clair .questions{background:linear-gradient(180deg,#e9f4ff 0%,#fff9f0 100%)}
.clair .questions details{background:#fff;border-radius:14px}
.clair .closing{background:linear-gradient(120deg,#1c7ed6 0%,#339af0 45%,#22b8cf 100%);color:#fff}
.clair .closing :is(h2,p,.eyebrow){color:#fff}
.clair .closing .button{background:linear-gradient(135deg,#ffc53d,var(--cl-orange));color:var(--cl-navy);border-color:transparent;border-radius:999px}

/* 6. Bloc de contact des pages statiques */
.clair .contact{background:linear-gradient(120deg,#1c7ed6 0%,#339af0 45%,#22b8cf 100%);color:#fff}
.clair .contact :is(h2,h3,p){color:#fff}
.clair .contact .btn-o{background:linear-gradient(135deg,#ffc53d,var(--cl-orange));color:var(--cl-navy);border-radius:999px}

/* 8. Pages en PHP, règles plus fortes que la feuille du site */
body.clair main .pg28{background:radial-gradient(circle at 6% 14%,rgba(255,212,59,.45) 0,rgba(255,212,59,0) 30%),radial-gradient(circle at 96% 8%,rgba(77,171,247,.35) 0,rgba(77,171,247,0) 32%),radial-gradient(circle at 62% 100%,rgba(105,219,124,.28) 0,rgba(105,219,124,0) 34%),linear-gradient(135deg,#fffaf0 0%,#fff1dc 46%,#e9f4ff 100%);color:var(--cl-navy)}
body.clair main .pg28 .pg28-surtitre{color:var(--cl-orange-d);font-weight:700}
body.clair main .pg28 .pg28-surtitre::before{width:64px;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--cl-yellow),var(--cl-orange) 40%,var(--cl-blue) 75%,var(--cl-green))}
body.clair main .pg28 h1{color:var(--cl-navy)}
body.clair main .pg28 :is(.pg28-intro,.pg28-intro p){color:var(--cl-ink)}
body.clair main .pg28 .pg28-devis{background:linear-gradient(135deg,#ffc53d,var(--cl-orange));color:var(--cl-navy);border-radius:999px;box-shadow:0 12px 26px rgba(255,146,43,.35)}
body.clair main .pg28 .pg28-galerie{color:var(--cl-blue)}
body.clair main .pg28 .pg28-cadre{position:relative}
body.clair main .pg28 .pg28-cadre::before{content:""!important;display:block!important;position:absolute;inset:26px -20px -20px 26px;border-radius:26px;background:linear-gradient(140deg,var(--cl-yellow) 0%,var(--cl-orange) 38%,var(--cl-rose) 62%,var(--cl-sky) 100%)!important;z-index:0}
body.clair main .pg28 .pg28-cadre img{position:relative!important;z-index:1;border:8px solid #fff!important;border-radius:20px;background:#fff;box-shadow:0 24px 54px rgba(11,37,69,.24)}
body.clair main .page-body{background:linear-gradient(180deg,#fff 0%,#f3f9ff 100%)}
body.clair main .page-body .copy>section:not(.quick-answer){background:#fff;border-radius:18px;padding:24px 26px 10px;margin:0 0 22px;border-top:6px solid var(--cl-orange);box-shadow:0 10px 28px rgba(11,37,69,.07)}
body.clair main .page-body .copy>section:not(.quick-answer):nth-of-type(4n+3){border-top-color:var(--cl-blue)}
body.clair main .page-body .copy>section:not(.quick-answer):nth-of-type(4n){border-top-color:var(--cl-green)}
body.clair main .page-body .copy>section:not(.quick-answer):nth-of-type(4n+1){border-top-color:var(--cl-rose)}
body.clair main .page-body .copy>section:not(.quick-answer)>h2:first-child{margin-top:0}
body.clair main .page-body .copy>p a{display:inline-block;margin:4px 6px 4px 0;padding:8px 14px;border-radius:999px;background:#fff;border:2px solid #e7f5ff;color:var(--cl-navy);text-decoration:none;font-weight:600}
body.clair main .page-body .copy>p a:hover{background:#fff4e6;border-color:var(--cl-orange)}
@media (min-width:761px){
body.clair main .pg28 .pg28-cadre{width:fit-content;max-width:100%;justify-self:end}
body.clair main .pg28 .pg28-whatsapp,body.clair main .closing a[href*="whatsapp"]{display:none!important}
}
@media (max-width:760px){
body.clair main .pg28 .pg28-cadre::before{inset:14px -8px -8px 14px;border-radius:20px}
body.clair main .pg28 .pg28-cadre img{border-width:6px!important;border-radius:16px}
body.clair main .page-body .copy>section:not(.quick-answer){padding:20px 18px 6px}
}

/* 7. Album de nos réalisations sur la photo du premier écran */
.lalb-open{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-start;padding:22px;margin:0;border:0;background:transparent;cursor:zoom-in;text-align:left;font:inherit;text-decoration:none;color:inherit}
.lalb-open:focus-visible{outline:3px solid #0b2545;outline-offset:4px;border-radius:20px}
.lalb-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(11,37,69,.28);color:#0b2545;transition:transform .2s ease}
.lalb-open:hover .lalb-badge{transform:translateY(-2px)}
.lalb-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ffc53d,#ff922b);color:#0b2545}
.lalb-ico svg{display:block}
.lalb-badge strong{display:block;font-size:15px;font-weight:700;line-height:1.25;color:#0b2545}
.lalb-badge small{display:block;font-size:12.5px;line-height:1.3;color:#475569}
.clair .clair-tile{min-height:320px}
.clair .clair-tile .lalb-open{position:relative;z-index:1;inset:auto;min-height:320px;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:8px solid #fff;border-radius:20px;background:radial-gradient(circle at 20% 20%,rgba(255,212,59,.55) 0,rgba(255,212,59,0) 40%),radial-gradient(circle at 85% 30%,rgba(77,171,247,.5) 0,rgba(77,171,247,0) 42%),radial-gradient(circle at 50% 95%,rgba(105,219,124,.45) 0,rgba(105,219,124,0) 45%),#fff7ec;box-shadow:0 24px 54px rgba(11,37,69,.18)}
.lalb-dialog{width:min(1100px,96vw);max-width:none;max-height:94vh;margin:auto;padding:0;border:0;border-radius:22px;background:#fff;color:#0b2545;box-shadow:0 30px 80px rgba(11,37,69,.35)}
.lalb-dialog::backdrop{background:rgba(11,37,69,.55)}
.lalb-panel{display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px;max-height:94vh;box-sizing:border-box}
.lalb-body{display:flex;flex-direction:column;gap:14px;min-height:0}
.lalb-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lalb-title{margin:0;font-size:20px;font-weight:800;color:#0b2545}
.lalb-close{border:0;border-radius:999px;background:#f1f5f9;color:#0b2545;font:inherit;font-weight:700;padding:9px 16px;cursor:pointer}
.lalb-close:hover{background:#e2e8f0}
.lalb-chips{display:flex;flex-wrap:wrap;gap:8px}
.lalb-chip{flex:none;border:2px solid #e2e8f0;border-radius:999px;background:#fff;color:#0b2545;font:inherit;font-size:14px;font-weight:600;padding:7px 14px;cursor:pointer}
.lalb-chip:hover{border-color:#ffc078}
.lalb-chip.is-on{border-color:transparent;background:linear-gradient(135deg,#ffc53d,#ff922b)}
.lalb-chip:nth-child(3n+2).is-on{background:linear-gradient(135deg,#4dabf7,#1c7ed6);color:#fff}
.lalb-chip:nth-child(3n+3).is-on{background:linear-gradient(135deg,#69db7c,#2f9e44);color:#fff}
.lalb-stage{position:relative;margin:0;display:flex;align-items:center;justify-content:center;height:62vh;min-height:280px;border-radius:16px;background:#f8fafc;overflow:hidden}
.lalb-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none}
.lalb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 6px 18px rgba(11,37,69,.22);color:#0b2545;font-size:30px;line-height:1;cursor:pointer;padding:0}
.lalb-nav:hover{background:#fff4e6}
.lalb-prev{left:12px}
.lalb-next{right:12px}
.lalb-cap{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14.5px;color:#334155}
.lalb-cap em{font-style:normal;color:#e8590c;font-weight:700}
.lalb-cap span{flex-basis:100%;color:#64748b}
.lalb-wait{margin:0;padding:60px 0;text-align:center;color:#475569}
.lalb-all{align-self:flex-start;color:#1c7ed6;font-weight:700;text-decoration:underline;text-underline-offset:4px}

@media (max-width:860px){
.clair .clair-hero-in{grid-template-columns:minmax(0,1fr);gap:30px}
.clair .clair-ph,.clair .clair-tile{max-width:560px}
}
@media (max-width:760px){
.clair :is(.crx-hero-ph,.clair-ph,.pg28-cadre)::before{inset:14px -8px -8px 14px;border-radius:20px}
.clair :is(.crx-hero-ph,.clair-ph,.pg28-cadre) img{border-width:6px!important;border-radius:16px!important}
.clair .comm-hero.clair-hero{padding-top:22px;padding-bottom:40px}
.clair .clair-tile,.clair .clair-tile .lalb-open{min-height:220px}
.lalb-open{padding:12px}
.lalb-badge{gap:10px;padding:8px 14px 8px 8px}
.lalb-ico{width:34px;height:34px}
.lalb-badge strong{font-size:14px}
.lalb-badge small{font-size:11.5px}
.lalb-dialog{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
.lalb-panel{height:100%;max-height:100dvh;padding:14px}
.lalb-body{flex:1}
.lalb-stage{flex:1;height:auto;min-height:0}
.lalb-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
}