/* HEADER -- copie exacte du bloc <style> inline present sur booking.php.
   La-bas il est integre directement dans la page ; ici on le centralise
   dans ce fichier CSS externe plutot que de le dupliquer en inline. */
.header { background: #FFF; padding: 10px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); position: sticky; top:0; z-index:1000; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.header img { height: 45px; }
.header-center { display: flex; gap: 10px; }

/* GARANTIES -- integrees dans la meme carte blanche que booking.php,
   plus de bandeau colore separe. Pastilles discretes sous le sous-titre. */
.secteur-garanties {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    margin: 4px 0 20px;
}
.secteur-garantie {
    background: #fff3e8;
    color: var(--orange-dark);
    font-size: 11.5px; font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
}

.secteur-empty {
    text-align: center;
    background: #fafafa;
    border: 1.5px dashed #ddd;
    border-radius: 14px;
    padding: 32px 24px;
}
.secteur-empty p { color: var(--gray-medium); font-size: 14px; margin: 0 0 4px; }

/* AVIS CLIENT ECRIT -- affiche en clair sur la fiche, pas seulement une
   note chiffree (le langage de confiance des annuaires concurrents). */
.artisan-row-zone { font-size: 11.5px; color: var(--gray-medium); margin-top: 6px; }
.artisan-row-testimonial {
    font-size: 12.5px; font-style: italic; color: var(--gray-dark);
    background: #fafafa; border-left: 3px solid var(--orange);
    padding: 8px 12px; border-radius: 0 8px 8px 0; margin-top: 10px;
}
.artisan-row-testimonial-stars { color: #e8a800; font-style: normal; margin-right: 4px; }

/* SECTION "POURQUOI SOBASO" */
.secteur-pourquoi { margin-top: 40px; }
.secteur-pourquoi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-top: 16px;
}
.secteur-pourquoi-item {
    background: #fff; border: 1px solid #eee; border-radius: 14px;
    padding: 18px; text-align: center;
}
.secteur-pourquoi-icon { display: flex; justify-content: center; margin-bottom: 10px; }
/* Icones en pastille ronde -- meme langage visuel que les .icon-circle
   du parcours de reservation (booking.php) : rond orange, trait blanc. */
.icone-cercle-sobaso {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--orange, #FF6B00); color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12); flex-shrink: 0;
}
.icone-cercle-sobaso svg { stroke: #fff; }

.secteur-pourquoi-item strong { display: block; font-size: 13.5px; color: var(--gray-dark); margin-bottom: 4px; }
.secteur-pourquoi-item p { font-size: 12px; color: var(--gray-medium); margin: 0; line-height: 1.4; }

/* COMMUNES VOISINES -- maillage interne */
.secteur-voisines { margin-top: 36px; }
.secteur-voisines-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.secteur-voisines-list .artisan-pill {
    font-size: 12.5px; padding: 7px 14px; text-decoration: none;
    transition: background .15s ease;
}
.secteur-voisines-list .artisan-pill:hover { background: #dbe9fc; }

@media (max-width: 640px) {
    .secteur-garanties { flex-direction: column; align-items: center; }
}


/* ====================================================================
   HABILLAGE PROFESSIONNEL DES PAGES SECTEUR
   Inspiration : annuaires et plateformes de mise en relation actuels
   (MesDepanneurs, Travaux.com, Doctolib) -- une encre sombre pour les
   titres au lieu du bleu vif, UN SEUL accent de couleur (l'orange de la
   marque, reserve aux boutons d'action), des gris froids hierarchises
   pour tout le reste, et la couleur verte reservee aux signaux de
   confiance. Ces regles ne s'appliquent qu'aux pages secteur (booking
   ne charge pas ce fichier).
   ==================================================================== */

body { background: #f6f8fb; }

/* Titre : encre sombre, plus grand -- le bleu vif criait "lien" plus
   que "titre". La commune reste dans la meme couleur : sobriete. */
.container h1 {
    color: #0f172a;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.3px;
}
.container .subtitle { color: #64748b; font-size: 14px; }

/* Garanties : plus des pastilles orange criardes mais des puces
   neutres bordees, coche verte -- le langage "verifie" des grands
   annuaires. */
.secteur-garantie {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #334155;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.secteur-garantie svg { color: #16a34a; }

/* Cartes artisan : bordure fine et froide, ombre douce, survol subtil
   -- fini le contour epais gris. */
.artisan-row {
    border: 1px solid #e5e9f0;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.artisan-row:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(15,23,42,.08);
    transform: translateY(-1px);
}

/* Avatar : degrade d'encre profonde plutot que bleu electrique. */
.artisan-avatar, .artisan-row-avatar {
    background: linear-gradient(135deg, #1e293b, #475569) !important;
}

/* Nom de l'artisan et note */
.artisan-row-name { color: #0f172a; font-weight: 800; }
.artisan-row-note { color: #b45309; font-weight: 700; }
.artisan-row-note svg { color: #f59e0b; }
.artisan-row-note-nb { color: #94a3b8; font-weight: 500; }

/* Pastilles : palette assourdie et coherente (indigo doux pour les
   metiers, gris ardoise pour les marques, ambre pale pour l'identite,
   vert d'eau pour la zone d'intervention). */
.artisan-pill-metier  { background: #eef2ff; color: #4338ca; }
.artisan-pill-marque  { background: #f1f5f9; color: #475569; }
.artisan-pill-info    { background: #fff7ed; color: #c2570c; }
.artisan-pill-commune { background: #ecfdf5; color: #047857; }
.artisan-zone-label   { color: #94a3b8; }
.artisan-row-icon     { background: #f1f5f9; color: #64748b; }

/* Badges de confiance */
.artisan-badge-une      { background: #fff7ed !important; color: #c2570c !important; border: 1px solid #fed7aa !important; }
.artisan-badge-remonte  { background: #fef2f2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
.artisan-badge-assure   { background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.artisan-badge-non-assure { background: #f8fafc !important; color: #94a3b8 !important; border: 1px solid #e2e8f0 !important; }

/* Temoignages clients : fond froid tres pale, filet neutre, etoiles
   ambre -- l'orange de marque n'est plus dilue ici. */
.artisan-row-testimonial {
    background: #f8fafc;
    border-left: 3px solid #e2e8f0;
    color: #475569;
}
.artisan-row-testimonial-stars { color: #f59e0b; }

/* Bouton d'action : l'UNIQUE endroit ou l'orange s'exprime en plein.
   Plus haut, plus net, avec un survol assume. */
.container > button, .secteur-empty button {
    background: var(--orange, #FF6B00);
    border: none;
    border-radius: 10px;
    padding: 15px 22px;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: .2px;
    box-shadow: 0 6px 18px rgba(255,107,0,.28);
    transition: all .15s ease;
}
.container > button:hover, .secteur-empty button:hover {
    background: #e65f00;
    box-shadow: 0 8px 22px rgba(255,107,0,.35);
    transform: translateY(-1px);
}

/* Sections basses : intertitres en encre sombre, cartes "pourquoi"
   alignees sur les cartes artisan. */
.main-label { color: #0f172a; font-weight: 800; }
.secteur-pourquoi-item {
    border: 1px solid #e5e9f0;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.secteur-pourquoi-item strong { color: #0f172a; }
.secteur-pourquoi-item p { color: #64748b; }

/* Communes voisines : liens neutres qui ne se prennent pas pour des
   boutons, survol discret. */
.secteur-voisines-list .artisan-pill {
    background: #fff; border: 1px solid #e2e8f0; color: #334155;
}
.secteur-voisines-list .artisan-pill:hover {
    background: #f1f5f9; border-color: #cbd5e1;
}


/* ==== Structure de fiche "annuaire" : moins de bulles, des lignes ==== */

/* Lignes etiquetees (Marques, Intervient aussi a) : etiquette grise en
   petites capitales, valeur en texte normal -- se lit comme une fiche. */
.artisan-row-detail {
    font-size: 12.5px; color: #475569; margin-top: 6px; line-height: 1.55;
}
.artisan-detail-label {
    display: inline-block;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: #94a3b8;
    margin-right: 8px;
}

/* Ville / anciennete : ligne discrete sous le nom. */
.artisan-row-meta { font-size: 12px; color: #64748b; margin-top: 3px; }

/* Compteur d'avis supplementaires */
.artisan-row-avis-plus {
    font-size: 11.5px; color: #94a3b8; margin-top: 6px; font-style: italic;
    text-decoration: none; text-align: left; display: block; cursor: pointer;
    transition: color .15s;
}
.artisan-row-avis-plus:hover { color: #FF6B00; }

/* Garanties d'en-tete : plus de bulles bordees -- trois mentions en
   texte simple, coche verte, separees par l'espace. */
.secteur-garantie {
    background: none;
    border: none;
    box-shadow: none;
    padding: 2px 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}

/* Les pastilles restantes (metier uniquement) respirent. */
.artisan-row-line { margin-top: 8px; }