/*
Theme Name: Oustaou — portail
Description: La page d'accueil du reseau Oustaou Travaux (site principal uniquement). Oriente les particuliers vers le site de leur commune et recrute les artisans. A n'activer que sur le site principal : les sites villes utilisent oustaou-reseau.
Author: BT Communication
Version: 1.0.0
Requires PHP: 8.0
Text Domain: oustaou-portail
*/

:root{--ink:#17120E;--ink2:#1C1610;--cream:#F1E7D8;--paper:#EEE2CF;--ter:#D2622E;--terl:#E8926A;--or:#E0A73E;--ld:#34281E;--ll:#E1CFB6;--coffee:#6A5B49;--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}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:1.6px;font-size:11px}
.it{font-style:italic;color:var(--terl)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ter);color:#20130B;font-weight:700;font-size:15px;padding:14px 22px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;transition:background .2s}
.btn:hover{background:var(--or)}
.btn[disabled]{opacity:.6;cursor:wait}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* En-tete */
.top{background:var(--ink);color:var(--cream);border-bottom:1px solid var(--ld)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:var(--cream)}
.tel{font-weight:700;font-size:14px;color:var(--cream);display:flex;align-items:center;gap:8px}
.tel span{color:var(--terl)}

/* Hero */
.hero{background:var(--ink);color:var(--cream)}
.hero .wrap{padding-block:72px 84px}
.hero .mono{color:var(--terl)}
.hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(34px,5.4vw,60px);line-height:1.05;margin:16px 0 20px;max-width:15ch}
.hero p.lead{font-size:18px;line-height:1.6;color:#CBBBA4;max-width:52ch}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;max-width:760px}
.path{border:1px solid var(--ld);border-radius:16px;padding:22px;background:var(--ink2);transition:border-color .2s,transform .2s;display:block}
.path:hover{border-color:var(--terl);transform:translateY(-2px)}
.path b{display:block;font-family:'Fraunces',serif;font-size:21px;font-weight:600;margin:8px 0 6px}
.path span.d{color:#B5A58E;font-size:14px;line-height:1.5}
.path .mono{font-size:10px}
.path .go{display:block;margin-top:14px;color:var(--terl);font-weight:700;font-size:14px}

/* Particuliers */
.part{padding-block:84px}
.part .mono{color:var(--ter)}
h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(28px,4vw,42px);line-height:1.1;margin:12px 0 14px}
h2 .it{color:var(--ter)}
.part p.sub{color:var(--coffee);font-size:17px;line-height:1.6;max-width:56ch}
.search{margin-top:30px;background:#FFFDF8;border:1px solid var(--ll);border-radius:18px;padding:22px;max-width:760px;box-shadow:0 18px 40px -28px rgba(23,18,14,.45)}
.search label{display:block;font-weight:700;font-size:14px;margin-bottom:10px}
.srow{display:flex;gap:10px}
.srow input{flex:1;min-width:0;font:inherit;font-size:17px;padding:14px 16px;border:1px solid var(--ll);border-radius:12px;background:#fff;color:var(--ink)}
.srow input:focus{outline:2px solid var(--terl);outline-offset:1px}
.res{margin-top:12px;font-size:14px;color:var(--coffee);min-height:20px}
.res b{color:var(--ink)}
.villes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.ville{background:#FFFDF8;border:1px solid var(--ll);border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.ville:hover,.ville:focus-visible{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(23,18,14,.5);outline:none}
.ville .img{aspect-ratio:16/10;background:var(--ld) center/cover no-repeat;max-width:100%}
.ville .body{padding:16px 18px 18px}
.ville .mono{font-size:10px;color:var(--coffee)}
.ville h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;margin:6px 0 6px}
.ville p{font-size:13px;line-height:1.55;color:var(--coffee)}
.ville .go{display:block;margin-top:12px;color:var(--ter);font-weight:700;font-size:14px}
.bientot{margin-top:18px;font-size:14px;color:var(--coffee)}

/* Professionnels */
.pro{background:var(--ink);color:var(--cream);padding-block:84px}
.pro .mono{color:var(--terl)}
.pro h2 .it{color:var(--terl)}
.pro .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:start}
.pro p.sub{color:#CBBBA4;font-size:17px;line-height:1.6;max-width:48ch}
.args{list-style:none;margin:28px 0 30px;display:grid;gap:14px}
.args li{display:flex;gap:12px;font-size:15px;line-height:1.55;color:#DCCDB6}
.args li i{flex:0 0 26px;height:26px;border-radius:8px;background:var(--ld);color:var(--terl);font-style:normal;font-weight:700;display:grid;place-items:center;font-size:13px}
.call{border:1px solid var(--ld);border-radius:16px;padding:20px 22px;background:var(--ink2)}
.call .mono{font-size:10px}
.call a.num{display:block;font-family:'Fraunces',serif;font-size:32px;font-weight:600;color:var(--cream);margin:6px 0 4px}
.call a.num:hover{color:var(--terl)}
.call span{color:#B5A58E;font-size:13px}
form.contact{background:#FFFDF8;color:var(--ink);border-radius:18px;padding:26px}
form.contact h3{font-family:'Fraunces',serif;font-weight:600;font-size:22px;margin-bottom:4px}
form.contact p.h{color:var(--coffee);font-size:14px;margin-bottom:18px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--ll);border-radius:10px;background:#fff;color:var(--ink)}
.fld textarea{min-height:96px;resize:vertical}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--coffee);margin:6px 0 16px;cursor:pointer}
.consent input{margin-top:3px;flex:0 0 auto}
.consent a{text-decoration:underline}
form.contact .btn{width:100%;justify-content:center}
.fmsg{display:none;margin:0 0 14px;padding:12px 14px;border-radius:10px;font-size:14px;line-height:1.5}
.fmsg.ko{display:block;background:#FBE9E1;color:#8A3413;border:1px solid #F0C3AE}
.merci{text-align:center;padding:30px 10px}
.merci b{display:block;font-family:'Fraunces',serif;font-size:24px;margin-bottom:8px}
.merci p{color:var(--coffee);font-size:15px;line-height:1.6}

/* Pages de texte (mentions, confidentialite, page introuvable) */
.doc{padding-block:64px 84px}
.doc .wrap{max-width:780px}
.doc .mono{color:var(--ter)}
.doc h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(32px,4.6vw,48px);line-height:1.1;margin:12px 0 26px}
.doc h2{font-size:22px;font-weight:600;margin:34px 0 10px}
.doc p,.doc li{font-size:15.5px;line-height:1.7;color:#3B3027;margin-bottom:10px}
.doc ul{padding-left:20px;margin-bottom:10px}
.doc a{color:var(--ter);text-decoration:underline}
.doc .maj{margin-top:34px;font-size:13px;color:var(--coffee)}
.doc .retour{display:inline-block;margin-top:24px;text-decoration:none}

/* Pied */
footer.pied{background:var(--ink);color:#9C8C76;border-top:1px solid var(--ld);font-size:13px}
footer.pied .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:22px}
footer.pied a:hover{color:var(--terl)}
footer.pied nav{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:860px){
  .pro .grid{grid-template-columns:1fr;gap:34px}
  .villes{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .paths{grid-template-columns:1fr}
  .villes{grid-template-columns:1fr}
  .srow{flex-direction:column}
  .f2{grid-template-columns:1fr}
  .top .tel b{display:none}
  .hero .wrap{padding-block:48px 60px}
}