/* =============================================================================
   EN-TÊTE UPMYCHAIN — une seule barre, sur toutes les pages.
   Posé le 08/09/2026.

   ⛔ CE QUI N'ALLAIT PAS, mesuré page par page :
      · l'accueil avait un en-tête moderne écrit dans sa propre page ;
      · TOUTES les autres pages gardaient celui du thème Worketic, et il
        changeait de forme selon la page — `wt-headervtwo` sur l'annuaire, la
        recherche et les profils, `wt-headervthhree` sur les pages de contenu ;
      · aucune de ces pages n'avait la bascule clair/sombre ni de menu mobile ;
      · huit liens de navigation en ligne, dont QUATRE menaient à la même page
        de recherche avec un paramètre différent.

   ⭐ LE NETTOYAGE : ces quatre liens deviennent un choix DANS la recherche.
      La barre passe de huit liens à trois, et gagne un moteur.

   ⚠️ Tout est préfixé `umc-hd` : cette feuille est chargée sur des pages qui
      portent encore le gabarit Worketic, et rien ne doit fuir vers lui — ni
      l'inverse. Aucune règle ne cible une balise nue.
   ========================================================================== */

.umc-hd{
    /* Les jetons du site, redéclarés en local : cette barre doit tenir seule si
       elle est un jour posée sur une page qui ne charge pas `refonte.css`. */
    --h-ink:var(--umc-ink,#101114);
    --h-ink2:var(--umc-ink-2,#3d414a);
    --h-ink3:var(--umc-ink-3,#6b7280);
    --h-line:var(--umc-line,#e7e8ec);
    --h-surface:var(--umc-surface,#fff);
    --h-bg2:var(--umc-bg-2,#fafafb);
    --h-accent:var(--umc-accent,#ff6300);
    --h-accent-txt:var(--umc-accent-txt,#9a3b00);
    --h-on-accent:#14100c;

    position:sticky;top:0;z-index:200;
    background:color-mix(in srgb,var(--h-surface) 88%,transparent);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--h-line);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    /* Le gabarit Worketic fait flotter presque tout : on referme derrière lui. */
    clear:both;
}
.umc-hd *{box-sizing:border-box;}
.umc-hd::after{content:"";display:table;clear:both;}

.umc-hd-in{
    max-width:1240px;margin:0 auto;padding:0 24px;
    display:flex;align-items:center;gap:20px;height:64px;
}

/* ---------------------------------------------------------------- le logo --- */
.umc-hd-logo{
    display:block;flex:0 0 auto;width:172px;height:32px;
    /* LOGO-DE-LA-MARQUE-20260909 : `/images/logo.png` est le logo livre avec le
       theme — il affiche « Workotic ». Il s'affichait en haut de chaque page,
       y compris des mentions legales, a la place de la marque du site. Le vrai
       logo etait pourtant deja dans la page, en <img>, mais masque par la regle
       du dessous.
       📏 Un logo est la premiere affirmation d'une page : celle qui dit chez qui
          l'on se trouve. */
    background:url("/uploads/settings/general/upmychain-logo.png") left center / contain no-repeat;
    text-indent:-9999px;overflow:hidden;
}
html[data-theme="dark"] .umc-hd-logo{filter:brightness(0) invert(1);}
.umc-hd-logo img{display:none;}

/* ------------------------------------------------------------ la recherche --- */
/* ⭐ Elle remplace quatre liens de navigation. Le type de recherche est un
   choix DANS le champ, pas une entrée de menu séparée. */
.umc-hd-rech{
    flex:1 1 auto;min-width:0;max-width:560px;
    display:flex;align-items:stretch;
    border:1px solid var(--h-line);border-radius:11px;
    background:var(--h-surface);
    transition:border-color .15s,box-shadow .15s;
}
.umc-hd-rech:focus-within{
    border-color:var(--h-accent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--h-accent) 16%,transparent);
}
.umc-hd-rech select,
.umc-hd-rech input{
    border:0;background:transparent;font:inherit;font-size:14px;
    color:var(--h-ink);padding:0 12px;min-width:0;height:38px;
}
.umc-hd-rech select:focus,
.umc-hd-rech input:focus{outline:none;}
.umc-hd-rech select{
    flex:0 0 auto;max-width:132px;color:var(--h-ink2);
    border-right:1px solid var(--h-line);border-radius:11px 0 0 11px;
    cursor:pointer;
    /* Sans cela le thème sombre rend un menu blanc illisible. */
    background:transparent;
}
.umc-hd-rech .umc-hd-quoi{flex:1 1 58%;}
.umc-hd-rech .umc-hd-ou{flex:1 1 42%;border-left:1px solid var(--h-line);}
.umc-hd-rech input::placeholder{color:var(--h-ink3);opacity:1;}
.umc-hd-rech button{
    flex:0 0 auto;width:42px;border:0;cursor:pointer;
    border-radius:0 10px 10px 0;
    background:var(--h-accent);color:var(--h-on-accent);
    display:inline-flex;align-items:center;justify-content:center;
}
.umc-hd-rech button:hover{filter:brightness(.94);}
.umc-hd-rech button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}

/* ------------------------------------------------------------ navigation --- */
.umc-hd-nav{display:flex;align-items:center;gap:18px;flex:0 0 auto;}
.umc-hd-nav a{
    font-size:14.5px;color:var(--h-ink2);text-decoration:none;
    padding:6px 0;position:relative;white-space:nowrap;
}
.umc-hd-nav a:hover{color:var(--h-ink);}
.umc-hd-nav a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
    background:var(--h-accent);transition:right .18s ease;
}
.umc-hd-nav a:hover::after{right:0;}

/* --------------------------------------------------------------- actions --- */
.umc-hd-act{display:flex;align-items:center;gap:9px;flex:0 0 auto;}

.umc-hd-theme{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;flex:0 0 auto;
    background:transparent;border:1px solid var(--h-line);border-radius:9px;
    color:var(--h-ink2);cursor:pointer;transition:border-color .15s,color .15s;
}
.umc-hd-theme:hover{border-color:var(--h-accent);color:var(--h-accent-txt);}
.umc-hd-theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.umc-hd-theme .umc-hd-lune{display:none;}
html[data-theme="dark"] .umc-hd-theme .umc-hd-lune{display:block;}
html[data-theme="dark"] .umc-hd-theme .umc-hd-soleil{display:none;}

/* Les boutons. `!important` parce que le thème pose `.btn` en global avec sa
   propre couleur — c'est une bataille de spécificité, pas un choix de style. */
.umc-hd-btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-size:14.5px;font-weight:560;padding:9px 17px;border-radius:10px;
    border:1px solid transparent;white-space:nowrap;text-decoration:none!important;
    transition:background .15s,border-color .15s,color .15s;
}
.umc-hd-btn--fant{
    border-color:var(--h-line)!important;
    color:var(--h-ink2)!important;background:var(--h-surface)!important;
}
.umc-hd-btn--fant:hover{border-color:#c9ccd3!important;color:var(--h-ink)!important;}
.umc-hd-btn--plein{
    background:var(--h-accent)!important;color:var(--h-on-accent)!important;
    border-color:var(--h-accent)!important;
}
.umc-hd-btn--plein:hover{filter:brightness(.94);}

.umc-hd-user{
    display:flex;align-items:center;gap:9px;min-width:0;
    font-size:14.5px;color:var(--h-ink2)!important;text-decoration:none!important;
}
.umc-hd-user img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;}
.umc-hd-user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.umc-hd-burger{
    display:none;background:none;border:0;padding:8px;cursor:pointer;flex:0 0 auto;
}
.umc-hd-burger span{
    display:block;width:20px;height:1.7px;background:var(--h-ink);margin:4px 0;
    transition:transform .2s,opacity .2s;
}
.umc-hd-burger[aria-expanded="true"] span:first-child{transform:translateY(5.7px) rotate(45deg);}
.umc-hd-burger[aria-expanded="true"] span:last-child{transform:translateY(-5.7px) rotate(-45deg);}

/* =============================== RESPONSIVE ================================
   ⛔ Les seuils viennent de mesures, pas d'habitudes :
      · sous 1180 px la recherche + 3 liens + 2 boutons ne tiennent plus
        ensemble sur 1 240 px de large ;
      · sous 900 px la recherche à deux champs devient illisible ;
      · sous 380 px le nom du compte poussait la page en défilement horizontal
        — d'où `min-width:0` et l'ellipse.
   ========================================================================= */

@media (max-width:1180px){
    .umc-hd-nav{display:none;}
    .umc-hd-burger{display:block;}
    .umc-hd-in{gap:14px;}

    /* Le menu déroulé : il descend sous la barre, il ne la déforme pas. */
    .umc-hd-nav.umc-hd-ouvert{
        display:flex;position:fixed;inset:64px 0 auto 0;
        flex-direction:column;align-items:stretch;gap:0;
        background:var(--h-surface);
        padding:6px 24px 18px;border-bottom:1px solid var(--h-line);
        box-shadow:0 12px 28px rgba(16,17,20,.10);
        max-height:calc(100vh - 64px);overflow-y:auto;
    }
    .umc-hd-nav.umc-hd-ouvert a{
        padding:13px 0;border-bottom:1px solid var(--h-line);font-size:16px;
    }
    .umc-hd-nav.umc-hd-ouvert a::after{display:none;}
}

@media (max-width:900px){
    .umc-hd-rech .umc-hd-ou{display:none;}
    .umc-hd-rech select{max-width:112px;}
    .umc-hd-logo{width:148px;height:29px;}
}

@media (max-width:720px){
    .umc-hd-in{padding:0 16px;gap:10px;}
    .umc-hd-rech select{display:none;}
    .umc-hd-btn--fant{display:none;}      /* « Connexion » vit dans le menu */
    .umc-hd-logo{width:132px;height:26px;}
}

@media (max-width:420px){
    .umc-hd-rech{max-width:none;}
    .umc-hd-theme{width:34px;height:34px;}
    .umc-hd-btn{padding:8px 13px;font-size:14px;}
    .umc-hd-user span{max-width:78px;}
}

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

/* ------------------------------------------------- accessibilité & détails --- */
/* Les libellés des champs existent pour un lecteur d'écran mais ne s'affichent
   pas : un `placeholder` seul ne nomme pas un champ. */
.umc-hd .umc-hd-sr{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* « Connexion » n'apparaît dans le menu que là où le bouton disparaît de la
   barre. Sans cette règle, le lien serait affiché deux fois sur grand écran. */
.umc-hd .umc-hd-nav-mob{display:none;}
@media (max-width:720px){
    .umc-hd .umc-hd-nav.umc-hd-ouvert .umc-hd-nav-mob{display:block;}
}
/* Un champ visité au clavier doit se voir, y compris à l'intérieur du bloc. */
.umc-hd a:focus-visible,
.umc-hd button:focus-visible,
.umc-hd select:focus-visible,
.umc-hd input:focus-visible{
    outline:2px solid var(--h-accent);outline-offset:2px;
}

/* ------------------------------------------------- la version réduite --- */
/* Parcours d'inscription et complétion de profil : logo et bascule de thème,
   rien d'autre. Même hauteur, même logo, même trait sous la barre — c'est ce
   qui fait que ça reste LE MÊME en-tête, pas un second. */
.umc-hd--nu .umc-hd-vide{flex:1 1 auto;}
.umc-hd--nu .umc-hd-in{gap:16px;}

/* `refonte.css` habille `.umc-theme-toggle` pour l'ancien en-tete. Mon bouton
   porte cet identifiant — pour profiter du garde anti-doublon — mais pas cette
   classe : les deux jeux de regles ne se croisent donc pas. Et si une console
   injecte malgre tout une bascule ici, on la masque plutot que de laisser la
   barre grandir de 37 px. */
.umc-hd .umc-theme-toggle:not(.umc-hd-theme){display:none!important;}

/* ==================== TELEPHONE : la recherche prend sa ligne ==============
   Mesure a 360 px (348 px utiles) AVANT correction : la barre demandait 392 px.
       logo 132 · recherche ECRASEE A 2 px · actions 222
   La recherche absorbait tout le manque et devenait un trait : presente,
   inutilisable. Et « Créer un compte » fait 134 px sans retrecir.
   ========================================================================= */

/* Une recherche ne descend jamais sous une largeur ou l'on peut lire ce qu'on
   tape. Si la place manque, c'est la ligne qui change, pas le champ qui meurt. */
.umc-hd-rech{min-width:168px;}

.umc-hd-long{display:inline;}
.umc-hd-court{display:none;}

@media (max-width:620px){
    .umc-hd-in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;row-gap:9px;}
    .umc-hd-logo{order:1;}
    .umc-hd-act{order:2;margin-left:auto;}
    .umc-hd-rech{order:3;flex:1 0 100%;max-width:none;min-width:0;}
    /* Le menu deroule part de sous la barre, dont la hauteur n'est plus fixe.
       ⛔ On ne passe PAS `.umc-hd` en `position:relative` : ca annulerait le
          `sticky`, donc la barre cesserait de suivre le defilement — la ou elle
          sert le plus. Un element `sticky` etablit deja le bloc conteneur. */
    .umc-hd-nav.umc-hd-ouvert{inset:auto 0 auto 0;position:absolute;top:100%;}
}

@media (max-width:560px){
    .umc-hd-long{display:none;}
    .umc-hd-court{display:inline;}
}

/* ---- Les tres petites largeurs, au pixel pres --------------------------- */
/* 360 px : boite 348 - 32 de marge = 316 utiles.
   Demande avant correction : logo 132 + ecart 10 + actions 183 = 325.
   Il manquait NEUF pixels — et la barre passait a trois lignes. */
@media (max-width:420px){
    .umc-hd-in{padding-left:12px;padding-right:12px;}
    .umc-hd-logo{width:104px;height:24px;}
}
@media (max-width:380px){
    .umc-hd-in{gap:8px;}
    .umc-hd-logo{width:88px;height:22px;}
}