/* =====================================================================
   PRATIKO V2.5 | Thème RÉTRO 70 (choix « Rétro 70 » de /previews/, essai du 2026-11-04).
   Remplace brutal.css sur / et /en/ (brutal.css est gardé : remettre son <link> pour revenir).
   Chargé APRÈS styles.css : il redéfinit les variables et habille les composants.
   Le préfixe :root:not(#_) donne la priorité d'un id, pour passer devant les règles de base sans !important.
   Palette : crème #FFF4DC, brun #3B2314, orange brûlé #E8642C, moutarde #F2B033, vert sapin #2F6F5E.
   ===================================================================== */
:root:not(#_){color-scheme:light;--page:#FFF4DC;--surface:#FFFBF0;--ink:#3B2314;--muted:#7A5338;--line:#E8C79A;--soft:#FBE6BE;--accent:#2F6F5E;--pill:#F2B033;--notice:#F2B033;--notice-ink:#3B2314;--lime:#E8642C;--gold:#F2B033;--charcoal:#3B2314;
  --ora:#E8642C;--mus:#F2B033;--pin:#2F6F5E;--cream:#FFF4DC;--brown:#3B2314;--bx:#3B2314;--sh:#F2B033;--r:22px;
  --head:"Cooper Black","Cooper Std","Cooper",Georgia,"Times New Roman",serif;--body:"Trebuchet MS","Segoe UI",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root:not(#_):not([data-theme="light"]){color-scheme:dark;--page:#1F140C;--surface:#2C1C11;--ink:#FFF4DC;--muted:#E1C9A6;--line:#6B4A30;--soft:#3A2617;--accent:#7CC4AE;--notice-ink:#3B2314;--bx:#E8C79A;--sh:#E8642C}}
:root:not(#_)[data-theme="dark"]{color-scheme:dark;--page:#1F140C;--surface:#2C1C11;--ink:#FFF4DC;--muted:#E1C9A6;--line:#6B4A30;--soft:#3A2617;--accent:#7CC4AE;--notice-ink:#3B2314;--bx:#E8C79A;--sh:#E8642C}

/* ---------- Base ---------- */
:root:not(#_) body{background:var(--page);color:var(--ink);font-family:var(--body)}
:root:not(#_) h1,:root:not(#_) h2,:root:not(#_) .brand strong{font-family:var(--head);font-weight:400;letter-spacing:-.5px;line-height:1.05}
:root:not(#_) h3,:root:not(#_) .field,:root:not(#_) summary{font-weight:700}
:root:not(#_) :focus-visible{outline:3px solid var(--ora);outline-offset:3px}
:root:not(#_) .muted,:root:not(#_) .lead,:root:not(#_) .small{color:var(--muted)}
:root:not(#_) .eyebrow{display:inline-block;background:var(--cream);color:var(--brown);border:2px solid var(--brown);border-radius:99px;padding:4px 12px;letter-spacing:1.2px}
:root:not(#_) a{color:inherit}

/* ---------- En-tête : crème avec trois rayures orange, moutarde, sapin ---------- */
:root:not(#_) .top{background:var(--cream);color:var(--brown);border-bottom:0;backdrop-filter:none;box-shadow:0 6px 0 var(--ora),0 12px 0 var(--mus),0 18px 0 var(--pin)}
:root:not(#_) .top .brand small{color:#7A5338}
:root:not(#_) .top .brand strong{color:var(--brown)}
:root:not(#_) main#app{padding-top:42px}
:root:not(#_) .shell{background:var(--page);box-shadow:none}
:root:not(#_) .logo{background:var(--ora);border-radius:50%;border:0}
:root:not(#_) .logo svg path{stroke:var(--cream)}
:root:not(#_) .logo svg circle{fill:var(--mus)}
:root:not(#_) select,:root:not(#_) .iconbtn,:root:not(#_) .theme-switch{border:2px solid var(--brown);border-radius:99px;background:var(--cream);color:var(--brown);box-shadow:0 3px 0 var(--brown)}
:root:not(#_) .theme-switch .ts-knob{border-radius:50%;background:var(--ora)}
:root:not(#_) .theme-switch .ts-icon{color:var(--brown)}
:root:not(#_) .theme-switch[aria-checked="false"] .ts-sun,:root:not(#_) .theme-switch[aria-checked="true"] .ts-moon{color:var(--cream)}
:root:not(#_) .login-pop{border:2px solid var(--bx);border-radius:18px;box-shadow:6px 6px 0 var(--sh);background:var(--surface);overflow:hidden}
:root:not(#_) .login-pop button{border-radius:12px;color:var(--ink);font-weight:700}
:root:not(#_) .login-pop button:hover,:root:not(#_) .login-pop button:focus-visible{background:var(--mus);color:var(--brown)}
:root:not(#_) .dot{background:var(--ora);border:2px solid var(--cream)}
/* Navigation de l'en-tête (ordinateur) : onglets en pastilles */
:root:not(#_) .top .bottom button{border-radius:99px}

/* ---------- Boutons : pastilles avec ombre pleine ---------- */
:root:not(#_) .btn{border:2px solid var(--brown);border-radius:99px;box-shadow:0 5px 0 var(--brown);font-weight:700;letter-spacing:.2px;transition:transform .08s,box-shadow .08s}
:root:not(#_) .btn:hover{transform:translateY(-1px);box-shadow:0 6px 0 var(--brown)}
:root:not(#_) .btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--brown)}
:root:not(#_) .btn.primary,:root:not(#_) .login-btn{background:var(--ora);color:var(--cream)}
:root:not(#_) .btn.outline{background:var(--surface);color:var(--ink);border-color:var(--bx);box-shadow:0 5px 0 var(--bx)}
:root:not(#_) .btn.light{background:var(--cream);color:var(--brown)}
:root:not(#_) .top .btn{box-shadow:0 4px 0 var(--brown)}
:root:not(#_) .btn[disabled]{opacity:.55;transform:none}
:root:not(#_) .linkbtn{color:var(--accent);font-weight:700;text-decoration:underline 2px;text-underline-offset:3px}

/* ---------- Héros : orange brûlé et soleil rayonnant ---------- */
:root:not(#_) .hero{position:relative;overflow:hidden;isolation:isolate;background:var(--ora);color:var(--cream);border:3px solid var(--brown);border-radius:32px;box-shadow:0 8px 0 var(--brown)}
:root:not(#_) .hero::after{content:"";position:absolute;right:-140px;top:-120px;width:460px;height:460px;z-index:-1;border-radius:50%;background:repeating-conic-gradient(#F2B03366 0 10deg,transparent 10deg 20deg)}
:root:not(#_) .hero h1{color:var(--cream);font-size:clamp(2rem,6vw,3.4rem);letter-spacing:-1px;margin-top:18px}
:root:not(#_) .hero h1 em{font-style:normal;color:var(--mus)}
:root:not(#_) .hero p,:root:not(#_) .hero .hero-kicker{color:var(--cream);opacity:1}
:root:not(#_) .hero .eyebrow{background:var(--cream);color:var(--brown);border-color:var(--brown)}
:root:not(#_) .hero .hero-kicker{color:var(--mus);font-weight:700}
:root:not(#_) .hero-outline{border-color:var(--cream)!important;color:var(--cream)!important;background:transparent!important;box-shadow:0 5px 0 var(--brown)}

/* ---------- Cartes et panneaux : coins ronds, ombre moutarde ---------- */
:root:not(#_) .card,:root:not(#_) .cat,:root:not(#_) .stat,:root:not(#_) .fee-tile,:root:not(#_) .job-panel,:root:not(#_) .conv,:root:not(#_) .empty,
:root:not(#_) .notice,:root:not(#_) .faq details,:root:not(#_) .landing-panel,:root:not(#_) .trust-callout,:root:not(#_) .landing-cta,
:root:not(#_) .cookie-panel,:root:not(#_) .fee-example,:root:not(#_) .map-gate,:root:not(#_) .map-surface,:root:not(#_) .auth-choice form{border:2px solid var(--bx);border-radius:var(--r);box-shadow:6px 6px 0 var(--sh)}
:root:not(#_) .card,:root:not(#_) .faq details,:root:not(#_) .conv,:root:not(#_) .job-panel,:root:not(#_) .empty,:root:not(#_) .cookie-panel,:root:not(#_) .landing-panel,:root:not(#_) .landing-cta{background:var(--surface);color:var(--ink)}
:root:not(#_) .cat{background:var(--mus);color:var(--brown);border-color:var(--brown);transition:transform .12s}
:root:not(#_) .cat:nth-child(3n+2){background:var(--ora);color:var(--cream)}
:root:not(#_) .cat:nth-child(3n){background:var(--pin);color:var(--cream)}
:root:not(#_) .cat:hover{transform:translateY(-3px) rotate(-1deg)}
:root:not(#_) .fee-tile,:root:not(#_) .stat{background:var(--soft);color:var(--ink)}
:root:not(#_) .fee-tile strong,:root:not(#_) .stat b{color:var(--accent);font-family:var(--head);font-weight:400}
:root:not(#_) .notice{background:var(--mus);color:var(--brown);font-weight:700;border-color:var(--brown);box-shadow:0 4px 0 var(--brown)}
:root:not(#_) .trust-callout{background:var(--soft)}
:root:not(#_) .fee-example>div{border-bottom:2px dashed var(--line)}
:root:not(#_) .divider{background:none;border-top:3px dotted var(--ora);height:0}

/* ---------- Pastilles, prix, statuts ---------- */
:root:not(#_) .pill{background:var(--mus);color:var(--brown);border:2px solid var(--brown);border-radius:99px;font-weight:700;font-size:11px}
:root:not(#_) .st-assigned,:root:not(#_) .st-accepted,:root:not(#_) .st-delivered{background:#A9D8C8}
:root:not(#_) .st-done{background:var(--pin);color:var(--cream)}
:root:not(#_) .st-disputed{background:var(--ora);color:var(--cream)}
:root:not(#_) .st-cancelled,:root:not(#_) .st-declined,:root:not(#_) .st-withdrawn{background:#E8DCC6}
:root:not(#_) .price{color:var(--accent);font-family:var(--head);font-weight:400}
:root:not(#_) .badge{background:var(--ora);color:var(--cream);border:2px solid var(--brown);border-radius:99px;font-weight:700}

/* ---------- Formulaires ---------- */
:root:not(#_) input,:root:not(#_) textarea,:root:not(#_) select{border:2px solid var(--bx);border-radius:14px;background:var(--surface);color:var(--ink)}
:root:not(#_) .top select{border-radius:99px;background:var(--cream);color:var(--brown)}
:root:not(#_) input:focus,:root:not(#_) textarea:focus,:root:not(#_) select:focus{outline:3px solid var(--ora);outline-offset:2px}

/* ---------- Navigation mobile ---------- */
:root:not(#_) .bottom{border-top:3px solid var(--bx);background:var(--surface)}
:root:not(#_) .bottom button{color:var(--ink);font-weight:700;border-radius:18px;margin:7px 5px}
:root:not(#_) .bottom button.active{background:var(--ora);color:var(--cream)}
/* Ordinateur : la même barre devient les onglets de l'en-tête (sans fond ni bordure) */
@media(max-width:899px){:root:not(#_) .hero::after{width:260px;height:260px;right:-130px;top:-130px}}
@media(min-width:900px){:root:not(#_) .top .bottom{background:transparent;border-top:0}:root:not(#_) .top .bottom button{margin:0}:root:not(#_) .top .bottom button:not(.active):hover{background:var(--soft)}}

/* ---------- Chat : bulles arrondies ---------- */
:root:not(#_) .chat-log{gap:12px;padding:18px;border:2px solid var(--bx);border-radius:26px;background:var(--soft)}
:root:not(#_) .msg{max-width:min(78%,520px);padding:10px 15px 8px;border:2px solid var(--brown);border-radius:22px;line-height:1.45;box-shadow:0 4px 0 var(--brown)}
:root:not(#_) .msg p{margin:0;font-size:15px}
:root:not(#_) .msg time{display:block;margin-top:4px;font-size:10.5px;opacity:.7}
:root:not(#_) .msg.me{align-self:flex-end;background:var(--ora);color:var(--cream);border-bottom-right-radius:6px}
:root:not(#_) .msg.me time{text-align:right}
:root:not(#_) .msg.them{align-self:flex-start;background:var(--surface);color:var(--ink);border-color:var(--bx);border-bottom-left-radius:6px;box-shadow:0 4px 0 var(--bx)}
:root:not(#_) .msg.sys{align-self:center;max-width:92%;background:var(--mus);color:var(--brown);border:2px dashed var(--brown);border-radius:99px;box-shadow:none;text-align:center;padding:6px 14px}
:root:not(#_) .msg.sys p{font-weight:700;font-size:12px}

/* ---------- Tarifs (V2.6) ---------- */
:root:not(#_) .plan{border:2px solid var(--bx);border-radius:var(--r);box-shadow:6px 6px 0 var(--sh);background:var(--surface)}
:root:not(#_) .plan h3{font-family:var(--head);font-weight:400;font-size:20px}
:root:not(#_) .plan-price strong{font-family:var(--head);font-weight:400;font-size:2.4rem;color:var(--accent)}
:root:not(#_) .plan-client .plan-price strong{color:var(--ora)}
:root:not(#_) .plan-pro{background:var(--pin);color:var(--cream);border-color:var(--brown);box-shadow:6px 6px 0 var(--ora);transform:rotate(-1deg)}
:root:not(#_) .plan-pro .plan-price strong{color:var(--mus)}
:root:not(#_) .plan-pro .plan-price span{color:var(--cream);opacity:.85}
:root:not(#_) .plan-pro .pill{background:var(--mus);color:var(--brown)}
:root:not(#_) .pro-badge{background:var(--pin);color:var(--cream);border-color:var(--brown)}
:root:not(#_) .plan-card.is-pro{background:var(--soft)}

/* ---------- Divers ---------- */
:root:not(#_) #toast{background:var(--brown);color:var(--cream);border:2px solid var(--mus);border-radius:99px;font-weight:700}
:root:not(#_) .leaflet-popup-content-wrapper{border-radius:14px;border:2px solid var(--brown)}
:root:not(#_) .contact-card a{color:var(--accent)}

/* ---------- Profil (avatar et sections) ---------- */
.avatar{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;overflow:hidden;background:var(--mus,#F2B033);color:var(--brown,#3B2314);font-family:var(--head,inherit);font-size:18px;border:2px solid var(--brown,#3B2314);border-radius:50%}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:30px;height:30px;font-size:12px}
.avatar.lg{width:96px;height:96px;font-size:38px;box-shadow:0 5px 0 var(--ora,#E8642C)}
.profile-head{display:flex;align-items:center;gap:16px;margin:6px 0 4px}
.profile-head h2{margin:0}
.avatar-edit{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:10px 0 4px}
.avatar-edit .actions{flex:1}
.profile-section{border:2px solid var(--bx,#3B2314);border-radius:var(--r,22px);box-shadow:6px 6px 0 var(--sh,#F2B033);background:var(--surface);padding:16px 18px;margin:18px 0}
.profile-section h3{font-family:var(--head,inherit);font-weight:400;font-size:19px;margin:0 0 6px}
.conv .avatar,.card .avatar{margin-right:10px}
.who{display:flex;align-items:center}
@media(prefers-reduced-motion:reduce){:root:not(#_) .btn,:root:not(#_) .cat{transition:none}}

/* ---------- Profils publics et évaluations (V2.7) ---------- */
:root:not(#_) .stars,:root:not(#_) .star-btn.on{color:var(--ora)}
:root:not(#_) .star-btn{border-color:var(--bx);box-shadow:0 3px 0 var(--bx)}
:root:not(#_) .star-btn.on{background:var(--mus);color:var(--brown);border-color:var(--brown)}
:root:not(#_) .pf-card{border:3px solid var(--bx);box-shadow:0 -6px 0 var(--ora)}
@media(min-width:620px){:root:not(#_) .pf-card{box-shadow:8px 8px 0 var(--ora)}}
:root:not(#_) .pf-card h2,:root:not(#_) .pf-card h3{font-family:var(--head);font-weight:400}
:root:not(#_) .pf-close{border:2px solid var(--bx);background:var(--mus);color:var(--brown);font-weight:700}
:root:not(#_) .pf-stat{border:2px solid var(--bx);border-radius:18px}
:root:not(#_) .pf-stat strong{font-family:var(--head);font-weight:400;color:var(--ora)}
:root:not(#_) .pf-review{border-top:2px dashed var(--line)}
:root:not(#_) .review-box{border-color:var(--pin);box-shadow:5px 5px 0 var(--mus)}
:root:not(#_) .who-link strong{text-decoration-color:var(--ora)}
:root:not(#_) .rating-tag{color:var(--ora)}:root:not(#_) .rating-tag .muted{color:var(--muted)}