/* ============================================================================
   UpMyChain — pages de resultats de recherche
   07/09/2026

   Meme methode que profil.css : tout est porte par `.umc-rs`, rien ne peut
   fuir vers le reste du site, et les valeurs viennent de la page d'accueil.
   Voir docs/design-tokens.md.

   ⚠️ Cette feuille sort AVANT refonte.css (mesure du 07/09) : ce qui la fait
      gagner, c'est la specificite de ses selecteurs, pas l'ordre de chargement.
      Garder deux classes (`.umc-rs .umc-rs-card`), ne jamais styler une classe
      seule en comptant sur l'ordre.
   ========================================================================== */

.umc-rs{
    --r-accent:var(--umc-accent,#ff6300);
    --r-accent-hover:var(--umc-accent-hover,#ff7a24);
    --r-accent-soft:var(--umc-accent-soft,#fff3ea);
    --r-on-accent:#14100c;
    /* L'orange de marque ne passe pas comme encre sur fond clair
       (2,98:1). Ce jeton-ci est fait pour le texte : 5,9:1. */
    --r-accent-txt:#9a3b00;

    --r-ink:var(--umc-ink,#101114);
    --r-ink-2:var(--umc-ink-2,#3d414a);
    --r-ink-3:var(--umc-ink-3,#6b7280);

    --r-line:var(--umc-line,#e7e8ec);
    --r-line-strong:var(--umc-line-strong,#d7d9df);

    --r-bg:var(--umc-bg,#ffffff);
    --r-bg-2:var(--umc-bg-2,#fafafb);
    --r-surface:var(--umc-surface,#ffffff);

    --r-star:#f5b301;
    --r-ok:#0f7b52;      --r-ok-soft:#e8f5ef;
    --r-info:#1b5fa8;    --r-info-soft:#e9f1fa;
    --r-neutre:#6b7280;  --r-neutre-soft:#f1f2f4;

    --r-shadow:var(--umc-shadow,0 1px 2px rgba(16,17,20,.04),0 8px 24px rgba(16,17,20,.06));
    --r-radius:14px;
    --r-max:1180px;

    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--r-ink);
    font-size:16px;
    line-height:1.6;
    clear:both;
    display:block;
}

html[data-theme="dark"] .umc-rs{
    --r-accent-txt:#ff9a55;
    --r-ok:#4bbd8c;      --r-ok-soft:#12271f;
    --r-info:#6aa9e9;    --r-info-soft:#12202e;
    --r-neutre:#868c98;  --r-neutre-soft:#1c1f25;
    --r-line-strong:#3a3f49;
}

/* ---------- Neutralisation du gabarit Worketic, comme pour les profils ---- */
.umc-rs *,.umc-rs *::before,.umc-rs *::after{box-sizing:border-box;}
.umc-rs,.umc-rs *{min-width:0;}
.umc-rs section,.umc-rs main,.umc-rs aside,.umc-rs header,.umc-rs article,
.umc-rs .umc-rs-wrap,.umc-rs .umc-rs-cols{float:none;max-width:none;min-height:0;}
.umc-rs li{list-style:none;}
.umc-rs li::marker{content:"";}
.umc-rs ul{margin:0;padding:0;list-style:none;}
.umc-rs p{margin:0;}
.umc-rs h1,.umc-rs h2,.umc-rs h3,.umc-rs h4{
    margin:0;font-weight:640;letter-spacing:-.022em;line-height:1.2;color:var(--r-ink);
}
.umc-rs a{color:inherit;text-decoration:none;}
.umc-rs img{max-width:100%;height:auto;}
.umc-rs p,.umc-rs li,.umc-rs span,.umc-rs h1,.umc-rs h2,.umc-rs h3,.umc-rs strong,
.umc-rs a,.umc-rs em,.umc-rs b{color:inherit;overflow-wrap:anywhere;}
.umc-rs .umc-rs-desc,.umc-rs .umc-rs-sub{text-align:left;hyphens:manual;}

/* Le menu du theme est en position:absolute et se pose sur le haut du contenu. */
@media (min-width:992px){ .umc-rs{padding-top:48px;} }

.umc-sr-only{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.umc-rs a:focus-visible,.umc-rs button:focus-visible,.umc-rs input:focus-visible,
.umc-rs select:focus-visible,.umc-rs summary:focus-visible{
    outline:2px solid var(--r-accent);outline-offset:2px;border-radius:6px;
}

/* ---------------------------------------------------------------- Structure */

.umc-rs .umc-rs-wrap{max-width:var(--r-max);margin:0 auto;padding:0 24px;width:100%;}
.umc-rs .umc-rs-cols{
    display:grid;grid-template-columns:284px minmax(0,1fr);gap:28px;
    align-items:start;padding:24px 0 64px;
}
.umc-rs .umc-rs-side{position:sticky;top:24px;}

/* ------------------------------------------------------------------ Bandeau */

.umc-rs .umc-rs-hero{
    background:var(--r-bg-2);border-bottom:1px solid var(--r-line);
    background-image:radial-gradient(760px 380px at 88% -30%,var(--r-accent-soft) 0%,transparent 62%);
    padding:30px 0 26px;
}
.umc-rs .umc-rs-hero h1{font-size:clamp(23px,2.6vw,31px);margin-bottom:8px;}
.umc-rs .umc-rs-hero .umc-rs-sub{font-size:16px;color:var(--r-ink-2);max-width:64ch;}

/* Barre de recherche */
.umc-rs .umc-rs-form{
    display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) auto;gap:10px;
    margin-top:20px;max-width:760px;
}
.umc-rs .umc-rs-form input[type=text]{
    font:inherit;font-size:15.5px;color:var(--r-ink);
    padding:14px 16px;border:1px solid var(--r-line);border-radius:12px;
    background:var(--r-surface);width:100%;
    transition:border-color .15s,box-shadow .15s;
}
.umc-rs .umc-rs-form input[type=text]::placeholder{color:var(--r-ink-3);}
.umc-rs .umc-rs-form input[type=text]:focus{
    outline:none;border-color:var(--r-accent);box-shadow:0 0 0 3px rgba(255,99,0,.14);
}
.umc-rs .umc-rs-form button{
    font:inherit;font-size:15.5px;font-weight:580;color:var(--r-on-accent);
    background:var(--r-accent);border:0;border-radius:12px;padding:14px 26px;
    cursor:pointer;white-space:nowrap;transition:background .15s;
}
.umc-rs .umc-rs-form button:hover{background:var(--r-accent-hover);}

/* Onglets de type */
.umc-rs .umc-rs-types{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.umc-rs .umc-rs-types a{
    display:inline-flex;align-items:center;gap:7px;
    font-size:14.5px;padding:8px 16px;min-height:40px;border-radius:100px;
    border:1px solid var(--r-line);background:var(--r-surface);color:var(--r-ink-2);
    transition:border-color .15s,color .15s,background .15s;
}
.umc-rs .umc-rs-types a:hover{border-color:var(--r-accent);color:var(--r-accent-txt);}
/* L'onglet actif a un fond orange : son encre doit etre noire (7:1). Une regle
   globale du theme repassait le texte en clair — 2,17:1, illisible. Le
   `!important` est ici la seule facon de tenir face a une regle plus
   specifique venue d'une autre feuille. */
.umc-rs .umc-rs-types a[aria-current="page"]{
    background:var(--r-accent);border-color:var(--r-accent);font-weight:580;
    color:var(--r-on-accent)!important;
    -webkit-text-fill-color:var(--r-on-accent);
}

/* -------------------------------------------------------------- Barre d'outils */

.umc-rs .umc-rs-tools{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    flex-wrap:wrap;margin-bottom:16px;
}
.umc-rs .umc-rs-count{font-size:15px;color:var(--r-ink-2);}
.umc-rs .umc-rs-count b{color:var(--r-ink);font-weight:640;}
.umc-rs .umc-rs-count em{font-style:normal;color:var(--r-accent-txt);font-weight:580;}

/* ------------------------------------------------------------------- Cartes */

.umc-rs .umc-rs-card{
    display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;
    background:var(--r-surface);border:1px solid var(--r-line);
    border-radius:var(--r-radius);padding:20px;margin-bottom:14px;
    transition:border-color .18s,box-shadow .18s;
}
.umc-rs .umc-rs-card:hover{border-color:var(--r-line-strong);box-shadow:var(--r-shadow);}
.umc-rs .umc-rs-card.est-mis-en-avant{border-color:var(--r-accent);}

.umc-rs .umc-rs-ava{
    width:96px;height:96px;border-radius:14px;overflow:hidden;
    background:var(--r-bg-2);flex:0 0 96px;
}
.umc-rs .umc-rs-ava img{width:100%;height:100%;object-fit:cover;display:block;}
.umc-rs .umc-rs-ava .umc-rs-ini{
    width:100%;height:100%;display:flex;align-items:center;justify-content:center;
    font-size:32px;font-weight:660;color:#fff;letter-spacing:-.02em;
}

.umc-rs .umc-rs-body{min-width:0;}
.umc-rs .umc-rs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.umc-rs .umc-rs-card h2{font-size:18px;line-height:1.3;margin-bottom:3px;}
.umc-rs .umc-rs-card h2 a:hover{color:var(--r-accent-txt);}
.umc-rs .umc-rs-metier{font-size:15px;color:var(--r-ink-2);margin-bottom:9px;}

.umc-rs .umc-rs-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px;color:var(--r-ink-3);}
.umc-rs .umc-rs-meta li{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;max-width:100%;}
.umc-rs .umc-rs-meta i{font-size:12px;width:13px;text-align:center;}
.umc-rs .umc-rs-tarif{color:var(--r-ink);font-weight:600;}

.umc-rs .umc-rs-desc{
    font-size:14.5px;line-height:1.6;color:var(--r-ink-2);margin-top:10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Note */
.umc-rs .umc-rs-note{display:flex;align-items:center;gap:8px;font-size:14px;flex:0 0 auto;}
.umc-rs .umc-rs-note b{font-size:16px;font-weight:660;}
.umc-rs .umc-rs-note span{color:var(--r-ink-3);font-size:13px;}
.umc-rs .umc-rs-stars{
    position:relative;display:inline-block;width:76px;height:14px;font-size:14px;line-height:1;
}
.umc-rs .umc-rs-stars::before,.umc-rs .umc-rs-stars i::before{
    content:"\2605\2605\2605\2605\2605";letter-spacing:1px;font-style:normal;
}
.umc-rs .umc-rs-stars::before{color:var(--r-line-strong);}
.umc-rs .umc-rs-stars i{
    position:absolute;left:0;top:0;height:100%;display:block;
    overflow:hidden;white-space:nowrap;color:var(--r-star);
}

/* Pastilles */
.umc-rs .umc-rs-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;}
.umc-rs .umc-rs-tags a,.umc-rs .umc-rs-tags span{
    font-size:13px;padding:5px 12px;border-radius:100px;
    border:1px solid var(--r-line);color:var(--r-ink-2);background:var(--r-surface);
}
.umc-rs .umc-rs-tags a:hover{border-color:var(--r-accent);color:var(--r-accent-txt);}

/* Badges de confiance, memes couleurs que sur les profils */
.umc-rs .umc-rs-badge{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:560;padding:4px 11px;border-radius:100px;
    border:1px solid transparent;
}
.umc-rs .umc-rs-badge i{font-size:11px;}
.umc-rs .umc-rs-badge--ok{background:var(--r-ok-soft);color:var(--r-ok);}
.umc-rs .umc-rs-badge--info{background:var(--r-info-soft);color:var(--r-info);}
.umc-rs .umc-rs-badge--neutre{background:var(--r-neutre-soft);color:var(--r-neutre);}
.umc-rs .umc-rs-badge--new{background:var(--r-accent-soft);color:var(--r-accent-txt);}
html[data-theme="dark"] .umc-rs .umc-rs-badge--new{color:#ffb583;}

/* Action a droite de la carte */
.umc-rs .umc-rs-act{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap;}
.umc-rs .umc-rs-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    font-family:inherit;font-size:14.5px;font-weight:580;
    padding:10px 18px;min-height:44px;border-radius:11px;
    border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.umc-rs .umc-rs-btn--solid{background:var(--r-accent);color:var(--r-on-accent);}
.umc-rs .umc-rs-btn--solid:hover{background:var(--r-accent-hover);color:var(--r-on-accent);}
.umc-rs .umc-rs-btn--ghost{background:var(--r-surface);border-color:var(--r-line);color:var(--r-ink-2);}
.umc-rs .umc-rs-btn--ghost:hover{border-color:var(--r-line-strong);color:var(--r-ink);}
.umc-rs .umc-rs-ico{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:11px;
    border:1px solid var(--r-line);background:var(--r-surface);color:var(--r-ink-3);
    cursor:pointer;transition:border-color .15s,color .15s;
}
.umc-rs .umc-rs-ico:hover{border-color:var(--r-accent);color:var(--r-accent-txt);}
.umc-rs .umc-rs-ico.est-actif{border-color:var(--r-accent);color:var(--r-accent-txt);background:var(--r-accent-soft);}

/* ------------------------------------------------------------------ Filtres */

.umc-rs .umc-rs-filtres{
    background:var(--r-surface);border:1px solid var(--r-line);
    border-radius:var(--r-radius);padding:20px;
}
.umc-rs .umc-rs-filtres h2{font-size:16px;margin-bottom:4px;}
.umc-rs .umc-rs-filtres > p{font-size:13px;color:var(--r-ink-3);margin-bottom:16px;}
.umc-rs .umc-rs-groupe{border-top:1px solid var(--r-line);padding:14px 0 0;margin-top:14px;}
.umc-rs .umc-rs-groupe:first-of-type{border-top:0;padding-top:0;margin-top:0;}
.umc-rs .umc-rs-groupe > summary{
    list-style:none;cursor:pointer;font-size:14.5px;font-weight:600;
    display:flex;align-items:center;justify-content:space-between;min-height:34px;
}
.umc-rs .umc-rs-groupe > summary::-webkit-details-marker{display:none;}
.umc-rs .umc-rs-groupe > summary::after{
    content:"\f078";font-family:"Font Awesome 5 Free","FontAwesome";font-weight:900;
    font-size:10px;color:var(--r-ink-3);transition:transform .18s;
}
.umc-rs .umc-rs-groupe[open] > summary::after{transform:rotate(180deg);}
.umc-rs .umc-rs-opts{margin-top:11px;display:flex;flex-direction:column;gap:9px;max-height:230px;overflow-y:auto;}
/* La case fait 16 px, mais c'est le LABEL qui est cliquable : on lui donne une
   hauteur au-dessus du minimum de 24 px demande pour une cible tactile. */
.umc-rs .umc-rs-opts label{
    display:flex;align-items:center;gap:9px;font-size:14px;color:var(--r-ink-2);
    cursor:pointer;min-height:32px;
}
.umc-rs .umc-rs-opts input[type=checkbox]{width:16px;height:16px;accent-color:var(--r-accent-txt);flex:0 0 16px;}
.umc-rs .umc-rs-opts label span{overflow:hidden;text-overflow:ellipsis;}

.umc-rs .umc-rs-appliquer{
    display:flex;width:100%;align-items:center;justify-content:center;
    font-family:inherit;font-size:14.5px;font-weight:580;margin-top:18px;
    padding:12px;min-height:46px;border:0;border-radius:11px;
    background:var(--r-accent);color:var(--r-on-accent);cursor:pointer;
}
.umc-rs .umc-rs-appliquer:hover{background:var(--r-accent-hover);}
.umc-rs .umc-rs-vider{
    /* 22 px de haut auparavant : sous le minimum d'une cible tactile. */
    display:flex;align-items:center;justify-content:center;min-height:36px;
    text-align:center;margin-top:6px;font-size:13.5px;color:var(--r-ink-3);
}
.umc-rs .umc-rs-vider:hover{color:var(--r-accent-txt);text-decoration:underline;}

/* Bouton d'ouverture des filtres sur telephone */
.umc-rs .umc-rs-filtres-btn{display:none;}

/* ------------------------------------------------------------- Etat vide */

.umc-rs .umc-rs-vide{
    text-align:center;padding:52px 24px;
    background:var(--r-bg-2);border:1px dashed var(--r-line-strong);border-radius:var(--r-radius);
}
.umc-rs .umc-rs-vide i{font-size:30px;color:var(--r-ink-3);margin-bottom:14px;display:block;}
.umc-rs .umc-rs-vide h2{font-size:18px;margin-bottom:8px;}
.umc-rs .umc-rs-vide p{font-size:15px;color:var(--r-ink-2);max-width:52ch;margin:0 auto 18px;}
.umc-rs .umc-rs-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.umc-rs .umc-rs-suggestions a{
    font-size:14px;padding:8px 15px;border-radius:100px;min-height:38px;
    display:inline-flex;align-items:center;
    border:1px solid var(--r-line);background:var(--r-surface);color:var(--r-ink-2);
}
.umc-rs .umc-rs-suggestions a:hover{border-color:var(--r-accent);color:var(--r-accent-txt);}

/* ---------------------------------------------------------------- Pagination */

.umc-rs .umc-rs-pages{margin-top:24px;}
.umc-rs .umc-rs-pages ul,.umc-rs .umc-rs-pages .pagination{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0;margin:0;
}
.umc-rs .umc-rs-pages li{list-style:none;}
.umc-rs .umc-rs-pages a,.umc-rs .umc-rs-pages span{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:42px;min-height:42px;padding:0 13px;
    border:1px solid var(--r-line);border-radius:10px;
    background:var(--r-surface);color:var(--r-ink-2);font-size:14.5px;
}
.umc-rs .umc-rs-pages a:hover{border-color:var(--r-accent);color:var(--r-accent-txt);}
.umc-rs .umc-rs-pages .active span,.umc-rs .umc-rs-pages li.active a{
    background:var(--r-accent-soft);border-color:transparent;color:var(--r-accent-txt);font-weight:600;
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width:900px){
    .umc-rs .umc-rs-cols{grid-template-columns:minmax(0,1fr);}
    .umc-rs .umc-rs-side{position:static;}
    /* Les filtres se replient derriere un bouton : sur telephone ils
       repoussaient les resultats de deux ecrans vers le bas. */
    .umc-rs .umc-rs-filtres-btn{
        display:flex;width:100%;align-items:center;justify-content:center;gap:9px;
        font-family:inherit;font-size:15px;font-weight:580;margin-bottom:14px;
        padding:13px;min-height:48px;border-radius:11px;
        border:1px solid var(--r-line);background:var(--r-surface);color:var(--r-ink);cursor:pointer;
    }
    .umc-rs .umc-rs-side[hidden]{display:none;}
    .umc-rs .umc-rs-side{margin-bottom:18px;}
}

@media (max-width:680px){
    .umc-rs .umc-rs-wrap{padding:0 16px;}
    .umc-rs .umc-rs-form{grid-template-columns:1fr;}
    .umc-rs .umc-rs-card{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:16px;}
    .umc-rs .umc-rs-ava{width:64px;height:64px;flex-basis:64px;border-radius:11px;}
    .umc-rs .umc-rs-ava .umc-rs-ini{font-size:22px;}
    .umc-rs .umc-rs-card h2{font-size:16.5px;}
    .umc-rs .umc-rs-head{gap:8px;}
    .umc-rs .umc-rs-note{order:3;}
    .umc-rs .umc-rs-act .umc-rs-btn{flex:1 1 auto;}
}

@media (max-width:400px){
    .umc-rs .umc-rs-wrap{padding:0 12px;}
    .umc-rs .umc-rs-card{padding:14px;}
}

@media (prefers-reduced-motion:reduce){
    .umc-rs *{transition:none!important;animation:none!important;}
}

/* Deux listes de suggestions se suivent dans l'etat vide (les communes proches,
   puis les metiers) : sans intitule, on ne sait pas ce qu'on clique. */
.umc-rs .umc-rs-vide-sous{
    margin:18px 0 8px;font-size:14px;font-weight:600;
    color:var(--r-ink-2,#3d414a);
}

/* Quand un filtre ne porte que sur une partie des fiches, on le DIT sous le
   groupe : sinon le petit nombre de resultats passe pour un defaut. */
.umc-rs .umc-rs-fnote{
    margin:8px 0 0;font-size:12.5px;line-height:1.45;
    color:var(--r-ink-3,#6b7280);
}

/* ------------------------------------------------- Titre de groupe de filtres */
/* ⛔ Sans cette largeur, le `<summary>` se replie a ZERO et son texte part se
      coller au bord droit du panneau. Constate sur les deux pages de recherche.
      Mesure : larg=0 -> larg=242. */
.umc-rs .umc-rs-groupe > summary{width:100%;box-sizing:border-box;}

/* ------------------------------------------------------- Bloc de presentation */
/* Le texte qui porte le referencement de la page. Il vivait dans un bloc
   flottant que `margin:0 auto` ne pouvait pas centrer — donc colle a gauche,
   moitie droite de l'ecran vide. Il vit maintenant dans le flux centre. */
.umc-rs .umc-rs-intro{
    padding:26px 0 4px;
    max-width:76ch;
}
.umc-rs .umc-rs-intro p{
    font-size:15.5px;line-height:1.7;color:var(--r-ink-2);
    margin:0 0 13px;
}
.umc-rs .umc-rs-intro p:first-child{
    font-size:17px;line-height:1.65;color:var(--r-ink);
}
.umc-rs .umc-rs-intro p:last-child{margin-bottom:0;}
.umc-rs .umc-rs-intro strong{color:var(--r-ink);font-weight:640;}
.umc-rs .umc-rs-intro a{
    color:var(--r-accent-txt);text-decoration:underline;
    text-underline-offset:2px;text-decoration-thickness:1px;
}
.umc-rs .umc-rs-intro a:hover{color:var(--r-accent-hover);}

/* Sur telephone le texte respire moins : on reduit l'ecart avant les filtres. */
@media (max-width:700px){
    .umc-rs .umc-rs-intro{padding:18px 0 0;}
    .umc-rs .umc-rs-intro p{font-size:15px;}
    .umc-rs .umc-rs-intro p:first-child{font-size:16px;}
}

/* --------------------------------------- Presentation en pied de page */
.umc-rs .umc-rs-intro--pied{
    max-width:none;
    margin-top:34px;padding:26px 0 8px;
    border-top:1px solid var(--r-line);
}
/* ⛔ Deux colonnes SEULEMENT au-dela de 1100 px : en dessous, une colonne de
      texte coupee en deux donne des lignes de six mots. */
@media (min-width:1100px){
    .umc-rs .umc-rs-intro--pied{
        column-count:2;column-gap:48px;
    }
    /* Un paragraphe ne doit pas etre coupe entre deux colonnes. */
    .umc-rs .umc-rs-intro--pied p{break-inside:avoid;}
}
/* En pied, le premier paragraphe n'a plus a etre mis en avant : il n'ouvre
   plus la page, il la referme. */
.umc-rs .umc-rs-intro--pied p:first-child{
    font-size:15.5px;color:var(--r-ink-2);
}