/*
Theme Name: Oustaou Réseau
Theme URI: https://travaux-draguignan.fr
Author: BT Communication
Author URI: https://travaux-draguignan.fr
Description: Thème réseau Oustaou (gabarits de maquette A/B pilotés par l'arborescence) — mise en relation avec des artisans vérifiés, un site par ville (WordPress Multisite). Le nom de la ville est injecté dynamiquement. Version starter.
Version: 0.13.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: oustaou
*/

:root{--ink:#17120E;--ink2:#1C1610;--cream:#F1E7D8;--paper:#EEE2CF;--ter:#D2622E;--terl:#E8926A;--or:#E0A73E;--ld:#34281E;--ll:#E1CFB6;--coffee:#6A5B49;--mut:#FFFFFF;--green:#7BC47F;--wash:#EFE0BE}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Fix: WordPress ajoute des classes au <body> (blog, home, page...) qui entrent en collision avec des classes du design system (.blog, etc.). On force le body en block pour que les sections s'empilent normalement. */
body{display:block!important}
.mono{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:1.6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
.grain{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.15;mix-blend-mode:screen;pointer-events:none;z-index:1}
header{position:fixed;top:0;left:0;right:0;transform:translateY(-100%);transition:transform .35s ease,background .3s;border-bottom:1px solid transparent;background:transparent;z-index:50}
header.show{transform:translateY(0);background:rgba(23,18,14,.95);backdrop-filter:blur(8px);border-color:var(--ld)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:9px;color:var(--cream);font-family:'Fraunces',serif;font-weight:600;font-size:19px}
.brand .cy{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.5px;color:var(--mut);text-transform:uppercase}
.nav-r{display:flex;align-items:center;gap:12px}
.hdevis{background:var(--ter);color:#20130B;font-weight:700;font-size:14px;padding:9px 16px;border-radius:10px;border:none;cursor:pointer;font-family:inherit;transition:background .2s,color .2s}
.hdevis:hover{background:var(--or);color:#3A2A08}
.hburger{background:none;border:none;cursor:pointer;padding:8px;display:inline-flex}
.burger-i{position:relative;display:block;width:22px;height:2px;background:var(--cream);border-radius:2px}
.burger-i::before,.burger-i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--cream);border-radius:2px}
.burger-i::before{top:-7px}.burger-i::after{top:7px}
.floatburger{position:fixed;top:16px;right:16px;z-index:60;width:50px;height:50px;border-radius:14px;background:rgba(23,18,14,.55);backdrop-filter:blur(6px);border:1px solid var(--ld);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .3s}
.floatburger.hide{opacity:0;pointer-events:none}
.menu{position:fixed;inset:0;z-index:80;background:rgba(23,18,14,.98);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;opacity:0;pointer-events:none;transition:opacity .35s}
.menu.open{opacity:1;pointer-events:auto}
.menu a{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(28px,5vw,40px);color:var(--cream);padding:5px}
.menu a:hover{color:var(--terl);font-style:italic}
.menu .close{position:absolute;top:22px;right:24px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--mut);cursor:pointer}
.floatdevis{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:56;background:var(--or);color:#3A2A08;font-weight:700;font-size:15px;padding:15px 28px;border-radius:30px;border:none;cursor:pointer;font-family:inherit;box-shadow:0 12px 30px -6px rgba(0,0,0,.45);display:none}
.chero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden;min-height:76vh;display:flex;align-items:center;padding:110px 0 66px}
.chero .bg{position:absolute;inset:0;z-index:0}
.chero .bg img{width:100%;height:100%;object-fit:cover}
.chero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,15,11,.92),rgba(20,15,11,.55) 60%,rgba(20,15,11,.35));}
.chero .in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%}
.cleft{max-width:560px}
.crumb{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--terl);margin-bottom:18px}
.crumb a{color:var(--mut)}.crumb a:hover{color:var(--cream)}
.ctitle{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(40px,6vw,72px);line-height:.98;letter-spacing:-1.5px}
.ctitle .it{font-style:italic;font-weight:500;color:var(--terl)}
.clead{font-size:16px;color:var(--cream);line-height:1.6;max-width:500px;margin:20px 0 26px;opacity:.92}
.btn{background:var(--ter);color:#20130B;font-weight:700;font-size:14px;padding:13px 22px;border-radius:11px;border:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:8px;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--or);color:#3A2A08}
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--mut)}
.trust b{color:var(--cream);font-weight:600}
section{position:relative}
.sec{padding:74px 0}
.snum{font-size:15px;color:var(--ter);margin-bottom:14px;display:flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:1.5px}
.snum::before{content:"";width:26px;height:1px;background:var(--ter)}
.h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3.3vw,42px);line-height:1.05;letter-spacing:-1px;white-space:nowrap}
.h2 .it{font-style:italic;color:var(--ter)}
.slead{font-size:15px;color:var(--coffee);max-width:560px;margin-top:16px;line-height:1.6}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.mets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.met{background:#fff;border:1px solid var(--ll);border-radius:14px;padding:20px;transition:transform .18s;display:flex;flex-direction:column}
.met:hover{transform:translateY(-4px);border-color:var(--ter)}
.met .ic{width:52px;height:52px;border-radius:12px;background:var(--wash);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.met h3{font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin-bottom:6px}
.met p{font-size:13px;color:var(--coffee);line-height:1.55;flex:1}
.met .go{font-family:'Space Mono',monospace;font-size:13px;color:var(--terd,#9B451F);color:#9B451F;margin-top:14px;font-weight:700}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.stp3{background:var(--paper);border:1px solid var(--ll);border-radius:12px;padding:18px}
.stp3 .n{width:30px;height:30px;border-radius:8px;background:var(--wash);color:#8A5A12;font-family:'Fraunces',serif;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.stp3 b{display:block;font-size:14px;margin-bottom:5px}
.stp3 p{font-size:12.5px;color:var(--coffee);line-height:1.5}
.dark{background:var(--ink);color:var(--cream)}
.dark .slead{color:var(--mut)}
.reals{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:180px;gap:12px;margin-top:30px}
.real{position:relative;border-radius:14px;overflow:hidden;display:flex;align-items:flex-end;padding:15px;cursor:zoom-in}
.real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.02);transition:transform .5s}
.real:hover img{transform:scale(1.06)}
.real::after{content:"";position:absolute;inset:0;background:#C4602E;mix-blend-mode:multiply;opacity:.3;pointer-events:none}
.real .rov{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(23,18,14,.62));z-index:1}
.real .pill{position:relative;z-index:2;background:rgba(23,18,14,.82);color:var(--cream);font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:7px 12px;border-radius:20px}
.real.feature{grid-column:span 2;grid-row:span 2;padding:22px}
.real.feature .cap{position:relative;z-index:2;max-width:320px}
.real.feature .cap b{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--cream);display:block;line-height:1.12;margin-bottom:6px}
.real.feature .cap span{font-size:13px;color:var(--mut)}
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.art{background:#fff;border:1px solid var(--ll);border-radius:16px;overflow:hidden;transition:transform .2s}
.art:hover{transform:translateY(-4px)}
.art .th{height:150px;position:relative;overflow:hidden}
.art .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.85) sepia(.1)}
.art:hover .th img{transform:scale(1.05);transition:transform .5s}
.art .th::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(23,18,14,.5))}
.art .th .cat{position:absolute;bottom:12px;left:12px;z-index:2;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:#20130B;background:var(--or);padding:4px 9px;border-radius:20px}
.art .bd{padding:16px 17px}
.art h3{font-family:'Fraunces',serif;font-weight:600;font-size:17px;line-height:1.18;margin-bottom:8px}
.art p{font-size:12.5px;color:var(--coffee);line-height:1.5;margin-bottom:10px}
.art .more{font-family:'Space Mono',monospace;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:#9B451F;font-weight:700}
.seotext{max-width:880px;position:relative;max-height:340px;overflow:hidden;margin-top:10px;-webkit-mask-image:linear-gradient(#000 calc(100% - 96px),transparent);mask-image:linear-gradient(#000 calc(100% - 96px),transparent)}
.seotext.open{max-height:none}
.seotext::after{content:none}
.seotext.open{-webkit-mask-image:none;mask-image:none}
.seotext p{font-size:14.5px;color:var(--coffee);line-height:1.75;margin-bottom:14px}
.seotext h3{font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--ink);margin:22px 0 10px}
.seotext strong{color:var(--ink);font-weight:600}
.seomore{margin-top:18px;background:none;border:1px solid var(--ink);color:var(--ink);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:12px 22px;border-radius:24px;cursor:pointer;transition:all .2s}
.seomore:hover{background:var(--or);color:#3A2A08;border-color:var(--or)}
.modal{position:fixed;inset:0;z-index:90;background:rgba(23,18,14,.72);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.modal.open{opacity:1;pointer-events:auto}
.modal-box{position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--cream);font-size:20px;line-height:1;cursor:pointer;z-index:3;font-family:'Space Mono',monospace}
.cg{position:relative;background:var(--ink2);border:1px solid var(--ld);border-radius:18px;overflow:hidden;border-top:3px solid var(--ter);box-shadow:0 30px 90px -20px rgba(0,0,0,.7)}
.cgh{padding:16px 18px;border-bottom:1px solid var(--ld)}
.cgbadge{display:inline-flex;align-items:center;gap:7px;background:var(--ter);color:#20130B;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:6px 12px;border-radius:20px;margin-bottom:12px}
.cgh .live{display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px;color:var(--cream)}
.cgh .pulse{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pl 1.8s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(123,196,127,.5)}70%{box-shadow:0 0 0 8px rgba(123,196,127,0)}100%{box-shadow:0 0 0 0 rgba(123,196,127,0)}}
.cgh .sub{font-size:15px;color:var(--mut);margin-top:4px}
.pbar{height:5px;background:var(--ld);border-radius:4px;margin-top:11px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--ter);width:14%;transition:width .35s}
.cgb{padding:18px;min-height:210px}
.eno{font-size:10px;color:var(--terl);margin-bottom:8px;font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:1px}
.cq{font-family:'Fraunces',serif;font-weight:600;font-size:21px;line-height:1.12;margin-bottom:14px;color:var(--cream)}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{border:1px solid var(--ld);border-radius:11px;padding:12px 14px;font-size:13.5px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;color:var(--cream);transition:all .14s;background:transparent}
.opt:hover{border-color:var(--ter);background:rgba(210,98,46,.09)}
.opt .a{color:var(--mut)}
.wopts{display:flex;flex-wrap:wrap;gap:8px}
.wopt{border:1px solid var(--ld);border-radius:22px;padding:9px 15px;font-size:13px;cursor:pointer;color:var(--cream);transition:all .14s}
.wopt:hover{border-color:var(--ter)}.wopt.sel{background:var(--ter);color:#20130B;border-color:var(--ter);font-weight:600}
.budv{font-family:'Fraunces',serif;font-weight:600;font-size:34px;text-align:center;color:var(--cream);margin:6px 0}
input[type=range]{width:100%;accent-color:var(--ter)}
.fld{margin-bottom:10px}.fld label{font-size:15px;color:var(--mut);display:block;margin-bottom:5px}
.fld input{width:100%;background:var(--ink);border:1px solid var(--ld);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--cream);font-family:inherit}
.fld input:focus{outline:none;border-color:var(--ter)}
/* Décrivez votre projet + pièces jointes : mêmes codes que les autres champs. */
.fld textarea{width:100%;background:var(--ink);border:1px solid var(--ld);border-radius:10px;padding:11px 13px;font-size:14px;color:var(--cream);font-family:inherit;line-height:1.5;resize:vertical;min-height:88px}
.fld textarea:focus{outline:none;border-color:var(--ter)}
.fld input[type=file]{padding:9px 11px;font-size:13px;cursor:pointer}
.fld input[type=file]::file-selector-button{background:var(--ld);color:var(--cream);border:none;border-radius:8px;padding:7px 12px;margin-right:11px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.fld input[type=file]::file-selector-button:hover{background:var(--ter);color:#20130B}
.oa-aide{font-size:12px;color:var(--mut);margin-top:5px;line-height:1.45}
.oa-pj{margin-top:8px;font-size:12.5px;color:var(--cream);line-height:1.6}
.oa-pj b{display:block;font-weight:600}
.oa-pj .ko{color:#E8926A}

.cgf{display:flex;align-items:center;justify-content:space-between;padding:0 18px 18px}
.bk{background:none;border:none;color:var(--mut);font-size:12.5px;cursor:pointer;font-family:inherit}
.bk:hover{color:var(--cream)}
.conf{text-align:center;padding:14px 6px}
.conf h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--cream);margin:10px 0 8px}
.conf p{font-size:13px;color:var(--mut);line-height:1.55;max-width:300px;margin:0 auto}
.lightbox{position:fixed;inset:0;z-index:95;background:rgba(20,15,11,.92);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;object-fit:contain}
.lb-close{position:absolute;top:18px;right:22px;background:none;border:none;color:var(--cream);font-size:24px;cursor:pointer;font-family:'Space Mono',monospace}
footer{background:var(--ink);color:var(--mut);padding:56px 0 28px;position:relative}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;position:relative;z-index:2}
.fbrand .b{margin-bottom:12px}
.fbrand p{font-size:12.5px;line-height:1.6;max-width:320px}
footer h4{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--terl);margin-bottom:14px}
footer .col a,footer .col [data-oa]{display:block;font-size:13px;margin-bottom:9px;color:var(--mut);cursor:pointer}
footer .col a:hover,footer .col [data-oa]:hover{color:var(--cream)}
.legal{border-top:1px solid var(--ld);margin-top:34px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.5px;color:#7A6A57;position:relative;z-index:2}
@media(max-width:820px){.h2{white-space:normal}.mets,.steps3,.blog{grid-template-columns:1fr 1fr}.reals{grid-template-columns:1fr 1fr}.fgrid{grid-template-columns:1fr 1fr}.chero .bg::after{background:linear-gradient(rgba(20,15,11,.62),rgba(20,15,11,.9))}.chero .in{grid-template-columns:1fr;gap:30px}}
@media(max-width:560px){.mets,.steps3,.blog,.reals{grid-template-columns:1fr}.real.feature{grid-column:span 1;grid-row:span 1}.hdevis{display:none}.floatdevis{display:block}.wrap{padding:0 18px}}
.artis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.arti{background:#fff;border:1px solid var(--ll);border-radius:14px;padding:18px;display:flex;flex-direction:column;transition:transform .18s}
.arti:hover{transform:translateY(-4px);border-color:var(--ter)}
.arti .ah{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.arti .avatar{width:44px;height:44px;border-radius:11px;background:var(--wash);color:#8A5A12;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:15px;flex-shrink:0}
.arti .ah b{font-size:15px;display:block}
.arti .ah .loc{font-family:'Space Mono',monospace;font-size:11px;color:var(--coffee);text-transform:uppercase;letter-spacing:.4px}
.arti .dispo{margin-left:auto;font-size:11px;color:#2E7D32;font-weight:600;display:flex;align-items:center;gap:5px;white-space:nowrap}
.arti .dispo::before{content:"";width:7px;height:7px;border-radius:50%;background:#4CAF50}
.arti .rate{font-size:13px;color:var(--coffee);margin-bottom:10px}
.arti .rate .st{color:var(--or);letter-spacing:1px}.arti .rate b{color:var(--ink)}
.arti .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;flex:1}
.arti .tags span{font-size:11px;background:var(--paper);border:1px solid var(--ll);color:var(--coffee);padding:4px 9px;border-radius:20px}
.arti .contact-btn{display:block;text-align:center;text-decoration:none;background:var(--ink);color:var(--cream);border:none;border-radius:10px;padding:11px;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;transition:background .2s}
.arti .contact-btn:hover{background:var(--ter);color:#20130B}
.artinote{font-family:'Space Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--coffee);margin-top:16px;line-height:1.6}
@media(max-width:820px){.artis{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.artis{grid-template-columns:1fr}}
.floatlogo{position:fixed;top:16px;left:24px;z-index:60;display:inline-flex;transition:opacity .3s}
.floatlogo.hide{opacity:0;pointer-events:none}
@media(max-width:560px){.floatlogo{left:16px;top:18px}.floatlogo svg{height:26px;width:auto}}
.bento3{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(155px,auto);gap:14px;margin-top:32px}
.b3{border-radius:16px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.b3 .num{font-family:'Fraunces',serif;font-weight:600;font-size:54px;line-height:.8}
.b3 b{font-family:'Fraunces',serif;font-weight:600;font-size:22px;display:block;margin-bottom:6px}
.b3 p{font-size:14px;line-height:1.55}
.b3.s1{grid-column:1/3;background:var(--ter);color:#20130B}.b3.s1 p{color:#3A2410}
.b3.s2{grid-column:3;grid-row:1/3;background:var(--ink);color:var(--cream)}.b3.s2 p{color:var(--mut)}.b3.s2 .num{color:var(--or)}
.b3.s3{grid-column:1/3;background:#fff;border:1px solid var(--ll);color:var(--ink)}.b3.s3 p{color:var(--coffee)}.b3.s3 .num{color:var(--ter)}
@media(max-width:700px){.bento3{grid-template-columns:1fr}.b3.s1,.b3.s2,.b3.s3{grid-column:auto;grid-row:auto}}
.arti{position:relative}
.arti.pin{border-color:var(--ter);box-shadow:0 0 0 1px var(--ter)}
.clubbadge{margin-left:auto;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--ter);font-weight:700;white-space:nowrap}
.ahidden{display:none}
.voirplus{display:block;margin:24px auto 0;background:none;border:1px solid var(--ink);color:var(--ink);font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.5px;text-transform:uppercase;padding:13px 26px;border-radius:24px;cursor:pointer;transition:all .2s}
.voirplus:hover{background:var(--or);color:#3A2A08;border-color:var(--or)}

/* --- composants front-page / 404 --- */
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 4px}
.hero-cta .p1{background:var(--ter);color:#20130B;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px}
.hero-cta .p1:hover{background:var(--or);color:#3A2A08}
.hero-cta .p2{border:1px solid var(--ld);color:var(--cream);font-weight:600;font-size:15px;padding:14px 24px;border-radius:12px}
.hero-cta .p2:hover{border-color:var(--ter)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.chips span{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.4px;color:var(--mut);border:1px solid var(--ld);border-radius:30px;padding:8px 14px}
.chips span b{color:var(--cream);font-weight:700}
.mets2{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.met2{background:#fff;border:1px solid var(--ll);border-radius:16px;padding:24px;transition:border-color .2s,transform .2s;display:block}
.met2:hover{border-color:var(--ter);transform:translateY(-3px)}
.met2 b{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:17px;margin-bottom:7px}
.met2 p{font-size:13.5px;color:var(--coffee);line-height:1.55}
.met2 .go{font-family:'Space Mono',monospace;font-size:12.5px;color:#9B451F;font-weight:700;margin-top:12px;display:inline-block}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.stp3{background:var(--paper);border:1px solid var(--ll);border-radius:14px;padding:22px}
.stp3 .n{font-family:'Fraunces',serif;font-weight:600;font-size:32px;color:var(--ter);line-height:1}
.stp3 b{display:block;font-family:'Fraunces',serif;font-size:16px;margin:10px 0 6px}
.stp3 p{font-size:13px;color:var(--coffee);line-height:1.55}
.artcta{background:var(--ter);border-radius:22px;padding:54px 40px;text-align:center;position:relative;overflow:hidden}
.artcta h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3.4vw,40px);color:#20130B;letter-spacing:-.8px}
.artcta p{color:#3A2410;max-width:460px;margin:12px auto 22px;line-height:1.55}
.artcta .cbtn{display:inline-block;background:var(--ink);color:var(--cream);font-weight:700;font-size:15px;padding:15px 30px;border-radius:12px}
.artcta .cbtn:hover{background:#000}
.e404{position:relative;background:var(--ink);color:var(--cream);min-height:80vh;display:flex;align-items:center;overflow:hidden;text-align:center}
.e404 .big{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(90px,20vw,210px);line-height:.85;color:var(--terl);letter-spacing:-4px}
.e404 h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(24px,3.4vw,38px);margin:12px 0 10px}
.e404 p{color:var(--mut);max-width:440px;margin:0 auto 26px;line-height:1.6}
.archghost{position:absolute;right:-40px;bottom:-60px;width:440px;opacity:.06;z-index:1;pointer-events:none}
@media(max-width:820px){.mets2,.steps3{grid-template-columns:1fr}}
/* --- contenu éditorial (pages pilotées par le contenu) --- */
.ltext{font-size:16.5px;line-height:1.75;color:#2a2118}
.ltext h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(22px,3vw,29px);letter-spacing:-.5px;margin:40px 0 6px;color:var(--ink)}
.ltext h2::before{content:"";display:block;width:34px;height:2px;background:var(--ter);margin-bottom:14px}
.ltext h3{font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin:26px 0 6px;color:var(--ink)}
.ltext p{margin:16px 0}
.ltext ul{margin:16px 0 16px 2px;padding:0;list-style:none}
.ltext li{position:relative;padding-left:26px;margin:9px 0}
.ltext li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:2px;background:var(--ter);transform:rotate(45deg)}
.ltext a{color:var(--terd,#9B451F);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.ltext strong{color:var(--ink)}

/* Sommaire du silo (pages de categorie) : toutes les prestations de la
   categorie, groupees par metier. Trois colonnes, une seule sur mobile. */
.osilo{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px;margin-top:26px}
.osilo-col h3{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:600;margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid rgba(0,0,0,.12)}
.osilo-col h3 a{color:inherit;text-decoration:none}
.osilo-col h3 a:hover{color:var(--ter,#D2622E)}
.osilo-col ul{list-style:none;margin:0;padding:0}
.osilo-col li{margin:0 0 7px}
.osilo-col li a{font-family:Manrope,system-ui,sans-serif;font-size:15px;line-height:1.5;color:var(--coffee,#6B5A47);text-decoration:none}
.osilo-col li a:hover{color:var(--ink,#17120E);text-decoration:underline}
@media(max-width:900px){.osilo{grid-template-columns:1fr;gap:24px}}

/* ===== FAQ partagee (bloc oustaou_faq_html) =====
   Les regles vivaient uniquement dans le <style> de front-page.php. Le bloc
   FAQ des pages categorie / metier / prestation s'affichait donc sans style
   ni pliage : on balisait du FAQPage sur du contenu inexploitable. */
.faqs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.faqs .fcard{background:var(--cream,#F1E7D8);border:1px solid var(--ll,#E1CFB6);border-radius:16px;padding:20px 22px;cursor:pointer;align-self:start}
.faqs .fcard .fq{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;font-family:'Fraunces',serif;font-weight:600;font-size:18px;line-height:1.2;color:var(--ink,#17120E)}
.faqs .fcard .fq .p{color:var(--ter,#D2622E);font-size:22px;line-height:1;transition:transform .25s;flex-shrink:0}
.faqs .fcard .fa{font-size:13.5px;color:var(--coffee,#6A5B49);line-height:1.6;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease,margin-top .35s ease}
.faqs .fcard.open .fa{max-height:420px;opacity:1;margin-top:12px}
.faqs .fcard.open .fq .p{transform:rotate(45deg)}
@media(max-width:560px){.faqs{grid-template-columns:1fr}}

/* ===== Sections a corps de texte =====
   `.slead` est plafonne a 560 px : c'est la bonne mesure pour un chapo d'une
   ou deux lignes, celle qu'on trouve sous la plupart des titres du site.
   Elle devient fausse des que la section porte un vrai texte de 200 mots :
   le H2 court alors sur 1 180 px au-dessus d'une colonne de 560, et l'oeil
   lit un defaut d'alignement, pas une intention.
   Ici, titre, surtitre et texte partagent la meme mesure — 880 px, environ
   85 signes par ligne, ce qui reste confortable a lire. */
.sec-texte .snum,
.sec-texte .h2,
.sec-texte .slead{max-width:880px}
.sec-texte .slead{font-size:15.5px;line-height:1.75}
.sec-texte .slead p{margin:0 0 12px}
.sec-texte .slead p:last-child{margin-bottom:0}

/* Filet de securite : une section dont le fond sombre est pose en style inline
   sans la classe `.dark`. Le chapo y sortait en #6A5B49 sur #17120E — un
   contraste de 2:1 la ou WCAG en demande 4,5. C'etait le cas sur cinq
   gabarits. La classe est desormais posee dans le markup ; cette regle evite
   que l'oubli se reproduise. */
.sec[style*="--ink"] .slead{color:var(--mut)}

/* La barre fixe sur mobile.
   Le bouton « Devis gratuit » y est masque (il est repris par le bouton
   flottant en bas d'ecran). C'est lui qui donnait sa hauteur a la barre :
   sans lui, elle se referme sur la hauteur du logo et parait ecrasee a cote
   du rendu desktop. On rend la marge au padding. */
@media(max-width:560px){.nav{padding:17px 0}}

/* ===== Bloc « chiffres du reseau » (.steps3 / .st) =====
   Ses regles n'existaient que dans le <style> de quelques gabarits. Emis par
   `oustaou_steps3_html()`, partage par tout le reseau, il sortait donc sans
   style sur les autres pages : le nombre sur une ligne, son libelle sur la
   suivante, dans deux typographies differentes.
   Nombre et libelle tiennent desormais sur une seule ligne, dans la meme
   typographie — « 22 communes couvertes » se lit comme une phrase, pas comme
   un tableau casse. */
.steps3 .st .n,
.steps3 .st h3{display:inline;font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:17px;line-height:1.35;color:var(--ink,#17120E);margin:0}
.steps3 .st .n::after{content:"\00a0"}
.steps3 .st p{margin-top:7px;font-size:14px;line-height:1.6;color:var(--coffee,#6A5B49)}
.dark .steps3 .st .n,.dark .steps3 .st h3{color:var(--cream,#F1E7D8)}
.dark .steps3 .st p{color:var(--mut,#FFFFFF)}

/* Un lien obfusque sort en <span role="link">, pas en <a> : toute regle de
   mise en forme ecrite sur `a` cesse de l'atteindre. C'est ce qui a colle les
   uns aux autres les liens du pied de page a la premiere obfuscation. La
   parade generique : partout ou un lien peut etre obfusque, la regle vise
   aussi `[data-oa]`. */
[data-oa]{cursor:pointer}