/* Artisano · artisano.pro
   La sélection d'artisans d'exception. Feuille commune à toutes les pages.
   Palette : ardoise, béton clair, acier ; un seul accent, l'orange Artisano.
   Polices auto-hébergées : Bricolage Grotesque (titres), Hanken Grotesk (texte). */

@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/hanken-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/hanken-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ardoise:#1a1d21;
  --ardoise-2:#23272c;
  --ink:#15181c;
  --acier:#5b626a;
  --acier-2:#646b73;
  --beton:#f1f2f1;
  --beton-2:#e6e8e7;
  --blanc:#ffffff;
  --line:#d8dcdf;
  --line-dark:rgba(255,255,255,.14);
  --orange:#fc6506;
  --orange-ink:#d85400;
  --on-orange:#1c0d00;
  --ok:#1f7a3e;
  --erreur:#b42318;

  --display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;

  --r:6px;
  --r-lg:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
  --nav-h:72px;
  --shadow:0 2px 6px rgba(21,24,28,.06),0 18px 40px -22px rgba(21,24,28,.28);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--blanc);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
a{color:inherit;text-decoration:none}
p a:not(.btn),li a,dd a,.texte a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--orange)}
p a:not(.btn):hover,li a:hover{color:var(--orange-ink)}
img{display:block;max-width:100%;height:auto}
svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--orange);color:var(--on-orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
html{scrollbar-width:thin;scrollbar-color:var(--line) var(--blanc)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px;border:3px solid var(--blanc)}
::-webkit-scrollbar-track{background:var(--blanc)}
.skip{position:absolute;left:-9999px;top:12px;z-index:300;background:var(--orange);color:var(--on-orange);padding:10px 18px;border-radius:var(--r);font-weight:600}
.skip:focus{left:12px}
.wrap{max-width:var(--maxw);margin-inline:auto}
.section,.hero,.pied,.nav{padding-left:var(--pad);padding-right:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Typographie */
h1,h2,h3,.h1,.h2,.h3{font-family:var(--display);font-weight:500;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
h1,.h1{font-size:clamp(2.4rem,6.2vw,4.6rem);letter-spacing:-.035em}
h2,.h2{font-size:clamp(1.85rem,3.8vw,2.85rem)}
h3,.h3{font-size:clamp(1.25rem,2vw,1.55rem);letter-spacing:-.015em;line-height:1.2}
p{max-width:62ch}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;color:var(--acier);max-width:56ch}
.muted{color:var(--acier)}
strong,b{font-weight:600}
.chiffres{font-variant-numeric:tabular-nums}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r);border:1px solid transparent;font-weight:600;font-size:16px;line-height:1.2;cursor:pointer;transition:background-color .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-orange{background:var(--orange);color:var(--on-orange);border-color:var(--orange)}
.btn-orange:hover{background:#ff7a26;border-color:#ff7a26}
.btn-ardoise{background:var(--ardoise);color:var(--blanc);border-color:var(--ardoise)}
.btn-ardoise:hover{background:#2b3036}
.btn-ligne{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ligne:hover{border-color:var(--ink)}
.btn-ligne-clair{background:transparent;color:var(--blanc);border-color:var(--line-dark)}
.btn-ligne-clair:hover{border-color:var(--blanc)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:15px}
.btn[disabled]{opacity:.55;cursor:default}

/* Barre de navigation */
.nav{position:sticky;top:0;z-index:100;background:var(--blanc);border-bottom:1px solid var(--line)}
.nav__inner{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand img{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:28px}
.nav__links a.lien{font-weight:500;font-size:15.5px;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent;transition:border-color .18s var(--ease)}
.nav__links a.lien:hover,.nav__links a.lien[aria-current="page"]{border-bottom-color:var(--orange)}
.nav__toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r);background:var(--blanc);position:relative;cursor:pointer}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:11px;width:20px;height:2px;background:var(--ink);transition:transform .2s var(--ease),opacity .2s var(--ease)}
.nav__toggle span{top:21px}
.nav__toggle span::before{left:0;top:-6px}
.nav__toggle span::after{left:0;top:6px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{display:none;position:absolute;left:0;right:0;top:var(--nav-h);background:var(--blanc);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad) 20px}
  .nav__links.ouvert{display:flex}
  .nav__links a.lien{padding:14px 0;border-bottom:1px solid var(--beton-2);font-size:17px}
  .nav__links .btn{margin-top:14px}
}

/* Sections */
.section{padding-block:clamp(64px,9vw,120px)}
.section--serre{padding-block:clamp(44px,6vw,80px)}
.section--beton{background:var(--beton)}
.section--ardoise{background:var(--ardoise);color:var(--blanc)}
.section--ardoise .lead,.section--ardoise .muted{color:#b9bec4}
.section--ardoise p{color:#d5d9dd}
.entete{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.entete p{margin-top:16px}

/* Héros */
.hero{background:var(--ardoise);color:var(--blanc);padding-block:clamp(56px,8vw,104px) clamp(56px,7vw,88px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-8vw;top:-20%;width:46vw;max-width:620px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line-dark);pointer-events:none}
.hero::before{content:"";position:absolute;right:4vw;bottom:-30%;width:36vw;max-width:480px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line-dark);pointer-events:none}
.hero .wrap{position:relative}
.hero h1{max-width:17ch}
.hero .lead{color:#c3c8cd;margin-top:22px}
.hero__note{margin-top:14px;font-size:15px;color:#9aa1a8}

/* Recherche */
.recherche{margin-top:36px;background:var(--blanc);color:var(--ink);border-radius:var(--r-lg);padding:10px;display:grid;grid-template-columns:1.3fr 1fr auto;gap:8px;max-width:860px;box-shadow:var(--shadow)}
.champ{display:flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:var(--r);background:var(--beton);min-width:0}
.champ label{font-size:12.5px;font-weight:600;color:var(--acier)}
.champ input,.champ select{border:0;background:transparent;font-size:16px;padding:4px 0;outline:none;width:100%;min-width:0}
.champ:focus-within{box-shadow:inset 0 0 0 2px var(--orange)}
.recherche .btn{align-self:stretch;min-height:58px}
@media (max-width:760px){
  .recherche{grid-template-columns:1fr}
  .recherche .btn{min-height:52px}
}
.metiers-ligne{margin-top:28px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:none}
.metiers-ligne::-webkit-scrollbar{display:none}
.metiers-ligne a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;scroll-snap-align:start;border:1px solid var(--line-dark);border-radius:999px;padding:8px 16px 8px 13px;font-size:15px;color:#d5d9dd;transition:border-color .18s var(--ease),color .18s var(--ease)}
.metiers-ligne a:hover{border-color:var(--blanc);color:var(--blanc)}

/* Sélection : étapes réelles, numérotées parce que c'est une séquence */
.etapes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,96px);align-items:start}
.etapes__intro{position:sticky;top:calc(var(--nav-h) + 24px)}
.etapes__intro p{margin-top:18px}
.etape{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:28px 0;border-top:1px solid var(--line)}
.etape:last-child{border-bottom:1px solid var(--line)}
.etape__num{font-family:var(--display);font-weight:500;font-size:2rem;line-height:1;color:var(--orange-ink);font-variant-numeric:tabular-nums;padding-top:4px}
.etape h3{margin-bottom:8px}
.etape p + p{margin-top:10px}
.etape .fait{margin-top:12px;font-size:15px;color:var(--acier);padding-left:14px;border-left:1px solid var(--line)}
@media (max-width:860px){
  .etapes{grid-template-columns:1fr}
  .etapes__intro{position:static}
  .etape{grid-template-columns:48px 1fr;gap:14px}
}

/* Métiers : liste typographique */
.metiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,72px);margin-top:8px}
.metiers a{display:flex;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.3vw,1.8rem);letter-spacing:-.02em;transition:color .18s var(--ease)}
.metiers a:hover{color:var(--orange-ink)}
.metiers a span{flex:1 1 auto}
.metiers a .ico{flex:0 0 auto;color:var(--orange-ink)}
.metiers a small{flex:0 1 auto;font-family:var(--body);font-size:14.5px;color:var(--acier);font-weight:400;letter-spacing:0;text-align:right;max-width:46%}
@media (max-width:700px){
  .metiers{grid-template-columns:1fr}
  .metiers a small{display:none}
}

/* Deux publics : panneaux de tailles différentes */
.publics{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.panneau{border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:18px}
.panneau--clair{background:var(--blanc);border:1px solid var(--line)}
.panneau--ardoise{background:var(--ardoise);color:var(--blanc)}
.panneau--ardoise p{color:#d5d9dd}
.panneau h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
.panneau .btn{align-self:flex-start;margin-top:auto}
.faits{display:grid;gap:12px;margin-top:4px}
.faits li{list-style:none;padding:12px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.faits li b{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:-.01em;white-space:nowrap}
.panneau--ardoise .faits li{border-color:var(--line-dark)}
@media (max-width:860px){.publics{grid-template-columns:1fr}}
@media (max-width:600px){.faits li{grid-template-columns:1fr;gap:4px}}

/* Après la mise en relation */
.suivi{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.suivi p + p{margin-top:16px}
.engagements{list-style:none;display:grid}
.engagements li{padding:18px 0;border-top:1px solid var(--line-dark);display:grid;gap:4px}
.engagements li:last-child{border-bottom:1px solid var(--line-dark)}
.engagements b{font-family:var(--display);font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.engagements span{color:#b9bec4;font-size:15.5px}
@media (max-width:860px){.suivi{grid-template-columns:1fr}}

/* Questions */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.015em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .reponse{padding:0 0 22px;color:var(--acier)}
.faq .reponse p + p{margin-top:10px}

/* Formulaire */
.formulaire{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:start}
.formulaire__intro p{margin-top:16px}
.formulaire__intro .contact{margin-top:28px;display:grid;gap:6px;font-size:16px}
.formulaire__intro .contact a{text-decoration:none;font-weight:500}
.formulaire__intro .contact a:hover{color:var(--orange-ink)}
form.demande{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
form.demande .plein{grid-column:1/-1}
.f{display:grid;gap:6px}
.f label{font-size:14.5px;font-weight:600}
.f input,.f select,.f textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--blanc);font-size:16px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.f textarea{min-height:120px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(252,101,6,.18)}
.f input[aria-invalid="true"]{border-color:var(--erreur)}
.f .aide{font-size:13.5px;color:var(--acier-2)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--acier)}
.consent input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--orange)}
.etat{min-height:24px;font-size:15px}
.etat.ok{color:var(--ok)}
.etat.erreur{color:var(--erreur)}
.pot{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
@media (max-width:860px){
  .formulaire{grid-template-columns:1fr}
  form.demande{grid-template-columns:1fr}
}

/* Résultat de recherche (état réel : la sélection ouvre ville par ville) */
.resultat{max-width:760px}
.resultat .cadre{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;margin-top:28px;background:var(--beton)}
@media (min-width:760px){.resultat .cadre{padding:40px}}
.resultat .cadre h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.resultat .cadre p{margin-top:12px}

/* Page texte (charte, mentions) */
.texte{max-width:72ch}
.texte h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:48px 0 14px}
.texte h3{margin:28px 0 8px}
.texte p + p{margin-top:12px}
.texte ul,.texte ol{padding-left:22px;margin:10px 0}
.texte li + li{margin-top:6px}
.texte dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:12px 0}
.texte dt{font-weight:600}
@media (max-width:600px){.texte dl{grid-template-columns:1fr}.texte dd{margin-bottom:8px}}

/* Pied de page : il conclut */
.pied{background:var(--ardoise);color:#c3c8cd;padding:clamp(48px,7vw,80px) 0 32px;font-size:15px}
.pied__haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.pied img{height:26px;width:auto;margin-bottom:16px}
.pied p{max-width:40ch}
.pied h3{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:0;color:var(--blanc);margin-bottom:12px}
.pied ul{list-style:none;display:grid;gap:8px}
.pied a:hover{color:var(--blanc)}
.pied__bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;font-size:14px;color:#8d949b}
@media (max-width:760px){.pied__haut{grid-template-columns:1fr}}

/* Le seul moment animé : l'arrivée du héros au chargement */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lead,.hero .recherche,.hero .metiers-ligne,.hero__note{animation:arrivee .7s var(--ease) both}
  .hero .lead{animation-delay:.08s}
  .hero .recherche{animation-delay:.16s}
  .hero__note{animation-delay:.2s}
  .hero .metiers-ligne{animation-delay:.24s}
  @keyframes arrivee{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ============================================================
   Plateforme : messages, fil d'Ariane, cartes, fiches, espaces connectés
   ============================================================ */
.flash{padding:14px 0;font-size:15.5px;border-bottom:1px solid var(--line)}
.flash--ok{background:#e8f5ec;color:#145a2e}
.flash--erreur{background:#fdecea;color:#8a1c12}
.flash--info{background:var(--beton);color:var(--ink)}
.flash--app{border-radius:var(--r);padding:12px 16px;margin-bottom:18px;border:0}
.flash--app a{text-decoration:underline}
.fil{font-size:14.5px;color:var(--acier);margin-bottom:8px}
.fil a{color:var(--acier)}
.fil a:hover{color:var(--orange-ink)}
.petit{font-size:14px}
.lien-bouton{background:none;border:0;padding:0;color:var(--orange-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit}
.lien-discret{margin-left:14px;font-size:15px;color:var(--acier);text-decoration:underline;text-underline-offset:3px}
.compte{margin-bottom:18px}
.entete--ligne{max-width:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.entete--ligne p{margin-top:0}

/* Bandeau de recherche (liste) */
.bandeau-recherche{background:var(--ardoise);color:var(--blanc);padding:clamp(32px,5vw,56px) var(--pad)}
.bandeau-recherche .fil,.bandeau-recherche .fil a{color:#9aa1a8}
.bandeau-recherche h1{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:18px}
.bandeau-recherche .h1__ou{color:#c3c8cd;font-weight:400}
.ico{display:inline-block;vertical-align:-.15em;flex:0 0 auto}
.ico--titre{color:var(--orange);width:.95em;height:.95em;margin-right:.3em;vertical-align:-.08em}
.bandeau-recherche .recherche{margin-top:0}
.cadre{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 24px;background:var(--beton);max-width:760px}
@media (min-width:760px){.cadre{padding:40px}}
.cadre h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.cadre p{margin-top:12px}
.metiers--compact a{font-size:clamp(1.1rem,1.6vw,1.3rem);padding:14px 0}

/* Cartes d'artisans */
.grille-artisans{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.carte-artisan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--blanc);transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.carte-artisan:hover{border-color:var(--ink);box-shadow:var(--shadow)}
.carte-artisan__visuel{aspect-ratio:4/3;background:var(--ardoise-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.carte-artisan__visuel img{width:100%;height:100%;object-fit:cover}
.carte-artisan__initiale{font-family:var(--display);font-weight:500;font-size:4rem;color:#6b727a}
.carte-artisan__corps{padding:18px 20px 20px;display:grid;gap:6px}
.carte-artisan__metier{font-size:14px;color:var(--acier);display:flex;align-items:center;gap:6px}
.carte-artisan__metier .ico{color:var(--orange-ink);flex:0 0 auto}
.carte-artisan h3{font-size:1.3rem}
.carte-artisan__gerant{font-size:15px;color:var(--acier)}
.carte-artisan__bas{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14.5px;margin-top:6px}
.carte-artisan__distance{margin-left:auto;color:var(--acier)}
.carte-artisan__badge{font-size:13.5px;color:var(--orange-ink);font-weight:600}
.etoiles{display:inline-flex;gap:2px;vertical-align:middle}
.etoile{fill:var(--line)}
.etoile.pleine{fill:var(--orange)}
.etoile.demie{fill:url(#demie),var(--orange);opacity:.6}

/* Fiche artisan */
.fiche-tete{background:var(--beton);padding:clamp(28px,4vw,48px) var(--pad)}
.fiche-tete__grille{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.fiche-tete__visuel{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--ardoise-2);display:flex;align-items:center;justify-content:center}
.fiche-tete__visuel img{width:100%;height:100%;object-fit:cover}
.fiche-tete__metier{color:var(--acier);font-size:15px;margin-bottom:6px}
.fiche-tete__metier a{color:var(--acier);display:inline-flex;align-items:center;gap:6px;vertical-align:bottom}
.fiche-tete__metier a:hover{color:var(--orange-ink)}
.fiche-tete__metier .ico{color:var(--orange-ink)}
.fiche-tete h1{font-size:clamp(1.9rem,4vw,3rem)}
.fiche-tete__ligne{margin-top:12px;font-size:16.5px}
.badge-selection{display:inline-block;background:var(--ardoise);color:var(--blanc);font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;vertical-align:middle}
.fiche-tete__note{margin-top:10px;font-size:16px}
.fiche-tete__note a{display:inline-flex;align-items:center;gap:8px}
.fiche-tete__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.fiche-tete__rappel{margin-top:14px;font-size:14.5px;max-width:60ch}
.numero-affiche{font-family:var(--display);font-size:1.4rem;font-weight:500;letter-spacing:-.01em}
@media (max-width:760px){.fiche-tete__grille{grid-template-columns:1fr}.fiche-tete__visuel{max-width:360px}}
.fiche-corps{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.fiche-corps h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:40px 0 14px}
.fiche-corps h2:first-child{margin-top:0}
.fiche-corps h3{margin:24px 0 8px}
.savoir-faire{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0 24px}
.savoir-faire li{padding:10px 0;border-bottom:1px solid var(--line)}
.encadre-tarif{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;background:var(--beton)}
.encadre-tarif p{max-width:none}
.encadre-tarif p + p{margin-top:8px}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.galerie figure{margin:0}
.galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.galerie figcaption{font-size:14px;color:var(--acier);margin-top:6px}
.galerie--gestion form{margin-top:4px}
.avis-resume{max-width:none}
.avis-resume .etoiles{vertical-align:-2px;margin-right:4px}
.liste-avis{display:grid;gap:0}
.avis{padding:22px 0;border-top:1px solid var(--line)}
.avis header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px}
.avis h3{font-size:1.15rem;margin:10px 0 6px}
.avis .texte p{max-width:70ch}
.badge-verifie{display:inline-block;font-size:12.5px;font-weight:600;color:#145a2e;background:#e8f5ec;padding:2px 9px;border-radius:999px}
.badge-verifie--2{color:#1f3f8a;background:#e8eefc}
.avis__reponse{margin-top:12px;padding:14px 16px;background:var(--beton);border-radius:var(--r);font-size:15.5px}
.avis__reponse b{display:block;margin-bottom:4px}
.fiche-corps__cote{display:grid;gap:18px;position:sticky;top:calc(var(--nav-h) + 20px)}
.bloc-cote{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px}
.bloc-cote h3{font-size:1.05rem;margin-bottom:12px}
.verifs{list-style:none;display:grid}
.verifs li{display:grid;gap:2px;padding:9px 0;border-top:1px solid var(--line);font-size:15px}
.verifs li b{font-weight:600}
.verifs li span{color:var(--acier)}
@media (max-width:860px){.fiche-corps{grid-template-columns:1fr}.fiche-corps__cote{position:static}}
.notes{display:flex;flex-wrap:wrap;gap:8px}
.note-choix{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer}
.note-choix:has(input:checked){border-color:var(--ink);background:var(--beton)}
.note-choix input{accent-color:var(--orange)}
.f__titre{font-size:14.5px;font-weight:600}

/* Connexion */
.connexion{max-width:460px}
.connexion h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.connexion .lead{margin:14px 0 26px}
.demande--simple{grid-template-columns:1fr}

/* Espaces connectés */
body.app{background:var(--beton)}
.app__coque{display:grid;grid-template-columns:250px 1fr;min-height:100svh}
.app__cote{background:var(--ardoise);color:#c3c8cd;padding:26px 22px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100svh;overflow:auto}
.app__cote .brand img{height:26px}
.app__qui{color:var(--blanc);font-weight:600;line-height:1.3}
.app__qui span{font-weight:400;color:#9aa1a8;font-size:14px}
.app__menu{display:grid;gap:2px}
.app__menu a{padding:9px 12px;border-radius:var(--r);font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.app__menu a:hover{background:var(--ardoise-2);color:var(--blanc)}
.app__menu a[aria-current="page"]{background:var(--blanc);color:var(--ink);font-weight:600}
.pastille{background:var(--orange);color:var(--on-orange);font-size:12px;font-weight:700;min-width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.app__aide{margin-top:auto;font-size:14px}
.app__aide a{color:var(--blanc);text-decoration:underline}
.app__principal{min-width:0;padding:clamp(20px,3vw,40px)}
.app__contenu{background:var(--blanc);border-radius:var(--r-lg);padding:clamp(22px,3vw,40px);border:1px solid var(--line)}
.app__contenu h1{font-size:clamp(1.7rem,3vw,2.3rem)}
.app__contenu h2{font-size:1.35rem;margin:36px 0 12px}
.app__contenu .lead{margin-top:10px;font-size:1.05rem}
@media (max-width:900px){
  .app__coque{grid-template-columns:1fr}
  .app__cote{position:static;height:auto;padding:18px var(--pad)}
  .app__menu{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .app__aide{margin-top:0}
}
.entete-app{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:22px 0}
.tuile{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;display:grid;gap:4px;background:var(--blanc)}
.tuile b{font-family:var(--display);font-size:2rem;font-weight:500;line-height:1;letter-spacing:-.02em}
.tuile span{font-size:14px;color:var(--acier)}
a.tuile:hover{border-color:var(--ink)}
.tuile--alerte{border-color:var(--orange);background:#fff7f0}
.tableau{width:100%;border-collapse:collapse;font-size:15px;margin:12px 0}
.tableau th{text-align:left;font-weight:600;font-size:13.5px;color:var(--acier);padding:8px 10px;border-bottom:1px solid var(--line)}
.tableau td{padding:10px;border-bottom:1px solid var(--beton-2);vertical-align:top}
.tableau--etroit{max-width:360px}
.tableau--petit{font-size:13.5px}
.tableau input[type=text],.tableau input[type=number],.tableau select{background:var(--blanc);font:inherit;font-size:15px;min-height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);width:100%}
.tableau input.court{width:70px}
.etat{display:inline-block;font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--beton);color:var(--ink);white-space:nowrap}
.etat--nouveau,.etat--nouvelle,.etat--en_attente,.etat--candidature{background:#fff1e3;color:#9a3c00}
.etat--contacte,.etat--devis,.etat--chantier,.etat--rappelee,.etat--en_controle{background:#e8eefc;color:#1f3f8a}
.etat--termine,.etat--publie,.etat--orientee{background:#e8f5ec;color:#145a2e}
.etat--sans_suite,.etat--retire,.etat--refuse,.etat--refusee{background:var(--beton-2);color:var(--acier)}
.etat--suspendu,.etat--litige{background:#fdecea;color:#8a1c12}
.onglets{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 18px;border-bottom:1px solid var(--line)}
.onglets a{padding:8px 12px;font-size:15px;color:var(--acier);border-bottom:2px solid transparent;margin-bottom:-1px}
.onglets a:hover{color:var(--ink)}
.onglets a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--orange)}
.barre-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.barre-filtres .onglets{flex:1 1 auto;margin-bottom:0;border:0}
.barre-filtres input[type=search]{min-height:40px;padding:6px 12px;border:1px solid var(--line);border-radius:var(--r)}
.fiche-mer{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px;background:var(--blanc)}
.fiche-mer--litige{border-color:#e4a09a;background:#fff8f7}
.fiche-mer header{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;margin-bottom:8px}
.fiche-mer .texte{font-size:15.5px}
.fiche-mer .texte p{max-width:80ch}
.ligne-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--beton-2)}
.ligne-form label{display:grid;gap:4px;font-size:13.5px;font-weight:600}
.ligne-form .grandit{flex:1 1 260px}
.ligne-form input[type=text],.ligne-form input[type=email],.ligne-form select,.ligne-form textarea{min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);font-weight:400;font-size:15px;width:100%}
.ligne-form .consent{flex-direction:row;align-items:center;gap:8px;font-weight:400}
.demande--app{margin-top:10px}
.demande--app h2{margin:24px 0 0}
.apercu{margin-top:8px;border-radius:var(--r);max-width:200px}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 16px}
.case{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:400}
.case .ico{color:var(--orange-ink)}
.icone-choix{white-space:nowrap}.icone-choix .ico{color:var(--orange-ink);margin-right:6px}.icone-choix select{width:auto;display:inline-block;vertical-align:middle}
.icones-galerie{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 20px;color:var(--acier);font-size:13px}
.icones-galerie span{display:inline-flex;align-items:center;gap:6px}.icones-galerie .ico{color:var(--orange-ink)}
.case input[type=radio]{margin-left:auto;accent-color:var(--orange)}
.controles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:18px 0 8px}
.controles div{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:grid;gap:4px;font-size:14px}
.controles b{font-size:14.5px}
.liste-simple{padding-left:20px;display:grid;gap:6px}
.avis--pro{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px}
.engagements--clair li{border-color:var(--line)}
.engagements--clair span{color:var(--acier)}
.etat-form{color:var(--erreur);font-size:15px}
.demande .f{align-content:start}
.demande .f input[type=file]{padding:10px 12px}