/* AUTAF — polish mobile (branding fs2). Sur-couche ADDITIVE de build/css/theme.css.
 * Raison : ce VPS n'a pas de toolchain SCSS (ni sass ni node_modules) et theme.css
 * fait ~1,9 Mo → pas de rebuild synchrone (OOM). À replier dans les partials SCSS au
 * prochain rebuild outillé. Charte DESIGN.md : navy #241B5D, jaune Stabilo #FFE72B,
 * off-white #FAFAF7, General Sans. Dette UX mobile D-UX-1 / D-UX-2 / D-UX-4.
 * Bans respectés : pas d'orange, pas de gradient, pas de side-stripe accent, pas d'emoji. */

/* ===================== D-UX-2 — Menu mobile (drawer) : identité fs2 ===================== */
.autaf-header-drawer__head {
    background: #241B5D;
    border-bottom: 3px solid #FFE72B;
    padding: 15px 18px;
}
/* !important nécessaire : `body .c-blue{color:#241B5D !important}` (theme.css) rendait
 * sinon le titre « Navigation » navy sur fond navy = invisible (constat Philippe 2026-07-13). */
.autaf-header-drawer__head .c-blue { color: #ffffff !important; letter-spacing: -0.01em; }
.autaf-header-drawer__close {
    color: #ffffff;
    opacity: 0.85;
    transition: color 0.18s ease, opacity 0.18s ease;
}
.autaf-header-drawer__close:hover,
.autaf-header-drawer__close:focus-visible { color: #FFE72B; opacity: 1; }

.autaf-header-drawer__nav { padding: 12px; }
.autaf-header-drawer__list { margin: 0; padding: 0; list-style: none; }
.autaf-header-drawer__link {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    color: #241B5D;
    transition: background 0.18s ease;
}
.autaf-header-drawer__link:hover,
.autaf-header-drawer__link:focus-visible { background: #FAFAF7; }
.autaf-header-drawer__link--sub { font-weight: 500; color: #4a4468; min-height: 44px; }
.autaf-header-drawer__group-summary { cursor: pointer; }
.autaf-header-drawer__group-summary svg { transition: transform 0.18s ease; }
.autaf-header-drawer__group[open] .autaf-header-drawer__group-summary svg,
details[open] > .autaf-header-drawer__group-summary svg { transform: rotate(180deg); }

/* ===================== D-UX-1 — Actions rapides (raccourcis visibles en mobile) ===================== */
.autaf-drawer-quick {
    padding: 4px 0 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #e7e5f0;
}
.autaf-drawer-quick__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    background: #241B5D;
    color: #FFE72B;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.autaf-drawer-quick__cta:hover,
.autaf-drawer-quick__cta:focus-visible { background: #FFE72B; color: #241B5D; }
.autaf-drawer-quick__cta svg { width: 20px; height: 20px; }

/* ===================== D-UX-4 — Nudge de conversion honnête (valeur = protection) ===================== */
.autaf-drawer-pro {
    display: block;
    margin: 12px 0 4px;
    background: #241B5D;
    color: #ffffff;
    border-radius: 14px;
    padding: 15px 16px;
    text-decoration: none;
    transition: transform 0.18s ease;
}
.autaf-drawer-pro:hover,
.autaf-drawer-pro:focus-visible { transform: translateY(-1px); }
.autaf-drawer-pro__eyebrow {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #241B5D;
    background: #FFE72B;
    padding: 2px 8px;
    border-radius: 5px;
}
.autaf-drawer-pro__title { display: block; margin-top: 8px; font-weight: 700; font-size: 1.06rem; color: #ffffff; }
.autaf-drawer-pro__desc { display: block; margin-top: 4px; font-size: 0.85rem; line-height: 1.4; color: #cdc8ee; }

/* Bottom-nav : indice de découverte Pro (non-Pro) — sobre, honnête, pas de fausse urgence.
   Une simple pastille jaune signale « il y a un espace Pro ici », rien de plus. */
.autaf-mobile-bottom-nav__item--hint .autaf-mobile-bottom-nav__icon { position: relative; }
.autaf-mobile-bottom-nav__item--hint .autaf-mobile-bottom-nav__icon::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFE72B;
    border: 1.5px solid #ffffff;
}

/* ===================== Fix — CTA relance « Demander un avis » (dashboard entreprise) =====================
 * Constat Philippe 2026-07-13 : titre « Chantier terminé ? » + sous-titre « Un avis client en 60 s… »
 * en navy sur fond navy = invisibles, et bloc « très grand » sur mobile.
 * Cause : le clone MOBILE du bloc est monté dans .woocommerce-MyAccount-content, où la règle globale
 * `body .woocommerce-MyAccount-content p { color:#241B5D }` (spécificité 0,1,2) écrasait
 * `.autaf-sidebar-relance__title/__sub` (0,1,0) → texte navy. Le `p` mobile force aussi font-size:15px
 * → bloc ballonné. On rétablit blanc/off-blanc + on borne les tailles. Spécificité (0,2,0) > (0,1,2). */
.autaf-sidebar-relance .autaf-sidebar-relance__title {
    color: #ffffff;
    font-size: 13.5px;
    line-height: 1.3;
}
.autaf-sidebar-relance .autaf-sidebar-relance__sub {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.4;
}
/* Compacité du clone mobile (pleine largeur) : CTA net, pas un pavé. */
.woocommerce-MyAccount-content .autaf-sidebar-relance {
    padding: 13px 15px;
    margin: 10px 0 6px;
}
.woocommerce-MyAccount-content .autaf-sidebar-relance__btn {
    color: #241B5D;
    font-size: 12.5px;
}

/* ===================== Cloche notifications MOBILE (décision Philippe 2026-07-13) =====================
 * Accès notifications sur mobile (avant : uniquement enfoui dans le menu). Icône blanche sur le
 * header navy, cible tap 44px, badge jaune (non-lus) alimenté par le JS partagé de la cloche. */
.autaf-mobile-notifs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    color: #ffffff !important;   /* icône blanche : bat les couleurs de lien génériques sur header navy */
    text-decoration: none;
    transition: color 0.18s ease;
}
.autaf-mobile-notifs:hover,
.autaf-mobile-notifs:focus-visible { color: #FFE72B !important; }
.autaf-mobile-notifs__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 700;
}

/* ===================== #2 — « Mes notifications » : barre de filtres qui ne déborde plus =====================
 * Constat Philippe : en mobile la rangée de pills débordait le body (overflow-x:auto SANS max-width dans
 * _refonte-batch3-notifications-recues.scss) → scroll horizontal de la page + bouton « Tout marquer comme
 * lu » hors écran. On borne la barre à la largeur du parent → le scroll devient INTERNE à la barre. */
.batch3-notifs__filters { max-width: 100%; min-width: 0; }

/* ===================== #3 — Filigrane de fond = vrai logo AUTAF (au lieu du texte « AUTAF » dessiné) =====================
 * Override de body.woocommerce-account::before (défini _a11y-ux-fixes.scss, ADR 0121). On garde la
 * position/fixed/z-index d'origine (héritées du raccourci) et on remplace juste l'image + la taille +
 * une opacité de filigrane. Vrai wordmark : uploads/2025/07/logo_autaf-600x99.png. */
body.woocommerce-account::before {
    background-image: url("/wp-content/uploads/2025/07/logo_autaf-600x99.png");
    background-size: 300px auto;
    opacity: 0.12;
}

/* ===================== #6 — Pagination des chantiers disponibles (on-brand) ===================== */
.autaf-prop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 9px;
    border: 1px solid #e7e5f0;
    background: #ffffff;
    color: #241B5D;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.autaf-prop-pagination a.page-numbers:hover { background: #FAFAF7; border-color: #cfcbe6; }
.autaf-prop-pagination .page-numbers.current { background: #241B5D; color: #ffffff; border-color: #241B5D; }
.autaf-prop-pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* ===================== AUDIT 2026-07-13 — Textes invisibles (Pattern A : <p> sur carte navy) =====================
 * Cause : `body .woocommerce-MyAccount-content p{color:#241B5D}` (non-important) écrase la couleur
 * voulue des <p> posés sur des cartes NAVY → navy-sur-navy = invisible. On restaure la couleur voulue
 * avec !important (bat la règle p quelle que soit sa spécificité). Éléments confirmés par l'audit. */
.dashboard-artisan-solo__astuce-eyebrow { color: #FFE72B !important; }   /* « Astuce du jour » (jaune voulu) */
.dashboard-artisan-solo__astuce-body    { color: #ffffff !important; }   /* corps de l'astuce (blanc voulu) */
.autaf-cvr-card__figure-label           { color: #ffffff !important; }   /* label carte « LE CHIFFRE AUTAF » */
.autaf-cvr-card__figure-value           { color: #FFE72B !important; }   /* le chiffre (jaune voulu) */

/* Forme du CTA abonnement : éviter l'ovale/cercle quand le libellé passe sur plusieurs lignes
 * dans une colonne étroite (border-radius:999px sur bouton multi-ligne). Coin arrondi net. */
.refonte-abopro__cta { border-radius: 12px !important; }

/* ===================== AUDIT lot 2 — Cartes artisan : lisibilité du texte sur le logo (F1) =====================
 * card_author.php pose du texte BLANC (nom/note/ville) en bas, par-dessus le logo importé (object-fit:cover)
 * sans voile → illisible sur logos clairs/chargés. On ajoute un SCRIM linéaire navy (fonctionnel, pas un
 * halo déco) sur le bas de la carte, et on remonte le texte au-dessus. Charte : navy, formes franches. */
/* Scope au SEUL card_author (texte blanc sur logo). card_chantier partage `.card-link .card.hover-card`
 * mais a du texte NAVY → on l'exclut via :has(.card-content) (classe présente uniquement sur card_author). */
.card-link .card.hover-card:has(.card-content.text-white)::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 72%;
    background: linear-gradient(to top, rgba(15,10,53,0.94) 0%, rgba(15,10,53,0.78) 38%, rgba(15,10,53,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.card-link .card-content.text-white { position: absolute; z-index: 2; }

/* ===================== AUDIT lot 2 — Bouton « Proposer une équipe » (C2 : ovale/cercle en PC) =====================
 * .btn-secondary.mini (min-width:140px, radius 24px) : dans une carte étroite (grille 3 col PC) le libellé
 * passait sur 3 lignes → pilule très haute = ovale. On force 1 seule ligne + on laisse la rangée passer à
 * la ligne si besoin (au lieu d'écraser le bouton), et on borne le radius. */
[data-team-cta-url] { white-space: nowrap; border-radius: 12px !important; }
.card_chantier [data-team-cta-url] { flex: 0 1 auto; min-width: 0; }
.card_chantier .d-flex.justify-content-between:has([data-team-cta-url]) { flex-wrap: wrap; row-gap: 8px; }

/* ===================== AUDIT lot 2 — Messages : boutons d'état vide tronqués (C1) =====================
 * « Démarre une conversation » : les 2 CTA (équipes/réseau/employeurs) étaient en ligne dans une colonne
 * étroite → libellés coupés (« Voir mes équip… ») sur tous les comptes en PC. On les empile proprement,
 * pleine largeur, texte non coupé. Charte : primaire navy, secondaire contour navy. */
.batch3-messages__empty-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}
.batch3-messages__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    text-align: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.25;
}
/* Fix 2026-07-15 — texte blanc en !important : theme.css force color:#241B5D !important sur ce bouton,
   ce qui donnait navy-sur-navy (texte invisible) une fois le fond passé en navy ici. */
.batch3-messages__empty-cta--primary { background: #241B5D; color: #ffffff !important; border: 1px solid #241B5D; }
.batch3-messages__empty-cta--primary:hover { background: #0F0A35; color: #ffffff !important; }
.batch3-messages__empty-cta--ghost { background: #ffffff; color: #241B5D; border: 1px solid #241B5D; }
.batch3-messages__empty-cta--ghost:hover { background: #FAFAF7; color: #241B5D; }